OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <script src="../../../resources/js-test.js"></script> | |
3 <script src="resources/shadow-dom.js"></script> | |
4 <style> | |
5 div { background-color: white; } | |
6 div:focus { background-color: green; } | |
7 </style> | |
8 <body> | |
9 <div id="sandbox"></div> | |
10 </body> | |
11 <script> | |
12 description('Test if :focus matching state of shadow host is properly handled in
case of DOM mutation.'); | |
13 | |
14 function buildTree(parent, delegatesFocus) | |
15 { | |
16 parent.innerHTML = ''; | |
17 parent.appendChild( | |
18 createDOM('div', {id: 'host'}, | |
19 attachShadow({'mode': 'open', delegatesFocus: delegatesFocus}, | |
20 createDOM('input', {id: 'input'})), | |
21 createDOM('div', {id: 'dest'}))); | |
22 | |
23 parent.offsetTop; | |
24 } | |
25 | |
26 var sandbox = document.getElementById('sandbox'); | |
27 | |
28 debug('(1/2) DOM mutation across shadow boundary with delegatesFocus=false'); | |
29 buildTree(sandbox, false); | |
30 var host = getNodeInComposedTree('host'); | |
31 var input = getNodeInComposedTree('host/input'); | |
32 var dest = getNodeInComposedTree('dest'); | |
33 | |
34 backgroundColorShouldBe('host', 'rgb(255, 255, 255)'); | |
35 input.focus(); | |
36 backgroundColorShouldBe('host', 'rgb(255, 255, 255)'); | |
37 dest.appendChild(input); | |
38 backgroundColorShouldBe('host', 'rgb(255, 255, 255)'); | |
39 input.focus(); | |
40 host.shadowRoot.appendChild(input); | |
41 backgroundColorShouldBe('host', 'rgb(255, 255, 255)'); | |
42 | |
43 debug('(2/2) DOM mutation across shadow boundary with delegatesFocus=true'); | |
44 buildTree(sandbox, true); | |
45 var host = getNodeInComposedTree('host'); | |
46 var input = getNodeInComposedTree('host/input'); | |
47 var dest = getNodeInComposedTree('dest'); | |
48 | |
49 backgroundColorShouldBe('host', 'rgb(255, 255, 255)'); | |
50 input.focus(); | |
51 backgroundColorShouldBe('host', 'rgb(0, 128, 0)'); | |
52 dest.appendChild(input); | |
53 backgroundColorShouldBe('host', 'rgb(255, 255, 255)'); | |
54 input.focus(); | |
55 host.shadowRoot.appendChild(input); | |
56 // appendChild() will blur the focus from input element, thus input is no longer
focused. | |
57 backgroundColorShouldBe('host', 'rgb(255, 255, 255)'); | |
58 </script> | |
OLD | NEW |