focus-visible-originating-element.html (1043B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Test: ::before matches when originating element has :focus-visible selector</title> 4 <link rel="help" href="https://drafts.csswg.org/css-pseudo/#generated-content"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-actions.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <style> 11 input { 12 outline: none; 13 14 &:not(:disabled):focus-visible::before { 15 background-color: green; 16 } 17 } 18 19 input::before { 20 content: ""; 21 background-color: red; 22 display: inline-block; 23 height: 50px; 24 width: 50px; 25 } 26 </style> 27 <input type="checkbox" id="target"/> 28 <script> 29 promise_test(async t => { 30 const kTab = '\uE004'; 31 await new test_driver.Actions() 32 .keyDown(kTab) 33 .keyUp(kTab) 34 .send(); 35 assert_equals(getComputedStyle(target, "::before").backgroundColor, "rgb(0, 128, 0)"); 36 }); 37 </script>