Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/mdl-ext/src/demo/chrome-ripple-issue.html b/node_modules/mdl-ext/src/demo/chrome-ripple-issue.html
new file mode 100644
index 0000000..363a295
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/chrome-ripple-issue.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Chrome Ripple Issue</title>
+ <!-- styles -->
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
+ <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+ <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
+</head>
+<body>
+<!-- Always shows a header, even in smaller screens. -->
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+ <header class="mdl-layout__header">
+ <div class="mdl-layout__header-row">
+ <!-- Title -->
+ <span class="mdl-layout-title">Title</span>
+ <!-- Add spacer, to align navigation to the right -->
+ <div class="mdl-layout-spacer"></div>
+ <!-- Navigation. We hide it in small screens. -->
+ <nav class="mdl-navigation mdl-layout--large-screen-only">
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ </nav>
+ </div>
+ </header>
+ <div class="mdl-layout__drawer">
+ <span class="mdl-layout-title">Title</span>
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ </nav>
+ </div>
+ <main class="mdl-layout__content">
+ <div class="page-content" style="padding: 128px 0 0 32px"><!-- Your content goes here -->
+
+ <h2>Ripple Issue</h2>
+ <ul>
+ <li>What MDL Version: material-design-lite-1.2.1</li>
+ <li>What browser(s) is this bug affecting (including version)? Chrome Version 53.0.2785.116 (64-bit)</li>
+ <li>What OS (and version) are you using? OSX, 10.11.6</li>
+ <li>What are the steps to reproduce the bug?
+ <ol>
+ <li>Resize browser until a scrollbar appears</li>
+ <li>Scroll the menu button into view</li>
+ <li>It's important to scroll, at least some pixels, to see the effect of this issue</li>
+ <li>Click the button to open the menu</li>
+ <li>The position of the content changes position while button ripple is animatings</li>
+ <li>Click on a menu item to close the menu</li>
+ <li>The position of the content changes while menu ripple is animating</li>
+ </ol>
+ </li>
+ <li>What is the expected behavior? The position of the should stay fixed</li>
+ <li>What is the actual behavior? The position of the page content changes</li>
+ </ul>
+
+ <div style="margin: 32px 0 640px 32px;">
+ <p><strong>Click the button</strong></p>
+ <button id="demo-menu-lower-left" style="height:46px; width:46px;"
+ class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect">
+ <i class="material-icons">more_vert</i>
+ </button>
+
+ <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
+ for="demo-menu-lower-left">
+ <li class="mdl-menu__item">Some Action</li>
+ <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
+ <li disabled class="mdl-menu__item">Disabled Action</li>
+ <li class="mdl-menu__item">Yet Another Action</li>
+ </ul>
+ </div>
+
+ <p>Some text</p>
+
+ </div>
+ </main>
+</div>
+<script src="https://code.getmdl.io/1.2.1/material.min.js" type="text/javascript" charset="utf-8"></script>
+</body>
+</html>