1 files changed, 43 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-flexbox/position-relative-percentage-top-001.html b/testing/web-platform/tests/css/css-flexbox/position-relative-percentage-top-001.html
new file mode 100644
index 0000000000..3ec47c1d42
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/position-relative-percentage-top-001.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<title>CSS Flexbox: Relative position with a percentage top</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#valdef-align-items-stretch">
+<meta name="assert" content="This test ensures that a flexbox with 'flex-flow: row wrap' properly centers a grandchild with 'position: relative' and 'top: 50%'.">
+<style>
+html, body {
+  margin: 0;
+}
+
+.border {
+  border:1px solid #000;
+}
+.width-50 {
+  width: 50%;
+}
+.flex {
+  display: flex;
+  flex-flow: row wrap;
+}
+.tall {
+  height: 300px;
+}
+.top-50 {
+  position: relative;
+  top: 50%;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.border')">
+<div class="border">
+  <div class="flex">
+    <div class="width-50">
+      <label class="top-50" data-offset-y="151">This should be in the center of the container</label>
+    </div>
+    <div class="width-50">
+      <div class="tall">
+        This is tall
+      </div>
+    </div>
+  </div>
+</div>