Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /shadow-dom/focus/focus-shadowhost-display-none.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#host:focus { display: none; }
</style>
<div id='sandbox'></div>
<script>
'use strict';
// Check if shadow host with display:none CSS rule for :focus works. crbug.com/482830
var host;
var root;
var input;
function setupShadowDOM(delegatesFocus) {
sandbox.innerHTML = '';
host = sandbox.appendChild(document.createElement('div'));
host.id = 'host';
root = host.attachShadow({mode: 'open', delegatesFocus: delegatesFocus});
input = document.createElement('input');
root.appendChild(input);
host.tabIndex = 0;
}
promise_test(() => {
setupShadowDOM(false);
return new Promise(
function(resolve) {
host.focus();
assert_equals(window.getComputedStyle(host).display, 'none');
assert_equals(document.activeElement, host);
assert_equals(root.activeElement, null);
function onBlur() {
assert_equals(window.getComputedStyle(host).display, 'block');
assert_equals(document.activeElement, document.body);
assert_equals(root.activeElement, null);
host.removeEventListener('blur', onBlur);
resolve();
}
host.addEventListener('blur', onBlur);
});
}, 'when shadow host itself is focused, it should match display:none, lose focus then becomes display:block again.');
promise_test(() => {
setupShadowDOM(true);
return new Promise(
function(resolve) {
input.focus();
assert_equals(window.getComputedStyle(host).display, 'none');
assert_equals(document.activeElement, host);
assert_equals(root.activeElement, input);
function onBlur() {
assert_equals(window.getComputedStyle(host).display, 'block');
assert_equals(document.activeElement, document.body);
assert_equals(root.activeElement, null);
input.removeEventListener('blur', onBlur);
resolve();
}
input.addEventListener('blur', onBlur);
});
}, 'when shadow host with delegatesFocus=true has focused element inside the shadow, it should also match display:none, then lose focus and become display:block again.');
</script>