[cr-action-menu] Use clientWidth for rtl flipping.

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} */
   var menu = null;
 
   /** @type {?NodeList<HTMLElement>} */
   var items = null;
 
+  /** @type {HTMLElement} */
+  var dots = null;
+
   setup(function() {
     PolymerTest.clearBody();
 
     document.body.innerHTML = `
       <button id="dots">...</button>
       <dialog is="cr-action-menu">
         <button class="dropdown-item">Un</button>
         <hr>
         <button class="dropdown-item">Dos</button>
         <button class="dropdown-item">Tres</button>
       </dialog>
     `;
 
     menu = document.querySelector('dialog[is=cr-action-menu]');
     items = menu.querySelectorAll('.dropdown-item');
+    dots = document.querySelector('#dots');
     assertEquals(3, items.length);
   });
 
   teardown(function() {
+    document.body.style.direction = 'ltr';
+
     if (menu.open)
       menu.close();
   });
 
   function down() {
     MockInteractions.keyDownOn(menu, 'ArrowDown', [], 'ArrowDown');
   }
 
   function up() {
     MockInteractions.keyDownOn(menu, 'ArrowUp', [], 'ArrowUp');
   }
 
   test('hidden or disabled items', function() {
-    menu.showAt(document.querySelector('#dots'));
+    menu.showAt(dots);
     down();
     assertEquals(menu.root.activeElement, items[0]);
 
     menu.close();
     items[0].hidden = true;
-    menu.showAt(document.querySelector('#dots'));
+    menu.showAt(dots);
     down();
     assertEquals(menu.root.activeElement, items[1]);
 
     menu.close();
     items[1].disabled = true;
-    menu.showAt(document.querySelector('#dots'));
+    menu.showAt(dots);
     down();
     assertEquals(menu.root.activeElement, items[2]);
   });
 
   test('focus after down/up arrow', function() {
-    menu.showAt(document.querySelector('#dots'));
+    menu.showAt(dots);
 
     // The menu should be focused when shown, but not on any of the items.
     assertEquals(menu, document.activeElement);
     assertNotEquals(items[0], menu.root.activeElement);
     assertNotEquals(items[1], menu.root.activeElement);
     assertNotEquals(items[2], menu.root.activeElement);
 
     down();
     assertEquals(items[0], menu.root.activeElement);
     down();
     assertEquals(items[1], menu.root.activeElement);
     down();
     assertEquals(items[2], menu.root.activeElement);
     down();
     assertEquals(items[0], menu.root.activeElement);
     up();
     assertEquals(items[2], menu.root.activeElement);
     up();
     assertEquals(items[1], menu.root.activeElement);
     up();
     assertEquals(items[0], menu.root.activeElement);
     up();
     assertEquals(items[2], menu.root.activeElement);
 
     items[1].disabled = true;
     up();
     assertEquals(items[0], menu.root.activeElement);
   });
 
-  test('pressing up arrow when no focus will focus last item', function(){
-    menu.showAt(document.querySelector('#dots'));
+  test('pressing up arrow when no focus will focus last item', function() {
+    menu.showAt(dots);
     assertEquals(menu, document.activeElement);
 
     up();
     assertEquals(items[items.length - 1], menu.root.activeElement);
   });
 
   test('can navigate to dynamically added items', function() {
     // Can modify children after attached() and before showAt().
     var item = document.createElement('button');
     item.classList.add('dropdown-item');
     menu.insertBefore(item, items[0]);
-    menu.showAt(document.querySelector('#dots'));
+    menu.showAt(dots);
 
     down();
     assertEquals(item, menu.root.activeElement);
     down();
     assertEquals(items[0], menu.root.activeElement);
 
     // Can modify children while menu is open.
     menu.removeChild(item);
 
     up();
     // Focus should have wrapped around to final item.
     assertEquals(items[2], menu.root.activeElement);
   });
 
   test('close on resize', function() {
-    menu.showAt(document.querySelector('#dots'));
+    menu.showAt(dots);
     assertTrue(menu.open);
 
     window.dispatchEvent(new CustomEvent('resize'));
     assertFalse(menu.open);
   });
 
   test('close on popstate', function() {
-    menu.showAt(document.querySelector('#dots'));
+    menu.showAt(dots);
     assertTrue(menu.open);
 
     window.dispatchEvent(new CustomEvent('popstate'));
     assertFalse(menu.open);
   });
 
   /** @param {string} key The key to use for closing. */
   function testFocusAfterClosing(key) {
     return new Promise(function(resolve) {
-      var dots = document.querySelector('#dots');
       menu.showAt(dots);
       assertTrue(menu.open);
 
       // Check that focus returns to the anchor element.
       dots.addEventListener('focus', resolve);
       MockInteractions.keyDownOn(menu, key, [], key);
       assertFalse(menu.open);
     });
   }
 
-  test('close on Tab', function() { return testFocusAfterClosing('Tab'); });
+  test('close on Tab', function() {
+    return testFocusAfterClosing('Tab');
+  });
   test('close on Escape', function() {
     return testFocusAfterClosing('Escape');
   });
 
   test('mouse movement focus options', function() {
     function makeMouseoverEvent(node) {
       var e = new MouseEvent('mouseover', {bubbles: true});
       node.dispatchEvent(e);
     }
 
-    menu.showAt(document.querySelector('#dots'));
+    menu.showAt(dots);
 
     // Moving mouse on option 1 should focus it.
     assertNotEquals(items[0], menu.root.activeElement);
     makeMouseoverEvent(items[0]);
     assertEquals(items[0], menu.root.activeElement);
 
     // Moving mouse on the menu (not on option) should focus the menu.
     makeMouseoverEvent(menu);
     assertNotEquals(items[0], menu.root.activeElement);
     assertEquals(menu, document.activeElement);
@@ skipping 76 matching lines @@
     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(`${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);
     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() {
+  suite('offscreen scroll positioning', function() {
     var bodyHeight = 10000;
     var bodyWidth = 20000;
     var containerLeft = 5000;
     var containerTop = 10000;
     var containerWidth = 500;
     var containerHeight = 500;
-    document.body.innerHTML = `
-      <style>
-        body {
-          height: ${bodyHeight}px;
-          width: ${bodyWidth}px;
-        }
+    var menuWidth = 100;
+    var menuHeight = 200;
 
-        #container {
-          overflow: auto;
-          position: absolute;
-          top: ${containerTop}px;
-          left: ${containerLeft}px;
-          height: ${containerHeight}px;
-          width: ${containerWidth}px;
-        }
+    setup(function() {
+      document.body.scrollTop = 0;
+      document.body.scrollLeft = 0;
+      document.body.innerHTML = `
+        <style>
+          body {
+            height: ${bodyHeight}px;
+            width: ${bodyWidth}px;
+          }
 
-        #inner-container {
-          height: 1000px;
-          width: 1000px;
-        }
-      </style>
-      <div id="container">
-        <div id="inner-container">
-          <button id="dots">...</button>
-          <dialog is="cr-action-menu">
-            <button class="dropdown-item">Un</button>
-            <hr>
-            <button class="dropdown-item">Dos</button>
-            <button class="dropdown-item">Tres</button>
-          </dialog>
+          #container {
+            overflow: auto;
+            position: absolute;
+            top: ${containerTop}px;
+            left: ${containerLeft}px;
+            right: ${containerLeft}px;
+            height: ${containerHeight}px;
+            width: ${containerWidth}px;
+          }
+
+          #inner-container {
+            height: 1000px;
+            width: 1000px;
+          }
+
+          dialog {
+            height: ${menuHeight};
+            width: ${menuWidth};
+            padding: 0;
+          }
+        </style>
+        <div id="container">
+          <div id="inner-container">
+            <button id="dots">...</button>
+            <dialog is="cr-action-menu">
+              <button class="dropdown-item">Un</button>
+              <hr>
+              <button class="dropdown-item">Dos</button>
+              <button class="dropdown-item">Tres</button>
+            </dialog>
+          </div>
         </div>
-      </div>
-    `;
-    menu = document.querySelector('dialog[is=cr-action-menu]');
-    var dots = document.querySelector('#dots');
+      `;
+      menu = document.querySelector('dialog[is=cr-action-menu]');
+      dots = document.querySelector('#dots');
+    })
 
     // Show the menu, scrolling the body to the button.
-    menu.showAt(
-        dots,
-        {anchorAlignmentX: AnchorAlignment.AFTER_START});
-    assertEquals(`${containerLeft}px`, menu.style.left);
-    assertEquals(`${containerTop}px`, menu.style.top);
-    menu.close();
+    test('simple offscreen', function() {
+      menu.showAt(dots, {anchorAlignmentX: AnchorAlignment.AFTER_START});
+      assertEquals(`${containerLeft}px`, menu.style.left);
+      assertEquals(`${containerTop}px`, menu.style.top);
+      menu.close();
+    });
 
     // Show the menu, scrolling the container to the button, and the body to the
     // button.
-    document.body.scrollLeft = bodyWidth;
-    document.body.scrollTop = bodyHeight;
+    test('offscreen and out of scroll container viewport', function() {
+      document.body.scrollLeft = bodyWidth;
+      document.body.scrollTop = bodyHeight;
+      var container = document.querySelector('#container');
 
-    document.querySelector('#container').scrollLeft = containerLeft;
-    document.querySelector('#container').scrollTop = containerTop;
+      container.scrollLeft = containerLeft;
+      container.scrollTop = containerTop;
 
-    menu.showAt(dots, {anchorAlignmentX: AnchorAlignment.AFTER_START});
-    assertEquals(`${containerLeft}px`, menu.style.left);
-    assertEquals(`${containerTop}px`, menu.style.top);
-    menu.close();
+      menu.showAt(dots, {anchorAlignmentX: AnchorAlignment.AFTER_START});
+      assertEquals(`${containerLeft}px`, menu.style.left);
+      assertEquals(`${containerTop}px`, menu.style.top);
+      menu.close();
+    });
 
     // Show the menu for an already onscreen button. The anchor should be
     // overridden so that no scrolling happens.
-    document.body.scrollLeft = 0;
-    document.body.scrollTop = 0;
+    test('onscreen forces anchor change', function() {
+      var rect = dots.getBoundingClientRect();
+      document.body.scrollLeft = rect.right - document.body.clientWidth + 10;
+      document.body.scrollTop = rect.bottom - document.body.clientHeight + 10;
 
-    var rect = dots.getBoundingClientRect();
-    document.body.scrollLeft = rect.right - document.body.clientWidth;
-    document.body.scrollTop = rect.bottom - document.body.clientHeight;
+      menu.showAt(dots, {anchorAlignmentX: AnchorAlignment.AFTER_START});
+      var buttonWidth = dots.offsetWidth;
+      var buttonHeight = dots.offsetHeight;
+      assertEquals(containerLeft - menuWidth + buttonWidth, menu.offsetLeft);
+      assertEquals(containerTop - menuHeight + buttonHeight, menu.offsetTop);
+      menu.close();
+    });
 
-    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);
+    test('scroll position maintained for showAtPosition', function() {
+      document.body.scrollLeft = 500;
+      document.body.scrollTop = 1000;
+      menu.showAtPosition({top: 50, left: 50});
+      assertEquals(550, menu.offsetLeft);
+      assertEquals(1050, menu.offsetTop);
+      menu.close();
+    });
+
+    test('rtl', function() {
+      // Anchor to an item in RTL.
+      document.body.style.direction = 'rtl';
+      menu.showAt(dots, {anchorAlignmentX: AnchorAlignment.AFTER_START});
+      assertEquals(
+          container.offsetLeft + containerWidth - menuWidth,
+          menu.offsetLeft);
+      assertEquals(containerTop, menu.offsetTop);
+      menu.close();
+    });
   });
 });