trigger-scope-out-of-scope-source.tentative.html (3544B)
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 #outerscroller { 19 position: relative; 20 overflow-y: scroll; 21 border: solid 1px; 22 height: 400px; 23 width: 400px; 24 } 25 #innerscroller { 26 overflow-y: scroll; 27 height: 200px; 28 width: 200px; 29 border: solid 1px; 30 trigger-scope: all; 31 display: block; 32 } 33 #source { 34 position: absolute; 35 top: 100%; 36 height: 100px; 37 width: 100px; 38 background-color: blue; 39 timeline-trigger: --trigger view() contain; 40 } 41 .target { 42 background-color: red; 43 height: 100px; 44 width: 100px; 45 animation: expand linear 1s both; 46 animation-trigger: --trigger play-forwards play-backwards; 47 } 48 49 #in_scope_target { 50 /* Let's it be in view when the trigger source comes into view */ 51 margin-top: 50%; 52 } 53 54 .long { 55 width: 50%; 56 height: 100%; 57 } 58 </style> 59 <div id="outerscroller"> 60 <div id="innerscroller"> 61 <div id="in_scope_target" class="target">In-scope In-Flow Target</div> 62 <div class="long"></div> 63 <div class="long"></div> 64 </div> 65 <div id="source">SOURCE</div> 66 <div id="out_of_scope_target" class="target"> 67 Out-of-scope In-Flow False Target 68 </div> 69 <div class="long"></div> 70 <div class="long"></div> 71 </div> 72 73 <script> 74 promise_test(async() => { 75 await assert_playstate_and_current_time( 76 in_scope_target.id, in_scope_target.getAnimations()[0], "paused"); 77 78 // The out-of-scope target should be attached to the trigger and 79 // paused at time 0. 80 await assert_playstate_and_current_time(out_of_scope_target.id, 81 out_of_scope_target.getAnimations()[0], 82 "paused"); 83 84 const scrollend_promise = 85 waitForScrollEndFallbackToDelayWithoutScrollEvent(outerscroller); 86 source.scrollIntoView({block: "center"}); 87 await scrollend_promise; 88 89 await waitForCompositorReady(); 90 91 assert_greater_than(outerscroller.scrollTop, 0, "did scroll"); 92 93 // There should be no change to the in-scope target. 94 await assert_playstate_and_current_time(in_scope_target.id, 95 in_scope_target.getAnimations()[0], 96 "paused"); 97 // The out-of-scope target should now be playing as the trigger 98 // condition has been met. 99 await assert_playstate_and_current_time(out_of_scope_target.id, 100 out_of_scope_target.getAnimations()[0], 101 "running"); 102 }, "trigger-scope prevents in-scope target from finding trigger " + 103 "outside scope; target outside trigger-scope finds trigger"); 104 </script> 105 </body> 106 </html>