[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} */
@@ skipping 14 matching lines @@
         <button class="dropdown-item">Tres</button>
       </dialog>
     `;
 
     menu = document.querySelector('dialog[is=cr-action-menu]');
     items = menu.querySelectorAll('.dropdown-item');
     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');
@@ skipping 218 matching lines @@
     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() {
     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;
         }
 
         #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;
         }
       </style>
       <div id="container">
@@ skipping 16 matching lines @@
         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;
+    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();
 
     // 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;
 
     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 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);
+    menu.close();
+
+    // showAtPosition takes into account scroll position.
+    document.body.scrollLeft = 500;

[dpapad, 2017/07/06 22:05:37]

The "offscreen scroll positioning" test is becoming a very large test. Can we
refactor it to more targeted smaller tests (for example separate tests for RTL
and one for LTR)?

[calamity, 2017/07/07 03:18:01]

Done.

+    document.body.scrollTop = 1000;
+    menu.showAtPosition({top: 50, left: 50});
+    assertEquals(
+        550, menu.offsetLeft);
+    assertEquals(1050, menu.offsetTop);
+    menu.close();
+
+    // Anchor to an item in RTL.
+    document.body.style.direction = 'rtl';
+    document.body.scrollLeft = 0;
+    document.body.scrollTop = 0;
+    menu.showAt(dots, {anchorAlignmentX: AnchorAlignment.AFTER_START});
+    assertEquals(
+        container.offsetLeft + containerWidth - menuWidth, menu.offsetLeft);
+    assertEquals(containerTop, menu.offsetTop);
+    menu.close();
   });
 });