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 { | |
6 background-color: white; | |
7 } | |
8 | |
9 div#shadow-host:focus { | |
10 background-color: green; | |
11 } | |
12 </style> | |
13 <body> | |
14 <div id="sandbox"></div> | |
15 </body> | |
16 <script> | |
17 function testWithoutDelegatesFocus() | |
18 { | |
19 debug(':focus and shadow host without delegatesFocus for crbug/479050'); | |
20 | |
21 // Setting up the DOM tree | |
22 var sandbox = document.querySelector('#sandbox'); | |
23 sandbox.innerHTML = ''; | |
24 sandbox.appendChild( | |
25 createDOM('div', {}, | |
26 createDOM('input', {'id': 'outer-input1'}), | |
27 createDOM('div', {'id': 'shadow-host'}, | |
28 createDOM('input', {'id': 'lightdom-input'}), | |
29 createShadowRoot( | |
30 createDOM('content'), | |
31 createDOM('input', {'id': 'inner-input'}))), | |
32 createDOM('input', {'id': 'outer-input2'}))); | |
33 sandbox.offsetTop; | |
34 | |
35 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
36 | |
37 var host = getNodeInComposedTree('shadow-host'); | |
38 var innerInput = getNodeInComposedTree('shadow-host/inner-input'); | |
39 var lightdomInput = getNodeInComposedTree('lightdom-input'); | |
40 var outerInput1 = getNodeInComposedTree('outer-input1'); | |
41 var outerInput2 = getNodeInComposedTree('outer-input2'); | |
42 | |
43 debug('Test shadow host without tabindex'); | |
44 outerInput1.focus(); | |
45 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
46 outerInput2.focus(); | |
47 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
48 innerInput.focus(); | |
49 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
50 lightdomInput.focus(); | |
51 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
52 host.focus(); // host will not get focus as it is not focusable. | |
53 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
54 | |
55 debug('Test shadow host with tabindex=-1'); | |
56 host.tabIndex = -1; | |
57 outerInput1.focus(); | |
58 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
59 outerInput2.focus(); | |
60 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
61 innerInput.focus(); | |
62 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
63 lightdomInput.focus(); | |
64 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
65 host.focus(); | |
66 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); | |
67 | |
68 debug('Test shadow host without tabindex=0'); | |
69 host.tabIndex = 0; | |
70 outerInput1.focus(); | |
71 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
72 outerInput2.focus(); | |
73 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
74 innerInput.focus(); | |
75 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
76 lightdomInput.focus(); | |
77 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
78 host.focus(); | |
79 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); | |
80 } | |
81 | |
82 testWithoutDelegatesFocus(); | |
83 </script> | |
OLD | NEW |