scroll-state-scrolled-programmatic-relative-scrolls.html (5182B)
1 <!DOCTYPE html> 2 <title>@container: scroll-state(scrolled) changed after scroll</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-x: scroll; 14 overflow-y: scroll; 15 } 16 #filler { 17 height: 600px; 18 width: 600px; 19 } 20 #target { 21 --top: no; 22 --bottom: no; 23 --y: no; 24 --left: no; 25 --right: no; 26 --x: no; 27 --none: no; 28 @container scroll-state(scrolled: top) { 29 --top: yes; 30 } 31 @container scroll-state(scrolled: bottom) { 32 --bottom: yes; 33 } 34 @container scroll-state(scrolled: y) { 35 --y: yes; 36 } 37 @container scroll-state(scrolled: left) { 38 --left: yes; 39 } 40 @container scroll-state(scrolled: right) { 41 --right: yes; 42 } 43 @container scroll-state(scrolled: x) { 44 --x: yes; 45 } 46 @container scroll-state(scrolled: none) { 47 --none: yes; 48 } 49 } 50 </style> 51 <div id="scroller"> 52 <div id="filler"> 53 <div id="target"></div> 54 </div> 55 </div> 56 <script> 57 setup(() => assert_implements_scroll_state_container_queries()); 58 59 promise_test(async t => { 60 await waitForAnimationFrames(2); 61 assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); 62 63 assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); 64 assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no"); 65 assert_equals(getComputedStyle(target).getPropertyValue("--y"), "no"); 66 67 assert_equals(getComputedStyle(target).getPropertyValue("--left"), "no"); 68 assert_equals(getComputedStyle(target).getPropertyValue("--right"), "no"); 69 assert_equals(getComputedStyle(target).getPropertyValue("--x"), "no"); 70 }, "Check that scroll-state(scrolled) state before scrolling"); 71 72 promise_test(async t => { 73 scroller.scrollBy(0, -100); 74 await waitForAnimationFrames(2); 75 assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); 76 77 assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); 78 assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no"); 79 assert_equals(getComputedStyle(target).getPropertyValue("--y"), "no"); 80 81 assert_equals(getComputedStyle(target).getPropertyValue("--left"), "no"); 82 assert_equals(getComputedStyle(target).getPropertyValue("--right"), "no"); 83 assert_equals(getComputedStyle(target).getPropertyValue("--x"), "no"); 84 }, "Scrolling up when scrollbar is on the top should not change scroll-state(scrolled)"); 85 86 promise_test(async t => { 87 scroller.scrollTop = 200; 88 scroller.scrollBy(0, -100, "instant"); 89 scroller.scrollTop = 0; 90 await waitForAnimationFrames(2); 91 assert_equals(getComputedStyle(target).getPropertyValue("--none"), "no"); 92 93 assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); 94 assert_equals(getComputedStyle(target).getPropertyValue("--top"), "yes"); 95 assert_equals(getComputedStyle(target).getPropertyValue("--y"), "yes"); 96 assert_equals(getComputedStyle(target).getPropertyValue("--x"), "no"); 97 }, "Relative scroll followed by absolute scroll should change scroll scrolled"); 98 99 promise_test(async t => { 100 scroller.scrollBy(0, 300); 101 await waitForAnimationFrames(2); 102 assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "yes"); 103 assert_equals(getComputedStyle(target).getPropertyValue("--top"), "no"); 104 assert_equals(getComputedStyle(target).getPropertyValue("--y"), "yes"); 105 assert_equals(scroller.scrollTop, 300); 106 }, "scroll-state(scrolled) after scrolling bottom"); 107 108 promise_test(async t => { 109 scroller.scrollBy(0, -200); 110 await waitForAnimationFrames(2); 111 assert_equals(getComputedStyle(target).getPropertyValue("--top"), "yes"); 112 assert_equals(getComputedStyle(target).getPropertyValue("--bottom"), "no"); 113 assert_equals(getComputedStyle(target).getPropertyValue("--y"), "yes"); 114 assert_equals(scroller.scrollTop, 100); 115 }, "scroll-state(scrolled) after scrolling top"); 116 117 promise_test(async t => { 118 scroller.scrollBy(300, 0); 119 await waitForAnimationFrames(2); 120 assert_equals(getComputedStyle(target).getPropertyValue("--left"), "no"); 121 assert_equals(getComputedStyle(target).getPropertyValue("--right"), "yes"); 122 assert_equals(getComputedStyle(target).getPropertyValue("--x"), "yes"); 123 assert_equals(scroller.scrollLeft, 300); 124 }, "scroll-state(scrolled) after scrolling right"); 125 126 promise_test(async t => { 127 scroller.scrollBy(-200, 0); 128 await waitForAnimationFrames(2); 129 assert_equals(getComputedStyle(target).getPropertyValue("--left"), "yes"); 130 assert_equals(getComputedStyle(target).getPropertyValue("--right"), "no"); 131 assert_equals(getComputedStyle(target).getPropertyValue("--x"), "yes"); 132 assert_equals(scroller.scrollLeft, 100); 133 }, "scroll-state(scrolled) after scrolling left"); 134 135 </script>