focus-visible-002.html (3656B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>CSS Test (Selectors): :focus-visible always matches on texty input elements</title> 6 <meta name="timeout" content="long"> 7 <link rel="author" title="Alice Boxhall" href="aboxhall@chromium.org" /> 8 <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo" /> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/resources/testdriver.js"></script> 12 <script src="/resources/testdriver-actions.js"></script> 13 <script src="/resources/testdriver-vendor.js"></script> 14 <style> 15 @supports not selector(:focus-visible) { 16 :focus { 17 outline: red solid 5px; 18 background-color: red; 19 } 20 } 21 22 :focus-visible { 23 outline: green solid 5px; 24 } 25 26 :focus:not(:focus-visible) { 27 outline: 0; 28 background-color: red; 29 } 30 </style> 31 </head> 32 <body> 33 This test checks that <code>:focus-visible</code> always matches on <code><input></code> elements which take text input, regardless of focus mechanism. 34 <ol id="instructions"> 35 <li>If the user-agent does not claim to support the <code>:focus-visible</code> pseudo-class then SKIP this test.</li> 36 <li><strong>Click</strong> each form element below to focus it.</li> 37 <li>If the element has a red background, then the test result is FAILURE. If the element has a green outline, then the test result is SUCCESS.</li> 38 </ol> 39 <br> 40 <div> 41 <input class="check" id="input1" value="Focus me."></input> 42 </div> 43 <div> 44 <input class="check" id="input2" type="text" value="Focus me."></input> 45 </div> 46 <div> 47 <input class="check" id="input3" type="email" value="Focus me."></input> 48 </div> 49 <div> 50 <input class="check" id="input4" type="password" value="Focus me."></input> 51 </div> 52 <div> 53 <input class="check" id="input5" type="search" value="Focus me."></input> 54 </div> 55 <div> 56 <input class="check" id="input6" type="telephone" value="Focus me."></input> 57 </div> 58 <div> 59 <input class="check" id="input7" type="url" value="Focus me."></input> 60 </div> 61 <div> 62 <input class="check" id="input8" type="number" value="10000"></input> 63 </div> 64 <div> 65 <input class="check" id="input9" type="date"></input> 66 </div> 67 <div> 68 <input class="check" id="input10" type="datetime-local"></input> 69 </div> 70 <div> 71 <input class="check" id="input11" type="month"></input> 72 </div> 73 <div> 74 <input class="check" id="input12" type="time"></input> 75 </div> 76 <div> 77 <input class="check" id="input13" type="week"></input> 78 </div> 79 <div> 80 <textarea class="check" id="input14">Focus me.</textarea> 81 </div> 82 <script> 83 setup({ explicit_done: true }); 84 85 const elements = document.querySelectorAll(".check"); 86 for (let i = 0; i < elements.length; i++) { 87 const target = elements[i]; 88 promise_test(() => { 89 return new Promise(resolve => { 90 target.addEventListener("focus", resolve); 91 test_driver.click(target).then(() => { 92 if (i == (elements.length - 1)) 93 done(); 94 }); 95 }).then(() => { 96 assert_equals(getComputedStyle(target).outlineColor, "rgb(0, 128, 0)", `outlineColor for ${target.tagName}#${target.id} should be green`); 97 assert_not_equals(getComputedStyle(target).backgroundColor, "rgb(255, 0, 0)", `backgroundColor for ${target.tagName}#${target.id} should NOT be red`); 98 }); 99 }, `Focus element ${target.tagName}#${target.id} via mouse should match :focus-visible as it supports keyboard input`); 100 } 101 </script> 102 </body> 103 </html>