1 files changed, 35 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-flexbox/flex-item-z-ordering-001.html b/testing/web-platform/tests/css/css-flexbox/flex-item-z-ordering-001.html
new file mode 100644
index 0000000000..d7344eb93c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/flex-item-z-ordering-001.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<title>CSS Flexbox: z-index on non-positioned flex-items</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#painting">
+<link rel="bookmark" href="https://bugs.webkit.org/show_bug.cgi?id=91405">
+<link rel="match" href="reference/flex-item-z-ordering-001-ref.html">
+<meta name="assert" content="z-index on non-positioned flex-items works.">
+<style>
+.flex-item {
+    width: 50px;
+    height: 50px;
+}
+.positioned {
+    position: absolute;
+    left: 25px;
+    height: 25px;
+    width: 50px;
+}
+</style>
+<div>The green boxes should be above the orange boxes, which should be above the purple boxes, which are above the salmon boxes.<div>
+<div style="position:relative">
+    <div style="display:flex;">
+        <div class="flex-item" style="z-index: 1; background-color: salmon;"></div>
+        <div class="flex-item" style="z-index: 100; background-color: orange;"></div>
+    </div>
+    <div class="positioned" style="top: 0; z-index: 150; background-color: green"></div>
+    <div class="positioned" style="top: 25px; z-index: 50; background-color: purple"></div>
+</div>
+<div style="position:relative">
+    <div style="display:flex;">
+        <img class="flex-item" style="z-index: 1; background-color: salmon;"></img>
+        <img class="flex-item" style="z-index: 100; background-color: orange;"></img>
+    </div>
+    <img class="positioned" style="top: 0; z-index: 150; background-color: green"></img>
+    <img class="positioned" style="top: 25px; z-index: 50; background-color: purple"></img>
+</div>