has-focus-display-change.html (1488B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>:has(:focus) doesn't cause focusability to be lost</title> 4 <link rel="help" href="https://drafts.csswg.org/selectors/#relational"> 5 <link rel="help" href="https://bugzil.la/1983421"> 6 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 7 <link rel="author" title="Mozilla" href="https://mozilla.com"> 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 .submenu { 15 display: none; 16 } 17 #container:has(:focus) > .submenu { 18 display: block; 19 } 20 </style> 21 <div id="container"> 22 <button id="first">A</button> 23 <div class="submenu"> 24 <button id="second">B</button> 25 </div> 26 </div> 27 <script> 28 promise_test(async t => { 29 let first = document.getElementById("first"); 30 let second = document.getElementById("second"); 31 32 assert_equals(second.getBoundingClientRect().height, 0, "#second has no box"); 33 34 first.focus(); 35 assert_equals(document.activeElement, first, "#first is focused"); 36 assert_not_equals(second.getBoundingClientRect().height, 0, "#second is displayed"); 37 const kTab = '\uE004'; 38 await new test_driver.Actions() 39 .keyDown(kTab) 40 .keyUp(kTab) 41 .send(); 42 assert_equals(document.activeElement, second, "Focus can move to #second"); 43 }); 44 </script>