Bug 1728947 [wpt PR 30323] - Revert "Integrated Progress based animations with CSS Animations", a=testonly
authorYuki Yamada <yukiy@chromium.org>
Tue, 14 Sep 2021 09:45:47 +0000
changeset 592663 50e9bdfb5fda08ce97570177179da47edd2283e3
parent 592662 34bf1ab6b014f968584f524d212eda765398b6e7
child 592664 0f9a592ce1e09458db2fd63a1004cbcccb95f4d5
push id38811
push usernbeleuzu@mozilla.com
push dateWed, 22 Sep 2021 04:09:13 +0000
treeherdermozilla-central@b6fd43458638 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1728947, 30323, 98587, 1216655, 1140602, 3130703, 917801, 3140514, 917986
milestone94.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1728947 [wpt PR 30323] - Revert "Integrated Progress based animations with CSS Animations", a=testonly Automatic update from web-platform-tests Revert "Integrated Progress based animations with CSS Animations" This reverts commit 149290ad09de842c169957a8a773ba9b07e75b50. Reason for revert: Speculative revert for consistent failure of at-scroll-timeline-dynamic.tentative.html on Linux Tests (dbg)(1). Blamelist of the first failure: https://ci.chromium.org/ui/p/chromium/builders/ci/Linux%20Tests%20(dbg)(1)/98587/blamelist Original change's description: > Integrated Progress based animations with CSS Animations > > Timeline duration can now be stored on an AnimationEffect. > This was needed since for CSS animations, InertEffects with > no owning animation are used until later in the pipeline. > Normally the owning animation of an effect is used to gain > access to the corresponding timeline which provides the timeline > duration needed for timing normalization math, but in some > cases the duration was needed before an effect had an owner > assigned. As such it is now possible to create an InertEffect > and pass in a timeline duration if needed. > > Added logic for when CSS animations swap from progress based > timeline to a time based timeline. This new logic preserves > the current progress of the animation even when current times > do not match up. > > I also removed time range from some CSS tests since they are > now supported by progress based animations. > > Bug: 1216655, 1140602 > Change-Id: I7dde1f117968c6465eb7c4c0f4b8b66d9371776f > Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3130703 > Reviewed-by: Kevin Ellis <kevers@chromium.org> > Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> > Commit-Queue: Jordan Taylor <jortaylo@microsoft.com> > Cr-Commit-Position: refs/heads/main@{#917801} Bug: 1216655, 1140602 Change-Id: I5d993ec0ee6de610347916f8b1fd09d0ea10e34f No-Presubmit: true No-Tree-Checks: true No-Try: true Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3140514 Bot-Commit: Rubber Stamper <rubber-stamper@appspot.gserviceaccount.com> Owners-Override: Yuki Yamada <yukiy@chromium.org> Auto-Submit: Yuki Yamada <yukiy@chromium.org> Commit-Queue: Yuki Yamada <yukiy@chromium.org> Cr-Commit-Position: refs/heads/main@{#917986} -- wpt-commits: 5716a8027bea38107c117d2f6a5ecf2b09ea88de wpt-pr: 30323
testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-cascade.html
testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-dynamic.tentative.html
testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-ignored.tentative.html
testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-source-invalidation.tentative.html
testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-start-end.html
testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-time-range.html
testing/web-platform/tests/scroll-animations/css/scroll-timeline-cssom.tentative.html
--- a/testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-cascade.html
+++ b/testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-cascade.html
@@ -13,21 +13,23 @@
     height: 200px;
   }
   @keyframes expand {
     from { width: 100px; }
     to { width: 200px; }
   }
   @scroll-timeline timeline {
     source: selector(#scroller);
+    time-range: 10s;
     start: 0px;
     end: 100px;
   }
   @scroll-timeline timeline {
     source: selector(#scroller);
+    time-range: 1s;
     start: 0px;
     end: 50px;
   }
   #element {
     animation: expand 10s linear;
     animation-timeline: timeline;
   }
   /* Ensure stable expectations if feature is not supported */
@@ -38,11 +40,11 @@
 <div id=scroller>
   <div id=contents></div>
 </div>
 <div id=element></div>
 <script>
   promise_test(async (t) => {
     scroller.scrollTop = 25;
     await waitForNextFrame();
-    assert_equals(getComputedStyle(element).width, '150px');
+    assert_equals(getComputedStyle(element).width, '105px');
   }, 'Latest @scroll-timeline rule wins');
 </script>
--- a/testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-dynamic.tentative.html
+++ b/testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-dynamic.tentative.html
@@ -55,23 +55,26 @@
   // has a reasonable default.
   function insertScrollTimeline(options) {
     if (typeof(options) == 'undefined')
       options = {};
     if (typeof(options.name) == 'undefined')
       options.name = 'timeline';
     if (typeof(options.source) == 'undefined')
       options.source = 'selector(#scroller1)';
+    if (typeof(options.timeRange) == 'undefined')
+      options.timeRange = '1e10s';
     if (typeof(options.start) == 'undefined')
       options.start = '0px';
     if (typeof(options.end) == 'undefined')
       options.end = '100px';
     return insertSheet(`
       @scroll-timeline ${options.name} {
         source: ${options.source};
+        time-range: ${options.timeRange};
         start: ${options.start};
         end: ${options.end};
       }
     `);
   }
 
   // Runs a test with dynamically added/removed elements or CSS rules.
   // Each test is instantiated twice: once for the initial style resolve where
@@ -99,23 +102,17 @@
     // Verify that the computed style after scrolling a bit.
     instantiate(async (element, expected) => {
       scroller1.scrollTop = scroller1.scrollTop + 1;
       scroller2.scrollTop = scroller2.scrollTop + 1;
       await waitForNextFrame();
       scroller1.scrollTop = scroller1.scrollTop - 1;
       scroller2.scrollTop = scroller2.scrollTop - 1;
       await waitForNextFrame();
-      assert_approx_equals(
-          parseFloat(getComputedStyle(element).width),
-          parseFloat(expected),
-          // converting between progress based scroll timelines and document
-          // timelines has some margin of rounding error, this check makes sure
-          // values are within 1/10th of a pixel.
-          0.1);
+      assert_equals(getComputedStyle(element).width, expected);
     }, description + ' [scroll]');
   }
 
   dynamic_rule_test(async (t, assert_width) => {
     let element = insertElement();
 
     // This element initially has a DocumentTimeline.
     await assert_width(element, '100px');
--- a/testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-ignored.tentative.html
+++ b/testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-ignored.tentative.html
@@ -18,28 +18,31 @@
   }
   @keyframes expand {
     from { width: 100px; }
     to { width: 200px; }
   }
   @scroll-timeline timeline1 {
     source: selector(#scroller1);
     orientation: auto;
+    time-range: 1e10s;
     start: 0px;
     end: 100px;
   }
   @scroll-timeline timeline2 {
     source: selector(#scroller2);
     orientation: auto;
+    time-range: 1e10s;
     start: 0px;
     end: 100px;
   }
   @scroll-timeline timeline3 {
     source: selector(#scroller3);
     orientation: auto;
+    time-range: 1e10s;
     start: 0px;
     end: 100px;
   }
   #element {
     width: 0px;
     height: 20px;
     animation-name: expand;
     animation-duration: 1e10s;
--- a/testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-source-invalidation.tentative.html
+++ b/testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-source-invalidation.tentative.html
@@ -18,16 +18,17 @@
     height: 200px;
   }
   @keyframes expand {
     from { width: 100px; }
     to { width: 200px; }
   }
   @scroll-timeline timeline {
     source: selector(#scroller);
+    time-range: 1e10s;
     start: 0px;
     end: 100px;
   }
   #element {
     width: 0px;
     height: 20px;
     animation: expand 1e10s linear;
     animation-timeline: timeline;
--- a/testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-start-end.html
+++ b/testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-start-end.html
@@ -14,49 +14,57 @@
     height: 300px;
   }
   @keyframes expand {
     from { width: 100px; }
     to { width: 200px; }
   }
   @scroll-timeline timeline_0px_100px {
     source: selector(#scroller);
+    time-range: 10s;
     start: 0px;
     end: 100px;
   }
   @scroll-timeline timeline_50px_100px {
     source: selector(#scroller);
+    time-range: 10s;
     start: 50px;
     end: 100px;
   }
   @scroll-timeline timeline_auto_auto {
     source: selector(#scroller);
+    time-range: 10s;
     start: auto;
     end: auto;
   }
   @scroll-timeline timeline_auto_auto_implicit {
     source: selector(#scroller);
+    time-range: 10s;
   }
   @scroll-timeline timeline_50px_auto {
     source: selector(#scroller);
+    time-range: 10s;
     start: 50px;
     end: auto;
   }
   @scroll-timeline timeline_auto_100px {
     source: selector(#scroller);
+    time-range: 10s;
     start: auto;
     end: 100px;
   }
   @scroll-timeline timeline_25p_75p {
     source: selector(#scroller);
+    time-range: 10s;
     start: 25%;
     end: 75%;
   }
   @scroll-timeline timeline_calc_calc {
     source: selector(#scroller);
+    time-range: 10s;
     start: calc(25% + 10px);
     end: calc(75% + 10px);
   }
   #container > div {
     width: 0px;
     animation-name: expand;
     animation-duration: 10s;
     animation-timing-function: linear;
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-time-range.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-at-rule">
+<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#descdef-scroll-timeline-time-range">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<style>
+  #scroller {
+    overflow: scroll;
+    width: 100px;
+    height: 100px;
+  }
+  #contents {
+    height: 200px;
+  }
+  @keyframes expand {
+    from { width: 100px; }
+    to { width: 200px; }
+  }
+  @scroll-timeline timeline_10s {
+    source: selector(#scroller);
+    time-range: 10s;
+    start: 0px;
+    end: 100px;
+  }
+  @scroll-timeline timeline_1s {
+    source: selector(#scroller);
+    time-range: 1s;
+    start: 0px;
+    end: 100px;
+  }
+  @scroll-timeline timeline_1000ms {
+    source: selector(#scroller);
+    time-range: 1000ms;
+    start: 0px;
+    end: 100px;
+  }
+  #container > div {
+    width: 0px;
+    animation-name: expand;
+    animation-duration: 10s;
+    animation-timing-function: linear;
+  }
+  /* Ensure stable expectations if feature is not supported */
+  @supports not (animation-timeline:foo) {
+    #container > div { animation-play-state: paused; }
+  }
+  #element_10s { animation-timeline: timeline_10s; }
+  #element_1s { animation-timeline: timeline_1s; }
+  #element_1000ms { animation-timeline: timeline_1000ms; }
+</style>
+<div id=scroller>
+  <div id=contents></div>
+</div>
+<div id=container>
+  <div id=element_10s></div>
+  <div id=element_1s></div>
+  <div id=element_1000ms></div>
+</div>
+<script>
+  scroller.scrollTop = 50;
+
+  promise_test(async (t) => {
+    await waitForNextFrame();
+    assert_equals(getComputedStyle(element_10s).width, '150px');
+  }, 'Timerange mapped correctly (10s)');
+
+  promise_test(async (t) => {
+    await waitForNextFrame();
+    assert_equals(getComputedStyle(element_1s).width, '105px');
+  }, 'Timerange mapped correctly (1s)');
+
+  promise_test(async (t) => {
+    await waitForNextFrame();
+    assert_equals(getComputedStyle(element_1s).width, '105px');
+  }, 'Timerange mapped correctly (1000ms)');
+</script>
--- a/testing/web-platform/tests/scroll-animations/css/scroll-timeline-cssom.tentative.html
+++ b/testing/web-platform/tests/scroll-animations/css/scroll-timeline-cssom.tentative.html
@@ -174,16 +174,20 @@ test_csstext(
   `@scroll-timeline timeline { scroll-offsets: selector(#bar) 1 start; }`,
   `@scroll-timeline timeline { scroll-offsets: selector(#bar) start 1; }`);
 
 test_csstext(
   'scroll-offsets descriptor (multiple offsets)',
   `@scroll-timeline timeline { scroll-offsets: auto, selector(#bar) start 1; }`);
 
 test_csstext(
+  'time-range descriptor',
+  `@scroll-timeline timeline { time-range: 10s; }`);
+
+test_csstext(
   'defaults',
   `@scroll-timeline timeline { source: auto; orientation: auto; scroll-offsets: none; }`);
 
 test_csstext(
   'order',
   `@scroll-timeline timeline { orientation: auto; source: auto; scroll-offsets: none; }`,
   `@scroll-timeline timeline { source: auto; orientation: auto; scroll-offsets: none; }`);
 
@@ -265,9 +269,26 @@ test_offsets('selector(#foo) end 3');
 test_offsets('selector(#foo) 3 end', 'selector(#foo) end 3');
 test_offsets(' auto , auto ', 'auto, auto');
 test_offsets('10%, 100px');
 test_offsets('auto, 100%');
 test_offsets('0%, selector(  #foo)  3  end  ', "0%, selector(#foo) end 3");
 test_offsets('selector(#foo) end 3, selector(#bar)');
 test_offsets('0%, auto, selector(#foo) start, auto, selector(#bar) 12.3');
 
+// CSSScrollTimelineRule.timeRange
+
+function test_scroll_time_range(specified, expected) {
+  test_descriptor('time-range', specified, expected);
+}
+
+test_scroll_time_range('auto');
+test_scroll_time_range(' auto ', 'auto');
+test_scroll_time_range('1s');
+test_scroll_time_range(' 1s ', '1s');
+test_scroll_time_range('1000ms');
+
+test_scroll_time_range('', 'auto');
+test_scroll_time_range('red', 'auto');
+test_scroll_time_range('#fff', 'auto');
+test_scroll_time_range('unset', 'auto');
+
 </script>