focus-visible-003.html (3730B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>CSS Test (Selectors): :focus-visible does not match on non-texty inputs</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 <script src="/resources/testdriver.js"></script> 11 <script src="/resources/testdriver-actions.js"></script> 12 <script src="/resources/testdriver-vendor.js"></script> 13 <style> 14 @supports not selector(:focus-visible) { 15 :focus { 16 outline: red solid 5px; 17 background-color: red; 18 } 19 } 20 21 :focus-visible { 22 outline: red solid 5px; 23 } 24 25 :focus:not(:focus-visible) { 26 outline: 0; 27 background-color: lime; 28 } 29 </style> 30 </head> 31 <body> 32 This test checks that <code>:focus-visible</code> is <em>not</em> triggered by mouse focus on <code><input></code> elements which do not take text input. 33 <ol id="instructions"> 34 <li>If the user-agent does not claim to support the <code>:focus-visible</code> pseudo-class then SKIP this test.</li> 35 <li>Click each element element below to focus it.</li> 36 <li>If the element has a red outline, then the test result is FAILURE. If the element has a green background, then the test result is SUCCESS.</li> 37 </ol> 38 <br /> 39 <div> 40 <span class="check" id="el-1" tabindex="1">Focus me</span> 41 </div> 42 <div> 43 <span class="check" id="el-2" tabindex="-1">Focus me</span> 44 </div> 45 <div> 46 <span class="check" id="el-3" tabindex="0">Focus me</span> 47 </div> 48 <div> 49 <button class="check" id="el-4">Focus me</span> 50 </div> 51 <div> 52 <input class="check" id="el-5" type="button" value="Focus me"></input> 53 </div> 54 <div> 55 <input class="check" id="el-6" type="image" alt="Focus me."></input> 56 </div> 57 <div> 58 <input class="check" id="el-7" type="reset" value="Focus me."></input> 59 </div> 60 <div> 61 <input class="check" id="el-8" type="submit" value="Focus me."></input> 62 </div> 63 <div> 64 <label><input class="check" id="el-9" type="checkbox"></input> Focus me.</label> 65 </div> 66 <div> 67 <label><input class="check" id="el-10" type="radio"></input> Focus me.</label> 68 </div> 69 <div> 70 <!-- Focusing file input triggers a modal, so only test manually --> 71 <input id="el-11" type="file" value="Focus me."></input> 72 </div> 73 <div> 74 <label><input class="check" id="el-12" type="range"></input> Focus me.</label> 75 </div> 76 <div> 77 <!-- Ensure the color input is last, as it has a pop-up which obscures other elements --> 78 <label><input class="check" id="el-13" type="color"></input> Focus me.</label> 79 </div> 80 <script> 81 setup({ explicit_done: true }); 82 83 const elements = document.querySelectorAll(".check"); 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 }); 93 }).then(() => { 94 assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 255, 0)", `backgroundColor for ${target.tagName}#${target.id} should be lime`); 95 assert_not_equals(getComputedStyle(target).outlineColor, "rgb(255, 0, 0)", `outlineColor for ${target.tagName}#${target.id} should NOT be red`); 96 }); 97 }, `Focus element ${target.tagName}#${target.id} via mouse should NOT match :focus-visible as it does NOT support keyboard input`); 98 } 99 </script> 100 </body> 101 </html>