Index: chrome/test/data/webui/cr_elements/cr_action_menu_test.js |
diff --git a/chrome/test/data/webui/cr_elements/cr_action_menu_test.js b/chrome/test/data/webui/cr_elements/cr_action_menu_test.js |
index 9715fba33f54b0568f705bc7bed33a9e220c61ef..b8836eacd54368e6645b860e7e45ac84f22b38e7 100644 |
--- a/chrome/test/data/webui/cr_elements/cr_action_menu_test.js |
+++ b/chrome/test/data/webui/cr_elements/cr_action_menu_test.js |
@@ -161,4 +161,92 @@ suite('CrActionMenu', function() { |
makeMouseoverEvent(items[0]); |
assertEquals(items[0], menu.root.activeElement); |
}); |
+ |
+ test('positioning', function() { |
+ // A 40x10 box at (100, 250). |
+ var config = { |
+ left: 100, |
+ top: 250, |
+ width: 40, |
+ height: 10, |
+ maxX: 1000, |
+ maxY: 2000, |
+ }; |
+ |
+ // Show right and bottom aligned by default. |
+ menu.showAtPosition(config); |
+ assertTrue(menu.open); |
+ assertEquals('100px', menu.style.left); |
+ assertEquals('250px', menu.style.top); |
+ menu.close(); |
+ |
+ // Center the menu horizontally. |
+ menu.showAtPosition(Object.assign({}, config, { |
+ anchorPositionX: 0, |
+ })); |
+ var menuWidth = menu.offsetWidth; |
+ var menuHeight = menu.offsetHeight; |
+ assertEquals(`${120 - menuWidth / 2}px`, menu.style.left); |
+ assertEquals('250px', menu.style.top); |
+ menu.close(); |
+ |
+ // Center the menu in both axes. |
+ menu.showAtPosition(Object.assign({}, config, { |
+ anchorPositionX: 0, |
+ anchorPositionY: 0, |
+ })); |
+ menuWidth = menu.offsetWidth; |
+ menuHeight = menu.offsetHeight; |
+ assertEquals(`${120 - menuWidth / 2}px`, menu.style.left); |
+ assertEquals(`${255 - menuHeight / 2}px`, menu.style.top); |
+ menu.close(); |
+ |
+ // Left and top align the menu. |
+ menu.showAtPosition(Object.assign({}, config, { |
+ anchorPositionX: -1, |
+ anchorPositionY: -1, |
+ })); |
+ menuWidth = menu.offsetWidth; |
+ menuHeight = menu.offsetHeight; |
+ assertEquals(`${140 - menuWidth}px`, menu.style.left); |
+ assertEquals(`${260 - menuHeight}px`, menu.style.top); |
+ menu.close(); |
+ |
+ // Being left and top aligned at (0, 0) should anchor to the bottom right. |
+ menu.showAtPosition(Object.assign({}, config, { |
+ anchorPositionX: -1, |
+ anchorPositionY: -1, |
+ left: 0, |
+ top: 0, |
+ })); |
+ menuWidth = menu.offsetWidth; |
+ menuHeight = menu.offsetHeight; |
+ assertEquals(`0px`, menu.style.left); |
+ assertEquals(`0px`, menu.style.top); |
+ menu.close(); |
+ |
+ // Being aligned to a point in the bottom right should anchor to the top |
+ // left. |
+ menu.showAtPosition(Object.assign({}, config, { |
+ left: 1000, |
+ top: 2000, |
+ width: undefined, |
+ height: undefined, |
+ })); |
+ menuWidth = menu.offsetWidth; |
+ menuHeight = menu.offsetHeight; |
+ assertEquals(`${1000 - menuWidth}px`, menu.style.left); |
+ assertEquals(`${2000 - menuHeight}px`, menu.style.top); |
+ menu.close(); |
+ |
+ // Alignment is reversed in RTL. |
+ document.body.style.direction = 'rtl'; |
+ menu.showAtPosition(config); |
+ menuWidth = menu.offsetWidth; |
+ menuHeight = menu.offsetHeight; |
+ assertTrue(menu.open); |
+ assertEquals(140 - menuWidth, menu.offsetLeft); |
+ assertEquals('250px', menu.style.top); |
+ menu.close(); |
+ }); |
}); |