Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(82)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host3.html

Issue 1684533002: Rename "tree of trees" to "composed tree". (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host2.html ('k') | third_party/WebKit/LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host3-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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 { 5 div {
6 background-color: white; 6 background-color: white;
7 } 7 }
8 8
9 div#shadow-host:focus { 9 div#shadow-host:focus {
10 background-color: green; 10 background-color: green;
11 } 11 }
12 </style> 12 </style>
13 <body> 13 <body>
14 <div id="sandbox"></div> 14 <div id="sandbox"></div>
15 </body> 15 </body>
16 <script> 16 <script>
17 function buildShadowTreeOfTrees(delegatesFocus1, delegatesFocus2) { 17 function buildShadowComposedTree(delegatesFocus1, delegatesFocus2) {
18 var sandbox = document.querySelector('#sandbox'); 18 var sandbox = document.querySelector('#sandbox');
19 sandbox.innerHTML = ''; 19 sandbox.innerHTML = '';
20 sandbox.appendChild( 20 sandbox.appendChild(
21 createDOM('div', {}, 21 createDOM('div', {},
22 createDOM('input', {'id': 'outer-input'}), 22 createDOM('input', {'id': 'outer-input'}),
23 createDOM('div', {'id': 'shadow-host'}, 23 createDOM('div', {'id': 'shadow-host'},
24 createShadowRoot( 24 createShadowRoot(
25 {'delegatesFocus': delegatesFocus1}, 25 {'delegatesFocus': delegatesFocus1},
26 createDOM('style', {}, 26 createDOM('style', {},
27 document.createTextNode('div { background-color: yellow; } div#inner-shadow-host:focus { background-color: blue; }')), 27 document.createTextNode('div { background-color: yellow; } div#inner-shadow-host:focus { background-color: blue; }')),
28 createDOM('div', {'id': 'inner-div'}, 28 createDOM('div', {'id': 'inner-div'},
29 document.createTextNode('Blink')), 29 document.createTextNode('Blink')),
30 createDOM('input', {'id': 'inner-input'}), 30 createDOM('input', {'id': 'inner-input'}),
31 createDOM('div', {'id': 'inner-shadow-host'}, 31 createDOM('div', {'id': 'inner-shadow-host'},
32 createShadowRoot( 32 createShadowRoot(
33 {'delegatesFocus': delegatesFocus2}, 33 {'delegatesFocus': delegatesFocus2},
34 createDOM('div', {'id': 'inner-div2'}, 34 createDOM('div', {'id': 'inner-div2'},
35 document.createTextNode('Blink')), 35 document.createTextNode('Blink')),
36 createDOM('input', {'id': 'inner-input2'}))))))); 36 createDOM('input', {'id': 'inner-input2'})))))));
37 sandbox.offsetTop; 37 sandbox.offsetTop;
38 } 38 }
39 39
40 function testShadowTreeOfTrees() { 40 function testShadowComposedTree() {
41 debug('testing shadow tree of trees'); 41 debug('testing shadow composed tree');
42 42
43 debug('(1/4) both shadow hosts\' delegateFocus are false'); 43 debug('(1/4) both shadow hosts\' delegateFocus are false');
44 buildShadowTreeOfTrees(false, false); 44 buildShadowComposedTree(false, false);
45 45
46 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); 46 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
47 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ; 47 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
48 48
49 var host = getNodeInTreeOfTrees('shadow-host'); 49 var host = getNodeInComposedTree('shadow-host');
50 var innerHost = getNodeInTreeOfTrees('shadow-host/inner-shadow-host'); 50 var innerHost = getNodeInComposedTree('shadow-host/inner-shadow-host');
51 var input = getNodeInTreeOfTrees('shadow-host/inner-input'); 51 var input = getNodeInComposedTree('shadow-host/inner-input');
52 var input2 = getNodeInTreeOfTrees('shadow-host/inner-shadow-host/inner-input 2'); 52 var input2 = getNodeInComposedTree('shadow-host/inner-shadow-host/inner-inpu t2');
53 var outerInput = document.querySelector('#outer-input'); 53 var outerInput = document.querySelector('#outer-input');
54 54
55 input.focus() 55 input.focus()
56 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); 56 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
57 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ; 57 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
58 input2.focus(); 58 input2.focus();
59 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); 59 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
60 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ; 60 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
61 outerInput.focus(); 61 outerInput.focus();
62 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); 62 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
63 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ; 63 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
64 host.focus(); // this isn't focusable. 64 host.focus(); // this isn't focusable.
65 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); 65 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
66 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ; 66 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
67 innerHost.focus(); // this isn't focusable. 67 innerHost.focus(); // this isn't focusable.
68 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); 68 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
69 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ; 69 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
70 70
71 71
72 debug('(2/4) top-level shadow host\'s delegateFocus is true'); 72 debug('(2/4) top-level shadow host\'s delegateFocus is true');
73 buildShadowTreeOfTrees(true, false); 73 buildShadowComposedTree(true, false);
74 74
75 var host = getNodeInTreeOfTrees('shadow-host'); 75 var host = getNodeInComposedTree('shadow-host');
76 var innerHost = getNodeInTreeOfTrees('shadow-host/inner-shadow-host'); 76 var innerHost = getNodeInComposedTree('shadow-host/inner-shadow-host');
77 var input = getNodeInTreeOfTrees('shadow-host/inner-input'); 77 var input = getNodeInComposedTree('shadow-host/inner-input');
78 var input2 = getNodeInTreeOfTrees('shadow-host/inner-shadow-host/inner-input 2'); 78 var input2 = getNodeInComposedTree('shadow-host/inner-shadow-host/inner-inpu t2');
79 var outerInput = document.querySelector('#outer-input'); 79 var outerInput = document.querySelector('#outer-input');
80 80
81 input.focus() 81 input.focus()
82 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); 82 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
83 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ; 83 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
84 input2.focus(); 84 input2.focus();
85 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); 85 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
86 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ; 86 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
87 outerInput.focus(); 87 outerInput.focus();
88 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); 88 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
89 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ; 89 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
90 host.focus(); 90 host.focus();
91 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); 91 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
92 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ; 92 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
93 innerHost.focus(); // this isn't focusable. 93 innerHost.focus(); // this isn't focusable.
94 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); 94 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
95 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ; 95 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
96 96
97 97
98 debug('(3/4) lower-level shadow host\'s delegateFocus is true'); 98 debug('(3/4) lower-level shadow host\'s delegateFocus is true');
99 buildShadowTreeOfTrees(false, true); 99 buildShadowComposedTree(false, true);
100 100
101 var host = getNodeInTreeOfTrees('shadow-host'); 101 var host = getNodeInComposedTree('shadow-host');
102 var innerHost = getNodeInTreeOfTrees('shadow-host/inner-shadow-host'); 102 var innerHost = getNodeInComposedTree('shadow-host/inner-shadow-host');
103 var input = getNodeInTreeOfTrees('shadow-host/inner-input'); 103 var input = getNodeInComposedTree('shadow-host/inner-input');
104 var input2 = getNodeInTreeOfTrees('shadow-host/inner-shadow-host/inner-input 2'); 104 var input2 = getNodeInComposedTree('shadow-host/inner-shadow-host/inner-inpu t2');
105 var outerInput = document.querySelector('#outer-input'); 105 var outerInput = document.querySelector('#outer-input');
106 106
107 input.focus() 107 input.focus()
108 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); 108 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
109 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ; 109 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
110 input2.focus(); 110 input2.focus();
111 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); 111 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
112 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)'); 112 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');
113 outerInput.focus(); 113 outerInput.focus();
114 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); 114 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
115 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ; 115 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
116 host.focus(); // this isn't focusable. 116 host.focus(); // this isn't focusable.
117 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); 117 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
118 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ; 118 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
119 innerHost.focus(); 119 innerHost.focus();
120 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); 120 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
121 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)'); 121 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');
122 122
123 123
124 debug('(4/4) both shadow hosts\' delegateFocus are true'); 124 debug('(4/4) both shadow hosts\' delegateFocus are true');
125 buildShadowTreeOfTrees(true, true); 125 buildShadowComposedTree(true, true);
126 126
127 var host = getNodeInTreeOfTrees('shadow-host'); 127 var host = getNodeInComposedTree('shadow-host');
128 var innerHost = getNodeInTreeOfTrees('shadow-host/inner-shadow-host'); 128 var innerHost = getNodeInComposedTree('shadow-host/inner-shadow-host');
129 var input = getNodeInTreeOfTrees('shadow-host/inner-input'); 129 var input = getNodeInComposedTree('shadow-host/inner-input');
130 var input2 = getNodeInTreeOfTrees('shadow-host/inner-shadow-host/inner-input 2'); 130 var input2 = getNodeInComposedTree('shadow-host/inner-shadow-host/inner-inpu t2');
131 var outerInput = document.querySelector('#outer-input'); 131 var outerInput = document.querySelector('#outer-input');
132 132
133 input.focus() 133 input.focus()
134 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); 134 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
135 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ; 135 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
136 input2.focus(); 136 input2.focus();
137 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); 137 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
138 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)'); 138 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');
139 outerInput.focus(); 139 outerInput.focus();
140 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)'); 140 backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
141 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ; 141 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
142 host.focus(); 142 host.focus();
143 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); 143 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
144 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ; 144 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(255, 255, 0)') ;
145 innerHost.focus(); 145 innerHost.focus();
146 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)'); 146 backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
147 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)'); 147 backgroundColorShouldBe('shadow-host/inner-shadow-host', 'rgb(0, 0, 255)');
148 } 148 }
149 149
150 testShadowTreeOfTrees(); 150 testShadowComposedTree();
151 </script> 151 </script>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host2.html ('k') | third_party/WebKit/LayoutTests/fast/dom/shadow/css-focus-pseudo-match-shadow-host3-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698