shadow-nested-scope.html (2251B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>focusgroup: nested shadow focusgroup isolation</title> 4 <link rel="author" title="Microsoft" href="http://www.microsoft.com/"> 5 <link rel="help" href="https://open-ui.org/components/scoped-focusgroup.explainer/"> 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 <script src="/resources/testdriver-actions.js"></script> 11 <script src="../resources/focusgroup-utils.js"></script> 12 13 <div id=outer_fg focusgroup="toolbar inline"> 14 <button id=outer1 tabindex=0>Outer 1</button> 15 <div id=shadow_host></div> 16 <button id=outer2 tabindex=0>Outer 2</button> 17 </div> 18 19 <script> 20 function deepActiveElement(root = document) { 21 let a = root.activeElement; 22 while (a && a.shadowRoot && a.shadowRoot.activeElement) { 23 a = a.shadowRoot.activeElement; 24 } 25 return a; 26 } 27 promise_test(async t => { 28 const host = document.getElementById('shadow_host'); 29 const sr = host.attachShadow({mode: 'open'}); 30 sr.innerHTML = ` 31 <div id=inner_fg focusgroup="menu inline"> 32 <button id=inner1 tabindex=0>Inner 1</button> 33 <button id=inner2 tabindex=0>Inner 2</button> 34 </div>`; 35 const outer1 = document.getElementById('outer1'); 36 const outer2 = document.getElementById('outer2'); 37 const inner1 = sr.getElementById('inner1'); 38 const inner2 = sr.getElementById('inner2'); 39 40 await focusAndKeyPress(outer1, kArrowRight); 41 assert_equals(document.activeElement, outer2, 'Outer navigation skips inner shadow scope'); 42 assert_equals(deepActiveElement(), outer2, 'Deep active element is outer2 after outer navigation'); 43 44 inner1.focus(); 45 await sendArrowKey(kArrowRight); 46 assert_equals(sr.activeElement, inner2, 'Inner navigation advances'); 47 assert_equals(deepActiveElement(), inner2, 'Deep active element is inner2'); 48 await sendArrowKey(kArrowRight); 49 assert_equals(sr.activeElement, inner2, 'No wrap inside inner scope'); 50 assert_equals(deepActiveElement(), inner2, 'Deep active element remains inner2'); 51 }, 'Nested shadow focusgroup is isolated from outer scope navigation'); 52 </script>