| <!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> |
