Adding upstream version 1:115.7.0.upstream/1%115.7.0 upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 17:32:43 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 17:32:43 +0000
commit: 6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch)
tree: a68f146d7fa01f0134297619fbe7e33db084e0aa /testing/web-platform/tests/css/css-grid/subgrid
parent: Initial commit. (diff)
download: thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.tar.xz
thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.zip
125 files changed, 14156 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/abs-pos-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/abs-pos-001-ref.html
new file mode 100644
index 0000000000..fe316d5d3b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/abs-pos-001-ref.html
@@ -0,0 +1,123 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: grid-aligned abs.pos. inside subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: auto / repeat(10, 30px) 100px;
+  place-content: start;
+  border: 1px solid;
+  width: 500px;
+  position: relative;
+  padding: 4px 3px 1px 10px;
+}
+
+.subgrid {
+  display: grid;
+  grid: 0 / repeat(10, 30px) 100px;
+  background: lightgrey;
+  grid-column: 2 / span 8;
+  min-width:0;
+  min-height:0;
+}
+
+i {
+  grid-row: 1;
+  counter-increment: i;
+  background: pink;
+}
+i::before { content: counter(i, decimal); }
+
+x {
+  position: absolute;
+  top:0; bottom:0; left:0; right:0;
+  background: silver;
+}
+
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:3/5">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:3/-1">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:auto/3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:auto/1">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:3/5">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:3/-1">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:auto/3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:auto/1">x</x>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/abs-pos-001.html b/testing/web-platform/tests/css/css-grid/subgrid/abs-pos-001.html
new file mode 100644
index 0000000000..e524ec2d76
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/abs-pos-001.html
@@ -0,0 +1,129 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: grid-aligned abs.pos. inside subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="abs-pos-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: repeat(4, auto) / repeat(10, 30px);
+  grid-template-areas: ". . . . . . . . . . .";
+  place-content: start;
+  border: 1px solid;
+  width: 500px;
+  grid-auto-columns: 100px;
+  grid-auto-rows: 100px;
+  position: relative;
+  padding: 4px 3px 1px 10px;
+}
+
+.subgrid {
+  display: grid;
+  grid: auto / subgrid;
+  background: lightgrey;
+  grid-column: 2 / span 8;
+  grid-row: 2 / span 2;
+  min-width:0;
+  min-height:0;
+}
+
+i {
+  grid-row: 1;
+  counter-increment: i;
+  background: pink;
+}
+i::before { content: counter(i, decimal); }
+
+x {
+  position: absolute;
+  top:0; bottom:0; left:0; right:0;
+  background: silver;
+}
+
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:3/5">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:3/-1">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:auto/3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:auto/1">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:3/5">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:3/-1">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:auto/3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:auto/1">x</x>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/abs-pos-002-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/abs-pos-002-ref.html
new file mode 100644
index 0000000000..69e071c758
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/abs-pos-002-ref.html
@@ -0,0 +1,125 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: grid-aligned abs.pos. inside rel.pos. subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: repeat(4, auto) / repeat(10, 30px) 100px;
+  place-content: start;
+  border: 1px solid;
+  width: 500px;
+  padding: 1px 2px;
+}
+
+.subgrid {
+  position: relative;
+  display: grid;
+  grid: auto / 27px repeat(7, 30px);
+  grid-column: 2 / span 8;
+  grid-row: 2 / span 2;
+  padding: 4px 0 1px 0;
+  border: 3px solid black;
+  min-height: 1em;
+  background: yellow;
+}
+
+i {
+  grid-row: 1;
+  counter-increment: i;
+  background: pink;
+}
+i::before { content: counter(i, decimal); }
+
+x {
+  position: absolute;
+  top:0; bottom:0; left:0; right:0;
+  background: silver;
+}
+
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:3/5">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:3; right:33px">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:auto/3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:auto/1; right:-10px">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:3/5">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:3/-1; left:13px">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:auto/3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:auto/1; left:-33px">x</x>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/abs-pos-002.html b/testing/web-platform/tests/css/css-grid/subgrid/abs-pos-002.html
new file mode 100644
index 0000000000..5d6833555e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/abs-pos-002.html
@@ -0,0 +1,131 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: grid-aligned abs.pos. inside rel.pos. subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="abs-pos-002-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: repeat(4, auto) / repeat(10, 30px);
+  grid-template-areas: ". . . . . . . . . . .";
+  place-content: start;
+  border: 1px solid;
+  width: 500px;
+  grid-auto-columns: 100px;
+  grid-auto-rows: 100px;
+  padding: 1px 2px;
+}
+
+.subgrid {
+  position: relative;
+  display: grid;
+  grid: auto / subgrid;
+  grid-column: 2 / span 8;
+  grid-row: 2 / span 2;
+  padding: 4px 33px 1px 10px;
+  border: 3px solid black;
+  min-width: 0;
+  min-height: 1em;
+  background: yellow;
+}
+
+i {
+  grid-row: 1;
+  counter-increment: i;
+  background: pink;
+}
+i::before { content: counter(i, decimal); }
+
+x {
+  position: absolute;
+  top:0; bottom:0; left:0; right:0;
+  background: silver;
+}
+
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:3/5">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:3/-1">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:auto/3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid">
+  <x style="grid-column:auto/1">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:3/5">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:3/-1">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:auto/3">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr">
+  <x style="grid-column:auto/1">x</x>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-001-ref.html
new file mode 100644
index 0000000000..81c6d18402
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-001-ref.html
@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid auto track sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1558705">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  max-width: 260px;
+  padding: 1px 5px;
+  border: 1px solid;
+}
+.subgrid {
+  display: grid;
+  padding: 3px 5px 7px 11px;
+  border-style: solid;
+  border-width: 5px 7px 11px 3px;
+  margin: 7px 11px 3px 5px;
+  background: grey;
+}
+
+  </style>
+</head>
+<body>
+
+<article class="grid">
+  <div class="subgrid">
+    The cat can not be separated from milk
+  </div>
+</article>
+
+<article class="grid" style="grid-template-columns: 100px auto">
+  <div class="subgrid">
+    The cat can not be separated from milk
+  </div>
+</article>
+
+<article class="grid" style="grid-template-columns: auto 100px">
+  <div class="subgrid" style="grid-column:2">
+    The cat can not be separated from milk
+  </div>
+</article>
+
+<article class="grid" style="grid-template-columns: auto 100px auto">
+  <div class="subgrid" style="grid-column:2 / span 2">
+    The cat can not be separated from milk
+  </div>
+</article>
+
+<article class="grid" style="grid-template-columns: auto 100px auto">
+  <div class="subgrid" style="grid-column:1 / span 3">
+    The cat can not be separated from milk
+  </div>
+</article>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-001.html b/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-001.html
new file mode 100644
index 0000000000..4a946e6feb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-001.html
@@ -0,0 +1,68 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Test: subgrid auto track sizing</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1558705">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="auto-track-sizing-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  max-width: 260px;
+  padding: 1px 5px;
+  border: 1px solid;
+}
+.subgrid {
+  display: grid;
+  grid-template-rows: subgrid;
+  padding: 3px 5px 7px 11px;
+  border-style: solid;
+  border-width: 5px 7px 11px 3px;
+  margin: 7px 11px 3px 5px;
+  background: grey;
+}
+
+  </style>
+</head>
+<body>
+
+<article class="grid">
+  <div class="subgrid">
+    The cat can not be separated from milk
+  </div>
+</article>
+
+<article class="grid" style="grid-template-columns: 100px auto">
+  <div class="subgrid">
+    The cat can not be separated from milk
+  </div>
+</article>
+
+<article class="grid" style="grid-template-columns: auto 100px">
+  <div class="subgrid" style="grid-column:2">
+    The cat can not be separated from milk
+  </div>
+</article>
+
+<article class="grid" style="grid-template-columns: auto 100px auto">
+  <div class="subgrid" style="grid-column:2 / span 2">
+    The cat can not be separated from milk
+  </div>
+</article>
+
+<article class="grid" style="grid-template-columns: auto 100px auto">
+  <div class="subgrid" style="grid-column:1 / span 3">
+    The cat can not be separated from milk
+  </div>
+</article>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-002-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-002-ref.html
new file mode 100644
index 0000000000..5d4b9c8178
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-002-ref.html
@@ -0,0 +1,64 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid auto track sizing</title>
+  <link rel="author" title="Matt Woodrow" href="https://bugs.webkit.org/show_bug.cgi?id=236951">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  max-width: 260px;
+  padding: 1px 5px;
+  border: 1px solid;
+  grid-template-columns: 100px;
+}
+.subgrid {
+  display: grid;
+  grid-template-columns: 100%;
+  margin: 0px 10px 0px 10px;
+  background: grey;
+}
+
+  </style>
+</head>
+<body>
+
+<article class="grid">
+  <div class="subgrid">
+    The cat can not be separated from milk
+  </div>
+</article>
+
+<article class="grid">
+  <div class="subgrid">
+    The cat can not be separated from milk
+  </div>
+</article>
+
+<article class="grid">
+  <div class="subgrid">
+    The cat can not be separated from milk
+  </div>
+</article>
+
+<article class="grid">
+  <div class="subgrid">
+    The cat can not be separated from milk
+  </div>
+</article>
+
+<article class="grid">
+  <div class="subgrid">
+    The cat can not be separated from milk
+  </div>
+</article>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-002.html b/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-002.html
new file mode 100644
index 0000000000..c44c9d3925
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-002.html
@@ -0,0 +1,80 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Test: subgrid auto track sizing</title>
+  <link rel="author" title="Matt Woodrow" href="https://bugs.webkit.org/show_bug.cgi?id=236951">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="auto-track-sizing-002-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  max-width: 260px;
+  padding: 1px 5px;
+  border: 1px solid;
+  grid-template-columns: 100px;
+}
+
+.subgrid {
+  display: grid;
+  grid-template-rows: subgrid;
+  grid-template-columns: 100%;
+  margin: 0px 5px 0px 10px;
+}
+
+.inner {
+  margin: 0px 5px 0px 0px;
+  background: grey;
+}
+  </style>
+</head>
+<body>
+
+<article class="grid">
+  <div class="subgrid" style="margin: 0px 10px 0px 10px; background: grey">
+    The cat can not be separated from milk
+  </div>
+</article>
+
+<article class="grid">
+  <div class="subgrid">
+    <div class="subgrid inner">
+      The cat can not be separated from milk
+    </div>
+  </div>
+</article>
+
+<article class="grid">
+  <div class="subgrid" style="grid-template-columns: subgrid">
+    <div class="subgrid inner">
+      The cat can not be separated from milk
+    </div>
+  </div>
+</article>
+
+<article class="grid">
+  <div class="subgrid">
+    <div class="subgrid inner" style="grid-template-columns: subgrid">
+      The cat can not be separated from milk
+    </div>
+  </div>
+</article>
+
+<article class="grid">
+  <div class="subgrid" style="grid-template-columns: subgrid">
+    <div class="subgrid inner" style="grid-template-columns: subgrid">
+      The cat can not be separated from milk
+    </div>
+  </div>
+</article>
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/baseline-001-ref.html
new file mode 100644
index 0000000000..c98740b4e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/baseline-001-ref.html
@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: baseline-aligned subgrid item</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
+  place-content: start;
+  place-items: baseline start;
+  border: 1px solid;
+  text-decoration: underline blue;
+}
+
+.subgrid {
+  background: lightgrey;
+  grid-column: 2 / span 4;
+  grid-row: 3 / span 2;
+  min-width: 10px;
+  min-height: 0;
+  background: yellow;
+}
+
+x, z {
+  display: block;
+  min-width: 20px;
+  min-height: 10px;
+  font-size: 8em;
+  background: silver;
+}
+z {
+  width: 20px;
+  height: 10px;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<y style="grid-area:3/1">A&nbsp;</y>
+<div class="subgrid">
+  <z></z><x>&nbsp;A</x>
+</div>
+</div>
+
+<div class="grid" style="align-items: last baseline">
+<y style="grid-area:4/1">A&nbsp;</y>
+<div class="subgrid">
+  <z></z><x>&nbsp;A</x>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/baseline-001.html b/testing/web-platform/tests/css/css-grid/subgrid/baseline-001.html
new file mode 100644
index 0000000000..995b1a8d2a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/baseline-001.html
@@ -0,0 +1,66 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: baseline-aligned subgrid item</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="baseline-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
+  place-content: start;
+  place-items: baseline start;
+  border: 1px solid;
+  text-decoration: underline blue;
+}
+
+.subgrid {
+  display: grid;
+  grid: subgrid / auto;
+  background: lightgrey;
+  grid-column: 2 / span 4;
+  grid-row: 3 / span 2;
+  min-width: 10px;
+  min-height: 0;
+  background: yellow;
+  place-content: inherit;
+  place-items: inherit;
+}
+
+x {
+  min-width: 20px;
+  min-height: 10px;
+  font-size: 8em;
+  background: silver;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<y style="grid-area:4/1">A&nbsp;</y>
+<div class="subgrid">
+  <x style="grid-row:2">&nbsp;A</x><x></x>
+</div>
+</div>
+
+<div class="grid" style="align-items: last baseline">
+<y style="grid-area:4/1">A&nbsp;</y>
+<div class="subgrid">
+  <x></x><x style="grid-row:2">&nbsp;A</x>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/contain-strict-nested-subgrid-crash.html b/testing/web-platform/tests/css/css-grid/subgrid/contain-strict-nested-subgrid-crash.html
new file mode 100644
index 0000000000..a98e43777e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/contain-strict-nested-subgrid-crash.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1606485">
+<style>
+* {
+  grid-template-rows: subgrid;
+  display: grid;
+  overflow: scroll;
+  contain: strict;
+}
+</style>
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  let e = document.createElement('s');
+  document.documentElement.appendChild(e);
+  document.documentElement.getBoundingClientRect() // Update layout
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/contain-strict-subgrid-crash.html b/testing/web-platform/tests/css/css-grid/subgrid/contain-strict-subgrid-crash.html
new file mode 100644
index 0000000000..0d377175b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/contain-strict-subgrid-crash.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<head>
+<title>contain: strict element with subgrid properties</title>
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1606485">
+</head>
+<style>
+
+#gridcontainer {
+  display: grid;
+  contain: strict;
+}
+
+.item {
+  display: grid;
+  grid: subgrid [x] / subgrid [x];
+}
+</style>
+<div id="gridcontainer">
+<div class="item">Text1</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-001-ref.html
new file mode 100644
index 0000000000..e7909fc206
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-001-ref.html
@@ -0,0 +1,82 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid with definite grid-gap in both axes</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+}
+
+  .wrapper {
+    display: inline-grid;
+    gap: 20px 10px;
+    grid-template-columns: repeat(4,auto);
+    grid-template-rows: repeat(3,auto);
+    background-color: #fff;
+    color: #444;
+  }
+
+  .box {
+    background-color: #444;
+    color: #fff;
+    padding: 20px;
+  }
+
+  .box .box {
+    background-color: #ccc;
+    color: #444;
+  }
+
+  .a {
+    grid-area: 1 / 1 / 2 / 3;
+  }
+
+  .b {
+    grid-area: 1/4;
+  }
+
+  .c {
+    grid-column: 1;
+    grid-row: 2 / 4;
+    margin-right: 10px;
+  }
+
+  .d {
+    grid-column: 2 / 5;
+    grid-row: 2 / 4;
+    display: grid;
+    row-gap: 100px;
+    column-gap: 10px;
+    grid: repeat(2,auto) / repeat(3,auto);
+  }
+
+  .e {
+    grid-area: 1/2; visibility:hidden; margin-left:15px;
+  }
+  .f {
+    grid-area: 1/3; visibility:hidden; margin-left:10px;
+  }
+  .g {
+    grid-area: 1/4; visibility:hidden; margin-left:15px;
+  }
+</style>
+</head>
+<body>
+
+<div class="wrapper">
+  <div class="box a">A</div><div class="box e">E</div><div class="box f">F</div><div class="box g">G</div>
+  <div class="box b">B</div>
+  <div class="box c">C</div>
+  <div class="box d">
+    <div class="box">E</div>
+    <div class="box">F</div>
+    <div class="box">G</div>
+    <div class="box h">H</div>
+    <div class="box i">I</div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-001.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-001.html
new file mode 100644
index 0000000000..0bc8eed4d8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-001.html
@@ -0,0 +1,73 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid with definite grid-gap in both axes</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="grid-gap-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+}
+
+  .wrapper {
+    display: inline-grid;
+    gap: 20px;
+    grid-template-columns:  repeat(4,auto);
+    grid-template-rows: repeat(3,auto);
+    background-color: #fff;
+    color: #444;
+  }
+
+  .box {
+    background-color: #444;
+    color: #fff;
+    padding: 20px;
+  }
+
+  .box .box {
+    background-color: #ccc;
+    color: #444;
+  }
+
+  .a {
+    grid-column: 1 / 3;
+  }
+
+  .b {
+    grid-column: 4;
+  }
+
+  .c {
+    grid-column: 1;
+    grid-row: 2 / 4;
+  }
+
+  .d {
+    grid-column: 2 / 5;
+    grid-row: 2 / 4;
+    display: grid;
+    row-gap: 100px;
+    column-gap: 10px;
+    grid: subgrid / subgrid;
+  }
+</style>
+</head>
+<body>
+
+<div class="wrapper">
+  <div class="box a">A</div>
+  <div class="box b">B</div>
+  <div class="box c">C</div>
+  <div class="box d">
+    <div class="box e">E</div>
+    <div class="box f">F</div>
+    <div class="box g">G</div>
+    <div class="box h">H</div>
+    <div class="box i">I</div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-002-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-002-ref.html
new file mode 100644
index 0000000000..db30524612
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-002-ref.html
@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid with border-bottom</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: repeat(4, auto) / repeat(5, auto);
+  place-content: start;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid: subgrid / auto;
+  gap: 10px 20px;
+  background: lightgrey;
+  grid-column: 2 / span 5;
+  grid-row: 2 / span 5;
+  min-width:10px;
+  min-height:0;
+  background: yellow;
+}
+
+.subgrid > * { background: lightgrey; }
+
+x {
+  min-width:10px;
+  min-height:0px;
+}
+x:nth-child(2n+1) { background: silver; }
+x:nth-child(2n+2) { background: magenta; }
+x:nth-child(2n+3) { background: pink; }
+x:nth-child(2n+4) { background: grey; }
+
+e {
+  border: 0 solid lightblue;
+  border-bottom-width: 40px;
+  margin: -5px 0;
+}
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+<div class="subgrid">
+<c>c</c>
+<d>d</d>
+<e></e>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-002.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-002.html
new file mode 100644
index 0000000000..bd4b74924b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-002.html
@@ -0,0 +1,63 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid with border-bottom</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="grid-gap-002-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: repeat(4, auto) / repeat(5, auto);
+  place-content: start;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid: subgrid / auto;
+  gap: 10px 20px;
+  background: lightgrey;
+  grid-column: 2 / span 5;
+  grid-row: 2 / span 5;
+  min-width:10px;
+  min-height:0;
+  border: 0 solid lightblue;
+  border-bottom-width: 40px;
+  background: yellow;
+}
+
+.subgrid > * { background: lightgrey; }
+
+x {
+  min-width:10px;
+  min-height:0px;
+}
+x:nth-child(2n+1) { background: silver; }
+x:nth-child(2n+2) { background: magenta; }
+x:nth-child(2n+3) { background: pink; }
+x:nth-child(2n+4) { background: grey; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+<div class="subgrid">
+<c>c</c>
+<d>d</d>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-003-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-003-ref.html
new file mode 100644
index 0000000000..44053f0505
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-003-ref.html
@@ -0,0 +1,68 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid with border-bottom and percentage gap</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: 0 15px 15px 0 0 40px / repeat(5, auto);
+  place-content: start;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid: repeat(4, auto) / auto auto;
+  gap: 3px 8px;
+  background: lightgrey;
+  grid-column: 2 / span 5;
+  grid-row: 2 / span 5;
+  background: grey;
+  width: 40px;
+  height: 30px;
+}
+
+.subgrid > * { background: lightgrey; }
+
+x {
+  min-width:10px;
+  min-height:0px;
+}
+x:nth-child(2n+1) { background: silver; }
+x:nth-child(2n+2) { background: magenta; }
+x:nth-child(2n+3) { background: pink; }
+x:nth-child(2n+4) { background: grey; }
+
+e { display:block; width: 20px; height:15px; background:black; }
+
+f {
+  grid-area: 4/2/span 1/span 5;
+  background: lightblue!important;
+  height: 40px;
+}
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<x style="grid-row:1; height:0"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+<f></f>
+<div class="subgrid">
+<c><e></e></c>
+<d><e></e></d>
+<c><e></e></c>
+<d><e></e></d>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-003.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-003.html
new file mode 100644
index 0000000000..f8ce8655cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-003.html
@@ -0,0 +1,66 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid with border-bottom and percentage gap</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="grid-gap-003-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: repeat(4, auto) / repeat(5, auto);
+  place-content: start;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid: subgrid / auto auto;
+  gap: 20% 20%;
+  background: lightgrey;
+  grid-column: 2 / span 5;
+  grid-row: 2 / span 5;
+  min-width:10px;
+  min-height:0;
+  border: 0 solid lightblue;
+  border-bottom-width: 40px;
+  background: grey;
+}
+
+.subgrid > * { background: lightgrey; }
+
+x {
+  min-width:10px;
+  min-height:0px;
+}
+x:nth-child(2n+1) { background: silver; }
+x:nth-child(2n+2) { background: magenta; }
+x:nth-child(2n+3) { background: pink; }
+x:nth-child(2n+4) { background: grey; }
+
+e { display:block; width: 20px; height:15px; background:black; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+<div class="subgrid">
+<c><e></e></c>
+<d><e></e></d>
+<c><e></e></c>
+<d><e></e></d>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-004-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-004-ref.html
new file mode 100644
index 0000000000..b1819d1eaa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-004-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: nested subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+html,body {
+  color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display:inline-grid;
+  grid:100px auto/100px auto;
+  gap:20px;
+  border:3px solid;
+  background:yellow;
+}
+span { background:cyan; }
+span:nth-child(2n+1) { background:grey; }
+</style>
+</head>
+<body>
+
+<div class="grid">
+  <div style="display:grid; grid: 100px 1em / 100px 1em; gap:60px; grid-area:span 2/span 2">
+    <div style="display:grid; grid: 60px 1em / 100px; gap:100px; grid-row:span 2">
+      <span>a</span><span>b</span>
+    </div>
+    <span style="grid-area:2/2">c</span>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-004.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-004.html
new file mode 100644
index 0000000000..b46d22e1e3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-004.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: nested subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="grid-gap-004-ref.html">
+<style>
+html,body {
+  color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display:inline-grid;
+  grid:100px auto/100px auto;
+  gap:20px;
+  border:3px solid;
+  background:yellow;
+}
+span { background:cyan; }
+span:nth-child(2n+1) { background:grey; }
+</style>
+</head>
+<body>
+
+<div class="grid">
+  <div style="display:grid; grid:subgrid/subgrid; gap:100px; grid-area:span 2/span 2">
+    <div style="display:grid; grid:subgrid/100px; gap:100px; grid-row:span 2">
+      <span>a</span><span>b</span>
+    </div>
+    <span style="grid-area:2/2">c</span>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-005-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-005-ref.html
new file mode 100644
index 0000000000..88d8b34d93
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-005-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: nested subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+html,body {
+  color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
+}
+
+span { background:cyan; }
+span:nth-child(2n+1) { background:grey; }
+</style>
+</head>
+<body>
+
+<div style="display:inline-grid; grid:100px/100px 0px; gap:100px; border:1px solid;">
+  <div style="display:grid; grid:100px/140px calc(40px); gap:20px; grid-column:span 2">
+    <span>a</span><span>b</span>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-005.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-005.html
new file mode 100644
index 0000000000..9afba90a52
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-005.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: nested subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="grid-gap-005-ref.html">
+<style>
+html,body {
+  color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
+}
+
+span { background:cyan; }
+span:nth-child(2n+1) { background:grey; }
+</style>
+</head>
+<body>
+
+<div style="display:inline-grid; grid:100px/100px 0px; gap:100px; border:1px solid;">
+  <div style="display:grid; grid:100px/subgrid; gap:20px; grid-column:span 2">
+    <span>a</span><span>b</span>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-006-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-006-ref.html
new file mode 100644
index 0000000000..d94181ddc4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-006-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: nested subgrid, justify-content:space-around, overflowing</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+html,body {
+  color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
+}
+
+body { margin:200px; }
+span { background:cyan; }
+span:nth-child(2n+1) { background:grey; }
+</style>
+</head>
+<body>
+
+<div style="display:inline-grid; grid:100px/100px 10px 10px; gap:100px; border:1px solid; justify-content:center; width:50px">
+  <div style="display:grid; grid:100px/140px 50px; gap:20px; grid-column:span 2">
+    <span>a</span><span>b</span>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-006.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-006.html
new file mode 100644
index 0000000000..d79ced10c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-006.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: nested subgrid, justify-content:space-around, overflowing</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="grid-gap-006-ref.html">
+<style>
+html,body {
+  color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
+}
+
+body { margin:200px; }
+span { background:cyan; }
+span:nth-child(2n+1) { background:grey; }
+</style>
+</head>
+<body>
+
+<div style="display:inline-grid; grid:100px/100px 10px 10px; gap:100px; border:1px solid; justify-content:space-around; width:50px">
+  <div style="display:grid; grid:100px/subgrid; gap:20px; grid-column:span 2">
+    <span>a</span><span>b</span>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-007-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-007-ref.html
new file mode 100644
index 0000000000..84d4c00235
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-007-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: nested ortogonal writing-mode subgrids</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display:inline-grid;
+  grid:60px auto/100px auto;
+  gap:100px 60px;
+  border:3px solid;
+  background:pink;
+}
+span { background:grey; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+</style>
+</head>
+<body>
+
+<div class="grid">
+  <span style="grid-area:1/1; background:lightgrey; width:60px; height:160px"></span>
+  <span style="grid-area:1/1">a</span>
+  <span style="grid-row:2; background:cyan">b</span>
+  <span style="grid-area:2/2" class="vrl">ccc</span>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-007.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-007.html
new file mode 100644
index 0000000000..5b94fe5302
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-007.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: nested ortogonal writing-mode subgrids</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="grid-gap-007-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display:inline-grid;
+  grid:100px auto/100px auto;
+  gap:20px;
+  border:3px solid;
+  background:yellow;
+}
+span { background:cyan; }
+span:nth-child(2n+1) { background:grey; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+</style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="vrl" style="display:grid; grid:subgrid/subgrid; gap:100px; grid-area:span 2/span 2; background:pink">
+    <div class="hl" style="display:grid; grid:subgrid/100px; gap:100px; grid-column:span 2; background:lightgrey">
+      <span>a</span><span>b</span>
+    </div>
+    <span style="grid-area:1/2">ccc</span>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-008-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-008-ref.html
new file mode 100644
index 0000000000..ca8d4b3f1e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-008-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: nested orthogonal writing-mode subgrids with percentage column-gap</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display:inline-grid;
+  grid:100px 375px/300px;
+  border:3px solid;
+  width: 300px;
+  height: 500px;
+  background:lightgrey;
+  row-gap: 25px;
+}
+span {
+  grid-row:2;
+  background:cyan;
+  width:50px;
+}
+</style>
+</head>
+<body>
+
+<div class="grid">
+  <span>ccc</span>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-008.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-008.html
new file mode 100644
index 0000000000..760bd92c3d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-008.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: nested orthogonal writing-mode subgrids with percentage column-gap</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="grid-gap-008-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display:inline-grid;
+  grid:100px auto/200px auto;
+  border:3px solid;
+  background:grey;
+  width: 300px;
+  height: 500px;
+}
+.subgrid {
+  display: grid;
+  grid: 50px / subgrid;
+  column-gap: 10%;
+  grid-area: span 2/span 2;
+  justify-content:end;
+  background:lightgrey;
+}
+span { background:cyan; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+</style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid vlr">
+    <span class="hl">ccc</span>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-009-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-009-ref.html
new file mode 100644
index 0000000000..628e4988b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-009-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: nested orthogonal writing-mode subgrids with percentage row-gap</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display:inline-grid;
+  grid:400px/300px;
+  border:3px solid;
+  background:lightgrey;
+  width:300px;
+  height:400px;
+}
+span {
+  margin-top:350px;
+  margin-right:115px;
+  background:cyan;
+}
+</style>
+</head>
+<body>
+
+<div class="grid">
+  <span>cc</span>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-009.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-009.html
new file mode 100644
index 0000000000..4bbf5c6e81
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-009.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: nested orthogonal writing-mode subgrids with percentage row-gap</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="grid-gap-009-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display:inline-grid;
+  grid:100px auto/200px auto;
+  border:3px solid;
+  background:grey;
+  width:300px;
+  height:400px;
+}
+.subgrid {
+  display: grid;
+  grid: subgrid / 50px;
+  row-gap: 10%;
+  grid-area: span 2/span 2;
+  background:lightgrey;
+}
+span { background:cyan; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+</style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid vlr">
+    <span class="hl">cc</span>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-010-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-010-ref.html
new file mode 100644
index 0000000000..8e13f6e561
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-010-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Subgrids with empty tracks and column gap</title>
+  <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+</head>
+<body>
+<div style="width:100px; height: 100px; background-color: blue; position:relative; left:50px;"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-010.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-010.html
new file mode 100644
index 0000000000..23d67b95dd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-010.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Subgrids with empty tracks and column gap</title>
+  <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="grid-gap-010-ref.html">
+</head>
+<body>
+<div style="display:grid; grid-template-columns: auto 200px; width: 200px">
+    <div style="display:grid; grid-template-columns: subgrid; gap: 100px; grid-column: span 2">
+        <div style="width:100px; height: 100px; background-color: blue; grid-column: 2"></div>
+    </div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-011-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-011-ref.html
new file mode 100644
index 0000000000..23bcdfaa5a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-011-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Subgrids with empty tracks and column gap</title>
+  <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+</head>
+<body>
+<div style="width:200px; height: 100px; background-color: blue; position:relative; left:175px;"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-011.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-011.html
new file mode 100644
index 0000000000..d40ad2640f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-011.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Subgrids with column gap larger than the track size</title>
+  <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="grid-gap-011-ref.html">
+</head>
+<body>
+<div style="display:grid; grid-template-columns: 100px 100px 100px; width: 300px">
+    <div style="display:grid; grid-template-columns: subgrid; gap: 150px; grid-column: span 3">
+        <div style="width:100px; height: 100px; background-color: blue; grid-column: 2"></div>
+        <div style="width:100px; height: 100px; background-color: blue; grid-column: 3"></div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-larger-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-larger-001-ref.html
new file mode 100644
index 0000000000..0d3050f568
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-larger-001-ref.html
@@ -0,0 +1,81 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid grid-gap:20px</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;
+}
+
+  .wrapper {
+    display: grid;
+    gap: 0;
+    grid-template-columns: 150px 100px 150px 100px;
+    grid-template-rows: repeat(3,auto);
+    background-color: #fff;
+    color: #444;
+  }
+
+  .box {
+    background-color: #444;
+    color: #fff;
+    padding: 20px;
+  }
+
+  .box .box {
+    background-color: #ccc;
+    color: #444;
+  }
+
+  .a {
+    grid-column: 1 / 3;
+  }
+
+  .b {
+    grid-column: 4 ;
+  }
+
+  .c {
+    grid-column: 1;
+    grid-row: 2 / 4;
+  }
+
+  .box .f { background-color: purple; }
+  .box .i { background-color: blue; }
+  .box .e { background-color: yellow; }
+  .a { background-color: grey; }
+  .c { background-color: black; }
+  .b { background-color: black; }
+
+  .d {
+    grid-column: 2 / 5;
+    grid-row: 2 / 4;
+    display: grid;
+    gap: 20px;
+    grid: auto / 70px 130px 70px;
+  }
+
+  </style>
+</head>
+<body>
+
+<div class="wrapper">
+  <div class="box a">A</div>
+  <div class="box b">B</div>
+  <div class="box c">C</div>
+  <div class="box d">
+    <div class="box e">E</div>
+    <div class="box f">F</div>
+    <div class="box g">G</div>
+    <div class="box h">H</div>
+    <div class="box i">I</div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-larger-001.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-larger-001.html
new file mode 100644
index 0000000000..85725d5292
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-larger-001.html
@@ -0,0 +1,83 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid grid-gap:20px</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="grid-gap-larger-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+  .wrapper {
+    display: grid;
+    gap: 0;
+    grid-template-columns: 150px 100px 150px 100px;
+    grid-template-rows: repeat(3,auto);
+    background-color: #fff;
+    color: #444;
+  }
+
+  .box {
+    background-color: #444;
+    color: #fff;
+    padding: 20px;
+  }
+
+  .box .box {
+    background-color: #ccc;
+    color: #444;
+  }
+
+  .a {
+    grid-column: 1 / 3;
+  }
+
+  .b {
+    grid-column: 4 ;
+  }
+
+  .c {
+    grid-column: 1;
+    grid-row: 2 / 4;
+  }
+
+  .box .f { background-color: purple; }
+  .box .i { background-color: blue; }
+  .box .e { background-color: yellow; }
+  .a { background-color: grey; }
+  .c { background-color: black; }
+  .b { background-color: black; }
+
+  .d {
+    grid-column: 2 / 5;
+    grid-row: 2 / 4;
+    display: grid;
+    gap: 20px;
+    grid: subgrid / subgrid;
+  }
+
+  </style>
+</head>
+<body>
+
+<div class="wrapper">
+  <div class="box a">A</div>
+  <div class="box b">B</div>
+  <div class="box c">C</div>
+  <div class="box d">
+    <div class="box e">E</div>
+    <div class="box f">F</div>
+    <div class="box g">G</div>
+    <div class="box h">H</div>
+    <div class="box i">I</div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-larger-002-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-larger-002-ref.html
new file mode 100644
index 0000000000..7415de64cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-larger-002-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid with larger gap than parent grid</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;
+  grid:100px auto/100px;
+  gap:20px;
+  border:3px solid;
+  background:yellow;
+}
+span { background:lightgrey; }
+span:nth-child(2n+1) { background:grey; }
+</style>
+</head>
+<body>
+
+<div class="grid">
+  <span style="height:60px">a</span><span style="margin-top:40px">b</span>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-larger-002.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-larger-002.html
new file mode 100644
index 0000000000..4565be1b80
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-larger-002.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid with larger gap than parent grid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="grid-gap-larger-002-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display:inline-grid;
+  grid:100px auto/100px;
+  gap:20px;
+  border:3px solid;
+  background:yellow;
+}
+span { background:lightgrey; }
+span:nth-child(2n+1) { background:grey; }
+</style>
+</head>
+<body>
+
+<div class="grid">
+  <div style="display:grid; grid:subgrid/100px; gap:100px; grid-row:span 2">
+    <span>a</span><span>b</span>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-normal-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-normal-001-ref.html
new file mode 100644
index 0000000000..ee99c02410
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-normal-001-ref.html
@@ -0,0 +1,75 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid grid-gap:normal</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;
+}
+
+  .wrapper {
+    display: grid;
+    gap: 10px;
+    grid-template-columns: 150px 100px 150px 100px;
+    grid-template-rows: repeat(3,minmax(100px,auto));
+    background-color: #fff;
+    color: #444;
+  }
+
+  .box {
+    background-color: #444;
+    color: #fff;
+    padding: 20px;
+  }
+
+  .box .box {
+    background-color: #ccc;
+    color: #444;
+  }
+
+  .a {
+    grid-column: 1 / 3;
+  }
+
+  .b {
+    grid-column: 4 ;
+  }
+
+  .c {
+    grid-column: 1;
+    grid-row: 2 / 4;
+  }
+
+  .d {
+    grid-column: 2 / 5;
+    grid-row: 2 / 4;
+    display: grid;
+    gap: 10px;
+    grid-template-columns: 80px 150px 80px;
+    grid-template-rows: 80px 80px;
+  }
+
+  </style>
+</head>
+<body>
+
+<div class="wrapper">
+  <div class="box a">A</div>
+  <div class="box b">B</div>
+  <div class="box c">C</div>
+  <div class="box d">
+    <div class="box e">E</div>
+    <div class="box f">F</div>
+    <div class="box g">G</div>
+    <div class="box h">H</div>
+    <div class="box i">I</div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-normal-001.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-normal-001.html
new file mode 100644
index 0000000000..5edf1e0762
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-normal-001.html
@@ -0,0 +1,76 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid grid-gap:normal</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="grid-gap-normal-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+  .wrapper {
+    display: grid;
+    gap: 10px;
+    grid-template-columns: 150px 100px 150px 100px;
+    grid-template-rows: repeat(3,minmax(100px,auto));
+    background-color: #fff;
+    color: #444;
+  }
+
+  .box {
+    background-color: #444;
+    color: #fff;
+    padding: 20px;
+  }
+
+  .box .box {
+    background-color: #ccc;
+    color: #444;
+  }
+
+  .a {
+    grid-column: 1 / 3;
+  }
+
+  .b {
+    grid-column: 4 ;
+  }
+
+  .c {
+    grid-column: 1;
+    grid-row: 2 / 4;
+  }
+
+  .d {
+    grid-column: 2 / 5;
+    grid-row: 2 / 4;
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-template-rows: subgrid;
+  }
+
+  </style>
+</head>
+<body>
+
+<div class="wrapper">
+  <div class="box a">A</div>
+  <div class="box b">B</div>
+  <div class="box c">C</div>
+  <div class="box d">
+    <div class="box e">E</div>
+    <div class="box f">F</div>
+    <div class="box g">G</div>
+    <div class="box h">H</div>
+    <div class="box i">I</div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-smaller-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-smaller-001-ref.html
new file mode 100644
index 0000000000..fcd6851e2f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-smaller-001-ref.html
@@ -0,0 +1,82 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid grid-gap:0px</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;
+}
+
+  .wrapper {
+    display: grid;
+    gap: 20px;
+    grid-template-columns: 170px 100px 190px 100px;
+    grid-template-rows: repeat(3,auto);
+    gap: 0;
+    background-color: #fff;
+    color: #444;
+  }
+
+  .box {
+    background-color: #444;
+    color: #fff;
+    padding: 20px;
+  }
+
+  .box .box {
+    background-color: #ccc;
+    color: #444;
+  }
+
+  .a {
+    grid-column: 1 / 3;
+    margin-bottom: 20px;
+  }
+
+  .b {
+    grid-column: 4 ;
+    margin-bottom: 20px;
+  }
+
+  .c {
+    grid-column: 1;
+    grid-row: 2 / 4;
+    margin-right: 20px;
+  }
+
+  .box .f { background-color: purple; }
+  .box .i { background-color: blue; }
+  .box .e { background-color: yellow; }
+
+  .d {
+    grid-column: 2 / 5;
+    grid-row: 2 / 4;
+    display: grid;
+    gap: 0;
+    grid-template-columns: 90px 170px 90px;
+  }
+
+  </style>
+</head>
+<body>
+
+<div class="wrapper">
+  <div class="box a">A</div>
+  <div class="box b">B</div>
+  <div class="box c">C</div>
+  <div class="box d">
+    <div class="box e">E</div>
+    <div class="box f">F</div>
+    <div class="box g">G</div>
+    <div class="box h">H</div>
+    <div class="box i">I</div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-smaller-001.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-smaller-001.html
new file mode 100644
index 0000000000..7b59acd700
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-smaller-001.html
@@ -0,0 +1,80 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid grid-gap:0px</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="grid-gap-smaller-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+  .wrapper {
+    display: grid;
+    gap: 20px;
+    grid-template-columns: 150px 100px 150px 100px;
+    grid-template-rows: repeat(3,auto);
+    background-color: #fff;
+    color: #444;
+  }
+
+  .box {
+    background-color: #444;
+    color: #fff;
+    padding: 20px;
+  }
+
+  .box .box {
+    background-color: #ccc;
+    color: #444;
+  }
+
+  .a {
+    grid-column: 1 / 3;
+  }
+
+  .b {
+    grid-column: 4 ;
+  }
+
+  .c {
+    grid-column: 1;
+    grid-row: 2 / 4;
+  }
+
+  .box .f { background-color: purple; }
+  .box .i { background-color: blue; }
+  .box .e { background-color: yellow; }
+
+  .d {
+    grid-column: 2 / 5;
+    grid-row: 2 / 4;
+    display: grid;
+    gap: 0;
+    grid: subgrid / subgrid;
+  }
+
+  </style>
+</head>
+<body>
+
+<div class="wrapper">
+  <div class="box a">A</div>
+  <div class="box b">B</div>
+  <div class="box c">C</div>
+  <div class="box d">
+    <div class="box e">E</div>
+    <div class="box f">F</div>
+    <div class="box g">G</div>
+    <div class="box h">H</div>
+    <div class="box i">I</div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-subgridded-axis-auto-repeater-crash-001.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-subgridded-axis-auto-repeater-crash-001.html
new file mode 100644
index 0000000000..2edb01db08
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-subgridded-axis-auto-repeater-crash-001.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid with a subgridded axis and an auto repeater as line name list</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <style>
+    #grid {
+      display: grid;
+      grid-template-columns: subgrid repeat(auto-fill, [b]);
+    }
+  </style>
+</head>
+<body>
+  <div id="grid">
+    <div style="grid-column: b"></div>
+  </div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-subgridded-axis-auto-repeater-crash-002.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-subgridded-axis-auto-repeater-crash-002.html
new file mode 100644
index 0000000000..42bcbcfab0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-subgridded-axis-auto-repeater-crash-002.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid with a subgridded axis and an auto repeater as line name list</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <style>
+    #grid {
+      display: grid;
+      position: relative;
+      grid-template-columns: subgrid repeat(auto-fill, [b]);
+    }
+  </style>
+</head>
+<body>
+  <div id="grid">
+    <div style="position: absolute; grid-column: b"></div>
+  </div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-subgridded-axis-auto-repeater-crash-003.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-subgridded-axis-auto-repeater-crash-003.html
new file mode 100644
index 0000000000..eeb97967f7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-subgridded-axis-auto-repeater-crash-003.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid with a subgridded axis and an auto repeater as line name list</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2">
+<style>
+  .grid {
+    display: grid;
+  }
+  .subgrid {
+    grid-template-columns: subgrid repeat(auto-fill, [x]);
+  }
+</style>
+</head>
+<body>
+  <div class="grid">
+    <div class="grid subgrid">
+      <div style="grid-column: x"></div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-template-computed-nogrid.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-template-computed-nogrid.html
new file mode 100644
index 0000000000..1f37ce860a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-template-computed-nogrid.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title>
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#resolved-track-list" "title"="2.3. Resolved Value of a Track Listing">
+<meta name="assert" content="Checks the resolved value of grid-template-columns or grid-template-columns on an element which is not a grid container.">
+<style>
+#target {
+  display: block;
+  height: 1px;
+  font-size: 1px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<div id="target"></div>
+<script>
+test_computed_value("grid-template-columns", "subgrid []");
+test_computed_value("grid-template-columns", "subgrid [a]");
+test_computed_value("grid-template-columns", "subgrid [a] [b]");
+test_computed_value("grid-template-columns", "subgrid [] [b]");
+test_computed_value("grid-template-columns", "subgrid [a] [b] [b] [c]");
+test_computed_value("grid-template-columns", "subgrid [a] [b c d] [e f] [e f] [g]");
+test_computed_value("grid-template-columns", "subgrid [a b c] [d] [e f]");
+test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [c])");
+test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [])");
+test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [c]) [g] [h i]");
+test_computed_value("grid-template-columns", "subgrid [a] repeat(auto-fill, [c]) [g] [h i]");
+test_computed_value("grid-template-columns", "subgrid [a b] repeat(auto-fill, [c]) [g]");
+test_computed_value("grid-template-columns", "subgrid [a] [b] repeat(auto-fill, [c]) [g h]");
+test_computed_value("grid-template-columns", "subgrid [a] [b] repeat(auto-fill, [c])");
+test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [c d])");
+test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [c d]) [g] [h i]");
+test_computed_value("grid-template-columns", "subgrid [a] repeat(auto-fill, [c d]) [g] [h i]");
+test_computed_value("grid-template-columns", "subgrid [a b] repeat(auto-fill, [c d]) [g]");
+test_computed_value("grid-template-columns", "subgrid [a] [b] repeat(auto-fill, [c d]) [g h]");
+test_computed_value("grid-template-columns", "subgrid [a] [b] repeat(auto-fill, [c d])");
+test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [c] [d])");
+test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [c] [d]) [g] [h i]");
+test_computed_value("grid-template-columns", "subgrid [a] repeat(auto-fill, [c] [d]) [g] [h i]");
+test_computed_value("grid-template-columns", "subgrid [a b] repeat(auto-fill, [c] [d]) [g]");
+test_computed_value("grid-template-columns", "subgrid [a] [b] repeat(auto-fill, [c] [d]) [g h]");
+test_computed_value("grid-template-columns", "subgrid [a] [b] repeat(auto-fill, [c] [d])");
+test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [c] [d e])");
+test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [c] [d e]) [g] [h i]");
+test_computed_value("grid-template-columns", "subgrid [a] repeat(auto-fill, [c] [d e]) [g] [h i]");
+test_computed_value("grid-template-columns", "subgrid [a b] repeat(auto-fill, [c] [d e]) [g]");
+test_computed_value("grid-template-columns", "subgrid [a] [b] repeat(auto-fill, [c] [d e]) [g h]");
+test_computed_value("grid-template-columns", "subgrid [a] [b] repeat(auto-fill, [c] [d e])");
+test_computed_value("grid-template-columns", "subgrid [a] repeat(2, [c] [d e])");
+test_computed_value("grid-template-columns", "subgrid repeat(1, [])");
+test_computed_value("grid-template-columns", "subgrid repeat(2, [])");
+test_computed_value("grid-template-columns", "subgrid repeat(2, [a])");
+test_computed_value("grid-template-columns", "subgrid repeat(2, [a] [])");
+test_computed_value("grid-template-columns", "subgrid repeat(2, [] [a] [])");
+test_computed_value("grid-template-columns", "subgrid repeat(2, [] [] []) repeat(auto-fill, [] [] [])");
+test_computed_value("grid-template-columns", "subgrid repeat(1, [a b])");
+test_computed_value("grid-template-columns", "subgrid repeat(2, [a b])");
+test_computed_value("grid-template-columns", "subgrid repeat(1, [a] [b])");
+test_computed_value("grid-template-columns", "subgrid repeat(2, [a] [b])");
+test_computed_value("grid-template-columns", "subgrid [a] repeat(2, [b])");
+test_computed_value("grid-template-columns", "subgrid repeat(2, [a]) [b]");
+test_computed_value("grid-template-columns", "subgrid [a] repeat(2, [b] [c d]) [e]");
+test_computed_value("grid-template-columns", "subgrid repeat(2, [a b]) repeat(auto-fill, [c] [d e])");
+test_computed_value("grid-template-columns", "subgrid repeat(auto-fill, [a] [b c]) repeat(2, [d e])");
+test_computed_value("grid-template-columns", "subgrid repeat(2, [a b]) repeat(auto-fill, [c] [d e]) repeat(2, [f g])");
+test_computed_value("grid-template-columns", "subgrid [a] [b c] repeat(2, [d e]) [f] [g h] repeat(auto-fill, [i] [j k]) [l] repeat(2, [m n]) [o]");
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-template-invalid.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-template-invalid.html
new file mode 100644
index 0000000000..d7c12be3fd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-template-invalid.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing 'grid' with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2">
+<meta name="assert" content="grid-template supports the grammar `none | <track-list> | <auto-track-list> | subgrid <line-name-list>?`.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+
+// <'grid-template'> invalid values
+test_invalid_value("grid-template-rows", 'subgrid subgrid');
+test_invalid_value("grid-template-rows", 'subgrid none');
+test_invalid_value("grid-template-rows", 'subgrid 1px');
+test_invalid_value("grid-template-rows", 'subgrid [a] 1px');
+test_invalid_value("grid-template-rows", 'subgrid repeat(auto-fill, 1px)');
+test_invalid_value("grid-template-rows", 'subgrid repeat(auto-fill, line)');
+test_invalid_value("grid-template-rows", 'subgrid repeat(2, 1px)');
+test_invalid_value("grid-template-rows", 'subgrid repeat(2, line)');
+test_invalid_value("grid-template-rows", 'subgrid repeat(2,');
+test_invalid_value("grid-template-rows", 'subgrid repeat(auto-fill, [a]) repeat(auto-fill, [b]');
+
+test_invalid_value("grid-template-columns", 'subgrid subgrid');
+test_invalid_value("grid-template-columns", 'subgrid none');
+test_invalid_value("grid-template-columns", 'subgrid 1px');
+test_invalid_value("grid-template-columns", 'subgrid [a] 1px');
+test_invalid_value("grid-template-columns", 'subgrid repeat(auto-fill, 1px)');
+test_invalid_value("grid-template-columns", 'subgrid repeat(auto-fill, line)');
+test_invalid_value("grid-template-columns", 'subgrid repeat(2, 1px)');
+test_invalid_value("grid-template-columns", 'subgrid repeat(2, line)');
+test_invalid_value("grid-template-columns", 'subgrid repeat(2,');
+test_invalid_value("grid-template-columns", 'subgrid repeat(auto-fill, [a]) repeat(auto-fill, [b]');
+
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-template-valid.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-template-valid.html
new file mode 100644
index 0000000000..d568e973e9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-template-valid.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing 'grid' with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2">
+<meta name="assert" content="grid-template supports the grammar `none | <track-list> | <auto-track-list> | subgrid <line-name-list>?`.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+
+// <'grid-template'> values
+test_valid_value("grid-template-rows", 'subgrid');
+test_valid_value("grid-template-rows", 'subgrid [a]');
+test_valid_value("grid-template-rows", 'subgrid [a] [b]');
+test_valid_value("grid-template-rows", 'subgrid [a] [b] [c]');
+test_valid_value("grid-template-rows", 'subgrid []');
+test_valid_value("grid-template-rows", 'subgrid [a] [b] [] [c]');
+test_valid_value("grid-template-rows", 'subgrid [] [] [] [c]');
+test_valid_value("grid-template-rows", 'subgrid [] [] [] []');
+test_valid_value("grid-template-rows", 'subgrid repeat(auto-fill, [a])');
+test_valid_value("grid-template-rows", 'subgrid repeat(auto-fill, [])');
+test_valid_value("grid-template-rows", 'subgrid [a] repeat(auto-fill, [b])');
+test_valid_value("grid-template-rows", 'subgrid [a] repeat(auto-fill, [b]) [c]');
+test_valid_value("grid-template-rows", 'subgrid [] repeat(auto-fill, []) []');
+test_valid_value("grid-template-rows", 'subgrid repeat(2, [a])');
+test_valid_value("grid-template-rows", 'subgrid repeat(2, [a] [b])');
+test_valid_value("grid-template-rows", 'subgrid [a] repeat(2, [b])');
+test_valid_value("grid-template-rows", 'subgrid [a] repeat(2, [b]) [c]');
+test_valid_value("grid-template-rows", 'subgrid [] repeat(2, []) []');
+test_valid_value("grid-template-rows", 'subgrid [a] repeat(2, [b]) repeat(auto-fill, [c]) [d]');
+
+test_valid_value("grid-template-columns", 'subgrid');
+test_valid_value("grid-template-columns", 'subgrid [a]');
+test_valid_value("grid-template-columns", 'subgrid [a] [b]');
+test_valid_value("grid-template-columns", 'subgrid [a] [b] [c]');
+test_valid_value("grid-template-columns", 'subgrid []');
+test_valid_value("grid-template-columns", 'subgrid [a] [b] [] [c]');
+test_valid_value("grid-template-columns", 'subgrid [] [] [] [c]');
+test_valid_value("grid-template-columns", 'subgrid [] [] [] []');
+test_valid_value("grid-template-columns", 'subgrid repeat(auto-fill, [a])');
+test_valid_value("grid-template-columns", 'subgrid repeat(auto-fill, [])');
+test_valid_value("grid-template-columns", 'subgrid [a] repeat(auto-fill, [b])');
+test_valid_value("grid-template-columns", 'subgrid [a] repeat(auto-fill, [b]) [c]');
+test_valid_value("grid-template-columns", 'subgrid [] repeat(auto-fill, []) []');
+test_valid_value("grid-template-columns", 'subgrid repeat(2, [a])');
+test_valid_value("grid-template-columns", 'subgrid repeat(2, [a] [b])');
+test_valid_value("grid-template-columns", 'subgrid [a] repeat(2, [b])');
+test_valid_value("grid-template-columns", 'subgrid [a] repeat(2, [b]) [c]');
+test_valid_value("grid-template-columns", 'subgrid [] repeat(2, []) []');
+test_valid_value("grid-template-columns", 'subgrid [a] repeat(2, [b]) repeat(auto-fill, [c]) [d]');
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/independent-formatting-context-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/independent-formatting-context-ref.html
new file mode 100644
index 0000000000..fe842b2823
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/independent-formatting-context-ref.html
@@ -0,0 +1,53 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid disabled if grid item establishes independent formatting context</title>
+  <link rel="author" title="Matt Woodrow" href="https://bugs.webkit.org/show_bug.cgi?id=237692">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing">
+  <style>
+
+html,body {
+  font:16px/1 monospace; padding:0; margin:0; line-height: 0;
+}
+
+.grid {
+  display: inline-block;
+  background-color: green;
+  width: 100px;
+  height: 100px;
+  margin-right: 20px;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+</div>
+
+<div class="grid">
+</div>
+
+<div class="grid">
+</div>
+
+<div class="grid">
+</div>
+
+<div class="grid">
+</div>
+
+<div class="grid">
+</div>
+
+<div class="grid">
+</div>
+
+<div class="grid">
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/independent-formatting-context.html b/testing/web-platform/tests/css/css-grid/subgrid/independent-formatting-context.html
new file mode 100644
index 0000000000..5a76ac2d6d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/independent-formatting-context.html
@@ -0,0 +1,101 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Test: subgrid disabled if grid item establishes independent formatting context</title>
+  <link rel="author" title="Matt Woodrow" href="https://bugs.webkit.org/show_bug.cgi?id=237692">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing">
+  <link rel="match" href="independent-formatting-context-ref.html">
+  <style>
+
+html,body {
+  font:16px/1 monospace; padding:0; margin:0; line-height: 0;
+}
+
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-rows: 0px 100px;
+  width: 100px;
+  margin-right: 20px;
+}
+
+.subgrid {
+  display: grid;
+  grid-template-rows: subgrid;
+  grid-row: 1 / 3;
+  width: 100px;
+  height: 100px;
+  background-color: red;
+}
+
+.first {
+  grid-row: 1;
+  background-color: green;
+}
+
+.second {
+  grid-row: 2;
+  background-color: green;
+}
+
+  </style>
+</head>
+<body>
+<!-- The subgrid's style attribute establishes an independent formatting context
+      and makes them no longer eligible as subgrids.-->
+<div class="grid">
+  <div class="subgrid" style="position:absolute">
+    <div class="first"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="contain: layout">
+    <div class="first"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="contain: paint">
+    <div class="first"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="contain: strict">
+    <div class="first"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="contain: content">
+    <div class="first"></div>
+  </div>
+</div>
+
+<!-- Only layout and paint containment establish an independent formatting
+      context. These tests validate that other types of containment maintain
+      subgrid layout.-->
+<div class="grid">
+  <div class="subgrid" style="contain: none">
+    <div class="second"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="contain: size">
+    <div class="second"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="contain: style">
+    <div class="second"></div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/item-percentage-height-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/item-percentage-height-001-ref.html
new file mode 100644
index 0000000000..44f0d443ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/item-percentage-height-001-ref.html
@@ -0,0 +1,56 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid item percentage height</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style type="text/css">
+
+.wrapper {
+  padding: 2px;
+  padding-top: 5px;
+  border: 1px solid;
+}
+.grid {
+  display: grid;
+  grid: auto auto / auto;
+  grid-row-gap: 60px;
+  height: 300px;
+  background: lightgrey;
+}
+
+.subgrid {
+  display: grid;
+  grid: subgrid / auto;
+  grid-row: span 2;
+  grid-row-gap: 40px;
+  padding: 10px;
+  padding-top: 5px;
+}
+
+.item {
+  align-self: start;
+  width: 100px;
+  background: grey;
+  margin-left: 10px;
+}
+
+.hidden { visibility: hidden; }
+.a1 { grid-area: 1/1; }
+.a2 { grid-area: 2/1; }
+  </style>
+</head>
+<body>
+
+<div class="wrapper">
+<div class="grid">
+  <div class="item hidden a1" style="height:25px"></div><div class="item a1" style="margin-top:5px; margin-bottom:-10px; align-self:stretch"></div>
+  <div class="item hidden a2" style="height:120px"></div><div class="item a2" style="margin-top:-10px; height:100px"></div>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/item-percentage-height-001.html b/testing/web-platform/tests/css/css-grid/subgrid/item-percentage-height-001.html
new file mode 100644
index 0000000000..15e996ea32
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/item-percentage-height-001.html
@@ -0,0 +1,53 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid item percentage height</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="item-percentage-height-001-ref.html">
+  <style type="text/css">
+
+.grid {
+  display: grid;
+  grid: auto auto / auto;
+  grid-row-gap: 60px;
+  border: 1px solid;
+  padding: 2px;
+  padding-top: 5px;
+  height: 300px;
+}
+
+.subgrid {
+  display: grid;
+  grid: subgrid / auto;
+  grid-row: span 2;
+  grid-row-gap: 40px;
+  background: lightgrey;
+  padding: 10px;
+  padding-top: 5px;
+}
+
+.item {
+  align-self: start;
+  height: 100%;
+  width: 100px;
+  background: grey;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid">
+    <div class="item"></div>
+    <div class="item" style="height:100px"></div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-001-ref.html
new file mode 100644
index 0000000000..04c5839596
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-001-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid item using line names from outer grid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: auto / [a] 50px 50px [a] 50px 50px [a];
+  padding: 20px 10px;
+}
+
+.subgrid {
+  display: grid;
+  grid: 50px / subgrid;
+  grid-column: span 3;
+}
+
+x { background: grey; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid">
+    <x style="grid-column: 1 / 3"></x>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-001.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-001.html
new file mode 100644
index 0000000000..69c300d864
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-001.html
@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid item using line names from outer grid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="line-names-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: auto / [a] 50px 50px [a] 50px 50px [a];
+  padding: 20px 10px;
+}
+
+.subgrid {
+  display: grid;
+  grid: 50px / subgrid;
+  grid-column: span 3;
+}
+
+x { background: grey; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid">
+    <x style="grid-column: span a / a -1"></x>
+  </div>
+</div>
+
+<script>
+  const expectedResults = [
+    "subgrid [] [] [] []",
+  ];
+  [...document.querySelectorAll('.subgrid')].forEach(function(subgrid, i) {
+    let actual = window.getComputedStyle(subgrid)['grid-template-columns'];
+    let expected = expectedResults[i];
+    if (actual != expected) {
+      let err = "Unexpected getComputedStyle value for subgrid " + i + " with className '" + subgrid.className + "':" +
+      " Actual: \"" + actual + "\", Expected: \"" + expected + "\"";
+      document.body.appendChild(document.createTextNode(err));
+    }
+  });
+</script>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-002-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-002-ref.html
new file mode 100644
index 0000000000..2399328bec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-002-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid item using line names from outer grid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: auto / [a] 50px 40px [a] 10px 50px [a];
+  padding: 20px 10px;
+}
+
+.subgrid {
+  display: grid;
+  grid: 50px / subgrid;
+  grid-column: span 3;
+}
+
+x { background: grey; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid">
+    <x style="grid-column: 3 / 4"></x>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-002.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-002.html
new file mode 100644
index 0000000000..574e353f87
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-002.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid item using line names from outer grid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="line-names-002-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: auto / repeat(10, 10px) repeat(10, [a] 10px) [a];
+  padding: 20px 10px;
+}
+
+.subgrid {
+  display: grid;
+  grid: 50px / subgrid;
+  grid-column: span 10;
+}
+
+x { background: grey; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid">
+    <x style="grid-column: span a / a 8"></x>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-003.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-003.html
new file mode 100644
index 0000000000..43afaf9414
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-003.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: nested subgrid item using line names from outer grid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="line-names-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: auto / [a] 50px 50px [a] 50px 50px [a];
+  padding: 20px 10px;
+}
+
+.subgrid {
+  display: grid;
+  grid: 50px / subgrid;
+  grid-column: span 4;
+}
+
+x { background: grey; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid">
+    <div class="subgrid" style="grid-column: span 3">
+      <x style="grid-column: span a / a -1"></x>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-004-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-004-ref.html
new file mode 100644
index 0000000000..6ceb9d4927
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-004-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid item using mix of outer/inner line names</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: auto / [a] 50px 50px 50px 50px [b] 50px 50px [a b];
+  padding: 20px 10px;
+}
+
+.subgrid {
+  display: grid;
+  grid-template-columns:  subgrid [x] [b] [] [] [b];
+  grid-auto-rows: 10px;
+  grid-column: 2 / span 4;
+}
+
+x { background: grey; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid">
+    <x style="grid-row:1; grid-column: 2 / 4"></x>
+    <x style="grid-row:2; grid-column: 2 / 5"></x>
+    <x style="grid-row:3; grid-column: 2 / 4"></x>
+    <x style="grid-row:4; grid-column: 2 / 4"></x>
+    <x style="grid-row:5; grid-column: 2 / 5"></x>
+    <x style="grid-row:6; grid-column: 2 / 4"></x>
+    <x style="grid-row:7; grid-column: 1 / 4"></x>
+    <x style="grid-row:8; grid-column: 2 / 4"></x>
+    <x style="grid-row:9; grid-column: 2 / 3"></x>
+    <x style="grid-row:10; grid-column: 2 / 3"></x>
+    <x style="grid-row:11; grid-column: 2 / 5"></x>
+    <x style="grid-row:12; grid-column: 2 / 4"></x>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-004.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-004.html
new file mode 100644
index 0000000000..84f727d2e3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-004.html
@@ -0,0 +1,69 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid item using mix of outer/inner line names</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="line-names-004-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:24px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: auto / [a] 50px 50px 50px 50px [b] 50px 50px [a b];
+  padding: 20px 10px;
+}
+
+.subgrid {
+  display: grid;
+  grid-template-columns:  subgrid [x] [b] [] [] [b];
+  grid-auto-rows: 10px;
+  grid-column: 2 / span 4;
+}
+
+x { background: grey; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid">
+    <x style="grid-row:1; grid-column: b / b 2"></x>
+    <x style="grid-row:2; grid-column: b / b -1"></x>
+    <x style="grid-row:3; grid-column: b / b -2"></x>
+    <x style="grid-row:4; grid-column: b / span b"></x>
+    <x style="grid-row:5; grid-column: b / span b 2"></x>
+    <x style="grid-row:6; grid-column: span b / b 2"></x>
+    <x style="grid-row:7; grid-column: span b 2 / b 2"></x>
+    <x style="grid-row:8; grid-column: b -2 / b"></x>
+    <x style="grid-row:9; grid-column: b -3 / b"></x>
+    <x style="grid-row:10; grid-column: b / b"></x>
+    <x style="grid-row:11; grid-column: b / b 10"></x>
+    <x style="grid-row:12; grid-column: span b / b -2"></x>
+  </div>
+</div>
+
+<script>
+  const expectedResults = [
+    "subgrid [x] [b] [] [] [b]",
+  ];
+  [...document.querySelectorAll('.subgrid')].forEach(function(subgrid, i) {
+    let actual = window.getComputedStyle(subgrid)['grid-template-columns'];
+    let expected = expectedResults[i];
+    if (actual != expected) {
+      let err = "Unexpected getComputedStyle value for subgrid " + i + " with className '" + subgrid.className + "':" +
+      " Actual: \"" + actual + "\", Expected: \"" + expected + "\"";
+      document.body.appendChild(document.createTextNode(err));
+    }
+  });
+</script>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-005-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-005-ref.html
new file mode 100644
index 0000000000..44bb0e0dbb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-005-ref.html
@@ -0,0 +1,153 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid line name resolution</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: [a] repeat(1, [b] auto [c]) [d] repeat(3, [b] auto [c]) [d] /
+        [a] 30px [b] 30px [c] 30px [] 30px [e-start] 30px [] 30px [x] 30px [h] 30px [i] 30px [j] 30px [k];
+  grid-template-areas: ". . . e . . . . . . .";
+  place-content: start;
+  border: 1px solid;
+  width: 500px;
+  grid-auto-columns: 100px;
+  grid-auto-rows: 100px;
+}
+
+.subgrid {
+  display: grid;
+  grid: auto / subgrid;
+  background: lightgrey;
+  grid-column: 2 / span 8;
+  grid-row: 2 / span 2;
+  min-width:0;
+  min-height:0;
+}
+
+.subgrid2 {
+  display: grid;
+  grid: auto / subgrid [] [] [] [b];
+  grid-column: span 10;
+}
+
+.subgrid#s1 {
+  grid-template-areas: ". e e . . . .";
+}
+
+i {
+  grid-row: 1;
+  counter-increment: i;
+}
+i::before { content: counter(i, decimal); }
+
+x {
+  min-width:10px;
+  min-height:20px;
+  background:silver;
+}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid" id="s1">
+  <x style="grid-column:10 / span 4">x</x>
+</div>
+</div>
+
+<div class="grid hr">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hl" id="s2">
+  <x style="grid-column: 10 / span 4">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr" id="s2">
+  <x style="grid-column: 10 / span 4">x</x>
+</div>
+</div>
+
+<div style="display:grid; width:500px; grid-auto-columns: 50px;">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="subgrid2">
+    <x style="grid-column:1 / 4">x</x>
+  </div>
+</div>
+
+<div style="display:grid; width:500px; grid-auto-columns: 50px;">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="subgrid2">
+    <x style="grid-column:10 / span 4">x</x>
+  </div>
+</div>
+
+<div style="display:grid; width:500px; grid-auto-columns: 50px;">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="subgrid2">
+    <x style="grid-column: 1 / -1">x</x>
+  </div>
+</div>
+
+<div style="display:grid; width:500px; grid-auto-columns: 50px;">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="subgrid2">
+    <x style="grid-row:2; grid-column: 1 / -1">x</x>
+  </div>
+</div>
+
+<div style="display:grid; width:500px; grid-auto-columns: 50px;">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="subgrid2">
+    <x style="grid-column: span 3 / 11">x</x>
+  </div>
+</div>
+
+<div style="display:grid; width:500px; grid-auto-columns: 50px; grid: auto / repeat(20, [a] 50px) [a] ">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="subgrid2" style="grid-row:2">
+    <x style="grid-column: 10 / 11">x</x>
+  </div>
+</div>
+
+<div style="display:grid; grid: auto / repeat(10, 50px) repeat(10, [a] 50px) [a]">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column: span 10; grid-row:2">
+    <x style="grid-column: 10 / 11">x</x>
+  </div>
+</div>
+
+<div style='display:grid; grid-template-areas: "a a a a a a a a a a"'>
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column: 6 / span 5; grid-row:2">
+    <x style="grid-column: 1 / 6">x</x>
+  </div>
+</div>
+
+<div style='display:grid; grid-template-areas: ". . . . . . a a a a"'>
+<div style='display:grid; grid-template-areas: ". . . . . . . a a ."; grid-template-columns:subgrid; grid-column:span 10;'>
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column: 6 / span 5; grid-row:2">
+    <x style="grid-column: 2 / 5">x</x>
+  </div>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-005.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-005.html
new file mode 100644
index 0000000000..26be899e93
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-005.html
@@ -0,0 +1,182 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid line name resolution</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="line-names-005-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: [a] repeat(1, [b] auto [c]) [d] repeat(3, [b] auto [c]) [d] /
+        [a] 30px [b] 30px [c] 30px [] 30px [e-start] 30px [] 30px [x] 30px [h] 30px [i] 30px [j] 30px [k];
+  grid-template-areas: ". . . e . . . . . . .";
+  place-content: start;
+  border: 1px solid;
+  width: 500px;
+  grid-auto-columns: 100px;
+  grid-auto-rows: 100px;
+}
+
+.subgrid {
+  display: grid;
+  grid: auto / subgrid;
+  background: lightgrey;
+  grid-column: 2 / span 8;
+  grid-row: 2 / span 2;
+  min-width:0;
+  min-height:0;
+}
+
+.subgrid2 {
+  display: grid;
+  grid: auto / subgrid [] [] [] [b];
+  grid-column: span 10;
+}
+
+.subgrid#s1 {
+  grid-template-areas: ". e e . . . .";
+}
+
+i {
+  grid-row: 1;
+  counter-increment: i;
+}
+i::before { content: counter(i, decimal); }
+
+x {
+  min-width:10px;
+  min-height:20px;
+  background:silver;
+}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid" id="s1">
+  <x style="grid-column:foo / span 4">x</x>
+</div>
+</div>
+
+<div class="grid hr">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hl" id="s2">
+  <x style="grid-column: x 6 / span 4">x</x>
+</div>
+</div>
+
+<div class="grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+<div class="subgrid hr" id="s2">
+  <x style="grid-column: x 6 / span 4">x</x>
+</div>
+</div>
+
+<div style="display:grid; width:500px; grid-auto-columns: 50px;">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="subgrid2">
+    <x style="grid-column:1 / b">x</x>
+  </div>
+</div>
+
+<div style="display:grid; width:500px; grid-auto-columns: 50px;">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="subgrid2">
+    <x style="grid-column:foo / span 4">x</x>
+  </div>
+</div>
+
+<div style="display:grid; width:500px; grid-auto-columns: 50px;">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="subgrid2">
+    <x style="grid-column: span bar / foo 3">x</x>
+  </div>
+</div>
+
+<div style="display:grid; width:500px; grid-auto-columns: 50px;">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="subgrid2">
+    <x style="grid-row:2; grid-column: span bar / foo 3">x</x>
+  </div>
+</div>
+
+<div style="display:grid; width:500px; grid-auto-columns: 50px;">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="subgrid2">
+    <x style="grid-column:span 4 / foo">x</x>
+  </div>
+</div>
+
+<div style="display:grid; width:500px; grid-auto-columns: 50px; grid: auto / repeat(20, [a] 50px) [a] ">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="subgrid2" style="grid-row:2">
+    <x style="grid-column:foo / span 4">x</x>
+  </div>
+</div>
+
+<div style="display:grid; grid: auto / repeat(10, 50px) repeat(10, [a] 50px) [a]">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column: span 10; grid-row:2">
+    <x style="grid-column: span a / a 8">x</x>
+  </div>
+</div>
+
+<div style='display:grid; grid-template-areas: "a a a a a a a a a a"'>
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column: 6 / span 5; grid-row:2">
+    <x style="grid-column: a">x</x>
+  </div>
+</div>
+
+<div style='display:grid; grid-template-areas: ". . . . . . a a a a"'>
+<div style='display:grid; grid-template-areas: ". . . . . . . a a ."; grid-template-columns:subgrid; grid-column:span 10;'>
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column: 6 / span 5; grid-row:2">
+    <x style="grid-column: a">x</x>
+  </div>
+</div>
+</div>
+
+<script>
+  const expectedResults = [
+    "subgrid [] [] [] [] [] [] [] [] []",
+    "subgrid [] [] [] [] [] [] [] [] []",
+    "subgrid [] [] [] [] [] [] [] [] []",
+    "subgrid [] [] [] [b] [] [] [] [] [] [] []",
+    "subgrid [] [] [] [b] [] [] [] [] [] [] []",
+    "subgrid [] [] [] [b] [] [] [] [] [] [] []",
+    "subgrid [] [] [] [b] [] [] [] [] [] [] []",
+    "subgrid [] [] [] [b] [] [] [] [] [] [] []",
+    "subgrid [] [] [] [b] [] [] [] [] [] [] []",
+    "subgrid [] [] [] [] [] [] [] [] [] [] []",
+    "subgrid [] [] [] [] [] []",
+    "subgrid [] [] [] [] [] [] [] [] [] [] []",
+    "subgrid [] [] [] [] [] []",
+  ];
+  [...document.querySelectorAll('div > div')].forEach(function(subgrid, i) {
+    let actual = window.getComputedStyle(subgrid)['grid-template-columns'];
+    let expected = expectedResults[i];
+    if (actual != expected) {
+      let err = "Unexpected getComputedStyle value for subgrid " + i + " with className '" + subgrid.className + "':" +
+      " Actual: \"" + actual + "\", Expected: \"" + expected + "\"";
+      document.body.appendChild(document.createTextNode(err));
+    }
+  });
+</script>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-006-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-006-ref.html
new file mode 100644
index 0000000000..e2c2ec2085
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-006-ref.html
@@ -0,0 +1,115 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid line name resolution</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
+}
+
+div > div { background: grey; grid-column: 2 / span 2; }
+
+i {
+  grid-row: 1;
+  counter-increment: i;
+}
+i::before { content: counter(i, decimal); }
+
+x { background: silver; }
+
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+  </style>
+</head>
+<body>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-template-areas: '. a a a a';">
+    <x style="grid-column: 2 / 3">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [a];">
+    <x style="grid-column: 1 / 2">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [a]; grid-column:1/span 2">
+    <x style="grid-column: 1 / 2">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [a] [a]; grid-column-end:span 3">
+    <x style="grid-column: 2 / 3">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [a] [a] [a] [a]; grid-column-end:span 3">
+    <x style="grid-column: 3 / 4">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [] [a] [a]; grid-column-end:span 6">
+    <x style="grid-column: 2 / 3">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="hr" style="display:grid; grid:auto/subgrid; grid-template-areas: '. a a a a';">
+    <x style="grid-column: 2 / 3">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="hr" style="display:grid; grid:auto/subgrid [a];">
+    <x style="grid-column: 1 / 2">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="hr" style="display:grid; grid:auto/subgrid [a]; grid-column:1/span 2">
+    <x style="grid-column: 1 / 2">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="hr" style="display:grid; grid:auto/subgrid [a] [a]; grid-column-end:span 3">
+    <x style="grid-column: 2 / 3">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="hr" style="display:grid; grid:auto/subgrid [a] [a] [a] [a]; grid-column-end:span 3">
+    <x style="grid-column: 3 / 4">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="hr" style="display:grid; grid:auto/subgrid [] [a] [a]; grid-column-end:span 6">
+    <x style="grid-column: 2 / 3">x</x>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-006.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-006.html
new file mode 100644
index 0000000000..0aa8c80b2e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-006.html
@@ -0,0 +1,117 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid line name resolution</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="line-names-006-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
+}
+
+div > div { background: grey; grid-column: 2 / span 2; }
+
+i {
+  grid-row: 1;
+  counter-increment: i;
+}
+i::before { content: counter(i, decimal); }
+
+x { background: silver; }
+
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+  </style>
+</head>
+<body>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-template-areas: '. a a a a';">
+    <x style="grid-column: a-end -1">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [a];">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [a]; grid-column:1/span 2">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [a] [a]; grid-column-end:span 3">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [a] [a] [a] [a]; grid-column-end:span 3">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [] [a] [a]; grid-column-end:span 6">
+    <x style="grid-column: a">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="hr" style="display:grid; grid:auto/subgrid; grid-template-areas: '. a a a a';">
+    <x style="grid-column: a-end -1">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="hr" style="display:grid; grid:auto/subgrid [a];">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="hr" style="display:grid; grid:auto/subgrid [a]; grid-column:1/span 2">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="hr" style="display:grid; grid:auto/subgrid [a] [a]; grid-column-end:span 3">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="hr" style="display:grid; grid:auto/subgrid [a] [a] [a] [a]; grid-column-end:span 3">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div style="display:grid">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div class="hr" style="display:grid; grid:auto/subgrid [] [a] [a]; grid-column-end:span 6">
+    <x style="grid-column: a">x</x>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-007-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-007-ref.html
new file mode 100644
index 0000000000..2b06d9c381
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-007-ref.html
@@ -0,0 +1,134 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: line name resolution for grid-aligned abs.pos. inside subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace;
+}
+
+.grid {
+  position: relative;
+  display: grid;
+  grid: 0.2em / repeat(10,30px);
+  grid-auto-rows: 2em;
+  border: 1px solid;
+  padding: 1px 2px;
+}
+
+div > div {
+  padding: 4px 0 1px 0;
+  border: 3px solid black;
+  background: grey;
+  margin-left: 30px;
+  width: 54px;
+}
+
+n {
+  grid-row: 1;
+  counter-increment: n;
+}
+n::before { content: counter(n, decimal); }
+
+x {
+  position: absolute;
+  left:0; right:0;
+  background: silver;
+}
+
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div>
+    <x>x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div>
+    <x>x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="margin-left:0">
+    <x>x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="width:84px">
+    <x>x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="width:84px">
+    <x>x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="width:174px">
+    <x>x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr">
+    <x>x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr">
+    <x>x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="margin-left:0">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="width:84px">
+    <x>x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="width:84px">
+    <x>x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="width:174px">
+    <x>x</x>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-007.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-007.html
new file mode 100644
index 0000000000..d70a86b6b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-007.html
@@ -0,0 +1,137 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: line name resolution for grid-aligned abs.pos. inside subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="line-names-007-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace;
+}
+
+.grid {
+  position: relative;
+  display: grid;
+  grid: 0.2em / repeat(10,30px);
+  grid-auto-rows: 2em;
+  border: 1px solid;
+  padding: 1px 2px;
+}
+
+div > div {
+  display: grid;
+  grid-column: 2 / span 2;
+  grid: auto / subgrid;
+  padding: 4px 33px 1px 10px;
+  border: 3px solid black;
+  background: grey;
+}
+
+n {
+  grid-row: 1;
+  counter-increment: n;
+}
+n::before { content: counter(n, decimal); }
+
+x {
+  position: absolute;
+  left:0; right:0;
+  background: silver;
+}
+
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-template-areas: '. a a a a';">
+    <x style="grid-column: a-end -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-template-columns: subgrid [a];">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-template-columns: subgrid [a]; grid-column:1/span 2">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-template-columns: subgrid [a] [a]; grid-column-end:span 3">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-template-columns: subgrid [a] [a] [a] [a]; grid-column-end:span 3">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-template-columns: subgrid [] [a] [a]; grid-column-end:span 6">
+    <x style="grid-column: a">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-template-areas: '. a a a a';">
+    <x style="grid-column: a-end -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-template-columns: subgrid [a];">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-template-columns: subgrid [a]; grid-column:1/span 2">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-template-columns: subgrid [a] [a]; grid-column-end:span 3">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-template-columns: subgrid [a] [a] [a] [a]; grid-column-end:span 3">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-template-columns: subgrid [] [a] [a]; grid-column-end:span 6">
+    <x style="grid-column: a">x</x>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-008-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-008-ref.html
new file mode 100644
index 0000000000..262fa548ec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-008-ref.html
@@ -0,0 +1,162 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: line name resolution for grid-aligned abs.pos. inside subgrid CB</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace;
+}
+
+.grid {
+  display: grid;
+  grid: 0.2em 1.4em / repeat(10,30px);
+  border: 1px solid;
+  padding: 0 2px;
+}
+
+div > div {
+  position: relative;
+  display: grid;
+  grid-column: 2 / span 2;
+  grid: auto / subgrid;
+  padding: 4px 0 1px 10px;
+  border: 1px solid black;
+  background: grey;
+}
+
+n {
+  grid-row: 1;
+  counter-increment: n;
+}
+n::before { content: counter(n, decimal); }
+
+x {
+  position: absolute;
+  left:0; right:0;
+  background: silver;
+}
+
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div>
+    <x style="grid-column: -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div>
+    <x style="grid-column: 2">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-column-end:span 5">
+    <x style="grid-column: 2">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-column:2/span 5">
+    <x style="grid-column: 4">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-column-end:span 6">
+    <x style="grid-column: 2 / 4">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-column-end:span 3">
+    <x style="grid-column: -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-column:2/span 6">
+    <x style="grid-column: 3 / 5">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-column:2/span 6">
+    <x style="grid-column: 3 / 5">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr">
+    <x style="grid-column: 3 / auto">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr">
+    <x style="grid-column: 2 / auto">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-column-end:span 5">
+    <x style="grid-column: 2 / auto">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-column:2/span 5">
+    <x style="grid-column: 6 / auto">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-column-end:span 6">
+    <x style="grid-column: 2 / 4">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-column-end:span 3">
+    <x style="grid-column: 4 / auto">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-column:2/span 6">
+    <x style="grid-column: 5 / 7">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-column:2/span 6">
+    <x style="grid-column: 5 / 7">x</x>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-008.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-008.html
new file mode 100644
index 0000000000..56ea961298
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-008.html
@@ -0,0 +1,164 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: line name resolution for grid-aligned abs.pos. inside subgrid CB</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="line-names-008-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace;
+}
+
+.grid {
+  display: grid;
+  grid: 0.2em 1.4em / repeat(10,30px);
+  border: 1px solid;
+  padding: 0 2px;
+}
+
+div > div {
+  position: relative;
+  display: grid;
+  grid-column: 2 / span 2;
+  grid: auto / subgrid;
+  padding: 4px 0 1px 10px;
+  border: 1px solid black;
+  background: grey;
+}
+
+n {
+  grid-row: 1;
+  counter-increment: n;
+}
+n::before { content: counter(n, decimal); }
+
+x {
+  position: absolute;
+  left:0; right:0;
+  background: silver;
+}
+
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-template-areas: '. a a a a';">
+    <x style="grid-column: a-end -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-template-columns: subgrid [][a][];">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: repeat(9,30px) [a] 30px">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-template-columns: subgrid [][a][]; grid-column-end:span 5">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: repeat(5,[a]30px) repeat(5,30px)">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-template-columns: subgrid [a]; grid-column:2/span 5">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: repeat(4,30px) [a] 30px repeat(5,30px)">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-template-columns: subgrid [a] [a]; grid-column-end:span 6">
+    <x style="grid-column: a 2 / a -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-template-columns: subgrid [a] [a] [] [a]; grid-column-end:span 3">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: repeat(3,30px) [a] 30px repeat(7,30px)">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-template-columns: subgrid [] [] [] [] [a]; grid-column:2/span 6">
+    <x style="grid-column: a/span a">x</x>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: repeat(3,30px) [a] 30px repeat(7,30px)">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-template-columns: subgrid [] [] [] [] [a]; grid-column:2/span 6">
+    <x style="grid-column: a/a 2">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-template-areas: '. a a a a';">
+    <x style="grid-column: a-end -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-template-columns: subgrid [][a][];">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: repeat(9,30px) [a] 30px">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-template-columns: subgrid [][a][]; grid-column-end:span 5">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: repeat(5,[a]30px) repeat(5,30px)">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-template-columns: subgrid [a]; grid-column:2/span 5">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: repeat(4,30px) [a] 30px repeat(5,30px)">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-template-columns: subgrid [a] [a]; grid-column-end:span 6">
+    <x style="grid-column: a 2 / a -1">x</x>
+  </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-template-columns: subgrid [a] [a] [] [a]; grid-column-end:span 3">
+    <x style="grid-column: a -1">x</x>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 30px [a] repeat(2,30px) [a] 30px repeat(7,30px)">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-template-columns: subgrid [] [] [] [] [a]; grid-column:2/span 6">
+    <x style="grid-column: a/span a">x</x>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 30px [a] repeat(2,30px) [a] 30px repeat(7,30px)">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="hr" style="grid-template-columns: subgrid [] [] [] [] [a]; grid-column:2/span 6">
+    <x style="grid-column: a/a 2">x</x>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-009-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-009-ref.html
new file mode 100644
index 0000000000..103a35968d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-009-ref.html
@@ -0,0 +1,75 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid line names are not inherited to a non-subgridded axis</title>
+  <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <style>
+    html,body {
+      color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
+    }
+
+    div > div { background: grey; grid-column:2 / span 2; }
+
+    i {
+      grid-row: 1;
+      counter-increment: i;
+    }
+    i::before { content: counter(i, decimal); }
+
+    x { background: silver; }
+      </style>
+</head>
+<body>
+
+<div style="display:grid;">
+  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [a][b][c][d][e]; grid-column:2 / 9;">
+    <div style="display:grid; grid:subgrid/auto; grid-column:1 / 4;">
+      <x style="grid-column:c">x</x>
+    </div>
+  </div>
+</div>
+
+<div style="display:grid;">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [a][b][c][d][e]; grid-column:2 / 9;">
+    <div style="display:grid; grid:subgrid/auto; grid-column:c / 4;">
+      <x style="grid-column:span 1">x</x>
+    </div>
+  </div>
+</div>
+
+<div style="display:grid;">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [a][b][c][c][c]; grid-column:2 / 9;">
+    <div style="display:grid; grid:subgrid/auto; grid-column:c 2 / 4;">
+      <x style="grid-column:4">x</x>
+    </div>
+  </div>
+</div>
+
+<div style="display:grid;">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [a][b][c][c][c]; grid-column:2 / 9;">
+    <div style="display:grid; grid:subgrid/auto; grid-column:c 2 / 4;">
+      <x style="grid-column:span 1">x</x>
+    </div>
+  </div>
+</div>
+
+<div style="display:grid;">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [a][b][c][c][c]; grid-column:2 / 9;">
+    <div style="display:grid; grid:subgrid/auto; grid-column:c-1 / c 3;">
+      <x style="grid-column:span 1">x</x>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-009.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-009.html
new file mode 100644
index 0000000000..bd8a776872
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-009.html
@@ -0,0 +1,76 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid line names are not inherited to a non-subgridded axis</title>
+  <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="line-names-009-ref.html">
+  <style>
+    html,body {
+      color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
+    }
+
+    div > div { background: grey; grid-column:2 / span 2; }
+
+    i {
+      grid-row: 1;
+      counter-increment: i;
+    }
+    i::before { content: counter(i, decimal); }
+
+    x { background: silver; }
+  </style>
+</head>
+<body>
+
+<div style="display:grid;">
+  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [a][b][c][d][e]; grid-column:2 / 9;">
+    <div style="display:grid; grid:subgrid/auto; grid-column:1 / 4;">
+      <x style="grid-column:c">x</x>
+    </div>
+  </div>
+</div>
+
+<div style="display:grid;">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [a][b][c][d][e]; grid-column:2 / 9;">
+    <div style="display:grid; grid:subgrid/auto; grid-column:c / 4;">
+      <x style="grid-column:span c">x</x>
+    </div>
+  </div>
+</div>
+
+<div style="display:grid;">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [a][b][c][c][c]; grid-column:2 / 9;">
+    <div style="display:grid; grid:subgrid/auto; grid-column:c 2 / 4;">
+      <x style="grid-column:c 2">x</x>
+    </div>
+  </div>
+</div>
+
+<div style="display:grid;">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [a][b][c][c][c]; grid-column:2 / 9;">
+    <div style="display:grid; grid:subgrid/auto; grid-column:c 2 / 4;">
+      <x style="grid-column:span c 2">x</x>
+    </div>
+  </div>
+</div>
+
+<div style="display:grid;">
+<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [a][b][c][c][c]; grid-column:2 / 9;">
+    <div style="display:grid; grid:subgrid/auto; grid-column:c-1 / c 3;">
+      <x style="grid-column:span c">x</x>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-010-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-010-ref.html
new file mode 100644
index 0000000000..9232f1dcf2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-010-ref.html
@@ -0,0 +1,106 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid implicit line names are clamped to the subgrid axis</title>
+  <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <style>
+    html,body {
+      color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
+    }
+
+    div > div { background: grey; grid-column:2 / span 2; }
+
+    i {
+      grid-row: 1;
+      counter-increment: i;
+    }
+    i::before { content: counter(i, decimal); }
+
+    x { background: silver; }
+  </style>
+</head>
+<body>
+
+<div style="display:grid; grid-template-areas: '. . . . . . a a a ';">
+  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9;">
+    <x style="grid-column: 3 / 5">x</x>
+  </div>
+</div>
+
+<div style="display:grid; grid-template-areas: 'a a a';">
+  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9;">
+    <x style="grid-column: 5">x</x>
+  </div>
+</div>
+
+<div style="display:grid; grid-template-areas: '. . . . . . a a a ';">
+  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9;">
+    <x style="grid-column: 3 / 5">x</x>
+  </div>
+</div>
+
+<div style="display:grid; grid-template-areas: 'a a a';">
+  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9;">
+    <x style="grid-column: 5">x</x>
+  </div>
+</div>
+
+<div style="display:grid; grid-template-areas: '. . . . . . a a a ';">
+  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9; grid-template-areas: 'a a a'";>
+    <x style="grid-column: 1 / 4">x</x>
+  </div>
+</div>
+
+<div style="display:grid; grid-template-areas: 'a a a';">
+  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9; grid-template-areas: 'a a a'">
+    <x style="grid-column: 1 / 4">x</x>
+  </div>
+</div>
+
+<div style="display:grid; grid-template-areas: '. . . . . . a a a ';">
+  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9; grid-template-areas: 'a a a'">
+    <x style="grid-column: 1 / 4"">x</x>
+  </div>
+</div>
+
+<div style="display:grid; grid-template-areas: 'a a a';">
+  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9; grid-template-areas: 'a a a'">
+    <x style="grid-column: 1 / 4"">x</x>
+  </div>
+</div>
+
+<div style="display:grid; grid-template-areas: 'a a a';">
+  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column:3 / 9; grid-template-areas: 'a a a'">
+    <x style="grid-column: 1"">x</x>
+  </div>
+</div>
+
+<div style="display:grid; grid-template-areas: 'a a a';">
+  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [a];">
+    <x style="grid-column: 1 / 3">x</x>
+  </div>
+</div>
+
+<div style="display:grid; grid-template-areas: 'a a a';">
+  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [b] [b] [b] [a]; grid-column:1 / 9;">
+    <x style="grid-column: 1 / 4">x</x>
+  </div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-010.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-010.html
new file mode 100644
index 0000000000..f22cfe3303
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-010.html
@@ -0,0 +1,107 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid implicit line names are clamped to the subgrid axis</title>
+  <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="line-names-010-ref.html">
+  <style>
+    html,body {
+      color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
+    }
+
+    div > div { background: grey; grid-column:2 / span 2; }
+
+    i {
+      grid-row: 1;
+      counter-increment: i;
+    }
+    i::before { content: counter(i, decimal); }
+
+    x { background: silver; }
+  </style>
+</head>
+<body>
+
+<div style="display:grid; grid-template-areas: '. . . . . . a a a ';">
+  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9;">
+    <x style="grid-column: a">x</x>
+  </div>
+</div>
+
+<div style="display:grid; grid-template-areas: 'a a a';">
+  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9;">
+    <x style="grid-column: a">x</x>
+  </div>
+</div>
+
+<div style="display:grid; grid-template-areas: '. . . . . . a a a ';">
+  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9;">
+    <x style="grid-column: a-start / a-end">x</x>
+  </div>
+</div>
+
+<div style="display:grid; grid-template-areas: 'a a a';">
+  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9;">
+    <x style="grid-column: a-start / a-end">x</x>
+  </div>
+</div>
+
+<div style="display:grid; grid-template-areas: '. . . . . . a a a ';">
+  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9; grid-template-areas: 'a a a'";>
+    <x style="grid-column: a">x</x>
+  </div>
+</div>
+
+<div style="display:grid; grid-template-areas: 'a a a';">
+  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9; grid-template-areas: 'a a a'">
+    <x style="grid-column: a">x</x>
+  </div>
+</div>
+
+<div style="display:grid; grid-template-areas: '. . . . . . a a a ';">
+  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9; grid-template-areas: 'a a a'">
+    <x style="grid-column: a-start / a-end">x</x>
+  </div>
+</div>
+
+<div style="display:grid; grid-template-areas: 'a a a';">
+  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column:5 / 9; grid-template-areas: 'a a a'">
+    <x style="grid-column: a-start / a-end">x</x>
+  </div>
+</div>
+
+<div style="display:grid; grid-template-areas: 'a a a';">
+  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid; grid-column:3 / 9; grid-template-areas: 'a a a'">
+    <x style="grid-column: a-start / a-end">x</x>
+  </div>
+</div>
+
+<div style="display:grid; grid-template-areas: 'a a a';">
+  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [a];">
+    <x style="grid-column: a">x</x>
+  </div>
+</div>
+
+<div style="display:grid; grid-template-areas: 'a a a';">
+  <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+  <div style="display:grid; grid:auto/subgrid [b] [b] [b] [a]; grid-column:1 / 9;">
+    <x style="grid-column: a">x</x>
+  </div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-011-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-011-ref.html
new file mode 100644
index 0000000000..40f3543980
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-011-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid line names do not apply to non-subgrids</title>
+  <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <style>
+    html,body {
+      color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
+    }
+
+    div > div { background: grey; grid-column:2 / span 2; }
+
+    i {
+      grid-row: 1;
+      counter-increment: i;
+    }
+    i::before { content: counter(i, decimal); }
+
+    x { background: silver; }
+  </style>
+</head>
+<body>
+
+  <div style="display:grid; grid-template-columns: subgrid [a] [b] [c] [d];">
+    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+      <x style="grid-column: 2 / 3">x</x>
+  </div>
+
+  <div style="display:grid; grid-template-columns: 'auto [a] auto [b]';">
+    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+    <div style="display:grid; grid:subgrid [c] [d] [d] [e] / auto; ">
+      <x style="grid-column: 3">x</x>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-011.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-011.html
new file mode 100644
index 0000000000..d3bb734447
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-011.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid line names do not apply to non-subgrids</title>
+  <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="line-names-011-ref.html">
+  <style>
+    html,body {
+      color:black; background-color:white; font:12px/1 monospace; padding:0; margin:0;
+    }
+
+    div > div { background: grey; grid-column:2 / span 2; }
+
+    i {
+      grid-row: 1;
+      counter-increment: i;
+    }
+    i::before { content: counter(i, decimal); }
+
+    x { background: silver; }
+  </style>
+</head>
+<body>
+
+  <div style="display:grid; grid-template-columns: subgrid [a] [b] [c] [d];">
+    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+      <x style="grid-column: a / d">x</x>
+  </div>
+
+  <div style="display:grid; grid-template-columns: 'auto [a] auto [b]';">
+    <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+    <div style="display:grid; grid:subgrid [c] [d] [d] [e] / auto; ">
+      <x style="grid-column: c">x</x>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-012-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-012-ref.html
new file mode 100644
index 0000000000..6ddf3ab87c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-012-ref.html
@@ -0,0 +1,181 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid line names do not apply to non-subgrids</title>
+  <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace;
+}
+
+.grid {
+  display: grid;
+  grid: 0.2em 1.4em / repeat(10,30px);
+  border: 1px solid;
+  padding: 0 2px;
+}
+
+div > div {
+  xposition: relative;
+  display: grid;
+  grid: auto / subgrid;
+  border: 1px solid black;
+  background: grey;
+}
+
+n {
+  grid-row: 1;
+  counter-increment: n;
+}
+n::before { content: counter(n, decimal); }
+
+x {
+  background: silver;
+}
+
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-column: 2 / span 2;">
+    <div style="grid-column: 1;">
+      <x style="grid-column: 1;">x</x>
+    </div>
+  </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-column: 2 / span 2;">
+    <div style="grid-column: 1;">
+      <x style="grid-column: 1;">x</x>
+    </div>
+  </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-column: 2 / 7;">
+    <div style="grid-column: 3 / 5;">
+      <x style="grid-column: 2;">x</x>
+    </div>
+  </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-column: 2 / 4;">
+    <div style="grid-column: 1 / 2;">
+      <x style="grid-column: 1 / 2;">x</x>
+    </div>
+  </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-column: 2 / 4;">
+    <div style="grid-column: 1 / 2;">
+      <x style="grid-column: 1 / 2;">x</x>
+    </div>
+  </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-column: 2 / 7;">
+    <div style="grid-column: 3 / 5;">
+      <x style="grid-column: 1 / 2;">x</x>
+    </div>
+  </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-column: 2 / 7;">
+    <div style="grid-column: 3 / 5;">
+      <x style="grid-column: 2 / 3;">x</x>
+    </div>
+  </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-column: 2 / 7;">
+    <div style="grid-column: 3 / 5;">
+      <x style="grid-column: 1 / 2;">x</x>
+    </div>
+  </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-column: 2 / 7;">
+    <div style="grid-column: 3 / 5;">
+      <x style="grid-column: 2 / 3;">x</x>
+    </div>
+  </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-column: 2 / 7;">
+    <div style="grid-column: 3 / 5;">
+      <x style="grid-column: 1 / 2;">x</x>
+    </div>
+  </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-column: 2 / 7;">
+    <div style="grid-column: 3 / 5;">
+      <x style="grid-column: 2 / 3;">x</x>
+    </div>
+  </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-column: 2 / 7;">
+    <div style="grid-column: 3 / 5;">
+      <x style="grid-column: 1 / 2;">x</x>
+    </div>
+  </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-column: 2 / 7;">
+    <div style="grid-column: 3 / 5;">
+      <x style="grid-column: 2 / 3;">x</x>
+    </div>
+  </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-column: 2 / 5;">
+    <div style="grid-column: 1 / 3;">
+      <x style="grid-column: 1 / 2;">x</x>
+    </div>
+  </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div style="grid-column: 2 / 5;">
+    <div style="grid-column: 1 / 3;">
+      <x style="grid-column: 2 / 3;">x</x>
+    </div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/line-names-012.html b/testing/web-platform/tests/css/css-grid/subgrid/line-names-012.html
new file mode 100644
index 0000000000..e8101043cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/line-names-012.html
@@ -0,0 +1,185 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid line name ordering matches writing direction</title>
+  <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="line-names-012-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace;
+}
+
+.grid {
+  display: grid;
+  grid: 0.2em 1.4em / repeat(10,30px);
+  border: 1px solid;
+  padding: 0 2px;
+}
+
+div > div {
+  position: relative;
+  display: grid;
+  grid-column: 2 / span 2;
+  grid: auto / subgrid;
+  border: 1px solid black;
+  background: grey;
+}
+
+n {
+  grid-row: 1;
+  counter-increment: n;
+}
+n::before { content: counter(n, decimal); }
+
+x {
+  background: silver;
+}
+
+.rtl { writing-mode: horizontal-tb; direction:rtl; }
+.ltr { writing-mode: horizontal-tb; direction:ltr; }
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="rtl" style="grid-template-columns: subgrid [a][][];">
+    <div class="ltr" style="grid-template-columns: subgrid [a][][];">
+      <x style="grid-column: a;">x</x>
+    </div>
+  </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div class="rtl" style="grid-template-columns: subgrid [][][a];">
+      <div class="ltr" style="grid-template-columns: subgrid [a][][];">
+        <x style="grid-column: a;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div class="rtl" style="grid-template-columns: subgrid [][][a]; grid-column-end:span 5;">
+      <div class="ltr" style="grid-template-columns: subgrid [a][][];">
+        <x style="grid-column: a -1;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div class="rtl" style="grid-template-columns: subgrid [a][a] 30px;">
+      <div class="ltr" style="grid-template-columns: subgrid [][][a];">
+        <x style="grid-column: a;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div class="rtl" style="grid-template-columns: subgrid [a][a] 30px;">
+      <div class="ltr" style="grid-template-columns: subgrid [a][][];">
+        <x style="grid-column: a -1;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div class="rtl" style="grid-template-columns: subgrid [][][a]; grid-column-end:span 5;">
+      <div class="ltr" style="grid-template-columns: subgrid [a][][];">
+        <x style="grid-column: a;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div class="rtl" style="grid-template-columns: subgrid [][][a]; grid-column-end:span 5;">
+      <div class="ltr" style="grid-template-columns: subgrid [a][][];">
+        <x style="grid-column: a -1;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: repeat(9,30px) [a] 30px;">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div class="rtl" style="grid-template-columns: subgrid [][][a]; grid-column-end:span 5;">
+      <div class="ltr" style="grid-template-columns: subgrid [a][][];">
+        <x style="grid-column: a;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: repeat(9,30px) [a] 30px;">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div class="rtl" style="grid-template-columns: subgrid [][][a]; grid-column-end:span 5;">
+      <div class="ltr" style="grid-template-columns: subgrid [a][][];">
+        <x style="grid-column: a -1;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: repeat(9,30px) [a] 30px;">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div class="rtl" style="grid-template-columns: subgrid [][][a]; grid-column:2/span 5;">
+      <div class="ltr" style="grid-template-columns: subgrid [a][][];">
+        <x style="grid-column: a;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: repeat(9,30px) [a] 30px">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div class="rtl" style="grid-template-columns: subgrid [][][a]; grid-column:2/span 5;">
+      <div class="ltr" style="grid-template-columns: subgrid [a][][];">
+        <x style="grid-column: a -1;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: repeat(4,30px) [a] 30px repeat(5,30px);">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div class="rtl" style="grid-template-columns: subgrid [a][a]; grid-column:2/span 5;">
+      <div class="ltr" style="grid-template-columns: subgrid [a][a];">
+        <x style="grid-column: a;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: repeat(4,30px) [a] 30px repeat(5,30px);">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div class="rtl" style="grid-template-columns: subgrid [a][a]; grid-column:2/span 5;">
+      <div class="ltr" style="grid-template-columns: subgrid [a][a];">
+        <x style="grid-column: a 2;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div class="rtl" style="grid-template-columns: subgrid [a] [a] [] [a]; grid-column-end:span 3;">
+      <div class="ltr" style="grid-template-columns: subgrid [a] [a] [] [a]; grid-column-end:span 3;">
+        <x style="grid-column: a;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid">
+<n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+  <div class="rtl" style="grid-template-columns: subgrid [a] [a] [] [a]; grid-column-end:span 3;">
+    <div class="ltr" style="grid-template-columns: subgrid [a] [a] [] [a]; grid-column-end:span 3;">
+      <x style="grid-column: a 2;">x</x>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-001-ref.html
new file mode 100644
index 0000000000..4f0f6f962e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-001-ref.html
@@ -0,0 +1,89 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrids with different writing-mode than parent</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace;
+}
+
+.grid {
+  display: grid;
+  grid: repeat(4, auto) / repeat(5, auto);
+  place-content: start;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid: auto / auto;
+  background: lightgrey;
+  grid-column: 2 / span 5;
+  grid-row: 2 / span 5;
+  min-width:10px;
+  min-height:0;
+  border: 0 solid lightblue;
+  border-bottom-width: 40px;
+}
+
+.vlr {
+  writing-mode: vertical-lr;
+  grid: auto / auto;
+  grid-column: 2 / span 5;
+  grid-row: 3 / span 5;
+  background: blue;
+}
+
+x {
+  min-width:10px;
+  min-height:0px;
+}
+x:nth-child(2n+1) { background: silver; }
+x:nth-child(2n+2) { background: grey; }
+x:nth-child(2n+3) { background: pink; }
+x:nth-child(2n+4) { background: black; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vrl" style="text-indent:10px">
+    A B
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vr">
+    <div class="subgrid hr">A B</div>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:3; height:50px; background:black"></x>
+<x style="grid-row:4; height:50px; background:pink"></x>
+<x style="grid-row:5; height:40px; background:black"></x>
+<div class="subgrid vlr">
+<div class="subgrid hl">
+  <x style="grid-row:2 / span 2; height: 100px">A B C D E F</x>
+</div>
+</div>
+</div>
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-001.html b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-001.html
new file mode 100644
index 0000000000..1cf99a73e2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-001.html
@@ -0,0 +1,89 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrids with different writing-mode than parent</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="orthogonal-writing-mode-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 monospace;
+}
+
+.grid {
+  display: grid;
+  grid: repeat(4, auto) / repeat(5, auto);
+  place-content: start;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid: subgrid / auto;
+  background: lightgrey;
+  grid-column: 2 / span 5;
+  grid-row: 2 / span 5;
+  min-width:10px;
+  min-height:0;
+  border: 0 solid lightblue;
+  border-bottom-width: 40px;
+}
+
+.vlr {
+  writing-mode: vertical-lr;
+  grid: auto / subgrid;
+  grid-column: 2 / span 5;
+  grid-row: 3 / span 5;
+  background: blue;
+}
+
+x {
+  min-width:10px;
+  min-height:0px;
+}
+x:nth-child(2n+1) { background: silver; }
+x:nth-child(2n+2) { background: grey; }
+x:nth-child(2n+3) { background: pink; }
+x:nth-child(2n+4) { background: black; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vrl" style="text-indent:10px">
+    A B
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vr">
+    <div class="subgrid hr">A B</div>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+<div class="subgrid vlr">
+<div class="subgrid hl">
+  <x style="grid-row:2 / span 2; height: 100px">A B C D E F</x>
+</div>
+</div>
+</div>
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-002-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-002-ref.html
new file mode 100644
index 0000000000..7c51c02828
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-002-ref.html
@@ -0,0 +1,90 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrids with different writing-mode than parent</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 Ahem;
+}
+
+.grid {
+  display: grid;
+  grid: repeat(4, auto) / repeat(5, auto);
+  place-content: start;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid: auto / auto;
+  grid-column: 2 / span 5;
+  grid-row: 2 / span 5;
+  min-width:10px;
+  min-height:0;
+  border: 0 solid lightblue;
+  border-bottom-width: 40px;
+  background: yellow;
+  padding: 1px 3px 5px 7px;
+  margin: 3px 11px 7px 5px;
+}
+
+.vlr {
+  writing-mode: vertical-lr;
+  grid: auto / auto;
+  grid-column: 2 / span 5;
+  grid-row: 3 / span 5;
+  background: blue;
+}
+
+x {
+  min-width:10px;
+  min-height:0px;
+}
+
+x:nth-child(2n+1) { background: silver; }
+x:nth-child(2n+2) { background: grey; }
+x:nth-child(2n+3) { background: pink; }
+x:nth-child(2n+4) { background: black; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid vrl">
+<x style="grid-column:1; height:0px"></x><x style="grid-column:2; height:16px"></x><x style="grid-column:3; height:30px"></x><x style="grid-column:4; height:52px"></x>
+<div class="subgrid hl">
+  <x style="grid-column:span 12">A _B</x>
+  <x style="width:100px; height:30px"></x>
+  <x style="background:yellow">C D_</x>
+</div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1; height:0px"></x><x style="grid-row:2; height:0px"></x><x style="grid-row:3; height:52px"></x><x style="grid-row:4; height:30px"></x>
+<div class="subgrid vlr" style="grid: auto / repeat(5, auto);">
+  <x>A _B</x>
+  <x style="width:100px; height:30px"></x>
+  <x>C D_</x>
+</div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1; height:0px"></x><x style="grid-row:2; height:0px"></x><x style="grid-row:3; height:4px"></x>
+<div class="subgrid vlr"></div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-002.html b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-002.html
new file mode 100644
index 0000000000..20a4b0ccf3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-002.html
@@ -0,0 +1,92 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrids with different writing-mode than parent</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="orthogonal-writing-mode-002-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 Ahem;
+}
+
+.grid {
+  display: grid;
+  grid: repeat(4, auto) / repeat(5, auto);
+  place-content: start;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid: subgrid / auto;
+  grid-column: 2 / span 5;
+  grid-row: 2 / span 5;
+  min-width:10px;
+  min-height:0;
+  border: 0 solid lightblue;
+  border-bottom-width: 40px;
+  background: yellow;
+  padding: 1px 3px 5px 7px;
+  margin: 3px 11px 7px 5px;
+}
+
+.vlr {
+  writing-mode: vertical-lr;
+  grid: auto / subgrid;
+  grid-column: 2 / span 5;
+  grid-row: 3 / span 5;
+  background: blue;
+}
+
+x {
+  min-width:10px;
+  min-height:0px;
+}
+
+x:nth-child(2n+1) { background: silver; }
+x:nth-child(2n+2) { background: grey; }
+x:nth-child(2n+3) { background: pink; }
+x:nth-child(2n+4) { background: black; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid vrl">
+<x style="grid-column:1"></x><x style="grid-column:2"></x><x style="grid-column:3"></x><x style="grid-column:4"></x><x style="grid-column:5"></x><x style="grid-column:6"></x>
+<div class="subgrid hl">
+  <x style="grid-column:span 12">A _B</x>
+  <x style="width:100px; height:30px"></x>
+  <x style="background:yellow">C D_</x>
+</div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+<div class="subgrid vlr">
+  <x>A _B</x>
+  <x style="width:100px; height:30px"></x>
+  <x>C D_</x>
+</div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+<div class="subgrid vlr"></div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-003-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-003-ref.html
new file mode 100644
index 0000000000..3026548c68
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-003-ref.html
@@ -0,0 +1,104 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrids with different writing-mode than parent</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 Ahem;
+}
+
+.grid {
+  display: grid;
+  grid: 2px repeat(4, auto) / 10px repeat(50, auto);
+  place-content: start;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid: repeat(50, auto) / repeat(4, auto);
+  background: lightgrey;
+  grid-column: 2 / span 5;
+  grid-row: 3 / span 3;
+  min-width:10px;
+  min-height:0;
+  border: solid lightblue;
+  border-width: 1px 5px 3px 7px;
+  padding:      5px 7px 3px 1px;
+  margin:       7px 3px 5px 1px;
+}
+
+item { text-indent:10px; background: magenta; }
+
+x:nth-child(2n+1) { background: silver; }
+x:nth-child(2n+2) { background: grey; }
+x:nth-child(2n+3) { background: pink; }
+x:nth-child(2n+4) { background: black; }
+x:nth-child(2n+5) { background: blue; }
+x:nth-child(2n+6) { background: cyan; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0"></x><x style="grid-row:3;height:25px"></x><x style="grid-row:4;height:0px"></x><x style="grid-row:5;height:11px"></x>
+  <div class="subgrid vrl">
+    <item class="hl">AB</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:13px"></x><x style="grid-row:4;height:0px"></x><x style="grid-row:5;height:23px"></x>
+  <div class="subgrid vlr">
+    <item class="hl">AB</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:25px"></x><x style="grid-row:4;height:0px"></x><x style="grid-row:5;height:11px"></x>
+  <div class="subgrid vrl" style="grid-column:2/5">
+    <item class="hl">AB</item>
+  </div>
+  <item class="hl" style="grid-area:3/5/4/6">AB</item>
+</div>
+
+<div class="grid">
+<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:40px"></x><x style="grid-row:4;height:0px"></x><x style="grid-row:5;height:11px"></x>
+  <div class="subgrid vrl" style="grid-column:2/5">
+    <item class="hl" style="height:27px">AB</item>
+  </div>
+  <item class="hl" style="grid-area:3/5/4/6; height:40px; width:10px"></item>
+</div>
+
+<div class="grid">
+<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:25px"></x><x style="grid-row:4;height:40px"></x><x style="grid-row:5;height:11px"></x>
+  <div class="subgrid vrl" style="grid-column:2/5">
+    <item class="hl" style="height:12px">AB</item>
+  </div>
+  <item class="hl" style="grid-area:4/5/5/6; height:40px; width:10px"></item>
+</div>
+
+<div class="grid">
+<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:25px"></x><x style="grid-row:4;height:0px"></x><x style="grid-row:5;height:40px"></x>
+  <div class="subgrid vrl" style="grid-column:2/5">
+    <item class="hl" style="height:12px">AB</item>
+  </div>
+  <item class="hl" style="grid-area:5/5/6/6; height:40px; width:10px"></item>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-003.html b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-003.html
new file mode 100644
index 0000000000..2cd17d628b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-003.html
@@ -0,0 +1,106 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrids with different writing-mode than parent</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="orthogonal-writing-mode-003-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:12px/1 Ahem;
+}
+
+.grid {
+  display: grid;
+  grid: 2px repeat(4, auto) / 10px repeat(50, auto);
+  place-content: start;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid: subgrid / subgrid;
+  background: lightgrey;
+  grid-column: 2 / span 5;
+  grid-row: 3 / span 3;
+  min-width:10px;
+  min-height:0;
+  border: solid lightblue;
+  border-width: 1px 5px 3px 7px;
+  padding:      5px 7px 3px 1px;
+  margin:       7px 3px 5px 1px;
+}
+
+item { text-indent:10px; background: magenta; }
+
+x:nth-child(2n+1) { background: silver; }
+x:nth-child(2n+2) { background: grey; }
+x:nth-child(2n+3) { background: pink; }
+x:nth-child(2n+4) { background: black; }
+x:nth-child(2n+5) { background: blue; }
+x:nth-child(2n+6) { background: cyan; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vrl">
+    <item class="hl">AB</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vlr">
+    <item class="hl">AB</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vrl" style="grid-column:2/5">
+    <item class="hl">AB</item>
+  </div>
+  <item class="hl" style="grid-area:3/5/4/6">AB</item>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vrl" style="grid-column:2/5">
+    <item class="hl">AB</item>
+  </div>
+  <item class="hl" style="grid-area:3/5/4/6; height:40px; width:10px"></item>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vrl" style="grid-column:2/5">
+    <item class="hl">AB</item>
+  </div>
+  <item class="hl" style="grid-area:4/5/5/6; height:40px; width:10px"></item>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vrl" style="grid-column:2/5">
+    <item class="hl">AB</item>
+  </div>
+  <item class="hl" style="grid-area:5/5/6/6; height:40px; width:10px"></item>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-004-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-004-ref.html
new file mode 100644
index 0000000000..1de585bd62
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-004-ref.html
@@ -0,0 +1,128 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrids with different writing-mode than parent</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: 2px repeat(4, auto) / 10px repeat(50, auto);
+  place-content: start;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid: repeat(4, auto) / repeat(50, auto);;
+  background: lightgrey;
+  grid-column: 2 / span 5;
+  grid-row: 3 / span 3;
+  min-width:10px;
+  min-height:0;
+  border: solid lightblue;
+  border-width: 1px 5px 3px 7px;
+  padding:      5px 7px 3px 1px;
+  margin:       7px 3px 5px 1px;
+}
+
+item { background: magenta; }
+
+x:nth-child(2n+1) { background: silver; }
+x:nth-child(2n+2) { background: grey; }
+x:nth-child(2n+3) { background: pink; }
+x:nth-child(2n+4) { background: black; }
+x:nth-child(2n+5) { background: blue; }
+x:nth-child(2n+6) { background: cyan; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:13px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:21px"></x>
+  <div class="subgrid vlr" style="grid-column:2/5">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:23px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:21px"></x>  <div class="subgrid vlr" style="grid-column:2/5">
+    <item>X</item><item>&#x00C9;</item><item>C</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:23px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:11px"></x>
+  <div class="subgrid vrl" style="grid-column:5/8">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:23px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:21px"></x>
+  <div class="subgrid vrl" style="grid-column:5/8">
+    <item>X</item><item>&#x00C9;</item><item>C</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:13px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:21px"></x>
+  <div class="subgrid vlr" style="grid-column:2/5">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+  <div class="subgrid vlr" style="grid-column:5/8">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:23px"></x><x style="grid-row:4;height:10px"></x><x style="grid-row:5;height:11px"></x>
+  <div class="subgrid vrl" style="grid-column:2/5">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+  <div class="subgrid vrl" style="grid-column:5/8">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:23px"></x><x style="grid-row:4;height:20px"></x><x style="grid-row:5;height:21px"></x>
+  <div class="subgrid vlr" style="grid-column:2/5; grid-template-columns:10px 20px">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+  <div class="subgrid vrl" style="grid-column:5/8; grid-template-columns:10px 20px">
+    <item>X</item><item>&#x00C9;&#x00C9;</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1;height:2px"></x><x style="grid-row:2;height:0px"></x><x style="grid-row:3;height:43px"></x><x style="grid-row:4;height:20px"></x><x style="grid-row:5;height:21px"></x>
+  <div class="subgrid vlr" style="grid-column:2/5; grid-template-columns:10px 20px">
+    <item>X</item><item class="">&#x00C9;</item>
+  </div>
+  <div class="subgrid vrl" style="grid-column:5/8; grid-template-columns:30px 20px">
+    <item>X</item><item>&#x00C9;&#x00C9;</item>
+  </div>
+  <div class="subgrid vrl" style="grid-column:8/11; grid-template-columns:30px 20px">
+    <item>XXX</item><item>&#x00C9;</item>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-004.html b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-004.html
new file mode 100644
index 0000000000..4a0edd7e6d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-004.html
@@ -0,0 +1,131 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrids with different writing-mode than parent</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="orthogonal-writing-mode-004-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: 2px repeat(4, auto) / 10px repeat(50, auto);
+  place-content: start;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid: subgrid / subgrid;
+  background: lightgrey;
+  grid-column: 2 / span 5;
+  grid-row: 3 / span 3;
+  min-width:10px;
+  min-height:0;
+  border: solid lightblue;
+  border-width: 1px 5px 3px 7px;
+  padding:      5px 7px 3px 1px;
+  margin:       7px 3px 5px 1px;
+}
+
+item { background: magenta; }
+
+x:nth-child(2n+1) { background: silver; }
+x:nth-child(2n+2) { background: grey; }
+x:nth-child(2n+3) { background: pink; }
+x:nth-child(2n+4) { background: black; }
+x:nth-child(2n+5) { background: blue; }
+x:nth-child(2n+6) { background: cyan; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; }
+.vr { writing-mode: vertical-rl; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vlr" style="grid-column:2/5">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+</div>
+
+<div class="grid">
+  <x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vlr" style="grid-column:2/5">
+    <item>X</item><item>&#x00C9;</item><item>C</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vrl" style="grid-column:5/8">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vrl" style="grid-column:5/8">
+    <item>X</item><item>&#x00C9;</item><item>C</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vlr" style="grid-column:2/5">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+  <div class="subgrid vlr" style="grid-column:5/8">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vrl" style="grid-column:2/5">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+  <div class="subgrid vrl" style="grid-column:5/8">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vlr" style="grid-column:2/5">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+  <div class="subgrid vrl" style="grid-column:5/8">
+    <item>X</item><item>&#x00C9;&#x00C9;</item>
+  </div>
+</div>
+
+<div class="grid">
+<x style="grid-row:1"></x><x style="grid-row:2"></x><x style="grid-row:3"></x><x style="grid-row:4"></x><x style="grid-row:5"></x><x style="grid-row:6"></x>
+  <div class="subgrid vlr" style="grid-column:2/5">
+    <item>X</item><item>&#x00C9;</item>
+  </div>
+  <div class="subgrid vrl" style="grid-column:5/8">
+    <item>X</item><item>&#x00C9;&#x00C9;</item>
+  </div>
+  <div class="subgrid vrl" style="grid-column:8/11">
+    <item>XXX</item><item>&#x00C9;</item>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-005-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-005-ref.html
new file mode 100644
index 0000000000..f8fa0ab81b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-005-ref.html
@@ -0,0 +1,286 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: line names in orthogonal parent subgrid</title>
+  <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
+  <style>
+    body {
+      font:10px monospace; padding:0; margin:0; line-height:0;
+    }
+
+    .grid {
+      display: inline-grid;
+      grid-auto-columns: 15px;
+      border: 1px solid;
+      vertical-align: bottom;
+    }
+
+    .subgrid {
+      display: grid;
+      grid-template-columns: subgrid;
+      grid-column: 3 / span 4;
+      background: grey;
+    }
+    .grid > .subgrid > .subgrid {
+      writing-mode: vertical-lr;
+      grid-template-rows: subgrid;
+      grid-template-columns: initial;
+      grid-column: 1 / span 4;
+      grid-auto-columns: 8px;
+      grid-auto-flow: column;
+    }
+
+    .fill-1a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] }  /* [y] [z] [z] [z] [z] */
+    .fill-1b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] }  /* [x] [y] [z] [z] [z] */
+    .fill-1c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [y] [z] [z] */
+    .fill-1d  { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [x] [y] [z] */
+    .fill-1e  { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [y] */
+
+    .areas-1a { grid-template-areas: 'x x x x' }
+    .areas-1b { grid-template-areas: '. x x x' }
+    .areas-1c { grid-template-areas: 'x x x .' }
+    .areas-1d { grid-template-areas: '. . x x' }
+    .areas-1e { grid-template-areas: '. . x .' }
+
+    .subgrid > .subgrid > :nth-child(2n)   {  background: black; }
+    .subgrid > .subgrid > :nth-child(2n+1) {  background: pink; }
+    .subgrid > .subgrid > * { writing-mode: horizontal-tb; }
+
+    </style>
+  </head>
+  <body>
+
+  <!-- Line names before/after auto repeat -->
+  <div class="grid"><div class="subgrid fill-1a"><div class="subgrid">
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:3"></div>
+    <div style="grid-row:2"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:3"></div>
+    <div style="grid-row:2"></div>
+    <div style="grid-row:1"></div>
+  </div></div></div>
+
+  <div class="grid"><div class="subgrid fill-1b"><div class="subgrid">
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+  </div></div></div>
+
+  <div class="grid"><div class="subgrid fill-1c"><div class="subgrid">
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:2"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:2"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+  </div></div></div>
+
+  <div class="grid"><div class="subgrid fill-1d"><div class="subgrid">
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:3"></div>
+    <div style="grid-row:2"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:3"></div>
+    <div style="grid-row:2"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+  </div></div></div>
+
+  <div class="grid"><div class="subgrid fill-1e"><div class="subgrid">
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:3"></div>
+    <div style="grid-row:2"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:3"></div>
+    <div style="grid-row:2"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+  </div></div></div>
+
+  <div class="grid"><div class="subgrid fill-1a"><div class="subgrid">
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+  </div></div></div>
+
+  <!-- Auto repeat line names -->
+  <div class="grid"><div class="subgrid fill-1b"><div class="subgrid">
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:2"></div>
+    <div style="grid-row:2"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+  </div></div></div>
+
+  <div class="grid"><div class="subgrid fill-1c"><div class="subgrid">
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:3"></div>
+    <div style="grid-row:3"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+  </div></div></div>
+
+  <div class="grid"><div class="subgrid fill-1d"><div class="subgrid">
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+  </div></div></div>
+
+  <div class="grid"><div class="subgrid fill-1e"><div class="subgrid">
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+  </div></div></div>
+
+  <div class="grid"><div class="subgrid fill-1a"><div class="subgrid">
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:3"></div>
+    <div style="grid-row:2"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:3"></div>
+    <div style="grid-row:2"></div>
+    <div style="grid-row:1"></div>
+  </div></div></div>
+
+  <div class="grid"><div class="subgrid fill-1b"><div class="subgrid">
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:3"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:3"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+  </div></div></div>
+
+  <div class="grid"><div class="subgrid fill-1c"><div class="subgrid">
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+  </div></div></div>
+
+  <div class="grid"><div class="subgrid fill-1d"><div class="subgrid">
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+  </div></div></div>
+
+  <div class="grid"><div class="subgrid fill-1e"><div class="subgrid">
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:4"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+  </div></div></div>
+
+  <!-- Named grid areas -->
+  <div class="grid"><div class="subgrid areas-1a"><div class="subgrid">
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:2"></div>
+  </div></div></div>
+
+  <div class="grid"><div class="subgrid areas-1b"><div class="subgrid">
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:2"></div>
+  </div></div></div>
+
+  <div class="grid"><div class="subgrid areas-1c"><div class="subgrid">
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:2"></div>
+  </div></div></div>
+
+  <div class="grid"><div class="subgrid areas-1d"><div class="subgrid">
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:2"></div>
+  </div></div></div>
+
+  <div class="grid"><div class="subgrid areas-1e"><div class="subgrid">
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:1"></div>
+    <div style="grid-row:2"></div>
+  </div></div></div>
+  </body>
+  </html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-005.html b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-005.html
new file mode 100644
index 0000000000..d5bd178161
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-005.html
@@ -0,0 +1,288 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: line names in orthogonal parent subgrid</title>
+  <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing">
+  <link rel="match" href="orthogonal-writing-mode-005-ref.html">
+  <style>
+body {
+  color:black; background-color:white; font:10px monospace; padding:0; margin:0; line-height:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-columns: 15px;
+  border: 1px solid;
+  vertical-align: bottom;
+}
+
+.subgrid {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 3 / span 4;
+  background: grey;
+}
+.grid > .subgrid > .subgrid {
+  writing-mode: vertical-lr;
+  grid-template-rows: subgrid;
+  grid-template-columns: initial;
+  grid-column: 1 / span 4;
+  grid-auto-columns: 8px;
+  grid-auto-flow: column;
+}
+
+.fill-1a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] }  /* [y] [z] [z] [z] [z] */
+.fill-1b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] }  /* [x] [y] [z] [z] [z] */
+.fill-1c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [y] [z] [z] */
+.fill-1d  { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [x] [y] [z] */
+.fill-1e  { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [y] */
+
+.areas-1a { grid-template-areas: 'x x x x' }
+.areas-1b { grid-template-areas: '. x x x' }
+.areas-1c { grid-template-areas: 'x x x .' }
+.areas-1d { grid-template-areas: '. . x x' }
+.areas-1e { grid-template-areas: '. . x .' }
+
+.subgrid > .subgrid > :nth-child(2n)   {  background: black; }
+.subgrid > .subgrid > :nth-child(2n+1) {  background: pink; }
+.subgrid > .subgrid > * { writing-mode: horizontal-tb; }
+
+  </style>
+</head>
+<body>
+
+<!-- Line names before auto repeat -->
+<div class="grid"><div class="subgrid fill-1a"><div class="subgrid">
+  <div style="grid-row:z 5"></div>
+  <div style="grid-row:z 4"></div>
+  <div style="grid-row:z 3"></div>
+  <div style="grid-row:z 2"></div>
+  <div style="grid-row:z 1"></div>
+  <div style="grid-row:z -1"></div>
+  <div style="grid-row:z -2"></div>
+  <div style="grid-row:z -3"></div>
+  <div style="grid-row:z -4"></div>
+  <div style="grid-row:z -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1b"><div class="subgrid">
+  <div style="grid-row:x 5"></div>
+  <div style="grid-row:x 4"></div>
+  <div style="grid-row:x 3"></div>
+  <div style="grid-row:x 2"></div>
+  <div style="grid-row:x 1"></div>
+  <div style="grid-row:x -1"></div>
+  <div style="grid-row:x -2"></div>
+  <div style="grid-row:x -3"></div>
+  <div style="grid-row:x -4"></div>
+  <div style="grid-row:x -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1c"><div class="subgrid">
+  <div style="grid-row:x 5"></div>
+  <div style="grid-row:x 4"></div>
+  <div style="grid-row:x 3"></div>
+  <div style="grid-row:x 2"></div>
+  <div style="grid-row:x 1"></div>
+  <div style="grid-row:x -1"></div>
+  <div style="grid-row:x -2"></div>
+  <div style="grid-row:x -3"></div>
+  <div style="grid-row:x -4"></div>
+  <div style="grid-row:x -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1d"><div class="subgrid">
+  <div style="grid-row:x 5"></div>
+  <div style="grid-row:x 4"></div>
+  <div style="grid-row:x 3"></div>
+  <div style="grid-row:x 2"></div>
+  <div style="grid-row:x 1"></div>
+  <div style="grid-row:x -1"></div>
+  <div style="grid-row:x -2"></div>
+  <div style="grid-row:x -3"></div>
+  <div style="grid-row:x -4"></div>
+  <div style="grid-row:x -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1e"><div class="subgrid">
+  <div style="grid-row:x 5"></div>
+  <div style="grid-row:x 4"></div>
+  <div style="grid-row:x 3"></div>
+  <div style="grid-row:x 2"></div>
+  <div style="grid-row:x 1"></div>
+  <div style="grid-row:x -1"></div>
+  <div style="grid-row:x -2"></div>
+  <div style="grid-row:x -3"></div>
+  <div style="grid-row:x -4"></div>
+  <div style="grid-row:x -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1a"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<!-- Auto repeat line names -->
+<div class="grid"><div class="subgrid fill-1b"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1c"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1d"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1e"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1a"><div class="subgrid">
+  <div style="grid-row:z 5"></div>
+  <div style="grid-row:z 4"></div>
+  <div style="grid-row:z 3"></div>
+  <div style="grid-row:z 2"></div>
+  <div style="grid-row:z 1"></div>
+  <div style="grid-row:z -1"></div>
+  <div style="grid-row:z -2"></div>
+  <div style="grid-row:z -3"></div>
+  <div style="grid-row:z -4"></div>
+  <div style="grid-row:z -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1b"><div class="subgrid">
+  <div style="grid-row:z 5"></div>
+  <div style="grid-row:z 4"></div>
+  <div style="grid-row:z 3"></div>
+  <div style="grid-row:z 2"></div>
+  <div style="grid-row:z 1"></div>
+  <div style="grid-row:z -1"></div>
+  <div style="grid-row:z -2"></div>
+  <div style="grid-row:z -3"></div>
+  <div style="grid-row:z -4"></div>
+  <div style="grid-row:z -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1c"><div class="subgrid">
+  <div style="grid-row:z 5"></div>
+  <div style="grid-row:z 4"></div>
+  <div style="grid-row:z 3"></div>
+  <div style="grid-row:z 2"></div>
+  <div style="grid-row:z 1"></div>
+  <div style="grid-row:z -1"></div>
+  <div style="grid-row:z -2"></div>
+  <div style="grid-row:z -3"></div>
+  <div style="grid-row:z -4"></div>
+  <div style="grid-row:z -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1d"><div class="subgrid">
+  <div style="grid-row:z 5"></div>
+  <div style="grid-row:z 4"></div>
+  <div style="grid-row:z 3"></div>
+  <div style="grid-row:z 2"></div>
+  <div style="grid-row:z 1"></div>
+  <div style="grid-row:z -1"></div>
+  <div style="grid-row:z -2"></div>
+  <div style="grid-row:z -3"></div>
+  <div style="grid-row:z -4"></div>
+  <div style="grid-row:z -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1e"><div class="subgrid">
+  <div style="grid-row:z 5"></div>
+  <div style="grid-row:z 4"></div>
+  <div style="grid-row:z 3"></div>
+  <div style="grid-row:z 2"></div>
+  <div style="grid-row:z 1"></div>
+  <div style="grid-row:z -1"></div>
+  <div style="grid-row:z -2"></div>
+  <div style="grid-row:z -3"></div>
+  <div style="grid-row:z -4"></div>
+  <div style="grid-row:z -5"></div>
+</div></div></div>
+
+<!-- Named grid areas -->
+<div class="grid"><div class="subgrid areas-1a"><div class="subgrid">
+  <div style="grid-row:x-start"></div>
+  <div style="grid-row:x"></div>
+  <div style="grid-row:x-start / x-end"></div>
+  <div style="grid-row:x-end"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid areas-1b"><div class="subgrid">
+  <div style="grid-row:x-start"></div>
+  <div style="grid-row:x"></div>
+  <div style="grid-row:x-start / x-end"></div>
+  <div style="grid-row:x-end"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid areas-1c"><div class="subgrid">
+  <div style="grid-row:x-start"></div>
+  <div style="grid-row:x"></div>
+  <div style="grid-row:x-start / x-end"></div>
+  <div style="grid-row:x-end"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid areas-1d"><div class="subgrid">
+  <div style="grid-row:x-start"></div>
+  <div style="grid-row:x"></div>
+  <div style="grid-row:x-start / x-end"></div>
+  <div style="grid-row:x-end"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid areas-1e"><div class="subgrid">
+  <div style="grid-row:x-start"></div>
+  <div style="grid-row:x"></div>
+  <div style="grid-row:x-start / x-end"></div>
+  <div style="grid-row:x-end"></div>
+</div></div></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-006-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-006-ref.html
new file mode 100644
index 0000000000..2bf12f083f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-006-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+<meta charset="utf-8">
+<title>Reference: Subgridded item sizing with mixed writing modes</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+body {
+  background: white;
+  color: black;
+  display: grid;
+  font: 20px/1 Ahem;
+  place-items: start;
+  padding: 0;
+  margin: 0;
+}
+.grid {
+  background: cyan;
+  display: grid;
+  padding: 5px;
+}
+.grid > .grid {
+  background: pink;
+}
+.h { writing-mode: horizontal-tb; }
+.v { writing-mode: vertical-rl; }
+</style>
+</head>
+<body>
+  <div class="grid h">
+    <div class="grid h">
+      <div class="h">1234</div>
+    </div>
+  </div>
+  <div class="grid h">
+    <div class="grid h">
+      <div class="v">1234</div>
+    </div>
+  </div>
+  <div class="grid h">
+    <div class="grid v">
+      <div class="h">1234</div>
+    </div>
+  </div>
+  <div class="grid h">
+    <div class="grid v">
+      <div class="v">1234</div>
+    </div>
+  </div>
+  <div class="grid v">
+    <div class="grid h">
+      <div class="h">1234</div>
+    </div>
+  </div>
+  <div class="grid v">
+    <div class="grid h">
+      <div class="v">1234</div>
+    </div>
+  </div>
+  <div class="grid v">
+    <div class="grid v">
+      <div class="h">1234</div>
+    </div>
+  </div>
+  <div class="grid v">
+    <div class="grid v">
+      <div class="v">1234</div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-006.html b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-006.html
new file mode 100644
index 0000000000..95d1243228
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/orthogonal-writing-mode-006.html
@@ -0,0 +1,79 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Test: Subgridded item sizing with mixed writing modes</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="match" href="orthogonal-writing-mode-006-ref.html">
+<style>
+body {
+  background: white;
+  color: black;
+  display: grid;
+  font: 20px/1 Ahem;
+  place-items: start;
+  padding: 0;
+  margin: 0;
+}
+.grid {
+  background: cyan;
+  display: grid;
+  padding: 5px;
+}
+.grid > .grid {
+  background: pink;
+  grid-template: subgrid / subgrid;
+}
+.h { writing-mode: horizontal-tb; }
+.v { writing-mode: vertical-rl; }
+</style>
+</head>
+<body>
+  <div class="grid h">
+    <div class="grid h">
+      <div class="h">1234</div>
+    </div>
+  </div>
+  <div class="grid h">
+    <div class="grid h">
+      <div class="v">1234</div>
+    </div>
+  </div>
+  <div class="grid h">
+    <div class="grid v">
+      <div class="h">1234</div>
+    </div>
+  </div>
+  <div class="grid h">
+    <div class="grid v">
+      <div class="v">1234</div>
+    </div>
+  </div>
+  <div class="grid v">
+    <div class="grid h">
+      <div class="h">1234</div>
+    </div>
+  </div>
+  <div class="grid v">
+    <div class="grid h">
+      <div class="v">1234</div>
+    </div>
+  </div>
+  <div class="grid v">
+    <div class="grid v">
+      <div class="h">1234</div>
+    </div>
+  </div>
+  <div class="grid v">
+    <div class="grid v">
+      <div class="v">1234</div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/parent-repeat-auto-fit-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/parent-repeat-auto-fit-001-ref.html
new file mode 100644
index 0000000000..2217497cd2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/parent-repeat-auto-fit-001-ref.html
@@ -0,0 +1,436 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid inside a parent with repeat(auto-fit) columns</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  width: 50px;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 3 / span 4;
+  grid-auto-rows: 8px;
+  background: grey;
+}
+
+.fit-0a  { grid-template-columns: [y] 0px [z] 1px [z] 1px [z] 1px [z] 1px [z]; }
+.fit-0b  { grid-template-columns: [x y] 0px [z] 1px [z] 1px [z] 1px [z]; }
+.fit-0c  { grid-template-columns: [x] 1px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z] 1px [z]; }
+.fit-0d  { grid-template-columns: [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z] 1px [z]; }
+.fit-0e  { grid-template-columns: [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px [z]; }
+.fit-0f  { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px; }
+.fit-0g  { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px [z] 1px [z]; }
+.fit-0h  { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z] 1px [z]; }
+.fit-0i  { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z]; }
+.fit-0j  { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px; }
+.fit-0k  { grid-template-columns: [y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px; }
+.fit-0l  { grid-template-columns: [x y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px; }
+.fit-0m  { grid-template-columns: [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [y] 0px; }
+
+.fit-1a  { grid-template-columns: [y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z] 1px [z]; }
+.fit-1b  { grid-template-columns: [x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]; }
+.fit-1c  { grid-template-columns: [x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z]; }
+.fit-1d  { grid-template-columns: [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z]; }
+.fit-1e  { grid-template-columns: [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px; }
+
+.fit-2a  { grid-template-columns: [y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]; }
+.fit-2b  { grid-template-columns: [x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z]; }
+.fit-2c  { grid-template-columns: [x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z]; }
+.fit-2d  { grid-template-columns: [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px; }
+
+.fit-3a  { grid-template-columns: [y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z]; }
+.fit-3b  { grid-template-columns: [x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z]; }
+.fit-3c  { grid-template-columns: [x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px; }
+
+.fit-4a  { grid-template-columns: [y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z]; }
+.fit-4b  { grid-template-columns: [x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px; }
+
+.fit-5   { grid-template-columns: [y] 0px [y] 0px [y] 10px [y] 10px [y] 10px; }
+
+.subgrid > :nth-child(2n)   {  background: black; }
+.subgrid > :nth-child(2n+1) {  background: pink; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid fit-0a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-0b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-0c"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-0d"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-0e"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-0f"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-0g"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-0h"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-0i"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-0j"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-0k"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-0l"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-0m"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-1a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-1b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-1c"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-1d"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-1e"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-2a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-2b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-2c"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-2d"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-3a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-3b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-3c"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-4a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-4b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-5"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/parent-repeat-auto-fit-001.html b/testing/web-platform/tests/css/css-grid/subgrid/parent-repeat-auto-fit-001.html
new file mode 100644
index 0000000000..8ecbccbea6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/parent-repeat-auto-fit-001.html
@@ -0,0 +1,485 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid inside a parent with repeat(auto-fit) columns</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2/">
+  <link rel="match" href="parent-repeat-auto-fit-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+#report {
+  white-space: pre-wrap;
+}
+
+.grid {
+  display: inline-grid;
+  width: 50px;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 3 / span 4;
+  grid-auto-rows: 8px;
+  background: grey;
+}
+
+.fit-0a  { grid-template-columns: repeat(auto-fit, [y] 30px) [z] 1px [z] 1px [z] 1px [z] 1px [z] minmax(0, auto) }
+.fit-0b  { grid-template-columns: [x] repeat(auto-fit, [y] 30px) [z] 1px [z] 1px [z] 1px [z] minmax(0, auto) minmax(0, auto) }
+.fit-0c  { grid-template-columns: [x] 1px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] }
+.fit-0d  { grid-template-columns: [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] }
+.fit-0e  { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] }
+.fit-0f  { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) }
+.fit-0g  { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] }
+.fit-0h  { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] }
+.fit-0i  { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] }
+.fit-0j  { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) }
+.fit-0k  { grid-template-columns: repeat(auto-fit, [y] 10px) repeat(100, [z] 10px) }
+.fit-0l  { grid-template-columns: [x] repeat(auto-fit, [y] 10px) repeat(100, [z] 10px) }
+.fit-0m  { grid-template-columns: repeat(100, [x] 10px) repeat(auto-fit, [y] 10px) }
+
+.fit-1a  { grid-template-columns: repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] 1px [z] }
+.fit-1b  { grid-template-columns: [x] repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] }
+.fit-1c  { grid-template-columns: [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] }
+.fit-1d  { grid-template-columns: [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] }
+.fit-1e  { grid-template-columns: [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) }
+
+.fit-2a  { grid-template-columns: repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] }
+.fit-2b  { grid-template-columns: [x] repeat(auto-fit, [y] 10px) [z] 1px [z] minmax(0, auto) }
+.fit-2c  { grid-template-columns: [x] 2px [x] repeat(auto-fit, [y] 10px) [z] minmax(0, auto) }
+.fit-2d  { grid-template-columns: [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) }
+
+.fit-3a  { grid-template-columns: repeat(auto-fit, [y] 10px) [z] 1px [z] minmax(0, auto) }
+.fit-3b  { grid-template-columns: [x] repeat(auto-fit, [y] 10px) [z] minmax(0, auto) }
+.fit-3c  { grid-template-columns: [x] 2px [x] repeat(auto-fit, [y] 10px) minmax(0, auto) }
+
+.fit-4a  { grid-template-columns: repeat(auto-fit, [y] 10px) [z] minmax(0, auto) }
+.fit-4b  { grid-template-columns: [x] repeat(auto-fit, [y] 10px) minmax(0, auto) }
+
+.fit-5   { grid-template-columns: repeat(auto-fit, [y] 10px) minmax(0, auto) }
+
+.subgrid > :nth-child(2n)   {  background: black; }
+.subgrid > :nth-child(2n+1) {  background: pink; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid fit-0a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-0b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-0c"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-0d"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-0e"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-0f"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-0g"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-0h"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-0i"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-0j"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-0k"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-0l"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-0m"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-1a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-1b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-1c"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-1d"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-1e"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-2a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-2b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-2c"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-2d"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-3a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-3b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-3c"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-4a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-4b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid fit-5"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div id="report"></div>
+
+<script>
+  const expectedResults = [
+    "[y] 0px [z] 1px [z] 1px [z] 1px [z] 1px [z] 46px",
+    "[x y] 0px [z] 1px [z] 1px [z] 1px [z] 23.5px 23.5px",
+    "[x] 1px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z] 1px [z]",
+    "[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z] 1px [z]",
+    "[x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px [z]",
+    "[x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px",
+    "[x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px [z] 1px [z]",
+    "[x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z] 1px [z]",
+    "[x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z]",
+    "[x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px",
+    "[y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px",
+    "[x y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px",
+    "[x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [y] 0px",
+    "[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z] 1px [z]",
+    "[x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]",
+    "[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z]",
+    "[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z]",
+    "[x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px",
+    "[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]",
+    "[x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 29px",
+    "[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 18px",
+    "[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px",
+    "[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 29px",
+    "[x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z] 20px",
+    "[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px 18px",
+    "[y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z] 20px",
+    "[x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px 20px",
+    "[y] 0px [y] 0px [y] 10px [y] 10px [y] 10px 20px",
+  ];
+  [...document.querySelectorAll('.grid')].forEach(function(grid, i) {
+    let actual = window.getComputedStyle(grid)['grid-template-columns'];
+    let expected = expectedResults[i];
+    if (actual != expected) {
+      let err = "\nUnexpected getComputedStyle value for grid " + i + " with className '" + grid.className + "':" +
+      " Actual: \"" + actual + "\", Expected: \"" + expected + "\"\n";
+      report.appendChild(document.createTextNode(err));
+    }
+  });
+</script>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/parent-repeat-auto-fit-002-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/parent-repeat-auto-fit-002-ref.html
new file mode 100644
index 0000000000..a884a12b99
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/parent-repeat-auto-fit-002-ref.html
@@ -0,0 +1,440 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid inside a parent with repeat(auto-fit) rows</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  height: 50px;
+  width: 50px;
+  grid-template-columns: repeat(auto-fit, 10px);
+  border: 1px solid;
+  vertical-align: top;
+}
+
+.subgrid {
+  display: grid;
+  grid: subgrid / subgrid;
+  grid-column: 1 / -1;
+  grid-row: 3 / span 4;
+  grid-auto-columns: 8px;
+  background: grey;
+}
+
+.fit-0a  { grid-template-rows: [y] 0px [z] 1px [z] 1px [z] 1px [z] 1px [z]; }
+.fit-0b  { grid-template-rows: [x y] 0px [z] 1px [z] 1px [z] 1px [z]; }
+.fit-0c  { grid-template-rows: [x] 1px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z] 1px [z]; }
+.fit-0d  { grid-template-rows: [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z] 1px [z]; }
+.fit-0e  { grid-template-rows: [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px [z]; }
+.fit-0f  { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px; }
+.fit-0g  { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px [z] 1px [z]; }
+.fit-0h  { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z] 1px [z]; }
+.fit-0i  { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z]; }
+.fit-0j  { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px; }
+.fit-0k  { grid-template-rows: [y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px; }
+.fit-0l  { grid-template-rows: [x y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px; }
+.fit-0m  { grid-template-rows: [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [y] 0px; }
+
+.fit-1a  { grid-template-rows: [y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z] 1px [z]; }
+.fit-1b  { grid-template-rows: [x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]; }
+.fit-1c  { grid-template-rows: [x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z]; }
+.fit-1d  { grid-template-rows: [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z]; }
+.fit-1e  { grid-template-rows: [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px; }
+
+.fit-2a  { grid-template-rows: [y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]; }
+.fit-2b  { grid-template-rows: [x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z]; }
+.fit-2c  { grid-template-rows: [x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z]; }
+.fit-2d  { grid-template-rows: [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px; }
+
+.fit-3a  { grid-template-rows: [y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z]; }
+.fit-3b  { grid-template-rows: [x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z]; }
+.fit-3c  { grid-template-rows: [x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px; }
+
+.fit-4a  { grid-template-rows: [y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z]; }
+.fit-4b  { grid-template-rows: [x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px; }
+
+.fit-5   { grid-template-rows: [y] 0px [y] 0px [y] 10px [y] 10px [y] 10px; }
+
+.subgrid > :nth-child(2n)   {  background: black; }
+.subgrid > :nth-child(2n+1) {  background: pink; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid fit-0a"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-0b"><div class="subgrid" style="grid-column-start:2">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-0c"><div class="subgrid" style="grid-column-start:3">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-0d"><div class="subgrid" style="grid-column-start:4">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-0e"><div class="subgrid" style="grid-column-start:5">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-0f"><div class="subgrid" style="grid-column-start:6">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-0g"><div class="subgrid" style="grid-column-end:-2">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-0h"><div class="subgrid" style="grid-column-end:-3">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-0i"><div class="subgrid" style="grid-column-end:-4">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-0j"><div class="subgrid" style="grid-column-end:-5">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-0k"><div class="subgrid" style="grid-column-end:-6">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-0l"><div class="subgrid" style="grid-column:2/-2">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-0m"><div class="subgrid" style="grid-column:3/-3">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-1a"><div class="subgrid" style="grid-column:2/-3">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-1b"><div class="subgrid" style="grid-column:3/-2">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-1c"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-1d"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-1e"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-2a"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-2b"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-2c"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-2d"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-3a"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-3b"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-3c"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-4a"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-4b"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-5"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/parent-repeat-auto-fit-002.html b/testing/web-platform/tests/css/css-grid/subgrid/parent-repeat-auto-fit-002.html
new file mode 100644
index 0000000000..b113f47a0b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/parent-repeat-auto-fit-002.html
@@ -0,0 +1,489 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid inside a parent with repeat(auto-fit) rows</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2/">
+  <link rel="match" href="parent-repeat-auto-fit-002-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+#report {
+  white-space: pre-wrap;
+}
+
+.grid {
+  display: inline-grid;
+  height: 50px;
+  width: 50px;
+  grid-template-columns: repeat(auto-fit, 10px);
+  border: 1px solid;
+  vertical-align: top;
+}
+
+.subgrid {
+  display: grid;
+  grid: subgrid / subgrid;
+  grid-column: 1 / -1;
+  grid-row: 3 / span 4;
+  grid-auto-columns: 8px;
+  background: grey;
+}
+
+.fit-0a  { grid-template-rows: repeat(auto-fit, [y] 30px) [z] 1px [z] 1px [z] 1px [z] 1px [z] minmax(0, auto) }
+.fit-0b  { grid-template-rows: [x] repeat(auto-fit, [y] 30px) [z] 1px [z] 1px [z] 1px [z] minmax(0, auto) minmax(0, auto) }
+.fit-0c  { grid-template-rows: [x] 1px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] }
+.fit-0d  { grid-template-rows: [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] }
+.fit-0e  { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] }
+.fit-0f  { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) }
+.fit-0g  { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] }
+.fit-0h  { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] }
+.fit-0i  { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] }
+.fit-0j  { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) }
+.fit-0k  { grid-template-rows: repeat(auto-fit, [y] 10px) repeat(100, [z] 10px) }
+.fit-0l  { grid-template-rows: [x] repeat(auto-fit, [y] 10px) repeat(100, [z] 10px) }
+.fit-0m  { grid-template-rows: repeat(100, [x] 10px) repeat(auto-fit, [y] 10px) }
+
+.fit-1a  { grid-template-rows: repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] 1px [z] }
+.fit-1b  { grid-template-rows: [x] repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] }
+.fit-1c  { grid-template-rows: [x] 2px [x] repeat(auto-fit, [y] 10px) [z] 1px [z] }
+.fit-1d  { grid-template-rows: [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) [z] }
+.fit-1e  { grid-template-rows: [x] 2px [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) }
+
+.fit-2a  { grid-template-rows: repeat(auto-fit, [y] 10px) [z] 1px [z] 1px [z] }
+.fit-2b  { grid-template-rows: [x] repeat(auto-fit, [y] 10px) [z] 1px [z] minmax(0, auto) }
+.fit-2c  { grid-template-rows: [x] 2px [x] repeat(auto-fit, [y] 10px) [z] minmax(0, auto) }
+.fit-2d  { grid-template-rows: [x] 2px [x] 2px [x] repeat(auto-fit, [y] 10px) }
+
+.fit-3a  { grid-template-rows: repeat(auto-fit, [y] 10px) [z] 1px [z] minmax(0, auto) }
+.fit-3b  { grid-template-rows: [x] repeat(auto-fit, [y] 10px) [z] minmax(0, auto) }
+.fit-3c  { grid-template-rows: [x] 2px [x] repeat(auto-fit, [y] 10px) minmax(0, auto) }
+
+.fit-4a  { grid-template-rows: repeat(auto-fit, [y] 10px) [z] minmax(0, auto) }
+.fit-4b  { grid-template-rows: [x] repeat(auto-fit, [y] 10px) minmax(0, auto) }
+
+.fit-5   { grid-template-rows: repeat(auto-fit, [y] 10px) minmax(0, auto) }
+
+.subgrid > :nth-child(2n)   {  background: black; }
+.subgrid > :nth-child(2n+1) {  background: pink; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid fit-0a"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-0b"><div class="subgrid" style="grid-column-start:2">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-0c"><div class="subgrid" style="grid-column-start:3">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-0d"><div class="subgrid" style="grid-column-start:4">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-0e"><div class="subgrid" style="grid-column-start:5">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-0f"><div class="subgrid" style="grid-column-start:6">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-0g"><div class="subgrid" style="grid-column-end:-2">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-0h"><div class="subgrid" style="grid-column-end:-3">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-0i"><div class="subgrid" style="grid-column-end:-4">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-0j"><div class="subgrid" style="grid-column-end:-5">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-0k"><div class="subgrid" style="grid-column-end:-6">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-0l"><div class="subgrid" style="grid-column:2/-2">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-0m"><div class="subgrid" style="grid-column:3/-3">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-1a"><div class="subgrid" style="grid-column:2/-3">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-1b"><div class="subgrid" style="grid-column:3/-2">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-1c"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-1d"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-1e"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-2a"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-2b"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-2c"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-2d"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-3a"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-3b"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-3c"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-4a"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-4b"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div class="grid fit-5"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div>
+
+<div id="report"></div>
+
+<script>
+  const expectedResults = [
+    "[y] 0px [z] 1px [z] 1px [z] 1px [z] 1px [z] 46px",
+    "[x y] 0px [z] 1px [z] 1px [z] 1px [z] 23.5px 23.5px",
+    "[x] 1px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z] 1px [z]",
+    "[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z] 1px [z]",
+    "[x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px [z]",
+    "[x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px",
+    "[x] 2px [x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 0px [y] 0px [z] 1px [z]",
+    "[x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z] 1px [z]",
+    "[x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px [z]",
+    "[x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x] 2px [x y] 0px [y] 0px [y] 0px",
+    "[y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px",
+    "[x y] 0px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px [z] 10px",
+    "[x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [x] 10px [y] 0px",
+    "[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z] 1px [z]",
+    "[x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]",
+    "[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 1px [z]",
+    "[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px [z]",
+    "[x] 2px [x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 0px",
+    "[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 1px [z]",
+    "[x y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 29px",
+    "[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px [z] 18px",
+    "[x] 2px [x] 2px [x y] 10px [y] 10px [y] 10px [y] 10px",
+    "[y] 0px [y] 0px [y] 10px [y] 10px [z] 1px [z] 29px",
+    "[x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z] 20px",
+    "[x] 2px [x y] 0px [y] 10px [y] 10px [y] 10px 18px",
+    "[y] 0px [y] 0px [y] 10px [y] 10px [y] 10px [z] 20px",
+    "[x y] 0px [y] 0px [y] 10px [y] 10px [y] 10px 20px",
+    "[y] 0px [y] 0px [y] 10px [y] 10px [y] 10px 20px",
+  ];
+  [...document.querySelectorAll('.grid')].forEach(function(grid, i) {
+    let actual = window.getComputedStyle(grid)['grid-template-rows'];
+    let expected = expectedResults[i];
+    if (actual != expected) {
+      let err = "\nUnexpected getComputedStyle value for grid " + i + " with className '" + grid.className + "':" +
+      " Actual: \"" + actual + "\", Expected: \"" + expected + "\"\n";
+      report.appendChild(document.createTextNode(err));
+    }
+  });
+</script>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/placement-implicit-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/placement-implicit-001-ref.html
new file mode 100644
index 0000000000..c27d3334d9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/placement-implicit-001-ref.html
@@ -0,0 +1,68 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: : Implicit line placement with a subgrid</title>
+  <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2/#placement">
+  <style>
+html,body {
+  font:10px/1 monospace;
+  padding:0;
+  margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-columns: 15px;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 3 / span 4;
+  grid-auto-rows: 8px;
+  background: grey;
+}
+
+.subgrid > :nth-child(2n)   {  background: black; }
+.subgrid > :nth-child(2n+1) {  background: pink; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid">
+    <div style="grid-column:5"></div>
+    <div style="grid-column:x"></div>
+    <div style="grid-column:5"></div>
+    <div style="grid-row: 4; grid-column:1"></div>
+    <div style="grid-column:5"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <div style="grid-column:5"></div>
+    <div style="grid-column:5"></div>
+    <div style="grid-column:5"></div>
+    <div style="grid-column:5"></div>
+    <div style="grid-column:5"></div>
+    <div style="grid-column:5"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <div style="grid-column:5"></div>
+    <div style="grid-row: 2; grid-column:1"></div>
+    <div style="grid-column:5"></div>
+    <div style="grid-row: 3; grid-column:1"></div>
+    <div style="grid-column:5"></div>
+    <div style="grid-row: 4; grid-column:1"></div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/placement-implicit-001.html b/testing/web-platform/tests/css/css-grid/subgrid/placement-implicit-001.html
new file mode 100644
index 0000000000..738b83f482
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/placement-implicit-001.html
@@ -0,0 +1,69 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Implicit line placement with a subgrid</title>
+  <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2/#placement">
+  <link rel="match" href="placement-implicit-001-ref.html">
+  <style>
+html,body {
+  font:10px/1 monospace;
+  padding:0;
+  margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-columns: 15px;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 3 / span 4;
+  grid-auto-rows: 8px;
+  background: grey;
+}
+
+.subgrid > :nth-child(2n)   {  background: black; }
+.subgrid > :nth-child(2n+1) {  background: pink; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid">
+    <div style="grid-column:5"></div>
+    <div style="grid-column:x"></div>
+    <div style="grid-column:5"></div>
+    <div></div>
+    <div style="grid-column:5"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <div style="grid-column:5"></div>
+    <div style="grid-column:5"></div>
+    <div style="grid-column:x"></div>
+    <div style="grid-column:5"></div>
+    <div style="grid-column:x"></div>
+    <div style="grid-column:5"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <div style="grid-column:5"></div>
+    <div></div>
+    <div style="grid-column:5"></div>
+    <div></div>
+    <div style="grid-column:5"></div>
+    <div></div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-001-ref.html
new file mode 100644
index 0000000000..8cd0ef66b9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-001-ref.html
@@ -0,0 +1,401 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: repeat(auto-fill, line-names)</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-columns: 15px;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 3 / span 4;
+  grid-auto-rows: 8px;
+  background: grey;
+}
+
+.subgrid > :nth-child(2n)   {  background: black; }
+.subgrid > :nth-child(2n+1) {  background: pink; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid"><div class="subgrid fill-0a">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0b">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0c">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0d">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0e">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0f">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0g">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0h">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0i">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0j">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0k">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0l">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0m">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1a">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1b">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1c">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1d">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1e">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-2a">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-2b">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-2c">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-2d">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-3a">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-3b">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-3c">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-4a">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-4b">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-5">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-001.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-001.html
new file mode 100644
index 0000000000..9e57028c4c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-001.html
@@ -0,0 +1,478 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: repeat(auto-fill, line-names)</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing">
+  <link rel="match" href="repeat-auto-fill-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-columns: 15px;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid-column: 3 / span 4;
+  grid-auto-rows: 8px;
+  background: grey;
+}
+
+.fill-0a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] [z] }  /* [z] [z] [z] [z] [z] */
+.fill-0b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] [z] }  /* [x] [z] [z] [z] [z] */
+.fill-0c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] [z] }  /* [x] [x] [z] [z] [z] */
+.fill-0d  { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [x] [z] [z] */
+.fill-0e  { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [x] [x] [z] */
+.fill-0f  { grid-template-columns: subgrid [x] [x] [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [x] */
+.fill-0g  { grid-template-columns: subgrid [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [x] [x] [x] */
+.fill-0h  { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [x] [x] [x] */
+.fill-0i  { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [x] [x] [x] */
+.fill-0j  { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [x] */
+.fill-0k  { grid-template-columns: subgrid repeat(auto-fill, [y]) repeat(100, [z]) }  /* [z] [z] [z] [z] [z] */
+.fill-0l  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) repeat(100, [z]) }  /* [x] [z] [z] [z] [z] */
+.fill-0m  { grid-template-columns: subgrid  repeat(100, [x]) repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [x] */
+
+.fill-1a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] }  /* [y] [z] [z] [z] [z] */
+.fill-1b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] }  /* [x] [y] [z] [z] [z] */
+.fill-1c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [y] [z] [z] */
+.fill-1d  { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [x] [y] [z] */
+.fill-1e  { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [y] */
+
+.fill-2a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] }  /* [y] [y] [z] [z] [z] */
+.fill-2b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [y] [y] [z] [z] */
+.fill-2c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [y] [y] [z] */
+.fill-2d  { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [y] [y] */
+
+.fill-3a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] }  /* [y] [y] [y] [z] [z] */
+.fill-3b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] }  /* [x] [y] [y] [y] [z] */
+.fill-3c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [y] [y] [y] */
+
+.fill-4a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] }  /* [y] [y] [y] [y] [z] */
+.fill-4b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) }  /* [x] [y] [y] [y] [y] */
+
+.fill-5   { grid-template-columns: subgrid repeat(auto-fill, [y]) }  /* [y] [y] [y] [y] [y] */
+
+.subgrid > :nth-child(2n)   {  background: black; }
+.subgrid > :nth-child(2n+1) {  background: pink; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid"><div class="subgrid fill-0a">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0b">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0c">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0d">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0e">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0f">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0g">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0h">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0i">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0j">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0k">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0l">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0m">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1a">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1b">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1c">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1d">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1e">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-2a">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-2b">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-2c">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-2d">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-3a">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-3b">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-3c">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-4a">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-4b">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-5">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<script>
+  const expectedResults = [
+    "subgrid [z] [z] [z] [z] [z]",
+    "subgrid [x] [z] [z] [z] [z]",
+    "subgrid [x] [x] [z] [z] [z]",
+    "subgrid [x] [x] [x] [z] [z]",
+    "subgrid [x] [x] [x] [x] [z]",
+    "subgrid [x] [x] [x] [x] [x]",
+    "subgrid [x] [x] [x] [x] [x]",
+    "subgrid [x] [x] [x] [x] [x]",
+    "subgrid [x] [x] [x] [x] [x]",
+    "subgrid [x] [x] [x] [x] [x]",
+    "subgrid [z] [z] [z] [z] [z]",
+    "subgrid [x] [z] [z] [z] [z]",
+    "subgrid [x] [x] [x] [x] [x]",
+    "subgrid [y] [z] [z] [z] [z]",
+    "subgrid [x] [y] [z] [z] [z]",
+    "subgrid [x] [x] [y] [z] [z]",
+    "subgrid [x] [x] [x] [y] [z]",
+    "subgrid [x] [x] [x] [x] [y]",
+    "subgrid [y] [y] [z] [z] [z]",
+    "subgrid [x] [y] [y] [z] [z]",
+    "subgrid [x] [x] [y] [y] [z]",
+    "subgrid [x] [x] [x] [y] [y]",
+    "subgrid [y] [y] [y] [z] [z]",
+    "subgrid [x] [y] [y] [y] [z]",
+    "subgrid [x] [x] [y] [y] [y]",
+    "subgrid [y] [y] [y] [y] [z]",
+    "subgrid [x] [y] [y] [y] [y]",
+    "subgrid [y] [y] [y] [y] [y]",
+  ];
+  [...document.querySelectorAll('.subgrid')].forEach(function(subgrid, i) {
+    let actual = window.getComputedStyle(subgrid)['grid-template-columns'];
+    let expected = expectedResults[i];
+    if (actual != expected) {
+      let err = "Unexpected getComputedStyle value for subgrid " + i + " with className '" + subgrid.className + "':" +
+      " Actual: \"" + actual + "\", Expected: \"" + expected + "\"";
+      document.body.appendChild(document.createTextNode(err));
+    }
+  });
+</script>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-002.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-002.html
new file mode 100644
index 0000000000..80980f14e9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-002.html
@@ -0,0 +1,439 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: repeat(auto-fill, line-names) in parent subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing">
+  <link rel="match" href="repeat-auto-fill-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-columns: 15px;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 3 / span 4;
+  grid-auto-rows: 8px;
+  background: grey;
+}
+.grid > .subgrid { grid-template-rows: auto; }
+.grid > .subgrid > .subgrid { grid-column: 1 / span 4; }
+
+.fill-0a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] [z] }  /* [z] [z] [z] [z] [z] */
+.fill-0b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] [z] }  /* [x] [z] [z] [z] [z] */
+.fill-0c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] [z] }  /* [x] [x] [z] [z] [z] */
+.fill-0d  { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [x] [z] [z] */
+.fill-0e  { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [x] [x] [z] */
+.fill-0f  { grid-template-columns: subgrid [x] [x] [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [x] */
+.fill-0g  { grid-template-columns: subgrid [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [x] [x] [x] */
+.fill-0h  { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [x] [x] [x] */
+.fill-0i  { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [x] [x] [x] */
+.fill-0j  { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [x] */
+.fill-0k  { grid-template-columns: subgrid repeat(auto-fill, [y]) repeat(100, [z]) }  /* [z] [z] [z] [z] [z] */
+.fill-0l  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) repeat(100, [z]) }  /* [x] [z] [z] [z] [z] */
+.fill-0m  { grid-template-columns: subgrid  repeat(100, [x]) repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [x] */
+
+.fill-1a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] }  /* [y] [z] [z] [z] [z] */
+.fill-1b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] }  /* [x] [y] [z] [z] [z] */
+.fill-1c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [y] [z] [z] */
+.fill-1d  { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [x] [y] [z] */
+.fill-1e  { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [y] */
+
+.fill-2a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] }  /* [y] [y] [z] [z] [z] */
+.fill-2b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [y] [y] [z] [z] */
+.fill-2c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [y] [y] [z] */
+.fill-2d  { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [y] [y] */
+
+.fill-3a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] }  /* [y] [y] [y] [z] [z] */
+.fill-3b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] }  /* [x] [y] [y] [y] [z] */
+.fill-3c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [y] [y] [y] */
+
+.fill-4a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] }  /* [y] [y] [y] [y] [z] */
+.fill-4b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) }  /* [x] [y] [y] [y] [y] */
+
+.fill-5   { grid-template-columns: subgrid repeat(auto-fill, [y]) }  /* [y] [y] [y] [y] [y] */
+
+.subgrid > .subgrid > :nth-child(2n)   {  background: black; }
+.subgrid > .subgrid > :nth-child(2n+1) {  background: pink; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid"><div class="subgrid fill-0a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0c"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0d"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0e"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0f"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0g"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0h"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0i"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0j"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0k"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0l"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0m"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1c"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1d"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1e"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-2a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-2b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-2c"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-2d"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-3a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-3b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-3c"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-4a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-4b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-5"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-003.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-003.html
new file mode 100644
index 0000000000..df14ed8350
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-003.html
@@ -0,0 +1,446 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: repeat(auto-fill, line-names) in orthogonal parent subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing">
+  <link rel="match" href="repeat-auto-fill-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px monospace; padding:0; margin:0; line-height:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-columns: 15px;
+  border: 1px solid;
+  vertical-align: top;
+}
+
+.subgrid {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 3 / span 4;
+  background: grey;
+}
+.grid > .subgrid > .subgrid {
+  writing-mode: vertical-lr;
+  grid-template-rows: subgrid;
+  grid-template-columns: initial;
+  grid-column: 1 / span 4;
+  grid-auto-columns: 8px;
+  grid-auto-flow: column;
+}
+
+.fill-0a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] [z] }  /* [z] [z] [z] [z] [z] */
+.fill-0b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] [z] }  /* [x] [z] [z] [z] [z] */
+.fill-0c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] [z] }  /* [x] [x] [z] [z] [z] */
+.fill-0d  { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [x] [z] [z] */
+.fill-0e  { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [x] [x] [z] */
+.fill-0f  { grid-template-columns: subgrid [x] [x] [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [x] */
+.fill-0g  { grid-template-columns: subgrid [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [x] [x] [x] */
+.fill-0h  { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [x] [x] [x] */
+.fill-0i  { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [x] [x] [x] */
+.fill-0j  { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [x] */
+.fill-0k  { grid-template-columns: subgrid repeat(auto-fill, [y]) repeat(100, [z]) }  /* [z] [z] [z] [z] [z] */
+.fill-0l  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) repeat(100, [z]) }  /* [x] [z] [z] [z] [z] */
+.fill-0m  { grid-template-columns: subgrid  repeat(100, [x]) repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [x] */
+
+.fill-1a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] }  /* [y] [z] [z] [z] [z] */
+.fill-1b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] }  /* [x] [y] [z] [z] [z] */
+.fill-1c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [y] [z] [z] */
+.fill-1d  { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [x] [y] [z] */
+.fill-1e  { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [y] */
+
+.fill-2a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] }  /* [y] [y] [z] [z] [z] */
+.fill-2b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [y] [y] [z] [z] */
+.fill-2c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [y] [y] [z] */
+.fill-2d  { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [y] [y] */
+
+.fill-3a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] }  /* [y] [y] [y] [z] [z] */
+.fill-3b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] }  /* [x] [y] [y] [y] [z] */
+.fill-3c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [y] [y] [y] */
+
+.fill-4a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] }  /* [y] [y] [y] [y] [z] */
+.fill-4b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) }  /* [x] [y] [y] [y] [y] */
+
+.fill-5   { grid-template-columns: subgrid repeat(auto-fill, [y]) }  /* [y] [y] [y] [y] [y] */
+
+.subgrid > .subgrid > :nth-child(2n)   {  background: black; }
+.subgrid > .subgrid > :nth-child(2n+1) {  background: pink; }
+.subgrid > .subgrid > * { writing-mode: horizontal-tb; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid"><div class="subgrid fill-0a"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0b"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0c"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0d"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0e"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0f"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0g"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0h"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0i"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0j"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0k"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0l"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0m"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1a"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1b"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1c"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1d"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1e"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-2a"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-2b"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-2c"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-2d"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-3a"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-3b"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-3c"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-4a"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-4b"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-5"><div class="subgrid">
+  <div style="grid-row:y 5"></div>
+  <div style="grid-row:y 4"></div>
+  <div style="grid-row:y 3"></div>
+  <div style="grid-row:y 2"></div>
+  <div style="grid-row:y 1"></div>
+  <div style="grid-row:y -1"></div>
+  <div style="grid-row:y -2"></div>
+  <div style="grid-row:y -3"></div>
+  <div style="grid-row:y -4"></div>
+  <div style="grid-row:y -5"></div>
+</div></div></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-004-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-004-ref.html
new file mode 100644
index 0000000000..ca2729fa3f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-004-ref.html
@@ -0,0 +1,401 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: repeat(auto-fill, line-names) in RTL/LTR subgrids</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-columns: 15px;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 3 / span 4;
+  grid-auto-rows: 8px;
+  background: grey;
+}
+
+.subgrid > :nth-child(2n)   {  background: black; }
+.subgrid > :nth-child(2n+1) {  background: pink; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid"><div class="subgrid fill-0a">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0b">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0c">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0d">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0e">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0f">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0g">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0h">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0i">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0j">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0k">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0l">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0m">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1a">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1b">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1c">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1d">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-1e">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-2a">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-2b">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-2c">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-2d">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-3a">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-3b">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-3c">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-4a">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-4b">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-5">
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:4"></div>
+  <div style="grid-column:3"></div>
+  <div style="grid-column:2"></div>
+  <div style="grid-column:1"></div>
+</div></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-004.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-004.html
new file mode 100644
index 0000000000..9dd8f33eb9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-004.html
@@ -0,0 +1,439 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: repeat(auto-fill, line-names) in RTL/LTR subgrids</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing">
+  <link rel="match" href="repeat-auto-fill-004-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-columns: 15px;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 3 / span 4;
+  grid-auto-rows: 8px;
+  background: grey;
+}
+.grid > .subgrid { grid-template-rows: auto; direction:rtl; }
+.grid > .subgrid > .subgrid { grid-column: 1 / span 4; direction:ltr; }
+
+.fill-0a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] [z] }  /* [z] [z] [z] [z] [z] */
+.fill-0b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] [z] }  /* [x] [z] [z] [z] [z] */
+.fill-0c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] [z] }  /* [x] [x] [z] [z] [z] */
+.fill-0d  { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [x] [z] [z] */
+.fill-0e  { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [x] [x] [z] */
+.fill-0f  { grid-template-columns: subgrid [x] [x] [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [x] */
+.fill-0g  { grid-template-columns: subgrid [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [x] [x] [x] */
+.fill-0h  { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [x] [x] [x] */
+.fill-0i  { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [x] [x] [x] */
+.fill-0j  { grid-template-columns: subgrid [x] [x] [x] [x] [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [x] */
+.fill-0k  { grid-template-columns: subgrid repeat(auto-fill, [y]) repeat(100, [z]) }  /* [z] [z] [z] [z] [z] */
+.fill-0l  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) repeat(100, [z]) }  /* [x] [z] [z] [z] [z] */
+.fill-0m  { grid-template-columns: subgrid  repeat(100, [x]) repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [x] */
+
+.fill-1a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] [z] }  /* [y] [z] [z] [z] [z] */
+.fill-1b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] [z] }  /* [x] [y] [z] [z] [z] */
+.fill-1c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [x] [y] [z] [z] */
+.fill-1d  { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [x] [y] [z] */
+.fill-1e  { grid-template-columns: subgrid [x] [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [x] [y] */
+
+.fill-2a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] [z] }  /* [y] [y] [z] [z] [z] */
+.fill-2b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] [z] }  /* [x] [y] [y] [z] [z] */
+.fill-2c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) [z] }  /* [x] [x] [y] [y] [z] */
+.fill-2d  { grid-template-columns: subgrid [x] [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [x] [y] [y] */
+
+.fill-3a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] }  /* [y] [y] [y] [z] [z] */
+.fill-3b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] }  /* [x] [y] [y] [y] [z] */
+.fill-3c  { grid-template-columns: subgrid [x] [x] repeat(auto-fill, [y]) }  /* [x] [x] [y] [y] [y] */
+
+.fill-4a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] }  /* [y] [y] [y] [y] [z] */
+.fill-4b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) }  /* [x] [y] [y] [y] [y] */
+
+.fill-5   { grid-template-columns: subgrid repeat(auto-fill, [y]) }  /* [y] [y] [y] [y] [y] */
+
+.subgrid > .subgrid > :nth-child(2n)   {  background: black; }
+.subgrid > .subgrid > :nth-child(2n+1) {  background: pink; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid"><div class="subgrid fill-0a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0c"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0d"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0e"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0f"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0g"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0h"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0i"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0j"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0k"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0l"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-0m"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1c"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1d"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-1e"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-2a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-2b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-2c"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-2d"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-3a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-3b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-3c"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-4a"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-4b"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+<div class="grid"><div class="subgrid fill-5"><div class="subgrid">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-005-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-005-ref.html
new file mode 100644
index 0000000000..95976e8216
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-005-ref.html
@@ -0,0 +1,165 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: repeat(auto-fill / INTEGER, line-names)</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-columns: 20px;
+  background: lightgrey;
+}
+
+.subgrid {
+  display: grid;
+  grid: auto / subgrid;
+  grid-column: 2 / span 4;
+  background: black;
+}
+
+item {
+  min-width: 0;
+  min-height: 10px;
+  background: grey;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 2"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:2 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:2 / 4"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:3 / 4"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 2"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 4"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 2"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 2"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:2 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:2 / 3"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-column:1 / 2"></item>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-005.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-005.html
new file mode 100644
index 0000000000..0cf16d47a2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-005.html
@@ -0,0 +1,167 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: repeat(auto-fill / INTEGER, line-names)</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing">
+  <link rel="match" href="repeat-auto-fill-005-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-columns: 20px;
+  background: lightgrey;
+}
+
+.subgrid {
+  display: grid;
+  grid-column: 2 / span 4;
+  background: black;
+}
+
+item {
+  min-width: 0;
+  min-height: 10px;
+  grid-column:x -2 / x -1;
+  background: grey;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid [] [] repeat(auto-fill,[]) [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid [] [] repeat(auto-fill,[x]) [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid [] [] repeat(auto-fill,[x]) [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid [x] [x] repeat(auto-fill,[x]) [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid [x] [x] repeat(auto-fill,[x]) [] [x] []">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid [x] [x] repeat(auto-fill,[x]) [x] [x] []">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid [] [] repeat(auto-fill,[x]) [] [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid [] [] repeat(1,[]) [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid [] [] repeat(1,[]) [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid [] [] repeat(1,[]) [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid [] [] repeat(1,[]) [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid repeat(2,[]) repeat(auto-fill,[]) [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid repeat(2,[x]) repeat(auto-fill,[]) [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid repeat(2,[x]) repeat(auto-fill,[x]) [] []">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid repeat(3,[]) repeat(auto-fill,[]) [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid repeat(4,[]) repeat(auto-fill,[x]) [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid [] [] [] [] repeat(auto-fill,[x]) [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid repeat(auto-fill,[]) [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid repeat(auto-fill,[x]) [] [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid [] repeat(auto-fill,[x]) [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-columns:subgrid repeat(5,[]) repeat(auto-fill,[]) [x]">
+    <item></item>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-006.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-006.html
new file mode 100644
index 0000000000..8d4213c6d8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-006.html
@@ -0,0 +1,204 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: repeat(auto-fill / INTEGER, line-names)</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing">
+  <link rel="match" href="repeat-auto-fill-005-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-columns: 20px;
+  background: lightgrey;
+}
+
+.subgrid {
+  display: grid;
+  grid-column: 2 / span 4;
+  background: black;
+  writing-mode: vertical-lr;
+}
+
+item {
+  min-width: 0;
+  min-height: 10px;
+  grid-row:x -2 / x -1;
+  background: grey;
+  writing-mode: horizontal-tb;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(auto-fill,[]) [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(auto-fill,[x]) [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(auto-fill,[x]) [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [x] [x] repeat(auto-fill,[x]) [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [x] [x] repeat(auto-fill,[x]) [] [x] []">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [x] [x] repeat(auto-fill,[x]) [x] [x] []">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(auto-fill,[x]) [] [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(1,[]) [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(1,[]) [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(1,[]) [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(1,[]) [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(2,[]) repeat(auto-fill,[]) [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(2,[x]) repeat(auto-fill,[]) [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(2,[x]) repeat(auto-fill,[x]) [] []">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(3,[]) repeat(auto-fill,[]) [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(4,[]) repeat(auto-fill,[x]) [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] [] [] repeat(auto-fill,[x]) [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(auto-fill,[]) [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(auto-fill,[x]) [] [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] repeat(auto-fill,[x]) [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(5,[]) repeat(auto-fill,[]) [x]">
+    <item></item>
+  </div>
+</div>
+
+<script>
+  const expectedResults = [
+    "subgrid [] [] [] [] [x]",
+    "subgrid [] [] [] [] [x]",
+    "subgrid [] [] [] [] []",
+    "subgrid [x] [x] [] [] [x]",
+    "subgrid [x] [x] [] [x] []",
+    "subgrid [x] [x] [x] [x] []",
+    "subgrid [] [] [] [] []",
+    "subgrid [] [] [] [x] []",
+    "subgrid [] [] [] [] [x]",
+    "subgrid [] [] [] [] []",
+    "subgrid [] [] [] [] []",
+    "subgrid [] [] [] [] [x]",
+    "subgrid [x] [x] [] [] [x]",
+    "subgrid [x] [x] [x] [] []",
+    "subgrid [] [] [] [] [x]",
+    "subgrid [] [] [] [] [x]",
+    "subgrid [] [] [] [] [x]",
+    "subgrid [] [] [] [] [x]",
+    "subgrid [] [] [] [] [x]",
+    "subgrid [] [] [] [] [x]",
+    "subgrid [] [] [] [] []",
+  ];
+  [...document.querySelectorAll('.subgrid')].forEach(function(subgrid, i) {
+    let actual = window.getComputedStyle(subgrid)['grid-template-rows'];
+    let expected = expectedResults[i];
+    if (actual != expected) {
+      let err = "Unexpected getComputedStyle value for subgrid " + i + " with className '" + subgrid.className + "':" +
+      " Actual: \"" + actual + "\", Expected: \"" + expected + "\"";
+      document.body.appendChild(document.createTextNode(err));
+    }
+  });
+</script>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-007-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-007-ref.html
new file mode 100644
index 0000000000..9bc2eeff1c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-007-ref.html
@@ -0,0 +1,167 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: repeat(auto-fill / INTEGER, line-names)</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-columns: 20px;
+  background: lightgrey;
+}
+
+.subgrid {
+  display: grid;
+  grid: subgrid / auto;
+  grid-column: 2 / span 4;
+  background: black;
+  writing-mode: vertical-rl;
+}
+
+item {
+  min-width: 0;
+  min-height: 10px;
+  background: grey;
+  writing-mode: horizontal-tb;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 2"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:2 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:2 / 4"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:3 / 4"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 2"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 4"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 2"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 2"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:2 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:2 / 3"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 5"></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid">
+    <item style="grid-row:1 / 2"></item>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-007.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-007.html
new file mode 100644
index 0000000000..949d8296fe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-007.html
@@ -0,0 +1,169 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: repeat(auto-fill / INTEGER, line-names)</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-listing">
+  <link rel="match" href="repeat-auto-fill-007-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-columns: 20px;
+  background: lightgrey;
+}
+
+.subgrid {
+  display: grid;
+  grid-column: 2 / span 4;
+  background: black;
+  writing-mode: vertical-rl;
+}
+
+item {
+  min-width: 0;
+  min-height: 10px;
+  grid-row:x -2 / x -1;
+  background: grey;
+  writing-mode: horizontal-tb;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(auto-fill,[]) [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(auto-fill,[x]) [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(auto-fill,[x]) [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [x] [x] repeat(auto-fill,[x]) [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [x] [x] repeat(auto-fill,[x]) [] [x] []">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [x] [x] repeat(auto-fill,[x]) [x] [x] []">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(auto-fill,[x]) [] [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(1,[]) [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(1,[]) [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(1,[]) [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] repeat(1,[]) [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(2,[]) repeat(auto-fill,[]) [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(2,[x]) repeat(auto-fill,[]) [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(2,[x]) repeat(auto-fill,[x]) [] []">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(3,[]) repeat(auto-fill,[]) [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(4,[]) repeat(auto-fill,[x]) [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] [] [] [] repeat(auto-fill,[x]) [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(auto-fill,[]) [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(auto-fill,[x]) [] [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid [] repeat(auto-fill,[x]) [] [] [] [x]">
+    <item></item>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid" style="grid-template-rows:subgrid repeat(5,[]) repeat(auto-fill,[]) [x]">
+    <item></item>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-008-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-008-ref.html
new file mode 100644
index 0000000000..4cbb1540de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-008-ref.html
@@ -0,0 +1,322 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+  <head>
+    <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-columns: 15px;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid-column: 3 / span 4;
+  grid-auto-rows: 8px;
+  background: grey;
+}
+
+.fill-0a  { grid-template-columns: subgrid [z] [z] [z] [z] [z] }  /* [z] [z] [z] [z] [z] */
+.fill-0b  { grid-template-columns: subgrid [z] [z] [z] [z] [z] }  /* [z] [z] [z] [z] [z] */
+.fill-0c  { grid-template-columns: subgrid [x] [y] [y] [y] [z] }  /* [x] [y] [y] [y] [z] */
+.fill-0d  { grid-template-columns: subgrid [x] [z] [z] [z] [z] }  /* [x] [z] [z] [z] [z] */
+.fill-0e  { grid-template-columns: subgrid [x] [x] [x] [x] [z] }  /* [x] [x] [x] [x] [z] */
+.fill-0f  { grid-template-columns: subgrid [x] [x] [z] [z] [z] }  /* [x] [x] [z] [z] [z] */
+.fill-0g  { grid-template-columns: subgrid [x] [y] [z] [z]  }  /* [x] [y] [z] [z] [] */
+.fill-0h  { grid-template-columns: subgrid [x] [y] [x] [y] [z] }  /* [x] [y] [x] [y] [z] */
+.fill-0i  { grid-template-columns: subgrid [x] [y] [x] [y] }  /* [x] [y] [x] [y] [] */
+.fill-0j  { grid-template-columns: subgrid [y] [y] [y] [z] [z] }  /* [y] [y] [y] [z] [z] */
+.fill-0k  { grid-template-columns: subgrid [x] [y] [z] [z] }  /* [x] [y] [z] [z] [] */
+.fill-0l  { grid-template-columns: subgrid [z] [x] [y] [z] }  /* [z] [x] [y] [z] [] */
+.fill-0m  { grid-template-columns: subgrid [z] [x] [y] [x] [y] }  /* [z] [x] [y] [x] [y] */
+.fill-0n  { grid-template-columns: subgrid [z] [z] [z] [z] [z] }  /* [z] [z] [z] [z] [z] */
+.fill-0o  { grid-template-columns: subgrid [z] [x] [y] [z] }  /* [z] [x] [y] [z] [] */
+.fill-0p  { grid-template-columns: subgrid [z] [x] [y] [z] [x] }  /* [z] [x] [y] [z] [x] */
+.fill-0q  { grid-template-columns: subgrid [x] [y] [z] [x] }  /* [x] [y] [z] [x] [] */
+.fill-0r  { grid-template-columns: subgrid [x] [y] [z] [y] [z] }  /* [x] [y] [z] [y] [z] */
+
+.fill-0s  {
+  grid-column: 2 / span 5;
+  grid-template-columns: subgrid [w] [y] [z] [y] [z] [x];  /* [w] [y] [z] [y] [z] [x] */
+}
+
+.fill-0t  {
+  grid-column: 1 / span 6;
+  grid-template-columns: subgrid [w] [y] [z] [y] [z] [x];  /* [w] [y] [z] [y] [z] [x] [] */
+}
+
+.subgrid > :nth-child(2n)   {  background: black; }
+.subgrid > :nth-child(2n+1) {  background: pink; }
+
+    </style>
+  </head>
+<body>
+
+<div class="grid"><div class="subgrid fill-0a">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0b">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0c">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0d">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0e">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0f">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0g">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0h">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0i">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0j">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0k">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0l">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0m">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0n">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0o">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0p">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0q">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0r">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0s">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0t">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-008.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-008.html
new file mode 100644
index 0000000000..28238178f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-008.html
@@ -0,0 +1,358 @@
+<!DOCTYPE HTML>
+<html>
+  <link rel="author" title="Mozilla" href="https://mozilla.org">
+  <link rel="match" href="repeat-auto-fill-008-ref.html">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2/#resolved-track-list">
+  <head>
+    <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-columns: 15px;
+  border: 1px solid;
+}
+
+.subgrid {
+  display: grid;
+  grid-column: 3 / span 4;
+  grid-auto-rows: 8px;
+  background: grey;
+}
+
+.fill-0a  { grid-template-columns: subgrid repeat(auto-fill, [y] [y]) [z] [z] [z] [z] [z] }  /* [z] [z] [z] [z] [z] */
+.fill-0b  { grid-template-columns: subgrid [z] repeat(auto-fill, [z] [z] [z]) [z] }  /* [z] [z] [z] [z] [z] */
+.fill-0c  { grid-template-columns: subgrid [x] repeat(auto-fill, [y] [y] [y]) [z] }  /* [x] [y] [y] [y] [z] */
+.fill-0d  { grid-template-columns: subgrid [x] repeat(auto-fill, [z] [z]) }  /* [x] [z] [z] [z] [z] */
+.fill-0e  { grid-template-columns: subgrid repeat(auto-fill, [x] [x]) [z] }  /* [x] [x] [x] [x] [z] */
+.fill-0f  { grid-template-columns: subgrid repeat(auto-fill, [x] [x]) [z] [z] [z] }  /* [x] [x] [z] [z] [z] */
+.fill-0g  { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) [z] [z] }  /* [x] [y] [z] [z] [] */
+.fill-0h  { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) [z] }  /* [x] [y] [x] [y] [z] */
+.fill-0i  { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) }  /* [x] [y] [x] [y] [] */
+.fill-0j  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] [z] }  /* [y] [y] [y] [z] [z] */
+.fill-0k  { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) [z] [z] }  /* [x] [y] [z] [z] [] */
+.fill-0l  { grid-template-columns: subgrid [z] repeat(auto-fill, [x] [y]) [z] }  /* [z] [x] [y] [z] [] */
+.fill-0m  { grid-template-columns: subgrid [z] repeat(auto-fill, [x] [y]) }  /* [z] [x] [y] [x] [y] */
+.fill-0n  { grid-template-columns: subgrid repeat(auto-fill, [x] [y]) repeat(100, [z])}  /* [z] [z] [z] [z] [z] */
+.fill-0o  { grid-template-columns: subgrid [z] repeat(auto-fill, [x] [y] [z]) }  /* [z] [x] [y] [z] [] */
+.fill-0p  { grid-template-columns: subgrid [z] repeat(auto-fill, [x] [y] [z]) [x] }  /* [z] [x] [y] [z] [x] */
+.fill-0q  { grid-template-columns: subgrid repeat(auto-fill, [x] [y] [z]) [x] }  /* [x] [y] [z] [x] [] */
+.fill-0r  { grid-template-columns: subgrid [x] repeat(auto-fill, [y] [z]) }  /* [x] [y] [z] [y] [z] */
+
+/* With span of 5... */
+.fill-0s  {
+  grid-column: 2 / span 5;
+  grid-template-columns: subgrid [w] repeat(auto-fill, [y] [z]) [x]; /* [w] [y] [z] [y] [z] [x] */
+}
+
+/* With span of 6, same as fill-0s but with room for a partial additional repetition */
+.fill-0t  {
+  grid-column: 1 / span 6;
+  grid-template-columns: subgrid [w] repeat(auto-fill, [y] [z]) [x]; /* [w] [y] [z] [y] [z] [x] [] */
+}
+
+.subgrid > :nth-child(2n)   {  background: black; }
+.subgrid > :nth-child(2n+1) {  background: pink; }
+
+    </style>
+  </head>
+<body>
+
+<div class="grid"><div class="subgrid fill-0a">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0b">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0c">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0d">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0e">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0f">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0g">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0h">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0i">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0j">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0k">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0l">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0m">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0n">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0o">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0p">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0q">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0r">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0s">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<div class="grid"><div class="subgrid fill-0t">
+  <div style="grid-column:y 5"></div>
+  <div style="grid-column:y 4"></div>
+  <div style="grid-column:y 3"></div>
+  <div style="grid-column:y 2"></div>
+  <div style="grid-column:y 1"></div>
+  <div style="grid-column:y -1"></div>
+  <div style="grid-column:y -2"></div>
+  <div style="grid-column:y -3"></div>
+  <div style="grid-column:y -4"></div>
+  <div style="grid-column:y -5"></div>
+</div></div>
+
+<script>
+  const expectedResults = [
+    "subgrid [z] [z] [z] [z] [z]",
+    "subgrid [z] [z] [z] [z] [z]",
+    "subgrid [x] [y] [y] [y] [z]",
+    "subgrid [x] [z] [z] [z] [z]",
+    "subgrid [x] [x] [x] [x] [z]",
+    "subgrid [x] [x] [z] [z] [z]",
+    "subgrid [x] [y] [z] [z] []",
+    "subgrid [x] [y] [x] [y] [z]",
+    "subgrid [x] [y] [x] [y] []",
+    "subgrid [y] [y] [y] [z] [z]",
+    "subgrid [x] [y] [z] [z] []",
+    "subgrid [z] [x] [y] [z] []",
+    "subgrid [z] [x] [y] [x] [y]",
+    "subgrid [z] [z] [z] [z] [z]",
+    "subgrid [z] [x] [y] [z] []",
+    "subgrid [z] [x] [y] [z] [x]",
+    "subgrid [x] [y] [z] [x] []",
+    "subgrid [x] [y] [z] [y] [z]",
+    "subgrid [w] [y] [z] [y] [z] [x]",
+    "subgrid [w] [y] [z] [y] [z] [x] []",
+  ];
+  [...document.querySelectorAll('.subgrid')].forEach(function(subgrid, i) {
+    let actual = window.getComputedStyle(subgrid)['grid-template-columns'];
+    let expected = expectedResults[i];
+    if (actual != expected) {
+      let err = "Unexpected getComputedStyle value for subgrid " + i + " with className '" + subgrid.className + "':" +
+      " Actual: \"" + actual + "\", Expected: \"" + expected + "\"";
+      document.body.appendChild(document.createTextNode(err));
+      document.body.appendChild(document.createElement("br"));
+    }
+  });
+</script>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-001-ref.html
new file mode 100644
index 0000000000..dd4b0dccf2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-001-ref.html
@@ -0,0 +1,55 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: baseline-aligned subgrid item with padding</title>
+  <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
+  place-content: start;
+  place-items: baseline start;
+  border: 1px solid;
+  text-decoration: underline blue;
+}
+
+.subgrid {
+  background: lightgrey;
+  grid-column: 2 / span 4;
+  grid-row: 3 / span 2;
+  min-width: 10px;
+  min-height: 0;
+  background: yellow;
+  padding-top: 20px;
+}
+
+x, z {
+  display: block;
+  min-width: 20px;
+  min-height: 10px;
+  font-size: 8em;
+  background: silver;
+}
+z {
+  width: 20px;
+  height: 10px;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<y style="grid-area:3/1">A&nbsp;</y>
+<div class="subgrid">
+  <z></z><x>&nbsp;A</x>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-001.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-001.html
new file mode 100644
index 0000000000..95469c0018
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-001.html
@@ -0,0 +1,56 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: baseline-aligned subgrid item with padding</title>
+  <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="subgrid-baseline-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
+  place-content: start;
+  place-items: baseline start;
+  border: 1px solid;
+  text-decoration: underline blue;
+}
+
+.subgrid {
+  display: grid;
+  grid: subgrid / auto;
+  background: lightgrey;
+  grid-column: 2 / span 4;
+  grid-row: 3 / span 2;
+  min-width: 10px;
+  min-height: 0;
+  background: yellow;
+  place-content: inherit;
+  place-items: inherit;
+  padding-top: 20px;
+}
+
+x {
+  min-width: 20px;
+  min-height: 10px;
+  font-size: 8em;
+  background: silver;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<y style="grid-area:4/1">A&nbsp;</y>
+<div class="subgrid">
+  <x style="grid-row:2">&nbsp;A</x><x></x>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-002-ref.html
new file mode 100644
index 0000000000..3008d31e03
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-002-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: baseline-aligned subgrid item with orthogonal writing-mode</title>
+  <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
+  place-content: start;
+  place-items: baseline start;
+  border: 1px solid;
+  text-decoration: underline blue;
+}
+
+.subgrid {
+  background: lightgrey;
+  grid-column: 2 / span 4;
+  grid-row: 3 / span 2;
+  min-width: 10px;
+  min-height: 0;
+  background: yellow;
+}
+
+x, z {
+  display: block;
+  min-width: 20px;
+  min-height: 10px;
+  font-size: 8em;
+  background: silver;
+}
+z {
+  width: 20px;
+  height: 10px;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<y style="grid-area:3/1">A&nbsp;</y>
+<div class="subgrid">
+  <z></z><x style="margin-left: 20px">&nbsp;A</x>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-002.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-002.html
new file mode 100644
index 0000000000..12a17d7cc4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-002.html
@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: baseline-aligned subgrid item with orthogonal writing-mode</title>
+  <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="subgrid-baseline-002-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: 20px repeat(4, auto) 30px / 30px repeat(4, auto) 20px;
+  place-content: start;
+  place-items: baseline start;
+  border: 1px solid;
+  text-decoration: underline blue;
+}
+
+.subgrid {
+  display: grid;
+  grid: auto / subgrid;
+  background: lightgrey;
+  grid-column: 2 / span 4;
+  grid-row: 3 / span 2;
+  min-width: 10px;
+  min-height: 0;
+  background: yellow;
+  place-content: inherit;
+  place-items: start baseline;
+  writing-mode: vertical-rl;
+}
+
+x {
+  min-width: 20px;
+  min-height: 10px;
+  font-size: 8em;
+  background: silver;
+  writing-mode: horizontal-tb;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<y style="grid-area:4/1">A&nbsp;</y>
+<div class="subgrid">
+  <x style="grid-column:2">&nbsp;A</x><x></x>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-003-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-003-ref.html
new file mode 100644
index 0000000000..d6da254d88
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-003-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: baseline-aligned subgrid item</title>
+  <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: auto auto;
+  max-width: 100px;
+  place-items: baseline start;
+}
+
+.first {
+  font-size: 3em;
+}
+
+.second {
+  font-size: 2em;
+}
+  </style>
+</head>
+<body>
+<div class="grid">
+  <div class="first">A</div>
+  <div class="second">A</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-003.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-003.html
new file mode 100644
index 0000000000..da8e550fb4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-003.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: baseline-aligned subgrid item</title>
+  <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="subgrid-baseline-003-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-template-rows: auto auto;
+  max-width: 100px;
+  place-items: baseline start;
+}
+
+.subgrid {
+  display: grid;
+  grid-template-rows: subgrid;
+  grid-row: 1 / 3;
+  grid-column: 2;
+
+  padding-bottom: 20px;
+  place-items: inherit;
+}
+
+.first {
+  font-size: 3em;
+  grid-row: 2;
+}
+
+.second {
+  font-size: 2em;
+  grid-row: 2;
+}
+  </style>
+</head>
+<body>
+<div class="grid">
+  <div class="first">A</div>
+  <div class="subgrid">
+    <div class="second">A</div>
+  </div>
+</div>
+
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-004-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-004-ref.html
new file mode 100644
index 0000000000..4240df1659
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-004-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: baseline-aligned subgrid item</title>
+  <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 50px 50px;
+  place-items: baseline start;
+}
+
+.first {
+  font-size: 3em;
+}
+
+.second {
+  font-size: 2em;
+}
+  </style>
+</head>
+<body>
+<div class="grid">
+  <div class="first">A</div>
+  <div class="second">A</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-004.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-004.html
new file mode 100644
index 0000000000..c2bcaccc33
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-004.html
@@ -0,0 +1,54 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: baseline-aligned subgrid item</title>
+  <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="subgrid-baseline-004-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 50px 50px;
+  grid-template-rows: auto auto;
+  place-items: baseline start;
+}
+
+.subgrid {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-row: 1 / 3;
+  grid-column: 2;
+
+  padding-bottom: 20px;
+  writing-mode: vertical-lr;
+  place-items: start baseline;
+}
+
+.first {
+  font-size: 3em;
+  grid-row: 2;
+}
+
+.second {
+  font-size: 2em;
+  grid-column: 2;
+  writing-mode: horizontal-tb;
+}
+  </style>
+</head>
+<body>
+<div class="grid">
+  <div class="first">A</div>
+  <div class="subgrid">
+    <div class="second">A</div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-item-block-size-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-item-block-size-001-ref.html
new file mode 100644
index 0000000000..d264a3455a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-item-block-size-001-ref.html
@@ -0,0 +1,98 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: subgrid item auto block-size</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;
+}
+
+
+body { width:600px; }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-flow:dense;
+  column-gap: 40px;
+  row-gap: 0px;
+}
+
+.card {
+  background-color: #fff;
+  grid-row: auto / span 3;
+  grid-template-rows: repeat(3, auto);
+  grid-template-columns: auto;
+  display: grid;
+  row-gap: 40px;
+}
+
+
+.card .inner, .card footer {
+  padding: 10px;
+}
+
+.card .inner { background: grey; }
+
+.card h2 {
+  margin: 0;
+  color: #fff;
+  background-color: rgb(3,99,143);
+  border-bottom: 4px solid rgb(24,154,153);
+}
+
+.card footer {
+  background-color: rgb(182,222,211);
+}
+
+* { box-sizing: border-box; }
+
+item {
+  border: 1px solid;
+  visibility: visible;
+}
+
+.hidden { visibility: hidden; }
+</style>
+<body>
+
+<div class="grid">
+
+   <div class="card">
+     <h2><span class="hidden">My title</span></h2>
+     <div class="inner">
+       <p>The contents.<span class="hidden"> I have a lot of content, more content than the other ones.</span></p>
+     </div>
+     <footer>Footer contents</footer>
+   </div>
+
+   <div class="card hidden">
+     <h2 style="grid-area:1/1"><span>My title</span></h2>
+     <div class="inner" style="grid-area:2/1">
+       <p>The contents. I have a lot of content, more content than the other ones.</p>
+     </div>
+     <footer style="grid-area:3/1">Footer contents</footer>
+
+     <item style="grid-area:1/1">1</item>
+     <item style="grid-area:2/1">2</item>
+     <item style="grid-area:3/1">3</item>
+
+   </div>
+
+    <div class="card">
+     <h2>My title</h2>
+     <div class="inner">
+       <p>The contents. I have a lot of content, more content than the other ones.</p>
+     </div>
+     <footer><span class="hidden">Footer contents</span></footer>
+   </div>
+
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-item-block-size-001.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-item-block-size-001.html
new file mode 100644
index 0000000000..29e8219783
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-item-block-size-001.html
@@ -0,0 +1,88 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: subgrid item auto block-size</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="subgrid-item-block-size-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+
+body { width:600px; }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-flow:dense;
+  gap: 40px;
+}
+
+.card {
+  background-color: #fff;
+  grid-row: auto / span 3;
+  grid-template-rows: subgrid;
+  grid-template-columns: auto;
+  display: grid;
+}
+
+
+.card .inner, .card footer {
+  padding: 10px;
+}
+
+.card .inner { background: grey; }
+
+.card h2 {
+  margin: 0;
+  color: #fff;
+  background-color: rgb(3,99,143);
+  border-bottom: 4px solid rgb(24,154,153);
+}
+
+.card footer {
+  background-color: rgb(182,222,211);
+}
+
+* { box-sizing: border-box; }
+
+item {
+  border: 1px solid;
+  grid-column: 2;
+}
+
+</style>
+<body>
+
+<div class="grid">
+
+   <div class="card">
+     <h2></h2>
+     <div class="inner">
+       <p>The contents.</p>
+     </div>
+     <footer>Footer contents</footer>
+   </div>
+
+    <item>1</item>
+    <item>2</item>
+    <item>3</item>
+
+    <div class="card">
+     <h2>My title</h2>
+     <div class="inner">
+       <p>The contents. I have a lot of content, more content than the other ones.</p>
+     </div>
+     <footer></footer>
+   </div>
+
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-no-items-on-edges-001.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-no-items-on-edges-001.html
new file mode 100644
index 0000000000..e2fe1a366e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-no-items-on-edges-001.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Test: Subgrid with no grid items accommodates border and padding</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+.wrapper {
+  width: 100px;
+  height: 100px;
+  background: red;
+}
+.grid {
+  display: inline-grid;
+  grid: repeat(3, auto) / repeat(5, auto);
+  background: red;
+}
+.subgrid {
+  display: grid;
+  grid-row: 1 / -1;
+  grid-column: 1 / -1;
+  grid-template: subgrid / subgrid;
+  background: green;
+  padding: 11px 7px 20px 13px;
+  border-width: 14px 18px 5px 12px;
+  border-style: solid;
+  border-color: green;
+}
+</style>
+</head>
+<body>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="wrapper">
+  <div class="grid">
+    <div class="subgrid">
+      <div class="subgrid"></div>
+    </div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-no-items-on-edges-002.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-no-items-on-edges-002.html
new file mode 100644
index 0000000000..a2c73b1884
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-no-items-on-edges-002.html
@@ -0,0 +1,53 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Test: Subgrid with no grid items accommodates gutter size and padding</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+.wrapper {
+  width: 100px;
+  height: 100px;
+  background: red;
+}
+.grid {
+  display: inline-grid;
+  grid: repeat(2, auto) / repeat(4, auto);
+  background: red;
+}
+.subgrid {
+  display: grid;
+  grid-template: subgrid / subgrid;
+  background: green;
+  padding: 11px 3px 9px 7px;
+}
+</style>
+</head>
+<body>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="wrapper">
+  <div class="grid">
+    <div class="subgrid" style="grid-column: span 4; grid-row: span 2; gap: 20px 10px">
+      <div class="subgrid" style="grid-column: span 2; grid-row: span 2">
+        <div class="subgrid"></div>
+        <div class="subgrid"></div>
+        <div class="subgrid"></div>
+        <div class="subgrid"></div>
+      </div>
+      <div class="subgrid" style="grid-column: span 2; grid-row: span 2">
+        <div class="subgrid"></div>
+        <div class="subgrid"></div>
+        <div class="subgrid"></div>
+        <div class="subgrid"></div>
+      </div>
+    </div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-reflow-root-crash.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-reflow-root-crash.html
new file mode 100644
index 0000000000..1e2b9081eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-reflow-root-crash.html
@@ -0,0 +1,15 @@
+<style>
+* {
+  grid-template-rows: subgrid;
+  display: inline-grid;
+}
+
+html {
+  contain: strict;
+}
+</style>
+<script>
+  window.addEventListener('load', () => {
+    document.head.appendChild(document.createElement('style'))
+  })
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-stretch-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-stretch-ref.html
new file mode 100644
index 0000000000..33e8669da0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-stretch-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: The subgrid is always stretched in its subgridded dimension(s)</title>
+  <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment">
+  <style>
+   body {
+     margin: 0;
+   }
+  .grid {
+    display: inline-block;
+    width: 100px;
+    height: 100px;
+    background-color: blue;
+  }
+  </style>
+</head>
+<body>
+  <div class="grid"></div>
+  <div class="grid"></div>
+  <div class="grid"></div>
+  <div class="grid"></div>
+
+  <div class="grid"></div>
+  <div class="grid"></div>
+  <div class="grid"></div>
+  <div class="grid"></div>
+
+  <br>
+
+  <div class="grid"></div>
+  <div class="grid"></div>
+  <div class="grid"></div>
+  <div class="grid"></div>
+  <div class="grid"></div>
+  <div class="grid"></div>
+  <div class="grid"></div>
+  <div class="grid"></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-stretch.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-stretch.html
new file mode 100644
index 0000000000..321e12d2a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-stretch.html
@@ -0,0 +1,96 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: The subgrid is always stretched in its subgridded dimension(s)</title>
+  <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment">
+  <link rel="match" href="subgrid-stretch-ref.html">
+  <style>
+  body {
+    margin: 0;
+  }
+  .grid {
+    display: inline-grid;
+    grid-template-columns: 100px;
+    grid-template-rows: 100px;
+  }
+  .subgrid {
+    display: grid;
+    background-color: blue;
+  }
+  .rows {
+    grid-template-rows: subgrid;
+    align-self: baseline;
+  }
+  .columns {
+    grid-template-columns: subgrid;
+    justify-self: baseline;
+  }
+  .vrl {
+    writing-mode: vertical-rl;
+  }
+  .vrl.rows {
+    align-self: initial;
+    justify-self: baseline;
+  }
+  .vrl.columns {
+    justify-self: initial;
+    align-self: baseline;
+  }
+  </style>
+</head>
+<body>
+  <div class="grid">
+    <div class="subgrid rows" style="height: 50px;"></div>
+  </div>
+  <div class="grid">
+    <div class="subgrid rows" style="height: 150px;"></div>
+  </div>
+  <div class="grid">
+    <div class="subgrid rows" style="max-height: 50px;"></div>
+  </div>
+  <div class="grid">
+    <div class="subgrid rows" style="min-height: 150px;"></div>
+  </div>
+  <div class="grid">
+    <div class="subgrid columns" style="width: 50px;"></div>
+  </div>
+  <div class="grid">
+    <div class="subgrid columns" style="width: 150px;"></div>
+  </div>
+  <div class="grid">
+    <div class="subgrid columns" style="max-width: 50px;"></div>
+  </div>
+  <div class="grid">
+    <div class="subgrid columns" style="min-width: 150px;"></div>
+  </div>
+
+  <br>
+
+  <div class="grid">
+    <div class="subgrid vrl rows" style="width: 50px;"></div>
+  </div>
+  <div class="grid">
+    <div class="subgrid vrl rows" style="width: 150px;"></div>
+  </div>
+  <div class="grid">
+    <div class="subgrid vrl rows" style="max-width: 50px;"></div>
+  </div>
+  <div class="grid">
+    <div class="subgrid vrl rows" style="min-width: 150px;"></div>
+  </div>
+  <div class="grid">
+    <div class="subgrid vrl columns" style="height: 50px;"></div>
+  </div>
+  <div class="grid">
+    <div class="subgrid vrl columns" style="height: 150px;"></div>
+  </div>
+  <div class="grid">
+    <div class="subgrid vrl columns" style="max-height: 50px;"></div>
+  </div>
+  <div class="grid">
+    <div class="subgrid vrl columns" style="min-height: 150px;"></div>
+  </div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-001-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-001-ref.html
new file mode 100644
index 0000000000..9061251688
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-001-ref.html
@@ -0,0 +1,96 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: nested subgrids map margin/border/padding according to writing direction</title>
+  <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <style>
+html,body {
+  font:12px/1 monospace;
+}
+
+.grid {
+  display: grid;
+  grid: 0.2em 1.4em / repeat(10, 30px);
+  border: 1px solid;
+  padding: 0 0 0 0;
+}
+
+div > div {
+  display: grid;
+  grid-column: 2 / span 3;
+  grid: auto / subgrid;
+  border: 1px solid;
+  background: grey;
+}
+
+n {
+  grid-row: 1;
+  counter-increment: n;
+}
+n::before { content: counter(n, decimal); }
+
+x {
+  background: silver;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div style="grid-template-columns: subgrid; padding: 0 0 0 10px;">
+      <div style="grid-template-columns: subgrid; grid-column: 1 /span 3; margin-right: 29px;">
+        <x style="grid-column: 1; ">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div style="grid-template-columns: subgrid;">
+      <div style="grid-template-columns: subgrid; grid-column: 1 /span 3; margin-right: 29px; padding-left: 10px;">
+        <x style="grid-column: 1; ">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div style="grid-template-columns: subgrid; border-right: 20px solid; border-left: 10px solid;">
+      <div style="grid-template-columns: subgrid; grid-column-start:span 3; margin-right: 10px;">
+        <x style="grid-column: 1;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div style="grid-template-columns: subgrid;">
+      <div style="grid-template-columns: subgrid; grid-column-start:span 3; border-right: 20px solid; border-left: 10px solid; margin-right: 29px;">
+        <x style="grid-column: 1;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div style="grid-template-columns: subgrid; margin: 0 20px 0 0;">
+      <div style="grid-template-columns: subgrid; grid-column-start:span 3; margin-right: 9px;">
+        <x style="grid-column: 1;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div style="grid-template-columns: subgrid;">
+      <div style="grid-template-columns: subgrid; grid-column-start:span 3; margin: 0 20px 0 0; margin-right: 49px;">
+        <x style="grid-column: 1;">x</x>
+      </div>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-001.html b/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-001.html
new file mode 100644
index 0000000000..24caaebc4f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-001.html
@@ -0,0 +1,100 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: nested subgrids map margin/border/padding according to writing direction</title>
+  <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="writing-directions-001-ref.html">
+  <style>
+html,body {
+  font:12px/1 monospace;
+}
+
+.grid {
+  display: grid;
+  grid: 0.2em 1.4em / repeat(10, 30px);
+  border: 1px solid;
+  padding: 0 0 0 0;
+}
+
+div > div {
+  display: grid;
+  grid-column: 2 / span 3;
+  grid: auto / subgrid;
+  border: 1px solid;
+  background: grey;
+}
+
+n {
+  grid-row: 1;
+  counter-increment: n;
+}
+n::before { content: counter(n, decimal); }
+
+x {
+  background: silver;
+}
+
+.rtl { direction:rtl; }
+.ltr { direction:ltr; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div class="rtl" style="grid-template-columns: subgrid; padding: 0 0 0 10px;">
+      <div class="ltr" style="grid-template-columns: subgrid;">
+        <x style="grid-column: 1;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div class="rtl" style="grid-template-columns: subgrid; ">
+      <div class="ltr" style="grid-template-columns: subgrid; padding: 0 0 0 10px;">
+        <x style="grid-column: 1;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div class="rtl" style="grid-template-columns: subgrid; border-right: 20px solid; border-left: 10px solid;">
+      <div class="ltr" style="grid-template-columns: subgrid; ">
+        <x style="grid-column: 1;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div class="rtl" style="grid-template-columns: subgrid;">
+      <div class="ltr" style="grid-template-columns: subgrid; border-right: 20px solid; border-left: 10px solid;">
+        <x style="grid-column: 1;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div class="rtl" style="grid-template-columns: subgrid; margin: 0 20px 0 0;">
+      <div class="ltr" style="grid-template-columns: subgrid; ">
+        <x style="grid-column: 1;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div class="rtl" style="grid-template-columns: subgrid;">
+      <div class="ltr" style="grid-template-columns: subgrid; margin: 0 20px 0 0;">
+        <x style="grid-column: 1;">x</x>
+      </div>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-002-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-002-ref.html
new file mode 100644
index 0000000000..cd1ee527ab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-002-ref.html
@@ -0,0 +1,96 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: nested subgrids map margin/border/padding according to writing direction</title>
+  <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <style>
+html,body {
+  font:12px/1 monospace;
+}
+
+.grid {
+  display: grid;
+  grid: 0.2em 1.4em / repeat(10, auto);
+  border: 1px solid;
+  padding: 0 0 0 0;
+}
+
+div > div {
+  display: grid;
+  grid-column: 1 / span 3;
+  grid: auto / subgrid;
+  border: 1px solid;
+  background: grey;
+}
+
+n {
+  grid-row: 1;
+  counter-increment: n;
+}
+n::before { content: counter(n, decimal); }
+
+x {
+  background: silver;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div style="grid-template-columns: subgrid; padding: 0 0 0 10px;">
+      <div style="grid-template-columns: subgrid; grid-column: 1 /span 3;">
+        <x style="grid-column: 1; ">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div style="grid-template-columns: subgrid;">
+      <div style="grid-template-columns: subgrid; grid-column: 1 /span 3; padding-left: 10px;">
+        <x style="grid-column: 1; ">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div style="grid-template-columns: subgrid; border-right: 20px solid; border-left: 10px solid;">
+      <div style="grid-template-columns: subgrid; grid-column-start:span 3;">
+        <x style="grid-column: 1;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div style="grid-template-columns: subgrid;">
+      <div style="grid-template-columns: subgrid; grid-column-start:span 3; border-right: 20px solid; border-left: 10px solid;">
+        <x style="grid-column: 1;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div style="grid-template-columns: subgrid; margin: 0 20px 0 0;">
+      <div style="grid-template-columns: subgrid; grid-column-start:span 3;">
+        <x style="grid-column: 1;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div style="grid-template-columns: subgrid;">
+      <div style="grid-template-columns: subgrid; grid-column-start:span 3; margin: 0 20px 0 0;">
+        <x style="grid-column: 1;">x</x>
+      </div>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-002.html b/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-002.html
new file mode 100644
index 0000000000..078d5808b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-002.html
@@ -0,0 +1,100 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: nested subgrids map margin/border/padding according to writing direction</title>
+  <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="writing-directions-002-ref.html">
+  <style>
+html,body {
+  font:12px/1 monospace;
+}
+
+.grid {
+  display: grid;
+  grid: 0.2em 1.4em / repeat(10, auto);
+  border: 1px solid;
+  padding: 0 0 0 0;
+}
+
+div > div {
+  display: grid;
+  grid-column: 1 / span 3;
+  grid: auto / subgrid;
+  border: 1px solid;
+  background: grey;
+}
+
+n {
+  grid-row: 1;
+  counter-increment: n;
+}
+n::before { content: counter(n, decimal); }
+
+x {
+  background: silver;
+}
+
+.rtl { direction:rtl; }
+.ltr { direction:ltr; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div class="rtl" style="grid-template-columns: subgrid; padding: 0 0 0 10px;">
+      <div class="ltr" style="grid-template-columns: subgrid;">
+        <x style="grid-column: 1;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div class="rtl" style="grid-template-columns: subgrid; ">
+      <div class="ltr" style="grid-template-columns: subgrid; padding: 0 0 0 10px;">
+        <x style="grid-column: 1;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div class="rtl" style="grid-template-columns: subgrid; border-right: 20px solid; border-left: 10px solid;">
+      <div class="ltr" style="grid-template-columns: subgrid; ">
+        <x style="grid-column: 1;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div class="rtl" style="grid-template-columns: subgrid;">
+      <div class="ltr" style="grid-template-columns: subgrid; border-right: 20px solid; border-left: 10px solid;">
+        <x style="grid-column: 1;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div class="rtl" style="grid-template-columns: subgrid; margin: 0 20px 0 0;">
+      <div class="ltr" style="grid-template-columns: subgrid; ">
+        <x style="grid-column: 1;">x</x>
+      </div>
+    </div>
+</div>
+
+<div class="grid">
+  <n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n><n></n>
+    <div class="rtl" style="grid-template-columns: subgrid;">
+      <div class="ltr" style="grid-template-columns: subgrid; margin: 0 20px 0 0;">
+        <x style="grid-column: 1;">x</x>
+      </div>
+    </div>
+</div>
+
+</body>
+</html>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 17:32:43 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 17:32:43 +0000
commit	6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch)
tree	a68f146d7fa01f0134297619fbe7e33db084e0aa /testing/web-platform/tests/css/css-grid/subgrid
parent	Initial commit. (diff)
download	thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.tar.xz thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.zip