scroll-state-scrollable-change.html (2077B)
1 <!DOCTYPE html> 2 <title>@container: scroll-state(scrollable) changed after scroll</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 width: 200px; 11 height: 200px; 12 container-type: scroll-state; 13 overflow-y: scroll; 14 } 15 #filler { 16 height: 600px; 17 } 18 #target { 19 --top: no; 20 --bottom: no; 21 @container scroll-state(scrollable: top) { 22 --top: yes; 23 } 24 @container scroll-state(scrollable: bottom) { 25 --bottom: yes; 26 } 27 } 28 </style> 29 <div id="scroller"> 30 <div id="filler"> 31 <div id="target"></div> 32 </div> 33 </div> 34 <script> 35 setup(() => assert_implements_scroll_state_container_queries()); 36 37 promise_test(async t => { 38 await waitForAnimationFrames(2); 39 assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no"); 40 assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "yes"); 41 assert_equals(scroller.scrollTop, 0); 42 }, "Check that scroll-state(scrollable) matches bottom before scroll"); 43 44 promise_test(async t => { 45 scroller.scrollTop = 200; 46 await waitForAnimationFrames(2); 47 assert_equals(getComputedStyle(target).getPropertyValue("--top"), "yes"); 48 assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "yes"); 49 assert_equals(scroller.scrollTop, 200); 50 }, "Check that scroll-state(scrollable) matches both top and bottom in a middle position"); 51 52 promise_test(async t => { 53 scroller.scrollTop = 400; 54 await waitForAnimationFrames(2); 55 assert_equals(getComputedStyle(target).getPropertyValue("--top"), "yes"); 56 assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); 57 assert_equals(scroller.scrollTop, 400); 58 }, "Check that scroll-state(scrollable) matches both top when scrolled to the end"); 59 60 </script>