animation-trigger-multiple-animations.tentative.html (5329B)
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 .subject, .target { 14 height: 50px; 15 width: 50px; 16 background-color: red; 17 } 18 .scroller { 19 overflow-y: scroll; 20 height: 500px; 21 width: 500px; 22 border: solid 1px; 23 position: relative; 24 } 25 #space { 26 width: 50px; 27 height: 600px; 28 } 29 </style> 30 <div id="wrapper"> 31 <div id="scroller" class="scroller"> 32 <div id="space"></div> 33 <div id="subject" class="subject"></div> 34 <div id="space"></div> 35 </div> 36 <div id="target1" class="target"></div> 37 <div id="target2" class="target"></div> 38 </div> 39 <script> 40 // The trigger and exit ranges are the same for this test. 41 const TRIGGER_START_PX = 150; 42 const TRIGGER_END_PX = 200; 43 const scroller = document.getElementById("scroller"); 44 const subject = document.getElementById("subject"); 45 const target = document.getElementById("target"); 46 47 const ANIMATION_DURATION_MS = 1; 48 49 const COVER_START_OFFSET = 100; 50 const rangeBoundaries = getRangeBoundariesForTest( 51 COVER_START_OFFSET + TRIGGER_START_PX, 52 COVER_START_OFFSET + TRIGGER_END_PX, 53 COVER_START_OFFSET + TRIGGER_START_PX, 54 COVER_START_OFFSET + TRIGGER_END_PX, 55 scroller); 56 57 function setupAnimation(target) { 58 const animation = new Animation( 59 new KeyframeEffect( 60 target, 61 [ 62 { transform: "scaleX(1)", backgroundColor: "pink", left: "0px" }, 63 { transform: "scaleX(5)", backgroundColor: "pink", left: "10px" } 64 ], 65 { duration: ANIMATION_DURATION_MS, fill: "both" } 66 )); 67 return animation; 68 } 69 70 const view_timeline = new ViewTimeline({ subject: subject }); 71 function setupAnimationTrigger() { 72 const trigger = new TimelineTrigger({ 73 timeline: view_timeline, 74 rangeStart: `${TRIGGER_START_PX}px`, 75 rangeEnd: `${TRIGGER_END_PX}px` 76 }); 77 return trigger; 78 } 79 80 promise_test(async (test) => { 81 const animation1 = setupAnimation(target1); 82 const animation2 = setupAnimation(target2); 83 const trigger = setupAnimationTrigger(); 84 85 assert_equals(animation1.playState, "idle", "animation1 is idle"); 86 assert_equals(animation1.currentTime, null, 87 "animation1's currentTime is null"); 88 assert_equals(animation2.playState, "idle", "animation is idle"); 89 assert_equals(animation2.currentTime, null, 90 "animations2's currentTime is null"); 91 assert_equals(scroller.scrollTop, 0, 92 "scroller is not scrolled, i.e. not within the trigger range"); 93 assert_array_equals(trigger.getAnimations(), [], 94 "trigger has no animations"); 95 96 trigger.addAnimation(animation1, "play-forwards", "play-backwards"); 97 98 assert_equals(animation1.playState, "paused", 99 "animation1 is paused, awaiting trigger event"); 100 assert_times_equal(animation1.currentTime, 0, 101 "animation1's currentTime is 0"); 102 assert_equals(animation2.playState, "idle", "animation2 is idle"); 103 assert_equals(animation2.currentTime, null, 104 "animations2's currentTime is null"); 105 assert_array_equals(trigger.getAnimations(), [animation1], 106 "trigger has exactly 1 animation"); 107 108 trigger.addAnimation(animation2, "play-forwards", "play-backwards"); 109 110 assert_equals(animation1.playState, "paused", 111 "animation is paused, awaiting trigger event"); 112 assert_times_equal(animation1.currentTime, 0, 113 "animation1's currentTime is 0"); 114 assert_equals(animation2.playState, "paused", 115 "animation2 is paused, awaiting trigger event"); 116 assert_times_equal(animation2.currentTime, 0, 117 "animation2's currentTime is 0"); 118 assert_array_equals(trigger.getAnimations(), [animation1, animation2], 119 "trigger has both animations attached"); 120 121 rangeBoundaries.enterTriggerRange(); 122 123 await animation1.finished; 124 await animation2.finished; 125 126 assert_equals(animation1.playState, "finished", 127 "animation1 is paused, awaiting trigger event"); 128 assert_times_equal(animation1.currentTime, ANIMATION_DURATION_MS, 129 `animation1's currentTime is ${ANIMATION_DURATION_MS}`); 130 assert_equals(animation2.playState, "finished", 131 "animation2 is paused, awaiting trigger event"); 132 assert_times_equal(animation2.currentTime, ANIMATION_DURATION_MS, 133 `animation2's currentTime is ${ANIMATION_DURATION_MS}`); 134 }, "Single trigger controls multiple animations"); 135 </script> 136 </body> 137 </html>