| <!DOCTYPE html> |
| <script src='../../resources/testharness.js'></script> |
| <script src='../../resources/testharnessreport.js'></script> |
| <!-- This test is testing unspecified behavior of using Shadow DOM in <dialog>. |
| See crbug/383230 and https://github.com/whatwg/html/issue/2393 . --> |
| <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, host); |
| assert_equals(host.shadowRoot.activeElement, inner); |
| dlg.close(); |
| |
| outer.focus(); |
| assert_equals(document.activeElement, outer); |
| |
| dlg.showModal(); |
| assert_equals(document.activeElement, host); |
| assert_equals(host.shadowRoot.activeElement, inner); |
| dlg.close(); |
| }, "Dialog focusing steps should be applied to elements inside ShadowRoot."); |
| |
| |
| 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> |
