scroll-state-stuck-pseudo.html (1710B)
1 <!DOCTYPE html> 2 <title>@container: scroll-state(stuck) for pseudo element</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 #scroller { 10 overflow-y: scroll; 11 height: 200px; 12 } 13 #filler { 14 height: 100px; 15 } 16 #stuck { 17 #inner { 18 height: 50px; 19 } 20 container-type: scroll-state; 21 position: sticky; 22 bottom: 0; 23 --before: no; 24 --after: no; 25 @container scroll-state(stuck: bottom) { 26 &::before { 27 --before: yes; 28 content: " "; 29 } 30 &::after { 31 --after: yes; 32 } 33 } 34 } 35 </style> 36 <div id="scroller"> 37 <div id="filler"></div> 38 <div id="stuck"> 39 <div id="inner"></div> 40 </div> 41 </div> 42 <script> 43 setup(() => assert_implements_scroll_state_container_queries()); 44 45 promise_test(async t => { 46 await waitForAnimationFrames(2); 47 assert_equals(getComputedStyle(stuck, "::before").getPropertyValue("--before"), "no"); 48 assert_equals(getComputedStyle(stuck, "::after").getPropertyValue("--after"), "no"); 49 }, "Initially, stuck query does not match and ::before/::after do not apply"); 50 51 promise_test(async t => { 52 inner.style.height = "150px"; 53 await waitForAnimationFrames(2); 54 assert_equals(getComputedStyle(stuck, "::before").getPropertyValue("--before"), "yes"); 55 assert_equals(getComputedStyle(stuck, "::after").getPropertyValue("--after"), "yes"); 56 }, "::before/::after depending on stuck query"); 57 </script>