[cr-action-menu] Constrain menu to viewport.

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 197 matching lines @@
     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();
 
+    // If the viewport can't fit the menu, align the menu to the viewport.
+    menu.showAtPosition({
+      left: menuWidth - 5,
+      top: 0,
+      width: 0,
+      height: 0,
+      maxX: menuWidth * 2 - 10,
+    });
+    assertEquals(`${menuWidth  - 10}px`, menu.style.left);
+    assertEquals(`0px`, 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();
     document.body.style.direction = 'ltr';
   });
 
   test('offscreen scroll positioning', function() {
     PolymerTest.clearBody();
     var bodyHeight = 10000;
@@ skipping 70 matching lines @@
 
     menu.showAt(dots, {anchorAlignmentX: AnchorAlignment.AFTER_START});
     var menuWidth = menu.offsetWidth;
     var menuHeight = menu.offsetHeight;
     var buttonWidth = dots.offsetWidth;
     var buttonHeight = dots.offsetHeight;
     assertEquals(containerLeft - menuWidth + buttonWidth, menu.offsetLeft);
     assertEquals(containerTop - menuHeight + buttonHeight, menu.offsetTop);
   });
 });