scroll-state-scrolled-keyboard-scroll-on-root.html (1294B)
1 <!DOCTYPE html> 2 <title>@container: scroll-state(scrolled) keyboard scroll on root element</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 html { 13 container-type: scroll-state; 14 } 15 16 body { 17 min-height: 200vh; 18 } 19 20 div { 21 --y: no; 22 } 23 24 @container scroll-state(scrolled: y) { 25 div { 26 --y: yes; 27 } 28 } 29 </style> 30 <body> 31 <div id="target"></div> 32 </body> 33 <script> 34 setup(() => assert_implements_scroll_state_container_queries()); 35 36 promise_test(async t => { 37 await new test_driver.Actions() 38 .keyDown('\uE00D') 39 .keyUp('\uE00D') 40 .send(); 41 await new test_driver.Actions() 42 .keyDown('\uE00D') 43 .keyUp('\uE00D') 44 .send(); 45 await waitForAnimationFrames(2); 46 assert_equals(getComputedStyle(target).getPropertyValue("--y"), "yes"); 47 }, "Spacebar scroll on root"); 48 49 </script>