focus-visible-018-2.html (3442B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>CSS Test (Selectors): Mouse focus does not show a focus ring by default</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="/resources/testdriver.js"></script> 11 <script src="/resources/testdriver-actions.js"></script> 12 <script src="/resources/testdriver-vendor.js"></script> 13 <script src="/css/support/parsing-testcommon.js"></script> 14 <style> 15 #warning { 16 display: none; 17 background: red; 18 } 19 20 @supports not selector(:focus-visible) { 21 #instructions { 22 display: none; 23 } 24 25 #warning { 26 display: block; 27 } 28 } 29 </style> 30 31 <p>This test checks that by default, using the mouse to focus a generic element does not show a focus ring (because it does not trigger <code>:focus-visible</code> matching).</p> 32 <ol id="instructions"> 33 <li>Click on the elements below"</li> 34 <li>If the elements do not have a focus ring, then the test result is SUCCESS.</li> 35 </ol> 36 <p id="warning">Your user-agent does not support <code>:focus-visible</code> pseudo-class, please SKIP this test.</p> 37 38 <abbr tabindex="0">abbr</abbr> 39 <address tabindex="0">address</address> 40 <a href="#">a</a> 41 <bdi tabindex="0">bdi</bdi> 42 <blockquote tabindex="0">blockquote</blockquote> 43 <code tabindex="0">code</code> 44 <dd tabindex="0">dd</dd> 45 <details open><summary tabindex="0">summary</summary></details> 46 <details tabindex="0"></details> 47 <div tabindex="0">div</div> 48 <dl tabindex="0">dl</dl> 49 <dt tabindex="0">dt</dt> 50 <em tabindex="0">em</em> 51 <fieldset><legend tabindex="0">legend</legend></fieldset> 52 <figcaption tabindex="0">figcaption</figcaption> 53 <figure tabindex="0">figure</figure> 54 <form tabindex="0">form</form> 55 <hr tabindex="0" /> 56 <img tabindex="0" src="/images/green.png" /> 57 <label tabindex="0">label</label> 58 <li tabindex="0">li</li> 59 <mark tabindex="0">mark</mark> 60 <meter tabindex="0"></meter> 61 <ol tabindex="0">ol</ol> 62 <pre tabindex="0">pre</pre> 63 <progress tabindex="0"></progress> 64 <p tabindex="0">p</p> 65 <small tabindex="0">small</small> 66 <s tabindex="0">s</s> 67 <strong tabindex="0">strong</strong> 68 <sub tabindex="0">sub</sub> 69 <sup tabindex="0">sup</sup> 70 <table><caption tabindex="0">caption</caption></table> 71 <table tabindex="0"><td>table</td></table> 72 <table><td tabindex="0">td</td></table> 73 <time tabindex="0">time</time> 74 <ul tabindex="0">ul</ul> 75 <u tabindex="0">u</u> 76 77 <script> 78 setup({ explicit_done: true }); 79 80 // Check that :focus-visible is supported. 81 test_valid_selector(':focus-visible'); 82 83 const elements = document.querySelectorAll("[tabindex]"); 84 for (let i = 0; i < elements.length; i++) { 85 const target = elements[i]; 86 promise_test(() => { 87 return new Promise(resolve => { 88 target.addEventListener("focus", resolve); 89 test_driver.click(target).then(() => { 90 if (i == (elements.length - 1)) 91 done(); 92 }).catch(resolve); 93 }).then(() => { 94 assert_equals(getComputedStyle(target).outlineStyle, "none", `outline-style for ${target.tagName} should be none`); 95 }); 96 }, `Mouse focus does not show a focus ring by default in element ${target.tagName}`); 97 } 98 </script>