scroll-state-scrolled-spacebar-scroll.html (1713B)
1 <!DOCTYPE html> 2 <title>@container: scroll-state(scrolled) spacebar click 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="/css/css-conditional/container-queries/support/cq-testcommon.js"></script> 11 <style> 12 #scroller { 13 width: 200px; 14 height: 200px; 15 container-type: scroll-state; 16 overflow-y: scroll; 17 } 18 #filler { 19 height: 600px; 20 } 21 #target { 22 --none: no; 23 --y: no; 24 @container scroll-state(scrolled: none) { 25 --none: yes; 26 } 27 @container scroll-state(scrolled: y) { 28 --y: yes; 29 } 30 } 31 </style> 32 <div id="scroller"> 33 <div id="filler"> 34 <div id="target"></div> 35 </div> 36 </div> 37 <script> 38 setup(() => assert_implements_scroll_state_container_queries()); 39 40 promise_test(async t => { 41 assert_equals(getComputedStyle(target).getPropertyValue("--none"), "yes"); 42 assert_equals(getComputedStyle(target).getPropertyValue("--y"), "no"); 43 scroller.focus(); 44 await new test_driver.Actions() 45 .keyDown('\uE00D') 46 .keyUp('\uE00D') 47 .send(); 48 await new test_driver.Actions() 49 .keyDown('\uE00D') 50 .keyUp('\uE00D') 51 .send(); 52 await waitForAnimationFrames(2); 53 assert_equals(getComputedStyle(target).getPropertyValue("--none"), "no"); 54 assert_equals(getComputedStyle(target).getPropertyValue("--y"), "yes"); 55 56 }, "Spacebar scroll"); 57 58 </script>