scroll-state-scrolled-hv.html (2894B)
1 <!DOCTYPE html> 2 <title>@container: scroll-state(scrolled) state is persisted across horizontal and vertical scrolling</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#scrolled"> 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: scroll; 14 } 15 #filler { 16 height: 600px; 17 width: 600px; 18 } 19 #target { 20 --top: no; 21 --bottom: no; 22 --left: no; 23 --right: no; 24 --none: no; 25 @container scroll-state(scrolled: top) { 26 --top: yes; 27 } 28 @container scroll-state(scrolled: bottom) { 29 --bottom: yes; 30 } 31 @container scroll-state(scrolled: left) { 32 --left: yes; 33 } 34 @container scroll-state(scrolled: right) { 35 --right: yes; 36 } 37 @container scroll-state(scrolled: none) { 38 --none: yes; 39 } 40 } 41 </style> 42 <div id="scroller"> 43 <div id="filler"> 44 <div id="target"></div> 45 </div> 46 </div> 47 <script> 48 setup(() => assert_implements_scroll_state_container_queries()); 49 50 promise_test(async t => { 51 await waitForAnimationFrames(2); 52 assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); 53 54 assert_equals(getComputedStyle(target).getPropertyValue("--left"), "no"); 55 assert_equals(getComputedStyle(target).getPropertyValue("--right"), "no"); 56 assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no"); 57 assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); 58 }, "Check that scroll-state(scrolled) state before scrolling"); 59 60 promise_test(async t => { 61 scroller.scrollBy(300, 0); 62 await waitForAnimationFrames(2); 63 scroller.scrollBy(0, 100); 64 await waitForAnimationFrames(2); 65 assert_equals(getComputedStyle(target).getPropertyValue("--left"), "no"); 66 assert_equals(getComputedStyle(target).getPropertyValue("--right"), "yes"); 67 assert_equals(scroller.scrollLeft, 300); 68 assert_equals(scroller.scrollTop, 100); 69 }, "Check that scroll-state(scrolled) horizontal state is persisted across vertical scroll event"); 70 71 promise_test(async t => { 72 scroller.scrollBy(0, 100); 73 await waitForAnimationFrames(2); 74 scroller.scrollBy(0, -100); 75 await waitForAnimationFrames(2); 76 scroller.scrollBy(-200, 0); 77 await waitForAnimationFrames(2); 78 assert_equals(getComputedStyle(target).getPropertyValue("--top"), "yes"); 79 assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); 80 assert_equals(scroller.scrollLeft, 100); 81 assert_equals(scroller.scrollTop, 100); 82 }, "Check that scroll-state(scrolled) vertical state is persisted across horizontal scroll event"); 83 84 </script>