68 lines
2.3 KiB
HTML
68 lines
2.3 KiB
HTML
<!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>
|