[cr-action-menu] Allow configurable anchors.

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

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview Tests for cr-action-menu element. Runs as an interactive UI
  * test, since many of these tests check focus behavior.
  */
 suite('CrActionMenu', function() {
   /** @type {?CrActionMenuElement} */
@@ skipping 143 matching lines @@
     assertNotEquals(items[0], menu.root.activeElement);
     assertEquals(menu, document.activeElement);
 
     // Mouse movements should override keyboard focus.
     down();
     down();
     assertEquals(items[1], menu.root.activeElement);
     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();
+  });
 });