scroll-state-scrollable-body-001.html (2015B)
1 <!DOCTYPE html> 2 <title>@container: scroll-state(scrollable) matching body</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 html { 10 /* Make sure scrollbars are created on body and not propagated to viewport */ 11 overflow: scroll; 12 } 13 body { 14 height: 500px; 15 overflow: scroll; 16 container-type: scroll-state; 17 } 18 #target { 19 height: 5000px; 20 --top: no; 21 --bottom: no; 22 @container scroll-state(scrollable: top) { 23 --top: yes; 24 } 25 @container scroll-state(scrollable: bottom) { 26 --bottom: yes; 27 } 28 } 29 </style> 30 <div id="target"></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("--top"), "no"); 37 assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "yes"); 38 assert_equals(document.body.scrollTop, 0); 39 }, "Check that scroll-state(scrollable) matches bottom before scroll"); 40 41 promise_test(async t => { 42 document.body.scrollTop = 100; 43 await waitForAnimationFrames(2); 44 assert_equals(getComputedStyle(target).getPropertyValue("--top"), "yes"); 45 assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "yes"); 46 }, "Check that scroll-state(scrollable) matches both top and bottom in a middle position"); 47 48 promise_test(async t => { 49 document.body.scrollTop = 5000; 50 await waitForAnimationFrames(2); 51 assert_equals(getComputedStyle(target).getPropertyValue("--top"), "yes"); 52 assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); 53 }, "Check that scroll-state(scrollable) matches both top when scrolled to the end"); 54 55 </script>