scroll-state-scrollable-body-002.html (1636B)
1 <!DOCTYPE html> 2 <title>@container: scroll-state(scrollable) not matching body propagated to viewport</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 body { 10 height: 500px; 11 overflow: scroll; 12 container-type: scroll-state; 13 } 14 #target { 15 height: 5000px; 16 --top: no; 17 --bottom: no; 18 @container scroll-state(scrollable: top) { 19 --top: yes; 20 } 21 @container scroll-state(scrollable: bottom) { 22 --bottom: yes; 23 } 24 } 25 </style> 26 <div id="target"></div> 27 <script> 28 setup(() => assert_implements_scroll_state_container_queries()); 29 30 const root = document.documentElement; 31 32 promise_test(async t => { 33 await waitForAnimationFrames(2); 34 assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no"); 35 assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); 36 assert_equals(root.scrollTop, 0); 37 }, "Check that scroll-state(scrollable) does not match for body before scroll"); 38 39 promise_test(async t => { 40 root.scrollTop = 100; 41 await waitForAnimationFrames(2); 42 assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no"); 43 assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); 44 assert_equals(root.scrollTop, 100); 45 }, "Check that scroll-state(scrollable) does not match for body after scroll"); 46 47 </script>