1 files changed, 312 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-001-ref.html
new file mode 100644
index 0000000000..1090871575
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-001-ref.html
@@ -0,0 +1,312 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Reference: item [min-|max-]*[width|height] percentages</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  height: 10px;
+  width: 10px;
+  grid: 1px auto 2px / 3px auto 4px;
+  border: solid 1px;
+  margin: 0 20px 20px 0;
+  place-items: start;
+}
+.item {
+  background: cyan;
+  grid-area: 2/2;
+  height: 30px;
+  width: 30px;
+}
+.content {
+  height: 30px;
+  width: 30px;
+}
+.min {
+  height: 7px;
+  width: 3px;
+}
+.min:not(.max):not(.size) {
+  height: 30px;
+  width: 30px;
+}
+
+.hl  .item { writing-mode: horizontal-tb; direction:ltr; }
+.hr  .item { writing-mode: horizontal-tb; direction:rtl; }
+.vrl .item { writing-mode: vertical-rl; direction:ltr; }
+.vrr .item { writing-mode: vertical-rl; direction:rtl; }
+.vll .item { writing-mode: vertical-lr; direction:ltr; }
+.vlr .item { writing-mode: vertical-lr; direction:rtl; }
+.sll .item { writing-mode: sideways-lr; direction:ltr; }
+.slr .item { writing-mode: sideways-lr; direction:rtl; }
+
+</style>
+<div class="hl">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="vrl">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="vrr">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="vll">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="vlr">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="slr">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="srl">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>