OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
kochi
2016/02/10 06:57:27
Deleted this file as multiple shadow does not exis
hayato
2016/02/10 07:06:21
I do not understand the reason. We should keep thi
kochi
2016/02/10 07:09:48
But we don't allow parameter on Element.createShad
hayato
2016/02/10 08:07:21
Acknowledged. I did not notice that delegatesFocus
| |
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 testDistributedNodes() { | |
18 debug('Testing shadow host :focus and distributed nodes'); | |
19 | |
20 // Setting up the DOM tree | |
21 var sandbox = document.querySelector('#sandbox'); | |
22 sandbox.innerHTML = ''; | |
23 sandbox.appendChild( | |
24 createDOM('div', {}, | |
25 createDOM('input', {'id': 'outer-input'}), | |
26 createDOM('div', {'id': 'shadow-host', 'tabindex': '0'}, | |
27 createDOM('input', {'id': 'light-input'}), | |
28 createShadowRoot( | |
29 createDOM('content', {}), | |
30 createDOM('div', {'id': 'inner-div'}, | |
31 document.createTextNode('Blink')), | |
32 createDOM('input', {'id': 'older-input'})), | |
33 createShadowRoot( | |
34 {'delegatesFocus': true}, | |
35 createDOM('shadow', {}), | |
36 createDOM('div', {'id': 'inner-div2'}, | |
37 document.createTextNode('Blink')), | |
38 createDOM('input', {'id': 'younger-input'}))))); | |
39 sandbox.offsetTop; | |
40 | |
41 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
42 | |
43 var host = getNodeInComposedTree('shadow-host'); | |
44 var outerInput = getNodeInComposedTree('outer-input'); | |
45 var lightInput = getNodeInComposedTree('light-input'); | |
46 var olderInput = getNodeInComposedTree('shadow-host/older-input'); | |
47 var youngerInput = getNodeInComposedTree('shadow-host//younger-input'); | |
48 | |
49 debug('(1/3) shadow host without tabindex'); | |
50 outerInput.focus(); | |
51 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
52 lightInput.focus(); | |
53 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
54 olderInput.focus(); | |
55 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); | |
56 youngerInput.focus(); | |
57 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); | |
58 host.focus(); | |
59 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); | |
60 | |
61 debug('(2/3) shadow host with tabindex=-1'); | |
62 host.tabIndex = -1; | |
63 outerInput.focus(); | |
64 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
65 lightInput.focus(); | |
66 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
67 olderInput.focus(); | |
68 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); | |
69 youngerInput.focus(); | |
70 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); | |
71 host.focus(); | |
72 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); | |
73 | |
74 debug('(3/3) shadow host with tabindex=0'); | |
75 host.tabIndex = 0; | |
76 outerInput.focus(); | |
77 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
78 lightInput.focus(); | |
79 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); | |
80 olderInput.focus(); | |
81 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); | |
82 youngerInput.focus(); | |
83 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); | |
84 host.focus(); | |
85 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); | |
86 } | |
87 | |
88 testDistributedNodes(); | |
89 </script> | |
OLD | NEW |