focus-visible-017.html (1844B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>CSS Test (Selectors): By default initial 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 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/css/support/parsing-testcommon.js"></script> 10 <style> 11 #warning { 12 display: none; 13 background: red; 14 } 15 16 @supports not selector(:focus-visible) { 17 #instructions { 18 display: none; 19 } 20 21 #warning { 22 display: block; 23 } 24 } 25 </style> 26 27 <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> 28 <ol id="instructions"> 29 <li>If the element below that says "Target" show a focus ring with <code>outline-style: auto</code>, then the test result is SUCCESS.</li> 30 </ol> 31 <p id="warning">Your user-agent does not support <code>:focus-visible</code> pseudo-class, please SKIP this test.</p> 32 <div id="target" tabindex="0">Target</div> 33 <script> 34 // Check that :focus-visible is supported. 35 test_valid_selector(':focus-visible'); 36 37 async_test(function(t) { 38 target.addEventListener("focus", t.step_func(function() { 39 assert_equals(getComputedStyle(target).outlineStyle, "auto", `outline-style for ${target.tagName}#${target.id} should be auto`); 40 t.done(); 41 })); 42 target.focus(); 43 }, "By default initial programatic focus matches ':focus-visible', so the element shows a focus ring with 'outline-style: auto'"); 44 </script>