focus-click-on-shadow-host.html (1510B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>HTML Test: click on shadow host with delegatesFocus</title> 4 <link rel="author" href="mailto:dizhangg@chromium.org"> 5 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1327136"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 11 <body> 12 <div id="host"></div> 13 </body> 14 15 <script> 16 const host = document.getElementById("host"); 17 18 const shadowRoot = host.attachShadow({ mode: "open", delegatesFocus: true }); 19 // Add an unfocusable spacer, because test_driver.click will click on the 20 // center point of #host, and we don't want the click to land on focusableDiv 21 const spacer = document.createElement("div"); 22 spacer.style = "height: 1000px;"; 23 shadowRoot.appendChild(spacer); 24 25 const focusableDiv = document.createElement("div"); 26 focusableDiv.tabIndex = 0; 27 shadowRoot.appendChild(focusableDiv); 28 29 promise_test(async () => { 30 assert_equals(document.activeElement, document.body); 31 // Mouse click 32 await test_driver.click(host); 33 assert_equals(document.activeElement, host); 34 assert_equals(shadowRoot.activeElement, focusableDiv); 35 assert_true(host.matches(':focus')); 36 assert_true(focusableDiv.matches(':focus')); 37 assert_false(focusableDiv.matches(':focus-visible')); 38 }, ":focus should be applied to the host and the child node when the focus is moved by mouse click"); 39 40 </script>