OLD | NEW |
---|---|
1 // Copyright 2016 The Chromium Authors. All rights reserved. | 1 // Copyright 2016 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 /** | 5 /** |
6 * @fileoverview Tests for cr-action-menu element. Runs as an interactive UI | 6 * @fileoverview Tests for cr-action-menu element. Runs as an interactive UI |
7 * test, since many of these tests check focus behavior. | 7 * test, since many of these tests check focus behavior. |
8 */ | 8 */ |
9 suite('CrActionMenu', function() { | 9 suite('CrActionMenu', function() { |
10 /** @type {?CrActionMenuElement} */ | 10 /** @type {?CrActionMenuElement} */ |
(...skipping 250 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
261 | 261 |
262 // Alignment is reversed in RTL. | 262 // Alignment is reversed in RTL. |
263 document.body.style.direction = 'rtl'; | 263 document.body.style.direction = 'rtl'; |
264 menu.showAtPosition(config); | 264 menu.showAtPosition(config); |
265 menuWidth = menu.offsetWidth; | 265 menuWidth = menu.offsetWidth; |
266 menuHeight = menu.offsetHeight; | 266 menuHeight = menu.offsetHeight; |
267 assertTrue(menu.open); | 267 assertTrue(menu.open); |
268 assertEquals(140 - menuWidth, menu.offsetLeft); | 268 assertEquals(140 - menuWidth, menu.offsetLeft); |
269 assertEquals('250px', menu.style.top); | 269 assertEquals('250px', menu.style.top); |
270 menu.close(); | 270 menu.close(); |
271 document.body.style.direction = 'ltr'; | |
272 }); | |
273 | |
274 test('offscreen scroll positioning', function() { | |
275 PolymerTest.clearBody(); | |
dpapad
2017/06/28 17:49:40
Nit: Since you are replacing innerHTML below, this
calamity
2017/06/29 06:16:16
Done.
| |
276 var bodyHeight = 10000; | |
277 var bodyWidth = 20000; | |
278 var containerLeft = 5000; | |
279 var containerTop = 10000; | |
280 var containerWidth = 500; | |
281 var containerHeight = 500; | |
282 document.body.innerHTML = ` | |
283 <style> | |
284 body { | |
285 height: ${bodyHeight}px; | |
286 width: ${bodyWidth}px; | |
287 } | |
288 | |
289 #container { | |
290 overflow: auto; | |
291 position: absolute; | |
292 top: ${containerTop}px; | |
293 left: ${containerLeft}px; | |
294 height: ${containerHeight}px; | |
295 width: ${containerWidth}px; | |
296 } | |
297 | |
298 #inner-container { | |
299 height: 1000px; | |
300 width: 1000px; | |
301 } | |
302 </style> | |
303 <div id="container"> | |
304 <div id="inner-container"> | |
305 <button id="dots">...</button> | |
306 <dialog is="cr-action-menu"> | |
307 <button class="dropdown-item">Un</button> | |
308 <hr> | |
309 <button class="dropdown-item">Dos</button> | |
310 <button class="dropdown-item">Tres</button> | |
311 </dialog> | |
312 </div> | |
313 </div> | |
314 `; | |
315 menu = document.querySelector('dialog[is=cr-action-menu]'); | |
316 var dots = document.querySelector('#dots'); | |
317 | |
318 // Show the menu, scrolling the body to the button. | |
319 menu.showAt( | |
320 dots, | |
321 {anchorAlignmentX: AnchorAlignment.AFTER_START}); | |
322 assertEquals(`${containerLeft}px`, menu.style.left); | |
323 assertEquals(`${containerTop}px`, menu.style.top); | |
324 menu.close(); | |
325 | |
326 // Show the menu, scrolling the container to the button, and the body to the | |
327 // button. | |
328 document.body.scrollLeft = bodyWidth; | |
329 document.body.scrollTop = bodyHeight; | |
330 | |
331 document.querySelector('#container').scrollLeft = containerLeft; | |
332 document.querySelector('#container').scrollTop = containerTop; | |
333 | |
334 menu.showAt(dots, {anchorAlignmentX: AnchorAlignment.AFTER_START}); | |
335 assertEquals(`${containerLeft}px`, menu.style.left); | |
336 assertEquals(`${containerTop}px`, menu.style.top); | |
337 menu.close(); | |
338 | |
339 // Show the menu for an already onscreen button. The anchor should be | |
340 // overridden so that no scrolling happens. | |
341 document.body.scrollLeft = 0; | |
342 document.body.scrollTop = 0; | |
343 | |
344 var rect = dots.getBoundingClientRect(); | |
345 document.body.scrollLeft = rect.right - document.body.clientWidth; | |
346 document.body.scrollTop = rect.bottom - document.body.clientHeight; | |
347 | |
348 menu.showAt(dots, {anchorAlignmentX: AnchorAlignment.AFTER_START}); | |
349 var menuWidth = menu.offsetWidth; | |
350 var menuHeight = menu.offsetHeight; | |
351 var buttonWidth = dots.offsetWidth; | |
352 var buttonHeight = dots.offsetHeight; | |
353 assertEquals(containerLeft - menuWidth + buttonWidth, menu.offsetLeft); | |
354 assertEquals(containerTop - menuHeight + buttonHeight, menu.offsetTop); | |
271 }); | 355 }); |
272 }); | 356 }); |
OLD | NEW |