Part 3: Look up named view timeline for CSS animations and update WPT…

… expectations. Disable OMTA support for now. We have to make sure what should we do when the subject is scrolled to "out of view" on the compositor, in Bug 1818346. And we have to make sure view-timeline-inset animation work well on the compositor. Also, update tests, 1) timeline-offset-keyframes-hidden-subject.html, and 2) view-timeline-keyframe-boundary-interpolation.html, to avoid js error because Gecko doesn't expose Animation object with scroll-timeline or view-timeline. And update test, view-timeline-lookup.html, because scroll progress timelines take precedence over view progress timelines (i.e. choose the matched scroll progress timeline first), per the spec in https://drafts.csswg.org/scroll-animations-1/#timeline-scope. Differential Revision: https://phabricator.services.mozilla.com/D170004 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1737920 gecko-commit: 15841f7c7d94c52c023012b0c085574178198027 gecko-reviewers: emilio
web-platform-tests · Jan 26, 2024 · 1128296 · 1128296
1 parent 9c55a34
commit 1128296
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 8 deletions.
diff --git a/scroll-animations/css/timeline-offset-keyframes-hidden-subject.html b/scroll-animations/css/timeline-offset-keyframes-hidden-subject.html
@@ -62,7 +62,10 @@
   async function runTest() {
     promise_test(async t => {
       await waitForNextFrame();
-      const anim = document.getAnimations()[0];
+      const anims = document.getAnimations();
+      assert_equals(anims.length, 1,
+                    "Should have one animation attatched to the view-timeline");
+      const anim = anims[0];
       await anim.ready;
       await waitForNextFrame();
 

diff --git a/scroll-animations/css/timeline-range-name-offset-in-keyframes.tentative.html b/scroll-animations/css/timeline-range-name-offset-in-keyframes.tentative.html
@@ -51,7 +51,6 @@
       // scrollTop=200 to 400 is the entry range
       container.scrollTop = 200;
       await waitForNextFrame();
-      const anim = document.getAnimations()[0];
       assert_equals(getComputedStyle(subject).opacity, '0',
                     'Effect at entry 0%');
 

diff --git a/scroll-animations/css/view-timeline-animation.html b/scroll-animations/css/view-timeline-animation.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <title>Animations using view-timeline</title>
+<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
 <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#view-timelines-named">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>

diff --git a/scroll-animations/css/view-timeline-inset-animation.html b/scroll-animations/css/view-timeline-inset-animation.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <title>Animations using view-timeline-inset</title>
+<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
 <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#propdef-view-timeline-inset">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>

diff --git a/scroll-animations/css/view-timeline-keyframe-boundary-interpolation.html b/scroll-animations/css/view-timeline-keyframe-boundary-interpolation.html
@@ -80,7 +80,10 @@
 
     promise_test(async t => {
       await waitForNextFrame();
-      const anim = document.getAnimations()[0];
+      const anims = document.getAnimations();
+      assert_equals(anims.length, 1,
+                    "Should have one animation attatched to the view-timeline");
+      const anim = anims[0];
       await anim.ready;
       await waitForNextFrame();
 

diff --git a/scroll-animations/css/view-timeline-lookup.html b/scroll-animations/css/view-timeline-lookup.html
@@ -260,8 +260,7 @@
   }, 'view-timeline on ancestor sibling, closer scroll-timeline wins');
 </script>
 
-
-<template id=timeline_ancestor_view_timeline_wins_on_same_element>
+<template id=timeline_ancestor_scroll_timeline_wins_on_same_element>
   <style>
     #timelines {
       height: 0px;
@@ -294,8 +293,11 @@
 </template>
 <script>
   promise_test(async (t) => {
-    inflate(t, timeline_ancestor_view_timeline_wins_on_same_element);
+    inflate(t, timeline_ancestor_scroll_timeline_wins_on_same_element);
     await waitForNextFrame();
-    assert_equals(getComputedStyle(target).zIndex, '75');
-  }, 'view-timeline on ancestor sibling, view-timeline wins on same element');
+    // In case of a name conflict on the same element, scroll progress timelines
+    // take precedence over view progress timelines.
+    // https://drafts.csswg.org/scroll-animations-1/#timeline-scope
+    assert_equals(getComputedStyle(target).zIndex, '0');
+  }, 'view-timeline on ancestor sibling, scroll-timeline wins on same element');
 </script>