Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/dialog-polyfill/tests/actionbar.html b/node_modules/dialog-polyfill/tests/actionbar.html
new file mode 100644
index 0000000..3af6c75
--- /dev/null
+++ b/node_modules/dialog-polyfill/tests/actionbar.html
@@ -0,0 +1,188 @@
+<!DOCTYPE html>
+<html>
+<meta name="viewport" content="initial-scale=1" />
+<meta charset="UTF-8" />
+<head>
+ <script src="../dist/dialog-polyfill.js"></script>
+ <link rel="stylesheet" type="text/css" href="../dist/dialog-polyfill.css">
+ <style>
+
+ dialog.actionbar {
+ position: fixed;
+ border: 0;
+ box-sizing: border-box;
+ width: 100%;
+ bottom: 0;
+ background: #fff;
+ transform: translate(0, 100%);
+ transition: transform 0.25s ease-in-out;
+ margin: 0;
+ padding: 0;
+ box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
+ }
+ dialog.actionbar.appear {
+ transform: translate(0);
+ }
+
+ dialog.actionbar .holder {
+ display: flex;
+ justify-content: space-around;
+ flex-flow: wrap;
+ }
+ dialog.actionbar .holder button {
+ flex-grow: 1;
+ min-width: 200px;
+ margin: 8px;
+ border: 0;
+ font-family: Roboto, Arial, Sans-Serif;
+ font-size: 23px;
+ line-height: 33px;
+ font-weight: 400;
+ color: #666;
+ border-radius: 2px;
+ background: #ccc;
+ display: block;
+ box-sizing: border-box;
+ border: 2px solid transparent;
+ }
+ dialog.actionbar .holder button:focus {
+ outline: 0;
+ border-color: rgba(0, 0, 0, 0.125);
+ }
+ dialog.actionbar .holder button.cancel {
+ background: #fcc;
+ }
+
+ dialog.actionbar::backdrop {
+ background: rgba(0, 0, 0, 0.25);
+ opacity: 0;
+ transition: opacity 0.25s ease-in-out;
+ }
+ dialog.actionbar + .backdrop {
+ background: rgba(0, 0, 0, 0.25);
+ opacity: 0;
+ transition: opacity 0.25s ease-in-out;
+ }
+ dialog.actionbar.appear::backdrop {
+ opacity: 1;
+ }
+ dialog.actionbar.appear + .backdrop {
+ opacity: 1;
+ }
+
+ </style>
+</head>
+<body>
+
+<p>Builds an action bar from a modal dialog.</p>
+
+<button id="show">Show</button>
+
+<script>
+
+var ActionBar = function() {
+ this.options_ = [];
+ this.cancelButton_ = true;
+ this.dialog_ = null;
+};
+
+ActionBar.prototype.enableCancelButton = function(value) {
+ this.cancelButton_ = vaue;
+};
+
+ActionBar.prototype.addOption = function(name, opt_callback) {
+ this.options_.push({name: name, callback: opt_callback || null});
+};
+
+ActionBar.prototype.show = function(opt_callback) {
+ if (this.dialog_ != null) {
+ throw "Can't show ActionBar, already visible";
+ }
+
+ var dialog = document.createElement('dialog');
+ if (!('showModal' in dialog)) {
+ dialogPolyfill.registerDialog(dialog);
+ }
+ dialog.className = 'actionbar';
+
+ var holder = document.createElement('div');
+ holder.className = 'holder';
+ dialog.appendChild(holder);
+
+ dialog.addEventListener('click', function(ev) {
+ if (ev.target == dialog) {
+ dialog.close();
+ }
+ });
+
+ dialog.addEventListener('close', function() {
+ opt_callback && opt_callback(dialog.returnValue);
+
+ var cloneDialog = dialog.cloneNode(true);
+ if (!('showModal' in cloneDialog)) {
+ dialogPolyfill.registerDialog(cloneDialog);
+ }
+
+ document.body.appendChild(cloneDialog);
+ cloneDialog.showModal();
+ cloneDialog.classList.remove('appear');
+ window.setTimeout(function() {
+ cloneDialog.close(); // TODO: needed until DOM removal is safe
+ cloneDialog.parentNode.removeChild(cloneDialog);
+ }, 250);
+
+ if (dialog.parentNode) {
+ dialog.parentNode.removeChild(dialog);
+ }
+ if (this.dialog_ == dialog) {
+ this.dialog_ = null;
+ }
+ }.bind(this));
+
+ this.options_.forEach(function(option) {
+ var button = document.createElement('button');
+ button.textContent = option.name;
+ button.addEventListener('click', function() {
+ if (option.callback) {
+ window.setTimeout(option.callback, 0);
+ }
+ dialog.close(option.name);
+ });
+ holder.appendChild(button);
+ });
+
+ if (this.cancelButton_) {
+ var cancelButton = document.createElement('button');
+ cancelButton.className = 'cancel';
+ cancelButton.textContent = 'Cancel';
+ cancelButton.addEventListener('click', function() {
+ dialog.close();
+ });
+ holder.appendChild(cancelButton);
+ }
+
+ document.body.appendChild(dialog);
+ dialog.showModal();
+ dialog.classList.add('appear');
+
+ this.dialog_ = dialog;
+};
+
+////// DEMO
+
+show.addEventListener('click', function() {
+ var ab = new ActionBar();
+ ab.addOption('Display');
+ ab.addOption('Options');
+ ab.addOption('Longer Choice');
+ ab.addOption('Alert', function() {
+ alert('you hit Alert');
+ });
+ ab.show(function(choice) {
+ console.info('choice was', choice);
+ });
+});
+
+</script>
+</body>
+</html>
diff --git a/node_modules/dialog-polyfill/tests/backdrop.html b/node_modules/dialog-polyfill/tests/backdrop.html
new file mode 100644
index 0000000..77c6d81
--- /dev/null
+++ b/node_modules/dialog-polyfill/tests/backdrop.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<meta charset='utf-8'>
+<head>
+<script src="../dist/dialog-polyfill.js"></script>
+<link rel="stylesheet" type="text/css" href="../dist/dialog-polyfill.css">
+<style>
+dialog {
+ height: 100px;
+ width: 100px;
+}
+
+dialog + .backdrop {
+ background-color: rgba(0,255,0,0.5);
+}
+</style>
+</head>
+<body>
+<p>Test for backdrop. The test passes if you see a green background behind the
+box.</p>
+<div id="console"></div>
+<dialog></dialog>
+<button id="inert-button">Can't click me</button>
+<script>
+function writeToConsole(s) {
+ var console = document.getElementById('console');
+ var span = document.createElement('span');
+ span.textContent = s;
+ console.appendChild(span);
+ console.appendChild(document.createElement('br'));
+}
+
+var dialog = document.querySelector('dialog');
+dialogPolyfill.registerDialog(dialog);
+dialog.showModal();
+</script>
+</body>
+</html>
diff --git a/node_modules/dialog-polyfill/tests/dialog-centering.html b/node_modules/dialog-polyfill/tests/dialog-centering.html
new file mode 100644
index 0000000..0eaff60
--- /dev/null
+++ b/node_modules/dialog-polyfill/tests/dialog-centering.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<meta charset='utf-8'>
+<head>
+<script src="../dist/dialog-polyfill.js"></script>
+<link rel="stylesheet" type="text/css" href="../dist/dialog-polyfill.css">
+</head>
+<body>
+<p>Test that dialog is centered in the viewport. The test passes if you see a
+box in the center of the screen.</p>
+<div id="console"></div>
+<dialog>Hello</dialog>
+<script>
+function writeToConsole(s) {
+ var console = document.getElementById('console');
+ var span = document.createElement('span');
+ span.textContent = s;
+ console.appendChild(span);
+ console.appendChild(document.createElement('br'));
+}
+
+function checkCentered(dialog) {
+ var expectedTop = (window.innerHeight - dialog.offsetHeight) / 2;
+ var expectedLeft = (window.innerWidth - dialog.offsetWidth) / 2;
+ var rect = dialog.getBoundingClientRect();
+ if (rect.top == expectedTop && rect.left == expectedLeft) {
+ writeToConsole('SUCCESS');
+ } else {
+ writeToConsole('FAIL: expected dialog top,left to be ' +
+ expectedTop + ',' + expectedLeft + ' and was actually ' +
+ rect.top + ',' + rect.left);
+ }
+}
+
+var dialog = document.querySelector('dialog');
+dialogPolyfill.registerDialog(dialog);
+dialog.show();
+checkCentered(dialog);
+</script>
+</body>
+</html>
diff --git a/node_modules/dialog-polyfill/tests/dialog-recentering.html b/node_modules/dialog-polyfill/tests/dialog-recentering.html
new file mode 100644
index 0000000..5d09f21
--- /dev/null
+++ b/node_modules/dialog-polyfill/tests/dialog-recentering.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<meta charset='utf-8'>
+<head>
+<script src="../dist/dialog-polyfill.js"></script>
+<link rel="stylesheet" type="text/css" href="../dist/dialog-polyfill.css">
+<style>
+body {
+ height: 10000px;
+}
+dialog {
+ width: 100px;
+}
+#console {
+ position: fixed;
+}
+#ruler {
+ position: absolute;
+ left: 0;
+ width: 100%;
+}
+</style>
+</head>
+<body>
+<p>Test that dialog is recentered if reopened. The test passes if you see a
+box in the center of the screen.</p>
+<div id="ruler"></div>
+<div id="console"></div>
+<dialog></dialog>
+<script>
+function writeToConsole(s) {
+ var console = document.getElementById('console');
+ var span = document.createElement('span');
+ span.textContent = s;
+ console.appendChild(span);
+ console.appendChild(document.createElement('br'));
+}
+
+function windowWidthMinusScrollbar() {
+ return document.getElementById('ruler').offsetWidth;
+}
+
+function checkCentered(dialog) {
+ var expectedTop = (window.innerHeight - dialog.offsetHeight) / 2;
+ var expectedLeft = (windowWidthMinusScrollbar() - dialog.offsetWidth) / 2;
+ var rect = dialog.getBoundingClientRect();
+ if (rect.top == expectedTop && rect.left == expectedLeft) {
+ writeToConsole('SUCCESS');
+ } else {
+ writeToConsole('FAIL: expected dialog top,left to be ' +
+ expectedTop + ',' + expectedLeft + ' and was actually ' +
+ rect.top + ',' + rect.left);
+ }
+}
+
+var dialog = document.querySelector('dialog');
+dialogPolyfill.registerDialog(dialog);
+dialog.show();
+dialog.close();
+window.scrollTo(0, 500);
+dialog.show();
+checkCentered(dialog);
+</script>
+</body>
+</html>
diff --git a/node_modules/dialog-polyfill/tests/fancy-modal-dialog.html b/node_modules/dialog-polyfill/tests/fancy-modal-dialog.html
new file mode 100644
index 0000000..3e10740
--- /dev/null
+++ b/node_modules/dialog-polyfill/tests/fancy-modal-dialog.html
@@ -0,0 +1,270 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../dist/dialog-polyfill.js"></script>
+<link rel="stylesheet" type="text/css" href="../dist/dialog-polyfill.css">
+<style>
+#close-button {
+ position: absolute;
+ top: 7px;
+ right: 7px;
+ height: 14px;
+ width: 14px;
+ margin: 0;
+ background-image: url('resources/close_dialog.png');
+}
+
+#close-button:hover {
+ background-image: url('resources/close_dialog_hover.png');
+}
+
+dialog {
+/* width: 50%;
+ border-radius: 3px;
+ opacity: 0;
+ background: white;
+ box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
+ color: #333;
+ min-width: 400px;
+ padding: 0;
+ z-index: 100;
+ border: 0;
+ padding: 15px;
+*/}
+
+dialog + .backdrop {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+
+dialog.no-backdrop + .backdrop {
+ display: none;
+}
+
+.dialog-setting {
+ margin: 30px;
+}
+
+/* keyframes used to pulse the overlay */
+@-webkit-keyframes pulse {
+ 0% {
+ -webkit-transform: scale(1);
+ }
+ 40% {
+ -webkit-transform: scale(1.05);
+ }
+ 60% {
+ -webkit-transform: scale(1.05);
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ }
+}
+
+.pulse {
+ -webkit-animation-duration: 180ms;
+ -webkit-animation-iteration-count: 1;
+ -webkit-animation-name: pulse;
+ -webkit-animation-timing-function: ease-in-out;
+}
+#messages {
+ background-color: red;
+}
+body {
+ font-family: sans-serif;
+}
+
+#open-button {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ background-color: lightgray;
+ border: 1px solid;
+ margin: 10px;
+ padding: 15px;
+}
+
+#open-button:active {
+ background-color: lime;
+ margin: 9px;
+}
+
+#backdrop {
+ display: none;
+ position: fixed;
+ top:0;
+ right:0;
+ bottom:0;
+ left:0;
+ background: rgba(0,0,0,0.5);
+ z-index: 10;
+}
+.post {
+ margin: 10px;
+ padding: 5px;
+ border: 2px solid;
+}
+
+.post-buttons {
+ margin: 5px;
+ text-align: right;
+}
+.post-button:hover {
+ color: green;
+ font-weight: bold;
+}
+</style>
+<body>
+<div id="messages"></div>
+<dialog id="dialog" class="_dialog_fixed">
+ <h3>Reshare</h3>
+ <input type="text" style="width: 75%" value="I am resharing this."><br>
+ <div class="dialog-setting">
+ <input id="click-outside-to-close" type="checkbox">
+ <label for="click-outside-to-close">Close dialog upon clicking outside</label>
+ </div>
+ <div class="dialog-setting">
+ <input id="enable-backdrop" type="checkbox" checked>
+ <label for="enable-backdrop">Enable ::backdrop</label>
+ </div>
+ <div id="close-button"></div>
+</dialog>
+<div id="post-container"></div>
+<script>
+var dialog = document.getElementById('dialog');
+dialogPolyfill.registerDialog(dialog);
+
+function createPostButton(container, text) {
+ var link = document.createElement('a');
+ link.href = 'javascript:void(0)';
+ link.textContent = text;
+ link.className = 'post-button';
+ container.appendChild(link);
+ var span = document.createElement('span');
+ span.textContent = ' ';
+ container.appendChild(span);
+ return link;
+}
+
+SampleText = 'From this spot I rise not, valiant knight, until your ' +
+ 'courtesy grants me the boon I seek, one that will redound ' +
+ 'to your praise and the benefit of the human race.';
+
+function createPost(container) {
+ var post = document.createElement('div');
+ post.className = 'post';
+ var postContent = document.createElement('div');
+ postContent.className = 'post-content';
+ postContent.textContent = SampleText;
+ post.appendChild(postContent);
+ var postButtons = document.createElement('div');
+ postButtons.className = 'post-buttons';
+ post.appendChild(postButtons);
+ var reshare = createPostButton(postButtons, 'Reshare');
+ reshare.addEventListener('click', openDialog);
+ var reply = createPostButton(postButtons, 'Reply');
+ reply.addEventListener('click', openDialog);
+ createPostButton(postButtons, 'Enjoyed this post');
+
+ container.appendChild(post);
+ return post;
+}
+
+function initPosts() {
+ var container = document.getElementById('post-container');
+ for (var i = 0; i < 25; ++i) {
+ var post = createPost(container);
+ }
+}
+
+function shouldCloseDialogOnClickOutside() {
+ return document.getElementById('click-outside-to-close').checked;
+}
+
+function closeDialog() {
+ if (dialog.open)
+ dialog.close();
+}
+
+function computeCenteredTop(dialog) {
+ dialog.style.transition = '';
+ dialog.showModal();
+ var computedTopPx = window.getComputedStyle(dialog).top;
+ var computedTop = parseInt(computedTopPx.substring(0, computedTopPx.length - 2), 10);
+ dialog.close();
+ return computedTop;
+}
+
+function openDialog() {
+ dialog.style.opacity = 0;
+ dialog.style.transition = 'all 250ms ease';
+
+ dialog.showModal();
+
+ dialog.style.opacity = 1;
+}
+
+function pulseDialog() {
+ if (!dialog.style.webkitAnimation) {
+ return;
+ }
+ // classList isn't supported in IE8, but it's safe to use here as this only
+ // runs inside WebKit/Chrome anyway.
+ dialog.classList.add('pulse');
+ dialog.addEventListener('webkitAnimationEnd', function(e) {
+ dialog.classList.remove('pulse');
+ });
+}
+
+function clickedInDialog(mouseEvent) {
+ var rect = dialog.getBoundingClientRect();
+ return rect.top <= mouseEvent.clientY && mouseEvent.clientY <= rect.top + rect.height
+ && rect.left <= mouseEvent.clientX && mouseEvent.clientX <= rect.left + rect.width;
+}
+
+function handleClickOutsideDialog() {
+ if (!shouldCloseDialogOnClickOutside()) {
+ pulseDialog();
+ return
+ }
+ closeDialog();
+}
+
+document.body.addEventListener('keydown', function(e) {
+ if (e.keyCode == 27)
+ closeDialog();
+});
+
+var enableBackdrop = document.getElementById('enable-backdrop');
+enableBackdrop.addEventListener('change', function(e) {
+ if (this.checked) {
+ dialog.className = '';
+ } else {
+ dialog.className = 'no-backdrop';
+ }
+});
+
+var closeButton = document.getElementById('close-button');
+closeButton.addEventListener('click', function(e) { closeDialog(); });
+
+document.body.addEventListener('click', function(e) {
+ console.info('document body click', e.target);
+ if (!dialog.open)
+ return;
+ if (e.target != document.body)
+ return;
+ handleClickOutsideDialog();
+});
+
+dialog.addEventListener('click', function(e) {
+ if (clickedInDialog(e))
+ return;
+ handleClickOutsideDialog();
+});
+initPosts();
+</script>
+</body>
+</html>
diff --git a/node_modules/dialog-polyfill/tests/form.html b/node_modules/dialog-polyfill/tests/form.html
new file mode 100644
index 0000000..75e1645
--- /dev/null
+++ b/node_modules/dialog-polyfill/tests/form.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<meta charset='utf-8'>
+<head>
+<script src="../dist/dialog-polyfill.js"></script>
+<link rel="stylesheet" type="text/css" href="../dist/dialog-polyfill.css">
+</head>
+<body>
+
+ <p>
+Enter a value and submit the form. The close event will be fired and the <code>returnValue</code> of the dialog will be alerted.
+ </p>
+
+<input type="text" placeholder="Focusable pre" />
+
+<dialog>
+ <form method="dialog">
+ <input type="text" placeholder="Enter value" />
+ <input type="reset" value="Reset" />
+ <input type="submit" value="Stuff" />
+ <input type="submit" value="Done" />
+ <button type="submit" value="Button Value Is Different Than Text">Button Submit</button>
+ <button value="Regular Button Value">Button</button>
+ </form>
+</dialog>
+
+<button id="show">Show Dialog</button>
+
+<input type="text" placeholder="Focusable post" />
+
+
+<script>
+var dialog = document.querySelector('dialog');
+dialogPolyfill.registerDialog(dialog);
+dialog.showModal();
+
+dialog.addEventListener('close', function() {
+ var valueEl = dialog.querySelector('input[type="text"]');
+ alert(dialog.returnValue);
+});
+
+show.addEventListener('click', function() {
+ dialog.showModal();
+});
+
+</script>
+</body>
+</html>
diff --git a/node_modules/dialog-polyfill/tests/modal-dialog-stacking.html b/node_modules/dialog-polyfill/tests/modal-dialog-stacking.html
new file mode 100644
index 0000000..e111ee4
--- /dev/null
+++ b/node_modules/dialog-polyfill/tests/modal-dialog-stacking.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+<meta charset='utf-8'>
+<head>
+<script src="../dist/dialog-polyfill.js"></script>
+<link rel="stylesheet" type="text/css" href="../dist/dialog-polyfill.css">
+<style>
+dialog {
+ padding: 0px;
+ border: none;
+ margin: 0px;
+}
+
+#bottom + .backdrop {
+ top: 100px;
+ left: 100px;
+ height: 300px;
+ width: 300px;
+ background-color: rgb(0, 50, 0);
+ z-index: 100; /* z-index has no effect. */
+}
+
+#bottom {
+ top: 125px;
+ left: 125px;
+ height: 250px;
+ width: 250px;
+ background-color: rgb(0, 90, 0);
+}
+
+#middle + .backdrop {
+ top: 150px;
+ left: 150px;
+ height: 200px;
+ width: 200px;
+ background-color: rgb(0, 130, 0);
+ z-index: -100; /* z-index has no effect. */
+}
+
+#middle {
+ top: 175px;
+ left: 175px;
+ height: 150px;
+ width: 150px;
+ background-color: rgb(0, 170, 0);
+}
+
+#top + .backdrop {
+ top: 200px;
+ left: 200px;
+ height: 100px;
+ width: 100px;
+ background-color: rgb(0, 210, 0);
+ z-index: 0; /* z-index has no effect. */
+}
+
+#top {
+ top: 225px;
+ left: 225px;
+ height: 50px;
+ width: 50px;
+ background-color: rgb(0, 255, 0);
+ z-index: -1000; /* z-index has no effect. */
+}
+</style>
+</head>
+<body>
+Test for modal dialog and backdrop stacking order. The test passes if there are
+6 boxes enclosed in each other, becoming increasingly smaller and brighter
+green.
+<dialog id="top"></dialog>
+<dialog id="middle"></dialog>
+<dialog id="bottom"></dialog>
+<script>
+var topDialog = document.getElementById('top');
+dialogPolyfill.registerDialog(topDialog);
+var middleDialog = document.getElementById('middle');
+dialogPolyfill.registerDialog(middleDialog);
+var bottomDialog = document.getElementById('bottom');
+dialogPolyfill.registerDialog(bottomDialog);
+
+topDialog.showModal();
+bottomDialog.showModal();
+topDialog.close(); // Just to shuffle the top layer order around a little.
+middleDialog.showModal();
+topDialog.showModal();
+</script>
+</body>
+</html>
diff --git a/node_modules/dialog-polyfill/tests/modal-dialog.html b/node_modules/dialog-polyfill/tests/modal-dialog.html
new file mode 100644
index 0000000..be98e91
--- /dev/null
+++ b/node_modules/dialog-polyfill/tests/modal-dialog.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html tabindex="0">
+<meta charset='utf-8'>
+<head>
+<script src="../dist/dialog-polyfill.js"></script>
+<meta name="viewport" content="width=device-width, user-scalable=no">
+<link rel="stylesheet" type="text/css" href="../dist/dialog-polyfill.css">
+<style>
+ html {
+ border: 4px solid white;
+ }
+ html:focus {
+ border-color: red;
+ }
+dialog {
+ width: 100px;
+}
+</style>
+</head>
+<body>
+<p>Test for modal dialog. The test passes if you can click on "Click me" button,
+but can't click or tab to the "Can't click me!" button</p>
+<div id="console"></div>
+
+<input type="text" placeholder="Test 1" tabindex="1" />
+<input type="text" placeholder="Test 2" tabindex="2" />
+<input type="text" placeholder="Test 2.1" tabindex="2" />
+<input type="text" placeholder="Test 3" tabindex="3" />
+
+<input type="text" placeholder="Before dialog" />
+<dialog>
+ <button id="dialog-button">Click me</button>
+ <input type="text" placeholder="Focus me" />
+ <input type="text" placeholder="Focus me again" />
+</dialog>
+<button id="inert-button">Can't click me</button>
+<input type="text" placeholder="Can't focus me" />
+<script>
+function writeToConsole(s) {
+ var console = document.getElementById('console');
+ var span = document.createElement('span');
+ span.textContent = s;
+ console.appendChild(span);
+ console.appendChild(document.createElement('br'));
+}
+
+var dialog = document.querySelector('dialog');
+dialogPolyfill.registerDialog(dialog);
+dialog.showModal();
+
+var dialogButton = document.getElementById('dialog-button');
+dialogButton.addEventListener('click', function(e) {
+ writeToConsole("SUCCESS: dialog's button was clicked");
+});
+
+var inertButton = document.getElementById('inert-button');
+inertButton.addEventListener('click', function(e) {
+ writeToConsole('FAIL: inert button was clicked');
+});
+</script>
+</body>
+</html>
diff --git a/node_modules/dialog-polyfill/tests/resources/close_dialog.png b/node_modules/dialog-polyfill/tests/resources/close_dialog.png
new file mode 100644
index 0000000..793f60e
--- /dev/null
+++ b/node_modules/dialog-polyfill/tests/resources/close_dialog.png
Binary files differ
diff --git a/node_modules/dialog-polyfill/tests/resources/close_dialog_hover.png b/node_modules/dialog-polyfill/tests/resources/close_dialog_hover.png
new file mode 100644
index 0000000..fe896f9
--- /dev/null
+++ b/node_modules/dialog-polyfill/tests/resources/close_dialog_hover.png
Binary files differ
diff --git a/node_modules/dialog-polyfill/tests/respect-positioned-dialog.html b/node_modules/dialog-polyfill/tests/respect-positioned-dialog.html
new file mode 100644
index 0000000..1272136
--- /dev/null
+++ b/node_modules/dialog-polyfill/tests/respect-positioned-dialog.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<meta charset='utf-8'>
+<head>
+<script src="../dist/dialog-polyfill.js"></script>
+<link rel="stylesheet" type="text/css" href="../dist/dialog-polyfill.css">
+<style>
+dialog {
+ display: none;
+ height: 50px;
+ width: 50px;
+ padding: 0;
+ margin: 0;
+}
+
+dialog.left {
+ top: 100px;
+ left: 100px;
+}
+
+#middle {
+ top: 100px;
+ left: 200px;
+}
+</style>
+</head>
+<body>
+<p>Test that dialogs with an explicit static position don't get auto-centered.
+The test passes if there are three boxes aligned in a single row.</p>
+<div id="console"></div>
+<dialog id="left" class="left"></dialog>
+<dialog id="middle"></dialog>
+<dialog id="right"></dialog>
+<script>
+function writeToConsole(s) {
+ var console = document.getElementById('console');
+ var span = document.createElement('span');
+ span.textContent = s;
+ console.appendChild(span);
+ console.appendChild(document.createElement('br'));
+}
+
+var dialogs = document.querySelectorAll('dialog');
+for (var i = 0; i < dialogs.length; ++i)
+ dialogPolyfill.registerDialog(dialogs[i]);
+
+var leftDialog = document.getElementById('left');
+leftDialog.show();
+
+var middleDialog = document.getElementById('middle');
+middleDialog.show();
+
+var rightDialog = document.getElementById('right');
+rightDialog.style.top = '100px';
+rightDialog.style.left = '300px';
+rightDialog.show();
+</script>
+</body>
+</html>
diff --git a/node_modules/dialog-polyfill/tests/stacking.html b/node_modules/dialog-polyfill/tests/stacking.html
new file mode 100644
index 0000000..54de723
--- /dev/null
+++ b/node_modules/dialog-polyfill/tests/stacking.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<meta charset='utf-8'>
+<head>
+<script src="../dist/dialog-polyfill.js"></script>
+<link rel="stylesheet" type="text/css" href="../dist/dialog-polyfill.css">
+</head>
+<body>
+
+ <p>
+The dialog below is incorrectly positioned within a stacking context.
+It should generate a console warning message, and place the <code>_dialog_overlay</code> in a different place in order to try to work around the problem without moving the dialog itself.
+ </p>
+
+<div style="position: absolute; top: 100px; left: 10vw; width: 80vw; height: 400px; background: blue; opacity: 0.7;">
+
+<dialog>
+ <form method="dialog">
+ <input type="submit" />
+ </form>
+ <p>
+ Help, I'm inside an extra stacking context D:
+ </p>
+</dialog>
+
+</div>
+
+<button id="show">Show Dialog</button>
+
+<script>
+var dialog = document.querySelector('dialog');
+dialogPolyfill.registerDialog(dialog);
+dialog.showModal();
+
+show.addEventListener('click', function() {
+ dialog.showModal();
+});
+
+</script>
+</body>
+</html>
