scroll-state-scrolled-mouse-drag-scroll.html (3385B)
1 <!DOCTYPE html> 2 <title>@container: scroll-state(scrolled) user mouse drag 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="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-actions.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <script src="/web-animations/testcommon.js"></script> 10 <script src="/dom/events/scrolling/scroll_support.js"></script> 11 <script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> 12 <style> 13 #scroller { 14 width: 200px; 15 height: 200px; 16 container-type: scroll-state; 17 overflow: scroll; 18 } 19 #filler { 20 height: 600px; 21 width: 600px; 22 } 23 #target { 24 --none: no; 25 --x: no; 26 --y: no; 27 @container scroll-state(scrolled: none) { 28 --none: yes; 29 } 30 @container scroll-state(scrolled: y) { 31 --y: yes; 32 } 33 @container scroll-state(scrolled: x) { 34 --x: yes; 35 } 36 } 37 </style> 38 <div id="scroller"> 39 <div id="filler"> 40 <div id="target"></div> 41 </div> 42 </div> 43 <script> 44 setup(() => assert_implements_scroll_state_container_queries()); 45 46 function drag_scrollbar(start_pos, end_pos) { 47 return new test_driver.Actions() 48 .addPointer("TestPointer", "mouse") 49 .pointerMove(Math.round(start_pos.x), Math.round(start_pos.y)) 50 .pointerDown() 51 .addTick(100) 52 .pointerMove(Math.round(end_pos.x), Math.round(end_pos.y)) 53 .pointerUp() 54 .send(); 55 } 56 57 promise_test(async t => { 58 let scrollEndPromise = waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller); 59 60 // Skip test on platforms that do not have a visible scrollbar (e.g. 61 // overlay scrollbar). 62 const scrollbar_width = scroller.offsetWidth - scroller.clientWidth; 63 if (scrollbar_width == 0) { 64 return; 65 } 66 assert_equals(scroller.scrollTop, 0); 67 68 // Vertical scrollbar position top right 69 const start_pos = { 70 x: 200, 71 y: 30, 72 }; 73 const end_pos = { x: 200, y: 200 }; 74 75 await drag_scrollbar(start_pos, end_pos); 76 await scrollEndPromise; 77 await waitForAnimationFrames(2); 78 79 assert_not_equals(scroller.scrollTop, 0); 80 assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); 81 assert_equals(getComputedStyle(target).getPropertyValue("--y"), "no"); 82 83 }, "Vertical scrollbar drag scroll"); 84 85 promise_test(async t => { 86 let scrollEndPromise = waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller); 87 88 // Skip test on platforms that do not have a visible scrollbar (e.g. 89 // overlay scrollbar). 90 const scrollbar_height = scroller.offsetHeight - scroller.clientHeight; 91 if (scrollbar_height == 0) { 92 return; 93 } 94 assert_equals(scroller.scrollLeft, 0); 95 96 // Horizontal scrollbar position bottom left 97 const start_pos = { 98 x: 30, 99 y: 200, 100 }; 101 const end_pos = { x: 200, y: 200 }; 102 103 await drag_scrollbar(start_pos, end_pos); 104 await scrollEndPromise; 105 await waitForAnimationFrames(2); 106 107 assert_not_equals(scroller.scrollLeft, 0); 108 assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); 109 assert_equals(getComputedStyle(target).getPropertyValue("--x"), "no"); 110 111 }, "Horizontal scrollbar drag scroll"); 112 113 </script>