[WPT] Test that animation range normal is equivalent to cover 0% 100%

Bug: 1427118 Change-Id: Ic505d54e92a5c9271e7d9b7debfd8f36f2fd0df5 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4386896 Commit-Queue: Kevin Ellis <[email protected]> Reviewed-by: Mustaq Ahmed <[email protected]> Cr-Commit-Position: refs/heads/main@{#1124838}
cookiecrook · Apr 8, 2023 · 8d8e7f6 · 8d8e7f6
1 parent aa1f956
commit 8d8e7f6
Showing 1 changed file with 92 additions and 0 deletions.
diff --git a/scroll-animations/css/animation-range-normal-matches-cover.html b/scroll-animations/css/animation-range-normal-matches-cover.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#named-timeline-range">
+<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>
+<script src="/scroll-animations/scroll-timelines/testcommon.js"></script>
+<title>Animation range 'normal' is equivalent to animation range 'cover'</title>
+</head>
+<style type="text/css">
+  @keyframes anim-1 {
+    from { background-color:  blue; }
+    to { background-color:  white; }
+  }
+  @keyframes anim-2 {
+    from { opacity: 0.3; }
+    to { opacity:  1; }
+  }
+  #scroller {
+    border:  10px solid lightgray;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    width: 300px;
+    height: 200px;
+  }
+  #target {
+    margin-top:  800px;
+    margin-bottom: 800px;
+    margin-left:  10px;
+    margin-right:  10px;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+    background-color: green;
+    animation:  anim-1 auto linear, anim-2 auto linear;
+    animation-range:  normal, cover;
+    view-timeline:  t1;
+    animation-timeline:  t1, t1;
+  }
+</style>
+<body>
+  <div id="scroller">
+    <div id="target"></div>
+  </div>
+</body>
+<script type="text/javascript">
+  async function runTest() {
+    function assert_range_equals(actual, expected) {
+      if (typeof expected == 'string') {
+        assert_equals(actual, expected);
+      } else {
+        assert_equals(actual.rangeName, expected.rangeName);
+        assert_equals(actual.offset.value, expected.offset.value);
+      }
+    }
+
+    promise_test(async t => {
+      anims = target.getAnimations();
+      assert_equals(anims.length, 2, "Expecting 2 animations");
+      await anims[0].ready;
+      await anims[1].ready;
+
+      assert_range_equals(anims[0].rangeStart, "normal");
+      assert_range_equals(anims[0].rangeEnd, "normal");
+      assert_range_equals(anims[1].rangeStart,
+                          { rangeName: 'cover', offset: CSS.percent(0) });
+      assert_range_equals(anims[1].rangeEnd,
+                          { rangeName: 'cover', offset: CSS.percent(100) });
+
+      scroller.scrollTop = 600;  // Start boundary for cover range.
+      await waitForNextFrame();
+
+      assert_percents_equal(anims[0].currentTime, 0,
+                            'currentTime at start of normal range');
+      assert_percents_equal(anims[1].currentTime, 0,
+                            'currentTime at cover 0%');
+
+      scroller.scrollTop = 900;  // End boundary for cover range.
+      await waitForNextFrame();
+
+      assert_percents_equal(anims[0].currentTime, 100,
+                            'currentTime at end of normal range');
+      assert_percents_equal(anims[1].currentTime, 100,
+                            'currentTime at cover 100%');
+    }, 'Changing the animation range updates the play state');
+  }
+
+  window.onload = runTest;
+</script>