| <!DOCTYPE html> |
| <script src='../resources/testharness.js'></script> |
| <script src='../resources/testharnessreport.js'></script> |
| <script src="resources/shadow-dom.js"></script> |
| <div id='wrapper'> |
| <div id='node-in-document' tabindex=1></div> |
| <div id='shadow-host-1'> |
| <template data-mode='open'> |
| <div id='shadow-host-2'> |
| <template data-mode='open'> |
| <div id='child-in-shadow-root-2' tabindex=1></div> |
| </template> |
| </div> |
| <div id='child-in-shadow-root-1' tabindex=1></div> |
| <slot></slot> |
| </template> |
| <div id='slotted-child' tabindex=1></div> |
| </div> |
| </div> |
| <script> |
| 'use strict'; |
| convertTemplatesToShadowRootsWithin(wrapper); |
| |
| const nodeInDocument = document.querySelector('#node-in-document'); |
| const slottedChild = document.querySelector('#slotted-child'); |
| |
| const shadowHost1 = document.querySelector('#shadow-host-1'); |
| const shadowRoot1 = shadowHost1.shadowRoot; |
| const childInShadowRoot1 = shadowRoot1.querySelector('#child-in-shadow-root-1'); |
| |
| const shadowHost2 = shadowRoot1.querySelector('#shadow-host-2'); |
| const shadowRoot2 = shadowHost2.shadowRoot; |
| const childInShadowRoot2 = shadowRoot2.querySelector('#child-in-shadow-root-2'); |
| |
| test(() => { |
| nodeInDocument.focus(); |
| assert_equals(document.activeElement, nodeInDocument); |
| assert_equals(shadowRoot1.activeElement, null); |
| assert_equals(shadowRoot2.activeElement, null); |
| }, "activeElement for a node in a document"); |
| |
| test(() => { |
| slottedChild.focus(); |
| assert_equals(document.activeElement, slottedChild); |
| assert_equals(shadowRoot1.activeElement, null); |
| assert_equals(shadowRoot2.activeElement, null); |
| }, "activeElement for a slotted child"); |
| |
| test(() => { |
| childInShadowRoot1.focus(); |
| assert_equals(document.activeElement, shadowHost1); |
| assert_equals(shadowRoot1.activeElement, childInShadowRoot1); |
| assert_equals(shadowRoot2.activeElement, null); |
| }, "activeElement for a node in a shadow tree"); |
| |
| test(() => { |
| childInShadowRoot2.focus(); |
| assert_equals(document.activeElement, shadowHost1); |
| assert_equals(shadowRoot1.activeElement, shadowHost2); |
| assert_equals(shadowRoot2.activeElement, childInShadowRoot2); |
| }, "activeElement for a node in a nested shadow tree"); |
| </script> |
