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 var bodyHeight = 10000; |
| 276 var bodyWidth = 20000; |
| 277 var containerLeft = 5000; |
| 278 var containerTop = 10000; |
| 279 var containerWidth = 500; |
| 280 var containerHeight = 500; |
| 281 document.body.innerHTML = ` |
| 282 <style> |
| 283 body { |
| 284 height: ${bodyHeight}px; |
| 285 width: ${bodyWidth}px; |
| 286 } |
| 287 |
| 288 #container { |
| 289 overflow: auto; |
| 290 position: absolute; |
| 291 top: ${containerTop}px; |
| 292 left: ${containerLeft}px; |
| 293 height: ${containerHeight}px; |
| 294 width: ${containerWidth}px; |
| 295 } |
| 296 |
| 297 #inner-container { |
| 298 height: 1000px; |
| 299 width: 1000px; |
| 300 } |
| 301 </style> |
| 302 <div id="container"> |
| 303 <div id="inner-container"> |
| 304 <button id="dots">...</button> |
| 305 <dialog is="cr-action-menu"> |
| 306 <button class="dropdown-item">Un</button> |
| 307 <hr> |
| 308 <button class="dropdown-item">Dos</button> |
| 309 <button class="dropdown-item">Tres</button> |
| 310 </dialog> |
| 311 </div> |
| 312 </div> |
| 313 `; |
| 314 menu = document.querySelector('dialog[is=cr-action-menu]'); |
| 315 var dots = document.querySelector('#dots'); |
| 316 |
| 317 // Show the menu, scrolling the body to the button. |
| 318 menu.showAt( |
| 319 dots, |
| 320 {anchorAlignmentX: AnchorAlignment.AFTER_START}); |
| 321 assertEquals(`${containerLeft}px`, menu.style.left); |
| 322 assertEquals(`${containerTop}px`, menu.style.top); |
| 323 menu.close(); |
| 324 |
| 325 // Show the menu, scrolling the container to the button, and the body to the |
| 326 // button. |
| 327 document.body.scrollLeft = bodyWidth; |
| 328 document.body.scrollTop = bodyHeight; |
| 329 |
| 330 document.querySelector('#container').scrollLeft = containerLeft; |
| 331 document.querySelector('#container').scrollTop = containerTop; |
| 332 |
| 333 menu.showAt(dots, {anchorAlignmentX: AnchorAlignment.AFTER_START}); |
| 334 assertEquals(`${containerLeft}px`, menu.style.left); |
| 335 assertEquals(`${containerTop}px`, menu.style.top); |
| 336 menu.close(); |
| 337 |
| 338 // Show the menu for an already onscreen button. The anchor should be |
| 339 // overridden so that no scrolling happens. |
| 340 document.body.scrollLeft = 0; |
| 341 document.body.scrollTop = 0; |
| 342 |
| 343 var rect = dots.getBoundingClientRect(); |
| 344 document.body.scrollLeft = rect.right - document.body.clientWidth; |
| 345 document.body.scrollTop = rect.bottom - document.body.clientHeight; |
| 346 |
| 347 menu.showAt(dots, {anchorAlignmentX: AnchorAlignment.AFTER_START}); |
| 348 var menuWidth = menu.offsetWidth; |
| 349 var menuHeight = menu.offsetHeight; |
| 350 var buttonWidth = dots.offsetWidth; |
| 351 var buttonHeight = dots.offsetHeight; |
| 352 assertEquals(containerLeft - menuWidth + buttonWidth, menu.offsetLeft); |
| 353 assertEquals(containerTop - menuHeight + buttonHeight, menu.offsetTop); |
271 }); | 354 }); |
272 }); | 355 }); |
OLD | NEW |