active-element.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/shadow-dom/active-element.html
