focus-visible-010.html (1748B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>CSS Test (Selectors): Keyboard focus enables :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 <style> 11 @supports not selector(:focus-visible) { 12 :focus { 13 outline: red solid 5px; 14 background-color: red; 15 } 16 } 17 18 :focus-visible { 19 outline: green solid 5px; 20 } 21 22 :focus:not(:focus-visible) { 23 background-color: red; 24 outline: 0; 25 } 26 </style> 27 </head> 28 <body> 29 This test checks that any element focused programmatically on page load will have <code>:focus-visible</code> matching enabled. 30 <ul id="instructions"> 31 <li>If the element that says "I will be focused automatically" has a red background, then the test result is FAILURE. If the element has a green outline, then the test result is SUCCESS.</li> 32 </ul> 33 <br /> 34 <div id="el" tabindex="-1">I will be focused automatically.</div> 35 <script> 36 window.addEventListener('load', () => { 37 el.focus(); 38 }); 39 40 async_test(function(t) { 41 el.addEventListener("focus", t.step_func(function() { 42 assert_equals(getComputedStyle(el).outlineColor, "rgb(0, 128, 0)", `outlineColor for ${el.tagName}#${el.id} should be green`); 43 assert_not_equals(getComputedStyle(el).backgroundColor, "rgb(255, 0, 0)", `backgroundColor for ${el.tagName}#${el.id} should NOT be red`); 44 t.done(); 45 })); 46 }, "Programmatic focus on page load should match :focus-visible"); 47 </script> 48 </body> 49 </html>