scroll-state-scrolled-wheel-scroll.html (1584B)
1 <!DOCTYPE html> 2 <title>@container: scroll-state(scrolled) mouse wheel 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-scroll-snap/support/common.js"></script> 12 <script src="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> 13 <style> 14 #scroller { 15 width: 200px; 16 height: 200px; 17 container-type: scroll-state; 18 overflow-y: scroll; 19 } 20 #filler { 21 height: 600px; 22 } 23 #target { 24 --y: no; 25 @container scroll-state(scrolled: y) { 26 --y: yes; 27 } 28 } 29 </style> 30 <div id="scroller"> 31 <div id="filler"> 32 <div id="target"></div> 33 </div> 34 </div> 35 <script> 36 setup(() => assert_implements_scroll_state_container_queries()); 37 38 promise_test(async t => { 39 let scrollEndPromise = waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller); 40 await new test_driver.Actions() 41 .scroll(0, 0, 0, 100, { origin: scroller, duration: 100 }) 42 .send(); 43 await scrollEndPromise; 44 await waitForAnimationFrames(2); 45 assert_equals(scroller.scrollTop, 100); 46 assert_equals(getComputedStyle(target).getPropertyValue("--y"), "yes"); 47 }, "Mouse wheel scroll"); 48 49 </script>