focus-visible-011.html (2358B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>CSS Test (Selectors): :focus-visible matches even if preventDefault() is called</title> 6 <link rel="author" title="Alice Boxhall" href="aboxhall@chromium.org" /> 7 <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo" /> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/resources/testdriver.js"></script> 11 <script src="/resources/testdriver-vendor.js"></script> 12 <style> 13 @supports not selector(:focus-visible) { 14 #next:focus { 15 outline: red solid 5px; 16 background-color: red; 17 } 18 } 19 20 button { 21 border: 0; 22 } 23 24 :focus-visible { 25 outline: green solid 5px; 26 } 27 28 :focus:not(:focus-visible) { 29 background-color: red; 30 outline: 0; 31 } 32 </style> 33 </head> 34 <body> 35 This test checks that <code>:focus-visible</code> matches after a keyboard event, 36 even if the event handler calls preventDefault() on the event. 37 <ul id="instructions"> 38 <li>Click "Click here and press right arrow.".</li> 39 <li>Press the right arrow key.</li> 40 <li>If the element has a red background, then the test result is FAILURE. 41 If it has a green outline, then the test result is SUCCESS.</li> 42 </ul> 43 <br /> 44 <div id="target" tabindex="0">Click here and press right arrow.</div> 45 <script> 46 target.addEventListener("keydown", (e) => { 47 e.preventDefault(); 48 }); 49 target.addEventListener("keyup", (e) => { 50 e.preventDefault(); 51 }); 52 target.addEventListener("keypress", (e) => { 53 e.preventDefault(); 54 }); 55 async_test(function(t) { 56 target.addEventListener("focus", () => { 57 const arrow_right = "\ue014"; 58 test_driver.send_keys(target, arrow_right); 59 }); 60 61 target.addEventListener("keyup", t.step_func_done((e) => { 62 assert_equals(getComputedStyle(target).outlineColor, "rgb(0, 128, 0)", `outlineColor for ${target.tagName}#${target.id} should be green`); 63 assert_not_equals(getComputedStyle(target).backgroundColor, "rgb(255, 0, 0)", `backgroundColor for ${target.tagName}#${target.id} should NOT be red`); 64 })); 65 66 test_driver.click(target); 67 }, ":focus-visible matches even if preventDefault() is called"); 68 </script> 69 </body> 70 </html>