[scroll-animations] The animation shorthand should set timeline to auto

We currently allow the timeline to be specified as part of the animation shorthand. This is (for now) incorrect per a recent CSSWG resolution [1]. This CL changes all WPTs to use the animation-timeline longhand instead. I've also added a setup assertion (or equivalent) to many tests to prevent UAs without support for animation-timeline from running the animations on the document timeline (which could lead to unstable/timing-dependent failure results). [1] w3c/csswg-drafts#6946 (comment) Fixed: 1397870 Change-Id: I97cd13481ea00a074f50c132562d9bb83e7bc4dd
web-platform-tests · Dec 7, 2022 · 2dcd58a · 2dcd58a
1 parent 20232cc
commit 2dcd58a
Show file tree

Hide file tree

Showing 21 changed files with 253 additions and 123 deletions.
diff --git a/scroll-animations/css/animation-shorthand.html b/scroll-animations/css/animation-shorthand.html
@@ -10,45 +10,23 @@
 <script>
 test_valid_value('animation',
   '1s linear 1s 2 reverse forwards paused anim');
-test_valid_value('animation',
-  '1s linear 1s 2 reverse forwards paused anim timeline');
-test_valid_value('animation',
-  '1s linear 1s 2 reverse forwards paused anim none');
-test_valid_value('animation',
-  '1s linear 1s 2 reverse forwards paused anim "initial"');
-test_valid_value('animation',
-  '1s linear 1s 2 reverse forwards paused anim auto',
-  '1s linear 1s 2 reverse forwards paused anim');
-test_valid_value('animation',
-  '1s linear 1s 2 reverse forwards paused anim scroll()');
 
 test_invalid_value('animation',
   '1s linear 1s 2 reverse forwards paused anim initial');
 test_invalid_value('animation',
   '1s linear 1s 2 reverse forwards paused anim 2000');
 test_invalid_value('animation',
-  '1s linear 1s 2 reverse forwards paused anim scroll(abc block)');
-test_invalid_value('animation',
-  '1s linear 1s 2 reverse forwards paused anim scroll(inline abc)');
-test_invalid_value('animation',
-  '1s linear 1s 2 reverse forwards paused anim scroll(abc)');
+  '1s linear 1s 2 reverse forwards paused anim scroll()');
 test_invalid_value('animation',
-  '1s linear 1s 2 reverse forwards paused anim scroll("string")');
-
-test_computed_value('animation',
-  '1s linear 1s 2 reverse forwards paused anim');
-test_computed_value('animation',
   '1s linear 1s 2 reverse forwards paused anim timeline');
+
 test_computed_value('animation',
-  '1s linear 1s 2 reverse forwards paused anim none');
-test_computed_value('animation',
-  '1s linear 1s 2 reverse forwards paused anim auto',
   '1s linear 1s 2 reverse forwards paused anim');
 
 test_shorthand_value('animation',
-  `1s linear 1s 2 reverse forwards paused anim1 timeline,
-   1s linear 1s 2 reverse forwards paused anim2 none,
-   1s linear 1s 2 reverse forwards paused anim3 auto`,
+  `1s linear 1s 2 reverse forwards paused anim1,
+   1s linear 1s 2 reverse forwards paused anim2,
+   1s linear 1s 2 reverse forwards paused anim3`,
 {
   'animation-duration': '1s, 1s, 1s',
   'animation-timing-function': 'linear, linear, linear',
@@ -58,6 +36,6 @@
   'animation-fill-mode': 'forwards, forwards, forwards',
   'animation-play-state': 'paused, paused, paused',
   'animation-name': 'anim1, anim2, anim3',
-  'animation-timeline': 'timeline, none, auto'
+  'animation-timeline': 'auto, auto, auto'
 });
 </script>
diff --git a/scroll-animations/css/animation-timeline-named-scroll-progress-timeline.tentative.html b/scroll-animations/css/animation-timeline-named-scroll-progress-timeline.tentative.html
@@ -39,6 +39,8 @@
 <script>
 "use strict";
 
+setup(assert_implements_animation_timeline);
+
 function createScroller(t, scrollerSizeClass) {
   let scroller = document.createElement('div');
   let className = scrollerSizeClass || 'square';
@@ -89,7 +91,8 @@
   target.appendChild(content);
 
   target.style.scrollTimelineName = 'timeline';
-  target.style.animation = "anim 10s linear timeline";
+  target.style.animation = "anim 10s linear";
+  target.style.animationTimeline = 'timeline';
 
   target.scrollTop = 50; // 50%, in [0, 100].
   await waitForNextFrame();
@@ -111,7 +114,8 @@
   parent.insertBefore(target, parent.firstElementChild);
 
   parent.style.scrollTimelineName = 'timeline';
-  target.style.animation = "anim 10s linear timeline";
+  target.style.animation = "anim 10s linear";
+  target.style.animationTimeline = 'timeline';
 
   parent.scrollTop = 100; // 50%, in [0, 200].
   await waitForNextFrame();
@@ -128,7 +132,8 @@
   document.body.appendChild(target);
 
   sibling.style.scrollTimelineName = 'timeline';
-  target.style.animation = "anim 10s linear timeline";
+  target.style.animation = "anim 10s linear";
+  target.style.animationTimeline = 'timeline';
 
   sibling.scrollTop = 50; // 50%, in [0, 100].
   await waitForNextFrame();
@@ -149,7 +154,8 @@
   parent.appendChild(target);
 
   sibling.style.scrollTimelineName = 'timeline';
-  target.style.animation = "anim 10s linear timeline";
+  target.style.animation = "anim 10s linear";
+  target.style.animationTimeline = 'timeline';
 
   sibling.scrollTop = 50; // 50%, in [0, 100].
   await waitForNextFrame();
@@ -170,7 +176,8 @@
   document.body.appendChild(sibling);
 
   sibling.style.scrollTimelineName = 'timeline';
-  target.style.animation = "anim 10s linear timeline";
+  target.style.animation = "anim 10s linear";
+  target.style.animationTimeline = 'timeline';
 
   sibling.scrollTop = 50; // 50%, in [0, 100].
   await waitForNextFrame();
@@ -199,7 +206,8 @@
   parent.style.scrollTimelineName = 'timeline';
   parent.style.scrollTimelineAxis = 'inline';
   sibling.style.scrollTimelineName = 'timeline';
-  target.style.animation = "anim 10s linear timeline";
+  target.style.animation = "anim 10s linear";
+  target.style.animationTimeline = 'timeline';
 
   parent.scrollTop = 50; // 25%, in [0, 200].
   sibling.scrollTop = 50; // 50%, in [0, 100].
@@ -224,7 +232,8 @@
   document.body.appendChild(target);
 
   sibling.style.scrollTimelineName = 'timeline';
-  target.style.animation = "anim 10s linear timeline";
+  target.style.animation = "anim 10s linear";
+  target.style.animationTimeline = 'timeline';
 
   sibling.scrollTop = 50; // 50%, in [0, 100].
   await waitForNextFrame();
@@ -248,7 +257,8 @@
   main.appendChild(sibling);
   main.appendChild(target);
 
-  target.style.animation = 'anim 10s linear timeline';
+  target.style.animation = 'anim 10s linear';
+  target.style.animationTimeline = 'timeline';
   sibling.scrollTop = 50; // 50%, in [50, 150].
   await waitForNextFrame();
 
@@ -270,7 +280,8 @@
   // <div id='target'></div>
   document.body.appendChild(target);
 
-  target.style.animation = 'anim 10s linear timeline';
+  target.style.animation = 'anim 10s linear';
+  target.style.animationTimeline = 'timeline';
 
   // Unknown animation-timeline, current time held at zero.
   assert_equals(getComputedStyle(target).translate, '50px');
@@ -302,7 +313,8 @@
   await waitForNextFrame();
 
   scroller.style.scrollTimelineName = 'timeline';
-  target.style.animation = 'anim 10s linear timeline';
+  target.style.animation = 'anim 10s linear';
+  target.style.animationTimeline = 'timeline';
   await waitForCSSScrollTimelineStyle();
 
   assert_equals(getComputedStyle(target).translate, '100px');
@@ -329,7 +341,8 @@
   document.body.appendChild(target);
 
   scroller.style.scrollTimelineName = 'timeline';
-  target.style.animation = 'anim 10s linear timeline';
+  target.style.animation = 'anim 10s linear';
+  target.style.animationTimeline = 'timeline';
 
   // Unknown animation-timeline, current time held at zero.
   assert_equals(getComputedStyle(target).translate, '50px');
@@ -353,7 +366,8 @@
   await waitForNextFrame();
 
   scroller.style.scrollTimelineName = 'timeline';
-  target.style.animation = 'anim 10s linear timeline';
+  target.style.animation = 'anim 10s linear';
+  target.style.animationTimeline = 'timeline';
   await waitForCSSScrollTimelineStyle();
 
   assert_equals(getComputedStyle(target).translate, '100px');
@@ -377,7 +391,8 @@
 
   scroller.style.scrollTimelineName = 'timeline';
   scroller.style.display = 'none';
-  target.style.animation = "anim 10s linear timeline";
+  target.style.animation = "anim 10s linear";
+  target.style.animationTimeline = 'timeline';
 
   await waitForNextFrame();
 
@@ -407,7 +422,8 @@
 
   scroller.style.scrollTimelineName = 'timeline-A';
   scroller.scrollTop = 50;
-  target.style.animation = "anim 10s linear timeline-B";
+  target.style.animation = "anim 10s linear";
+  target.style.animationTimeline = 'timeline-B';
 
   await waitForNextFrame();
 
@@ -436,7 +452,8 @@
 
   scroller.style.scrollTimelineName = 'timeline-A';
   scroller.scrollTop = 50;
-  target.style.animation = "anim 10s linear timeline-A";
+  target.style.animation = "anim 10s linear";
+  target.style.animationTimeline = 'timeline-A';
 
   await waitForNextFrame();
 
@@ -458,7 +475,8 @@
   let scroller1 = createScroller(t);
   let scroller2 = createScroller(t);
 
-  target.style.animation = 'anim 10s linear timeline';
+  target.style.animation = 'anim 10s linear';
+  target.style.animationTimeline = 'timeline';
   scroller1.style.scrollTimelineName = 'timeline';
   scroller2.style.scrollTimelineName = 'timeline';
   scroller1.id = 'A';
@@ -496,7 +514,8 @@
   let target = createTarget(t);
   let scroller1 = createScroller(t);
 
-  target.style.animation = 'anim 10s linear timeline';
+  target.style.animation = 'anim 10s linear';
+  target.style.animationTimeline = 'timeline';
   scroller1.style.scrollTimelineName = 'timeline';
   scroller1.id = 'A';
 
@@ -541,7 +560,8 @@
 
   // <div id='target'></div>
   document.body.append(target);
-  target.style.animation = "anim 10s linear timeline";
+  target.style.animation = "anim 10s linear";
+  target.style.animationTimeline = 'timeline';
 
   await waitForNextFrame();
 
@@ -579,7 +599,8 @@
   document.body.appendChild(target);
 
   scroller.style.scrollTimeline = 'timeline block';
-  target.style.animation = "anim 10s linear timeline";
+  target.style.animation = "anim 10s linear";
+  target.style.animationTimeline = 'timeline';
 
   scroller.scrollLeft = 50;
   await waitForNextFrame();
@@ -594,7 +615,8 @@
   document.body.appendChild(target);
 
   scroller.style.scrollTimeline = 'timeline inline';
-  target.style.animation = "anim 10s linear timeline";
+  target.style.animation = "anim 10s linear";
+  target.style.animationTimeline = 'timeline';
 
   scroller.scrollTop = 50;
   await waitForNextFrame();
@@ -609,7 +631,8 @@
   document.body.appendChild(target);
 
   scroller.style.scrollTimeline = 'timeline horizontal';
-  target.style.animation = "anim 10s linear timeline";
+  target.style.animation = "anim 10s linear";
+  target.style.animationTimeline = 'timeline';
 
   scroller.scrollLeft = 50;
   await waitForNextFrame();
@@ -624,7 +647,8 @@
   document.body.appendChild(target);
 
   scroller.style.scrollTimeline = 'timeline vertical';
-  target.style.animation = "anim 10s linear timeline";
+  target.style.animation = "anim 10s linear";
+  target.style.animationTimeline = 'timeline';
 
   scroller.scrollTop = 50;
   await waitForNextFrame();

diff --git a/scroll-animations/css/animation-timeline-scroll-functional-notation.tentative.html b/scroll-animations/css/animation-timeline-scroll-functional-notation.tentative.html
@@ -6,6 +6,7 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/web-animations/testcommon.js"></script>
+<script src="support/testcommon.js"></script>
 <style>
   @keyframes anim {
     from { translate: 50px; }
@@ -43,6 +44,8 @@
 <script>
 "use strict";
 
+setup(assert_implements_animation_timeline);
+
 const root = document.scrollingElement;
 const createTargetWithStuff = function(t, contentClass) {
   let container = document.createElement('div');
@@ -83,7 +86,8 @@
 
 promise_test(async t => {
   let [container, div] = createTargetWithStuff(t, 'block-content');
-  div.style.animation = "anim 10s linear scroll(nearest)";
+  div.style.animation = "anim 10s linear";
+  div.style.animationTimeline = "scroll(nearest)";
 
   await scrollTop(root, 50);
   assert_equals(getComputedStyle(div).translate, '50px');
@@ -96,7 +100,8 @@
 
 promise_test(async t => {
   let [container, div] = createTargetWithStuff(t, 'block-content');
-  div.style.animation = "anim 10s linear scroll(root)";
+  div.style.animation = "anim 10s linear";
+  div.style.animationTimeline = "scroll(root)";
 
   await scrollTop(container, 50);
   assert_equals(getComputedStyle(div).translate, '50px');
@@ -109,7 +114,8 @@
 
 promise_test(async t => {
   let [container, div] = createTargetWithStuff(t, 'inline-content');
-  div.style.animation = "anim 10s linear scroll(inline)";
+  div.style.animation = "anim 10s linear";
+  div.style.animationTimeline = "scroll(inline)";
 
   await scrollLeft(container, 50);
   assert_equals(getComputedStyle(div).translate, '100px');
@@ -118,7 +124,8 @@
 promise_test(async t => {
   let [container, div] = createTargetWithStuff(t, 'block-content');
   container.style.writingMode = 'vertical-lr';
-  div.style.animation = "anim 10s linear scroll(horizontal)";
+  div.style.animation = "anim 10s linear";
+  div.style.animationTimeline = "scroll(horizontal)";
 
   await scrollLeft(container, 50);
   assert_equals(getComputedStyle(div).translate, '100px');
@@ -127,7 +134,8 @@
 promise_test(async t => {
   let [container, div] = createTargetWithStuff(t, 'inline-content');
   container.style.writingMode = 'vertical-lr';
-  div.style.animation = "anim 10s linear scroll(vertical)";
+  div.style.animation = "anim 10s linear";
+  div.style.animationTimeline = "scroll(vertical)";
 
   await scrollTop(container, 50);
   assert_equals(getComputedStyle(div).translate, '100px');

diff --git a/scroll-animations/css/get-animations-inactive-timeline.html b/scroll-animations/css/get-animations-inactive-timeline.html
@@ -6,6 +6,7 @@
  href="https://www.w3.org/TR/web-animations-1/#animation-effect-phases-and-states">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="support/testcommon.js"></script>
 <style>
   @keyframes slide {
     from { transform: translateX(100px);  }
@@ -26,7 +27,8 @@
     background-color:  green;
     height:  100px;
     width:  100px;
-    animation:  slide 1s linear timeline;
+    animation:  slide 1s linear;
+    animation-timeline: timeline;
   }
 </style>
 <body>
@@ -36,6 +38,8 @@
   </div>
 </body>
 <script type="text/javascript">
+  setup(assert_implements_animation_timeline);
+
   promise_test(async t => {
     // Newly created timeline is inactive,
     let animations = document.getAnimations();