scroll-state-snapped-change.html (1818B)
1 <!DOCTYPE html> 2 <title>@container: scroll-state(snapped) changed after scroll</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-rule"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> 7 <script src="/css/css-transitions/support/helper.js"></script> 8 <style> 9 :root { 10 scroll-snap-type: block mandatory; 11 } 12 body { 13 margin: 0; 14 } 15 #filler { 16 height: 10000px; 17 } 18 .snapped { 19 container-type: scroll-state; 20 scroll-snap-align: start; 21 width: 100px; 22 height: 100px; 23 margin-bottom: 100px; 24 background: teal; 25 } 26 27 @container scroll-state(snapped: block) { 28 span { --snapped: yes } 29 } 30 </style> 31 <div class="snapped"> 32 <span id="target1"></span> 33 </div> 34 <div class="snapped"> 35 <span id="target2"></span> 36 </div> 37 <div id="filler"></div> 38 <script> 39 setup(() => assert_implements_scroll_state_container_queries()); 40 41 promise_test(async t => { 42 await waitForAnimationFrames(2); 43 assert_equals(getComputedStyle(target1).getPropertyValue("--snapped"), "yes"); 44 assert_equals(getComputedStyle(target2).getPropertyValue("--snapped"), ""); 45 assert_equals(document.documentElement.scrollTop, 0); 46 }, "Check that scroll-state(snapped: block) matches on #target1 before scroll"); 47 48 promise_test(async t => { 49 document.documentElement.scrollTop = 300; 50 await waitForAnimationFrames(2); 51 assert_equals(getComputedStyle(target1).getPropertyValue("--snapped"), ""); 52 assert_equals(getComputedStyle(target2).getPropertyValue("--snapped"), "yes"); 53 assert_equals(document.documentElement.scrollTop, 200); 54 }, "Check that scroll-state(snapped: block) matches on #target2 after scroll"); 55 </script>