1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
<!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>
|
