1 files changed, 132 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-flex-container-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-flex-container-001.html
new file mode 100644
index 0000000000..56c999c558
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-flex-container-001.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid item which is also a flex container</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1">
+<meta name="assert" content="Checks that the grid is updated when the contents of the grid item flex container change their size dynamically.">
+<style>
+.grid {
+  display: grid;
+  width: 100px;
+  background: cyan;
+}
+.flex {
+  display: flex;
+  min-height: 0;
+  height: 100%;
+}
+.height200 {
+  height: 200px;
+}
+.height100 {
+  height: 100px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<div id="log"></div>
+
+<pre>grid-template-rows: minmax(auto, auto);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, auto);" data-expected-height="100" >
+  <div class="flex">
+    <div>
+      <div class="height200"></div>
+    </div>
+  </div>
+</div>
+
+<pre>grid-template-rows: minmax(min-content, auto);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(min-content, auto);" data-expected-height="100">
+  <div class="flex">
+    <div>
+      <div class="height200"></div>
+    </div>
+  </div>
+</div>
+
+<pre>grid-template-rows: minmax(max-content, auto);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(max-content, auto);" data-expected-height="100">
+  <div class="flex">
+    <div>
+      <div class="height200"></div>
+    </div>
+  </div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, min-content);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, min-content);" data-expected-height="100">
+  <div class="flex">
+    <div>
+      <div class="height200"></div>
+    </div>
+  </div>
+</div>
+
+<pre>grid-template-rows: minmax(min-content, min-content);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(min-content, min-content);" data-expected-height="100">
+  <div class="flex">
+    <div>
+      <div class="height200"></div>
+    </div>
+  </div>
+</div>
+
+<pre>grid-template-rows: minmax(max-content, min-content);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(max-content, min-content);" data-expected-height="100">
+  <div class="flex">
+    <div>
+      <div class="height200"></div>
+    </div>
+  </div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, max-content);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, max-content);" data-expected-height="100">
+  <div class="flex">
+    <div>
+      <div class="height200"></div>
+    </div>
+  </div>
+</div>
+
+<pre>grid-template-rows: minmax(min-content, max-content);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(min-content, max-content);" data-expected-height="100">
+  <div class="flex">
+    <div>
+      <div class="height200"></div>
+    </div>
+  </div>
+</div>
+
+<pre>grid-template-rows: minmax(max-content, max-content);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(max-content, max-content);" data-expected-height="100">
+  <div class="flex">
+    <div>
+      <div class="height200"></div>
+    </div>
+  </div>
+</div>
+
+<script>
+// Force layout
+document.body.offsetLeft;
+
+// Change content sizes
+for (let el of document.querySelectorAll(".height200")) {
+  el.className = "height100";
+}
+
+// Check final layout
+checkLayout('.grid');
+</script>