1 files changed, 65 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-stacking-order-ref.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-stacking-order-ref.html
new file mode 100644
index 0000000000..d3f82de181
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-stacking-order-ref.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<style>
+div {
+    position: absolute;
+}
+
+#bottom-backdrop {
+    top: 100px;
+    left: 100px;
+    height: 300px;
+    width: 300px;
+    background-color: rgb(0, 50, 0);
+}
+
+#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);
+}
+
+#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);
+}
+
+#top {
+    top: 225px;
+    left: 225px;
+    height: 50px;
+    width: 50px;
+    background-color: rgb(0, 255, 0);
+}
+</style>
+<body>
+Test for dialog::backdrop stacking order. The test passes if there are 6
+boxes enclosed in each other, becoming increasingly smaller and brighter
+green.
+<div id="bottom-backdrop"></div>
+<div id="bottom"></div>
+<div id="middle-backdrop"></div>
+<div id="middle"></div>
+<div id="top-backdrop"></div>
+<div id="top"></div>
+</body>