focus-visible-007.html (3159B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>CSS Test (Selectors): Keyboard use triggers :focus-visible</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 [data-hadkeydown] :focus-visible { 14 outline: green solid 5px; 15 } 16 17 [data-hadmousedown] :focus-visible { 18 outline: red solid 5px; 19 } 20 21 [data-hadkeydown] :focus:not(:focus-visible) { 22 outline: 0; 23 background-color: red; 24 } 25 26 [data-hadmousedown] :focus:not(:focus-visible) { 27 outline: 0; 28 background-color: lime; 29 } 30 31 </style> 32 </head> 33 <body> 34 This test checks that using the keyboard in a way that does not move focus still causes <code>:focus-visible</code> matching to trigger. 35 <ol id="instructions"> 36 <li>If the user-agent does not claim to support the <code>:focus-visible</code> pseudo-class then SKIP this test.</li> 37 <li>Use the mouse to focus the element below that says "Click me."</li> 38 <li>If the element has a red outline, then the test result is FAILURE.</li> 39 <li>Press the ENTER key.</li> 40 <li>If the element now has a green outline and not red background, then the test result is SUCCESS.</li> 41 </ol> 42 43 <div id="one" tabindex="0">Click me.</div> 44 <script> 45 setup({ explicit_done: true }); 46 47 document.body.addEventListener("keydown", (e) => { 48 delete document.body.dataset.hadmousedown; 49 document.body.dataset.hadkeydown = ""; 50 }, true); 51 52 document.body.addEventListener("mousedown", (e) => { 53 delete document.body.dataset.hadkeydown; 54 document.body.dataset.hadmousedown = ""; 55 }, true); 56 57 async_test(function(t) { 58 let tested_initial_focus = false; 59 60 const handle_initial_focus = t.step_func(() => { 61 tested_initial_focus = true; 62 assert_equals(getComputedStyle(one).backgroundColor, "rgb(0, 255, 0)"); 63 assert_not_equals(getComputedStyle(one).outlineColor, "rgb(255, 0, 0)"); 64 65 one.addEventListener("keyup", t.step_func(test_modality_change)); 66 one.removeEventListener("focus", handle_initial_focus); 67 68 const enter = "\uE007"; 69 test_driver.send_keys(one, enter); 70 }); 71 72 const test_modality_change = t.step_func(() => { 73 assert_true(tested_initial_focus); 74 one.removeEventListener("keyup", test_modality_change); 75 assert_equals(getComputedStyle(one).outlineColor, "rgb(0, 128, 0)"); 76 assert_not_equals(getComputedStyle(one).backgroundColor, "rgb(255, 0, 0)"); 77 t.done(); 78 }); 79 80 one.addEventListener("focus", handle_initial_focus); 81 test_driver.click(one).then(() => done()); 82 }, "Using keyboard while element is focused should trigger :focus-visible; using mouse without moving focus should not cancel it; moving focus using mouse should cancel it."); 83 </script> 84 </body> 85 </html>