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