Bug 1715413 [wpt PR 29295] - Added support for scroll timelines that …

…do not provide a time_range, a=testonly Automatic update from web-platform-tests Added support for scroll timelines that do not provide a time_range Integrated progress based scroll timelines with animations and effects. Effect timing model updated to handle both time based timelines and progress based timelines Spec change this CL is based on: w3c/csswg-drafts#4890 Bug: 1140602 Change-Id: If4bc889f8fdcc1ebe393f41b8788f6bd1ddec051 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2925975 Reviewed-by: Kevin Ellis <[email protected]> Reviewed-by: Rune Lillesveen <[email protected]> Commit-Queue: Jordan Taylor <[email protected]> Cr-Commit-Position: refs/heads/master@{#895253} -- wpt-commits: dd79e0c4132d7b749309998152342b1e21f7983e wpt-pr: 29295
jamienicol · Jun 26, 2021 · 908f4f4 · 908f4f4
1 parent a9b39f1
commit 908f4f4
Show file tree

Hide file tree

Showing 6 changed files with 1,144 additions and 3 deletions.
diff --git a/testing/web-platform/tests/scroll-animations/css/progress-based-animation-timeline.html b/testing/web-platform/tests/scroll-animations/css/progress-based-animation-timeline.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<title>CSS Animation using progress based timeline</title>
+<link rel="help" src="https://drafts.csswg.org/css-animations-2/#animation-timeline">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<style>
+  #scrollers {
+    overflow: hidden;
+    height: 0px;
+  }
+  #scrollers > div {
+    overflow: scroll;
+    width: 100px;
+    height: 100px;
+  }
+  #scrollers > div > div {
+    height: 200px;
+  }
+
+  @keyframes top {
+    from { top: 100px; }
+    to { top: 200px; }
+  }
+
+  @scroll-timeline top_timeline {
+    source: selector(#scroller1);
+    start: 0px;
+    end: 100px;
+  }
+
+  #element {
+    animation-name: top;
+    animation-duration: 10s;
+    animation-timing-function: linear;
+    animation-timeline: top_timeline;
+  }
+  /* Ensure stable expectations if feature is not supported */
+  @supports not (animation-timeline:foo) {
+    #element { animation-play-state: paused; }
+  }
+</style>
+<div id=scrollers>
+  <div id=scroller1><div></div></div>
+</div>
+<div id=element></div>
+<script>
+  // Force layout of scrollers.
+  scroller1.offsetTop;
+
+  scroller1.scrollTop = 20;
+
+  promise_test(async (t) => {
+    await waitForNextFrame();
+    assert_equals(getComputedStyle(element).top, '120px');
+  }, 'progress based animation timeline works');
+
+</script>