scroll-state-scrollable-root.html (1894B)
1 <!DOCTYPE html> 2 <title>@container: scroll-state(scrollable) matching viewport for root element</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 :root { 10 container-type: scroll-state; 11 } 12 #target { 13 height: 5000px; 14 --top: no; 15 --bottom: no; 16 @container scroll-state(scrollable: top) { 17 --top: yes; 18 } 19 @container scroll-state(scrollable: bottom) { 20 --bottom: yes; 21 } 22 } 23 </style> 24 <div id="target"></div> 25 <script> 26 setup(() => assert_implements_scroll_state_container_queries()); 27 28 const root = document.documentElement; 29 30 promise_test(async t => { 31 await waitForAnimationFrames(2); 32 assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no"); 33 assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "yes"); 34 assert_equals(root.scrollTop, 0); 35 }, "Check that scroll-state(scrollable) matches bottom before scroll"); 36 37 promise_test(async t => { 38 root.scrollTop = 100; 39 await waitForAnimationFrames(2); 40 assert_equals(getComputedStyle(target).getPropertyValue("--top"), "yes"); 41 assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "yes"); 42 }, "Check that scroll-state(scrollable) matches both top and bottom in a middle position"); 43 44 promise_test(async t => { 45 root.scrollTop = 5000; 46 await waitForAnimationFrames(2); 47 assert_equals(getComputedStyle(target).getPropertyValue("--top"), "yes"); 48 assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); 49 }, "Check that scroll-state(scrollable) matches both top when scrolled to the end"); 50 51 </script>