trigger-scope-scoped-tree-order.tentative.html (3589B)
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 position: relative; 26 } 27 .source { 28 top: 100%; 29 height: 100px; 30 width: 100px; 31 background-color: blue; 32 timeline-trigger: --trigger view() contain; 33 } 34 .target { 35 background-color: red; 36 height: 100px; 37 width: 100px; 38 animation: expand linear 1s both; 39 animation-trigger: --trigger play-forwards play-backwards; 40 position: sticky; 41 top: 0%; 42 left: 50%; 43 } 44 45 .long { 46 width: 50%; 47 height: 100%; 48 } 49 </style> 50 <div id="scroller"> 51 <div id="target" class="target">Target</div> 52 <div class="long"></div> 53 <div id="source1" class="source">SOURCE 1</div> 54 <div class="long"></div> 55 <div id="source2" class="source">SOURCE 2</div> 56 <div class="long"></div> 57 <div id="source3" class="source">SOURCE 3</div> 58 <div class="long"></div> 59 <div id="source4" class="source">SOURCE 4</div> 60 <div class="long"></div> 61 <div id="source5" class="source">SOURCE 5</div> 62 <div class="long"></div> 63 </div> 64 <script> 65 66 promise_test(async() => { 67 // The in-scope targets should be attached to the trigger and paused at 68 // time 0. 69 await assert_playstate_and_current_time(target.id, 70 target.getAnimations()[0], 71 "paused"); 72 let scrollend_promise; 73 74 // Sources 1 through 4 come earlier than source5 in tree-order so they 75 // should have no effect. 76 for (const source of [source1, source2, source3, source4]) { 77 scrollend_promise = 78 waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller); 79 source.scrollIntoView({block: "center"}); 80 await scrollend_promise; 81 await waitForCompositorReady(); 82 await assert_playstate_and_current_time(target.id, 83 target.getAnimations()[0], 84 "paused"); 85 } 86 87 scrollend_promise = 88 waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller); 89 source5.scrollIntoView({block: "center"}); 90 await scrollend_promise; 91 await waitForCompositorReady(); 92 93 await assert_greater_than(scroller.scrollTop, 0, "did scroll"); 94 // The in-scope targets should now be playing as the trigger condition 95 // has been met. 96 await assert_playstate_and_current_time(target.id, 97 target.getAnimations()[0], 98 "running"); 99 }, "Among in-scope triggers with same name, last in tree-order is "+ 100 "selected."); 101 </script> 102 </body> 103 </html>