animation-trigger-late-attached-timeline.tentative.html (3335B)
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 .target { 23 animation: myAnim linear 0.5s forwards; 24 timeline-trigger: --trigger 150px 200px; 25 } 26 .deferred.subject { 27 view-timeline: --viewtimeline; 28 } 29 .scroller { 30 overflow-y: scroll; 31 height: 500px; 32 width: 500px; 33 border: solid 1px; 34 position: relative; 35 } 36 #wrapper { 37 timeline-scope: --viewtimeline; 38 } 39 #space { 40 width: 50px; 41 height: 600px; 42 } 43 </style> 44 <div id="wrapper"> 45 <div id="scroller" class="scroller"> 46 <div id="space"></div> 47 <div id="deferred_subject" class="deferred subject"></div> 48 <div id="space"></div> 49 </div> 50 <div id="target" class="target"></div> 51 </div> 52 <script> 53 // The trigger and exit ranges are the same for this test. 54 const CSS_TRIGGER_START_PX = 150; 55 const CSS_TRIGGER_END_PX = 200; 56 57 promise_test(async (test) => { 58 const COVER_START_OFFSET = 100; 59 60 const rangeBoundaries = getRangeBoundariesForTest( 61 COVER_START_OFFSET + CSS_TRIGGER_START_PX, 62 COVER_START_OFFSET + CSS_TRIGGER_END_PX, 63 COVER_START_OFFSET + CSS_TRIGGER_START_PX, 64 COVER_START_OFFSET + CSS_TRIGGER_END_PX, 65 scroller); 66 const animation = target.getAnimations()[0]; 67 await waitForAnimationFrames(5); 68 // The animation is currently associated with the document timeline and 69 // would automatically run. Cancel it. 70 animation.cancel(); 71 72 // Enter the trigger range. Since it is not yet associated with the 73 // view timeline, this should have no effect. 74 await rangeBoundaries.enterTriggerRange(); 75 await waitForAnimationFrames(5); 76 77 // Now attach a view timeline. Since we are in the trigger range, we 78 // should trigger. 79 await testAnimationTrigger(test, async () => { 80 target.style.animationTrigger = "--trigger play-once"; 81 target.style.timelineTriggerSource = "--viewtimeline"; 82 await waitForAnimationFrames(5); 83 }, target, ["animationstart", "animationend", "animationcancel"], 84 [true, true, false]); 85 86 assert_equals(animation.playState, "finished", 87 "animation was run when its trigger was attached to a view " + 88 " timeline inside the trigger range."); 89 90 // TODO: Add a test which switches the timeline of the trigger. 91 }, "late-attached trigger timeline plays animation"); 92 </script> 93 </body> 94 </html>