[cr-action-menu] Fix anchoring to offscreen elements.

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

Index: chrome/test/data/webui/cr_elements/cr_action_menu_test.js
diff --git a/chrome/test/data/webui/cr_elements/cr_action_menu_test.js b/chrome/test/data/webui/cr_elements/cr_action_menu_test.js
index f18dd1456e20688564368f7a0d3b957761505d4c..a80c7b449ec4bf354a4debfb27cb4ebd58ccceca 100644
--- a/chrome/test/data/webui/cr_elements/cr_action_menu_test.js
+++ b/chrome/test/data/webui/cr_elements/cr_action_menu_test.js
@@ -248,5 +248,83 @@ suite('CrActionMenu', function() {
     assertEquals(140 - menuWidth, menu.offsetLeft);
     assertEquals('250px', menu.style.top);
     menu.close();
+    document.body.style.direction = 'ltr';
+  });
+
+  test('offscreen scroll positioning', function() {
+    PolymerTest.clearBody();
+    document.body.innerHTML = `

[dpapad, 2017/06/22 21:18:36]

Could we pull out some of the CSS values into variables, and reuse them both in
the innerHTML string literal here as well as in the assertions?

[calamity, 2017/06/28 04:00:47]

Done.

+      <style>
+        body {
+          height: 10000px;
+          width: 20000px;
+        }
+
+        #container {
+          overflow: auto;
+          position: absolute;
+          top: 5000px;
+          left: 10000px;
+          height: 500px;
+          width: 500px;
+        }
+
+        #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>
+        </div>
+      </div>
+    `;
+    menu = document.querySelector('dialog[is=cr-action-menu]');
+    var dots = document.querySelector('#dots');
+
+    // Show the menu, scrolling the body to the button.
+    menu.showAt(
+        dots,
+        {anchorAlignmentX: AnchorAlignment.AFTER_START});
+    assertEquals('10000px', menu.style.left);
+    assertEquals('5000px', menu.style.top);
+    menu.close();
+
+    // Show the menu, scrolling the container to the button, and the body to the
+    // button.
+    document.body.scrollLeft = 20000;
+    document.body.scrollTop = 10000;
+
+    document.querySelector('#container').scrollLeft = 1000;
+    document.querySelector('#container').scrollTop = 1000;
+
+    menu.showAt(dots, {anchorAlignmentX: AnchorAlignment.AFTER_START});
+    assertEquals('10000px', menu.style.left);
+    assertEquals('5000px', 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 + 10;

[dpapad, 2017/06/22 21:18:36]

What is the magic 10 value here?

[calamity, 2017/06/28 04:00:47]

This was added just to make the test easier to visually debug (the button ended
up behind the scrollbars. Removed.

+    document.body.scrollTop = rect.bottom - document.body.clientHeight + 10;
+
+    menu.showAt(dots, {anchorAlignmentX: AnchorAlignment.AFTER_START});
+    var menuWidth = menu.offsetWidth;
+    var menuHeight = menu.offsetHeight;
+    var buttonWidth = dots.offsetWidth;
+    var buttonHeight = dots.offsetHeight;
+    assertEquals(10000 - menuWidth + buttonWidth, menu.offsetLeft);
+    assertEquals(5000 - menuHeight + buttonHeight, menu.offsetTop);
   });
 });