blur-on-shadow-host-delegatesFocus.html (1318B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>HTML Test: Blur on shadow host</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-vendor.js"></script> 8 9 <div id="host"> 10 <input id="slotted"> 11 </div> 12 13 <script> 14 const host = document.getElementById("host"); 15 16 const shadowRoot = host.attachShadow({ mode: "open", delegatesFocus: true }); 17 18 shadowRoot.innerHTML = "<input><slot>" 19 20 test(function() { 21 host.focus(); 22 assert_equals(document.activeElement, host); 23 assert_equals(shadowRoot.activeElement, shadowRoot.querySelector("input")); 24 host.blur(); 25 assert_equals(document.activeElement, document.body); 26 assert_equals(shadowRoot.activeElement, null); 27 }, "Calling blur() on shadow host with delegatesFocus should remove the focus."); 28 29 test(function() { 30 const slotted = document.getElementById("slotted"); 31 slotted.focus(); 32 assert_equals(document.activeElement, slotted); 33 assert_equals(shadowRoot.activeElement, null) 34 host.blur(); 35 assert_equals(document.activeElement, slotted); 36 assert_equals(shadowRoot.activeElement, null) 37 }, "Calling blur() on shadow host with delegatesFocus when the focus is on a slotted element should not remove the focus."); 38 </script>