scroll-state-snapped-wm.html (2285B)
1 <!DOCTYPE html> 2 <title>@container: scroll-state(snapped) matching for writing-mode</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 writing-mode: vertical-lr; 23 container-name: initially-snapped; 24 container-type: scroll-state; 25 scroll-snap-align: start; 26 width: 100px; 27 height: 100px; 28 background: teal; 29 } 30 31 @container initially-snapped scroll-state(snapped: block) { 32 span { --snapped-logical: block } 33 } 34 @container initially-snapped scroll-state(snapped: inline) { 35 span { --snapped-logical: inline } 36 } 37 @container initially-snapped scroll-state(snapped: x) { 38 span { --snapped-physical: x } 39 } 40 @container initially-snapped scroll-state(snapped: y) { 41 span { --snapped-physical: y } 42 } 43 </style> 44 <div id="filler-before"></div> 45 <div id="snapped"> 46 <span id="target">My container is snapped</span> 47 </div> 48 <div id="filler-after"></div> 49 <script> 50 setup(() => assert_implements_scroll_state_container_queries()); 51 52 promise_test(async t => { 53 await waitForAnimationFrames(2); 54 assert_equals(getComputedStyle(target).getPropertyValue("--snapped-logical"), "inline"); 55 assert_equals(getComputedStyle(target).getPropertyValue("--snapped-physical"), "y"); 56 assert_equals(document.documentElement.scrollTop, 200); 57 }, "Check scroll-state(snapped) matching for vertical writing-mode"); 58 59 promise_test(async t => { 60 snapped.style.writingMode = "horizontal-tb"; 61 await waitForAnimationFrames(2); 62 assert_equals(getComputedStyle(target).getPropertyValue("--snapped-logical"), "block"); 63 assert_equals(getComputedStyle(target).getPropertyValue("--snapped-physical"), "y"); 64 assert_equals(document.documentElement.scrollTop, 200); 65 }, "Check scroll-state(snapped) matching dynamically changing to horizontal writing-mode"); 66 67 </script>