diff --git a/css/css-grid/grid-item-percentage-quirk-001.html b/css/css-grid/grid-item-percentage-quirk-001.html
new file mode 100644
index 00000000000000..0956b7a025314d
--- /dev/null
+++ b/css/css-grid/grid-item-percentage-quirk-001.html
@@ -0,0 +1,9 @@
+<!-- quirks mode -->
+<link rel="match" href="../../quirks/reference/green-100px-square-no-red.html">
+<link rel="help" href="https://quirks.spec.whatwg.org/#the-percentage-height-calculation-quirk">
+<p>There should be a filled green square below, and no red.</p>
+<div style="width: 100px; height: 100px; overflow: hidden; background: green;">
+  <div style="display: grid; position: relative; left: -20px;">
+    <canvas width=10 height=10 style="height: 200%; background: red;"></canvas>
+  </div>
+</div>
diff --git a/css/css-grid/grid-item-percentage-quirk-002.html b/css/css-grid/grid-item-percentage-quirk-002.html
new file mode 100644
index 00000000000000..f795cd096d9f0c
--- /dev/null
+++ b/css/css-grid/grid-item-percentage-quirk-002.html
@@ -0,0 +1,9 @@
+<!-- quirks mode -->
+<link rel="match" href="../../quirks/reference/green-100px-square-no-red.html">
+<link rel="help" href="https://quirks.spec.whatwg.org/#the-percentage-height-calculation-quirk">
+<p>There should be a filled green square below, and no red.</p>
+<div style="width: 100px; height: 100px; overflow: hidden; background: green;">
+  <div style="display: grid; position: relative; left: -20px;">
+    <div width=10 height=10 style="height: 200%; width: 200px; background: red;"></div>
+  </div>
+</div>