shadowdom-in-dialog.html | Explore in Territory

<!DOCTYPE html>
<script src='../../resources/testharness.js'></script>
<script src='../../resources/testharnessreport.js'></script>
<input id="outer">

<dialog id="dlg">
  <div id="host"></div>
  <button id="btn"></button>
</dialog>

<dialog id="dlg2">
  <div id="host2"><input id="inner2"></div>
  <button id="btn2"></button>
</dialog>
<script>
'use strict';

host.attachShadow({mode: 'open'}).innerHTML = '<input id="inner">';
let inner = host.shadowRoot.querySelector('#inner');

test(() => {
  outer.focus();
  assert_equals(document.activeElement, outer);

  dlg.show();
  assert_equals(document.activeElement, btn);
  dlg.close();

  outer.focus();
  assert_equals(document.activeElement, outer);

  dlg.showModal();
  assert_equals(document.activeElement, btn);
  dlg.close();
}, "Dialog focusing steps should not use the flat tree.");


host2.attachShadow({mode: 'open'}).innerHTML = '<slot></slot>';

test(() => {
  outer.focus();
  assert_equals(document.activeElement, outer);

  dlg2.show();
  assert_equals(document.activeElement, inner2);
  dlg2.close();

  outer.focus();
  assert_equals(document.activeElement, outer);

  dlg2.showModal();
  assert_equals(document.activeElement, inner2);
  dlg2.close();
}, "Dialog focusing steps should be applied to slotted elements in Shadow DOM.");
</script>
chromium/third_party/blink/web_tests/html/dialog/shadowdom-in-dialog.html
