scroll-state-target-query-change.html (1502B)
1 <!DOCTYPE html> 2 <title>@container: scroll-state(snapped) target selector change</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#snapped"> 4 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#snap-events"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> 8 <script src="/css/css-transitions/support/helper.js"></script> 9 <style> 10 html { scroll-snap-type: block mandatory; } 11 body { margin: 0; } 12 #filler { height: 10000px; } 13 #snapped { 14 container-type: scroll-state; 15 scroll-snap-align: start; 16 width: 100px; 17 height: 100px; 18 } 19 @container scroll-state(snapped: block) { 20 .target { --snapped: true; } 21 } 22 </style> 23 <div id="snapped"> 24 <span id="target"></span> 25 </div> 26 <div id="filler"></div> 27 <script> 28 setup(() => assert_implements_scroll_state_container_queries()); 29 30 promise_test(async t => { 31 await waitForAnimationFrames(2); 32 assert_equals(getComputedStyle(target).getPropertyValue("--snapped"), ""); 33 assert_equals(window.scrollY, 0); 34 }, "Initially snapped to #snapped, but scroll-state() is not queried") 35 36 promise_test(async t => { 37 target.className = "target"; 38 await waitForAnimationFrames(2); 39 assert_equals(getComputedStyle(target).getPropertyValue("--snapped"), "true"); 40 }, "scroll-state(snapped) queried for #snapped after adding class to #target"); 41 </script>