focus-visible-004.html (3705B)
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 with appearance: none</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 30 .check { 31 -webkit-appearance: none; 32 appearance: none; 33 } 34 </style> 35 </head> 36 <body> 37 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, even if <code>appearance: none</code> is used. 38 <ol id="instructions"> 39 <li>If the user-agent does not claim to support the <code>:focus-visible</code> pseudo-class then SKIP this test.</li> 40 <li>Click each element element below to focus it.</li> 41 <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> 42 </ol> 43 <br /> 44 <div> 45 <span class="check" id="el-1" tabindex="1">Focus me</span> 46 </div> 47 <div> 48 <span class="check" id="el-2" tabindex="-1">Focus me</span> 49 </div> 50 <div> 51 <span class="check" id="el-3" tabindex="0">Focus me</span> 52 </div> 53 <div> 54 <button class="check" id="el-4">Focus me</span> 55 </div> 56 <div> 57 <input class="check" id="el-5" type="button" value="Focus me"></input> 58 </div> 59 <div> 60 <input class="check" id="el-6" type="image" alt="Focus me."></input> 61 </div> 62 <div> 63 <input class="check" id="el-7" type="reset" value="Focus me."></input> 64 </div> 65 <div> 66 <input class="check" id="el-8" type="submit" value="Focus me."></input> 67 </div> 68 <div> 69 <!-- Focusing file input triggers a modal, so only test manually --> 70 <input id="el-9" type="file" value="Focus me."></input> 71 </div> 72 <div> 73 <label><input class="check" id="el-10" type="range"></input> Focus me.</label> 74 </div> 75 <div> 76 <!-- Ensure the color input is last, as it has a pop-up which obscures other elements --> 77 <label><input class="check" id="el-11" type="color"></input> Focus me.</label> 78 </div> 79 <script> 80 setup({ explicit_done: true }); 81 82 const elements = document.querySelectorAll(".check"); 83 for (let i = 0; i < elements.length; i++) { 84 const target = elements[i]; 85 promise_test(() => { 86 return new Promise(resolve => { 87 target.addEventListener("focus", resolve); 88 test_driver.click(target).then(() => { 89 if (i == (elements.length - 1)) 90 done(); 91 }); 92 }).then(() => { 93 assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 255, 0)", `backgroundColor for ${target.tagName}#${target.id} should be lime`); 94 assert_not_equals(getComputedStyle(target).outlineColor, "rgb(255, 0, 0)", `outlineColor for ${target.tagName}#${target.id} should NOT be red`); 95 }); 96 }, `Focus element ${target.tagName}#${target.id} via mouse should NOT match :focus-visible as it does NOT support keyboard input - not affected by "appearance: none"`); 97 } 98 </script> 99 </body> 100 </html>