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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: tracing/tracing/ui/base/tab_view_test.html

Issue 1923953003: [polymer] Switches .appendChild() to Polymer.dom()...appendChild() (Closed) Base URL: git@github.com:catapult-project/catapult.git@polymer10-migration
Patch Set: Created 4 years, 7 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 | « tracing/tracing/ui/base/resize_sensor_test.html ('k') | tracing/tracing/ui/base/table.html » ('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 <!-- 2 <!--
3 Copyright (c) 2014 The Chromium Authors. All rights reserved. 3 Copyright (c) 2014 The Chromium Authors. All rights reserved.
4 Use of this source code is governed by a BSD-style license that can be 4 Use of this source code is governed by a BSD-style license that can be
5 found in the LICENSE file. 5 found in the LICENSE file.
6 --> 6 -->
7 7
8 <link rel="import" href="/tracing/ui/base/tab_view.html"> 8 <link rel="import" href="/tracing/ui/base/tab_view.html">
9 9
10 <template id="tab-view-test-template"> 10 <template id="tab-view-test-template">
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after
53 firstTab.innerHTML = '<p>' + TAB_TEXT + '<p>'; 53 firstTab.innerHTML = '<p>' + TAB_TEXT + '<p>';
54 54
55 var secondTab = document.createElement('div'); 55 var secondTab = document.createElement('div');
56 secondTab.setAttribute('tab-label', 'Second Tab Label'); 56 secondTab.setAttribute('tab-label', 'Second Tab Label');
57 secondTab.innerHTML = '<b>' + 'Second Tab Text' + '</b>'; 57 secondTab.innerHTML = '<b>' + 'Second Tab Text' + '</b>';
58 58
59 var thirdTab = document.createElement('div'); 59 var thirdTab = document.createElement('div');
60 thirdTab.setAttribute('tab-label', 'Third Tab Label'); 60 thirdTab.setAttribute('tab-label', 'Third Tab Label');
61 thirdTab.innerHTML = '<b>' + 'Third Tab Text' + '</b>'; 61 thirdTab.innerHTML = '<b>' + 'Third Tab Text' + '</b>';
62 62
63 tabView.appendChild(firstTab); 63 Polymer.dom(tabView).appendChild(firstTab);
64 tabView.appendChild(secondTab); 64 Polymer.dom(tabView).appendChild(secondTab);
65 tabView.appendChild(thirdTab); 65 Polymer.dom(tabView).appendChild(thirdTab);
66 tabViewContainer.appendChild(tabView); 66 Polymer.dom(tabViewContainer).appendChild(tabView);
67 67
68 this.addHTMLOutput(tabViewContainer); 68 this.addHTMLOutput(tabViewContainer);
69 69
70 thirdTab.setAttribute('tab-label', 'Something Different'); 70 thirdTab.setAttribute('tab-label', 'Something Different');
71 71
72 var button = document.createElement('button'); 72 var button = document.createElement('button');
73 button.textContent = 'Change label'; 73 button.textContent = 'Change label';
74 74
75 button.addEventListener('click', function() { 75 button.addEventListener('click', function() {
76 thirdTab.setAttribute('tab-label', 'Label Changed'); 76 thirdTab.setAttribute('tab-label', 'Label Changed');
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after
109 firstTab.innerHTML = '<p>' + TAB_TEXT + '<p>'; 109 firstTab.innerHTML = '<p>' + TAB_TEXT + '<p>';
110 110
111 var secondTab = document.createElement('div'); 111 var secondTab = document.createElement('div');
112 secondTab.setAttribute('tab-label', 'Second Tab Label'); 112 secondTab.setAttribute('tab-label', 'Second Tab Label');
113 secondTab.innerHTML = '<b>' + 'Second Tab Text' + '</b>'; 113 secondTab.innerHTML = '<b>' + 'Second Tab Text' + '</b>';
114 114
115 var thirdTab = document.createElement('div'); 115 var thirdTab = document.createElement('div');
116 thirdTab.setAttribute('tab-label', 'Third Tab Label'); 116 thirdTab.setAttribute('tab-label', 'Third Tab Label');
117 thirdTab.innerHTML = '<b>' + 'Third Tab Text' + '</b>'; 117 thirdTab.innerHTML = '<b>' + 'Third Tab Text' + '</b>';
118 118
119 tabView.appendChild(firstTab); 119 Polymer.dom(tabView).appendChild(firstTab);
120 tabView.appendChild(secondTab); 120 Polymer.dom(tabView).appendChild(secondTab);
121 tabView.appendChild(thirdTab); 121 Polymer.dom(tabView).appendChild(thirdTab);
122 tabViewContainer.appendChild(tabView); 122 Polymer.dom(tabViewContainer).appendChild(tabView);
123 123
124 this.addHTMLOutput(tabViewContainer); 124 this.addHTMLOutput(tabViewContainer);
125 tabView.selectedTab = secondTab; 125 tabView.selectedTab = secondTab;
126 }); 126 });
127 127
128 test('instantiateChildrenAlreadyInside', function() { 128 test('instantiateChildrenAlreadyInside', function() {
129 var tabViewTemplate = THIS_DOC.querySelector('#tab-view-test-template'); 129 var tabViewTemplate = THIS_DOC.querySelector('#tab-view-test-template');
130 // var tabView = tabViewTemplate.createInstance(); 130 // var tabView = tabViewTemplate.createInstance();
131 var tabView = THIS_DOC.importNode(tabViewTemplate.content, true); 131 var tabView = THIS_DOC.importNode(tabViewTemplate.content, true);
132 var tabViewContainer = document.createElement('div'); 132 var tabViewContainer = document.createElement('div');
133 tabViewContainer.style.width = '400px'; 133 tabViewContainer.style.width = '400px';
134 tabViewContainer.style.height = '200px'; 134 tabViewContainer.style.height = '200px';
135 135
136 tabViewContainer.appendChild(tabView); 136 Polymer.dom(tabViewContainer).appendChild(tabView);
137 137
138 this.addHTMLOutput(tabViewContainer); 138 this.addHTMLOutput(tabViewContainer);
139 139
140 }); 140 });
141 141
142 test('programaticallySetSelectedTab', function() { 142 test('programaticallySetSelectedTab', function() {
143 var tabViewContainer = document.createElement('div'); 143 var tabViewContainer = document.createElement('div');
144 tabViewContainer.style.width = '500px'; 144 tabViewContainer.style.width = '500px';
145 tabViewContainer.style.height = '200px'; 145 tabViewContainer.style.height = '200px';
146 146
147 var tabView = new TracingAnalysisTabView(); 147 var tabView = new TracingAnalysisTabView();
148 148
149 var t1 = document.createElement('div'); 149 var t1 = document.createElement('div');
150 var t2 = document.createElement('div'); 150 var t2 = document.createElement('div');
151 var t3 = document.createElement('div'); 151 var t3 = document.createElement('div');
152 152
153 tabView.appendChild(t1); 153 Polymer.dom(tabView).appendChild(t1);
154 tabView.appendChild(t2); 154 Polymer.dom(tabView).appendChild(t2);
155 tabView.appendChild(t3); 155 Polymer.dom(tabView).appendChild(t3);
156 156
157 assert.isUndefined(tabView.selectedTab); 157 assert.isUndefined(tabView.selectedTab);
158 tabView.selectedTab = t1; 158 tabView.selectedTab = t1;
159 159
160 assert.isTrue(t1.hasAttribute('selected')); 160 assert.isTrue(t1.hasAttribute('selected'));
161 assert.isFalse(t2.hasAttribute('selected')); 161 assert.isFalse(t2.hasAttribute('selected'));
162 assert.isFalse(t3.hasAttribute('selected')); 162 assert.isFalse(t3.hasAttribute('selected'));
163 assert.isTrue(Object.is(t1, tabView.selectedTab)); 163 assert.isTrue(Object.is(t1, tabView.selectedTab));
164 164
165 tabView.selectedTab = t2; 165 tabView.selectedTab = t2;
(...skipping 22 matching lines...) Expand all
188 assert.isFalse(t2.hasAttribute('selected')); 188 assert.isFalse(t2.hasAttribute('selected'));
189 assert.isFalse(t3.hasAttribute('selected')); 189 assert.isFalse(t3.hasAttribute('selected'));
190 assert.isTrue(Object.is(t1, tabView.selectedTab)); 190 assert.isTrue(Object.is(t1, tabView.selectedTab));
191 191
192 t3.selected = true; 192 t3.selected = true;
193 assert.isFalse(t1.hasAttribute('selected')); 193 assert.isFalse(t1.hasAttribute('selected'));
194 assert.isFalse(t2.hasAttribute('selected')); 194 assert.isFalse(t2.hasAttribute('selected'));
195 assert.isTrue(t3.hasAttribute('selected')); 195 assert.isTrue(t3.hasAttribute('selected'));
196 assert.isTrue(Object.is(t3, tabView.selectedTab)); 196 assert.isTrue(Object.is(t3, tabView.selectedTab));
197 197
198 tabViewContainer.appendChild(tabView); 198 Polymer.dom(tabViewContainer).appendChild(tabView);
199 199
200 this.addHTMLOutput(tabViewContainer); 200 this.addHTMLOutput(tabViewContainer);
201 }); 201 });
202 202
203 /** 203 /**
204 * This test checks that if an element has a selected property already set, 204 * This test checks that if an element has a selected property already set,
205 * before being attached to the tabView, it still gets selected if the 205 * before being attached to the tabView, it still gets selected if the
206 * property is true, after it gets attached. 206 * property is true, after it gets attached.
207 */ 207 */
208 test('instantiateSetSelectedTabAlreadySet', function() { 208 test('instantiateSetSelectedTabAlreadySet', function() {
209 var tabViewContainer = document.createElement('div'); 209 var tabViewContainer = document.createElement('div');
210 tabViewContainer.style.width = '500px'; 210 tabViewContainer.style.width = '500px';
211 tabViewContainer.style.height = '200px'; 211 tabViewContainer.style.height = '200px';
212 212
213 var tabView = new TracingAnalysisTabView(); 213 var tabView = new TracingAnalysisTabView();
214 214
215 var t1 = document.createElement('div'); 215 var t1 = document.createElement('div');
216 t1.textContent = 'This text should BE visible.'; 216 t1.textContent = 'This text should BE visible.';
217 var t2 = document.createElement('div'); 217 var t2 = document.createElement('div');
218 t2.textContent = 'This text should NOT be visible.'; 218 t2.textContent = 'This text should NOT be visible.';
219 var t3 = document.createElement('div'); 219 var t3 = document.createElement('div');
220 t3.textContent = 'This text should NOT be visible, also.'; 220 t3.textContent = 'This text should NOT be visible, also.';
221 221
222 t1.selected = true; 222 t1.selected = true;
223 t2.selected = false; 223 t2.selected = false;
224 t3.selected = false; 224 t3.selected = false;
225 225
226 tabView.appendChild(t1); 226 Polymer.dom(tabView).appendChild(t1);
227 tabView.appendChild(t2); 227 Polymer.dom(tabView).appendChild(t2);
228 tabView.appendChild(t3); 228 Polymer.dom(tabView).appendChild(t3);
229 229
230 t1.setAttribute('tab-label', 'This should be selected'); 230 t1.setAttribute('tab-label', 'This should be selected');
231 t2.setAttribute('tab-label', 'Not selected'); 231 t2.setAttribute('tab-label', 'Not selected');
232 t3.setAttribute('tab-label', 'Not selected'); 232 t3.setAttribute('tab-label', 'Not selected');
233 233
234 tabViewContainer.appendChild(tabView); 234 Polymer.dom(tabViewContainer).appendChild(tabView);
235 235
236 this.addHTMLOutput(tabViewContainer); 236 this.addHTMLOutput(tabViewContainer);
237 }); 237 });
238 238
239 test('selectingInvalidTabWorks', function() { 239 test('selectingInvalidTabWorks', function() {
240 var tabView = new TracingAnalysisTabView(); 240 var tabView = new TracingAnalysisTabView();
241 var t1 = document.createElement('div'); 241 var t1 = document.createElement('div');
242 var t2 = document.createElement('div'); 242 var t2 = document.createElement('div');
243 var t3 = document.createElement('div'); 243 var t3 = document.createElement('div');
244 var invalidChild = document.createElement('div'); 244 var invalidChild = document.createElement('div');
245 245
246 tabView.appendChild(t1); 246 Polymer.dom(tabView).appendChild(t1);
247 tabView.appendChild(t2); 247 Polymer.dom(tabView).appendChild(t2);
248 tabView.appendChild(t3); 248 Polymer.dom(tabView).appendChild(t3);
249 249
250 tabView.selectedTab = t1; 250 tabView.selectedTab = t1;
251 251
252 assert.equal(tabView.selectedTab, t1); 252 assert.equal(tabView.selectedTab, t1);
253 253
254 // Make sure that selecting an invalid tab does not break the current 254 // Make sure that selecting an invalid tab does not break the current
255 // selection. 255 // selection.
256 tabView.selectedTab = invalidChild; 256 tabView.selectedTab = invalidChild;
257 assert.equal(t1, tabView.selectedTab); 257 assert.equal(t1, tabView.selectedTab);
258 258
259 // Also make sure the invalidChild does not influence the tab view when 259 // Also make sure the invalidChild does not influence the tab view when
260 // it has a selected property set. 260 // it has a selected property set.
261 invalidChild.selected = true; 261 invalidChild.selected = true;
262 tabView.selectedTab = invalidChild; 262 tabView.selectedTab = invalidChild;
263 assert.equal(t1, tabView.selectedTab); 263 assert.equal(t1, tabView.selectedTab);
264 }); 264 });
265 265
266 test('changeTabCausesEvent', function() { 266 test('changeTabCausesEvent', function() {
267 var tabView = new TracingAnalysisTabView(); 267 var tabView = new TracingAnalysisTabView();
268 var t1 = document.createElement('div'); 268 var t1 = document.createElement('div');
269 var t2 = document.createElement('div'); 269 var t2 = document.createElement('div');
270 var invalidChild = document.createElement('div'); 270 var invalidChild = document.createElement('div');
271 271
272 tabView.appendChild(t1); 272 Polymer.dom(tabView).appendChild(t1);
273 tabView.appendChild(t2); 273 Polymer.dom(tabView).appendChild(t2);
274 274
275 var numChangeEvents = 0; 275 var numChangeEvents = 0;
276 tabView.addEventListener('selected-tab-change', function() { 276 tabView.addEventListener('selected-tab-change', function() {
277 numChangeEvents++; 277 numChangeEvents++;
278 }); 278 });
279 tabView.selectedTab = t1; 279 tabView.selectedTab = t1;
280 assert.equal(numChangeEvents, 1); 280 assert.equal(numChangeEvents, 1);
281 tabView.selectedTab = t1; 281 tabView.selectedTab = t1;
282 assert.equal(numChangeEvents, 1); 282 assert.equal(numChangeEvents, 1);
283 tabView.selectedTab = t2; 283 tabView.selectedTab = t2;
(...skipping 14 matching lines...) Expand all
298 298
299 var tabView = new TracingAnalysisTabView(); 299 var tabView = new TracingAnalysisTabView();
300 300
301 var t1 = document.createElement('div'); 301 var t1 = document.createElement('div');
302 t1.textContent = 'This text should BE visible.'; 302 t1.textContent = 'This text should BE visible.';
303 var t2 = document.createElement('div'); 303 var t2 = document.createElement('div');
304 t2.textContent = 'This text should NOT be visible.'; 304 t2.textContent = 'This text should NOT be visible.';
305 var t3 = document.createElement('div'); 305 var t3 = document.createElement('div');
306 t3.textContent = 'This text should NOT be visible, also.'; 306 t3.textContent = 'This text should NOT be visible, also.';
307 307
308 tabView.appendChild(t1); 308 Polymer.dom(tabView).appendChild(t1);
309 tabView.appendChild(t2); 309 Polymer.dom(tabView).appendChild(t2);
310 tabView.appendChild(t3); 310 Polymer.dom(tabView).appendChild(t3);
311 311
312 t1.setAttribute('tab-label', 'This should not exist'); 312 t1.setAttribute('tab-label', 'This should not exist');
313 t2.setAttribute('tab-label', 'Not selected'); 313 t2.setAttribute('tab-label', 'Not selected');
314 t3.setAttribute('tab-label', 'Not selected'); 314 t3.setAttribute('tab-label', 'Not selected');
315 315
316 tabView.selectedTab = t1; 316 tabView.selectedTab = t1;
317 tabView.removeChild(t1); 317 tabView.removeChild(t1);
318 318
319 tabViewContainer.appendChild(tabView); 319 Polymer.dom(tabViewContainer).appendChild(tabView);
320 320
321 this.addHTMLOutput(tabViewContainer); 321 this.addHTMLOutput(tabViewContainer);
322 }); 322 });
323 }); 323 });
324 </script> 324 </script>
OLDNEW
« no previous file with comments | « tracing/tracing/ui/base/resize_sensor_test.html ('k') | tracing/tracing/ui/base/table.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698