animation-trigger-timeline-subject-removed.tentative.html (3975B)
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 12 <body> 13 <style> 14 .scroller { 15 overflow-y: scroll; 16 border: solid 1px; 17 justify-self: center; 18 height: 100%; 19 width: 100%; 20 display: inline-block; 21 } 22 23 .subject { 24 height: 100px; 25 width: 100%; 26 background-color: black; 27 } 28 29 .space { 30 height: 300px; 31 width: 90%; 32 justify-self: center; 33 } 34 35 #triggergrid { 36 timeline-scope: --viewtimeline; 37 height: 85vh; 38 width: 90vw; 39 display: grid; 40 grid-template-columns: 1fr 1fr; 41 .target { 42 align-self: center; 43 justify-self: center; 44 height: 100px; 45 width: 100px; 46 background-color: blue; 47 } 48 49 .space { 50 height: 130vh; 51 } 52 } 53 </style> 54 <div id="triggergrid"> 55 <div id="target" class="target"></div> 56 <div id="scroller" class="scroller"> 57 <div class="space"></div> 58 <div class="space"></div> 59 <div id="subjectanchor"></div> 60 <div id="subject" class="subject"></div> 61 <div class="space"></div> 62 <div class="space"></div> 63 </div> 64 </div> 65 <script> 66 const scroller = document.getElementById("scroller"); 67 const target = document.getElementById("target"); 68 const subject = document.getElementById("subject"); 69 const subjectanchor = document.getElementById("subjectanchor"); 70 const ANIMATION_DURATION_MS = 1; 71 72 promise_test(async () => { 73 waitForAnimationFrames(2); 74 setupAnimationAndTrigger(target, document.getElementById("subject"), 75 ANIMATION_DURATION_MS); 76 const animation = target.getAnimations()[0]; 77 78 const initial_transform = getComputedStyle(target).transform; 79 // Sanity check that the trigger works: scroll into the trigger range, 80 // observe animation's effect. 81 const contain_0_offset = computeContainOffset(scroller, 82 document.getElementById("subject"), 0); 83 let animation_promise = waitForAnimation( 84 /*targetCurrentTime=*/ANIMATION_DURATION_MS, animation); 85 await waitForScrollReset(test, scroller, 0, contain_0_offset); 86 87 await animation_promise; 88 assert_not_equals(getComputedStyle(target).transform, initial_transform, 89 "entry triggers animation"); 90 91 // Remove the trigger's timeline's subject from the DOM. 92 subject.remove(); 93 94 const transform_after_removal = getComputedStyle(target).transform; 95 96 // Scroll outside the range. 97 await waitForScrollReset(test, scroller, 0, contain_0_offset - 100); 98 assert_equals(getComputedStyle(target).transform, transform_after_removal, 99 "exit does not trigger"); 100 101 // Scroll into the range once again. 102 await waitForScrollReset(test, scroller, 0, contain_0_offset); 103 assert_equals(getComputedStyle(target).transform, transform_after_removal, 104 "re-entry does not trigger"); 105 106 // Put the timeline trigger's subject back into the DOM. 107 subjectanchor.after(subject); 108 109 animation_promise = waitForAnimation(/*targetCurrentTime=*/0, animation); 110 // Scroll outside the range; should reverse the animation. 111 await waitForScrollReset(test, scroller, 0, contain_0_offset - 100); 112 // Make sure the playbackRate is reflected before waiting on the promise. 113 await waitForAnimationFrames(3) 114 await animation_promise; 115 116 assert_equals(getComputedStyle(target).transform, initial_transform, 117 "triggering is happening again."); 118 }, "triggering stops when a trigger's timeline subject is removed and" + 119 " restarts when reattached."); 120 </script> 121 </body> 122 123 </html>