scroll-state-stuck-layout-change.html (1355B)
1 <!DOCTYPE html> 2 <title>@container: scroll-state(stuck) layout change</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: 300px; 12 } 13 #filler { 14 height: 100px; 15 } 16 #stuck { 17 container-type: scroll-state; 18 position: sticky; 19 bottom: 0; 20 height: 100px; 21 background-color: teal; 22 } 23 #target { 24 --stuck: no; 25 @container scroll-state(stuck: bottom) { 26 --stuck: yes; 27 } 28 } 29 </style> 30 <div id="scroller"> 31 <div id="filler"></div> 32 <div id="stuck"> 33 <span id="target"></span> 34 </div> 35 </div> 36 <script> 37 setup(() => assert_implements_scroll_state_container_queries()); 38 39 promise_test(async t => { 40 await waitForAnimationFrames(2); 41 assert_equals(getComputedStyle(target).getPropertyValue("--stuck"), "no", "Initially not stuck"); 42 }); 43 44 promise_test(async t => { 45 filler.style.height = "400px"; 46 await waitForAnimationFrames(2); 47 assert_equals(getComputedStyle(target).getPropertyValue("--stuck"), "yes", "Stuck after #filler height changed"); 48 }); 49 </script>