scroll-state-initially-snapped.html (1383B)
1 <!DOCTYPE html> 2 <title>@container: scroll-state(snapped) matching for initial rendering</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-before { 16 height: 200px; 17 } 18 #filler-after { 19 height: 10000px; 20 } 21 #snapped { 22 container-name: initially-snapped; 23 container-type: scroll-state; 24 scroll-snap-align: start; 25 width: 100px; 26 height: 100px; 27 background: teal; 28 } 29 30 @container initially-snapped scroll-state(snapped: block) { 31 span { --snapped: yes } 32 } 33 </style> 34 <div id="filler-before"></div> 35 <div id="snapped"> 36 <span id="target">My container is snapped</span> 37 </div> 38 <div id="filler-after"></div> 39 <script> 40 setup(() => assert_implements_scroll_state_container_queries()); 41 42 promise_test(async t => { 43 await waitForAnimationFrames(2); 44 assert_equals(getComputedStyle(target).getPropertyValue("--snapped"), "yes"); 45 assert_equals(document.documentElement.scrollTop, 200); 46 }, "Check that scroll-state(snapped: block) matches"); 47 </script>