focus-visible-026.html (1417B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>CSS Test (Selectors): Checkbox doesn't match :focus-visiblel after click on label</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 <meta name="assert" content="This test checks that :focus-visible does NOT match when a checkbox is focused because an associated label has been clicked."> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script src="/resources/testdriver-vendor.js"></script> 12 <script src="/resources/accesskey.js"></script> 13 <script src="/css/support/parsing-testcommon.js"></script> 14 <style> 15 :focus-visible { 16 outline: red solid 5px; 17 } 18 </style> 19 <input type="checkbox" id="checkbox"> 20 <label for="checkbox" id="label">label</label> 21 <script> 22 // Check that :focus-visible is supported. 23 test_valid_selector(':focus-visible'); 24 25 promise_test(async t => { 26 await test_driver.click(label); 27 assert_equals(getComputedStyle(checkbox).outlineStyle, "none", `outline-style for ${checkbox.tagName}#${checkbox.id} should be none`); 28 t.done(); 29 }, ":focus-visible does NOT match when a checkbox is focused via click on the associated label"); 30 </script>