[cr-action-menu] Allow configurable anchors.

chrome/test/data/webui/cr_elements/cr_action_menu_test.js

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..f18dd1456e20688564368f7a0d3b957761505d4c 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, {
+      anchorAlignmentX: AnchorAlignment.CENTER,
+    }));
+    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, {
+      anchorAlignmentX: AnchorAlignment.CENTER,
+      anchorAlignmentY: AnchorAlignment.CENTER,
+    }));
+    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, {
+      anchorAlignmentX: AnchorAlignment.BEFORE_END,
+      anchorAlignmentY: AnchorAlignment.BEFORE_END,
+    }));
+    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, {
+      anchorAlignmentX: AnchorAlignment.BEFORE_END,
+      anchorAlignmentY: AnchorAlignment.BEFORE_END,
+      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({
+      left: 1000,
+      top: 2000,
+      maxX: 1000,
+      maxY: 2000,
+    });
+    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();
+  });
 });