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