Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
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>