| <!DOCTYPE html> |
| <title>View timeline with paused animations</title> |
| <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> |
| <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#view-notation"> |
| <link rel="help" href="https://drafts.csswg.org/css-animations/#animation-play-state"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/scroll-animations/scroll-timelines/testcommon.js"></script> |
| <script src="/css/css-animations/support/testcommon.js"></script> |
| <script src="support/testcommon.js"></script> |
| <style> |
| @keyframes anim { |
| from { z-index: 0; } |
| to { z-index: 100; } |
| } |
| |
| #scroller { |
| overflow: auto; |
| width: 100px; |
| height: 100px; |
| } |
| |
| .padding { |
| height: 150px; |
| } |
| |
| #target { |
| height: 50px; |
| z-index: -1; |
| animation: anim 1s linear; |
| animation-timeline: view(); |
| } |
| </style> |
| |
| <div id=scroller> |
| <div class="padding"></div> <!-- [0px, 150px] --> |
| <div id="target"></div> <!-- [150px, 200px] --> |
| <div class="padding"></div> <!-- [200px, 350px] --> |
| </div> |
| |
| <script> |
| setup(assert_implements_animation_timeline); |
| |
| async function scrollTop(e, value) { |
| e.scrollTop = value; |
| await waitForNextFrame(); |
| } |
| |
| promise_test(async (t) => { |
| const animation = target.getAnimations()[0]; |
| await animation.ready; |
| |
| assert_equals(getComputedStyle(target).zIndex, '-1', 'Initial state'); |
| |
| await scrollTop(scroller, 125); |
| assert_equals(getComputedStyle(target).zIndex, '50', 'Animation applies after scrolling'); |
| |
| target.style.animationPlayState = 'paused'; |
| assert_equals(animation.playState, 'paused'); |
| assert_equals(getComputedStyle(target).zIndex, '50', 'Current time is preserved when pause-pending'); |
| assert_true(animation.pending, 'Pending state after changing animationPlayState'); |
| |
| await animation.ready; |
| assert_equals(getComputedStyle(target).zIndex, '50', 'Current time is preserved when paused'); |
| |
| await scrollTop(scroller, 150); |
| assert_equals(getComputedStyle(target).zIndex, '50', 'Current time is preserved when scrolling while paused'); |
| }, 'Test that a scroll-driven animation can be paused by updating animation-play-state'); |
| </script> |
