trigger-scope-in-scope-source.tentative.html (3468B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="help" src="https://drafts.csswg.org/css-animations-2/#trigger-scope"> 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 <script src="support/trigger-scope-support.js"></script> 11 </head> 12 <body> 13 <style> 14 @keyframes expand { 15 from { transform: scaleX(1) } 16 to { transform: scaleX(2) } 17 } 18 #scroller { 19 overflow-y: scroll; 20 height: 200px; 21 width: 200px; 22 border: solid 1px; 23 trigger-scope: all; 24 display: block; 25 } 26 #source { 27 top: 100%; 28 height: 100px; 29 width: 100px; 30 background-color: blue; 31 timeline-trigger: --trigger view() contain; 32 } 33 .target { 34 background-color: red; 35 height: 100px; 36 width: 100px; 37 animation: expand linear 1s both; 38 animation-trigger: --trigger play-forwards play-backwards; 39 } 40 41 #in_scope_target { 42 /* Let's it be in view when the trigger source comes into view */ 43 margin-top: 50%; 44 } 45 .long { 46 width: 50%; 47 height: 100%; 48 } 49 </style> 50 <div id="scroller"> 51 <div id="in_scope_target" class="target">In-scope Target</div> 52 <div id="source">SOURCE</div> 53 <div class="long"></div> 54 <div class="long"></div> 55 </div> 56 <div id="out_of_scope_target" class="target"> 57 Out-of-scope Target 58 </div> 59 60 <script> 61 promise_test(async() => { 62 const in_scope_target = document.getElementById("in_scope_target"); 63 // The in-scope target should be attached to the trigger and paused at 64 // time 0. 65 await assert_playstate_and_current_time(in_scope_target.id, 66 in_scope_target.getAnimations()[0], 67 "paused"); 68 69 // The out-of-scope target should be paused at time 0, waiting for its 70 // trigger. 71 await assert_playstate_and_current_time(out_of_scope_target.id, 72 out_of_scope_target.getAnimations()[0], 73 "paused"); 74 75 // Perform a scroll that triggers the animation. 76 const scrollend_promise = 77 waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller); 78 source.scrollIntoView({block: "center"}); 79 await scrollend_promise; 80 await waitForCompositorReady(); 81 82 assert_greater_than(scroller.scrollTop, 0, "did scroll"); 83 84 // The in-scope target should now be playing as the trigger condition 85 // has been met. 86 await assert_playstate_and_current_time(in_scope_target.id, 87 in_scope_target.getAnimations()[0], 88 "running"); 89 90 // There should be no change to the out-of-scope target. 91 await assert_playstate_and_current_time(out_of_scope_target.id, 92 out_of_scope_target.getAnimations()[0], 93 "paused"); 94 }, "In-scope target finds trigger of source; out-of-scope " + 95 "target does not."); 96 </script> 97 </body> 98 </html>