trigger-scope-oof.tentative.html (4680B)
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 #in_scope_oof_target { 54 position: fixed; 55 left: 50vw; 56 } 57 #out_of_scope_oof_target { 58 position: fixed; 59 left: 50vw; 60 top: 50vh; 61 } 62 63 .long { 64 width: 50%; 65 height: 100%; 66 } 67 </style> 68 <div id="outerscroller"> 69 <div id="innerscroller"> 70 <div id="in_scope_target" class="target">In-scope In-Flow Target</div> 71 <div id="in_scope_oof_target" class="target">In-scope OOF Target</div> 72 <div class="long"></div> 73 <div class="long"></div> 74 <div id="source">SOURCE</div> 75 <div class="long"></div> 76 <div class="long"></div> 77 </div> 78 <div id="out_of_scope_target" class="target"> 79 Out-of-scope In-Flow False Target 80 </div> 81 <div id="out_of_scope_oof_target" class="target"> 82 Out-of-scope OOF False Target 83 </div> 84 <div class="long"></div> 85 <div class="long"></div> 86 </div> 87 88 <script> 89 const in_scope_targets = [in_scope_target, in_scope_oof_target]; 90 const out_of_scope_targets = 91 [out_of_scope_target, out_of_scope_oof_target]; 92 93 promise_test(async() => { 94 for (const target of in_scope_targets) { 95 assert_equals( target.getAnimations().length, 1); 96 await assert_playstate_and_current_time(target.id, 97 target.getAnimations()[0], 98 "paused"); 99 } 100 101 // The out-of-scope targets should be attached to the trigger and paused 102 // are yet to be paused by the trigger. 103 for (const target of out_of_scope_targets) { 104 assert_equals( target.getAnimations().length, 1); 105 await assert_playstate_and_current_time(target.id, 106 target.getAnimations()[0], 107 "paused"); 108 } 109 110 // Perform a scroll to trigger the animation. 111 const scrollend_promise = 112 waitForScrollEndFallbackToDelayWithoutScrollEvent(outerscroller); 113 source.scrollIntoView({block: "center"}); 114 await scrollend_promise; 115 await waitForCompositorReady(); 116 117 assert_greater_than(outerscroller.scrollTop, 0, "did scroll"); 118 119 // The in-scope targets should now be playing as the trigger condition 120 // has been met. 121 for (const target of in_scope_targets) { 122 assert_equals( target.getAnimations().length, 1); 123 await assert_playstate_and_current_time(target.id, 124 target.getAnimations()[0], 125 "running"); 126 } 127 128 // There should be no change to the out-of-scope targets. 129 for (const target of out_of_scope_targets) { 130 assert_equals( target.getAnimations().length, 1); 131 await assert_playstate_and_current_time(target.id, 132 target.getAnimations()[0], 133 "paused"); 134 } 135 }, "In-scope targets find trigger of oof source; out-of-scope " + 136 "targets do not."); 137 </script> 138 </body> 139 </html>