animation-trigger-once-play-state.tentative.html (4404B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="help" src="https://drafts.csswg.org/css-animations-2/#animation-trigger"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/web-animations/testcommon.js"></script> 8 <script src="/dom/events/scrolling/scroll_support.js"></script> 9 <script src="support/support.js"></script> 10 </head> 11 <body> 12 <style> 13 @keyframes myAnim { 14 from { transform: scaleX(1); } 15 to { transform: scaleX(5); } 16 } 17 .subject, .target { 18 height: 50px; 19 width: 50px; 20 background-color: red; 21 } 22 .subject { 23 view-timeline: --viewtimeline; 24 } 25 .target { 26 animation: myAnim linear 0.5s forwards; 27 timeline-trigger: --trigger --viewtimeline 150px 200px; 28 animation-trigger: --trigger play-once; 29 } 30 .scroller { 31 overflow-y: scroll; 32 height: 500px; 33 width: 500px; 34 border: solid 1px; 35 position: relative; 36 } 37 #wrapper { 38 timeline-scope: --viewtimeline; 39 } 40 #space { 41 width: 50px; 42 height: 600px; 43 } 44 </style> 45 <div id="wrapper"> 46 <div id="scroller" class="scroller"> 47 <div id="space"></div> 48 <div id="subject" class="subject"></div> 49 <div id="space"></div> 50 </div> 51 <div id="target" class="target"></div> 52 </div> 53 <script> 54 target = document.getElementById("target"); 55 56 function changePlayStateTo(state) { 57 target.style.animationPlayState = state; 58 } 59 60 // The trigger and exit ranges are the same for this test. 61 const CSS_TRIGGER_START_PX = 150; 62 const CSS_TRIGGER_END_PX = 200; 63 64 async function testPlayStateChange(test, rangeBoundaries) { 65 const initial_transform = getComputedStyle(target).transform; 66 // This enters the trigger range and should play the animation. Changing 67 // animation-play-state to "paused" should pause the animation, so we 68 // should not see an animationend event. 69 await testAnimationTrigger(test, async () => { 70 await rangeBoundaries.enterTriggerRange(); 71 // Make a little progess. 72 await waitForAnimationFrames(5); 73 changePlayStateTo("paused"); 74 }, target, ["animationstart", "animationend"], [true, false]); 75 await waitForAnimationFrames(5); 76 const partial_transform = getComputedStyle(target).transform; 77 assert_not_equals(partial_transform, initial_transform, 78 "animation made progress before pause."); 79 80 await waitForAnimationFrames(5); 81 assert_equals(getComputedStyle(target).transform, partial_transform, 82 "animation is paused and progress is not being made."); 83 84 await testAnimationTrigger(test, async () => { 85 await rangeBoundaries.exitExitRangeAbove(); 86 await waitForAnimationFrames(5); 87 // check that exiting the exit range did not affect the animation. 88 assert_equals(getComputedStyle(target).transform, partial_transform, 89 "animation still paused after exiting the exit range."); 90 changePlayStateTo("running"); 91 }, target, ["animationstart", "animationend"], [false, true]); 92 93 const final_transform = getComputedStyle(target).transform; 94 assert_not_equals(final_transform, initial_transform, 95 "animation is at the end, not the start"); 96 assert_not_equals(final_transform, partial_transform, 97 "animation is at the end, beyond partial progress."); 98 } 99 100 promise_test(async (test) => { 101 scroller = document.getElementById("scroller"); 102 target = document.getElementById("target"); 103 104 const COVER_START_OFFSET = 100; 105 const rangeBoundaries = getRangeBoundariesForTest( 106 COVER_START_OFFSET + CSS_TRIGGER_START_PX, 107 COVER_START_OFFSET + CSS_TRIGGER_END_PX, 108 COVER_START_OFFSET + CSS_TRIGGER_START_PX, 109 COVER_START_OFFSET + CSS_TRIGGER_END_PX, 110 scroller); 111 await testPlayStateChange(test, rangeBoundaries); 112 }, "once trigger respects animation-play-state."); 113 </script> 114 </body> 115 </html>