focus-visible-017-2.html (3419B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>CSS Test (Selectors): By default programatic focus matches :focus-visible and it shows an auto focus ring</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo" /> 6 <link rel="help" href="https://html.spec.whatwg.org/#phrasing-content-3" /> 7 <meta name="timeout" content="long"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/parsing-testcommon.js"></script> 11 <style> 12 #warning { 13 display: none; 14 background: red; 15 } 16 17 @supports not selector(:focus-visible) { 18 #instructions { 19 display: none; 20 } 21 22 #warning { 23 display: block; 24 } 25 } 26 </style> 27 28 <p>This test checks that by default, if using JavaScript to focus an element triggers <code>:focus-visible</code> matching, then the element should show a focus ring with <code>outline-style: auto</code>.</p> 29 <ol id="instructions"> 30 <li>Focus the following elements with the keyaboard navigation (pressing TAB), if the elements show a focus ring with <code>outline-style: auto</code>, then the test result is SUCCESS.</li> 31 </ol> 32 <p id="warning">Your user-agent does not support <code>:focus-visible</code> pseudo-class, please SKIP this test.</p> 33 34 <abbr tabindex="0">abbr</abbr> 35 <address tabindex="0">address</address> 36 <a href="#">a</a> 37 <bdi tabindex="0">bdi</bdi> 38 <blockquote tabindex="0">blockquote</blockquote> 39 <code tabindex="0">code</code> 40 <dd tabindex="0">dd</dd> 41 <details open><summary tabindex="0">summary</summary></details> 42 <details tabindex="0"></details> 43 <div tabindex="0">div</div> 44 <dl tabindex="0">dl</dl> 45 <dt tabindex="0">dt</dt> 46 <em tabindex="0">em</em> 47 <fieldset><legend tabindex="0">legend</legend></fieldset> 48 <figcaption tabindex="0">figcaption</figcaption> 49 <figure tabindex="0">figure</figure> 50 <form tabindex="0">form</form> 51 <hr tabindex="0" /> 52 <img tabindex="0" src="/images/green.png" /> 53 <label tabindex="0">label</label> 54 <li tabindex="0">li</li> 55 <mark tabindex="0">mark</mark> 56 <meter tabindex="0"></meter> 57 <ol tabindex="0">ol</ol> 58 <pre tabindex="0">pre</pre> 59 <progress tabindex="0"></progress> 60 <p tabindex="0">p</p> 61 <small tabindex="0">small</small> 62 <s tabindex="0">s</s> 63 <strong tabindex="0">strong</strong> 64 <sub tabindex="0">sub</sub> 65 <sup tabindex="0">sup</sup> 66 <table><caption tabindex="0">caption</caption></table> 67 <table tabindex="0"><td>table</td></table> 68 <table><td tabindex="0">td</td></table> 69 <time tabindex="0">time</time> 70 <ul tabindex="0">ul</ul> 71 <u tabindex="0">u</u> 72 73 <script> 74 setup({ explicit_done: true }); 75 76 // Check that :focus-visible is supported. 77 test_valid_selector(':focus-visible'); 78 79 const elements = document.querySelectorAll("[tabindex]"); 80 for (let i = 0; i < elements.length; i++) { 81 const target = elements[i]; 82 promise_test(() => { 83 return new Promise(resolve => { 84 target.addEventListener("focus", resolve); 85 target.focus(); 86 if (i == (elements.length - 1)) 87 done(); 88 }).then(() => { 89 assert_equals(getComputedStyle(target).outlineStyle, "auto", `outline-style for ${target.tagName} should be auto`); 90 }); 91 }, `By default initial programatic focus matches ':focus-visible', so the element ${target.tagName} shows a focus ring with 'outline-style: auto'`); 92 } 93 </script>