scroll-state-scrollable-layout-change.html (1695B)
1 <!DOCTYPE html> 2 <title>@container: scroll-state(scrollable) layout change</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#scrollable"> 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 container-type: scroll-state; 11 overflow: auto; 12 width: 100px; 13 height: 100px; 14 } 15 #target { 16 width: 200px; 17 height: 200px; 18 --scrollable: no; 19 @container scroll-state(scrollable) { 20 --scrollable: yes; 21 } 22 } 23 #target.small { 24 width: 10px; 25 height: 10px; 26 } 27 </style> 28 <div id="scroller"> 29 <div id="target"></div> 30 </div> 31 <script> 32 setup(() => assert_implements_scroll_state_container_queries()); 33 34 promise_test(async t => { 35 await waitForAnimationFrames(2); 36 assert_equals(getComputedStyle(target).getPropertyValue("--scrollable"), "yes"); 37 }, "Check scroll-state(scrollable) initially matching"); 38 39 promise_test(async t => { 40 t.add_cleanup(async () => target.className = ""); 41 target.className = "small"; 42 await waitForAnimationFrames(2); 43 assert_equals(getComputedStyle(target).getPropertyValue("--scrollable"), "no", 44 "#target not scrollable #scroller"); 45 target.className = ""; 46 await waitForAnimationFrames(2); 47 assert_equals(getComputedStyle(target).getPropertyValue("--scrollable"), "yes", 48 "#target scrollable #scroller again"); 49 }, "Check scroll-state(scrollable) not matching after layout change no longer causing overflow"); 50 51 </script>