scroll-state-initially-stuck.html (1087B)
1 <!DOCTYPE html> 2 <title>@container: scroll-state(stuck) 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 #filler { 10 height: 10000px; 11 } 12 #stuck { 13 container-name: initially-stuck; 14 container-type: scroll-state; 15 position: sticky; 16 bottom: 0; 17 } 18 19 @container initially-stuck scroll-state(stuck: bottom) { 20 span { --stuck: yes } 21 } 22 </style> 23 <div id="filler"></div> 24 <div id="stuck"> 25 <span id="target">My container is stuck</span> 26 </div> 27 <script> 28 setup(() => assert_implements_scroll_state_container_queries()); 29 30 promise_test(async t => { 31 await waitForAnimationFrames(2); 32 assert_equals(getComputedStyle(target).getPropertyValue("--stuck"), "yes"); 33 }, "Check that scroll-state(stuck: bottom) matches"); 34 </script>