scroll-state-stuck-writing-direction.html (2792B)
1 <!DOCTYPE html> 2 <title>@container: scroll-state(stuck) matching writing-direction of query container</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#stuck"> 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 #filler { 10 height: 10000px; 11 } 12 #stuck { 13 container-type: scroll-state; 14 position: sticky; 15 bottom: 0; 16 width: 100px; 17 height: 100px; 18 background: lime; 19 } 20 #target { 21 writing-mode: horizontal-tb; 22 direction: ltr; 23 width: 100px; 24 height: 100px; 25 background: orange; 26 } 27 @container scroll-state(stuck: inline-start) { 28 #target { --stuck: inline-start } 29 } 30 @container scroll-state(stuck: inline-end) { 31 #target { --stuck: inline-end } 32 } 33 @container scroll-state(stuck: block-start) { 34 #target { --stuck: block-start } 35 } 36 @container scroll-state(stuck: block-end) { 37 #target { --stuck: block-end } 38 } 39 </style> 40 <div id="filler"></div> 41 <div id="stuck"> 42 <div id="target"></div> 43 </div> 44 <script> 45 setup(() => assert_implements_scroll_state_container_queries()); 46 47 promise_test(async t => { 48 await waitForAnimationFrames(2); 49 assert_equals(getComputedStyle(target).getPropertyValue("--stuck"), "block-end"); 50 }, "bottom edge matching block-end for horizontal-tb/ltr"); 51 52 promise_test(async t => { 53 stuck.style.writingMode = "vertical-lr"; 54 stuck.style.direction = "ltr"; 55 assert_equals(getComputedStyle(target).getPropertyValue("--stuck"), "inline-end"); 56 }, "bottom edge matching inline-end for vertical-lr/ltr"); 57 58 promise_test(async t => { 59 stuck.style.writingMode = "vertical-rl"; 60 stuck.style.direction = "ltr"; 61 assert_equals(getComputedStyle(target).getPropertyValue("--stuck"), "inline-end"); 62 }, "bottom edge matching inline-end for vertical-rl/ltr"); 63 64 promise_test(async t => { 65 stuck.style.writingMode = "vertical-lr"; 66 stuck.style.direction = "rtl"; 67 assert_equals(getComputedStyle(target).getPropertyValue("--stuck"), "inline-start"); 68 }, "bottom edge matching inline-start for vertical-lr/rtl"); 69 70 promise_test(async t => { 71 stuck.style.writingMode = "vertical-rl"; 72 stuck.style.direction = "rtl"; 73 assert_equals(getComputedStyle(target).getPropertyValue("--stuck"), "inline-start"); 74 }, "bottom edge matching inline-start for vertical-rl/rtl"); 75 76 promise_test(async t => { 77 stuck.style.writingMode = "horizontal-tb"; 78 stuck.style.direction = "rtl"; 79 assert_equals(getComputedStyle(target).getPropertyValue("--stuck"), "block-end"); 80 }, "bottom edge matching block-end for horizontal-tb/rtl"); 81 82 </script>