trigger-scope-named.tentative.html (3314B)
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: --trigger; 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 46 .long { 47 width: 50%; 48 height: 100%; 49 } 50 </style> 51 <div id="scroller"> 52 <div id="in_scope_target" class="target">In-scope Target</div> 53 <div id="source">SOURCE</div> 54 <div class="long"></div> 55 <div class="long"></div> 56 </div> 57 <div id="out_of_scope_target" class="target"> 58 Out-of-scope Target 59 </div> 60 <script> 61 promise_test(async() => { 62 const in_scope_target = document.getElementById("in_scope_target"); 63 // The in-scope targets should be attached to the trigger and paused at 64 // time 0. 65 await assert_playstate_and_current_time( 66 in_scope_target.id, in_scope_target.getAnimations()[0], "paused"); 67 68 // The out-of-scope targets should be attached to the trigger and paused 69 // are yet to be paused by the trigger. 70 await assert_playstate_and_current_time( 71 out_of_scope_target.id, out_of_scope_target.getAnimations()[0], 72 "paused"); 73 74 // Perform a scroll to trigger the animation. 75 const scrollend_promise = 76 waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller); 77 source.scrollIntoView({block: "center"}); 78 await scrollend_promise; 79 await waitForCompositorReady(); 80 81 assert_greater_than(scroller.scrollTop, 0, "did scroll"); 82 83 // The in-scope target should now be playing as the trigger condition 84 // has been met. 85 await assert_playstate_and_current_time( 86 in_scope_target.id, in_scope_target.getAnimations()[0], "running"); 87 88 // There should be no change to the out-of-scope targets. 89 await assert_playstate_and_current_time(out_of_scope_target.id, 90 out_of_scope_target.getAnimations()[0], 91 "paused"); 92 }, "target within named trigger-scope finds trigger within scope; "+ 93 "out-of-scope target does not."); 94 </script> 95 </body> 96 </html>