From da566191fa1329c0e729f67c51d63e86abfb8536 Mon Sep 17 00:00:00 2001
From: aprigogin <17075403+aprigogin@users.noreply.github.com>
Date: Fri, 5 Jan 2018 17:13:16 -0800
Subject: [PATCH] feat(menu): Add new anchor positioning functionality (#1691)

Resolves #1688

BREAKING CHANGE: Removes 5 adapter methods and adds a new setMaxHeight adapter method; adds anchor positioning API to menu foundation; see README for details.
---
 demos/simple-menu.html                        | 294 ++++++++++--
 packages/mdc-menu/README.md                   |  28 +-
 packages/mdc-menu/index.js                    |   4 +-
 packages/mdc-menu/simple/adapter.js           |  30 +-
 packages/mdc-menu/simple/constants.js         |  58 ++-
 packages/mdc-menu/simple/foundation.js        | 384 +++++++++-------
 packages/mdc-menu/simple/index.js             |  36 +-
 packages/mdc-menu/simple/mdc-simple-menu.scss |  66 +--
 packages/mdc-select/foundation.js             |  11 +-
 test/unit/mdc-menu/mdc-simple-menu.test.js    |  56 +--
 test/unit/mdc-menu/simple.foundation.test.js  | 420 ++++++++++++------
 .../unit/mdc-select/foundation-events.test.js |  13 +
 12 files changed, 922 insertions(+), 478 deletions(-)

diff --git a/demos/simple-menu.html b/demos/simple-menu.html
index 12a1fd57be7..6bbea52b85b 100644
--- a/demos/simple-menu.html
+++ b/demos/simple-menu.html
@@ -28,33 +28,32 @@
       html,
       body,
       main {
-        display: flex;
+        position: relative;
         flex-direction: column;
-        height: 100%;
       }
 
-      .demo-header-toolbar {
-        z-index: 10;
+      .hero .mdc-simple-menu {
+        z-index: initial;
       }
 
       .demo-content {
         position: relative;
-        flex: 1;
-        padding: 16px;
+        top: 64px;
       }
 
       .demo-controls-container {
-        height: 100%;
         width: 100%;
+        height: calc(100vh - 80px);
       }
 
       .demo-controls {
         margin-left: auto;
         margin-right: auto;
-        width: 320px;
+        width: 360px;
       }
 
       .mdc-menu-anchor {
+        position: absolute;
         margin: 16px;
       }
 
@@ -63,8 +62,41 @@
         color: #ddd;
       }
 
-      .mdc-menu-anchor {
-        position: absolute;
+      .margin-inputs input {
+        width: 2em;
+      }
+
+      .left-column-controls {
+         display: inline-block;
+         vertical-align: top;
+      }
+
+      .right-column-controls {
+        display: inline-block;
+        margin-left: 2em;
+        vertical-align: top;
+      }
+
+      .demo-button__normal-text,
+      .demo-button__long-text {
+        display: none;
+      }
+
+      .demo-button--normal .demo-button__normal-text,
+      .demo-button--long .demo-button__normal-text,
+      .demo-button--long .demo-button__long-text {
+        display: inline;
+      }
+
+      .demo-menu__long-items,
+      .demo-menu__extra-long-items {
+        display: none;
+      }
+
+      .demo-menu--long .demo-menu__long-items,
+      .demo-menu--extra-long .demo-menu__long-items,
+      .demo-menu--extra-long .demo-menu__extra-long-items {
+        display: inline;
       }
     </style>
   </head>
@@ -94,45 +126,126 @@
           </ul>
         </div>
       </section>
-
       <div class="demo-content">
-        <div class="mdc-menu-anchor">
-          <button class="mdc-button mdc-button--raised toggle">
-            Reveal Menu
-          </button>
-
-          <div class="mdc-simple-menu" style="position: absolute;" tabindex="-1" id="demo-menu">
-            <ul class="mdc-simple-menu__items mdc-list" role="menu" aria-hidden="true">
-              <li class="mdc-list-item" role="menuitem" tabindex="0">Back</li>
-              <li class="mdc-list-item" role="menuitem" tabindex="0">Forward</li>
-              <li class="mdc-list-item" role="menuitem" tabindex="0">Reload</li>
-              <li class="mdc-list-divider" role="separator"></li>
-
-              <li class="mdc-list-item" role="menuitem" tabindex="0">Save As...</li>
-            </ul>
+        <div id="demo-wrapper">
+          <div class="mdc-menu-anchor">
+            <button id="menu-button" class="mdc-button mdc-button--raised demo-button demo-button--normal">
+              Show<span class="demo-button__normal-text"> Menu</span><span class="demo-button__long-text"> From Here Now!</span>
+            </button>
+
+            <div class="mdc-simple-menu" style="position: absolute;" tabindex="-1" id="demo-menu">
+              <ul class="mdc-simple-menu__items mdc-list" role="menu" aria-hidden="true">
+                <li class="mdc-list-item" role="menuitem" tabindex="0">Back</li>
+                <li class="mdc-list-item" role="menuitem" tabindex="0">Forward</li>
+                <li class="mdc-list-item" role="menuitem" tabindex="0">Reload</li>
+                <li class="mdc-list-divider" role="separator"></li>
+
+                <li class="mdc-list-item" role="menuitem" tabindex="0">Save As...</li>
+                <li class="mdc-list-item" role="menuitem" tabindex="0">Help</li>
+                <span class="demo-menu__long-items">
+                  <li class="mdc-list-item" role="menuitem" tabindex="0">Settings</li>
+                  <li class="mdc-list-item" role="menuitem" tabindex="0">Feedback</li>
+                  <li class="mdc-list-item" role="menuitem" tabindex="0">Options...</li>
+                  <li class="mdc-list-item" role="menuitem" tabindex="0">Item 1</li>
+                  <li class="mdc-list-item" role="menuitem" tabindex="0">Item 2</li>
+                </span>
+                <span class="demo-menu__extra-long-items">
+                  <li class="mdc-list-item" role="menuitem" tabindex="0">Item 3</li>
+                  <li class="mdc-list-item" role="menuitem" tabindex="0">Item 4</li>
+                  <li class="mdc-list-item" role="menuitem" tabindex="0">Item 5</li>
+                  <li class="mdc-list-item" role="menuitem" tabindex="0">Item 6</li>
+                  <li class="mdc-list-item" role="menuitem" tabindex="0">Item 7</li>
+                  <li class="mdc-list-item" role="menuitem" tabindex="0">Item 8</li>
+                  <li class="mdc-list-item" role="menuitem" tabindex="0">Item 9</li>
+                </span>
+              </ul>
+            </div>
           </div>
         </div>
 
         <div class="demo-controls-container">
           <div class="demo-controls">
-            <p>Button position:</p>
-            <div>
-              <label><input type="radio" name="position" value="top left" checked> Top left</label>
+            <div class="left-column-controls">
+              Button Position:
+              <div>
+                <label><input type="radio" name="position" value="top left" checked> Top left</label>
+              </div>
+              <div>
+                <label><input type="radio" name="position" value="top right"> Top right</label>
+              </div>
+              <div>
+                <label><input type="radio" name="position" value="middle left"> Middle left</label>
+              </div>
+              <div>
+                <label><input type="radio" name="position" value="middle right"> Middle right</label>
+              </div>
+              <div>
+                <label><input type="radio" name="position" value="bottom left"> Bottom left</label>
+              </div>
+              <div>
+                <label><input type="radio" name="position" value="bottom right"> Bottom right</label>
+              </div>
             </div>
-            <div>
-              <label><input type="radio" name="position" value="top right"> Top right</label>
+            <div class="right-column-controls">
+              Default Menu Position:
+              <div>
+                <label><input type="radio" name="menu-position" value="top start" checked> Top start</label>
+              </div>
+
+              <div>
+                <label><input type="radio" name="menu-position" value="top end"> Top end</label>
+              </div>
+
+              <div>
+                <label><input type="radio" name="menu-position" value="bottom start"> Bottom start</label>
+              </div>
+
+              <div>
+                <label><input type="radio" name="menu-position" value="bottom end"> Bottom end</label>
+              </div>
             </div>
-            <div>
-              <label><input type="radio" name="position" value="bottom left"> Bottom left</label>
+            <p>
+              Anchor Margins:
+              <div id="margin-inputs" class="margin-inputs">
+                <label>T: <input type="text" id="top-margin" value="0" size="3" max-length="3"></label>
+                <label>B: <input type="text" id="bottom-margin" value="0" size="3"></label>
+                <label>L: <input type="text" id="left-margin" value="0" size="3"></label>
+                <label>R: <input type="text" id="right-margin" value="0" size="3"></label>
+              </div>
+            </p>
+            <div class="left-column-controls">
+              <label><input type="checkbox" name="is-rtl"> RTL</label>
             </div>
-            <div>
-              <label><input type="radio" name="position" value="bottom right"> Bottom right</label>
+            <div class="right-column-controls">
+              <label><input type="checkbox" name="dark"> Dark mode</label>
             </div>
-
             <p>
-              <label><input type="checkbox" name="dark"> Dark mode</label>
+              <div class="left-column-controls">
+                Menu Sizes:
+                <div>
+                  <label><input type="radio" name="menu-length" value="small" checked> Regular menu</label>
+                </div>
+                <div>
+                  <label><input type="radio" name="menu-length" value="large"> Large menu</label>
+                </div>
+                <div>
+                  <label><input type="radio" name="menu-length" value="tall"> Extra tall menu</label>
+                </div>
+              </div>
+              <div class="right-column-controls">
+                Anchor Widths
+                <div>
+                  <label><input type="radio" name="anchor-width" value="tiny"> Small button</label>
+                </div>
+                <div>
+                  <label><input type="radio" name="anchor-width" value="regular" checked> Comparable to menu</label>
+                </div>
+                <div>
+                  <label><input type="radio" name="anchor-width" value="wide"> Wider than menu</label>
+                </div>
+              </div>
             </p>
-
+            <hr>
             <div>
               <span>Last Selected item: <em id="last-selected">&lt;none selected&gt;</em></span>
             </div>
@@ -145,8 +258,8 @@
     <script>
       var menuEl = document.querySelector('#demo-menu');
       var menu = new mdc.menu.MDCSimpleMenu(menuEl);
-      var toggle = document.querySelector('.toggle');
-      toggle.addEventListener('click', function() {
+      var menuButtonEl = document.querySelector('#menu-button');
+      menuButtonEl.addEventListener('click', function() {
         menu.open = !menu.open;
       });
 
@@ -163,11 +276,14 @@
       });
 
       var radios = document.querySelectorAll('input[name="position"]');
+      var anchor = document.querySelector('.mdc-menu-anchor');
+      // Initialize to top left.
+      anchor.style.setProperty('top', '0');
+      anchor.style.setProperty('left', '0');
       for (var i = 0; i < radios.length; i++) {
         radios[i].addEventListener('change', function(evt) {
           if (evt.target.checked) {
             if (evt.target.value) {
-              var anchor = document.querySelector('.mdc-menu-anchor');
               anchor.style.removeProperty('top');
               anchor.style.removeProperty('right');
               anchor.style.removeProperty('bottom');
@@ -175,13 +291,109 @@
 
               var vertical = evt.target.value.split(' ')[0];
               var horizontal = evt.target.value.split(' ')[1];
-              anchor.style.setProperty(vertical, '0');
+              if (vertical === 'middle') {
+                anchor.style.setProperty('top', '35%');
+              } else {
+                anchor.style.setProperty(vertical, '0');
+              }
               anchor.style.setProperty(horizontal, '0');
             }
           }
         });
       }
 
+      radios = document.querySelectorAll('input[name="menu-position"]');
+      for (var i = 0; i < radios.length; i++) {
+        radios[i].addEventListener('change', function(evt) {
+          if (evt.target.checked) {
+            switch (evt.target.value) {
+              case "top start":
+                menu.setAnchorCorner(mdc.menu.MDCSimpleMenuFoundation.Corner.TOP_START);
+                break;
+              case "bottom start":
+                menu.setAnchorCorner(mdc.menu.MDCSimpleMenuFoundation.Corner.BOTTOM_START);
+                break;
+              case "top end":
+                menu.setAnchorCorner(mdc.menu.MDCSimpleMenuFoundation.Corner.TOP_END);
+                break;
+              case "bottom end":
+                menu.setAnchorCorner(mdc.menu.MDCSimpleMenuFoundation.Corner.BOTTOM_END);
+                break;
+            }
+          }
+        });
+      }
+
+      const marginInputsEl = document.querySelector('#margin-inputs');
+      var inputs = marginInputsEl.querySelectorAll('input[type="text"]');
+      for (var i = 0; i < inputs.length; i++) {
+        inputs[i].addEventListener('change', function(evt) {
+          const topMarginInput = document.getElementById('top-margin');
+          const bottomMarginInput = document.getElementById('bottom-margin');
+          const rightMarginInput = document.getElementById('right-margin');
+          const leftMarginInput = document.getElementById('left-margin');
+          const margin = {top: parseInt(topMarginInput.value, 10),
+                          right: parseInt(rightMarginInput.value, 10),
+                          bottom: parseInt(bottomMarginInput.value, 10),
+                          left: parseInt(leftMarginInput.value, 10)};
+          menu.setAnchorMargin(margin);
+        });
+      }
+
+      const rtl = document.querySelector('input[name="is-rtl"]');
+      rtl.addEventListener('change', function() {
+        const demoWrapper = document.getElementById('demo-wrapper');
+        if (rtl.checked) {
+          demoWrapper.setAttribute('dir', 'rtl');
+        } else {
+          demoWrapper.removeAttribute('dir');
+        }
+      });
+
+      radios = document.querySelectorAll('input[name="menu-length"]');
+      for (var i = 0; i < radios.length; i++) {
+        radios[i].addEventListener('change', function(evt) {
+          if (evt.target.checked) {
+            switch (evt.target.value) {
+              case "small":
+                menuEl.classList.remove('demo-menu--long');
+                menuEl.classList.remove('demo-menu--extra-long');
+                break;
+              case "large":
+                menuEl.classList.add('demo-menu--long');
+                menuEl.classList.remove('demo-menu--extra-long');
+                break;
+              case "tall":
+                menuEl.classList.remove('demo-menu--long');
+                menuEl.classList.add('demo-menu--extra-long');
+                break;
+            }
+          }
+        });
+      }
+
+      radios = document.querySelectorAll('input[name="anchor-width"]');
+      for (var i = 0; i < radios.length; i++) {
+        radios[i].addEventListener('change', function(evt) {
+          if (evt.target.checked) {
+            switch (evt.target.value) {
+              case "tiny":
+                menuButtonEl.classList.remove('demo-button--normal');
+                menuButtonEl.classList.remove('demo-button--long');
+                break;
+              case "regular":
+                menuButtonEl.classList.add('demo-button--normal');
+                menuButtonEl.classList.remove('demo-button--long');
+                break;
+              case "wide":
+                menuButtonEl.classList.remove('demo-button--normal');
+                menuButtonEl.classList.add('demo-button--long');
+                break;
+            }
+          }
+        });
+      }
+
       var lastSelected = document.getElementById('last-selected');
       menuEl.addEventListener('MDCSimpleMenu:selected', function(evt) {
         var detail = evt.detail;
diff --git a/packages/mdc-menu/README.md b/packages/mdc-menu/README.md
index 66a77998ef2..2b497125284 100644
--- a/packages/mdc-menu/README.md
+++ b/packages/mdc-menu/README.md
@@ -108,8 +108,9 @@ or a wrapper element that contains the actual visible element to attach to:
 the menu is positioned and displayed correctly.
 
 The menu will check if its parent element has the `mdc-menu-anchor` class set, and if so, it will automatically position
-itself relative to this anchor element. It will open from the top left (top right in RTL) corner of the anchor by
-default, but will choose an appropriate different corner if close to the edge of the screen.
+itself relative to this anchor element. Unless anchor corner is specified, menu will open from the top left
+(top right in RTL) corner of the anchor by default, but will choose an appropriate different corner if close
+to the edge of the screen.
 
 #### Manual Positioning
 
@@ -274,15 +275,11 @@ The adapter for simple menu must provide the following functions, with correct s
 | `hasAnchor: () => boolean` | Returns whether the menu has an anchor for positioning. |
 | `getAnchorDimensions() => { width: number, height: number, top: number, right: number, bottom: number, left: number }` | Returns an object with the dimensions and position of the anchor (same semantics as `DOMRect`). |
 | `getWindowDimensions() => {width: number, height: number}` | Returns an object with width and height of the page, in pixels. |
-| `setScale(x: string, y: string) => void` | Sets the transform on the root element to the provided (x, y) scale. |
-| `setInnerScale(x: string, y: string) => void` | Sets the transform on the items container to the provided (x, y) scale. |
 | `getNumberOfItems() => numbers` | Returns the number of _item_ elements inside the items container. In our vanilla component, we determine this by counting the number of list items whose `role` attribute corresponds to the correct child role of the role present on the menu list element. For example, if the list element has a role of `menu` this queries for all elements that have a role of `menuitem`. |
 | `registerInteractionHandler(type: string, handler: EventListener) => void` | Adds an event listener `handler` for event type `type`. |
 | `deregisterInteractionHandler(type: string, handler: EventListener) => void` | Removes an event listener `handler` for event type `type`. |
 | `registerBodyClickHandler(handler: EventListener) => void` | Adds an event listener `handler` for event type 'click'. |
 | `deregisterBodyClickHandler(handler: EventListener) => void` | Removes an event listener `handler` for event type 'click'. |
-| `getYParamsForItemAtIndex(index: number) => {top: number, height: number}` | Returns an object with the offset top and offset height values for the _item_ element inside the items container at the provided index. Note that this is an index into the list of _item_ elements, and not necessarily every child element of the list. |
-| `setTransitionDelayForItemAtIndex(index: number, value: string) => void` | Sets the transition delay on the element inside the items container at the provided index to the provided value. The same notice for `index` applies here as above. |
 | `getIndexForEventTarget(target: EventTarget) => number` | Checks to see if the `target` of an event pertains to one of the menu items, and if so returns the index of that item. Returns -1 if the target is not one of the menu items. The same notice for `index` applies here as above. |
 | `notifySelected(evtData: {index: number}) => void` | Dispatches an event notifying listeners that a menu item has been selected. The function should accept an `evtData` parameter containing the an object with an `index` property representing the index of the selected item. Implementations may choose to supplement this data with additional data, such as the item itself. |
 | `notifyCancel() => void` | Dispatches an event notifying listeners that the menu has been closed with no selection made. |
@@ -295,7 +292,7 @@ The adapter for simple menu must provide the following functions, with correct s
 | `isRtl() => boolean` | Returns boolean indicating whether the current environment is RTL. |
 | `setTransformOrigin(value: string) => void` | Sets the transform origin for the menu element. |
 | `setPosition(position: { top: string, right: string, bottom: string, left: string }) => void` | Sets the position of the menu element. |
-| `getAccurateTime() => number` | Returns a number representing the number of milliseconds (and fractional milliseconds, as the decimal part) since a given point in time, which should remain constant during the component's lifecycle. Ideally, this should be provided by `window.performance.now()`, which has enough precision for high frequency animation calculations. Using `Date.now()` or equivalent may result in some aliasing in animations. |
+| `setMaxHeight(value: string) => void` | Sets `max-height` style for the menu element. |
 
 ### The full foundation API
 
@@ -311,6 +308,23 @@ Closes the menu.
 
 Returns whether or not the menu is open.
 
+#### MDCSimpleMenuFoundation.setAnchorCorner(Corner = Corner.TOP_START) => void
+
+Specifies the anchor corner to which top start of the menu (top left in ltr, top right in rtl) should align given there
+is enough space to show the full menu.
+When menu display is constrained by viewport edge, `TOP` can be flipped to `BOTTOM`. Similarly `START` can flip to `END`.
+Specifying `BOTTOM_START` and `BOTTOM_END` positions, indicates that the menu displayed either fully below or
+above the anchor. In such cases maximum height of the menu is enforced.
+When specifying `TOP_START` and `TOP_END` positions, the menu is allowed to be taller if it does not fit below
+or above the anchor.
+
+#### MDCSimpleMenuFoundation.setAnchorMargin({top: number, right: number, bottom: number, left: number}) => void
+
+Specifies pixel margins that the menu should be offset from all four sides of an anchor. When menu overlaps an
+anchor (default anchor corner) and menu is taller than would fit (not extending beyond viewport edges), margin is
+ignored and menu allowed to display fully overlapping the anchor. In such cases menu is not strictly aligned to an
+anchor corner, also maximum height of the menu in such cases is constrained by the viewport height.
+
 
 ### The util API
 External frameworks and libraries can use the following utility methods when integrating a component.
diff --git a/packages/mdc-menu/index.js b/packages/mdc-menu/index.js
index faae1e35fe8..968d1a5825f 100644
--- a/packages/mdc-menu/index.js
+++ b/packages/mdc-menu/index.js
@@ -16,5 +16,5 @@
  */
 
 import * as util from './util';
-import {MDCSimpleMenu, MDCSimpleMenuFoundation} from './simple';
-export {MDCSimpleMenu, MDCSimpleMenuFoundation, util};
+import {MDCSimpleMenu, MDCSimpleMenuFoundation, CornerBit, Corner, AnchorMargin} from './simple';
+export {MDCSimpleMenu, MDCSimpleMenuFoundation, CornerBit, Corner, AnchorMargin, util};
diff --git a/packages/mdc-menu/simple/adapter.js b/packages/mdc-menu/simple/adapter.js
index 4b920e807ea..2c50cdc5e70 100644
--- a/packages/mdc-menu/simple/adapter.js
+++ b/packages/mdc-menu/simple/adapter.js
@@ -78,18 +78,6 @@ class MDCSimpleMenuAdapter {
   /** @return {{ width: number, height: number }} */
   getWindowDimensions() {}
 
-  /**
-   * @param {number} x
-   * @param {number} y
-   */
-  setScale(x, y) {}
-
-  /**
-   * @param {number} x
-   * @param {number} y
-   */
-  setInnerScale(x, y) {}
-
   /** @return {number} */
   getNumberOfItems() {}
 
@@ -111,18 +99,6 @@ class MDCSimpleMenuAdapter {
   /** @param {function(!Event)} handler */
   deregisterBodyClickHandler(handler) {}
 
-  /**
-   * @param {number} index
-   * @return {{top: number, height: number}}
-   */
-  getYParamsForItemAtIndex(index) {}
-
-  /**
-   * @param {number} index
-   * @param {string|null} value
-   */
-  setTransitionDelayForItemAtIndex(index, value) {}
-
   /**
    * @param {EventTarget} target
    * @return {number}
@@ -163,8 +139,8 @@ class MDCSimpleMenuAdapter {
   * }} position */
   setPosition(position) {}
 
-  /** @return {number} */
-  getAccurateTime() {}
+  /** @param {string} height */
+  setMaxHeight(height) {}
 }
 
-export default MDCSimpleMenuAdapter;
+export {MDCSimpleMenuAdapter};
diff --git a/packages/mdc-menu/simple/constants.js b/packages/mdc-menu/simple/constants.js
index 4ace256ffc3..2e71c52b619 100644
--- a/packages/mdc-menu/simple/constants.js
+++ b/packages/mdc-menu/simple/constants.js
@@ -19,7 +19,8 @@
 const cssClasses = {
   ROOT: 'mdc-simple-menu',
   OPEN: 'mdc-simple-menu--open',
-  ANIMATING: 'mdc-simple-menu--animating',
+  ANIMATING_OPEN: 'mdc-simple-menu--animating-open',
+  ANIMATING_CLOSED: 'mdc-simple-menu--animating-closed',
   TOP_RIGHT: 'mdc-simple-menu--open-from-top-right',
   BOTTOM_LEFT: 'mdc-simple-menu--open-from-bottom-left',
   BOTTOM_RIGHT: 'mdc-simple-menu--open-from-bottom-right',
@@ -40,17 +41,48 @@ const numbers = {
   // will most likely be bumped up once interactive lists are supported to allow for the ripple to
   // animate before closing the menu
   SELECTED_TRIGGER_DELAY: 50,
-  // Total duration of the menu animation.
-  TRANSITION_DURATION_MS: 300,
-  // The menu starts its open animation with the X axis at this time value (0 - 1).
-  TRANSITION_SCALE_ADJUSTMENT_X: 0.5,
-  // The time value the menu waits until the animation starts on the Y axis (0 - 1).
-  TRANSITION_SCALE_ADJUSTMENT_Y: 0.2,
-  // The cubic bezier control points for the animation (cubic-bezier(0, 0, 0.2, 1)).
-  TRANSITION_X1: 0,
-  TRANSITION_Y1: 0,
-  TRANSITION_X2: 0.2,
-  TRANSITION_Y2: 1,
+  // Total duration of menu open animation.
+  TRANSITION_OPEN_DURATION: 120,
+  // Total duration of menu close animation.
+  TRANSITION_CLOSE_DURATION: 75,
+  // Margin left to the edge of the viewport when menu is at maximum possible height.
+  MARGIN_TO_EDGE: 32,
+  // Ratio of anchor width to menu width for switching from corner positioning to center positioning.
+  ANCHOR_TO_MENU_WIDTH_RATIO: 0.67,
+  // Ratio of vertical offset to menu height for switching from corner to mid-way origin positioning.
+  OFFSET_TO_MENU_HEIGHT_RATIO: 0.1,
 };
 
-export {cssClasses, strings, numbers};
+/**
+ * Enum for bits in the {@see Corner) bitmap.
+ * @enum {number}
+ */
+const CornerBit = {
+  BOTTOM: 1,
+  CENTER: 2,
+  RIGHT: 4,
+  FLIP_RTL: 8,
+};
+
+/**
+ * Enum for representing an element corner for positioning the menu.
+ *
+ * The START constants map to LEFT if element directionality is left
+ * to right and RIGHT if the directionality is right to left.
+ * Likewise END maps to RIGHT or LEFT depending on the directionality.
+ *
+ * @enum {number}
+ */
+const Corner = {
+  TOP_LEFT: 0,
+  TOP_RIGHT: CornerBit.RIGHT,
+  BOTTOM_LEFT: CornerBit.BOTTOM,
+  BOTTOM_RIGHT: CornerBit.BOTTOM | CornerBit.RIGHT,
+  TOP_START: CornerBit.FLIP_RTL,
+  TOP_END: CornerBit.FLIP_RTL | CornerBit.RIGHT,
+  BOTTOM_START: CornerBit.BOTTOM | CornerBit.FLIP_RTL,
+  BOTTOM_END: CornerBit.BOTTOM | CornerBit.RIGHT | CornerBit.FLIP_RTL,
+};
+
+
+export {cssClasses, strings, numbers, CornerBit, Corner};
diff --git a/packages/mdc-menu/simple/foundation.js b/packages/mdc-menu/simple/foundation.js
index c912be2deac..9ad965a994e 100644
--- a/packages/mdc-menu/simple/foundation.js
+++ b/packages/mdc-menu/simple/foundation.js
@@ -15,10 +15,33 @@
  * limitations under the License.
  */
 
+/**
+ * @typedef {{
+ *   top: number,
+ *   right: number,
+ *   bottom: number,
+ *   left: number
+ * }}
+ */
+let AnchorMargin;
+
+/* eslint-disable no-unused-vars */
+/**
+ * @typedef {{
+ *   viewport: { width: number, height: number },
+ *   viewportDistance: {top: number, right: number, bottom: number, left: number},
+ *   anchorHeight: number,
+ *   anchorWidth: number,
+ *   menuHeight: number,
+ *   menuWidth: number,
+ * }}
+ */
+let AutoLayoutMeasurements;
+/* eslint-enable no-unused-vars */
+
 import MDCFoundation from '@material/base/foundation';
-import MDCSimpleMenuAdapter from './adapter';
-import {cssClasses, strings, numbers} from './constants';
-import {clamp, bezierProgress} from '../util';
+import {MDCSimpleMenuAdapter} from './adapter';
+import {cssClasses, strings, numbers, Corner, CornerBit} from './constants';
 
 /**
  * @extends {MDCFoundation<!MDCSimpleMenuAdapter>}
@@ -39,6 +62,11 @@ class MDCSimpleMenuFoundation extends MDCFoundation {
     return numbers;
   }
 
+  /** @return enum{number} */
+  static get Corner() {
+    return Corner;
+  }
+
   /**
    * {@see MDCSimpleMenuAdapter} for typing information on parameters and return
    * types.
@@ -56,15 +84,11 @@ class MDCSimpleMenuFoundation extends MDCFoundation {
       hasAnchor: () => false,
       getAnchorDimensions: () => ({}),
       getWindowDimensions: () => ({}),
-      setScale: () => {},
-      setInnerScale: () => {},
       getNumberOfItems: () => 0,
       registerInteractionHandler: () => {},
       deregisterInteractionHandler: () => {},
       registerBodyClickHandler: () => {},
       deregisterBodyClickHandler: () => {},
-      getYParamsForItemAtIndex: () => ({}),
-      setTransitionDelayForItemAtIndex: () => {},
       getIndexForEventTarget: () => 0,
       notifySelected: () => {},
       notifyCancel: () => {},
@@ -77,7 +101,7 @@ class MDCSimpleMenuFoundation extends MDCFoundation {
       isRtl: () => false,
       setTransformOrigin: () => {},
       setPosition: () => {},
-      getAccurateTime: () => 0,
+      setMaxHeight: () => {},
     });
   }
 
@@ -96,17 +120,9 @@ class MDCSimpleMenuFoundation extends MDCFoundation {
     /** @private {boolean} */
     this.isOpen_ = false;
     /** @private {number} */
-    this.startScaleX_ = 0;
-    /** @private {number} */
-    this.startScaleY_ = 0;
-    /** @private {number} */
-    this.targetScale_ = 1;
-    /** @private {number} */
-    this.scaleX_ = 0;
+    this.openAnimationEndTimerId_ = 0;
     /** @private {number} */
-    this.scaleY_ = 0;
-    /** @private {boolean} */
-    this.running_ = false;
+    this.closeAnimationEndTimerId_ = 0;
     /** @private {number} */
     this.selectedTriggerTimerId_ = 0;
     /** @private {number} */
@@ -114,9 +130,13 @@ class MDCSimpleMenuFoundation extends MDCFoundation {
     /** @private {!{ width: number, height: number }} */
     this.dimensions_;
     /** @private {number} */
-    this.startTime_;
-    /** @private {number} */
     this.itemHeight_;
+    /** @private {Corner} */
+    this.anchorCorner_ = Corner.TOP_START;
+    /** @private {AnchorMargin} */
+    this.anchorMargin_ = {top: 0, right: 0, bottom: 0, left: 0};
+    /** @private {?AutoLayoutMeasurements} */
+    this.measures_ = null;
   }
 
   init() {
@@ -141,6 +161,8 @@ class MDCSimpleMenuFoundation extends MDCFoundation {
 
   destroy() {
     clearTimeout(this.selectedTriggerTimerId_);
+    clearTimeout(this.openAnimationEndTimerId_);
+    clearTimeout(this.closeAnimationEndTimerId_);
     // Cancel any currently running animations.
     cancelAnimationFrame(this.animationRequestId_);
     this.adapter_.deregisterInteractionHandler('click', this.clickHandler_);
@@ -150,110 +172,20 @@ class MDCSimpleMenuFoundation extends MDCFoundation {
   }
 
   /**
-   * Calculates transition delays for individual menu items, so that they fade in one at a time.
-   * @private
-   */
-  applyTransitionDelays_() {
-    const {BOTTOM_LEFT, BOTTOM_RIGHT} = MDCSimpleMenuFoundation.cssClasses;
-    const numItems = this.adapter_.getNumberOfItems();
-    const {height} = this.dimensions_;
-    const transitionDuration = MDCSimpleMenuFoundation.numbers.TRANSITION_DURATION_MS / 1000;
-    const start = MDCSimpleMenuFoundation.numbers.TRANSITION_SCALE_ADJUSTMENT_Y;
-
-    for (let index = 0; index < numItems; index++) {
-      const {top: itemTop, height: itemHeight} = this.adapter_.getYParamsForItemAtIndex(index);
-      this.itemHeight_ = itemHeight;
-      let itemDelayFraction = itemTop / height;
-      if (this.adapter_.hasClass(BOTTOM_LEFT) || this.adapter_.hasClass(BOTTOM_RIGHT)) {
-        itemDelayFraction = ((height - itemTop - itemHeight) / height);
-      }
-      const itemDelay = (start + itemDelayFraction * (1 - start)) * transitionDuration;
-      // Use toFixed() here to normalize CSS unit precision across browsers
-      this.adapter_.setTransitionDelayForItemAtIndex(index, `${itemDelay.toFixed(3)}s`);
-    }
-  }
-
-  /**
-   * Removes transition delays from menu items.
-   * @private
-   */
-  removeTransitionDelays_() {
-    const numItems = this.adapter_.getNumberOfItems();
-    for (let i = 0; i < numItems; i++) {
-      this.adapter_.setTransitionDelayForItemAtIndex(i, null);
-    }
-  }
-
-  /**
-   * Animates menu opening or closing.
-   * @private
+   * @param {!Corner} corner Default anchor corner alignment of top-left menu corner.
    */
-  animationLoop_() {
-    const time = this.adapter_.getAccurateTime();
-    const {TRANSITION_DURATION_MS, TRANSITION_X1, TRANSITION_Y1, TRANSITION_X2, TRANSITION_Y2,
-      TRANSITION_SCALE_ADJUSTMENT_X, TRANSITION_SCALE_ADJUSTMENT_Y} = MDCSimpleMenuFoundation.numbers;
-    const currentTime = clamp((time - this.startTime_) / TRANSITION_DURATION_MS);
-
-    // Animate X axis very slowly, so that only the Y axis animation is visible during fade-out.
-    let currentTimeX = clamp(
-      (currentTime - TRANSITION_SCALE_ADJUSTMENT_X) / (1 - TRANSITION_SCALE_ADJUSTMENT_X)
-    );
-    // No time-shifting on the Y axis when closing.
-    let currentTimeY = currentTime;
-
-    let startScaleY = this.startScaleY_;
-    if (this.targetScale_ === 1) {
-      // Start with the menu at the height of a single item.
-      if (this.itemHeight_) {
-        startScaleY = Math.max(this.itemHeight_ / this.dimensions_.height, startScaleY);
-      }
-      // X axis moves faster, so time-shift forward.
-      currentTimeX = clamp(currentTime + TRANSITION_SCALE_ADJUSTMENT_X);
-      // Y axis moves slower, so time-shift backwards and adjust speed by the difference.
-      currentTimeY = clamp(
-        (currentTime - TRANSITION_SCALE_ADJUSTMENT_Y) / (1 - TRANSITION_SCALE_ADJUSTMENT_Y)
-      );
-    }
-
-    // Apply cubic bezier easing independently to each axis.
-    const easeX = bezierProgress(currentTimeX, TRANSITION_X1, TRANSITION_Y1, TRANSITION_X2, TRANSITION_Y2);
-    const easeY = bezierProgress(currentTimeY, TRANSITION_X1, TRANSITION_Y1, TRANSITION_X2, TRANSITION_Y2);
-
-    // Calculate the scales to apply to the outer container and inner container.
-    this.scaleX_ = this.startScaleX_ + (this.targetScale_ - this.startScaleX_) * easeX;
-    const invScaleX = 1 / (this.scaleX_ === 0 ? 1 : this.scaleX_);
-    this.scaleY_ = startScaleY + (this.targetScale_ - startScaleY) * easeY;
-    const invScaleY = 1 / (this.scaleY_ === 0 ? 1 : this.scaleY_);
-
-    // Apply scales.
-    this.adapter_.setScale(this.scaleX_, this.scaleY_);
-    this.adapter_.setInnerScale(invScaleX, invScaleY);
-
-    // Stop animation when we've covered the entire 0 - 1 range of time.
-    if (currentTime < 1) {
-      this.animationRequestId_ = requestAnimationFrame(() => this.animationLoop_());
-    } else {
-      this.animationRequestId_ = 0;
-      this.running_ = false;
-      this.adapter_.removeClass(MDCSimpleMenuFoundation.cssClasses.ANIMATING);
-    }
+  setAnchorCorner(corner) {
+    this.anchorCorner_ = corner;
   }
 
   /**
-   * Starts the open or close animation.
-   * @private
+   * @param {!AnchorMargin} margin 4-plet of margins from anchor.
    */
-  animateMenu_() {
-    this.startTime_ = this.adapter_.getAccurateTime();
-    this.startScaleX_ = this.scaleX_;
-    this.startScaleY_ = this.scaleY_;
-
-    this.targetScale_ = this.isOpen_ ? 1 : 0;
-
-    if (!this.running_) {
-      this.running_ = true;
-      this.animationRequestId_ = requestAnimationFrame(() => this.animationLoop_());
-    }
+  setAnchorMargin(margin) {
+    this.anchorMargin_.top = typeof margin.top === 'number' ? margin.top : 0;
+    this.anchorMargin_.right = typeof margin.right === 'number' ? margin.right : 0;
+    this.anchorMargin_.bottom = typeof margin.bottom === 'number' ? margin.bottom : 0;
+    this.anchorMargin_.left = typeof margin.left === 'number' ? margin.left : 0;
   }
 
   /**
@@ -399,53 +331,186 @@ class MDCSimpleMenuFoundation extends MDCFoundation {
     }, numbers.SELECTED_TRIGGER_DELAY);
   }
 
-  /** @private */
-  autoPosition_() {
-    if (!this.adapter_.hasAnchor()) {
-      return;
-    }
+  /**
+   * @return {AutoLayoutMeasurements} Measurements used to position menu popup.
+   */
+  getAutoLayoutMeasurements_() {
+    const anchorRect = this.adapter_.getAnchorDimensions();
+    const viewport = this.adapter_.getWindowDimensions();
+
+    return {
+      viewport: viewport,
+      viewportDistance: {
+        top: anchorRect.top,
+        right: viewport.width - anchorRect.right,
+        left: anchorRect.left,
+        bottom: viewport.height - anchorRect.bottom,
+      },
+      anchorHeight: anchorRect.height,
+      anchorWidth: anchorRect.width,
+      menuHeight: this.dimensions_.height,
+      menuWidth: this.dimensions_.width,
+    };
+  }
 
+  /**
+   * Computes the corner of the anchor from which to animate and position the menu.
+   * @return {Corner}
+   * @private
+   */
+  getOriginCorner_() {
     // Defaults: open from the top left.
-    let vertical = 'top';
-    let horizontal = 'left';
+    let corner = Corner.TOP_LEFT;
+
+    const {viewportDistance, anchorHeight, anchorWidth, menuHeight, menuWidth} = this.measures_;
+    const isBottomAligned = Boolean(this.anchorCorner_ & CornerBit.BOTTOM);
+    const availableTop = isBottomAligned ? viewportDistance.top + anchorHeight + this.anchorMargin_.bottom
+      : viewportDistance.top + this.anchorMargin_.top;
+    const availableBottom = isBottomAligned ? viewportDistance.bottom - this.anchorMargin_.bottom
+      : viewportDistance.bottom + anchorHeight - this.anchorMargin_.top;
+
+    const topOverflow = menuHeight - availableTop;
+    const bottomOverflow = menuHeight - availableBottom;
+    if (bottomOverflow > 0 && topOverflow < bottomOverflow) {
+      corner |= CornerBit.BOTTOM;
+    }
 
-    const anchor = this.adapter_.getAnchorDimensions();
-    const windowDimensions = this.adapter_.getWindowDimensions();
+    const isRtl = this.adapter_.isRtl();
+    const isFlipRtl = Boolean(this.anchorCorner_ & CornerBit.FLIP_RTL);
+    const avoidHorizontalOverlap = Boolean(this.anchorCorner_ & CornerBit.RIGHT);
+    const isAlignedRight = (avoidHorizontalOverlap && !isRtl) ||
+      (!avoidHorizontalOverlap && isFlipRtl && isRtl);
+    const availableLeft = isAlignedRight ? viewportDistance.left + anchorWidth + this.anchorMargin_.right :
+      viewportDistance.left + this.anchorMargin_.left;
+    const availableRight = isAlignedRight ? viewportDistance.right - this.anchorMargin_.right :
+      viewportDistance.right + anchorWidth - this.anchorMargin_.left;
+
+    const leftOverflow = menuWidth - availableLeft;
+    const rightOverflow = menuWidth - availableRight;
+
+    if ((leftOverflow < 0 && isAlignedRight && isRtl) ||
+        (avoidHorizontalOverlap && !isAlignedRight && leftOverflow < 0) ||
+        (rightOverflow > 0 && leftOverflow < rightOverflow)) {
+      corner |= CornerBit.RIGHT;
+    }
 
-    const topOverflow = anchor.top + this.dimensions_.height - windowDimensions.height;
-    const bottomOverflow = this.dimensions_.height - anchor.bottom;
-    const extendsBeyondTopBounds = topOverflow > 0;
+    return corner;
+  }
 
-    if (extendsBeyondTopBounds) {
-      if (bottomOverflow < topOverflow) {
-        vertical = 'bottom';
-      }
+  /**
+   * @param {Corner} corner Origin corner of the menu.
+   * @return {number} Horizontal offset of menu origin corner from corresponding anchor corner.
+   * @private
+   */
+  getHorizontalOriginOffset_(corner) {
+    const {anchorWidth} = this.measures_;
+    const isRightAligned = Boolean(corner & CornerBit.RIGHT);
+    const avoidHorizontalOverlap = Boolean(this.anchorCorner_ & CornerBit.RIGHT);
+    let x = 0;
+    if (isRightAligned) {
+      const rightOffset = avoidHorizontalOverlap ? anchorWidth - this.anchorMargin_.left : this.anchorMargin_.right;
+      x = rightOffset;
+    } else {
+      const leftOffset = avoidHorizontalOverlap ? anchorWidth - this.anchorMargin_.right : this.anchorMargin_.left;
+      x = leftOffset;
     }
+    return x;
+  }
 
-    const leftOverflow = anchor.left + this.dimensions_.width - windowDimensions.width;
-    const rightOverflow = this.dimensions_.width - anchor.right;
-    const extendsBeyondLeftBounds = leftOverflow > 0;
-    const extendsBeyondRightBounds = rightOverflow > 0;
+  /**
+   * @param {Corner} corner Origin corner of the menu.
+   * @return {number} Vertical offset of menu origin corner from corresponding anchor corner.
+   * @private
+   */
+  getVerticalOriginOffset_(corner) {
+    const {viewport, viewportDistance, anchorHeight, menuHeight} = this.measures_;
+    const isBottomAligned = Boolean(corner & CornerBit.BOTTOM);
+    const {MARGIN_TO_EDGE} = MDCSimpleMenuFoundation.numbers;
+    const avoidVerticalOverlap = Boolean(this.anchorCorner_ & CornerBit.BOTTOM);
+    const canOverlapVertically = !avoidVerticalOverlap;
+    let y = 0;
+
+    if (isBottomAligned) {
+      y = avoidVerticalOverlap ? anchorHeight - this.anchorMargin_.top : -this.anchorMargin_.bottom;
+      // adjust for when menu can overlap anchor, but too tall to be aligned to bottom
+      // anchor corner. Bottom margin is ignored in such cases.
+      if (canOverlapVertically && menuHeight > viewportDistance.top + anchorHeight) {
+        y = -(Math.min(menuHeight, viewport.height - MARGIN_TO_EDGE) - (viewportDistance.top + anchorHeight));
+      }
+    } else {
+      y = avoidVerticalOverlap ? (anchorHeight + this.anchorMargin_.bottom) : this.anchorMargin_.top;
+      // adjust for when menu can overlap anchor, but too tall to be aligned to top
+      // anchor corners. Top margin is ignored in that case.
+      if (canOverlapVertically && menuHeight > viewportDistance.bottom + anchorHeight) {
+        y = -(Math.min(menuHeight, viewport.height - MARGIN_TO_EDGE) - (viewportDistance.bottom + anchorHeight));
+      }
+    }
+    return y;
+  }
 
-    if (this.adapter_.isRtl()) {
-      // In RTL, we prefer to open from the right.
-      horizontal = 'right';
-      if (extendsBeyondRightBounds && leftOverflow < rightOverflow) {
-        horizontal = 'left';
+  /**
+   * @param {Corner} corner Origin corner of the menu.
+   * @return {number} Maximum height of the menu, based on available space. 0 indicates should not be set.
+   * @private
+   */
+  getMenuMaxHeight_(corner) {
+    let maxHeight = 0;
+    const {viewportDistance} = this.measures_;
+    const isBottomAligned = Boolean(corner & CornerBit.BOTTOM);
+
+    // When maximum height is not specified, it is handled from css.
+    if (this.anchorCorner_ & CornerBit.BOTTOM) {
+      if (isBottomAligned) {
+        maxHeight = viewportDistance.top + this.anchorMargin_.top;
+      } else {
+        maxHeight = viewportDistance.bottom - this.anchorMargin_.bottom;
       }
-    } else if (extendsBeyondLeftBounds && rightOverflow < leftOverflow) {
-      horizontal = 'right';
     }
 
+    return maxHeight;
+  }
+
+  /** @private */
+  autoPosition_() {
+    if (!this.adapter_.hasAnchor()) {
+      return;
+    }
+
+    // Compute measurements for autoposition methods reuse.
+    this.measures_ = this.getAutoLayoutMeasurements_();
+
+    const corner = this.getOriginCorner_();
+    const maxMenuHeight = this.getMenuMaxHeight_(corner);
+    let verticalAlignment = (corner & CornerBit.BOTTOM) ? 'bottom' : 'top';
+    let horizontalAlignment = (corner & CornerBit.RIGHT) ? 'right' : 'left';
+    const horizontalOffset = this.getHorizontalOriginOffset_(corner);
+    const verticalOffset = this.getVerticalOriginOffset_(corner);
     const position = {
-      [horizontal]: '0',
-      [vertical]: '0',
+      [horizontalAlignment]: horizontalOffset ? horizontalOffset + 'px' : '0',
+      [verticalAlignment]: verticalOffset ? verticalOffset + 'px' : '0',
     };
+    const {anchorWidth, menuHeight, menuWidth} = this.measures_;
+    // Center align when anchor width is comparable or greater than menu, otherwise keep corner.
+    if (anchorWidth / menuWidth > numbers.ANCHOR_TO_MENU_WIDTH_RATIO) {
+      horizontalAlignment = 'center';
+    }
 
-    this.adapter_.setTransformOrigin(`${vertical} ${horizontal}`);
+    // Adjust vertical origin when menu is positioned with significant offset from anchor. This is done so that
+    // scale animation is "anchored" on the anchor.
+    if (!(this.anchorCorner_ & CornerBit.BOTTOM) &&
+        Math.abs(verticalOffset / menuHeight) > numbers.OFFSET_TO_MENU_HEIGHT_RATIO) {
+      const verticalOffsetPercent = Math.abs(verticalOffset / menuHeight) * 100;
+      const originPercent = (corner & CornerBit.BOTTOM) ? 100 - verticalOffsetPercent : verticalOffsetPercent;
+      verticalAlignment = Math.round(originPercent * 100) / 100 + '%';
+    }
+
+    this.adapter_.setTransformOrigin(`${horizontalAlignment} ${verticalAlignment}`);
     this.adapter_.setPosition(position);
-  }
+    this.adapter_.setMaxHeight(maxMenuHeight ? maxMenuHeight + 'px' : '');
 
+    // Clear measures after positioning is complete.
+    this.measures_ = null;
+  }
 
   /**
    * Open the menu.
@@ -453,15 +518,18 @@ class MDCSimpleMenuFoundation extends MDCFoundation {
    */
   open({focusIndex = null} = {}) {
     this.adapter_.saveFocus();
-    this.adapter_.addClass(MDCSimpleMenuFoundation.cssClasses.ANIMATING);
+    this.adapter_.addClass(MDCSimpleMenuFoundation.cssClasses.ANIMATING_OPEN);
+
     this.animationRequestId_ = requestAnimationFrame(() => {
       this.dimensions_ = this.adapter_.getInnerDimensions();
-      this.applyTransitionDelays_();
       this.autoPosition_();
-      this.animateMenu_();
       this.adapter_.addClass(MDCSimpleMenuFoundation.cssClasses.OPEN);
       this.focusOnOpen_(focusIndex);
       this.adapter_.registerBodyClickHandler(this.documentClickHandler_);
+      this.openAnimationEndTimerId_ = setTimeout(() => {
+        this.openAnimationEndTimerId_ = 0;
+        this.adapter_.removeClass(MDCSimpleMenuFoundation.cssClasses.ANIMATING_OPEN);
+      }, numbers.TRANSITION_OPEN_DURATION);
     });
     this.isOpen_ = true;
   }
@@ -480,11 +548,13 @@ class MDCSimpleMenuFoundation extends MDCFoundation {
     }
 
     this.adapter_.deregisterBodyClickHandler(this.documentClickHandler_);
-    this.adapter_.addClass(MDCSimpleMenuFoundation.cssClasses.ANIMATING);
+    this.adapter_.addClass(MDCSimpleMenuFoundation.cssClasses.ANIMATING_CLOSED);
     requestAnimationFrame(() => {
-      this.removeTransitionDelays_();
-      this.animateMenu_();
       this.adapter_.removeClass(MDCSimpleMenuFoundation.cssClasses.OPEN);
+      this.closeAnimationEndTimerId_ = setTimeout(() => {
+        this.closeAnimationEndTimerId_ = 0;
+        this.adapter_.removeClass(MDCSimpleMenuFoundation.cssClasses.ANIMATING_CLOSED);
+      }, numbers.TRANSITION_CLOSE_DURATION);
     });
     this.isOpen_ = false;
     this.adapter_.restoreFocus();
@@ -496,4 +566,4 @@ class MDCSimpleMenuFoundation extends MDCFoundation {
   }
 }
 
-export default MDCSimpleMenuFoundation;
+export {MDCSimpleMenuFoundation, AnchorMargin};
diff --git a/packages/mdc-menu/simple/index.js b/packages/mdc-menu/simple/index.js
index 3f6eee41cd7..9d1de9c7c80 100644
--- a/packages/mdc-menu/simple/index.js
+++ b/packages/mdc-menu/simple/index.js
@@ -16,8 +16,9 @@
  */
 
 import MDCComponent from '@material/base/component';
-import MDCSimpleMenuFoundation from './foundation';
 import {getTransformPropertyName} from '../util';
+import {MDCSimpleMenuFoundation, AnchorMargin} from './foundation';
+import {Corner, CornerBit} from './constants';
 
 /**
  * @extends MDCComponent<!MDCSimpleMenuFoundation>
@@ -61,6 +62,21 @@ class MDCSimpleMenu extends MDCComponent {
     this.foundation_.close();
   }
 
+  /**
+   * @param {Corner} corner Default anchor corner alignment of top-left
+   *     menu corner.
+   */
+  setAnchorCorner(corner) {
+    this.foundation_.setAnchorCorner(corner);
+  }
+
+  /**
+   * @param {AnchorMargin} margin
+   */
+  setAnchorMargin(margin) {
+    this.foundation_.setAnchorMargin(margin);
+  }
+
   /**
    * Return the item container element inside the component.
    * @return {?Element}
@@ -98,23 +114,11 @@ class MDCSimpleMenu extends MDCComponent {
       getWindowDimensions: () => {
         return {width: window.innerWidth, height: window.innerHeight};
       },
-      setScale: (x, y) => {
-        this.root_.style[getTransformPropertyName(window)] = `scale(${x}, ${y})`;
-      },
-      setInnerScale: (x, y) => {
-        this.itemsContainer_.style[getTransformPropertyName(window)] = `scale(${x}, ${y})`;
-      },
       getNumberOfItems: () => this.items.length,
       registerInteractionHandler: (type, handler) => this.root_.addEventListener(type, handler),
       deregisterInteractionHandler: (type, handler) => this.root_.removeEventListener(type, handler),
       registerBodyClickHandler: (handler) => document.body.addEventListener('click', handler),
       deregisterBodyClickHandler: (handler) => document.body.removeEventListener('click', handler),
-      getYParamsForItemAtIndex: (index) => {
-        const {offsetTop: top, offsetHeight: height} = this.items[index];
-        return {top, height};
-      },
-      setTransitionDelayForItemAtIndex: (index, value) =>
-        this.items[index].style.setProperty('transition-delay', value),
       getIndexForEventTarget: (target) => this.items.indexOf(target),
       notifySelected: (evtData) => this.emit(MDCSimpleMenuFoundation.strings.SELECTED_EVENT, {
         index: evtData.index,
@@ -143,9 +147,11 @@ class MDCSimpleMenu extends MDCComponent {
         this.root_.style.top = 'top' in position ? position.top : null;
         this.root_.style.bottom = 'bottom' in position ? position.bottom : null;
       },
-      getAccurateTime: () => window.performance.now(),
+      setMaxHeight: (height) => {
+        this.root_.style.maxHeight = height;
+      },
     });
   }
 }
 
-export {MDCSimpleMenuFoundation, MDCSimpleMenu};
+export {MDCSimpleMenuFoundation, MDCSimpleMenu, AnchorMargin, Corner, CornerBit};
diff --git a/packages/mdc-menu/simple/mdc-simple-menu.scss b/packages/mdc-menu/simple/mdc-simple-menu.scss
index d664b03def8..d23f82b99ea 100644
--- a/packages/mdc-menu/simple/mdc-simple-menu.scss
+++ b/packages/mdc-menu/simple/mdc-simple-menu.scss
@@ -19,8 +19,9 @@
 @import "@material/theme/mixins";
 @import "@material/typography/mixins";
 
-$mdc-simple-menu-fade-duration: .2s;
-$mdc-simple-menu-item-fade-duration: .3s;
+$mdc-simple-menu-fade-in-duration: 0.03s;
+$mdc-simple-menu-fade-out-duration: 0.075s;
+$mdc-simple-menu-scale-duration: 0.12s;
 
 // postcss-bem-linter: define simple-menu
 .mdc-simple-menu {
@@ -38,7 +39,7 @@ $mdc-simple-menu-item-fade-duration: .3s;
   max-height: calc(100vh - 32px);
   margin: 0;
   padding: 0;
-  transform: scale(0);
+  transform: scale(1);
   transform-origin: top left;
   border-radius: 2px;
   background-color: white;
@@ -53,16 +54,32 @@ $mdc-simple-menu-item-fade-duration: .3s;
     outline: none;
   }
 
+  &--animating-open {
+    display: inline-block;
+    overflow-y: hidden;
+    opacity: 0;
+    transform: scale(0.8);
+    transition: opacity $mdc-simple-menu-fade-in-duration linear,
+                transform $mdc-simple-menu-scale-duration $mdc-animation-deceleration-curve-timing-function;
+    > .mdc-simple-menu__items {
+      transform: scale(1.25);
+    }
+  }
+
   &--open {
     display: inline-block;
     transform: scale(1);
     opacity: 1;
+    > .mdc-simple-menu__items {
+      transform: scale(1);
+    }
   }
 
-  &--animating {
+  &--animating-closed {
     display: inline-block;
-    transition: opacity $mdc-simple-menu-fade-duration $mdc-animation-deceleration-curve-timing-function;
     overflow-y: hidden;
+    opacity: 0;
+    transition: opacity $mdc-simple-menu-fade-out-duration linear;
   }
 
   &__items {
@@ -70,11 +87,7 @@ $mdc-simple-menu-item-fade-duration: .3s;
     overflow-x: hidden;
     overflow-y: auto;
     will-change: transform;
-
-    // stylelint-disable plugin/selector-bem-pattern, selector-no-universal, selector-max-universal
-    > * {
-      opacity: 0;
-    }
+    transform: scale(1);
 
     > .mdc-list-item {
       cursor: pointer;
@@ -82,21 +95,7 @@ $mdc-simple-menu-item-fade-duration: .3s;
 
     .mdc-simple-menu--animating & {
       overflow-y: hidden;
-
-      > * {
-        transition-duration: $mdc-simple-menu-item-fade-duration;
-        transition-property: opacity;
-        transition-timing-function: $mdc-animation-deceleration-curve-timing-function;
-      }
     }
-
-    .mdc-simple-menu--open & {
-      > * {
-        opacity: 1;
-        will-change: opacity;
-      }
-    }
-    // stylelint-enable plugin/selector-bem-pattern, selector-no-universal, selector-max-universal
   }
 
   // stylelint-disable plugin/selector-bem-pattern
@@ -105,25 +104,6 @@ $mdc-simple-menu-item-fade-duration: .3s;
   }
   // stylelint-enable plugin/selector-bem-pattern
 
-  // Note: it's appropriate to use `!important` for these since:
-  // - they override defaults at several levels of specificity;
-  // - they're optional classes that are purposely added by the developer to obtain a desired behaviour.
-  &--open-from-top-left {
-    transform-origin: top left !important;
-  }
-
-  &--open-from-top-right {
-    transform-origin: top right !important;
-  }
-
-  &--open-from-bottom-left {
-    transform-origin: bottom left !important;
-  }
-
-  &--open-from-bottom-right {
-    transform-origin: bottom right !important;
-  }
-
   // stylelint-disable plugin/selector-bem-pattern
   .mdc-list-group,
   .mdc-list {
diff --git a/packages/mdc-select/foundation.js b/packages/mdc-select/foundation.js
index f89595f8fac..a2486aba16e 100644
--- a/packages/mdc-select/foundation.js
+++ b/packages/mdc-select/foundation.js
@@ -84,6 +84,10 @@ export default class MDCSelectFoundation extends MDCFoundation {
     this.selectedIndex_ = -1;
     this.disabled_ = false;
     this.isFocused_ = false;
+
+    /** @private {number} */
+    this.animationRequestId_ = 0;
+
     this.setPointerXOffset_ = (evt) => this.setBottomLineOrigin_(evt);
     this.displayHandler_ = (evt) => {
       evt.preventDefault();
@@ -128,6 +132,7 @@ export default class MDCSelectFoundation extends MDCFoundation {
   destroy() {
     // Drop reference to context object to prevent potential leaks
     this.ctx_ = null;
+    cancelAnimationFrame(this.animationRequestId_);
     this.adapter_.deregisterInteractionHandler('click', this.displayHandler_);
     this.adapter_.deregisterInteractionHandler('keydown', this.displayViaKeyboardHandler_);
     this.adapter_.deregisterInteractionHandler('keyup', this.displayViaKeyboardHandler_);
@@ -219,8 +224,10 @@ export default class MDCSelectFoundation extends MDCFoundation {
     this.adapter_.addClassToLabel(cssClasses.LABEL_FLOAT_ABOVE);
     this.adapter_.addClassToBottomLine(cssClasses.BOTTOM_LINE_ACTIVE);
     this.adapter_.addClass(OPEN);
-    this.adapter_.openMenu(focusIndex);
-    this.isFocused_ = true;
+    this.animationRequestId_ = requestAnimationFrame(() => {
+      this.adapter_.openMenu(focusIndex);
+      this.isFocused_ = true;
+    });
   }
 
   setBottomLineOrigin_(evt) {
diff --git a/test/unit/mdc-menu/mdc-simple-menu.test.js b/test/unit/mdc-menu/mdc-simple-menu.test.js
index 0643105a44e..6a4d0e6087e 100644
--- a/test/unit/mdc-menu/mdc-simple-menu.test.js
+++ b/test/unit/mdc-menu/mdc-simple-menu.test.js
@@ -20,7 +20,7 @@ import domEvents from 'dom-events';
 import td from 'testdouble';
 
 import {MDCSimpleMenu} from '../../../packages/mdc-menu/simple';
-import {strings} from '../../../packages/mdc-menu/simple/constants';
+import {strings, Corner} from '../../../packages/mdc-menu/simple/constants';
 import {getTransformPropertyName} from '../../../packages/mdc-menu/util';
 
 function getFixture(open) {
@@ -76,6 +76,18 @@ test('hide closes the menu', () => {
   assert.isNotOk(component.open);
 });
 
+test('setAnchorCorner', () => {
+  const {component} = setupTest();
+  component.setAnchorCorner(Corner.TOP_START);
+  // The method sets private variable on the foundation, nothing to verify.
+});
+
+test('setAnchorMargin', () => {
+  const {component} = setupTest();
+  component.setAnchorMargin({top: 0, right: 0, bottom: 0, left: 0});
+  // The method sets private variable on the foundation, nothing to verify.
+});
+
 test('items returns all menu items', () => {
   const {root, component} = setupTest();
   const items = [].slice.call(root.querySelectorAll('[role="menuitem"]'));
@@ -143,19 +155,6 @@ test('adapter#getInnerDimensions returns the dimensions of the items container',
   assert.equal(component.getDefaultFoundation().adapter_.getInnerDimensions().height, items.offsetHeight);
 });
 
-test('adapter#setScale sets the correct transform on the menu element', () => {
-  const {root, component} = setupTest();
-  component.getDefaultFoundation().adapter_.setScale(0.42, 0.84);
-  assert.equal(root.style.getPropertyValue(getTransformPropertyName(window)), 'scale(0.42, 0.84)');
-});
-
-test('adapter#setInnerScale sets the correct transform on the items container', () => {
-  const {root, component} = setupTest();
-  const items = root.querySelector(strings.ITEMS_SELECTOR);
-  component.getDefaultFoundation().adapter_.setInnerScale(0.42, 0.84);
-  assert.equal(items.style.getPropertyValue(getTransformPropertyName(window)), 'scale(0.42, 0.84)');
-});
-
 test('adapter#getNumberOfItems returns the number of item elements within the items container', () => {
   const {root, component} = setupTest();
   const numberOfItems = root.querySelectorAll('[role="menuitem"]').length;
@@ -198,29 +197,6 @@ test('adapter#deregisterBodyClickHandler proxies to removeEventListener', () =>
   td.verify(handler(td.matchers.anything()), {times: 0});
 });
 
-test('adapter#getYParamsForItemAtIndex returns the height and top of the item at the provided index', () => {
-  const {root, component} = setupTest();
-  const items = root.querySelector(strings.ITEMS_SELECTOR);
-  Object.assign(items.children[0].style, {
-    position: 'absolute',
-    top: '50px',
-    height: '100px',
-  });
-  document.body.appendChild(root);
-  assert.deepEqual(
-    component.getDefaultFoundation().adapter_.getYParamsForItemAtIndex(0),
-    {top: 50, height: 100}
-  );
-  document.body.removeChild(root);
-});
-
-test('adapter#setTransitionDelayForItemAtIndex sets the correct transition-delay for the element ' +
-     'at the provided index', () => {
-  const {root, component} = setupTest();
-  component.getDefaultFoundation().adapter_.setTransitionDelayForItemAtIndex(0, '0.42s');
-  assert.equal(root.querySelector(strings.ITEMS_SELECTOR).children[0].style.transitionDelay, '0.42s');
-});
-
 test('adapter#getIndexForEventTarget returns the item index of the event target', () => {
   const {root, component} = setupTest();
   const target = root.querySelectorAll('[role="menuitem"]')[1];
@@ -399,3 +375,9 @@ test('adapter#setPosition sets the correct position on the menu element', () =>
   assert.equal(root.style.bottom, '10px');
   assert.equal(root.style.right, '11px');
 });
+
+test('adapter#setMaxHeight sets the maxHeight style on the menu element', () => {
+  const {root, component} = setupTest();
+  component.getDefaultFoundation().adapter_.setMaxHeight('100px');
+  assert.equal(root.style.maxHeight, '100px');
+});
diff --git a/test/unit/mdc-menu/simple.foundation.test.js b/test/unit/mdc-menu/simple.foundation.test.js
index f89df103600..7a72f6c360a 100644
--- a/test/unit/mdc-menu/simple.foundation.test.js
+++ b/test/unit/mdc-menu/simple.foundation.test.js
@@ -20,23 +20,47 @@ import td from 'testdouble';
 import {captureHandlers, verifyDefaultAdapter} from '../helpers/foundation';
 import {setupFoundationTest} from '../helpers/setup';
 import {createMockRaf} from '../helpers/raf';
-import MDCSimpleMenuFoundation from '../../../packages/mdc-menu/simple/foundation';
-import {cssClasses, strings, numbers} from '../../../packages/mdc-menu/simple/constants';
+import {MDCSimpleMenuFoundation} from '../../../packages/mdc-menu/simple/foundation';
+import {cssClasses, strings, numbers, Corner} from '../../../packages/mdc-menu/simple/constants';
 
 function setupTest() {
   const {foundation, mockAdapter} = setupFoundationTest(MDCSimpleMenuFoundation);
   const size = {width: 500, height: 200};
-  const itemYParams = {top: 100, height: 20};
-  td.when(mockAdapter.hasClass('mdc-simple-menu')).thenReturn(true);
-  td.when(mockAdapter.hasClass('mdc-simple-menu--open')).thenReturn(false);
+  td.when(mockAdapter.hasClass(cssClasses.ROOT)).thenReturn(true);
+  td.when(mockAdapter.hasClass(cssClasses.OPEN)).thenReturn(false);
   td.when(mockAdapter.hasNecessaryDom()).thenReturn(true);
   td.when(mockAdapter.getNumberOfItems()).thenReturn(1);
   td.when(mockAdapter.getInnerDimensions()).thenReturn(size);
-  td.when(mockAdapter.getYParamsForItemAtIndex(0)).thenReturn(itemYParams);
 
   return {foundation, mockAdapter};
 }
 
+// Various anchor dimensions.
+const smallTopLeft = {height: 20, width: 40, top: 20, bottom: 40, left: 20, right: 60};
+const smallBottomLeft = {height: 20, width: 40, top: 920, bottom: 940, left: 20, right: 60};
+const smallBottomRight = {height: 20, width: 40, top: 920, bottom: 940, left: 920, right: 960};
+const smallCenter = {height: 20, width: 40, top: 490, bottom: 510, left: 480, right: 520};
+const smallAboveMiddleLeft = {height: 20, width: 40, top: 400, bottom: 420, left: 20, right: 60};
+const smallBelowMiddleLeft = {height: 20, width: 40, top: 600, bottom: 620, left: 20, right: 60};
+const wideCenter = {height: 20, width: 150, top: 490, bottom: 510, left: 450, right: 600};
+const wideTopLeft = {height: 20, width: 150, top: 20, bottom: 40, left: 20, right: 170};
+
+/**
+ * Initializes viewport, anchor and menu dimensions. Viewport is 1000x1000. Default menu size is 100x200.
+ * @param {Object} mockAdapter Mock double for the adapter.
+ * @param {{height:number, width: number, top: number, bottom: number, left: number, right: number}} anchorDimensions
+ *   Approximate viewport corner where anchor is located.
+ * @param {boolean=} isRtl Indicates whether layout is RTL.
+ * @param {number=} menuHeight Optional height of the menu.
+ */
+function initAnchorLayout(mockAdapter, anchorDimensions, isRtl = false, menuHeight = 200) {
+  td.when(mockAdapter.hasAnchor()).thenReturn(true);
+  td.when(mockAdapter.getWindowDimensions()).thenReturn({height: 1000, width: 1000});
+  td.when(mockAdapter.getAnchorDimensions()).thenReturn(anchorDimensions);
+  td.when(mockAdapter.isRtl()).thenReturn(isRtl);
+  td.when(mockAdapter.getInnerDimensions()).thenReturn({height: menuHeight, width: 100});
+}
+
 function testFoundation(desc, runTests) {
   test(desc, () => {
     const {mockAdapter, foundation} = setupTest();
@@ -62,19 +86,18 @@ test('exports numbers', () => {
 
 test('defaultAdapter returns a complete adapter implementation', () => {
   verifyDefaultAdapter(MDCSimpleMenuFoundation, [
-    'addClass', 'removeClass', 'hasClass', 'hasNecessaryDom', 'getAttributeForEventTarget',
-    'eventTargetHasClass', 'getInnerDimensions', 'hasAnchor', 'getAnchorDimensions', 'getWindowDimensions',
-    'setScale', 'setInnerScale', 'getNumberOfItems', 'registerInteractionHandler', 'deregisterInteractionHandler',
-    'registerBodyClickHandler', 'deregisterBodyClickHandler', 'getYParamsForItemAtIndex',
-    'setTransitionDelayForItemAtIndex', 'getIndexForEventTarget', 'notifySelected', 'notifyCancel', 'saveFocus',
+    'addClass', 'removeClass', 'hasClass', 'hasNecessaryDom', 'getAttributeForEventTarget', 'eventTargetHasClass',
+    'getInnerDimensions', 'hasAnchor', 'getAnchorDimensions', 'getWindowDimensions',
+    'getNumberOfItems', 'registerInteractionHandler', 'deregisterInteractionHandler', 'registerBodyClickHandler',
+    'deregisterBodyClickHandler', 'getIndexForEventTarget', 'notifySelected', 'notifyCancel', 'saveFocus',
     'restoreFocus', 'isFocused', 'focus', 'getFocusedItemIndex', 'focusItemAtIndex', 'isRtl', 'setTransformOrigin',
-    'setPosition', 'getAccurateTime',
+    'setPosition', 'setMaxHeight',
   ]);
 });
 
 test('#init throws error when the root class is not present', () => {
   const mockAdapter = td.object(MDCSimpleMenuFoundation.defaultAdapter);
-  td.when(mockAdapter.hasClass('mdc-simple-menu')).thenReturn(false);
+  td.when(mockAdapter.hasClass(cssClasses.ROOT)).thenReturn(false);
 
   const foundation = new MDCSimpleMenuFoundation(mockAdapter);
   assert.throws(() => foundation.init());
@@ -82,194 +105,332 @@ test('#init throws error when the root class is not present', () => {
 
 test('#init throws error when the necessary DOM is not present', () => {
   const mockAdapter = td.object(MDCSimpleMenuFoundation.defaultAdapter);
-  td.when(mockAdapter.hasClass('mdc-simple-menu')).thenReturn(true);
+  td.when(mockAdapter.hasClass(cssClasses.ROOT)).thenReturn(true);
   td.when(mockAdapter.hasNecessaryDom()).thenReturn(false);
 
   const foundation = new MDCSimpleMenuFoundation(mockAdapter);
   assert.throws(() => foundation.init());
 });
 
-testFoundation('#open adds the animation class to start an animation', ({foundation, mockAdapter, mockRaf}) => {
-  foundation.open();
-  mockRaf.flush();
-  mockRaf.flush();
-  td.verify(mockAdapter.addClass('mdc-simple-menu--animating'));
-});
+testFoundation('#open adds the animation class to start an animation',
+  ({foundation, mockAdapter}) => {
+    foundation.open();
+    td.verify(mockAdapter.addClass(cssClasses.ANIMATING_OPEN));
+  });
 
 testFoundation('#open adds the open class to the menu', ({foundation, mockAdapter, mockRaf}) => {
-  td.when(mockAdapter.hasClass('mdc-simple-menu--open-from-bottom-right')).thenReturn(true);
-
   foundation.open();
   mockRaf.flush();
   mockRaf.flush();
-  td.verify(mockAdapter.addClass('mdc-simple-menu--open'));
+  td.verify(mockAdapter.addClass(cssClasses.OPEN));
 });
 
 testFoundation('#open removes the animation class at the end of the animation',
   ({foundation, mockAdapter, mockRaf}) => {
-    td.when(mockAdapter.getAccurateTime()).thenReturn(0);
-    td.when(mockAdapter.hasClass('mdc-simple-menu--open-from-top-right')).thenReturn(true);
-
+    const clock = lolex.install();
     foundation.open();
+    td.verify(mockAdapter.addClass(cssClasses.ANIMATING_OPEN));
     mockRaf.flush();
+    td.verify(mockAdapter.addClass(cssClasses.OPEN));
+    clock.tick(numbers.TRANSITION_OPEN_DURATION);
     mockRaf.flush();
-    td.verify(mockAdapter.addClass('mdc-simple-menu--animating'));
-
-    td.when(mockAdapter.getAccurateTime()).thenReturn(500);
-    mockRaf.flush();
-    mockRaf.flush();
-    td.verify(mockAdapter.removeClass('mdc-simple-menu--animating'));
+    td.verify(mockAdapter.removeClass(cssClasses.ANIMATING_OPEN));
   });
 
-testFoundation('#open focuses the menu at the end of the animation', ({foundation, mockAdapter, mockRaf}) => {
-  td.when(mockAdapter.getAccurateTime()).thenReturn(0);
-
+testFoundation('#open focuses the menu after open.', ({foundation, mockAdapter, mockRaf}) => {
   foundation.open();
   mockRaf.flush();
-  mockRaf.flush();
-
-  td.when(mockAdapter.getAccurateTime()).thenReturn(500);
-  mockRaf.flush();
   td.verify(mockAdapter.focus());
 });
 
 testFoundation('#open on a not focused menu does not focust at index 0', ({foundation, mockAdapter, mockRaf}) => {
   td.when(mockAdapter.isFocused()).thenReturn(true);
-  td.when(mockAdapter.getAccurateTime()).thenReturn(0);
 
   foundation.open();
   mockRaf.flush();
-  mockRaf.flush();
-
-  td.when(mockAdapter.getAccurateTime()).thenReturn(500);
-  mockRaf.flush();
   td.verify(mockAdapter.focusItemAtIndex(0), {times: 0});
 });
 
-testFoundation('#open anchors the menu on the top left in LTR, given enough room',
+/** Testing various layout cases for autopositioning */
+testFoundation('#open from small anchor in center of viewport, default (TOP_START) anchor corner, RTL',
   ({foundation, mockAdapter, mockRaf}) => {
-    td.when(mockAdapter.hasAnchor()).thenReturn(true);
-    td.when(mockAdapter.isRtl()).thenReturn(false);
-    td.when(mockAdapter.getInnerDimensions()).thenReturn({height: 200, width: 100});
-    td.when(mockAdapter.getWindowDimensions()).thenReturn({height: 1000, width: 1000});
-    td.when(mockAdapter.getAnchorDimensions()).thenReturn({
-      height: 20, width: 40, top: 20, bottom: 40, left: 20, right: 60,
-    });
-    td.when(mockAdapter.getAccurateTime()).thenReturn(0);
+    initAnchorLayout(mockAdapter, smallCenter, true);
+    foundation.open();
+    mockRaf.flush();
+    td.verify(mockAdapter.setTransformOrigin('right top'));
+    td.verify(mockAdapter.setPosition({right: '0', top: '0'}));
+  });
+
+testFoundation('#open from small anchor in center of viewport, TOP_END anchor corner, RTL',
+  ({foundation, mockAdapter, mockRaf}) => {
+    initAnchorLayout(mockAdapter, smallCenter, true);
+    foundation.setAnchorCorner(Corner.TOP_END);
+    foundation.open();
+    mockRaf.flush();
+    td.verify(mockAdapter.setTransformOrigin('right top'));
+    td.verify(mockAdapter.setPosition({right: '40px', top: '0'}));
+  });
 
+testFoundation('#open from small anchor in center of viewport, BOTTOM_START anchor corner, RTL',
+  ({foundation, mockAdapter, mockRaf}) => {
+    initAnchorLayout(mockAdapter, smallCenter, true);
+    foundation.setAnchorCorner(Corner.BOTTOM_START);
     foundation.open();
     mockRaf.flush();
+    td.verify(mockAdapter.setTransformOrigin('right top'));
+    td.verify(mockAdapter.setPosition({right: '0', top: '20px'}));
+  });
+
+testFoundation('#open from small anchor in center of viewport, BOTTOM_END anchor corner, RTL',
+  ({foundation, mockAdapter, mockRaf}) => {
+    initAnchorLayout(mockAdapter, smallCenter, true);
+    foundation.setAnchorCorner(Corner.BOTTOM_END);
+    foundation.open();
     mockRaf.flush();
+    td.verify(mockAdapter.setTransformOrigin('right top'));
+    td.verify(mockAdapter.setPosition({right: '40px', top: '20px'}));
+  });
 
-    td.when(mockAdapter.getAccurateTime()).thenReturn(500);
+testFoundation('#open from small anchor in top left of viewport, default (TOP_START) anchor corner, LTR',
+  ({foundation, mockAdapter, mockRaf}) => {
+    initAnchorLayout(mockAdapter, smallTopLeft);
+    foundation.open();
     mockRaf.flush();
-    td.verify(mockAdapter.setTransformOrigin('top left'));
+    td.verify(mockAdapter.setTransformOrigin('left top'));
     td.verify(mockAdapter.setPosition({left: '0', top: '0'}));
   });
 
-testFoundation('#open anchors the menu on the top right in LTR when close to the right edge',
+testFoundation('#open from small anchor in top left of viewport, TOP_END anchor corner, LTR',
   ({foundation, mockAdapter, mockRaf}) => {
-    td.when(mockAdapter.hasAnchor()).thenReturn(true);
-    td.when(mockAdapter.isRtl()).thenReturn(false);
-    td.when(mockAdapter.getInnerDimensions()).thenReturn({height: 200, width: 100});
-    td.when(mockAdapter.getWindowDimensions()).thenReturn({height: 1000, width: 1000});
-    td.when(mockAdapter.getAnchorDimensions()).thenReturn({
-      height: 20, width: 40, top: 20, bottom: 40, left: 950, right: 990,
-    });
-    td.when(mockAdapter.getAccurateTime()).thenReturn(0);
+    initAnchorLayout(mockAdapter, smallTopLeft);
+    foundation.setAnchorCorner(Corner.TOP_END);
+    foundation.open();
+    mockRaf.flush();
+    td.verify(mockAdapter.setTransformOrigin('left top'));
+    td.verify(mockAdapter.setPosition({left: '40px', top: '0'}));
+  });
 
+testFoundation('#open from small anchor in top left of viewport, BOTTOM_START anchor corner, LTR',
+  ({foundation, mockAdapter, mockRaf}) => {
+    initAnchorLayout(mockAdapter, smallTopLeft);
+    foundation.setAnchorCorner(Corner.BOTTOM_START);
     foundation.open();
     mockRaf.flush();
+    td.verify(mockAdapter.setTransformOrigin('left top'));
+    td.verify(mockAdapter.setPosition({left: '0', top: '20px'}));
+  });
+
+testFoundation('#open from small anchor in top left of viewport, BOTTOM_END anchor corner, LTR',
+  ({foundation, mockAdapter, mockRaf}) => {
+    initAnchorLayout(mockAdapter, smallTopLeft);
+    foundation.setAnchorCorner(Corner.BOTTOM_END);
+    foundation.open();
     mockRaf.flush();
+    td.verify(mockAdapter.setTransformOrigin('left top'));
+    td.verify(mockAdapter.setPosition({left: '40px', top: '20px'}));
+  });
 
-    td.when(mockAdapter.getAccurateTime()).thenReturn(500);
+testFoundation('#open from small anchor in right bottom of viewport, default (TOP_START) anchor corner, LTR',
+  ({foundation, mockAdapter, mockRaf}) => {
+    initAnchorLayout(mockAdapter, smallBottomRight);
+    foundation.open();
     mockRaf.flush();
-    td.verify(mockAdapter.setTransformOrigin('top right'));
-    td.verify(mockAdapter.setPosition({right: '0', top: '0'}));
+    td.verify(mockAdapter.setTransformOrigin('right bottom'));
+    td.verify(mockAdapter.setPosition({right: '0', bottom: '0'}));
+  });
+
+testFoundation('#open from small anchor in right bottom of viewport, TOP_END anchor corner, LTR',
+  ({foundation, mockAdapter, mockRaf}) => {
+    initAnchorLayout(mockAdapter, smallBottomRight);
+    foundation.setAnchorCorner(Corner.TOP_END);
+    foundation.open();
+    mockRaf.flush();
+    td.verify(mockAdapter.setTransformOrigin('right bottom'));
+    td.verify(mockAdapter.setPosition({right: '40px', bottom: '0'}));
+  });
+
+testFoundation('#open from small anchor in right bottom of viewport, BOTTOM_START anchor corner, LTR',
+  ({foundation, mockAdapter, mockRaf}) => {
+    initAnchorLayout(mockAdapter, smallBottomRight);
+    foundation.setAnchorCorner(Corner.BOTTOM_START);
+    foundation.open();
+    mockRaf.flush();
+    td.verify(mockAdapter.setTransformOrigin('right bottom'));
+    td.verify(mockAdapter.setPosition({right: '0', bottom: '20px'}));
   });
 
-testFoundation('#open anchors the menu on the top right in RTL, given enough room',
+testFoundation('#open from small anchor in right bottom of viewport, BOTTOM_END anchor corner, LTR',
   ({foundation, mockAdapter, mockRaf}) => {
-    td.when(mockAdapter.hasAnchor()).thenReturn(true);
-    td.when(mockAdapter.isRtl()).thenReturn(true);
-    td.when(mockAdapter.getInnerDimensions()).thenReturn({height: 200, width: 100});
-    td.when(mockAdapter.getWindowDimensions()).thenReturn({height: 1000, width: 1000});
-    td.when(mockAdapter.getAnchorDimensions()).thenReturn({
-      height: 20, width: 40, top: 20, bottom: 40, left: 500, right: 540,
-    });
-    td.when(mockAdapter.getAccurateTime()).thenReturn(0);
+    initAnchorLayout(mockAdapter, smallBottomRight);
+    foundation.setAnchorCorner(Corner.BOTTOM_END);
+    foundation.open();
+    mockRaf.flush();
+    td.verify(mockAdapter.setTransformOrigin('right bottom'));
+    td.verify(mockAdapter.setPosition({right: '40px', bottom: '20px'}));
+  });
 
+testFoundation('#open from small anchor in left bottom of viewport, default (TOP_START) anchor corner, RTL',
+  ({foundation, mockAdapter, mockRaf}) => {
+    initAnchorLayout(mockAdapter, smallBottomLeft, true);
     foundation.open();
     mockRaf.flush();
+    td.verify(mockAdapter.setTransformOrigin('left bottom'));
+    td.verify(mockAdapter.setPosition({left: '0', bottom: '0'}));
+  });
+
+testFoundation('#open from small anchor in left bottom of viewport, TOP_END anchor corner, RTL',
+  ({foundation, mockAdapter, mockRaf}) => {
+    initAnchorLayout(mockAdapter, smallBottomLeft, true);
+    foundation.setAnchorCorner(Corner.TOP_END);
+    foundation.open();
     mockRaf.flush();
+    td.verify(mockAdapter.setTransformOrigin('left bottom'));
+    td.verify(mockAdapter.setPosition({left: '40px', bottom: '0'}));
+  });
 
-    td.when(mockAdapter.getAccurateTime()).thenReturn(500);
+testFoundation('#open from small anchor in left bottom of viewport, BOTTOM_START anchor corner, RTL',
+  ({foundation, mockAdapter, mockRaf}) => {
+    initAnchorLayout(mockAdapter, smallBottomLeft, true);
+    foundation.setAnchorCorner(Corner.BOTTOM_START);
+    foundation.open();
     mockRaf.flush();
-    td.verify(mockAdapter.setTransformOrigin('top right'));
-    td.verify(mockAdapter.setPosition({right: '0', top: '0'}));
+    td.verify(mockAdapter.setTransformOrigin('left bottom'));
+    td.verify(mockAdapter.setPosition({left: '0', bottom: '20px'}));
   });
 
-testFoundation('#open anchors the menu on the top left in RTL when close to the left edge',
+testFoundation('#open from small anchor in left bottom of viewport, BOTTOM_END anchor corner, RTL',
   ({foundation, mockAdapter, mockRaf}) => {
-    td.when(mockAdapter.hasAnchor()).thenReturn(true);
-    td.when(mockAdapter.isRtl()).thenReturn(true);
-    td.when(mockAdapter.getInnerDimensions()).thenReturn({height: 200, width: 100});
-    td.when(mockAdapter.getWindowDimensions()).thenReturn({height: 1000, width: 1000});
-    td.when(mockAdapter.getAnchorDimensions()).thenReturn({
-      height: 20, width: 40, top: 20, bottom: 40, left: 10, right: 50,
-    });
-    td.when(mockAdapter.getAccurateTime()).thenReturn(0);
+    initAnchorLayout(mockAdapter, smallBottomLeft, true);
+    foundation.setAnchorCorner(Corner.BOTTOM_END);
+    foundation.open();
+    mockRaf.flush();
+    td.verify(mockAdapter.setTransformOrigin('left bottom'));
+    td.verify(mockAdapter.setPosition({left: '40px', bottom: '20px'}));
+  });
 
+testFoundation('#open tall menu from small anchor in left above middle of viewport, BOTTOM_START anchor corner, LTR',
+  ({foundation, mockAdapter, mockRaf}) => {
+    initAnchorLayout(mockAdapter, smallAboveMiddleLeft, false, 700);
+    foundation.setAnchorCorner(Corner.BOTTOM_START);
     foundation.open();
     mockRaf.flush();
+    td.verify(mockAdapter.setTransformOrigin('left top'));
+    td.verify(mockAdapter.setPosition({left: '0', top: '20px'}));
+    td.verify(mockAdapter.setMaxHeight('580px'));
+  });
+
+testFoundation('#open tall menu from small anchor in left above middle of viewport, TOP_START anchor corner, LTR',
+  ({foundation, mockAdapter, mockRaf}) => {
+    initAnchorLayout(mockAdapter, smallAboveMiddleLeft, false, 700);
+    foundation.setAnchorCorner(Corner.TOP_START);
+    foundation.open();
     mockRaf.flush();
+    td.verify(mockAdapter.setTransformOrigin('left 14.29%'));
+    td.verify(mockAdapter.setPosition({left: '0', top: '-100px'}));
+  });
 
-    td.when(mockAdapter.getAccurateTime()).thenReturn(500);
+testFoundation('#open tall menu from small anchor in left below middle of viewport, BOTTOM_START anchor corner, LTR',
+  ({foundation, mockAdapter, mockRaf}) => {
+    initAnchorLayout(mockAdapter, smallBelowMiddleLeft, false, 700);
+    foundation.setAnchorCorner(Corner.BOTTOM_START);
+    foundation.open();
     mockRaf.flush();
-    td.verify(mockAdapter.setTransformOrigin('top left'));
-    td.verify(mockAdapter.setPosition({left: '0', top: '0'}));
+    td.verify(mockAdapter.setTransformOrigin('left bottom'));
+    td.verify(mockAdapter.setPosition({left: '0', bottom: '20px'}));
+    td.verify(mockAdapter.setMaxHeight('600px'));
+  });
+
+testFoundation('#open tall menu from small anchor in left above middle of viewport, TOP_START anchor corner, LTR',
+  ({foundation, mockAdapter, mockRaf}) => {
+    initAnchorLayout(mockAdapter, smallBelowMiddleLeft, false, 700);
+    foundation.setAnchorCorner(Corner.TOP_START);
+    foundation.open();
+    mockRaf.flush();
+    td.verify(mockAdapter.setTransformOrigin('left 88.57%'));
+    td.verify(mockAdapter.setPosition({left: '0', bottom: '-80px'}));
   });
 
-testFoundation('#open anchors the menu on the bottom left in LTR when close to the bottom edge',
+testFoundation('#open from wide anchor center of viewport, TOP_START anchor corner, LTR',
   ({foundation, mockAdapter, mockRaf}) => {
-    td.when(mockAdapter.hasAnchor()).thenReturn(true);
-    td.when(mockAdapter.isRtl()).thenReturn(false);
-    td.when(mockAdapter.getInnerDimensions()).thenReturn({height: 200, width: 100});
-    td.when(mockAdapter.getWindowDimensions()).thenReturn({height: 1000, width: 1000});
-    td.when(mockAdapter.getAnchorDimensions()).thenReturn({
-      height: 20, width: 40, top: 900, bottom: 920, left: 10, right: 50,
-    });
-    td.when(mockAdapter.getAccurateTime()).thenReturn(0);
+    initAnchorLayout(mockAdapter, wideCenter);
+    foundation.setAnchorCorner(Corner.TOP_START);
+    foundation.open();
+    mockRaf.flush();
+    td.verify(mockAdapter.setTransformOrigin('center top'));
+    td.verify(mockAdapter.setPosition({left: '0', top: '0'}));
+  });
 
+testFoundation('#open from wide anchor center of viewport, TOP_END anchor corner, LTR',
+  ({foundation, mockAdapter, mockRaf}) => {
+    initAnchorLayout(mockAdapter, wideCenter);
+    foundation.setAnchorCorner(Corner.TOP_END);
     foundation.open();
     mockRaf.flush();
+    td.verify(mockAdapter.setTransformOrigin('center top'));
+    td.verify(mockAdapter.setPosition({left: '150px', top: '0'}));
+  });
+
+testFoundation('#open from wide anchor center of viewport, BOTTOM_START anchor corner, RTL',
+  ({foundation, mockAdapter, mockRaf}) => {
+    initAnchorLayout(mockAdapter, wideCenter, true);
+    foundation.setAnchorCorner(Corner.BOTTOM_START);
+    foundation.open();
     mockRaf.flush();
+    td.verify(mockAdapter.setTransformOrigin('center top'));
+    td.verify(mockAdapter.setPosition({right: '0', top: '20px'}));
+  });
 
-    td.when(mockAdapter.getAccurateTime()).thenReturn(500);
+testFoundation('#open from wide anchor center of viewport, BOTTOM_END anchor corner, RTL',
+  ({foundation, mockAdapter, mockRaf}) => {
+    initAnchorLayout(mockAdapter, wideCenter, true);
+    foundation.setAnchorCorner(Corner.BOTTOM_END);
+    foundation.open();
     mockRaf.flush();
-    td.verify(mockAdapter.setTransformOrigin('bottom left'));
-    td.verify(mockAdapter.setPosition({left: '0', bottom: '0'}));
+    td.verify(mockAdapter.setTransformOrigin('center top'));
+    td.verify(mockAdapter.setPosition({right: '150px', top: '20px'}));
   });
 
-testFoundation('#open anchors the menu on the top left in LTR when not close to the bottom edge',
+testFoundation('#open from wide anchor top left of viewport, TOP_END anchor corner, RTL',
   ({foundation, mockAdapter, mockRaf}) => {
-    td.when(mockAdapter.hasAnchor()).thenReturn(true);
-    td.when(mockAdapter.isRtl()).thenReturn(false);
-    td.when(mockAdapter.getInnerDimensions()).thenReturn({height: 200, width: 100});
-    td.when(mockAdapter.getWindowDimensions()).thenReturn({height: 1000, width: 1000});
-    td.when(mockAdapter.getAnchorDimensions()).thenReturn({
-      height: 20, width: 40, top: 900, bottom: 20, left: 10, right: 50,
-    });
-    td.when(mockAdapter.getAccurateTime()).thenReturn(0);
+    initAnchorLayout(mockAdapter, wideTopLeft, true);
+    foundation.setAnchorCorner(Corner.TOP_END);
+    foundation.open();
+    mockRaf.flush();
+    td.verify(mockAdapter.setTransformOrigin('center top'));
+    td.verify(mockAdapter.setPosition({left: '150px', top: '0'}));
+  });
 
+testFoundation('#open anchors the menu to the bottom left in LTR when not close to the bottom edge with margin',
+  ({foundation, mockAdapter, mockRaf}) => {
+    initAnchorLayout(mockAdapter, smallTopLeft);
+    foundation.setAnchorCorner(Corner.BOTTOM_START);
+    foundation.setAnchorMargin({left: 7, bottom: 10});
     foundation.open();
     mockRaf.flush();
+    td.verify(mockAdapter.setTransformOrigin('left top'));
+    td.verify(mockAdapter.setPosition({left: '7px', top: '30px'}));
+  });
+
+testFoundation('#open anchors the menu to the bottom left in LTR when close to the bottom edge with margin',
+  ({foundation, mockAdapter, mockRaf}) => {
+    initAnchorLayout(mockAdapter, smallBottomLeft);
+    foundation.setAnchorCorner(Corner.BOTTOM_START);
+    foundation.setAnchorMargin({top: 5, left: 7, bottom: 10});
+    foundation.open();
     mockRaf.flush();
+    td.verify(mockAdapter.setTransformOrigin('left bottom'));
+    td.verify(mockAdapter.setPosition({left: '7px', bottom: '15px'}));
+  });
 
-    td.when(mockAdapter.getAccurateTime()).thenReturn(500);
+testFoundation('#open anchors the menu to the bottom left in RTL when close to the bottom and right edge with margin',
+  ({foundation, mockAdapter, mockRaf}) => {
+    initAnchorLayout(mockAdapter, smallBottomRight, true);
+    foundation.setAnchorCorner(Corner.BOTTOM_START);
+    foundation.setAnchorMargin({top: 5, bottom: 10, right: 7});
+    foundation.open();
     mockRaf.flush();
-    td.verify(mockAdapter.setTransformOrigin('top left'));
-    td.verify(mockAdapter.setPosition({left: '0', top: '0'}));
+    td.verify(mockAdapter.setTransformOrigin('right bottom'));
+    td.verify(mockAdapter.setPosition({right: '7px', bottom: '15px'}));
   });
 
 testFoundation('#close does nothing if event target has aria-disabled set to true',
@@ -287,37 +448,28 @@ testFoundation('#close does nothing if event target has aria-disabled set to tru
     td.verify(mockAdapter.deregisterBodyClickHandler(td.matchers.anything()), {times: 0});
   });
 
-testFoundation('#close adds the animation class to start an animation', ({foundation, mockAdapter, mockRaf}) => {
+testFoundation('#close adds the animation class to start an animation', ({foundation, mockAdapter}) => {
   foundation.close();
-  mockRaf.flush();
-  mockRaf.flush();
-  td.verify(mockAdapter.addClass('mdc-simple-menu--animating'));
+  td.verify(mockAdapter.addClass(cssClasses.ANIMATING_CLOSED));
 });
 
 testFoundation('#close removes the open class from the menu', ({foundation, mockAdapter, mockRaf}) => {
-  td.when(mockAdapter.hasClass('mdc-simple-menu--open')).thenReturn(true);
-  td.when(mockAdapter.hasClass('mdc-simple-menu--open-from-bottom-left')).thenReturn(true);
-
   foundation.close();
   mockRaf.flush();
   mockRaf.flush();
-  td.verify(mockAdapter.removeClass('mdc-simple-menu--open'));
+  td.verify(mockAdapter.removeClass(cssClasses.OPEN));
 });
 
 testFoundation('#close removes the animation class at the end of the animation',
   ({foundation, mockAdapter, mockRaf}) => {
-    td.when(mockAdapter.getAccurateTime()).thenReturn(0);
-    td.when(mockAdapter.hasClass('mdc-simple-menu--open')).thenReturn(true);
-    td.when(mockAdapter.hasClass('mdc-simple-menu--open-from-bottom-right')).thenReturn(true);
-
+    const clock = lolex.install();
     foundation.close();
     mockRaf.flush();
     mockRaf.flush();
-    td.verify(mockAdapter.addClass('mdc-simple-menu--animating'));
-
-    td.when(mockAdapter.getAccurateTime()).thenReturn(500);
+    td.verify(mockAdapter.addClass(cssClasses.ANIMATING_CLOSED));
+    clock.tick(numbers.TRANSITION_OPEN_DURATION);
     mockRaf.flush();
-    td.verify(mockAdapter.removeClass('mdc-simple-menu--animating'));
+    td.verify(mockAdapter.removeClass(cssClasses.ANIMATING_CLOSED));
   });
 
 test('#isOpen returns true when the menu is open', () => {
@@ -336,7 +488,7 @@ test('#isOpen returns false when the menu is closed', () => {
 
 test('#isOpen returns true when the menu is initiated with the open class present', () => {
   const {foundation, mockAdapter} = setupTest();
-  td.when(mockAdapter.hasClass('mdc-simple-menu--open')).thenReturn(true);
+  td.when(mockAdapter.hasClass(cssClasses.OPEN)).thenReturn(true);
 
   foundation.init();
   assert.isOk(foundation.isOpen());
@@ -344,7 +496,7 @@ test('#isOpen returns true when the menu is initiated with the open class presen
 
 test('#isOpen returns false when the menu is initiated without the open class present', () => {
   const {foundation, mockAdapter} = setupTest();
-  td.when(mockAdapter.hasClass('mdc-simple-menu--open')).thenReturn(false);
+  td.when(mockAdapter.hasClass(cssClasses.OPEN)).thenReturn(false);
 
   foundation.init();
   assert.isNotOk(foundation.isOpen());
@@ -900,7 +1052,7 @@ testFoundation('should cancel animation after destroy', ({foundation, mockAdapte
   mockRaf.flush();
 
   td.verify(
-    mockAdapter.setScale(td.matchers.anything(), td.matchers.anything()),
+    mockAdapter.setPosition(td.matchers.anything()),
     {times: 0}
   );
 });
diff --git a/test/unit/mdc-select/foundation-events.test.js b/test/unit/mdc-select/foundation-events.test.js
index badb512542a..47c39081d6f 100644
--- a/test/unit/mdc-select/foundation-events.test.js
+++ b/test/unit/mdc-select/foundation-events.test.js
@@ -20,6 +20,7 @@ import td from 'testdouble';
 import {setupFoundationTest} from '../helpers/setup';
 import {captureHandlers} from '../helpers/foundation';
 import {strings as menuStrings} from '../../../packages/mdc-menu/simple/constants';
+import {createMockRaf} from '../helpers/raf';
 
 import MDCSelectFoundation from '../../../packages/mdc-select/foundation';
 
@@ -55,23 +56,29 @@ suite('MDCSelectFoundation - Events');
 
 test('on click opens the menu', () => {
   const {mockAdapter, handlers} = setupTest();
+  const raf = createMockRaf();
   handlers.click(createEvent());
   td.verify(mockAdapter.addClass(cssClasses.OPEN));
+  raf.flush();
   td.verify(mockAdapter.openMenu(0));
 });
 
 test('on click does not open the menu if it is already open', () => {
   const {mockAdapter, handlers} = setupTest();
+  const raf = createMockRaf();
   td.when(mockAdapter.isMenuOpen()).thenReturn(true);
   handlers.click(createEvent());
   td.verify(mockAdapter.addClass(cssClasses.OPEN), {times: 0});
+  raf.flush();
   td.verify(mockAdapter.openMenu(0), {times: 0});
 });
 
 test('on click opens the menu focused at the selected index, if any', () => {
   const {foundation, mockAdapter, handlers} = setupTest();
+  const raf = createMockRaf();
   foundation.setSelectedIndex(1);
   handlers.click(createEvent());
+  raf.flush();
   td.verify(mockAdapter.openMenu(1));
 });
 
@@ -85,8 +92,10 @@ test('on click cancels the event to prevent it from propagating', () => {
 test('on ArrowUp keydown on the select itself opens the menu', () => {
   const {mockAdapter, handlers} = setupTest();
   const evt = createEvent({key: 'ArrowUp', eventPhase: Event.AT_TARGET});
+  const raf = createMockRaf();
   handlers.keydown(evt);
   td.verify(mockAdapter.addClass(cssClasses.OPEN));
+  raf.flush();
   td.verify(mockAdapter.openMenu(0));
   td.verify(evt.preventDefault());
 });
@@ -108,8 +117,10 @@ test('on ArrowUp keydown does not open the menu on bubbled events', () => {
 test('on ArrowDown keydown on the select itself opens the menu', () => {
   const {mockAdapter, handlers} = setupTest();
   const evt = createEvent({key: 'ArrowDown', eventPhase: Event.AT_TARGET});
+  const raf = createMockRaf();
   handlers.keydown(evt);
   td.verify(mockAdapter.addClass(cssClasses.OPEN));
+  raf.flush();
   td.verify(mockAdapter.openMenu(0));
   td.verify(evt.preventDefault());
 });
@@ -145,8 +156,10 @@ test('on Space keydown works with keyCode', () => {
 test('on Space keyup on the select itself opens the menu', () => {
   const {mockAdapter, handlers} = setupTest();
   const evt = createEvent({key: 'Space', eventPhase: Event.AT_TARGET});
+  const raf = createMockRaf();
   handlers.keyup(evt);
   td.verify(mockAdapter.addClass(cssClasses.OPEN));
+  raf.flush();
   td.verify(mockAdapter.openMenu(0));
   td.verify(evt.preventDefault());
 });