scroll-state-scrolled-arrow-key-scroll.html (1525B)
1 <!DOCTYPE html> 2 <title>@container: scroll-state(scrolled) arrow key press 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 const ArrowDown = '\uE015'; 42 scroller.focus(); 43 await new test_driver.Actions() 44 .keyDown(ArrowDown) 45 .keyUp(ArrowDown) 46 .send(); 47 await new test_driver.Actions() 48 .keyDown(ArrowDown) 49 .keyUp(ArrowDown) 50 .send(); 51 await waitForAnimationFrames(2); 52 assert_equals(getComputedStyle(target).getPropertyValue("--y"), "yes"); 53 54 }, "Arrow key press scroll"); 55 56 </script>