[cr-action-menu] Allow configurable anchors.

This CL adds showAtPosition to cr-action-menu which allows a client to
specify a rect or point to anchor to and which side of the menu to align.

This will be used in MD Bookmarks for right click context menus which
require more flexible alignment.

BUG=692837
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2814743007
Cr-Commit-Position: refs/heads/master@{#469257}

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();
+  });
 });