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