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