1607 files changed, 122872 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/META.yml b/testing/web-platform/tests/css/css-grid/META.yml
new file mode 100644
index 0000000000..55f9d72fa5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/META.yml
@@ -0,0 +1,8 @@
+spec: https://drafts.csswg.org/css-grid/
+suggested_reviewers:
+  - plinss
+  - tabatkins
+  - fantasai
+  - javifernandez
+  - rachelandrew
+  - svillar
diff --git a/testing/web-platform/tests/css/css-grid/README.md b/testing/web-platform/tests/css/css-grid/README.md
new file mode 100644
index 0000000000..59e9c081a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/README.md
@@ -0,0 +1,36 @@
+CSS Grid Layout Module Level 1 Test Suite
+-----------------------------------------
+
+Directory containing the CSS Grid Layout spec test suite.
+
+This suite is structured in different folders for each section of the spec
+(the name of the folders corresponds to the "id" of each section):
+
+* [3 Grid Containers](https://drafts.csswg.org/css-grid-1/#grid-model):
+  `grid-model`
+* [4 Grid Items](https://drafts.csswg.org/css-grid-1/#grid-items):
+  `grid-items`
+* [5 The Explicit Grid](https://drafts.csswg.org/css-grid-1/#grid-definition):
+  `grid-definition`
+* [6 The Implicit Grid](https://drafts.csswg.org/css-grid-1/#implicit-grids):
+  `implicit-grids`
+* [7 Grid Definition Shorthand](https://drafts.csswg.org/css-grid-1/#grid-shorthand):
+  `grid-shorthand`
+* [8 Clamping Overlarge Grids](https://drafts.csswg.org/css-grid-1/#overlarge-grids):
+  `overlarge-grids`
+* [9 Placing Grid Items](https://drafts.csswg.org/css-grid-1/#placement):
+  `placement`
+* [10 Absolute Positioning](https://drafts.csswg.org/css-grid-1/#abspos):
+  `abspos`
+* [11 Alignment and Spacing](https://drafts.csswg.org/css-grid-1/#alignment):
+  `alignment`
+* [12 Grid Sizing](https://drafts.csswg.org/css-grid-1/#layout-algorithm):
+  `layout-algorithm`
+* [13 Fragmenting Grid Layout](https://drafts.csswg.org/css-grid-1/#pagination):
+  `pagination`
+
+Links:
+
+* [Spec Editor's Draft](https://drafts.csswg.org/css-grid-1/)
+* [Test Plan](http://test.csswg.org/source/css-grid-1/test-plan/)
+* [Test Suite](http://test.csswg.org/suites/css-grid-1_dev/nightly-unstable/)
diff --git a/testing/web-platform/tests/css/css-grid/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-grid/WEB_FEATURES.yml
new file mode 100644
index 0000000000..07a148beb5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/WEB_FEATURES.yml
@@ -0,0 +1,3 @@
+features:
+- name: grid
+  files: "**"
diff --git a/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-changing-containing-block-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-changing-containing-block-001-ref.html
new file mode 100644
index 0000000000..07e297f18e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-changing-containing-block-001-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Absolute positioning changing containing block reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+.wrapper {
+  width: 100px;
+  height: 100px;
+  margin-bottom: 25px;
+  background: purple;
+}
+
+.grid {
+  width: 50px;
+  height: 50px;
+  background: lightblue;
+}
+
+.item {
+  width: 75%;
+  height: 75%;
+  background: orange;
+}
+</style>
+
+<p>The test PASS if you see an orange box inside a purple box on top and a small orange box inside a light blue box inside a purple box on bottom.</p>
+
+<div class="wrapper">
+  <div class="item"></div>
+</div>
+<div class="wrapper">
+  <div class="grid">
+    <div class="item"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-changing-containing-block-001.html b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-changing-containing-block-001.html
new file mode 100644
index 0000000000..31030835c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-changing-containing-block-001.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang=en class="reftest-wait">
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Absolute positioning changing containing block</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="absolute-positioning-changing-containing-block-001-ref.html">
+<meta name="assert" content="This test checks that absolutelly positioned children of a grid are properly sized when the containing block switches between the grid container and a grid ancestor.">
+<style>
+.wrapper {
+  width: 100px;
+  height: 100px;
+  margin-bottom: 25px;
+  background: purple;
+  position: relative;
+}
+
+.grid {
+  display: grid;
+  grid-template: 10px / 10px;
+  width: 50px;
+  height: 50px;
+  background: lightblue;
+}
+
+.item {
+  width: 75%;
+  height: 75%;
+  background: orange;
+  position: absolute;
+}
+</style>
+
+<p>The test PASS if you see an orange box inside a purple box on top and a small orange box inside a light blue box inside a purple box on bottom.</p>
+
+<div class="wrapper">
+  <div id="grid-as-cb" class="grid" style="position: relative;">
+    <div class="item"></div>
+  </div>
+</div>
+<div class="wrapper">
+  <div id="grid-as-parent" class="grid">
+    <div class="item"></div>
+  </div>
+</div>
+
+<script>
+  window.requestAnimationFrame(() => {
+    document.getElementById("grid-as-cb").style.position = "initial";
+    document.getElementById("grid-as-parent").style.position = "relative";
+    document.body.offsetLeft;
+    document.documentElement.classList.remove('reftest-wait');
+  });
+</script>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-definite-sizes-001.html b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-definite-sizes-001.html
new file mode 100644
index 0000000000..c2b6aeecd2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-definite-sizes-001.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Absolute positioning definite sizes</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<meta name="flags" content="ahem">
+<meta name="assert" content="Items should extend to fill the width of the absolutely positioned grid container.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  display: grid;
+  grid-template: 50px 1fr / 1fr;
+
+  position: absolute;
+  left: 50px;
+  top: 50px;
+
+  width: 200px;
+  height: 200px;
+
+  border: 7px solid #ccc;
+  font: 10px/1 Ahem;
+}
+
+.row1 {
+  grid-row-start: 1;
+  background-color: yellow;
+}
+
+.row2 {
+  grid-row-start: 2;
+  background-color: cyan;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<div class="grid">
+  <div class="row1" data-expected-height="50"  data-expected-width="200">XXX X</div>
+  <div class="row2" data-expected-height="150" data-expected-width="200">XX XXX XX</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-containing-block-001.html b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-containing-block-001.html
new file mode 100644
index 0000000000..0e52b19997
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-containing-block-001.html
@@ -0,0 +1,356 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Absolute positioning grid container containing block</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="This test checks the behavior of the absolutely positioned elements with a grid container as containing block.">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+
+.grid {
+  grid-template-columns: 50px 100px 150px 200px;
+  grid-template-rows: 50px 100px 150px 200px;
+  width: 500px;
+  height: 500px;
+  border: 5px solid black;
+  margin: 30px;
+  padding: 15px;
+  /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+  position: relative;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.thirdRowThirdColumnSpanning2Rows {
+  grid-column: 3;
+  grid-row: 3 / span 2;
+  background-color: maroon;
+}
+
+.thirdRowThirdColumnSpanning2Rows2Columns {
+  grid-column: 3 / span 2;
+  grid-row: 3 / span 2;
+  background-color: aqua;
+}
+
+.endFirstRowEndFirstColumn {
+  background-color: blue;
+  grid-column-end: 2;
+  grid-row-end: 2;
+}
+
+.endFirstRowEndSecondColumn {
+  background-color: lime;
+  grid-column-end: 3;
+  grid-row-end: 2;
+}
+
+.endSecondRowEndFirstColumn {
+  background-color: purple;
+  grid-column-end: 2;
+  grid-row-end: 3;
+}
+
+.endThirdRowEndThirdColumnSpanning2Rows {
+  grid-column-end: 4;
+  grid-row: span 2 / 4;
+  background-color: maroon;
+}
+
+.endThirdRowEndThirdColumnSpanning2Rows2Columns {
+  grid-column: span 2 / 4;
+  grid-row: span 2 / 4;
+  background-color: aqua;
+}
+
+.onlyThirdRowOnlyThirdColumnSpanning2Rows {
+  grid-column: 3 / 4;
+  grid-row: 3 / 5;
+  background-color: maroon;
+}
+
+.onlyThirdRowOnlyThirdColumnSpanning2Rows2Columns {
+  grid-column: 3 / 5;
+  grid-row: 3 / 5;
+  background-color: aqua;
+}
+
+.offsetLeft25 {
+  left: 25px;
+}
+
+.offsetRight50 {
+  right: 50px;
+}
+
+.offsetTop75 {
+  top: 75px;
+}
+
+.offsetBottom100 {
+  bottom: 100px;
+}
+
+.offsetLeftMinus20 {
+  left: -20px;
+}
+
+.offsetRightMinus40 {
+  right: -40px;
+}
+
+.offsetTopMinus60 {
+  top: -60px;
+}
+
+.offsetBottomMinus80 {
+  bottom: -80px;
+}
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<div class="grid">
+  <div class="sizedToGridArea absolute autoRowAutoColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="530">
+  </div>
+  <div class="sizedToGridArea absolute firstRowFirstColumn"
+    data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="515">
+  </div>
+  <div class="sizedToGridArea absolute secondRowFirstColumn"
+    data-offset-x="15" data-offset-y="65" data-expected-width="515" data-expected-height="465">
+  </div>
+  <div class="sizedToGridArea absolute firstRowSecondColumn"
+    data-offset-x="65" data-offset-y="15" data-expected-width="465" data-expected-height="515">
+  </div>
+  <div class="sizedToGridArea absolute secondRowSecondColumn"
+    data-offset-x="65" data-offset-y="65" data-expected-width="465" data-expected-height="465">
+  </div>
+  <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows"
+    data-offset-x="165" data-offset-y="165" data-expected-width="365" data-expected-height="350">
+  </div>
+  <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns"
+    data-offset-x="165" data-offset-y="165" data-expected-width="350" data-expected-height="350">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows"
+    data-offset-x="0" data-offset-y="65" data-expected-width="315" data-expected-height="250">
+  </div>
+  <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows2Columns"
+    data-offset-x="65" data-offset-y="65" data-expected-width="250" data-expected-height="250">
+  </div>
+  <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="165" data-expected-height="165">
+  </div>
+  <div class="sizedToGridArea absolute endSecondRowEndFirstColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="65" data-expected-height="165">
+  </div>
+  <div class="sizedToGridArea absolute endFirstRowEndSecondColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="165" data-expected-height="65">
+  </div>
+  <div class="sizedToGridArea absolute endFirstRowEndFirstColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="65" data-expected-height="65">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn"
+    data-offset-x="15" data-offset-y="15" data-expected-width="50" data-expected-height="50">
+  </div>
+  <div class="sizedToGridArea absolute onlySecondRowOnlyFirstColumn"
+    data-offset-x="15" data-offset-y="65" data-expected-width="50" data-expected-height="100">
+  </div>
+  <div class="sizedToGridArea absolute onlyFirstRowOnlySecondColumn"
+    data-offset-x="65" data-offset-y="15" data-expected-width="100" data-expected-height="50">
+  </div>
+  <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
+    data-offset-x="65" data-offset-y="65" data-expected-width="100" data-expected-height="100">
+  </div>
+  <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Rows2Columns"
+    data-offset-x="165" data-offset-y="165" data-expected-width="350" data-expected-height="350">
+  </div>
+  <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Rows"
+    data-offset-x="165" data-offset-y="165" data-expected-width="150" data-expected-height="350">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft25 offsetTop75"
+    data-offset-x="25" data-offset-y="75" data-expected-width="530" data-expected-height="530">
+  </div>
+  <div class="sizedToGridArea absolute firstRowFirstColumn offsetRightMinus40 offsetBottomMinus80"
+    data-offset-x="55" data-offset-y="95" data-expected-width="515" data-expected-height="515">
+  </div>
+  <div class="sizedToGridArea absolute secondRowFirstColumn offsetRight50 offsetBottom100"
+    data-offset-x="-35" data-offset-y="-35" data-expected-width="515" data-expected-height="465">
+  </div>
+  <div class="sizedToGridArea absolute firstRowSecondColumn offsetLeftMinus20 offsetTopMinus60"
+    data-offset-x="45" data-offset-y="-45" data-expected-width="465" data-expected-height="515">
+  </div>
+  <div class="sizedToGridArea absolute secondRowSecondColumn offsetRight50 offsetTop75"
+    data-offset-x="15" data-offset-y="140" data-expected-width="465" data-expected-height="465">
+  </div>
+  <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows offsetLeft25 offsetBottom100"
+    data-offset-x="190" data-offset-y="65" data-expected-width="365" data-expected-height="350">
+  </div>
+  <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100"
+    data-offset-x="145" data-offset-y="105" data-expected-width="350" data-expected-height="350">
+  </div>
+</div>
+
+<div class="grid">
+  <div>
+    <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft25 offsetTop75"
+      data-offset-x="25" data-offset-y="75" data-expected-width="530" data-expected-height="530">
+    </div>
+    <div class="sizedToGridArea absolute firstRowFirstColumn offsetRightMinus40 offsetBottomMinus80"
+      data-offset-x="55" data-offset-y="95" data-expected-width="515" data-expected-height="515">
+    </div>
+    <div class="sizedToGridArea absolute secondRowFirstColumn offsetRight50 offsetBottom100"
+      data-offset-x="-35" data-offset-y="-35" data-expected-width="515" data-expected-height="465">
+    </div>
+    <div class="sizedToGridArea absolute firstRowSecondColumn offsetLeftMinus20 offsetTopMinus60"
+      data-offset-x="45" data-offset-y="-45" data-expected-width="465" data-expected-height="515">
+    </div>
+    <div class="sizedToGridArea absolute secondRowSecondColumn offsetRight50 offsetTop75"
+      data-offset-x="15" data-offset-y="140" data-expected-width="465" data-expected-height="465">
+    </div>
+    <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows offsetLeft25 offsetBottom100"
+      data-offset-x="190" data-offset-y="65" data-expected-width="365" data-expected-height="350">
+    </div>
+    <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100"
+      data-offset-x="145" data-offset-y="105" data-expected-width="350" data-expected-height="350">
+    </div>
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="sizedToGridArea absolute autoRowAutoColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="530">
+  </div>
+  <div class="sizedToGridArea absolute firstRowFirstColumn"
+    data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="515">
+  </div>
+  <div class="sizedToGridArea absolute secondRowFirstColumn"
+    data-offset-x="0" data-offset-y="65" data-expected-width="515" data-expected-height="465">
+  </div>
+  <div class="sizedToGridArea absolute firstRowSecondColumn"
+    data-offset-x="0" data-offset-y="15" data-expected-width="465" data-expected-height="515">
+  </div>
+  <div class="sizedToGridArea absolute secondRowSecondColumn"
+    data-offset-x="0" data-offset-y="65" data-expected-width="465" data-expected-height="465">
+  </div>
+  <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows"
+    data-offset-x="0" data-offset-y="165" data-expected-width="365" data-expected-height="350">
+  </div>
+  <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns"
+    data-offset-x="15" data-offset-y="165" data-expected-width="350" data-expected-height="350">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows"
+    data-offset-x="215" data-offset-y="65" data-expected-width="315" data-expected-height="250">
+  </div>
+  <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows2Columns"
+    data-offset-x="215" data-offset-y="65" data-expected-width="250" data-expected-height="250">
+  </div>
+  <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
+    data-offset-x="365" data-offset-y="0" data-expected-width="165" data-expected-height="165">
+  </div>
+  <div class="sizedToGridArea absolute endSecondRowEndFirstColumn"
+    data-offset-x="465" data-offset-y="0" data-expected-width="65" data-expected-height="165">
+  </div>
+  <div class="sizedToGridArea absolute endFirstRowEndSecondColumn"
+    data-offset-x="365" data-offset-y="0" data-expected-width="165" data-expected-height="65">
+  </div>
+  <div class="sizedToGridArea absolute endFirstRowEndFirstColumn"
+    data-offset-x="465" data-offset-y="0" data-expected-width="65" data-expected-height="65">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn"
+    data-offset-x="465" data-offset-y="15" data-expected-width="50" data-expected-height="50">
+  </div>
+  <div class="sizedToGridArea absolute onlySecondRowOnlyFirstColumn"
+    data-offset-x="465" data-offset-y="65" data-expected-width="50" data-expected-height="100">
+  </div>
+  <div class="sizedToGridArea absolute onlyFirstRowOnlySecondColumn"
+    data-offset-x="365" data-offset-y="15" data-expected-width="100" data-expected-height="50">
+  </div>
+  <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
+    data-offset-x="365" data-offset-y="65" data-expected-width="100" data-expected-height="100">
+  </div>
+  <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Rows2Columns"
+    data-offset-x="15" data-offset-y="165" data-expected-width="350" data-expected-height="350">
+  </div>
+  <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Rows"
+    data-offset-x="215" data-offset-y="165" data-expected-width="150" data-expected-height="350">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft25 offsetTop75"
+    data-offset-x="25" data-offset-y="75" data-expected-width="530" data-expected-height="530">
+  </div>
+  <div class="sizedToGridArea absolute firstRowFirstColumn offsetRightMinus40 offsetBottomMinus80"
+    data-offset-x="40" data-offset-y="95" data-expected-width="515" data-expected-height="515">
+  </div>
+  <div class="sizedToGridArea absolute secondRowFirstColumn offsetRight50 offsetBottom100"
+    data-offset-x="-50" data-offset-y="-35" data-expected-width="515" data-expected-height="465">
+  </div>
+  <div class="sizedToGridArea absolute firstRowSecondColumn offsetLeftMinus20 offsetTopMinus60"
+    data-offset-x="-20" data-offset-y="-45" data-expected-width="465" data-expected-height="515">
+  </div>
+  <div class="sizedToGridArea absolute secondRowSecondColumn offsetRight50 offsetTop75"
+    data-offset-x="-50" data-offset-y="140" data-expected-width="465" data-expected-height="465">
+  </div>
+  <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows offsetLeft25 offsetBottom100"
+    data-offset-x="25" data-offset-y="65" data-expected-width="365" data-expected-height="350">
+  </div>
+  <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100"
+    data-offset-x="-35" data-offset-y="105" data-expected-width="350" data-expected-height="350">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div>
+    <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft25 offsetTop75"
+      data-offset-x="25" data-offset-y="75" data-expected-width="530" data-expected-height="530">
+    </div>
+    <div class="sizedToGridArea absolute firstRowFirstColumn offsetRightMinus40 offsetBottomMinus80"
+      data-offset-x="40" data-offset-y="95" data-expected-width="515" data-expected-height="515">
+    </div>
+    <div class="sizedToGridArea absolute secondRowFirstColumn offsetRight50 offsetBottom100"
+      data-offset-x="-50" data-offset-y="-35" data-expected-width="515" data-expected-height="465">
+    </div>
+    <div class="sizedToGridArea absolute firstRowSecondColumn offsetLeftMinus20 offsetTopMinus60"
+      data-offset-x="-20" data-offset-y="-45" data-expected-width="465" data-expected-height="515">
+    </div>
+    <div class="sizedToGridArea absolute secondRowSecondColumn offsetRight50 offsetTop75"
+      data-offset-x="-50" data-offset-y="140" data-expected-width="465" data-expected-height="465">
+    </div>
+    <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows offsetLeft25 offsetBottom100"
+      data-offset-x="25" data-offset-y="65" data-expected-width="365" data-expected-height="350">
+    </div>
+    <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100"
+      data-offset-x="-35" data-offset-y="105" data-expected-width="350" data-expected-height="350">
+    </div>
+  </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-parent-001.html b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-parent-001.html
new file mode 100644
index 0000000000..9e7172db43
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-parent-001.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Absolute positioning grid container parent</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="This test checks the behavior of the absolutely positioned elements with a grid container as parent.">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+
+.grid {
+  grid-template-columns: 50px 100px 150px;
+  grid-template-rows: 25px 50px 100px;
+  width: 300px;
+  height: 200px;
+  border: 5px solid black;
+  margin: 20px 30px;
+  padding: 5px 15px;
+}
+
+.container {
+  width: 500px;
+  height: 400px;
+}
+
+.relative {
+  /* Ensures that the element is the containing block of the absolutely positioned elements. */
+  position: relative;
+}
+
+.absolute {
+  position: absolute;
+}
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.container'); })">
+
+<div id="log"></div>
+
+<div class="container relative">
+  <div class="grid">
+    <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="50" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
+  </div>
+</div>
+
+<div class="container relative">
+  <div class="grid">
+    <div class="sizedToGridArea absolute firstRowFirstColumn" data-offset-x="50" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
+  </div>
+</div>
+
+<div class="container relative">
+  <div class="grid">
+    <div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="50" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="grid relative">
+    <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="330" data-expected-height="210"></div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="grid relative">
+    <div class="sizedToGridArea absolute firstRowFirstColumn" data-offset-x="15" data-offset-y="5" data-expected-width="315" data-expected-height="205"></div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="grid relative">
+    <div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="65" data-offset-y="30" data-expected-width="265" data-expected-height="180"></div>
+  </div>
+</div>
+
+<div class="container relative">
+  <div class="grid directionRTL">
+    <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="-150" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
+  </div>
+</div>
+
+<div class="container relative">
+  <div class="grid directionRTL">
+    <div class="sizedToGridArea absolute firstRowFirstColumn" data-offset-x="-150" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
+  </div>
+</div>
+
+<div class="container relative">
+  <div class="grid directionRTL">
+    <div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="-150" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="grid relative directionRTL">
+    <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="330" data-expected-height="210"></div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="grid relative directionRTL">
+    <div class="sizedToGridArea absolute firstRowFirstColumn" data-offset-x="0" data-offset-y="5" data-expected-width="315" data-expected-height="205"></div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="grid relative directionRTL">
+    <div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="0" data-offset-y="30" data-expected-width="265" data-expected-height="180"></div>
+  </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-parent-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-parent-002-ref.html
new file mode 100644
index 0000000000..0c09ca180f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-parent-002-ref.html
@@ -0,0 +1,56 @@
+
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Absolute positioning grid container parent</title>
+
+<style>
+
+  .grid {
+    display: grid;
+    background-color: gray;
+    grid-template-columns: 50px 100px 150px;
+    grid-template-rows: 25px 50px 100px;
+    width: 300px;
+    height: 200px;
+    border: 5px solid black;
+    margin: 20px 30px;
+    padding: 5px 15px;
+  }
+
+  .container {
+    width: 500px;
+    height: 400px;
+    /* Ensures that the element is the containing block of the absolutely positioned elements. */
+    position: relative;
+  }
+
+  #item {
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    background-color: blue;
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  #absolute {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: pink;
+    grid-column: auto;
+    grid-row: auto;
+    top: 20px;
+    left: 60px;
+  }
+
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div class="container">
+  <div class="grid">
+    <div id="item"></div>
+    <div id="absolute"></div>
+  </div>
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-parent-002.html b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-parent-002.html
new file mode 100644
index 0000000000..22c58c9c80
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-parent-002.html
@@ -0,0 +1,46 @@
+
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Absolute positioning grid container parent</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="This test checks the behavior of the absolutely positioned descendant elements with a grid container as parent.">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+
+<style>
+
+  .grid {
+    grid-template-columns: 50px 100px 150px;
+    grid-template-rows: 25px 50px 100px;
+    width: 300px;
+    height: 200px;
+    border: 5px solid black;
+    margin: 20px 30px;
+    padding: 5px 15px;
+  }
+
+  .container {
+    width: 500px;
+    height: 400px;
+  }
+
+  .relative {
+    /* Ensures that the element is the containing block of the absolutely positioned elements. */
+    position: relative;
+  }
+
+  .absolute {
+    position: absolute;
+  }
+
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div class="container relative">
+  <div class="grid">
+    <div class="sizedToGridArea firstRowFirstColumn" style="padding: 10px;">
+      <div class="sizedToGridArea autoRowAutoColumn absolute"></div>
+    </div>
+  </div>
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-001-ref.html
new file mode 100644
index 0000000000..05cdb41b31
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-001-ref.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html><head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Reference: Grid aligned descendants with static position</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+.grid {
+  position: relative;
+  display: grid;
+  grid: 40px / 40px;
+  border: 2px solid;
+  border-top-width: 5px;
+  border-left-width: 3px;
+  width: 20px;
+  padding: 2px 4px 6px 1px;
+}
+.absolute {
+  position: absolute;
+  grid-column: 1 / 2;
+}
+.content {
+  float: left;
+  width: 20px;
+  height: 40px;
+  background: green;
+}
+.content:nth-child(2) {
+  background: grey;
+}
+
+</style></head>
+<body>
+There should be no red:
+
+<div class="grid">
+    <div class="absolute" style="margin-top:2px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px">
+    <div class="absolute" style="margin-top:2px; margin-left:3px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px">
+    <div class="absolute" style="margin-top:2px; border-left:2px solid black; padding-left:1px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="padding-bottom: 14px">
+    <div class="absolute" style="margin-top:10px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px; padding-left:8px">
+    <div class="absolute" style="margin-top:2px; margin-left:3px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-001.html b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-001.html
new file mode 100644
index 0000000000..ec19e4acff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-001.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html><head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid aligned descendants with static position</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="Absolute Positioning">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#staticpos-rect" title="Appendix A: Static Position Terminology">
+<link rel="match" href="descendant-static-position-001-ref.html">
+<meta name="assert" content="This test checks that the position and size of the abs.pos. descendant is correct.">
+<style>
+.grid {
+  position: relative;
+  display: grid;
+  grid: 40px / 40px;
+  border: 2px solid;
+  border-top-width: 5px;
+  border-left-width: 3px;
+  width: 20px;
+  padding: 2px 4px 6px 1px;
+}
+.grid > div {
+  background: red;
+  background-clip: content-box;
+}
+.absolute {
+  position: absolute;
+  background: red;
+  grid-column: 1 / 2;
+}
+.content {
+  float: left;
+  width: 20px;
+  height: 40px;
+  background: green;
+}
+.content:nth-child(2) {
+  background: grey;
+}
+
+</style></head>
+<body>
+There should be no red:
+
+<div class="grid">
+  <div>
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px">
+  <div style="padding-left:3px">
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px">
+  <div style="border-left:2px solid black; padding-left:1px">
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="padding-top:10px">
+  <div>
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 10px 33px; padding-left:8px">
+  <div style="padding-left:3px">
+    <div class="absolute" style="grid-column: 2 / 3">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-002-ref.html
new file mode 100644
index 0000000000..f1a3d9efeb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-002-ref.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html><head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Reference: Grid aligned descendants with static position (direction: rtl)</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+.grid {
+  position: relative;
+  display: grid;
+  grid: 40px / 40px;
+  border: 2px solid;
+  border-top-width: 5px;
+  border-left-width: 3px;
+  width: 20px;
+  padding: 2px 4px 6px 1px;
+  direction: rtl;
+  margin-left: 40px;
+}
+.absolute {
+  position: absolute;
+  grid-column: 1 / 2;
+}
+.content {
+  float: right;
+  width: 20px;
+  height: 40px;
+  background: green;
+}
+.content:nth-child(2) {
+  background: grey;
+}
+
+</style></head>
+<body>
+There should be no red:
+
+<div class="grid">
+    <div class="absolute" style="margin-top:2px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px">
+    <div class="absolute" style="margin-top:2px; margin-left:3px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px">
+    <div class="absolute" style="margin-top:2px; border-left:2px solid black; padding-left:1px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="padding-bottom: 14px">
+    <div class="absolute" style="margin-top:10px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px; padding-right:8px">
+    <div class="absolute" style="margin-top:2px; margin-left:3px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px; padding-right:8px; padding-left:10px">
+    <div class="absolute" style="margin-top:2px;">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-002.html b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-002.html
new file mode 100644
index 0000000000..97fa299c0a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-002.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html><head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid aligned descendants with static position (direction: rtl)</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="Absolute Positioning">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#staticpos-rect" title="Appendix A: Static Position Terminology">
+<link rel="match" href="descendant-static-position-002-ref.html">
+<meta name="assert" content="This test checks that the position and size of the abs.pos. descendant is correct.">
+<style>
+.grid {
+  position: relative;
+  display: grid;
+  grid: 40px / 40px;
+  border: 2px solid;
+  border-top-width: 5px;
+  border-left-width: 3px;
+  width: 20px;
+  padding: 2px 4px 6px 1px;
+  direction: rtl;
+  margin-left: 40px;
+}
+.grid > div {
+  background: red;
+  background-clip: content-box;
+}
+.absolute {
+  position: absolute;
+  background: red;
+  grid-column: 1 / 2;
+}
+.content {
+  float: right;
+  width: 20px;
+  height: 40px;
+  background: green;
+}
+.content:nth-child(2) {
+  background: grey;
+}
+
+</style></head>
+<body>
+There should be no red:
+
+<div class="grid">
+  <div>
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px">
+  <div style="padding-left:3px">
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px">
+  <div style="border-left:2px solid black; padding-left:1px">
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="padding-top:10px">
+  <div>
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 10px 33px; padding-right:8px">
+  <div style="padding-left:3px">
+    <div class="absolute" style="grid-column: 2 / 3">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 10px 33px; padding-right:8px; padding-left:10px">
+  <div style="padding-left:3px">
+    <div class="absolute" style="grid-column: 2 / 3">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-003-ref.html b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-003-ref.html
new file mode 100644
index 0000000000..953d45de01
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-003-ref.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html><head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Reference: Grid aligned descendants with static position</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+.grid {
+  position: relative;
+  display: grid;
+  grid: 40px / 40px;
+  border: 2px solid;
+  border-top-width: 5px;
+  border-left-width: 3px;
+  width: 100px;
+  justify-content: end;
+  padding: 2px 4px 6px 1px;
+}
+.absolute {
+  position: absolute;
+  grid-column: 1 / 2;
+}
+.content {
+  float: left;
+  width: 20px;
+  height: 40px;
+  background: green;
+}
+.content:nth-child(2) {
+  background: grey;
+}
+
+</style></head>
+<body>
+There should be no red:
+
+<div class="grid">
+    <div class="absolute" style="margin-top:2px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px">
+    <div class="absolute" style="margin-top:2px; margin-left:3px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px">
+    <div class="absolute" style="margin-top:2px; border-left:2px solid black; padding-left:1px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="padding-bottom: 14px">
+    <div class="absolute" style="margin-top:10px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px; padding-left:8px">
+    <div class="absolute" style="margin-top:2px; margin-left:3px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-003.html b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-003.html
new file mode 100644
index 0000000000..399ade2e87
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-003.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html><head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid aligned descendants with static position</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="Absolute Positioning">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#staticpos-rect" title="Appendix A: Static Position Terminology">
+<link rel="match" href="descendant-static-position-003-ref.html">
+<meta name="assert" content="This test checks that the position and size of the abs.pos. descendant is correct.">
+<style>
+.grid {
+  position: relative;
+  display: grid;
+  grid: 40px / 40px;
+  border: 2px solid;
+  border-top-width: 5px;
+  border-left-width: 3px;
+  width: 100px;
+  justify-content: end;
+  padding: 2px 4px 6px 1px;
+}
+.grid > div {
+  background: red;
+  background-clip: content-box;
+}
+.absolute {
+  position: absolute;
+  background: red;
+  grid-column: 1 / 2;
+}
+.content {
+  float: left;
+  width: 20px;
+  height: 40px;
+  background: green;
+}
+.content:nth-child(2) {
+  background: grey;
+}
+
+</style></head>
+<body>
+There should be no red:
+
+<div class="grid">
+  <div>
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px">
+  <div style="padding-left:3px">
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px">
+  <div style="border-left:2px solid black; padding-left:1px">
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="padding-top:10px">
+  <div>
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 10px 33px; padding-left:8px">
+  <div style="padding-left:3px">
+    <div class="absolute" style="grid-column: 2 / 3">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-004-ref.html b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-004-ref.html
new file mode 100644
index 0000000000..3da40c17eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-004-ref.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html><head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Reference: Grid aligned descendants with static position (direction: rtl)</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+.grid {
+  position: relative;
+  display: grid;
+  grid: 40px / 40px;
+  border: 2px solid;
+  border-top-width: 5px;
+  border-left-width: 3px;
+  width: 100px;
+  justify-content: center;
+  padding: 2px 4px 6px 1px;
+  direction: rtl;
+  margin-left: 40px;
+}
+.absolute {
+  position: absolute;
+  grid-column: 1 / 2;
+}
+.content {
+  float: right;
+  width: 20px;
+  height: 40px;
+  background: green;
+}
+.content:nth-child(2) {
+  background: grey;
+}
+
+</style></head>
+<body>
+There should be no red:
+
+<div class="grid">
+    <div class="absolute" style="margin-top:2px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 44px">
+    <div class="absolute" style="margin-top:2px; margin-left:4px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 44px">
+    <div class="absolute" style="margin-top:2px; border-left:2px solid black; padding-left:2px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="padding-bottom: 14px">
+    <div class="absolute" style="margin-top:10px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px; padding-right:8px">
+    <div class="absolute" style="margin-top:2px; margin-left:3px">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 43px; padding-right:8px; padding-left:10px">
+    <div class="absolute" style="margin-top:2px;">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-004.html b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-004.html
new file mode 100644
index 0000000000..5f87dccd80
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-004.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html><head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid aligned descendants with static position (direction: rtl)</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="Absolute Positioning">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#staticpos-rect" title="Appendix A: Static Position Terminology">
+<link rel="match" href="descendant-static-position-004-ref.html">
+<meta name="assert" content="This test checks that the position and size of the abs.pos. descendant is correct.">
+<style>
+.grid {
+  position: relative;
+  display: grid;
+  grid: 40px / 40px;
+  border: 2px solid;
+  border-top-width: 5px;
+  border-left-width: 3px;
+  width: 100px;
+  justify-content: center;
+  padding: 2px 4px 6px 1px;
+  direction: rtl;
+  margin-left: 40px;
+}
+.grid > div {
+  background: red;
+  background-clip: content-box;
+}
+.absolute {
+  position: absolute;
+  background: red;
+  grid-column: 1 / 2;
+}
+.content {
+  float: right;
+  width: 20px;
+  height: 40px;
+  background: green;
+}
+.content:nth-child(2) {
+  background: grey;
+}
+
+</style></head>
+<body>
+There should be no red:
+
+<div class="grid">
+  <div>
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 44px">
+  <div style="padding-left:4px">
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 44px">
+  <div style="border-left:2px solid black; padding-left:2px">
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="padding-top:10px">
+  <div>
+    <div class="absolute">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 10px 33px; padding-right:8px">
+  <div style="padding-left:3px">
+    <div class="absolute" style="grid-column: 2 / 3">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+<div class="grid" style="grid-template-columns: 10px 33px; padding-right:8px; padding-left:10px">
+  <div style="padding-left:3px">
+    <div class="absolute" style="grid-column: 2 / 3">
+      <div class="content"></div>
+      <div class="content"></div>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/empty-grid-001.html b/testing/web-platform/tests/css/css-grid/abspos/empty-grid-001.html
new file mode 100644
index 0000000000..10702c76e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/empty-grid-001.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<title>CSS Grid: empty grid without explicit tracks.</title>
+<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos"/>
+<link rel="issue" href="https://crrev.com/562167"/>
+<meta name="assert" content="Test ensures that the grids with no in-flow items are actually empty."/>
+
+<link href="/css/support/grid.css" rel="stylesheet"/>
+<link href="/css/support/width-keyword-classes.css" rel="stylesheet"/>
+<link href="/fonts/ahem.css" rel="stylesheet" type="text/css"/>
+<style>
+.gridWithAbsolutePositionedItem {
+  /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+  position: relative;
+}
+
+.grid {
+  grid-auto-columns: 200px;
+  grid-auto-rows: 200px;
+}
+
+.item {
+  position: absolute;
+  font: 10px/1 Ahem;
+}
+
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script>
+function addRemoveItem()
+{
+  var gridItem = document.createElement("div");
+  gridItem.style.width = "100px";
+  gridItem.style.height = "100px";
+  gridItem.style.backgroundColor = "red";
+  var gridElement = document.getElementById("dynamicGrid");
+  gridElement.appendChild(gridItem);
+  gridElement.removeChild(gridItem);
+}
+
+setup({ explicit_done: true });
+
+function doTest() {
+  addRemoveItem();
+  checkLayout(".grid");
+}
+</script>
+
+<body onload="document.fonts.ready.then(() => { doTest(); })">
+
+<div class="grid min-content" data-expected-width="0" data-expected-height="0"></div>
+
+<div class="grid min-content gridWithAbsolutePositionedItem" data-expected-width="0" data-expected-height="0">
+  <div class="item" data-expected-width="40" data-expected-height="10">XXXX</div>
+</div>
+
+<div id="dynamicGrid" class="grid min-content" data-expected-width="0" data-expected-height="0"></div>
+
+<div class="grid min-content" style="grid-template-rows: 100px;" data-expected-width="0" data-expected-height="100"></div>
+<div class="grid min-content" style="grid-template-rows: auto;" data-expected-width="0" data-expected-height="0"></div>
+<div class="grid min-content" style="grid-template-rows: 1fr;" data-expected-width="0" data-expected-height="0"></div>
+
+<div class="grid min-content" style="grid-template-columns: 100px;" data-expected-width="100" data-expected-height="0"></div>
+<div class="grid min-content" style="grid-template-columns: auto;" data-expected-width="0" data-expected-height="0"></div>
+<div class="grid min-content" style="grid-template-columns: 1fr;" data-expected-width="0" data-expected-height="0"></div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-001-ref.html
new file mode 100644
index 0000000000..cb6d12be4e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-001-ref.html
@@ -0,0 +1,94 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+      margin-left: 3px;
+    }
+    .big   .alignStart  { margin-top:  2px; }
+    .big   .alignCenter { margin-top:  9px; }
+    .big   .alignEnd    { margin-top: 16px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -2px; }
+    .small .alignEnd    { margin-top: -4px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-001.html
new file mode 100644
index 0000000000..8fd4eca36c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-001.html
@@ -0,0 +1,95 @@
+<!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 Test: Static position of abspos children in a grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-align-self-001-ref.html">
+  <style>
+    .container {
+      display: grid;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      align-items: center; /* To exercise 'align-self: auto' on children */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-002-ref.html
new file mode 100644
index 0000000000..ddb89d1fb2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-002-ref.html
@@ -0,0 +1,93 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { margin-top:  0px; }
+    .big   .alignCenter { margin-top: 12px; }
+    .big   .alignEnd    { margin-top: 24px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -2px; }
+    .small .alignEnd    { margin-top: -4px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-002.html
new file mode 100644
index 0000000000..a78dfc4245
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-002.html
@@ -0,0 +1,94 @@
+<!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 Test: Static position of abspos children in a static-pos grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-align-self-002-ref.html">
+  <style>
+    .container {
+      display: grid;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      align-items: center; /* To exercise 'align-self: auto' on children */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-001-ref.html
new file mode 100644
index 0000000000..06d9d36612
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-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>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 40px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+      margin-bottom: 20px; /* to reduce overlap between overflowing images */
+    }
+
+    .container > * {
+      margin-left: 3px;
+      display: block;
+    }
+    .big   .alignStart  { margin-top:   2px; }
+    .big   .alignCenter { margin-top:   9px; }
+    .big   .alignEnd    { margin-top:  16px; }
+    .small .alignStart  { margin-top:   0px; }
+    .small .alignCenter { margin-top:  -7px; }
+    .small .alignEnd    { margin-top: -14px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--auto--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--normal--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--stretch--></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--baseline--></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignCenter"><!--center--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--self-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--self-end--></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--flex-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--flex-end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--left--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--right--></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--auto--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--normal--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--stretch--></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--baseline--></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignCenter"><!--center--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--self-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--self-end--></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--flex-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--flex-end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--left--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--right--></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-001.html
new file mode 100644
index 0000000000..cb5906603b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-001.html
@@ -0,0 +1,122 @@
+<!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 Test: Static position of abspos replaced children in a grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-align-self-img-001-ref.html">
+  <style>
+    .container {
+      display: grid;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 40px;
+      width: 22px;
+      grid: 2px 30px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      height: 2px;
+      width: 4px;
+      margin-bottom: 20px; /* to reduce overlap between overflowing images */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: auto"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: normal"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: stretch"></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: baseline"></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: center"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: self-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: self-end"></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: flex-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: flex-end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: left"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: right"></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: auto"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: normal"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: stretch"></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: baseline"></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: center"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: self-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: self-end"></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: flex-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: flex-end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: left"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: right"></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-002-ref.html
new file mode 100644
index 0000000000..368f1a7a5d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-002-ref.html
@@ -0,0 +1,122 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 40px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+      margin-bottom: 25px; /* to reduce overlap between overflowing images */
+    }
+
+    .container > * {
+      display: block;
+    }
+    .big   .alignStart  { margin-top:   0px; }
+    .big   .alignCenter { margin-top:  12px; }
+    .big   .alignEnd    { margin-top:  24px; }
+    .small .alignStart  { margin-top:   0px; }
+    .small .alignCenter { margin-top:  -7px; }
+    .small .alignEnd    { margin-top: -14px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--auto--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--normal--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--stretch--></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--baseline--></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignCenter"><!--center--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--self-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--self-end--></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--flex-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--flex-end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--left--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--right--></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--auto--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--normal--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--stretch--></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--baseline--></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignCenter"><!--center--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--self-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--self-end--></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--flex-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--flex-end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--left--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--right--></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-002.html
new file mode 100644
index 0000000000..5b029df849
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-002.html
@@ -0,0 +1,121 @@
+<!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 Test: Static position of abspos replaced children in a static-pos grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-align-self-img-002-ref.html">
+  <style>
+    .container {
+      display: grid;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 40px;
+      width: 22px;
+      grid: 2px 30px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      height: 2px;
+      width: 4px;
+      margin-bottom: 25px; /* to reduce overlap between overflowing images */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: auto"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: normal"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: stretch"></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: baseline"></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: center"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: self-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: self-end"></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: flex-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: flex-end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: left"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: right"></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: auto"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: normal"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: stretch"></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: baseline"></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: center"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: self-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: self-end"></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: flex-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: flex-end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: left"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: right"></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-last-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-last-baseline-001-ref.html
new file mode 100644
index 0000000000..37655b038c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-last-baseline-001-ref.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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 40px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+      margin-bottom: 20px; /* to reduce overlap between overflowing images */
+    }
+
+    .container > * {
+      margin-left: 3px;
+      display: block;
+    }
+    .big   .alignStart  { margin-top:   2px; }
+    .big   .alignCenter { margin-top:   9px; }
+    .big   .alignEnd    { margin-top:  16px; }
+    .small .alignStart  { margin-top:   0px; }
+    .small .alignCenter { margin-top:  -7px; }
+    .small .alignEnd    { margin-top: -14px; }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+  <div class="big">
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--last baseline--></div>
+  </div>
+  <div class="small">
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--last baseline--></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-last-baseline-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-last-baseline-001.html
new file mode 100644
index 0000000000..35fb55cfe9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-last-baseline-001.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>CSS Test: Static position of abspos replaced children in a grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-align-self-img-last-baseline-001-ref.html">
+  <style>
+    .container {
+      display: grid;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 40px;
+      width: 22px;
+      grid: 2px 30px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      height: 2px;
+      width: 4px;
+      margin-bottom: 20px; /* to reduce overlap between overflowing images */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+    }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+  <div class="big">
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: last baseline"></div>
+  </div>
+  <div class="small">
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: last baseline"></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-last-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-last-baseline-002-ref.html
new file mode 100644
index 0000000000..f35fb48ce1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-last-baseline-002-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>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 40px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+      margin-bottom: 20px; /* to reduce overlap between overflowing images */
+    }
+
+    .container > * {
+      display: block;
+    }
+    .big   .alignEnd    { margin-top:  24px; }
+    .small .alignEnd    { margin-top: -14px; }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+  <div class="big">
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--last baseline--></div>
+  </div>
+  <div class="small">
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--last baseline--></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-last-baseline-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-last-baseline-002.html
new file mode 100644
index 0000000000..028781586c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-last-baseline-002.html
@@ -0,0 +1,55 @@
+<!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 Test: Static position of abspos replaced children in a static-pos grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-align-self-img-last-baseline-002-ref.html">
+  <style>
+    .container {
+      display: grid;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 40px;
+      width: 22px;
+      grid: 2px 30px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      height: 2px;
+      width: 4px;
+      margin-bottom: 20px; /* to reduce overlap between overflowing images */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+    }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+  <div class="big">
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: last baseline"></div>
+  </div>
+  <div class="small">
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: last baseline"></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-last-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-last-baseline-001-ref.html
new file mode 100644
index 0000000000..6bc5ba4f8c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-last-baseline-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>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+      margin-left: 3px;
+    }
+    .big   .alignStart  { margin-top:  2px; }
+    .big   .alignCenter { margin-top:  9px; }
+    .big   .alignEnd    { margin-top: 16px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -2px; }
+    .small .alignEnd    { margin-top: -4px; }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+  <div class="big">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-last-baseline-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-last-baseline-001.html
new file mode 100644
index 0000000000..da6ce34a89
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-last-baseline-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 Test: Static position of abspos children in a grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-align-self-last-baseline-001-ref.html">
+  <style>
+    .container {
+      display: grid;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      align-items: center; /* To exercise 'align-self: auto' on children */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+  <div class="big">
+    <div class="container"><div style="align-self: last baseline"></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div style="align-self: last baseline"></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-last-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-last-baseline-002-ref.html
new file mode 100644
index 0000000000..d023258177
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-last-baseline-002-ref.html
@@ -0,0 +1,51 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignEnd    { margin-top: 24px; }
+    .small .alignEnd    { margin-top: -4px; }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+  <div class="big">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-last-baseline-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-last-baseline-002.html
new file mode 100644
index 0000000000..54fb9ae77b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-last-baseline-002.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>CSS Test: Static position of abspos children in a static-pos grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-align-self-last-baseline-002-ref.html">
+  <style>
+    .container {
+      display: grid;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      align-items: center; /* To exercise 'align-self: auto' on children */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+  <div class="big">
+    <div class="container"><div style="align-self: last baseline"></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div style="align-self: last baseline"></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-001-ref.html
new file mode 100644
index 0000000000..a5ad3a3427
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-001-ref.html
@@ -0,0 +1,100 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 11px; }
+    .small > .container > * { margin-left: -7px; }
+
+    .big   .alignStart  { margin-top:  2px; }
+    .big   .alignCenter { margin-top:  9px; }
+    .big   .alignEnd    { margin-top: 16px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -2px; }
+    .small .alignEnd    { margin-top: -4px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-001.html
new file mode 100644
index 0000000000..31def24fe8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-001.html
@@ -0,0 +1,99 @@
+<!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 Test: Static position of abspos children in a RTL grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-align-self-rtl-001-ref.html">
+  <style>
+    .container {
+      display: grid;
+      direction: rtl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-002-ref.html
new file mode 100644
index 0000000000..a5ad3a3427
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-002-ref.html
@@ -0,0 +1,100 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 11px; }
+    .small > .container > * { margin-left: -7px; }
+
+    .big   .alignStart  { margin-top:  2px; }
+    .big   .alignCenter { margin-top:  9px; }
+    .big   .alignEnd    { margin-top: 16px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -2px; }
+    .small .alignEnd    { margin-top: -4px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-002.html
new file mode 100644
index 0000000000..21936e964d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-002.html
@@ -0,0 +1,100 @@
+<!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 Test: Static position of abspos LTR children in a RTL grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-align-self-rtl-002-ref.html">
+  <style>
+    .container {
+      display: grid;
+      direction: rtl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      direction: ltr;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-003-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-003-ref.html
new file mode 100644
index 0000000000..dde6f96745
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-003-ref.html
@@ -0,0 +1,100 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 14px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignStart  { margin-top:  0px; }
+    .big   .alignCenter { margin-top: 12px; }
+    .big   .alignEnd    { margin-top: 24px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -2px; }
+    .small .alignEnd    { margin-top: -4px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-003.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-003.html
new file mode 100644
index 0000000000..e53bd19338
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-003.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>CSS Test: Static position of abspos children in a RTL static-pos grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-align-self-rtl-003-ref.html">
+  <style>
+    .container {
+      display: grid;
+      direction: rtl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-004-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-004-ref.html
new file mode 100644
index 0000000000..dde6f96745
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-004-ref.html
@@ -0,0 +1,100 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 14px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignStart  { margin-top:  0px; }
+    .big   .alignCenter { margin-top: 12px; }
+    .big   .alignEnd    { margin-top: 24px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -2px; }
+    .small .alignEnd    { margin-top: -4px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-004.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-004.html
new file mode 100644
index 0000000000..12805427e8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-004.html
@@ -0,0 +1,99 @@
+<!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 Test: Static position of abspos LTR children in a RTL static-pos grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-align-self-rtl-004-ref.html">
+  <style>
+    .container {
+      display: grid;
+      direction: rtl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      direction: ltr;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-001-ref.html
new file mode 100644
index 0000000000..9c838e9eaf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-001-ref.html
@@ -0,0 +1,58 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 11px; }
+    .small > .container > * { margin-left: -7px; }
+
+    .big   .alignStart  { margin-top:  2px; }
+    .big   .alignCenter { margin-top:  9px; }
+    .big   .alignEnd    { margin-top: 16px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -2px; }
+    .small .alignEnd    { margin-top: -4px; }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+  <div class="big">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-001.html
new file mode 100644
index 0000000000..8804a39a56
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-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 Test: Static position of abspos children in a RTL grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-align-self-rtl-last-baseline-001-ref.html">
+  <style>
+    .container {
+      display: grid;
+      direction: rtl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+  <div class="big">
+    <div class="container"><div style="align-self: last baseline"></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div style="align-self: last baseline"></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-002-ref.html
new file mode 100644
index 0000000000..9c838e9eaf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-002-ref.html
@@ -0,0 +1,58 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 11px; }
+    .small > .container > * { margin-left: -7px; }
+
+    .big   .alignStart  { margin-top:  2px; }
+    .big   .alignCenter { margin-top:  9px; }
+    .big   .alignEnd    { margin-top: 16px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -2px; }
+    .small .alignEnd    { margin-top: -4px; }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+  <div class="big">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-002.html
new file mode 100644
index 0000000000..e63bfa2813
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-002.html
@@ -0,0 +1,58 @@
+<!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 Test: Static position of abspos LTR children in a RTL grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-align-self-rtl-last-baseline-002-ref.html">
+  <style>
+    .container {
+      display: grid;
+      direction: rtl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      direction: ltr;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+  <div class="big">
+    <div class="container"><div style="align-self: last baseline"></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div style="align-self: last baseline"></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-003-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-003-ref.html
new file mode 100644
index 0000000000..61d6d59fdf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-003-ref.html
@@ -0,0 +1,54 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 14px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignEnd    { margin-top: 24px; }
+    .small .alignEnd    { margin-top: -4px; }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+  <div class="big">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-003.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-003.html
new file mode 100644
index 0000000000..7f07b13524
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-003.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>CSS Test: Static position of abspos children in a RTL static-pos grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-align-self-rtl-last-baseline-003-ref.html">
+  <style>
+    .container {
+      display: grid;
+      direction: rtl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+  <div class="big">
+    <div class="container"><div style="align-self: last baseline"></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div style="align-self: last baseline"></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-004-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-004-ref.html
new file mode 100644
index 0000000000..61d6d59fdf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-004-ref.html
@@ -0,0 +1,54 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 14px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignEnd    { margin-top: 24px; }
+    .small .alignEnd    { margin-top: -4px; }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+  <div class="big">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-004.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-004.html
new file mode 100644
index 0000000000..b40e60488f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-004.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 Test: Static position of abspos LTR children in a RTL static-pos grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-align-self-rtl-last-baseline-004-ref.html">
+  <style>
+    .container {
+      display: grid;
+      direction: rtl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      direction: ltr;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+  <div class="big">
+    <div class="container"><div style="align-self: last baseline"></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div style="align-self: last baseline"></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-safe-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-safe-001-ref.html
new file mode 100644
index 0000000000..5e7fd9f9a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-safe-001-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: Testing safe overflow-position for align-self and justify-self in absolutely positioned boxes in grid containers in both horizontal and vertical writing modes</title>
+  <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com">
+  <style>
+    .container {
+      display: grid;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+      width: 30px;
+      height: 25px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    br { clear: both }
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 21px;
+      height: 21px;
+      justify-self: start;
+      align-self: start;
+    }
+    .vertRL {
+      writing-mode: vertical-rl;
+    }
+    .relPos {
+      position: relative;
+    }
+    .relPos > * {
+      height: 35px;
+      width: 33px;
+    }
+  </style>
+</head>
+<body>
+  <div class="container vertRL"><div></div></div>
+  <div class="container"><div></div></div>
+  <div class="container relPos vertRL"><div></div></div>
+  <div class="container relPos"><div></div></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-safe-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-safe-001.html
new file mode 100644
index 0000000000..58ccaaf01d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-safe-001.html
@@ -0,0 +1,55 @@
+<!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 Test: Testing safe overflow-position for align-self and justify-self in absolutely positioned boxes in grid containers in both horizontal and vertical writing modes</title>
+  <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-align-self-safe-001-ref.html">
+  <style>
+    .container {
+      display: grid;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+      width: 30px;
+      height: 25px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    br { clear: both }
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 21px;
+      height: 21px;
+      justify-self: safe end;
+      align-self: safe center;
+    }
+    .vertRL {
+      writing-mode: vertical-rl;
+    }
+    .relPos {
+      position: relative;
+    }
+    .relPos > * {
+      height: 35px;
+      width: 33px;
+    }
+  </style>
+</head>
+<body>
+  <div class="container vertRL"><div></div></div>
+  <div class="container"><div></div></div>
+  <div class="container relPos vertRL"><div></div></div>
+  <div class="container relPos"><div></div></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-001-ref.html
new file mode 100644
index 0000000000..dd151d46fd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-001-ref.html
@@ -0,0 +1,99 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+      margin-top: 3px;
+    }
+    .big   .alignStart  { margin-left: 22px; }
+    .big   .alignCenter { margin-left: 15px; }
+    .big   .alignEnd    { margin-left:  8px; }
+    .small .alignStart  { margin-left: -4px; }
+    .small .alignCenter { margin-left: -2px; }
+    .small .alignEnd    { margin-left:  0px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-001.html
new file mode 100644
index 0000000000..2feeb2c3a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-001.html
@@ -0,0 +1,100 @@
+<!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 Test: Static position of abspos children in a vertical-rl grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-align-self-vertWM-001-ref.html">
+  <style>
+    .container {
+      display: grid;
+      writing-mode: vertical-rl;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-002-ref.html
new file mode 100644
index 0000000000..60bd0cec26
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-002-ref.html
@@ -0,0 +1,99 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+      margin-top: 3px;
+    }
+    .big   .alignStart  { margin-left: 22px; }
+    .big   .alignCenter { margin-left: 15px; }
+    .big   .alignEnd    { margin-left:  8px; }
+    .small .alignStart  { margin-left: -4px; }
+    .small .alignCenter { margin-left: -2px; }
+    .small .alignEnd    { margin-left:  0px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-start--></div></div>
+    <div class="container"><div class="alignStart"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-start--></div></div>
+    <div class="container"><div class="alignStart"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-002.html
new file mode 100644
index 0000000000..659f6b727e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-002.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>CSS Test: Static position of abspos horizontal-tb children in a vertical-rl grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-align-self-vertWM-002-ref.html">
+  <style>
+    .container {
+      display: grid;
+      writing-mode: vertical-rl;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      writing-mode: horizontal-tb;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-003-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-003-ref.html
new file mode 100644
index 0000000000..dbbb29e457
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-003-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>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+    .big   .alignStart  { margin-left: 24px; }
+    .big   .alignCenter { margin-left: 12px; }
+    .big   .alignEnd    { margin-left:  0px; }
+    .small .alignStart  { margin-left: -4px; }
+    .small .alignCenter { margin-left: -2px; }
+    .small .alignEnd    { margin-left:  0px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-003.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-003.html
new file mode 100644
index 0000000000..61bdc0496e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-003.html
@@ -0,0 +1,99 @@
+<!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 Test: Static position of abspos children in a vertical-rl static-pos grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-align-self-vertWM-003-ref.html">
+  <style>
+    .container {
+      display: grid;
+      writing-mode: vertical-rl;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-004-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-004-ref.html
new file mode 100644
index 0000000000..c6346bbe43
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-004-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>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+    .big   .alignStart  { margin-left: 24px; }
+    .big   .alignCenter { margin-left: 12px; }
+    .big   .alignEnd    { margin-left:  0px; }
+    .small .alignStart  { margin-left: -4px; }
+    .small .alignCenter { margin-left: -2px; }
+    .small .alignEnd    { margin-left:  0px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-start--></div></div>
+    <div class="container"><div class="alignStart"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-start--></div></div>
+    <div class="container"><div class="alignStart"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-004.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-004.html
new file mode 100644
index 0000000000..84e9265aad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-004.html
@@ -0,0 +1,100 @@
+<!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 Test: Static position of abspos horizontal-tb children in a static-pos vertical-rl grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-align-self-vertWM-004-ref.html">
+  <style>
+    .container {
+      display: grid;
+      writing-mode: vertical-rl;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      writing-mode: horizontal-tb;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="align-self: auto"></div></div>
+    <div class="container"><div style="align-self: normal"></div></div>
+    <div class="container"><div style="align-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="align-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="align-self: center"></div></div>
+    <div class="container"><div style="align-self: start"></div></div>
+    <div class="container"><div style="align-self: end"></div></div>
+    <div class="container"><div style="align-self: self-start"></div></div>
+    <div class="container"><div style="align-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="align-self: flex-start"></div></div>
+    <div class="container"><div style="align-self: flex-end"></div></div>
+    <div class="container"><div style="align-self: left"></div></div>
+    <div class="container"><div style="align-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-001-ref.html
new file mode 100644
index 0000000000..abd41fca4f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-001-ref.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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+      margin-top: 3px;
+    }
+    .big   .alignStart  { margin-left: 22px; }
+    .big   .alignCenter { margin-left: 15px; }
+    .big   .alignEnd    { margin-left:  8px; }
+    .small .alignStart  { margin-left: -4px; }
+    .small .alignCenter { margin-left: -2px; }
+    .small .alignEnd    { margin-left:  0px; }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+  <div class="big">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-001.html
new file mode 100644
index 0000000000..be1bc8cce9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-001.html
@@ -0,0 +1,58 @@
+<!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 Test: Static position of abspos children in a vertical-rl grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-align-self-vertWM-last-baseline-001-ref.html">
+  <style>
+    .container {
+      display: grid;
+      writing-mode: vertical-rl;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+  <div class="big">
+    <div class="container"><div style="align-self: last baseline"></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div style="align-self: last baseline"></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-002-ref.html
new file mode 100644
index 0000000000..abd41fca4f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-002-ref.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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+      margin-top: 3px;
+    }
+    .big   .alignStart  { margin-left: 22px; }
+    .big   .alignCenter { margin-left: 15px; }
+    .big   .alignEnd    { margin-left:  8px; }
+    .small .alignStart  { margin-left: -4px; }
+    .small .alignCenter { margin-left: -2px; }
+    .small .alignEnd    { margin-left:  0px; }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+  <div class="big">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-002.html
new file mode 100644
index 0000000000..26e1b8dadf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-002.html
@@ -0,0 +1,59 @@
+<!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 Test: Static position of abspos horizontal-tb children in a vertical-rl grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-align-self-vertWM-last-baseline-002-ref.html">
+  <style>
+    .container {
+      display: grid;
+      writing-mode: vertical-rl;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      writing-mode: horizontal-tb;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+  <div class="big">
+    <div class="container"><div style="align-self: last baseline"></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div style="align-self: last baseline"></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-003-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-003-ref.html
new file mode 100644
index 0000000000..afa9b43fce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-003-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>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+    .big   .alignEnd    { margin-left:  0px; }
+    .small .alignEnd    { margin-left:  0px; }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+  <div class="big">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-003.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-003.html
new file mode 100644
index 0000000000..7023e2ef4f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-003.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 Test: Static position of abspos children in a vertical-rl static-pos grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-align-self-vertWM-last-baseline-003-ref.html">
+  <style>
+    .container {
+      display: grid;
+      writing-mode: vertical-rl;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+  <div class="big">
+    <div class="container"><div style="align-self: last baseline"></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div style="align-self: last baseline"></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-004-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-004-ref.html
new file mode 100644
index 0000000000..afa9b43fce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-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>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+    .big   .alignEnd    { margin-left:  0px; }
+    .small .alignEnd    { margin-left:  0px; }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+  <div class="big">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-004.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-004.html
new file mode 100644
index 0000000000..e39e6b391a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-004.html
@@ -0,0 +1,58 @@
+<!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 Test: Static position of abspos horizontal-tb children in a static-pos vertical-rl grid container, with various "align-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-align-self-vertWM-last-baseline-004-ref.html">
+  <style>
+    .container {
+      display: grid;
+      writing-mode: vertical-rl;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 2px 20px 2px / 3px 14px 3px;
+    }
+    .small > .container {
+      grid: 0px 2px 0px / 3px 2px 3px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      writing-mode: horizontal-tb;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+  <div class="big">
+    <div class="container"><div style="align-self: last baseline"></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div style="align-self: last baseline"></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-001-ref.html
new file mode 100644
index 0000000000..982e0c6784
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-001-ref.html
@@ -0,0 +1,99 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+      margin-top: 3px;
+    }
+    .big   .alignStart  { margin-left:  2px; }
+    .big   .alignCenter { margin-left:  9px; }
+    .big   .alignEnd    { margin-left: 16px; }
+    .small .alignStart  { margin-left:  0px; }
+    .small .alignCenter { margin-left: -2px; }
+    .small .alignEnd    { margin-left: -4px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-001.html
new file mode 100644
index 0000000000..3f9a59f6b9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-001.html
@@ -0,0 +1,100 @@
+<!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 Test: Static position of abspos children in a grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-001-ref.html">
+  <style>
+    .container {
+      display: grid;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      justify-items: center; /* To exercise 'justify-self: auto' on children */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-002-ref.html
new file mode 100644
index 0000000000..cb0fb93ba4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-002-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>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+    .big   .alignStart  { margin-left:  0px; }
+    .big   .alignCenter { margin-left: 12px; }
+    .big   .alignEnd    { margin-left: 24px; }
+    .small .alignStart  { margin-left:  0px; }
+    .small .alignCenter { margin-left: -2px; }
+    .small .alignEnd    { margin-left: -4px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignCenter"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-002.html
new file mode 100644
index 0000000000..d0b607565e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-002.html
@@ -0,0 +1,99 @@
+<!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 Test: Static position of abspos children in a static-pos grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-002-ref.html">
+  <style>
+    .container {
+      display: grid;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      justify-items: center; /* To exercise 'justify-self: auto' on children */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-001-ref.html
new file mode 100644
index 0000000000..29a2961e1d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-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>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 40px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-bottom: 20px; /* to reduce overlap between overflowing images */
+    }
+
+    .container > * {
+      margin-top: 3px;
+      display: block;
+    }
+    .big   .alignStart  { margin-left:  2px; }
+    .big   .alignCenter { margin-left: 13px; }
+    .big   .alignEnd    { margin-left: 24px; }
+    .small .alignStart  { margin-left:  0px; }
+    .small .alignCenter { margin-left: -3px; }
+    .small .alignEnd    { margin-left: -6px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--auto--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--normal--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--stretch--></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--baseline--></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignCenter"><!--center--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--self-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--self-end--></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--flex-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--flex-end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--left--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--right--></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--auto--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--normal--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--stretch--></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--baseline--></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignCenter"><!--center--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--self-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--self-end--></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--flex-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--flex-end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--left--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--right--></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-001.html
new file mode 100644
index 0000000000..d402fd889a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-001.html
@@ -0,0 +1,122 @@
+<!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 Test: Static position of abspos replaced children in a grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-img-001-ref.html">
+  <style>
+    .container {
+      display: grid;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 40px;
+      height: 22px;
+      grid: 3px 14px 3px / 2px 30px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      width: 2px;
+      height: 4px;
+      margin-bottom: 20px; /* to reduce overlap between overflowing images */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: auto"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: normal"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: stretch"></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: baseline"></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: center"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: self-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: self-end"></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: flex-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: flex-end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: left"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: right"></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: auto"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: normal"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: stretch"></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: baseline"></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: center"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: self-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: self-end"></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: flex-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: flex-end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: left"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: right"></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-002-ref.html
new file mode 100644
index 0000000000..50ea8ba321
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-002-ref.html
@@ -0,0 +1,122 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 9px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 40px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-bottom: 20px; /* to reduce overlap between overflowing images */
+    }
+
+    .container > * {
+      display: block;
+    }
+    .big   .alignStart  { margin-left:  0px; }
+    .big   .alignCenter { margin-left: 16px; }
+    .big   .alignEnd    { margin-left: 32px; }
+    .small .alignStart  { margin-left:  0px; }
+    .small .alignCenter { margin-left: -3px; }
+    .small .alignEnd    { margin-left: -6px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--auto--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--normal--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--stretch--></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--baseline--></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignCenter"><!--center--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--self-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--self-end--></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--flex-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--flex-end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--left--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--right--></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--auto--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--normal--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--stretch--></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--baseline--></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignCenter"><!--center--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--self-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--self-end--></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--flex-start--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--flex-end--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignStart"><!--left--></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--right--></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-002.html
new file mode 100644
index 0000000000..6f4e865732
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-002.html
@@ -0,0 +1,121 @@
+<!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 Test: Static position of abspos replaced children in a static-pos grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-img-002-ref.html">
+  <style>
+    .container {
+      display: grid;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 9px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 40px;
+      height: 22px;
+      grid: 3px 14px 3px / 2px 30px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      width: 2px;
+      height: 4px;
+      margin-bottom: 20px; /* to reduce overlap between overflowing images */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: auto"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: normal"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: stretch"></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: baseline"></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: center"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: self-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: self-end"></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: flex-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: flex-end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: left"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: right"></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: auto"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: normal"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: stretch"></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: baseline"></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: center"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: self-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: self-end"></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: flex-start"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: flex-end"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: left"></div>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: right"></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-last-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-last-baseline-001-ref.html
new file mode 100644
index 0000000000..401cc7cc41
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-last-baseline-001-ref.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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 40px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-bottom: 20px; /* to reduce overlap between overflowing images */
+    }
+
+    .container > * {
+      margin-top: 3px;
+      display: block;
+    }
+    .big   .alignStart  { margin-left:  2px; }
+    .big   .alignCenter { margin-left: 13px; }
+    .big   .alignEnd    { margin-left: 24px; }
+    .small .alignStart  { margin-left:  0px; }
+    .small .alignCenter { margin-left: -3px; }
+    .small .alignEnd    { margin-left: -6px; }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+  <div class="big">
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--last baseline--></div>
+  </div>
+  <div class="small">
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--last baseline--></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-last-baseline-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-last-baseline-001.html
new file mode 100644
index 0000000000..76e8a62c26
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-last-baseline-001.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>CSS Test: Static position of abspos replaced children in a grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-img-last-baseline-001-ref.html">
+  <style>
+    .container {
+      display: grid;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 40px;
+      height: 22px;
+      grid: 3px 14px 3px / 2px 30px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      width: 2px;
+      height: 4px;
+      margin-bottom: 20px; /* to reduce overlap between overflowing images */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+    }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+  <div class="big">
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: last baseline"></div>
+  </div>
+  <div class="small">
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: last baseline"></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-last-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-last-baseline-002-ref.html
new file mode 100644
index 0000000000..62c9fe896c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-last-baseline-002-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>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 9px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 40px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-bottom: 20px; /* to reduce overlap between overflowing images */
+    }
+
+    .container > * {
+      display: block;
+    }
+    .big   .alignEnd    { margin-left: 32px; }
+    .small .alignEnd    { margin-left: -6px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The last baseline value, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--last baseline--></div>
+  </div>
+  <div class="small">
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--last baseline--></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-last-baseline-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-last-baseline-002.html
new file mode 100644
index 0000000000..57c738d89a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-last-baseline-002.html
@@ -0,0 +1,55 @@
+<!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 Test: Static position of abspos replaced children in a static-pos grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-img-last-baseline-002-ref.html">
+  <style>
+    .container {
+      display: grid;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 9px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 40px;
+      height: 22px;
+      grid: 3px 14px 3px / 2px 30px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      width: 2px;
+      height: 4px;
+      margin-bottom: 20px; /* to reduce overlap between overflowing images */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+    }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+  <div class="big">
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: last baseline"></div>
+  </div>
+  <div class="small">
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: last baseline"></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-last-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-last-baseline-001-ref.html
new file mode 100644
index 0000000000..d19b16591c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-last-baseline-001-ref.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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+      margin-top: 3px;
+    }
+    .big   .alignStart  { margin-left:  2px; }
+    .big   .alignCenter { margin-left:  9px; }
+    .big   .alignEnd    { margin-left: 16px; }
+    .small .alignStart  { margin-left:  0px; }
+    .small .alignCenter { margin-left: -2px; }
+    .small .alignEnd    { margin-left: -4px; }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+  <div class="big">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-last-baseline-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-last-baseline-001.html
new file mode 100644
index 0000000000..2328268a63
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-last-baseline-001.html
@@ -0,0 +1,58 @@
+<!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 Test: Static position of abspos children in a grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-last-baseline-001-ref.html">
+  <style>
+    .container {
+      display: grid;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      justify-items: center; /* To exercise 'justify-self: auto' on children */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+  <div class="big">
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-last-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-last-baseline-002-ref.html
new file mode 100644
index 0000000000..299abbae3a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-last-baseline-002-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>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+    .big   .alignEnd    { margin-left: 24px; }
+    .small .alignEnd    { margin-left: -4px; }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+  <div class="big">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-last-baseline-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-last-baseline-002.html
new file mode 100644
index 0000000000..4ae8b5de87
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-last-baseline-002.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 Test: Static position of abspos children in a static-pos grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-last-baseline-002-ref.html">
+  <style>
+    .container {
+      display: grid;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      justify-items: center; /* To exercise 'justify-self: auto' on children */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+  <div class="big">
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-001-ref.html
new file mode 100644
index 0000000000..32c9ed2751
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-001-ref.html
@@ -0,0 +1,99 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+      margin-top: 3px;
+    }
+    .big   .alignStart  { margin-left: 22px; }
+    .big   .alignCenter { margin-left: 15px; }
+    .big   .alignEnd    { margin-left:  8px; }
+    .small .alignStart  { margin-left: -4px; }
+    .small .alignCenter { margin-left: -2px; }
+    .small .alignEnd    { margin-left:  0px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignEnd"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignEnd"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-001.html
new file mode 100644
index 0000000000..3080c49453
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-001.html
@@ -0,0 +1,100 @@
+<!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 Test: Static position of abspos children in a RTL grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-rtl-001-ref.html">
+  <style>
+    .container {
+      display: grid;
+      direction: rtl;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-002-ref.html
new file mode 100644
index 0000000000..4dea2074a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-002-ref.html
@@ -0,0 +1,99 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+      margin-top: 3px;
+    }
+    .big   .alignStart  { margin-left: 22px; }
+    .big   .alignCenter { margin-left: 15px; }
+    .big   .alignEnd    { margin-left:  8px; }
+    .small .alignStart  { margin-left: -4px; }
+    .small .alignCenter { margin-left: -2px; }
+    .small .alignEnd    { margin-left:  0px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-start--></div></div>
+    <div class="container"><div class="alignStart"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignEnd"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-start--></div></div>
+    <div class="container"><div class="alignStart"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignEnd"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-002.html
new file mode 100644
index 0000000000..4c3a4a849e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-002.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>CSS Test: Static position of abspos LTR children in a RTL grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-rtl-002-ref.html">
+  <style>
+    .container {
+      display: grid;
+      direction: rtl;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      direction: ltr;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-003-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-003-ref.html
new file mode 100644
index 0000000000..602d0a51b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-003-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>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+    .big   .alignStart  { margin-left: 24px; }
+    .big   .alignCenter { margin-left: 12px; }
+    .big   .alignEnd    { margin-left:  0px; }
+    .small .alignStart  { margin-left: -4px; }
+    .small .alignCenter { margin-left: -2px; }
+    .small .alignEnd    { margin-left:  0px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignEnd"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignEnd"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-003.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-003.html
new file mode 100644
index 0000000000..f27bb62c04
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-003.html
@@ -0,0 +1,99 @@
+<!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 Test: Static position of abspos children in a RTL static-pos grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-rtl-003-ref.html">
+  <style>
+    .container {
+      display: grid;
+      direction: rtl;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-004-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-004-ref.html
new file mode 100644
index 0000000000..ebf46d7626
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-004-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>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+    .big   .alignStart  { margin-left: 24px; }
+    .big   .alignCenter { margin-left: 12px; }
+    .big   .alignEnd    { margin-left:  0px; }
+    .small .alignStart  { margin-left: -4px; }
+    .small .alignCenter { margin-left: -2px; }
+    .small .alignEnd    { margin-left:  0px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-start--></div></div>
+    <div class="container"><div class="alignStart"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignEnd"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-start--></div></div>
+    <div class="container"><div class="alignStart"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignEnd"><!--left--></div></div>
+    <div class="container"><div class="alignStart"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-004.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-004.html
new file mode 100644
index 0000000000..a8647bbe87
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-004.html
@@ -0,0 +1,100 @@
+<!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 Test: Static position of abspos LTR children in a RTL static-pos grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-rtl-004-ref.html">
+  <style>
+    .container {
+      display: grid;
+      direction: rtl;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      direction: ltr;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-001-ref.html
new file mode 100644
index 0000000000..d051371aaa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-001-ref.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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+      margin-top: 3px;
+    }
+    .big   .alignStart  { margin-left: 22px; }
+    .big   .alignCenter { margin-left: 15px; }
+    .big   .alignEnd    { margin-left:  8px; }
+    .small .alignStart  { margin-left: -4px; }
+    .small .alignCenter { margin-left: -2px; }
+    .small .alignEnd    { margin-left:  0px; }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+  <div class="big">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-001.html
new file mode 100644
index 0000000000..1f2be10532
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-001.html
@@ -0,0 +1,58 @@
+<!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 Test: Static position of abspos children in a RTL grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-rtl-last-baseline-001-ref.html">
+  <style>
+    .container {
+      display: grid;
+      direction: rtl;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+  <div class="big">
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-002-ref.html
new file mode 100644
index 0000000000..d051371aaa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-002-ref.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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+      margin-top: 3px;
+    }
+    .big   .alignStart  { margin-left: 22px; }
+    .big   .alignCenter { margin-left: 15px; }
+    .big   .alignEnd    { margin-left:  8px; }
+    .small .alignStart  { margin-left: -4px; }
+    .small .alignCenter { margin-left: -2px; }
+    .small .alignEnd    { margin-left:  0px; }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+  <div class="big">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-002.html
new file mode 100644
index 0000000000..519c96f27b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-002.html
@@ -0,0 +1,59 @@
+<!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 Test: Static position of abspos LTR children in a RTL grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-rtl-last-baseline-002-ref.html">
+  <style>
+    .container {
+      display: grid;
+      direction: rtl;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      direction: ltr;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+  <div class="big">
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-003-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-003-ref.html
new file mode 100644
index 0000000000..c70533d399
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-003-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>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+    .big   .alignEnd    { margin-left:  0px; }
+    .small .alignEnd    { margin-left:  0px; }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+  <div class="big">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-003.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-003.html
new file mode 100644
index 0000000000..90af5052cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-003.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 Test: Static position of abspos children in a RTL static-pos grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-rtl-last-baseline-003-ref.html">
+  <style>
+    .container {
+      display: grid;
+      direction: rtl;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+  <div class="big">
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-004-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-004-ref.html
new file mode 100644
index 0000000000..c70533d399
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-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>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+    }
+    .small > .container {
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+    .big   .alignEnd    { margin-left:  0px; }
+    .small .alignEnd    { margin-left:  0px; }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+  <div class="big">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-004.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-004.html
new file mode 100644
index 0000000000..66df456e7b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-004.html
@@ -0,0 +1,58 @@
+<!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 Test: Static position of abspos LTR children in a RTL static-pos grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-rtl-last-baseline-004-ref.html">
+  <style>
+    .container {
+      display: grid;
+      direction: rtl;
+      padding: 2px 1px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      width: 30px;
+      height: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      width: 2px;
+      height: 4px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      position: absolute;
+      direction: ltr;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+  <div class="big">
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-001-ref.html
new file mode 100644
index 0000000000..1914d557a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-001-ref.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>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+      margin-top: 3px;
+    }
+    .big   > .container > * { margin-left: 11px; }
+    .small > .container > * { margin-left: -7px; }
+
+    .big   .alignStart  { margin-top:  2px; }
+    .big   .alignCenter { margin-top:  9px; }
+    .big   .alignEnd    { margin-top: 16px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -2px; }
+    .small .alignEnd    { margin-top: -4px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-001.html
new file mode 100644
index 0000000000..ef5af105f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-001.html
@@ -0,0 +1,99 @@
+<!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 Test: Static position of abspos children in a vertical-rl grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-001-ref.html">
+  <style>
+    .container {
+      display: grid;
+      writing-mode: vertical-rl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-002-ref.html
new file mode 100644
index 0000000000..1914d557a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-002-ref.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>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+      margin-top: 3px;
+    }
+    .big   > .container > * { margin-left: 11px; }
+    .small > .container > * { margin-left: -7px; }
+
+    .big   .alignStart  { margin-top:  2px; }
+    .big   .alignCenter { margin-top:  9px; }
+    .big   .alignEnd    { margin-top: 16px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -2px; }
+    .small .alignEnd    { margin-top: -4px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-002.html
new file mode 100644
index 0000000000..bed8a0a75c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-002.html
@@ -0,0 +1,100 @@
+<!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 Test: Static position of abspos horizontal-tb children in a vertical-rl grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-002-ref.html">
+  <style>
+    .container {
+      display: grid;
+      writing-mode: vertical-rl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      writing-mode: horizontal-tb;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-003-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-003-ref.html
new file mode 100644
index 0000000000..a13d8fd959
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-003-ref.html
@@ -0,0 +1,100 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 14px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignStart  { margin-top:  0px; }
+    .big   .alignCenter { margin-top: 12px; }
+    .big   .alignEnd    { margin-top: 24px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -2px; }
+    .small .alignEnd    { margin-top: -4px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-003.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-003.html
new file mode 100644
index 0000000000..2626c49d22
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-003.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>CSS Test: Static position of abspos children in a vertical-rl static-pos grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-003-ref.html">
+  <style>
+    .container {
+      display: grid;
+      writing-mode: vertical-rl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-004-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-004-ref.html
new file mode 100644
index 0000000000..a13d8fd959
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-004-ref.html
@@ -0,0 +1,100 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 14px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignStart  { margin-top:  0px; }
+    .big   .alignCenter { margin-top: 12px; }
+    .big   .alignEnd    { margin-top: 24px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -2px; }
+    .small .alignEnd    { margin-top: -4px; }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div class="alignStart"><!--auto--></div></div>
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div class="alignCenter"><!--center--></div></div>
+    <div class="container"><div class="alignStart"><!--start--></div></div>
+    <div class="container"><div class="alignEnd"><!--end--></div></div>
+    <div class="container"><div class="alignStart"><!--self-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--self-end--></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div class="alignStart"><!--flex-start--></div></div>
+    <div class="container"><div class="alignEnd"><!--flex-end--></div></div>
+    <div class="container"><div class="alignStart"><!--left--></div></div>
+    <div class="container"><div class="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-004.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-004.html
new file mode 100644
index 0000000000..4574da3a82
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-004.html
@@ -0,0 +1,99 @@
+<!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 Test: Static position of abspos horizontal-tb children in a vertical-rl static-pos grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-004-ref.html">
+  <style>
+    .container {
+      display: grid;
+      writing-mode: vertical-rl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      writing-mode: horizontal-tb;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-self values, from
+         https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+    <!-- auto | normal | stretch -->
+    <div class="container"><div style="justify-self: auto"></div></div>
+    <div class="container"><div style="justify-self: normal"></div></div>
+    <div class="container"><div style="justify-self: stretch"></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div style="justify-self: baseline"></div></div>
+    <br>
+    <!-- <self-position>, part 1 -->
+    <div class="container"><div style="justify-self: center"></div></div>
+    <div class="container"><div style="justify-self: start"></div></div>
+    <div class="container"><div style="justify-self: end"></div></div>
+    <div class="container"><div style="justify-self: self-start"></div></div>
+    <div class="container"><div style="justify-self: self-end"></div></div>
+    <br>
+    <!-- <self-position>, part 2 -->
+    <div class="container"><div style="justify-self: flex-start"></div></div>
+    <div class="container"><div style="justify-self: flex-end"></div></div>
+    <div class="container"><div style="justify-self: left"></div></div>
+    <div class="container"><div style="justify-self: right"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-001-ref.html
new file mode 100644
index 0000000000..7857835a31
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-001-ref.html
@@ -0,0 +1,59 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+      margin-top: 3px;
+    }
+    .big   > .container > * { margin-left: 11px; }
+    .small > .container > * { margin-left: -7px; }
+
+    .big   .alignStart  { margin-top:  2px; }
+    .big   .alignCenter { margin-top:  9px; }
+    .big   .alignEnd    { margin-top: 16px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -2px; }
+    .small .alignEnd    { margin-top: -4px; }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-align-self -->
+  <div class="big">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-001.html
new file mode 100644
index 0000000000..f7ada7a8e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-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 Test: Static position of abspos children in a vertical-rl grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-last-baseline-001-ref.html">
+  <style>
+    .container {
+      display: grid;
+      writing-mode: vertical-rl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+  <div class="big">
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-002-ref.html
new file mode 100644
index 0000000000..fb1c5fda3b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-002-ref.html
@@ -0,0 +1,59 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+      margin-top: 3px;
+    }
+    .big   > .container > * { margin-left: 11px; }
+    .small > .container > * { margin-left: -7px; }
+
+    .big   .alignStart  { margin-top:  2px; }
+    .big   .alignCenter { margin-top:  9px; }
+    .big   .alignEnd    { margin-top: 16px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -2px; }
+    .small .alignEnd    { margin-top: -4px; }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+  <div class="big">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-002.html
new file mode 100644
index 0000000000..aa1303d353
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-002.html
@@ -0,0 +1,58 @@
+<!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 Test: Static position of abspos horizontal-tb children in a vertical-rl grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-last-baseline-002-ref.html">
+  <style>
+    .container {
+      display: grid;
+      writing-mode: vertical-rl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+      position: relative;
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      writing-mode: horizontal-tb;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+  <div class="big">
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-003-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-003-ref.html
new file mode 100644
index 0000000000..83b9391ef3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-003-ref.html
@@ -0,0 +1,54 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 14px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignEnd    { margin-top: 24px; }
+    .small .alignEnd    { margin-top: -4px; }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+  <div class="big">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-003.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-003.html
new file mode 100644
index 0000000000..4ab166e688
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-003.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>CSS Test: Static position of abspos children in a vertical-rl static-pos grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-last-baseline-003-ref.html">
+  <style>
+    .container {
+      display: grid;
+      writing-mode: vertical-rl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+  <div class="big">
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-004-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-004-ref.html
new file mode 100644
index 0000000000..83b9391ef3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-004-ref.html
@@ -0,0 +1,54 @@
+<!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 Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 14px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignEnd    { margin-top: 24px; }
+    .small .alignEnd    { margin-top: -4px; }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+  <div class="big">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-004.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-004.html
new file mode 100644
index 0000000000..26e7e66b0a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-004.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 Test: Static position of abspos horizontal-tb children in a vertical-rl static-pos grid container, with various "justify-self" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items">
+  <link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-last-baseline-004-ref.html">
+  <style>
+    .container {
+      display: grid;
+      writing-mode: vertical-rl;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 30px;
+      width: 22px;
+      grid: 3px 14px 3px / 2px 20px 2px;
+    }
+    .small > .container {
+      grid: 3px 2px 3px / 0px 2px 0px;
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      writing-mode: horizontal-tb;
+      grid-area: 2 / 2 / 3 / 3;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <!-- The last baseline value, from
+       https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
+  <div class="big">
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+  </div>
+  <div class="small">
+    <div class="container"><div style="justify-self: last baseline"></div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-item-absolute-positioning-dynamic-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-item-absolute-positioning-dynamic-001.html
new file mode 100644
index 0000000000..bcd5dbaab5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-item-absolute-positioning-dynamic-001.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang=en class="reftest-wait">
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid item absolute positioning dynamic</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="This test checks that a grid item which becomes an absolutelly positioned children of a grid.">
+<style>
+#wrapper {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  background: red;
+}
+
+#grid {
+  display: grid;
+  grid: 100px / 100px;
+}
+
+#item {
+  background: green;
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="wrapper">
+  <div id="grid">
+    <div id="item"></div>
+  </div>
+</div>
+
+<script>
+  window.requestAnimationFrame(() => {
+    document.getElementById("item").style.position = "absolute";
+    document.body.offsetLeft;
+    document.documentElement.classList.remove('reftest-wait');
+  });
+</script>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-paint-positioned-children-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-paint-positioned-children-001-ref.html
new file mode 100644
index 0000000000..ac2a95e796
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-paint-positioned-children-001-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid paint positioned children reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+.grid {
+  border: 2px solid black;
+  width: 100px;
+  height: 40px;
+  background: gray;
+}
+
+.abs {
+  height: 5px;
+  float: left;
+}
+
+#item {
+  width: 90px;
+  height: 30px;
+  margin-top: 10px;
+}
+</style>
+
+<p>This test passes if you see a gray box with a black border color with 5 rectangles inside. The first line contains a purple, orange, yellow and magenta boxes. Bellow them you should see a 90px cyan box.</p>
+
+<div class="grid">
+  <div class="abs" style="background: purple; width: 10px;"></div>
+  <div class="abs" style="background: orange; width: 20px;"></div>
+  <div class="abs" style="background: yellow; width: 30px;"></div>
+  <div class="abs" style="background: magenta; width: 40px;"></div>
+  <div id="item" style="background: cyan;"</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-paint-positioned-children-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-paint-positioned-children-001.html
new file mode 100644
index 0000000000..549335e49f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-paint-positioned-children-001.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid paint positioned children</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="grid-paint-positioned-children-001-ref.html">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+.grid {
+  border: 2px solid black;
+  position: relative;
+  width: 100px;
+
+  grid-template-columns: 10px 20px 30px 40px;
+
+  padding-top: 10px;
+}
+
+.abs {
+  height: 5px;
+  position: absolute;
+  width: 100%;
+}
+
+#item {
+  width: 90px;
+  height: 30px;
+}
+
+</style>
+
+<p>This test passes if you see a gray box with a black border color with 5 rectangles inside. The first line contains a purple, orange, yellow and magenta boxes. Bellow them you should see a 90px cyan box.</p>
+
+<div class="grid">
+  <div id="item" style="grid-column: 1 / -1; background: cyan;"></div>
+  <div class="abs" style="grid-column: 1 / 2; background: purple;"></div>
+  <div class="abs" style="grid-column: 2 / 3; background: orange;"></div>
+  <div class="abs" style="grid-column: 3 / 4; background: yellow;"></div>
+  <div class="abs" style="grid-column: 4 / 5; background: magenta;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-children-writing-modes-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-children-writing-modes-001-ref.html
new file mode 100644
index 0000000000..2794df263e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-children-writing-modes-001-ref.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned children writing modes reference test</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+
+.grid {
+  display: block;
+  margin: 5px;
+  width: 100px;
+  height: 75px;
+  padding: 5px 10px 15px 20px;
+  border-style: solid;
+  border-width: 5px 10px 15px 20px;
+  float: left;
+}
+
+.green {
+  background-color: green;
+  width: 30px;
+  height: 20px;
+  font: 10px/1 Ahem;
+}
+
+.verticalSize {
+  width: 20px;
+  height: 30px;
+}
+
+</style>
+
+<p>For the test to pass you should see no red and only green boxes. The black box will be positioned depending on the writing mode and text direction values.</p>
+
+<div class="grid">
+  <div class="green">XX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div class="green verticalSize">XX</div>
+</div>
+
+<div class="grid verticalLR">
+  <div class="green verticalSize">XX</div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="green">XX</div>
+</div>
+
+<div class="grid verticalRL directionRTL">
+  <div class="green verticalSize">XX</div>
+</div>
+
+<div class="grid verticalLR directionRTL">
+  <div class="green verticalSize">XX</div>
+</div>
+
+<div class="grid">
+  <div class="green">XX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div class="green verticalSize">XX</div>
+</div>
+
+<div class="grid verticalLR">
+  <div class="green verticalSize">XX</div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="green">XX</div>
+</div>
+
+<div class="grid verticalRL directionRTL">
+  <div class="green verticalSize">XX</div>
+</div>
+
+<div class="grid verticalLR directionRTL">
+  <div class="green verticalSize">XX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-children-writing-modes-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-children-writing-modes-001.html
new file mode 100644
index 0000000000..8b9df8beba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-children-writing-modes-001.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned children writing modes</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="grid-positioned-children-writing-modes-001-ref.html">
+<meta name="assert" content="This test checks the behavior of the positioned grid children in combination with the writing modes and text direction properties.">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+
+.grid {
+  margin: 5px;
+  width: 100px;
+  height: 75px;
+  grid: 20px / 30px;
+  padding: 5px 10px 15px 20px;
+  border-style: solid;
+  border-width: 5px 10px 15px 20px;
+  float: left;
+  /* Ensures that the grid container is the containing block of the grid children. */
+  position: relative;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.onlyFirstRowOnlyFirstColumn {
+  background-color: green;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+.offsets {
+  left: 0;
+  top: 0;
+}
+
+.red {
+  background-color: red;
+}
+
+</style>
+
+<p>For the test to pass you should see no red and only green boxes. The black box will be positioned depending on the writing mode and text direction values.</p>
+
+<div class="grid">
+  <div class="red"></div>
+  <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div class="red"></div>
+  <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div>
+</div>
+
+<div class="grid verticalLR">
+  <div class="red"></div>
+  <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="red"></div>
+  <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div>
+</div>
+
+<div class="grid verticalRL directionRTL">
+  <div class="red"></div>
+  <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div>
+</div>
+
+<div class="grid verticalLR directionRTL">
+  <div class="red"></div>
+  <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div>
+</div>
+
+<div class="grid">
+  <div class="red"></div>
+  <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div class="red"></div>
+  <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX</div>
+</div>
+
+<div class="grid verticalLR">
+  <div class="red"></div>
+  <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX</div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="red"></div>
+  <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX</div>
+</div>
+
+<div class="grid verticalRL directionRTL">
+  <div class="red"></div>
+  <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX</div>
+</div>
+
+<div class="grid verticalLR directionRTL">
+  <div class="red"></div>
+  <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-001.html
new file mode 100644
index 0000000000..ff0c04e24e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-001.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang=en class="reftest-wait">
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned item dynamic change</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="This test checks that positioned items can be dynamically changed.">
+<style>
+.grid {
+  display: grid;
+  grid: 50px 50px / 50px 50px;
+  position: relative;
+}
+
+.green {
+  background: green;
+}
+
+.red {
+  background: red;
+}
+
+#item {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div class="grid">
+  <div class="green"></div>
+  <div class="green"></div>
+  <div class="green"></div>
+  <div class="red"></div>
+  <div id="item" class="green"></div>
+</div>
+
+<script>
+  document.body.offsetLeft;
+
+  var item = document.getElementById("item");
+  item.style.gridColumn = "2 / 3";
+  item.style.gridRow = "2 / 3";
+
+  document.documentElement.classList.remove('reftest-wait');
+</script>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-002.html
new file mode 100644
index 0000000000..8fe117b0b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-002.html
@@ -0,0 +1,55 @@
+
+<!DOCTYPE html>
+<html lang=en class="reftest-wait">
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned item dynamic change</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="This test checks that descendant positioned items can be dynamically changed.">
+<style>
+.grid {
+  display: grid;
+  grid: 50px 50px / 50px 50px;
+  position: relative;
+}
+
+.green {
+  background: green;
+}
+
+.red {
+  background: red;
+}
+
+#item {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+  top: 0;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div class="grid">
+  <div class="green"></div>
+  <div class="green">
+    <div id="item" class="green"></div>
+  </div>
+  <div class="green"></div>
+  <div class="red"></div>
+</div>
+
+<script>
+  document.body.offsetLeft;
+
+  var item = document.getElementById("item");
+  item.style.gridColumn = "2 / 3";
+  item.style.gridRow = "2 / 3";
+
+  document.documentElement.classList.remove('reftest-wait');
+</script>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-003.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-003.html
new file mode 100644
index 0000000000..c28f7ccc2c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-003.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang=en class="reftest-wait">
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned item dynamic change.</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="This test checks that positioned items can be dynamically assigned.">
+<style>
+.grid {
+  display: inline-grid;
+  grid: 100px / 100px;
+  background-color: red;
+}
+
+#item {
+  width: 100px;
+  height: 100px;
+  background-color: green;
+}
+</style>
+
+<body onload=updatePositionType()>
+
+  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+  <div class="grid">
+    <div id="item"></div>
+  </div>
+
+</body>
+
+<script>
+  function updatePositionType() {
+    document.body.offsetLeft;
+
+    var item = document.getElementById("item");
+    item.style.position= "absolute";
+
+    document.documentElement.classList.remove('reftest-wait');
+  }
+</script>
+
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-004-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-004-ref.html
new file mode 100644
index 0000000000..985e8f8525
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-004-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned item dynamic change.</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos">
+<style>
+#grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  position: relative;
+  border: solid;
+  grid-template: 50px 50px / 50px 50px;
+}
+
+#abspos {
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  grid-area: 2 / 2 / 2 / 2;
+  width: 20px;
+  height: 20px;
+  background: lime;
+}
+</style>
+
+<body>
+
+  <p>Test passes if it matches the reference.</p>
+
+  <div id="grid">
+    <div id="abspos"></div>
+  </div>
+
+</body>
+
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-004.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-004.html
new file mode 100644
index 0000000000..87dd679890
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-004.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang=en class="reftest-wait">
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned item dynamic change.</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos">
+<link rel="match" href="grid-positioned-item-dynamic-change-004-ref.html">
+<meta name="assert" content="This test checks that positioned items can be dynamically changed.">
+<style>
+#grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  position: relative;
+  border: solid;
+  grid-template: 50px 50px / 50px 50px;
+}
+
+#abspos {
+  position: absolute;
+  top: 0px;
+  left: 10px;
+  grid-area: 2 / 2 / 2 / 2;
+  width: 20px;
+  height: 20px;
+  background: lime;
+}
+</style>
+
+<body onload=updatePosition()>
+
+  <p>Test passes if it matches the reference.</p>
+
+  <div id="grid">
+    <div id="abspos"></div>
+  </div>
+
+</body>
+
+<script>
+  function updatePosition() {
+    document.body.offsetTop;
+
+    document.getElementById('abspos').style.top = '15px';
+    document.getElementById('abspos').style.left = '15px';
+
+    document.documentElement.classList.remove('reftest-wait');
+  }
+</script>
+
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-005-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-005-ref.html
new file mode 100644
index 0000000000..22efed2e03
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-005-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned item dynamic change.</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos">
+<style>
+  #grid {
+    display: inline-grid;
+    grid-template-columns: 50px 50px;
+    grid-template-rows: 50px 50px;
+    background-color: blue;
+  }
+  #child {
+    grid-area: 2 / 2 / 2 / 2;
+    width: 50px;
+    height: 50px;
+    background-color: green;
+  }
+  #grandchild {
+    width: 25px;
+    height: 25px;
+    background-color: red;
+  }
+</style>
+
+<body>
+
+  <p>Test passes if it matches the reference.</p>
+
+  <div id="grid">
+    <div id="child">
+      <div id="grandchild"></div>
+    </div>
+  </div>
+
+</body>
+
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-005.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-005.html
new file mode 100644
index 0000000000..e943391d2c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-005.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang=en class="reftest-wait">
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned item dynamic change.</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos">
+<link rel="match" href="grid-positioned-item-dynamic-change-005-ref.html">
+<meta name="assert" content="This test checks that positioned items can be dynamically changed.">
+<style>
+  #grid {
+    display: inline-grid;
+    grid-template-columns: 50px 50px;
+    grid-template-rows: 50px 50px;
+    background-color: blue;
+    position: relative;
+  }
+  #child {
+    grid-area: 2 / 2 / 2 / 2;
+    width: 100%;
+    height: 100%;
+    background-color: green;
+    position: absolute;
+  }
+  #grandchild {
+    width: 50%;
+    height: 50%;
+    background-color: red;
+  }
+</style>
+
+  <body onload=updateConstraints()>
+
+  <p>Test passes if it matches the reference.</p>
+
+  <div id="grid">
+    <div id="child">
+      <marquee id="grandchild"></marquee>
+    </div>
+  </div>
+
+</body>
+
+<script>
+  function updateConstraints() {
+    document.body.offsetTop;
+
+    document.getElementById('child').style.bottom = '0';
+    document.getElementById('child').style.left = '0';
+    document.getElementById('child').style.contain = 'strict';
+
+    document.documentElement.classList.remove('reftest-wait');
+  }
+</script>
+
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-006-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-006-ref.html
new file mode 100644
index 0000000000..0c65e560a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-006-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned item dynamic change.</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos">
+<style>
+.reference {
+  display: grid;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+</style>
+<body>
+<p>Test passes if it matches the reference.</p>
+<div class="reference">
+</div>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-006.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-006.html
new file mode 100644
index 0000000000..ee1581e2e1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-006.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned item dynamic change.</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos">
+<link rel="match" href="grid-positioned-item-dynamic-change-006-ref.html">
+<meta name="assert" content="This test checks that positioned items update upon dynamic changes.">
+<style>
+.absolute {
+  background: green;
+  position: absolute;
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+</style>
+<body>
+<p>Test passes if it matches the reference.</p>
+<div style="display: grid; position: relative; width: 100px;">
+  <div style="background: green;">
+    <div id="target"></div>
+  </div>
+  <div style="background: red; height: 25px;"></div>
+  <div class="absolute"></div>
+</div>
+<script>
+document.body.offsetTop;
+document.getElementById('target').style.height = '75px';
+document.documentElement.classList.remove('reftest-wait');
+</script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-007-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-007-ref.html
new file mode 100644
index 0000000000..84e5c2e325
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-007-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned item dynamic change</title>
+<link rel="author" title="Filipp Riabchun" href="mailto:talpa@yandex.ru">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="This test checks that positioned items react to grid track size changes.">
+<style>
+.green {
+  background: green;
+  width: 100px;
+  height: 50px;
+  margin-bottom: 8px;
+}
+
+.blue {
+  border: 3px solid blue;
+  box-sizing: border-box;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+
+</style>
+
+<p>Test passes if there is a filled green rectangle on top and a green square with blue border on bottom.</p>
+
+<div class="green"></div>
+<div class="blue"></div>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-007.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-007.html
new file mode 100644
index 0000000000..3c5f227dd0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-007.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang=en class="reftest-wait">
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned item dynamic change</title>
+<link rel="author" title="Filipp Riabchun" href="mailto:talpa@yandex.ru">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="grid-positioned-item-dynamic-change-007-ref.html">
+<meta name="assert" content="This test checks that positioned items react to grid track size changes.">
+<style>
+.grid {
+  display: inline-grid;
+  grid-gap: 8px;
+  position: relative;
+}
+
+.green {
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+
+.blue {
+  position: absolute;
+  border: 3px solid blue;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  box-sizing: border-box;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+</style>
+
+<p>Test passes if there is a filled green rectangle on top and a green square with blue border on bottom.</p>
+
+<div class="grid">
+  <div class="green" id="item"></div>
+  <div class="green"></div>
+  <div class="blue"></div>
+</div>
+
+<script>
+  document.body.offsetLeft;
+
+  var item = document.getElementById("item");
+  item.style.height = '50px';
+
+  document.documentElement.classList.remove('reftest-wait');
+</script>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-001.html
new file mode 100644
index 0000000000..8d26215060
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned items in auto-fit tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat" title="7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit">
+<meta name="assert" content="This test checks that positioned items don't avoid auto-fit tracks to collapse.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+.container {
+  width: 200px;
+}
+.grid {
+  position: relative;
+  grid: 10px / repeat(auto-fit, 30px);
+}
+span {
+  background: blue;
+}
+.abs {
+  position: absolute;
+  top:0; right:0; bottom:0; left:0;
+  background: pink;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+<div id="log"></div>
+<br>
+<div class="container">
+    <div class="grid">
+        <span style="grid-column: 1 / 5" class="abs" data-expected-width="30" data-expected-height="10"></span>
+        <span style="grid-column: 1" data-expected-width="30" data-expected-height="10"></span>
+    </div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-002.html
new file mode 100644
index 0000000000..c44474962f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-002.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned items in auto-fit tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat" title="7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit">
+<meta name="assert" content="This test checks tracks before the first in-flow item also collapse and positioned items don't have any impact.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+.container {
+  width: 200px;
+}
+.grid {
+  position: relative;
+  grid: 10px / repeat(auto-fit, 30px);
+}
+span {
+  background: blue;
+}
+.abs {
+  position: absolute;
+  top:0; right:0; bottom:0; left:0;
+  background: pink;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+<div id="log"></div>
+<br>
+<div class="container">
+    <div class="grid">
+        <span style="grid-column: 1 / 5" class="abs" data-expected-width="30" data-expected-height="10"></span>
+        <span style="grid-column: 2" data-expected-width="30" data-expected-height="10"></span>
+    </div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-003.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-003.html
new file mode 100644
index 0000000000..cdfb84c0bf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-003.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned items in auto-fit tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat" title="7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit">
+<meta name="assert" content="This test checks that positioned items will use the area defined by the in-flow items, ignoring any collapsed track.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+.container {
+  width: 200px;
+}
+.grid {
+  position: relative;
+  grid: 10px / repeat(auto-fit, 30px);
+}
+span {
+  background: blue;
+}
+.abs {
+  position: absolute;
+  top:0; right:0; bottom:0; left:0;
+  background: pink;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+<div id="log"></div>
+<br>
+<div class="container">
+    <div class="grid">
+        <span style="grid-column: 1 / 5" class="abs" data-expected-width="60" data-expected-height="10"></span>
+        <span style="grid-column: 2 / 4" data-expected-width="60" data-expected-height="10"></span>
+    </div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-004.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-004.html
new file mode 100644
index 0000000000..56e81c2cd2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-004.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned items in auto-fit tracks and gaps</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat" title="7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit">
+<meta name="assert" content="This test checks that positioned items ignore collapsed gaps.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+.container {
+  width: 200px;
+}
+.grid {
+  position: relative;
+  grid: 10px / repeat(auto-fit, 30px);
+  grid-gap: 5px;
+}
+span {
+  background: blue;
+}
+.abs {
+  position: absolute;
+  top:0; right:0; bottom:0; left:0;
+  background: pink;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+<div id="log"></div>
+<br>
+<div class="container">
+    <div class="grid">
+        <span style="grid-column: 1 / 5" class="abs" data-expected-width="30" data-expected-height="10"></span>
+        <span style="grid-column: 1" data-expected-width="30" data-expected-height="10"></span>
+    </div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-005.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-005.html
new file mode 100644
index 0000000000..c0dd121741
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-005.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned items in auto-fit tracks and gaps</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat" title="7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit">
+<meta name="assert" content="This test checks that positioned items ignore collapsed gaps, both before and after the first in-flow item .">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+.container {
+  width: 200px;
+}
+.grid {
+  position: relative;
+  grid: 10px / repeat(auto-fit, 30px);
+  grid-gap: 5px;
+}
+span {
+  background: blue;
+}
+.abs {
+  position: absolute;
+  top:0; right:0; bottom:0; left:0;
+  background: pink;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+<div id="log"></div>
+<br>
+<div class="container">
+    <div class="grid">
+        <span style="grid-column: 1 / 5" class="abs" data-expected-width="30" data-expected-height="10"></span>
+        <span style="grid-column: 2" data-expected-width="30" data-expected-height="10"></span>
+    </div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-006.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-006.html
new file mode 100644
index 0000000000..3cd46f475b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-006.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned items in auto-fit tracks and gaps</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat" title="7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit">
+<meta name="assert" content="This test checks that positioned items ignore collapsed gaps but consider those between in-flow items inside their grid area.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+.container {
+  width: 200px;
+}
+.grid {
+  position: relative;
+  grid: 10px / repeat(auto-fit, 30px);
+  grid-gap: 5px;
+}
+span {
+  background: blue;
+}
+.abs {
+  position: absolute;
+  top:0; right:0; bottom:0; left:0;
+  background: pink;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+<div id="log"></div>
+<br>
+<div class="container">
+    <div class="grid">
+        <span style="grid-column: 2 / 5" class="abs" data-expected-width="65" data-expected-height="10"></span>
+        <span style="grid-column: 2 / 4" data-expected-width="65" data-expected-height="10"></span>
+    </div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-007.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-007.html
new file mode 100644
index 0000000000..32de532c38
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-007.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned items in auto-fit tracks and gaps</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat" title="7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit">
+<meta name="assert" content="This test checks that positioned items ignore collapsed gaps even with non-empty tracks before and after.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+.container {
+  width: 250px;
+}
+.grid {
+  position: relative;
+  grid: 10px / repeat(auto-fit, 30px) 50px;
+  grid-gap: 5px;
+}
+span {
+  background: blue;
+}
+.abs {
+  position: absolute;
+  top:0; right:0; bottom:0; left:0;
+  background: pink;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+<div id="log"></div>
+<br>
+<div class="container">
+    <div class="grid">
+        <span style="grid-column: 2 / 5" class="abs" data-expected-width="65" data-expected-height="10"></span>
+        <span style="grid-column: 2 / 4" data-expected-width="65" data-expected-height="10"></span>
+    </div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-background-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-background-001-ref.html
new file mode 100644
index 0000000000..899dc98ec6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-background-001-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned items background reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+.grid {
+  width: 500px;
+  height: 300px;
+  border: 5px solid black;
+  margin: 30px;
+  padding: 15px;
+}
+
+.container {
+  position: relative;
+  float: left;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.green {
+  background-color: green;
+}
+</style>
+
+<p>The test passes if you see 4 green boxes and no red.</p>
+
+<div class="container">
+  <div class="grid"></div>
+  <div class="absolute green" style="left: 55px; top: 50px; width: 100px; height: 50px"></div>
+  <div class="absolute green" style="left: 290px; top: 50px; width: 50px; height: 20px"></div>
+  <div class="absolute green" style="left: 50px; top: 115px; width: 50px; height: 30px"></div>
+  <div class="absolute green" style="left: 175px; top: 135px; width: 145px; height: 75px"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-background-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-background-001.html
new file mode 100644
index 0000000000..f5e49fbffe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-background-001.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned items background</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="grid-positioned-items-background-001-ref.html">
+<meta name="assert" content="This test checks that the background of positioned items is painted in the right position">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+
+.grid {
+  grid-template-columns: 100px 200px;
+  grid-template-rows: 50px 150px;
+  width: 500px;
+  height: 300px;
+  border: 5px solid black;
+  margin: 30px;
+  padding: 15px;
+  /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+  position: relative;
+  background-color: transparent;
+}
+
+.container {
+  position: relative;
+  float: left;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.grid > div {
+  background-color: green;
+}
+
+.lengthSize {
+  width: 50px;
+  height: 20px;
+}
+
+.percentageSize {
+  width: 50%;
+  height: 20%;
+}
+
+.offsetsSize {
+  left: 25px;
+  right: 30px;
+  top: 35px;
+  bottom: 40px;
+}
+
+.red {
+  background-color: red;
+}
+</style>
+
+<p>The test passes if you see 4 green boxes and no red.</p>
+
+<div class="container">
+  <div class="absolute red" style="left: 55px; top: 50px; width: 100px; height: 50px"></div>
+  <div class="absolute red" style="left: 290px; top: 50px; width: 50px; height: 20px"></div>
+  <div class="absolute red" style="left: 50px; top: 115px; width: 50px; height: 30px"></div>
+  <div class="absolute red" style="left: 175px; top: 135px; width: 145px; height: 75px"></div>
+  <div class="grid">
+    <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea"
+      style="left: 5px;">
+    </div>
+    <div class="absolute onlyFirstRowOnlySecondColumn lengthSize"
+      style="right: 10px;">
+    </div>
+    <div class="absolute onlySecondRowOnlyFirstColumn percentageSize"
+      style="top: 15px;">
+    </div>
+    <div class="absolute onlySecondRowOnlySecondColumn offsetsSize"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-background-rtl-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-background-rtl-001-ref.html
new file mode 100644
index 0000000000..f57f496e3b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-background-rtl-001-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned items background RTL reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<html>
+<style>
+.grid {
+  width: 500px;
+  height: 300px;
+  border: 5px solid black;
+  margin: 30px;
+  padding: 15px;
+}
+
+.container {
+  position: relative;
+  float: left;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.green {
+  background-color: green;
+}
+</style>
+
+<p>The test passes if you see 4 green boxes and no red.</p>
+
+<div class="container">
+  <div class="grid"></div>
+  <div class="absolute green" style="left: 455px; top: 50px; width: 100px; height: 50px"></div>
+  <div class="absolute green" style="left: 390px; top: 50px; width: 50px; height: 20px"></div>
+  <div class="absolute green" style="left: 500px; top: 115px; width: 50px; height: 30px"></div>
+  <div class="absolute green" style="left: 275px; top: 135px; width: 145px; height: 75px"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-background-rtl-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-background-rtl-001.html
new file mode 100644
index 0000000000..81f4f10f5c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-background-rtl-001.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned items background RTL</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="grid-positioned-items-background-rtl-001-ref.html">
+<meta name="assert" content="This test checks that the background of positioned items is painted in the right position using RTL direction.">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+
+.grid {
+  grid-template-columns: 100px 200px;
+  grid-template-rows: 50px 150px;
+  width: 500px;
+  height: 300px;
+  border: 5px solid black;
+  margin: 30px;
+  padding: 15px;
+  /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+  position: relative;
+  background-color: transparent;
+}
+
+.container {
+  position: relative;
+  float: left;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.grid > div {
+  background-color: green;
+}
+
+.lengthSize {
+  width: 50px;
+  height: 20px;
+}
+
+.percentageSize {
+  width: 50%;
+  height: 20%;
+}
+
+.offsetsSize {
+  left: 25px;
+  right: 30px;
+  top: 35px;
+  bottom: 40px;
+}
+
+.red {
+  background-color: red;
+}
+</style>
+
+<p>The test passes if you see 4 green boxes and no red.</p>
+
+<div class="container">
+  <div class="absolute red" style="left: 455px; top: 50px; width: 100px; height: 50px"></div>
+  <div class="absolute red" style="left: 390px; top: 50px; width: 50px; height: 20px"></div>
+  <div class="absolute red" style="left: 500px; top: 115px; width: 50px; height: 30px"></div>
+  <div class="absolute red" style="left: 275px; top: 135px; width: 145px; height: 75px"></div>
+  <div class="grid directionRTL">
+    <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea"
+      style="left: 5px;">
+    </div>
+    <div class="absolute onlyFirstRowOnlySecondColumn lengthSize"
+      style="right: 10px;">
+    </div>
+    <div class="absolute onlySecondRowOnlyFirstColumn percentageSize"
+      style="top: 15px;">
+    </div>
+    <div class="absolute onlySecondRowOnlySecondColumn offsetsSize"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-content-alignment-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-content-alignment-001.html
new file mode 100644
index 0000000000..421ac91aab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-content-alignment-001.html
@@ -0,0 +1,403 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned items content alignment</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align" title="10.5. Aligning the Grid: the justify-content and align-content properties">
+<meta name="assert" content="This test checks the behavior of the positioned items in a grid using content alignment.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<style>
+
+.grid {
+  grid-template-columns: 100px 50px;
+  grid-template-rows: 70px 30px;
+  width: 400px;
+  height: 200px;
+  margin: 5px;
+  /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+  position: relative;
+}
+
+.grid > div {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: lime;
+}
+
+.offsets {
+  left: 0;
+  top: 0;
+}
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<div class="grid contentStart">
+  <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid contentStart">
+  <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid contentCenter">
+  <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
+    data-offset-x="125" data-offset-y="50" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid contentCenter">
+  <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
+    data-offset-x="125" data-offset-y="50" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid contentEnd">
+  <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
+    data-offset-x="250" data-offset-y="100" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid contentEnd">
+  <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
+    data-offset-x="250" data-offset-y="100" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid contentSpaceBetween">
+  <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid contentSpaceBetween">
+  <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid contentSpaceAround">
+  <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
+    data-offset-x="63" data-offset-y="25" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid contentSpaceAround">
+  <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
+    data-offset-x="63" data-offset-y="25" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid contentSpaceEvenly">
+  <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
+    data-offset-x="83" data-offset-y="33" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid contentSpaceEvenly">
+  <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
+    data-offset-x="83" data-offset-y="33" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid contentStart">
+  <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
+    data-offset-x="100" data-offset-y="70" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid contentStart">
+  <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
+    data-offset-x="100" data-offset-y="70" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid contentCenter">
+  <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
+    data-offset-x="225" data-offset-y="120" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid contentCenter">
+  <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
+    data-offset-x="225" data-offset-y="120" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid contentEnd">
+  <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
+    data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid contentEnd">
+  <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
+    data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid contentSpaceBetween">
+  <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
+    data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid contentSpaceBetween">
+  <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
+    data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid contentSpaceAround">
+  <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
+    data-offset-x="288" data-offset-y="145" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid contentSpaceAround">
+  <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
+    data-offset-x="288" data-offset-y="145" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid contentSpaceEvenly">
+  <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
+    data-offset-x="267" data-offset-y="137" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid contentSpaceEvenly">
+  <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
+    data-offset-x="267" data-offset-y="137" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid contentStart">
+  <div style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid contentStart">
+  <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid contentCenter">
+  <div style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="225" data-expected-height="120">
+  </div>
+</div>
+
+<div class="grid contentCenter">
+  <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="225" data-expected-height="120">
+  </div>
+</div>
+
+<div class="grid contentEnd">
+  <div style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="350" data-expected-height="170">
+  </div>
+</div>
+
+<div class="grid contentEnd">
+  <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="350" data-expected-height="170">
+  </div>
+</div>
+
+<div class="grid contentSpaceBetween">
+  <div style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid contentSpaceBetween">
+  <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid contentSpaceAround">
+  <div style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="163" data-expected-height="95">
+  </div>
+</div>
+
+<div class="grid contentSpaceAround">
+  <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="163" data-expected-height="95">
+  </div>
+</div>
+
+<div class="grid contentSpaceEvenly">
+  <div style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="183" data-expected-height="103">
+  </div>
+</div>
+
+<div class="grid contentSpaceEvenly">
+  <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="183" data-expected-height="103">
+  </div>
+</div>
+
+<div class="grid contentStart">
+  <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="100" data-offset-y="70" data-expected-width="300" data-expected-height="130">
+  </div>
+</div>
+
+<div class="grid contentStart">
+  <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="100" data-offset-y="70" data-expected-width="300" data-expected-height="130">
+  </div>
+</div>
+
+<div class="grid contentCenter">
+  <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="225" data-offset-y="120" data-expected-width="175" data-expected-height="80">
+  </div>
+</div>
+
+<div class="grid contentCenter">
+  <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="225" data-offset-y="120" data-expected-width="175" data-expected-height="80">
+  </div>
+</div>
+
+<div class="grid contentEnd">
+  <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid contentEnd">
+  <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid contentSpaceBetween">
+  <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid contentSpaceBetween">
+  <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid contentSpaceAround">
+  <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="288" data-offset-y="145" data-expected-width="112.5" data-expected-height="55">
+  </div>
+</div>
+
+<div class="grid contentSpaceAround">
+  <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="288" data-offset-y="145" data-expected-width="112.5" data-expected-height="55">
+  </div>
+</div>
+
+<div class="grid contentSpaceEvenly">
+  <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="267" data-offset-y="137" data-expected-width="133" data-expected-height="63">
+  </div>
+</div>
+
+<div class="grid contentSpaceEvenly">
+  <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="267" data-offset-y="137" data-expected-width="133" data-expected-height="63">
+  </div>
+</div>
+
+<div class="grid contentStart">
+  <div style="grid-column: auto / auto; grid-row: auto / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+  </div>
+</div>
+
+<div class="grid contentStart">
+  <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+  </div>
+</div>
+
+<div class="grid contentCenter">
+  <div style="grid-column: auto / auto; grid-row: auto / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+  </div>
+</div>
+
+<div class="grid contentCenter">
+  <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+  </div>
+</div>
+
+<div class="grid contentEnd">
+  <div style="grid-column: auto / auto; grid-row: auto / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+  </div>
+</div>
+
+<div class="grid contentEnd">
+  <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+  </div>
+</div>
+
+<div class="grid contentSpaceBetween">
+  <div style="grid-column: auto / auto; grid-row: auto / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+  </div>
+</div>
+
+<div class="grid contentSpaceBetween">
+  <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+  </div>
+</div>
+
+<div class="grid contentSpaceAround">
+  <div style="grid-column: auto / auto; grid-row: auto / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+  </div>
+</div>
+
+<div class="grid contentSpaceAround">
+  <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+  </div>
+</div>
+
+<div class="grid contentSpaceEvenly">
+  <div style="grid-column: auto / auto; grid-row: auto / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+  </div>
+</div>
+
+<div class="grid contentSpaceEvenly">
+  <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+  </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-content-alignment-rtl-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-content-alignment-rtl-001.html
new file mode 100644
index 0000000000..694d3f77c4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-content-alignment-rtl-001.html
@@ -0,0 +1,403 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned items content alignment RTL</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align" title="10.5. Aligning the Grid: the justify-content and align-content properties">
+<meta name="assert" content="This test checks the behavior of the positioned items in a grid using content alignment in RTL.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<style>
+
+.grid {
+  grid-template-columns: 100px 50px;
+  grid-template-rows: 70px 30px;
+  width: 400px;
+  height: 200px;
+  margin: 5px;
+  /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+  position: relative;
+}
+
+.grid > div {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: lime;
+}
+
+.offsets {
+  left: 0;
+  top: 0;
+}
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<div class="grid directionRTL contentStart">
+  <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
+    data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid directionRTL contentStart">
+  <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
+    data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid directionRTL contentCenter">
+  <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
+    data-offset-x="175" data-offset-y="50" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid directionRTL contentCenter">
+  <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
+    data-offset-x="175" data-offset-y="50" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid directionRTL contentEnd">
+  <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
+    data-offset-x="50" data-offset-y="100" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid directionRTL contentEnd">
+  <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
+    data-offset-x="50" data-offset-y="100" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceBetween">
+  <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
+    data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceBetween">
+  <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
+    data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceAround">
+  <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
+    data-offset-x="238" data-offset-y="25" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceAround">
+  <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
+    data-offset-x="238" data-offset-y="25" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceEvenly">
+  <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
+    data-offset-x="217" data-offset-y="33" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceEvenly">
+  <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
+    data-offset-x="217" data-offset-y="33" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid directionRTL contentStart">
+  <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
+    data-offset-x="250" data-offset-y="70" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid directionRTL contentStart">
+  <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
+    data-offset-x="250" data-offset-y="70" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid directionRTL contentCenter">
+  <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
+    data-offset-x="125" data-offset-y="120" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid directionRTL contentCenter">
+  <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
+    data-offset-x="125" data-offset-y="120" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid directionRTL contentEnd">
+  <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
+    data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid directionRTL contentEnd">
+  <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
+    data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceBetween">
+  <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
+    data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceBetween">
+  <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
+    data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceAround">
+  <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
+    data-offset-x="63" data-offset-y="145" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceAround">
+  <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
+    data-offset-x="63" data-offset-y="145" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceEvenly">
+  <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
+    data-offset-x="83" data-offset-y="137" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceEvenly">
+  <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
+    data-offset-x="83" data-offset-y="137" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid directionRTL contentStart">
+  <div style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid directionRTL contentStart">
+  <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid directionRTL contentCenter">
+  <div style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="175" data-offset-y="0" data-expected-width="225" data-expected-height="120">
+  </div>
+</div>
+
+<div class="grid directionRTL contentCenter">
+  <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="175" data-offset-y="0" data-expected-width="225" data-expected-height="120">
+  </div>
+</div>
+
+<div class="grid directionRTL contentEnd">
+  <div style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="50" data-offset-y="0" data-expected-width="350" data-expected-height="170">
+  </div>
+</div>
+
+<div class="grid directionRTL contentEnd">
+  <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="50" data-offset-y="0" data-expected-width="350" data-expected-height="170">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceBetween">
+  <div style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceBetween">
+  <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceAround">
+  <div style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="238" data-offset-y="0" data-expected-width="162.5" data-expected-height="95">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceAround">
+  <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="238" data-offset-y="0" data-expected-width="162.5" data-expected-height="95">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceEvenly">
+  <div style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="217" data-offset-y="0" data-expected-width="183" data-expected-height="103">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceEvenly">
+  <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="217" data-offset-y="0" data-expected-width="183" data-expected-height="103">
+  </div>
+</div>
+
+<div class="grid directionRTL contentStart">
+  <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="0" data-offset-y="70" data-expected-width="300" data-expected-height="130">
+  </div>
+</div>
+
+<div class="grid directionRTL contentStart">
+  <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="0" data-offset-y="70" data-expected-width="300" data-expected-height="130">
+  </div>
+</div>
+
+<div class="grid directionRTL contentCenter">
+  <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="0" data-offset-y="120" data-expected-width="175" data-expected-height="80">
+  </div>
+</div>
+
+<div class="grid directionRTL contentCenter">
+  <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="0" data-offset-y="120" data-expected-width="175" data-expected-height="80">
+  </div>
+</div>
+
+<div class="grid directionRTL contentEnd">
+  <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid directionRTL contentEnd">
+  <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceBetween">
+  <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceBetween">
+  <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceAround">
+  <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="0" data-offset-y="145" data-expected-width="113" data-expected-height="55">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceAround">
+  <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="0" data-offset-y="145" data-expected-width="113" data-expected-height="55">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceEvenly">
+  <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="0" data-offset-y="137" data-expected-width="133" data-expected-height="63">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceEvenly">
+  <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="0" data-offset-y="137" data-expected-width="133" data-expected-height="63">
+  </div>
+</div>
+
+<div class="grid directionRTL contentStart">
+  <div style="grid-column: auto / auto; grid-row: auto / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+  </div>
+</div>
+
+<div class="grid directionRTL contentStart">
+  <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+  </div>
+</div>
+
+<div class="grid directionRTL contentCenter">
+  <div style="grid-column: auto / auto; grid-row: auto / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+  </div>
+</div>
+
+<div class="grid directionRTL contentCenter">
+  <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+  </div>
+</div>
+
+<div class="grid directionRTL contentEnd">
+  <div style="grid-column: auto / auto; grid-row: auto / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+  </div>
+</div>
+
+<div class="grid directionRTL contentEnd">
+  <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceBetween">
+  <div style="grid-column: auto / auto; grid-row: auto / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceBetween">
+  <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceAround">
+  <div style="grid-column: auto / auto; grid-row: auto / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceAround">
+  <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceEvenly">
+  <div style="grid-column: auto / auto; grid-row: auto / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+  </div>
+</div>
+
+<div class="grid directionRTL contentSpaceEvenly">
+  <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200">
+  </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-001.html
new file mode 100644
index 0000000000..7fb11200d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-001.html
@@ -0,0 +1,309 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned items gaps</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#gutters" title="10.1. Gutters: the row-gap, column-gap, and gap properties">
+<meta name="assert" content="This test checks the behavior of the positioned items in a grid container with gaps.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+
+.grid {
+  grid-template-columns: 100px 100px 100px 100px;
+  grid-template-rows: 50px 50px;
+  grid-gap: 25px 50px;
+  width: 800px;
+  height: 200px;
+  border: 5px solid black;
+  margin: 30px;
+  padding: 15px;
+  /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+  position: relative;
+}
+
+.grid > div {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: lime;
+}
+
+.offsets {
+  left: 0;
+  top: 0;
+}
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<div class="grid">
+  <div style="grid-column: auto / auto; grid-row: auto / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
+  </div>
+</div>
+
+<div class="grid">
+  <div style="grid-column: 1 / auto; grid-row: 1 / auto;"
+    data-offset-x="15" data-offset-y="15" data-expected-width="815" data-expected-height="215">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="offsets" style="grid-column: 1 / auto; grid-row: 1 / auto;"
+    data-offset-x="15" data-offset-y="15" data-expected-width="815" data-expected-height="215">
+  </div>
+</div>
+
+<div class="grid">
+  <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
+    data-offset-x="15" data-offset-y="15" data-expected-width="100" data-expected-height="50">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
+    data-offset-x="15" data-offset-y="15" data-expected-width="100" data-expected-height="50">
+  </div>
+</div>
+
+<div class="grid">
+  <div style="grid-column: 1 / 3; grid-row: 1 / 3;"
+    data-offset-x="15" data-offset-y="15" data-expected-width="250" data-expected-height="125">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="offsets" style="grid-column: 1 / 3; grid-row: 1 / 3;"
+    data-offset-x="15" data-offset-y="15" data-expected-width="250" data-expected-height="125">
+  </div>
+</div>
+
+<div class="grid">
+  <div style="grid-column: 1 / 4; grid-row: 1 / 4;"
+    data-offset-x="15" data-offset-y="15" data-expected-width="400" data-expected-height="215">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="offsets" style="grid-column: 1 / 4; grid-row: 1 / 4;"
+    data-offset-x="15" data-offset-y="15" data-expected-width="400" data-expected-height="215">
+  </div>
+</div>
+
+<div class="grid">
+  <div style="grid-column: 1 / 5; grid-row: 1 / 5;"
+    data-offset-x="15" data-offset-y="15" data-expected-width="550" data-expected-height="215">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="offsets" style="grid-column: 1 / 5; grid-row: 1 / 5;"
+    data-offset-x="15" data-offset-y="15" data-expected-width="550" data-expected-height="215">
+  </div>
+</div>
+
+<div class="grid">
+  <div style="grid-column: 1 / 6; grid-row: 1 / 6;"
+    data-offset-x="15" data-offset-y="15" data-expected-width="815" data-expected-height="215">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="offsets" style="grid-column: 1 / 6; grid-row: 1 / 6;"
+    data-offset-x="15" data-offset-y="15" data-expected-width="815" data-expected-height="215">
+  </div>
+</div>
+
+<div class="grid">
+  <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="165" data-offset-y="90" data-expected-width="665" data-expected-height="140">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="165" data-offset-y="90" data-expected-width="665" data-expected-height="140">
+  </div>
+</div>
+
+<div class="grid">
+  <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
+    data-offset-x="165" data-offset-y="90" data-expected-width="100" data-expected-height="50">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
+    data-offset-x="165" data-offset-y="90" data-expected-width="100" data-expected-height="50">
+  </div>
+</div>
+
+<div class="grid">
+  <div style="grid-column: 2 / 4; grid-row: 2 / 4;"
+    data-offset-x="165" data-offset-y="90" data-expected-width="250" data-expected-height="140">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="offsets" style="grid-column: 2 / 4; grid-row: 2 / 4;"
+    data-offset-x="165" data-offset-y="90" data-expected-width="250" data-expected-height="140">
+  </div>
+</div>
+
+<div class="grid">
+  <div style="grid-column: 2 / 5; grid-row: 2 / 5;"
+    data-offset-x="165" data-offset-y="90" data-expected-width="400" data-expected-height="140">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="offsets" style="grid-column: 2 / 5; grid-row: 2 / 5;"
+    data-offset-x="165" data-offset-y="90" data-expected-width="400" data-expected-height="140">
+  </div>
+</div>
+
+<div class="grid">
+  <div style="grid-column: 2 / 6; grid-row: 2 / 6;"
+    data-offset-x="165" data-offset-y="90" data-expected-width="665" data-expected-height="140">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="offsets" style="grid-column: 2 / 6; grid-row: 2 / 6;"
+    data-offset-x="165" data-offset-y="90" data-expected-width="665" data-expected-height="140">
+  </div>
+</div>
+
+<div class="grid">
+  <div style="grid-column: 3 / auto; grid-row: 3 / auto;"
+    data-offset-x="315" data-offset-y="140" data-expected-width="515" data-expected-height="90">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="offsets" style="grid-column: 3 / auto; grid-row: 3 / auto;"
+    data-offset-x="315" data-offset-y="140" data-expected-width="515" data-expected-height="90">
+  </div>
+</div>
+
+<div class="grid">
+  <div style="grid-column: 4 / auto; grid-row: 4 / auto;"
+    data-offset-x="465" data-offset-y="0" data-expected-width="365" data-expected-height="230">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="offsets" style="grid-column: 4 / auto; grid-row: 4 / auto;"
+    data-offset-x="465" data-offset-y="0" data-expected-width="365" data-expected-height="230">
+  </div>
+</div>
+
+<div class="grid">
+  <div style="grid-column: 5 / auto; grid-row: 5 / auto;"
+    data-offset-x="565" data-offset-y="0" data-expected-width="265" data-expected-height="230">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="offsets" style="grid-column: 5 / auto; grid-row: 5 / auto;"
+    data-offset-x="565" data-offset-y="0" data-expected-width="265" data-expected-height="230">
+  </div>
+</div>
+
+<div class="grid">
+  <div style="grid-column: 6 / auto; grid-row: 6 / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="offsets" style="grid-column: 6 / auto; grid-row: 6 / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
+  </div>
+</div>
+
+<div class="grid">
+  <div style="grid-column: auto / 1; grid-row: auto / 1;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="offsets" style="grid-column: auto / 1; grid-row: auto / 1;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+  </div>
+</div>
+
+<div class="grid">
+  <div style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="115" data-expected-height="65">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="115" data-expected-height="65">
+  </div>
+</div>
+
+<div class="grid">
+  <div style="grid-column: auto / 3; grid-row: auto / 3;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="265" data-expected-height="140">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="offsets" style="grid-column: auto / 3; grid-row: auto / 3;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="265" data-expected-height="140">
+  </div>
+</div>
+
+<div class="grid">
+  <div style="grid-column: auto / 4; grid-row: auto / 4;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="415" data-expected-height="230">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="offsets" style="grid-column: auto / 4; grid-row: auto / 4;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="415" data-expected-height="230">
+  </div>
+</div>
+
+<div class="grid">
+  <div style="grid-column: auto / 5; grid-row: auto / 5;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="565" data-expected-height="230">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="offsets" style="grid-column: auto / 5; grid-row: auto / 5;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="565" data-expected-height="230">
+  </div>
+</div>
+
+<div class="grid">
+  <div style="grid-column: auto / 6; grid-row: auto / 6;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="offsets" style="grid-column: auto / 6; grid-row: auto / 6;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
+  </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-002-rtl.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-002-rtl.html
new file mode 100644
index 0000000000..9e1352b0de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-002-rtl.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned items percentage and calc() gaps</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#gutters">
+<meta name="assert" content="This test checks the behavior of the positioned items in a grid container with percentage and calc() gaps.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+
+.grid {
+  grid-template-columns: 100px 100px 100px 100px;
+  grid-template-rows: 50px 50px 50px 50px;
+  width: 800px;
+  height: 600px;
+  border: 5px solid black;
+  margin: 30px;
+  padding: 15px;
+  /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+  position: relative;
+}
+
+.grid > div {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: lime;
+}
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<div class="grid directionRTL" style="gap: 10%;">
+  <div style="grid-column: 2 / 4; grid-row: 2 / 4;"
+    data-offset-x="355" data-offset-y="125" data-expected-width="280" data-expected-height="160">
+  </div>
+</div>
+
+<div class="grid directionRTL" style="gap: calc(10% + 25px);">
+  <div style="grid-column: 2 / 4; grid-row: 2 / 4;"
+    data-offset-x="305" data-offset-y="150" data-expected-width="305" data-expected-height="185">
+  </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-002.html
new file mode 100644
index 0000000000..46e8801bb6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-002.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned items percentage and calc() gaps</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#gutters">
+<meta name="assert" content="This test checks the behavior of the positioned items in a grid container with percentage and calc() gaps.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+
+.grid {
+  grid-template-columns: 100px 100px 100px 100px;
+  grid-template-rows: 50px 50px 50px 50px;
+  width: 800px;
+  height: 600px;
+  border: 5px solid black;
+  margin: 30px;
+  padding: 15px;
+  /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+  position: relative;
+}
+
+.grid > div {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: lime;
+}
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<div class="grid" style="gap: 10%;">
+  <div style="grid-column: 2 / 4; grid-row: 2 / 4;"
+    data-offset-x="195" data-offset-y="125" data-expected-width="280" data-expected-height="160">
+  </div>
+</div>
+
+<div class="grid" style="gap: calc(10% + 25px);">
+  <div style="grid-column: 2 / 4; grid-row: 2 / 4;"
+    data-offset-x="220" data-offset-y="150" data-expected-width="305" data-expected-height="185">
+  </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-rtl-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-rtl-001.html
new file mode 100644
index 0000000000..8559ea583b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-rtl-001.html
@@ -0,0 +1,309 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned items gaps RTL</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#gutters" title="10.1. Gutters: the row-gap, column-gap, and gap properties">
+<meta name="assert" content="This test checks the behavior of the positioned items in a grid container with gaps in RTL.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+
+.grid {
+  grid-template-columns: 100px 100px 100px 100px;
+  grid-template-rows: 50px 50px;
+  grid-gap: 25px 50px;
+  width: 800px;
+  height: 200px;
+  border: 5px solid black;
+  margin: 30px;
+  padding: 15px;
+  /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+  position: relative;
+}
+
+.grid > div {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: lime;
+}
+
+.offsets {
+  left: 0;
+  top: 0;
+}
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<div class="grid directionRTL">
+  <div style="grid-column: auto / auto; grid-row: auto / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div style="grid-column: 1 / auto; grid-row: 1 / auto;"
+    data-offset-x="0" data-offset-y="15" data-expected-width="815" data-expected-height="215">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="offsets" style="grid-column: 1 / auto; grid-row: 1 / auto;"
+    data-offset-x="0" data-offset-y="15" data-expected-width="815" data-expected-height="215">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div style="grid-column: 1 / 2; grid-row: 1 / 2;"
+    data-offset-x="715" data-offset-y="15" data-expected-width="100" data-expected-height="50">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;"
+    data-offset-x="715" data-offset-y="15" data-expected-width="100" data-expected-height="50">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div style="grid-column: 1 / 3; grid-row: 1 / 3;"
+    data-offset-x="565" data-offset-y="15" data-expected-width="250" data-expected-height="125">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="offsets" style="grid-column: 1 / 3; grid-row: 1 / 3;"
+    data-offset-x="565" data-offset-y="15" data-expected-width="250" data-expected-height="125">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div style="grid-column: 1 / 4; grid-row: 1 / 4;"
+    data-offset-x="415" data-offset-y="15" data-expected-width="400" data-expected-height="215">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="offsets" style="grid-column: 1 / 4; grid-row: 1 / 4;"
+    data-offset-x="415" data-offset-y="15" data-expected-width="400" data-expected-height="215">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div style="grid-column: 1 / 5; grid-row: 1 / 5;"
+    data-offset-x="265" data-offset-y="15" data-expected-width="550" data-expected-height="215">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="offsets" style="grid-column: 1 / 5; grid-row: 1 / 5;"
+    data-offset-x="265" data-offset-y="15" data-expected-width="550" data-expected-height="215">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div style="grid-column: 1 / 6; grid-row: 1 / 6;"
+    data-offset-x="0" data-offset-y="15" data-expected-width="815" data-expected-height="215">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="offsets" style="grid-column: 1 / 6; grid-row: 1 / 6;"
+    data-offset-x="0" data-offset-y="15" data-expected-width="815" data-expected-height="215">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="0" data-offset-y="90" data-expected-width="665" data-expected-height="140">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="0" data-offset-y="90" data-expected-width="665" data-expected-height="140">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div style="grid-column: 2 / 3; grid-row: 2 / 3;"
+    data-offset-x="565" data-offset-y="90" data-expected-width="100" data-expected-height="50">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;"
+    data-offset-x="565" data-offset-y="90" data-expected-width="100" data-expected-height="50">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div style="grid-column: 2 / 4; grid-row: 2 / 4;"
+    data-offset-x="415" data-offset-y="90" data-expected-width="250" data-expected-height="140">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="offsets" style="grid-column: 2 / 4; grid-row: 2 / 4;"
+    data-offset-x="415" data-offset-y="90" data-expected-width="250" data-expected-height="140">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div style="grid-column: 2 / 5; grid-row: 2 / 5;"
+    data-offset-x="265" data-offset-y="90" data-expected-width="400" data-expected-height="140">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="offsets" style="grid-column: 2 / 5; grid-row: 2 / 5;"
+    data-offset-x="265" data-offset-y="90" data-expected-width="400" data-expected-height="140">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div style="grid-column: 2 / 6; grid-row: 2 / 6;"
+    data-offset-x="0" data-offset-y="90" data-expected-width="665" data-expected-height="140">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="offsets" style="grid-column: 2 / 6; grid-row: 2 / 6;"
+    data-offset-x="0" data-offset-y="90" data-expected-width="665" data-expected-height="140">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div style="grid-column: 3 / auto; grid-row: 3 / auto;"
+    data-offset-x="0" data-offset-y="140" data-expected-width="515" data-expected-height="90">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="offsets" style="grid-column: 3 / auto; grid-row: 3 / auto;"
+    data-offset-x="0" data-offset-y="140" data-expected-width="515" data-expected-height="90">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div style="grid-column: 4 / auto; grid-row: 4 / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="365" data-expected-height="230">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="offsets" style="grid-column: 4 / auto; grid-row: 4 / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="365" data-expected-height="230">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div style="grid-column: 5 / auto; grid-row: 5 / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="265" data-expected-height="230">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="offsets" style="grid-column: 5 / auto; grid-row: 5 / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="265" data-expected-height="230">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div style="grid-column: 6 / auto; grid-row: 6 / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="offsets" style="grid-column: 6 / auto; grid-row: 6 / auto;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div style="grid-column: auto / 1; grid-row: auto / 1;"
+    data-offset-x="815" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="offsets" style="grid-column: auto / 1; grid-row: auto / 1;"
+    data-offset-x="815" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="715" data-offset-y="0" data-expected-width="115" data-expected-height="65">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="715" data-offset-y="0" data-expected-width="115" data-expected-height="65">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div style="grid-column: auto / 3; grid-row: auto / 3;"
+    data-offset-x="565" data-offset-y="0" data-expected-width="265" data-expected-height="140">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="offsets" style="grid-column: auto / 3; grid-row: auto / 3;"
+    data-offset-x="565" data-offset-y="0" data-expected-width="265" data-expected-height="140">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div style="grid-column: auto / 4; grid-row: auto / 4;"
+    data-offset-x="415" data-offset-y="0" data-expected-width="415" data-expected-height="230">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="offsets" style="grid-column: auto / 4; grid-row: auto / 4;"
+    data-offset-x="415" data-offset-y="0" data-expected-width="415" data-expected-height="230">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div style="grid-column: auto / 5; grid-row: auto / 5;"
+    data-offset-x="265" data-offset-y="0" data-expected-width="565" data-expected-height="230">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="offsets" style="grid-column: auto / 5; grid-row: auto / 5;"
+    data-offset-x="265" data-offset-y="0" data-expected-width="565" data-expected-height="230">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div style="grid-column: auto / 6; grid-row: auto / 6;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="offsets" style="grid-column: auto / 6; grid-row: auto / 6;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230">
+  </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-implicit-grid-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-implicit-grid-001.html
new file mode 100644
index 0000000000..e4629fbd20
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-implicit-grid-001.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned items implicit grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#implicit-grids" title="7.5. The Implicit Grid">
+<meta name="assert" content="This test checks the behavior of the absolutely positioned grid items placed on the implicit grid.">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+
+.grid {
+  width: 200px;
+  height: 200px;
+  border: 5px solid black;
+  margin: 30px;
+  padding: 15px;
+  /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+  position: relative;
+}
+
+.grid-columns-rows {
+  grid-template-columns: 100px;
+  grid-template-rows: 50px;
+}
+
+.absolute {
+  position: absolute;
+}
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<div class="grid">
+  <div class="sizedToGridArea absolute secondRowSecondColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230">
+  </div>
+  <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230">
+  </div>
+  <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230">
+  </div>
+</div>
+
+<div class="grid grid-columns-rows">
+  <div class="sizedToGridArea absolute secondRowSecondColumn"
+    data-offset-x="115" data-offset-y="65" data-expected-width="115" data-expected-height="165">
+  </div>
+  <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230">
+  </div>
+  <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
+    data-offset-x="115" data-offset-y="65" data-expected-width="115" data-expected-height="165">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="sizedToGridArea absolute secondRowSecondColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230">
+  </div>
+  <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230">
+  </div>
+  <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230">
+  </div>
+</div>
+
+<div class="grid grid-columns-rows directionRTL">
+  <div class="sizedToGridArea absolute secondRowSecondColumn"
+    data-offset-x="0" data-offset-y="65" data-expected-width="115" data-expected-height="165">
+  </div>
+  <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230">
+  </div>
+  <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
+    data-offset-x="0" data-offset-y="65" data-expected-width="115" data-expected-height="165">
+  </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-implicit-grid-line-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-implicit-grid-line-001.html
new file mode 100644
index 0000000000..51e8ac1803
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-implicit-grid-line-001.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned items implicit grid line</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#implicit-grids" title="7.5. The Implicit Grid">
+<meta name="assert" content="This test checks that grid placement properties of absolutely positioned items using implicit grid lines are treated as 'auto'.">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+
+.grid {
+  grid-template-columns: 100px 200px;
+  grid-template-rows: 50px 150px;
+  width: 500px;
+  height: 300px;
+  border: 5px solid black;
+  margin: 30px;
+  padding: 15px;
+  /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+  position: relative;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.startImplicitLine {
+  background-color: blue;
+  grid-column: 5;
+  grid-row: 8;
+}
+
+.endImplicitLine {
+  background-color: orange;
+  grid-column: 1 / 5;
+  grid-row: 1 / 8;
+}
+
+.startImplicitLineSpan {
+  background-color: blue;
+  grid-column: span 5;
+  grid-row: span 8;
+}
+
+.endImplicitLineSpan {
+  background-color: orange;
+  grid-column: 1 / span 5;
+  grid-row: 1 / span 8;
+}
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<div class="grid">
+  <div class="absolute sizedToGridArea startImplicitLine"
+    data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="330">
+  </div>
+  <div class="absolute sizedToGridArea endImplicitLine"
+    data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="315">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="absolute sizedToGridArea startImplicitLineSpan"
+    data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="330">
+  </div>
+  <div class="absolute sizedToGridArea endImplicitLineSpan"
+    data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="315">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="absolute sizedToGridArea startImplicitLine"
+    data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="330">
+  </div>
+  <div class="absolute sizedToGridArea endImplicitLine"
+    data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="315">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="absolute sizedToGridArea startImplicitLineSpan"
+    data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="330">
+  </div>
+  <div class="absolute sizedToGridArea endImplicitLineSpan"
+    data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="315">
+  </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-padding-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-padding-001.html
new file mode 100644
index 0000000000..bfadcac7ac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-padding-001.html
@@ -0,0 +1,251 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned items padding</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="This test checks that positioned grid items can be placed directly on the padding.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+
+.grid {
+  grid-template-columns: 100px 200px;
+  grid-template-rows: 50px 150px;
+  width: 500px;
+  height: 300px;
+  border: 5px solid black;
+  margin: 30px;
+  padding: 15px;
+  /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+  position: relative;
+}
+
+.autoFit {
+  grid-template-columns: repeat(auto-fit, 100px);
+  grid-template-rows: repeat(auto-fit, 100px);
+}
+
+.absolute {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: lime;
+}
+
+.gap { grid-gap: 10px; }
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<div class="grid">
+  <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+  </div>
+  <div class="absolute" style="grid-column: 1 / 2; grid-row: auto / 1;"
+    data-offset-x="15" data-offset-y="0" data-expected-width="100" data-expected-height="15">
+  </div>
+  <div class="absolute" style="grid-column: auto / 1; grid-row: 1 / 2;"
+    data-offset-x="0" data-offset-y="15" data-expected-width="15" data-expected-height="50">
+  </div>
+  <div class="absolute" style="grid-column: 3 / auto; grid-row: 3 / auto;"
+    data-offset-x="315" data-offset-y="215" data-expected-width="215" data-expected-height="115">
+  </div>
+  <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / auto;"
+    data-offset-x="115" data-offset-y="215" data-expected-width="200" data-expected-height="115">
+  </div>
+  <div class="absolute" style="grid-column: 3 / auto; grid-row: 2 / 3;"
+    data-offset-x="315" data-offset-y="65" data-expected-width="215" data-expected-height="150">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="absolute" style="grid-column: -5 / 1; grid-row: -5 / 1;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+  </div>
+  <div class="absolute" style="grid-column: 1 / 2; grid-row: -5 / 1;"
+    data-offset-x="15" data-offset-y="0" data-expected-width="100" data-expected-height="15">
+  </div>
+  <div class="absolute" style="grid-column: -5 / 1; grid-row: 1 / 2;"
+    data-offset-x="0" data-offset-y="15" data-expected-width="15" data-expected-height="50">
+  </div>
+  <div class="absolute" style="grid-column: 3 / 5; grid-row: 3 / 5;"
+    data-offset-x="315" data-offset-y="215" data-expected-width="215" data-expected-height="115">
+  </div>
+  <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / 5;"
+    data-offset-x="115" data-offset-y="215" data-expected-width="200" data-expected-height="115">
+  </div>
+  <div class="absolute" style="grid-column: 3 / 5; grid-row: 2 / 3;"
+    data-offset-x="315" data-offset-y="65" data-expected-width="215" data-expected-height="150">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="absolute" style="grid-column: span 2 / 1; grid-row: span 2 / 1;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+  </div>
+  <div class="absolute" style="grid-column: 1 / 2; grid-row: span 2 / 1;"
+    data-offset-x="15" data-offset-y="0" data-expected-width="100" data-expected-height="15">
+  </div>
+  <div class="absolute" style="grid-column: span 2 / 1; grid-row: 1 / 2;"
+    data-offset-x="0" data-offset-y="15" data-expected-width="15" data-expected-height="50">
+  </div>
+  <div class="absolute" style="grid-column: 3 / span 2; grid-row: 3 / span 2;"
+    data-offset-x="315" data-offset-y="215" data-expected-width="215" data-expected-height="115">
+  </div>
+  <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / span 2;"
+    data-offset-x="115" data-offset-y="215" data-expected-width="200" data-expected-height="115">
+  </div>
+  <div class="absolute" style="grid-column: 3 / span 2; grid-row: 2 / 3;"
+    data-offset-x="315" data-offset-y="65" data-expected-width="215" data-expected-height="150">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="absolute" style="grid-column: foo / 1; grid-row: foo / 1;"
+    data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="315">
+  </div>
+  <div class="absolute" style="grid-column: 1 / 2; grid-row: foo / 1;"
+    data-offset-x="15" data-offset-y="15" data-expected-width="100" data-expected-height="315">
+  </div>
+  <div class="absolute" style="grid-column: foo / 1; grid-row: 1 / 2;"
+    data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="50">
+  </div>
+  <div class="absolute" style="grid-column: 3 / foo; grid-row: 3 / foo;"
+    data-offset-x="315" data-offset-y="215" data-expected-width="215" data-expected-height="115">
+  </div>
+  <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / foo;"
+    data-offset-x="115" data-offset-y="215" data-expected-width="200" data-expected-height="115">
+  </div>
+  <div class="absolute" style="grid-column: 3 / foo; grid-row: 2 / 3;"
+    data-offset-x="315" data-offset-y="65" data-expected-width="215" data-expected-height="150">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;"
+    data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+  </div>
+  <div class="absolute" style="grid-column: 1 / 2; grid-row: auto / 1;"
+    data-offset-x="415" data-offset-y="0" data-expected-width="100" data-expected-height="15">
+  </div>
+  <div class="absolute" style="grid-column: auto / 1; grid-row: 1 / 2;"
+    data-offset-x="515" data-offset-y="15" data-expected-width="15" data-expected-height="50">
+  </div>
+  <div class="absolute" style="grid-column: 3 / auto; grid-row: 3 / auto;"
+    data-offset-x="0" data-offset-y="215" data-expected-width="215" data-expected-height="115">
+  </div>
+  <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / auto;"
+    data-offset-x="215" data-offset-y="215" data-expected-width="200" data-expected-height="115">
+  </div>
+  <div class="absolute" style="grid-column: 3 / auto; grid-row: 2 / 3;"
+    data-offset-x="0" data-offset-y="65" data-expected-width="215" data-expected-height="150">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="absolute" style="grid-column: -5 / 1; grid-row: -5 / 1;"
+    data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+  </div>
+  <div class="absolute" style="grid-column: 1 / 2; grid-row: -5 / 1;"
+    data-offset-x="415" data-offset-y="0" data-expected-width="100" data-expected-height="15">
+  </div>
+  <div class="absolute" style="grid-column: -5 / 1; grid-row: 1 / 2;"
+    data-offset-x="515" data-offset-y="15" data-expected-width="15" data-expected-height="50">
+  </div>
+  <div class="absolute" style="grid-column: 3 / 5; grid-row: 3 / 5;"
+    data-offset-x="0" data-offset-y="215" data-expected-width="215" data-expected-height="115">
+  </div>
+  <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / 5;"
+    data-offset-x="215" data-offset-y="215" data-expected-width="200" data-expected-height="115">
+  </div>
+  <div class="absolute" style="grid-column: 3 / 5; grid-row: 2 / 3;"
+    data-offset-x="0" data-offset-y="65" data-expected-width="215" data-expected-height="150">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="absolute" style="grid-column: span 2 / 1; grid-row: span 2 / 1;"
+    data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+  </div>
+  <div class="absolute" style="grid-column: 1 / 2; grid-row: span 2 / 1;"
+    data-offset-x="415" data-offset-y="0" data-expected-width="100" data-expected-height="15">
+  </div>
+  <div class="absolute" style="grid-column: span 2 / 1; grid-row: 1 / 2;"
+    data-offset-x="515" data-offset-y="15" data-expected-width="15" data-expected-height="50">
+  </div>
+  <div class="absolute" style="grid-column: 3 / span 2; grid-row: 3 / span 2;"
+    data-offset-x="0" data-offset-y="215" data-expected-width="215" data-expected-height="115">
+  </div>
+  <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / span 2;"
+    data-offset-x="215" data-offset-y="215" data-expected-width="200" data-expected-height="115">
+  </div>
+  <div class="absolute" style="grid-column: 3 / span 2; grid-row: 2 / 3;"
+    data-offset-x="0" data-offset-y="65" data-expected-width="215" data-expected-height="150">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="absolute" style="grid-column: foo / 1; grid-row: foo / 1;"
+    data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="315">
+  </div>
+  <div class="absolute" style="grid-column: 1 / 2; grid-row: foo / 1;"
+    data-offset-x="415" data-offset-y="15" data-expected-width="100" data-expected-height="315">
+  </div>
+  <div class="absolute" style="grid-column: foo / 1; grid-row: 1 / 2;"
+    data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="50">
+  </div>
+  <div class="absolute" style="grid-column: 3 / foo; grid-row: 3 / foo;"
+    data-offset-x="0" data-offset-y="215" data-expected-width="215" data-expected-height="115">
+  </div>
+  <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / foo;"
+    data-offset-x="215" data-offset-y="215" data-expected-width="200" data-expected-height="115">
+  </div>
+  <div class="absolute" style="grid-column: 3 / foo; grid-row: 2 / 3;"
+    data-offset-x="0" data-offset-y="65" data-expected-width="215" data-expected-height="150">
+  </div>
+</div>
+
+<div class="grid autoFit gap">
+  <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;"
+     data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+  </div>
+  <div class="absolute" style="grid-column: -1 / auto; grid-row: -1 / auto;"
+     data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="315">
+  </div>
+</div>
+
+<div class="grid autoFit gap">
+  <div class="absolute" style="grid-column: auto / 2; grid-row: auto / 2;"
+     data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+  </div>
+  <div class="absolute" style="grid-column: -2 / auto; grid-row: -2 / auto;"
+     data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="315">
+  </div>
+</div>
+
+<div class="grid autoFit directionRTL gap">
+  <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;"
+     data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+  </div>
+  <div class="absolute" style="grid-column: -1 / auto; grid-row: -1 / auto;"
+     data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="315">
+  </div>
+</div>
+
+<div class="grid autoFit directionRTL gap">
+  <div class="absolute" style="grid-column: auto / 2; grid-row: auto / 2;"
+     data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15">
+  </div>
+  <div class="absolute" style="grid-column: -2 / auto; grid-row: -2 / auto;"
+     data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="315">
+  </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-unknown-named-grid-line-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-unknown-named-grid-line-001.html
new file mode 100644
index 0000000000..7c95993eb5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-unknown-named-grid-line-001.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned items unknown named grid line</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="This test checks that grid placement properties of absolutely positioned items can reference implicit grid lines.">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+
+.grid {
+  grid-template-columns: 100px 200px;
+  grid-template-rows: 50px 150px;
+  width: 500px;
+  height: 300px;
+  border: 5px solid black;
+  margin: 30px;
+  padding: 15px;
+  /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+  position: relative;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.startUnknownLine {
+  background-color: blue;
+  grid-column: foo / 3;
+  grid-row: bar / 3;
+}
+
+.endUnknownLine {
+  background-color: orange;
+  grid-column: 1 / foo;
+  grid-row: 1 / bar;
+}
+
+.startAndEndUnknownLines {
+  background-color: green;
+  grid-column: foo / bar;
+  grid-row: foo / bar;
+}
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<div class="grid">
+  <div class="absolute sizedToGridArea startAndEndUnknownLines"
+    data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="330">
+  </div>
+  <div class="absolute sizedToGridArea endUnknownLine"
+    data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="315">
+  </div>
+  <div class="absolute sizedToGridArea startUnknownLine"
+    data-offset-x="315" data-offset-y="215" data-expected-width="215" data-expected-height="115">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="absolute sizedToGridArea startAndEndUnknownLines"
+    data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="330">
+  </div>
+  <div class="absolute sizedToGridArea endUnknownLine"
+    data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="315">
+  </div>
+  <div class="absolute sizedToGridArea startUnknownLine"
+    data-offset-x="0" data-offset-y="215" data-expected-width="215" data-expected-height="115">
+  </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-within-grid-implicit-track-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-within-grid-implicit-track-001.html
new file mode 100644
index 0000000000..18d2ebff01
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-within-grid-implicit-track-001.html
@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid positioned items within grid implicit track</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#implicit-grids" title="7.5. The Implicit Grid">
+<meta name="assert" content="This test checks that positioned grid items are placed properly (including implicit tracks) even if the grid has implicit tracks.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+
+.grid {
+  grid-template-columns: 200px 300px;
+  grid-template-rows: 150px 250px;
+  grid-auto-columns: 100px;
+  grid-auto-rows: 50px;
+  width: 800px;
+  height: 600px;
+  border: 5px solid black;
+  margin: 30px;
+  padding: 15px;
+  /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+  position: relative;
+}
+
+.absolute {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: cyan;
+}
+
+.sixRowsAndSixColumns {
+  background: magenta;
+  grid-row: -5 / 5;
+  grid-column: -5 / 5;
+}
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<div class="grid">
+  <div class="sixRowsAndSixColumns"
+    data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+  </div>
+  <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="215" data-expected-height="115">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="sixRowsAndSixColumns"
+    data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+  </div>
+  <div class="absolute" style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="415" data-expected-height="265">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="sixRowsAndSixColumns"
+    data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+  </div>
+  <div class="absolute" style="grid-column: 3 / auto; grid-row: 3 / auto;"
+    data-offset-x="715" data-offset-y="515" data-expected-width="115" data-expected-height="115">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="sixRowsAndSixColumns"
+    data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+  </div>
+  <div class="absolute" style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="415" data-offset-y="265" data-expected-width="415" data-expected-height="365">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="sixRowsAndSixColumns"
+    data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+  </div>
+  <div class="absolute" style="grid-column: -4 / 1; grid-row: -4 / 1;"
+    data-offset-x="115" data-offset-y="65" data-expected-width="100" data-expected-height="50">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="sixRowsAndSixColumns"
+    data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+  </div>
+  <div class="absolute" style="grid-column: -4 / 2; grid-row: -4 / 2;"
+    data-offset-x="115" data-offset-y="65" data-expected-width="300" data-expected-height="200">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="sixRowsAndSixColumns"
+    data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+  </div>
+  <div class="absolute" style="grid-column: 3 / 4; grid-row: 3 / 4;"
+    data-offset-x="715" data-offset-y="515" data-expected-width="100" data-expected-height="50">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="sixRowsAndSixColumns"
+    data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+  </div>
+  <div class="absolute" style="grid-column: 2 / 4; grid-row: 2 / 4;"
+    data-offset-x="415" data-offset-y="265" data-expected-width="400" data-expected-height="300">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="sixRowsAndSixColumns"
+    data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+  </div>
+  <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;"
+    data-offset-x="615" data-offset-y="0" data-expected-width="215" data-expected-height="115">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="sixRowsAndSixColumns"
+    data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+  </div>
+  <div class="absolute" style="grid-column: auto / 2; grid-row: auto / 2;"
+    data-offset-x="415" data-offset-y="0" data-expected-width="415" data-expected-height="265">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="sixRowsAndSixColumns"
+    data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+  </div>
+  <div class="absolute" style="grid-column: 3 / auto; grid-row: 3 / auto;"
+    data-offset-x="0" data-offset-y="515" data-expected-width="115" data-expected-height="115">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="sixRowsAndSixColumns"
+    data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+  </div>
+  <div class="absolute" style="grid-column: 2 / auto; grid-row: 2 / auto;"
+    data-offset-x="0" data-offset-y="265" data-expected-width="415" data-expected-height="365">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="sixRowsAndSixColumns"
+    data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+  </div>
+  <div class="absolute" style="grid-column: -4 / 1; grid-row: -4 / 1;"
+    data-offset-x="615" data-offset-y="65" data-expected-width="100" data-expected-height="50">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="sixRowsAndSixColumns"
+    data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+  </div>
+  <div class="absolute" style="grid-column: -4 / 2; grid-row: -4 / 2;"
+    data-offset-x="415" data-offset-y="65" data-expected-width="300" data-expected-height="200">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="sixRowsAndSixColumns"
+    data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+  </div>
+  <div class="absolute" style="grid-column: 3 / 4; grid-row: 3 / 4;"
+    data-offset-x="15" data-offset-y="515" data-expected-width="100" data-expected-height="50">
+  </div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="sixRowsAndSixColumns"
+    data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600">
+  </div>
+  <div class="absolute" style="grid-column: 2 / 4; grid-row: 2 / 4;"
+    data-offset-x="15" data-offset-y="265" data-expected-width="400" data-expected-height="300">
+  </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-sizing-positioned-items-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-sizing-positioned-items-001.html
new file mode 100644
index 0000000000..de1869c70a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-sizing-positioned-items-001.html
@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid sizing positioned items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="This test checks the different size options for absolutely positioned grid items.">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+
+.grid {
+  grid-template-columns: 100px 200px;
+  grid-template-rows: 50px 150px;
+  width: 100%;
+  height: 100%;
+  border: 5px solid black;
+  margin: 30px;
+  padding: 15px;
+  /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+  position: relative;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.lengthSize {
+  width: 50px;
+  height: 20px;
+}
+
+.percentageSize {
+  width: 50%;
+  height: 20%;
+}
+
+.offsets {
+  left: 5px;
+  right: 10px;
+  top: 15px;
+  bottom: 20px;
+}
+
+.onlyFirstRowOnlyFirstColumn {
+  background-color: blue;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+.endSecondRowEndSecondColumn {
+  background-color: orange;
+  grid-column-end: 3;
+  grid-row-end: 3;
+}
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<div class="unconstrainedContainer">
+  <div class="grid">
+    <div class="absolute autoRowAutoColumn sizedToGridArea"
+      data-offset-x="0" data-offset-y="0" data-expected-width="1030" data-expected-height="1030">
+    </div>
+    <div class="absolute secondRowSecondColumn sizedToGridArea"
+      data-offset-x="115" data-offset-y="65" data-expected-width="915" data-expected-height="965">
+    </div>
+    <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea"
+      data-offset-x="15" data-offset-y="15" data-expected-width="100" data-expected-height="50">
+    </div>
+    <div class="absolute endSecondRowEndSecondColumn sizedToGridArea"
+      data-offset-x="0" data-offset-y="0" data-expected-width="315" data-expected-height="215">
+    </div>
+  </div>
+</div>
+
+<div class="unconstrainedContainer">
+  <div class="grid">
+    <div class="absolute autoRowAutoColumn lengthSize"
+      data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="20">
+    </div>
+    <div class="absolute secondRowSecondColumn lengthSize"
+      data-offset-x="115" data-offset-y="65" data-expected-width="50" data-expected-height="20">
+    </div>
+    <div class="absolute onlyFirstRowOnlyFirstColumn lengthSize"
+      data-offset-x="15" data-offset-y="15" data-expected-width="50" data-expected-height="20">
+    </div>
+    <div class="absolute endSecondRowEndSecondColumn lengthSize"
+      data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="20">
+    </div>
+  </div>
+</div>
+
+<div class="unconstrainedContainer">
+  <div class="grid">
+    <div class="absolute autoRowAutoColumn percentageSize"
+      data-offset-x="0" data-offset-y="0" data-expected-width="515" data-expected-height="206">
+    </div>
+    <div class="absolute secondRowSecondColumn percentageSize"
+      data-offset-x="115" data-offset-y="65" data-expected-width="457.5" data-expected-height="193">
+    </div>
+    <div class="absolute onlyFirstRowOnlyFirstColumn percentageSize"
+      data-offset-x="15" data-offset-y="15" data-expected-width="50" data-expected-height="10">
+    </div>
+    <div class="absolute endSecondRowEndSecondColumn percentageSize"
+      data-offset-x="0" data-offset-y="0" data-expected-width="157.5" data-expected-height="43">
+    </div>
+  </div>
+</div>
+
+<div class="unconstrainedContainer">
+  <div class="grid">
+    <div class="absolute autoRowAutoColumn offsets"
+      data-offset-x="5" data-offset-y="15" data-expected-width="1015" data-expected-height="995">
+    </div>
+    <div class="absolute secondRowSecondColumn offsets"
+      data-offset-x="120" data-offset-y="80" data-expected-width="900" data-expected-height="930">
+    </div>
+    <div class="absolute onlyFirstRowOnlyFirstColumn offsets"
+      data-offset-x="20" data-offset-y="30" data-expected-width="85" data-expected-height="15">
+    </div>
+    <div class="absolute endSecondRowEndSecondColumn offsets"
+      data-offset-x="5" data-offset-y="15" data-expected-width="300" data-expected-height="180">
+    </div>
+  </div>
+</div>
+
+<div class="unconstrainedContainer">
+  <div class="grid directionRTL">
+    <div class="absolute autoRowAutoColumn sizedToGridArea"
+      data-offset-x="0" data-offset-y="0" data-expected-width="1030" data-expected-height="1030">
+    </div>
+    <div class="absolute secondRowSecondColumn sizedToGridArea"
+      data-offset-x="0" data-offset-y="65" data-expected-width="915" data-expected-height="965">
+    </div>
+    <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea"
+      data-offset-x="915" data-offset-y="15" data-expected-width="100" data-expected-height="50">
+    </div>
+    <div class="absolute endSecondRowEndSecondColumn sizedToGridArea"
+      data-offset-x="715" data-offset-y="0" data-expected-width="315" data-expected-height="215">
+    </div>
+  </div>
+</div>
+
+<div class="unconstrainedContainer">
+  <div class="grid directionRTL">
+    <div class="absolute autoRowAutoColumn lengthSize"
+      data-offset-x="980" data-offset-y="0" data-expected-width="50" data-expected-height="20">
+    </div>
+    <div class="absolute secondRowSecondColumn lengthSize"
+      data-offset-x="865" data-offset-y="65" data-expected-width="50" data-expected-height="20">
+    </div>
+    <div class="absolute onlyFirstRowOnlyFirstColumn lengthSize"
+      data-offset-x="965" data-offset-y="15" data-expected-width="50" data-expected-height="20">
+    </div>
+    <div class="absolute endSecondRowEndSecondColumn lengthSize"
+      data-offset-x="980" data-offset-y="0" data-expected-width="50" data-expected-height="20">
+    </div>
+  </div>
+</div>
+
+<div class="unconstrainedContainer">
+  <div class="grid directionRTL">
+    <div class="absolute autoRowAutoColumn percentageSize"
+      data-offset-x="515" data-offset-y="0" data-expected-width="515" data-expected-height="206">
+    </div>
+    <div class="absolute secondRowSecondColumn percentageSize"
+      data-offset-x="457.5" data-offset-y="65" data-expected-width="457.5" data-expected-height="193">
+    </div>
+    <div class="absolute onlyFirstRowOnlyFirstColumn percentageSize"
+      data-offset-x="965" data-offset-y="15" data-expected-width="50" data-expected-height="10">
+    </div>
+    <div class="absolute endSecondRowEndSecondColumn percentageSize"
+      data-offset-x="873" data-offset-y="0" data-expected-width="157.5" data-expected-height="43">
+    </div>
+  </div>
+</div>
+
+<div class="unconstrainedContainer">
+  <div class="grid directionRTL">
+    <div class="absolute autoRowAutoColumn offsets"
+      data-offset-x="5" data-offset-y="15" data-expected-width="1015" data-expected-height="995">
+    </div>
+    <div class="absolute secondRowSecondColumn offsets"
+      data-offset-x="5" data-offset-y="80" data-expected-width="900" data-expected-height="930">
+    </div>
+    <div class="absolute onlyFirstRowOnlyFirstColumn offsets"
+      data-offset-x="920" data-offset-y="30" data-expected-width="85" data-expected-height="15">
+    </div>
+    <div class="absolute endSecondRowEndSecondColumn offsets"
+      data-offset-x="720" data-offset-y="15" data-expected-width="300" data-expected-height="180">
+    </div>
+  </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-001.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-001.html
new file mode 100644
index 0000000000..57ac05abf0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-001.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have a static position (left/rigth and top/bottom are 'auto').">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: "auto",
+  top: "auto",
+  right: "auto",
+  bottom: "auto",
+  orthogonal: true,
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-002.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-002.html
new file mode 100644
index 0000000000..d12482dc70
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-002.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have a specific 'left' offset and a static block position (top/bottom are 'auto').">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: 25,
+  top: "auto",
+  right: "auto",
+  bottom: "auto",
+  orthogonal: true,
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-003.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-003.html
new file mode 100644
index 0000000000..7c4e8bdacb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-003.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have a specific 'top' offset and a static inline position (left/right are 'auto').">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: "auto",
+  top: 30,
+  right: "auto",
+  bottom: "auto",
+  orthogonal: true,
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-004.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-004.html
new file mode 100644
index 0000000000..a2d1c00d1f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-004.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'right' offset and a static block position (top/bottom are 'auto').">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: "auto",
+  top: "auto",
+  right: 35,
+  bottom: "auto",
+  orthogonal: true,
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-005.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-005.html
new file mode 100644
index 0000000000..2c57cda559
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-005.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'bottom' offset and a static inline position (left/right are 'auto').">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: "auto",
+  right: "auto",
+  top: "auto",
+  bottom: 40,
+  orthogonal: true,
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-006.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-006.html
new file mode 100644
index 0000000000..81a03a216d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-006.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'left' and 'top' offsets.">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: 25,
+  top: 30,
+  right: "auto",
+  bottom: "auto",
+  orthogonal: true,
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-007.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-007.html
new file mode 100644
index 0000000000..e600c310e6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-007.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'left' and 'right' offsets and a static block position (top/bottom are 'auto').">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: 25,
+  top: "auto",
+  right: 35,
+  bottom: "auto",
+  orthogonal: true,
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-008.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-008.html
new file mode 100644
index 0000000000..d30ce60313
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-008.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'left' and 'bottom' offsets.">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: 25,
+  top: "auto",
+  right: "auto",
+  bottom: 40,
+  orthogonal: true,
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-009.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-009.html
new file mode 100644
index 0000000000..a212f34b4f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-009.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'top' and 'right' offsets.">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: "auto",
+  top: 30,
+  right: 35,
+  bottom: "auto",
+  orthogonal: true,
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-010.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-010.html
new file mode 100644
index 0000000000..dbc9fe1e86
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-010.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'top' and 'bottom' offsets and a static inline position (left/right are 'auto').">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: "auto",
+  top: 30,
+  right: "auto",
+  bottom: 40,
+  orthogonal: true,
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-011.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-011.html
new file mode 100644
index 0000000000..81c6bc9eba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-011.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'right' and 'bottom' offsets.">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: "auto",
+  top: "auto",
+  right: 35,
+  bottom: 40,
+  orthogonal: true,
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-012.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-012.html
new file mode 100644
index 0000000000..3ae22bad83
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-012.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'left', 'top' and 'right' offsets.">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: 25,
+  top: 30,
+  right: 35,
+  bottom: "auto",
+  orthogonal: true,
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-013.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-013.html
new file mode 100644
index 0000000000..2c6ea3cc39
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-013.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'left', 'top' and 'bottom' offsets.">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: 25,
+  top: 30,
+  right: "auto",
+  bottom: 40,
+  orthogonal: true,
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-014.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-014.html
new file mode 100644
index 0000000000..e3b861835a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-014.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'left', 'right' and 'bottom' offsets.">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: 25,
+  top: "auto",
+  right: 35,
+  bottom: 40,
+  orthogonal: true,
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-015.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-015.html
new file mode 100644
index 0000000000..986ad02dc7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-015.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'top', 'right' and 'bottom' offsets.">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: "auto",
+  top: 30,
+  right: 35,
+  bottom: 40,
+  orthogonal: true,
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-016.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-016.html
new file mode 100644
index 0000000000..e06113bf6c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-016.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'left, 'top', 'right' and 'bottom' offsets.">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: 25,
+  top: 30,
+  right: 35,
+  bottom: 40,
+  orthogonal: true,
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-001-ref.html
new file mode 100644
index 0000000000..71baf6d14e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-001-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  place-items: start;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+}
+
+#firstItem {
+  background: magenta;
+}
+
+#secondItem {
+  background: cyan;
+}
+
+#thirdItem {
+  background: yellow;
+}
+
+#fourthItem {
+  background: lime;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-001.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-001.html
new file mode 100644
index 0000000000..54f937defd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-001.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="orthogonal-positioned-grid-items-001-ref.html">
+<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a static position (left/rigth and top/bottom are 'auto').">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+  position: absolute;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-002.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-002.html
new file mode 100644
index 0000000000..50aea16502
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-002.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="orthogonal-positioned-grid-items-001-ref.html">
+<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a specific 'left' offset and a static block position (top/bottom are 'auto').">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+  position: absolute;
+  left: 0;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-003.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-003.html
new file mode 100644
index 0000000000..4e118624b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-003.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="orthogonal-positioned-grid-items-001-ref.html">
+<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a specific 'top' offset and a static inline position (left/right are 'auto').">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+  position: absolute;
+  top: 0;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-004.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-004.html
new file mode 100644
index 0000000000..7a724092a2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-004.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="orthogonal-positioned-grid-items-001-ref.html">
+<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have specific 'left' and 'top' offsets.">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-005-ref.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-005-ref.html
new file mode 100644
index 0000000000..0a19a463a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-005-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  justify-items: end;
+  align-items: start;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+}
+
+#firstItem {
+  background: magenta;
+}
+
+#secondItem {
+  background: cyan;
+}
+
+#thirdItem {
+  background: yellow;
+}
+
+#fourthItem {
+  background: lime;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-005.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-005.html
new file mode 100644
index 0000000000..dacbc85289
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-005.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="orthogonal-positioned-grid-items-005-ref.html">
+<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a specific 'right' offset and a static block position (top/bottom are 'auto').">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+  position: absolute;
+  right: 0;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-006-ref.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-006-ref.html
new file mode 100644
index 0000000000..5de990f3e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-006-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  justify-items: start;
+  align-items: end;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+}
+
+#firstItem {
+  background: magenta;
+}
+
+#secondItem {
+  background: cyan;
+}
+
+#thirdItem {
+  background: yellow;
+}
+
+#fourthItem {
+  background: lime;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-006.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-006.html
new file mode 100644
index 0000000000..00930da298
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-006.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="orthogonal-positioned-grid-items-006-ref.html">
+<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a specific 'bottom' offset and a static inline position (left/right are 'auto').">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+  position: absolute;
+  bottom: 0;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-007-ref.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-007-ref.html
new file mode 100644
index 0000000000..ddbf86e277
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-007-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  align-items: start;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+}
+
+#firstItem {
+  background: magenta;
+}
+
+#secondItem {
+  background: cyan;
+}
+
+#thirdItem {
+  background: yellow;
+}
+
+#fourthItem {
+  background: lime;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-007.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-007.html
new file mode 100644
index 0000000000..a663f0fdb7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-007.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="orthogonal-positioned-grid-items-007-ref.html">
+<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have specific 'left' and 'right' offsets and a static block position (top/bottom are 'auto').">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+  position: absolute;
+  left: 0;
+  right: 0;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-008-ref.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-008-ref.html
new file mode 100644
index 0000000000..231e3ed95f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-008-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  justify-items: start;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+}
+
+#firstItem {
+  background: magenta;
+}
+
+#secondItem {
+  background: cyan;
+}
+
+#thirdItem {
+  background: yellow;
+}
+
+#fourthItem {
+  background: lime;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-008.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-008.html
new file mode 100644
index 0000000000..fab723d188
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-008.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="orthogonal-positioned-grid-items-008-ref.html">
+<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have specific 'top' and 'bottom' offsets and a static inline position (left/right are 'auto').">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-009-ref.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-009-ref.html
new file mode 100644
index 0000000000..b7b881a609
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-009-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+}
+
+#firstItem {
+  background: magenta;
+}
+
+#secondItem {
+  background: cyan;
+}
+
+#thirdItem {
+  background: yellow;
+}
+
+#fourthItem {
+  background: lime;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-009.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-009.html
new file mode 100644
index 0000000000..dd1849e988
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-009.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="orthogonal-positioned-grid-items-009-ref.html">
+<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have specific 'left, 'right', 'top' and 'bottom' offsets.">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-010.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-010.html
new file mode 100644
index 0000000000..b1d5353770
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-010.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="orthogonal-positioned-grid-items-009-ref.html">
+<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a static position (left/rigth and top/bottom are 'auto') and a specific size.">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-011-ref.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-011-ref.html
new file mode 100644
index 0000000000..7b7ce4848a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-011-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  place-items: start;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+  margin-left: 10px;
+}
+
+#firstItem {
+  background: magenta;
+}
+
+#secondItem {
+  background: cyan;
+}
+
+#thirdItem {
+  background: yellow;
+}
+
+#fourthItem {
+  background: lime;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-011.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-011.html
new file mode 100644
index 0000000000..c0772d46ab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-011.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="orthogonal-positioned-grid-items-011-ref.html">
+<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a specific 'left' offset and a static block position (top/bottom are 'auto').">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+  position: absolute;
+  left: 10px;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-012-ref.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-012-ref.html
new file mode 100644
index 0000000000..7f2828d4ab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-012-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  justify-items: end;
+  align-items: start;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+  margin-right: 5px;
+}
+
+#firstItem {
+  background: magenta;
+}
+
+#secondItem {
+  background: cyan;
+}
+
+#thirdItem {
+  background: yellow;
+}
+
+#fourthItem {
+  background: lime;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-012.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-012.html
new file mode 100644
index 0000000000..8e29b822ab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-012.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="orthogonal-positioned-grid-items-012-ref.html">
+<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a specific 'right' offset and a static block position (top/bottom are 'auto').">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+  position: absolute;
+  right: 5px;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-013-ref.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-013-ref.html
new file mode 100644
index 0000000000..b822730f32
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-013-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  align-items: start;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+  margin-left: 10px;
+  margin-right: 5px;
+}
+
+#firstItem {
+  background: magenta;
+}
+
+#secondItem {
+  background: cyan;
+}
+
+#thirdItem {
+  background: yellow;
+}
+
+#fourthItem {
+  background: lime;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-013.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-013.html
new file mode 100644
index 0000000000..b78f706fd8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-013.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="orthogonal-positioned-grid-items-013-ref.html">
+<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have specific 'left' and 'right' offsets and a static block position (top/bottom are 'auto').">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+  position: absolute;
+  left: 10px;
+  right: 5px;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-014-ref.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-014-ref.html
new file mode 100644
index 0000000000..b5062f0db1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-014-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  place-items: start;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+  margin-top: 15px;
+}
+
+#firstItem {
+  background: magenta;
+}
+
+#secondItem {
+  background: cyan;
+}
+
+#thirdItem {
+  background: yellow;
+}
+
+#fourthItem {
+  background: lime;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-014.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-014.html
new file mode 100644
index 0000000000..37d643b9e8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-014.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="orthogonal-positioned-grid-items-014-ref.html">
+<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a specific 'top' offset and a static inline position (left/right are 'auto').">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+  position: absolute;
+  top: 15px;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-015-ref.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-015-ref.html
new file mode 100644
index 0000000000..000fd63c22
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-015-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  justify-items: start;
+  align-items: end;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+  margin-bottom: 20px;
+}
+
+#firstItem {
+  background: magenta;
+}
+
+#secondItem {
+  background: cyan;
+}
+
+#thirdItem {
+  background: yellow;
+}
+
+#fourthItem {
+  background: lime;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-015.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-015.html
new file mode 100644
index 0000000000..a1da3f6f3f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-015.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="orthogonal-positioned-grid-items-015-ref.html">
+<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a specific 'bottom' offset and a static inline position (left/right are 'auto').">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+  position: absolute;
+  bottom: 20px;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-016-ref.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-016-ref.html
new file mode 100644
index 0000000000..dc1d958332
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-016-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  justify-items: start;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+  margin-top: 15px;
+  margin-bottom: 20px;
+}
+
+#firstItem {
+  background: magenta;
+}
+
+#secondItem {
+  background: cyan;
+}
+
+#thirdItem {
+  background: yellow;
+}
+
+#fourthItem {
+  background: lime;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-016.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-016.html
new file mode 100644
index 0000000000..06aedf3d2d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-016.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="orthogonal-positioned-grid-items-016-ref.html">
+<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have specific 'top' and 'bottom' offsets and a static inline position (left/right are 'auto').">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+  position: absolute;
+  top: 15px;
+  bottom: 20px;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-017-ref.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-017-ref.html
new file mode 100644
index 0000000000..66c57511b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-017-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+  margin-left: 10px;
+  margin-right: 5px;
+  margin-top: 15px;
+  margin-bottom: 20px;
+}
+
+#firstItem {
+  background: magenta;
+}
+
+#secondItem {
+  background: cyan;
+}
+
+#thirdItem {
+  background: yellow;
+}
+
+#fourthItem {
+  background: lime;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-017.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-017.html
new file mode 100644
index 0000000000..f0f91ec321
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-017.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Orthogonal positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="orthogonal-positioned-grid-items-017-ref.html">
+<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have specific 'left, 'right', 'top' and 'bottom' offsets.">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  writing-mode: vertical-lr;
+  position: absolute;
+  left: 10px;
+  right: 5px;
+  top: 15px;
+  bottom: 20px;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-001.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-001.html
new file mode 100644
index 0000000000..8583f34cab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have a static position (left/rigth and top/bottom are 'auto').">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: "auto",
+  top: "auto",
+  right: "auto",
+  bottom: "auto",
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-002.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-002.html
new file mode 100644
index 0000000000..7e6f65dba0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-002.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have a specific 'left' offset and a static block position (top/bottom are 'auto').">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: 25,
+  top: "auto",
+  right: "auto",
+  bottom: "auto",
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-003.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-003.html
new file mode 100644
index 0000000000..f0c6d4e321
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-003.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have a specific 'top' offset and a static inline position (left/right are 'auto').">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: "auto",
+  top: 30,
+  right: "auto",
+  bottom: "auto",
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-004.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-004.html
new file mode 100644
index 0000000000..2abfe22af1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-004.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'right' offset and a static block position (top/bottom are 'auto').">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: "auto",
+  top: "auto",
+  right: 35,
+  bottom: "auto",
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-005.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-005.html
new file mode 100644
index 0000000000..ad19acbf25
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-005.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'bottom' offset and a static inline position (left/right are 'auto').">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: "auto",
+  right: "auto",
+  top: "auto",
+  bottom: 40,
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-006.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-006.html
new file mode 100644
index 0000000000..f59ec88137
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-006.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'left' and 'top' offsets.">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: 25,
+  top: 30,
+  right: "auto",
+  bottom: "auto",
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-007.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-007.html
new file mode 100644
index 0000000000..46e12d46bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-007.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'left' and 'right' offsets and a static block position (top/bottom are 'auto').">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: 25,
+  top: "auto",
+  right: 35,
+  bottom: "auto",
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-008.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-008.html
new file mode 100644
index 0000000000..a8187cdb8e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-008.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'left' and 'bottom' offsets.">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: 25,
+  top: "auto",
+  right: "auto",
+  bottom: 40,
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-009.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-009.html
new file mode 100644
index 0000000000..abc7c95427
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-009.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'top' and 'right' offsets.">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: "auto",
+  top: 30,
+  right: 35,
+  bottom: "auto",
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-010.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-010.html
new file mode 100644
index 0000000000..1a56fbe864
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-010.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'top' and 'bottom' offsets and a static inline position (left/right are 'auto').">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: "auto",
+  top: 30,
+  right: "auto",
+  bottom: 40,
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-011.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-011.html
new file mode 100644
index 0000000000..759db2b372
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-011.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'right' and 'bottom' offsets.">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: "auto",
+  top: "auto",
+  right: 35,
+  bottom: 40,
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-012.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-012.html
new file mode 100644
index 0000000000..35329ca7e4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-012.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'left', 'top' and 'right' offsets.">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: 25,
+  top: 30,
+  right: 35,
+  bottom: "auto",
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-013.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-013.html
new file mode 100644
index 0000000000..5af4078b3a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-013.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'left', 'top' and 'bottom' offsets.">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: 25,
+  top: 30,
+  right: "auto",
+  bottom: 40,
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-014.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-014.html
new file mode 100644
index 0000000000..07883438d6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-014.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'left', 'right' and 'bottom' offsets.">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: 25,
+  top: "auto",
+  right: 35,
+  bottom: 40,
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-015.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-015.html
new file mode 100644
index 0000000000..08a261a818
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-015.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'top', 'right' and 'bottom' offsets.">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: "auto",
+  top: 30,
+  right: 35,
+  bottom: 40,
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-016.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-016.html
new file mode 100644
index 0000000000..f691816880
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-016.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'left, 'top', 'right' and 'bottom' offsets.">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="support/positioned-grid-descendants.css" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body>
+<div id="log"></div>
+<script type="module">
+import {runTests} from "./support/positioned-grid-descendants.js";
+runTests({
+  left: 25,
+  top: 30,
+  right: 35,
+  bottom: 40,
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-017-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-017-ref.html
new file mode 100644
index 0000000000..c3f98bba97
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-017-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants eference file</title>
+<style>
+  #grid {
+    display: inline-grid;
+    grid-template-columns: 50px 50px;
+    grid-template-rows: 50px 50px;
+    background-color: blue;
+  }
+  #child-1 {
+    grid-area: 1 / 1 / 1 / 1;
+    width: 50px;
+    height: 50px;
+    background-color: hotpink;
+  }
+  #child-2 {
+    grid-area: 2 / 2 / 2 / 2;
+    width: 50px;
+    height: 50px;
+    background-color: green;
+  }
+  #grandchild {
+    width: 25px;
+    height: 25px;
+    background-color: red;
+  }
+</style>
+
+  <p>Test passes if it matches the reference.</p>
+
+  <div id="grid">
+    <div id="child-1"></div>
+    <div id="child-2">
+      <div id="grandchild"></div>
+    </div>
+  </div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-017.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-017.html
new file mode 100644
index 0000000000..e1c23a2a0f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-017.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid descendants</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="positioned-grid-descendants-017-ref.html">
+<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized.">
+<style>
+  #grid {
+    display: inline-grid;
+    grid-template-columns: 50px 50px;
+    grid-template-rows: 50px 50px;
+    background-color: blue;
+    position: relative;
+  }
+  #child {
+    grid-area: 1 / 1 / 1 / 1;
+    background-color: hotpink;
+  }
+  #abspos {
+    grid-area: 2 / 2 / 2 / 2;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: green;
+    contain: strict;
+    position: absolute;
+  }
+  #grandchild {
+    width: 50%;
+    height: 50%;
+    background-color: red;
+  }
+</style>
+
+  <p>Test passes if it matches the reference.</p>
+
+  <div id="grid">
+    <div id="child">
+      <div id="abspos">
+        <marquee id="grandchild"></marquee>
+      </div>
+    </div>
+  </div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-001-ref.html
new file mode 100644
index 0000000000..5c01d89aeb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-001-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  place-items: start;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+}
+
+#firstItem {
+  background: magenta;
+}
+
+#secondItem {
+  background: cyan;
+}
+
+#thirdItem {
+  background: yellow;
+}
+
+#fourthItem {
+  background: lime;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-001.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-001.html
new file mode 100644
index 0000000000..48dee4bfc0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-001.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="positioned-grid-items-001-ref.html">
+<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have a static position (left/rigth and top/bottom are 'auto').">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  position: absolute;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-002.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-002.html
new file mode 100644
index 0000000000..54c40b69e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-002.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="positioned-grid-items-001-ref.html">
+<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have a specific 'left' offset and a static block position (top/bottom are 'auto').">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  position: absolute;
+  left: 0;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-003.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-003.html
new file mode 100644
index 0000000000..09583f4903
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-003.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="positioned-grid-items-001-ref.html">
+<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have a specific 'top' offset and a static inline position (left/right are 'auto').">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  position: absolute;
+  top: 0;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-004.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-004.html
new file mode 100644
index 0000000000..525fe05716
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-004.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="positioned-grid-items-001-ref.html">
+<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have specific 'left' and 'top' offsets.">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-005-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-005-ref.html
new file mode 100644
index 0000000000..31960123f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-005-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  justify-items: end;
+  align-items: start;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+}
+
+#firstItem {
+  background: magenta;
+}
+
+#secondItem {
+  background: cyan;
+}
+
+#thirdItem {
+  background: yellow;
+}
+
+#fourthItem {
+  background: lime;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-005.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-005.html
new file mode 100644
index 0000000000..9767714c04
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-005.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="positioned-grid-items-005-ref.html">
+<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have a specific 'right' offset and a static block position (top/bottom are 'auto').">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  position: absolute;
+  right: 0;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-006-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-006-ref.html
new file mode 100644
index 0000000000..a3f12bbf11
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-006-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  justify-items: start;
+  align-items: end;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+}
+
+#firstItem {
+  background: magenta;
+}
+
+#secondItem {
+  background: cyan;
+}
+
+#thirdItem {
+  background: yellow;
+}
+
+#fourthItem {
+  background: lime;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-006.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-006.html
new file mode 100644
index 0000000000..5ae2f2cd36
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-006.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="positioned-grid-items-006-ref.html">
+<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have a specific 'bottom' offset and a static inline position (left/right are 'auto').">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  position: absolute;
+  bottom: 0;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-007-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-007-ref.html
new file mode 100644
index 0000000000..7c7307cb9a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-007-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  align-items: start;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+}
+
+#firstItem {
+  background: magenta;
+}
+
+#secondItem {
+  background: cyan;
+}
+
+#thirdItem {
+  background: yellow;
+}
+
+#fourthItem {
+  background: lime;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-007.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-007.html
new file mode 100644
index 0000000000..cf17b29746
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-007.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="positioned-grid-items-007-ref.html">
+<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have specific 'left' and 'right' offsets and a static block position (top/bottom are 'auto').">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  position: absolute;
+  left: 0;
+  right: 0;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-008-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-008-ref.html
new file mode 100644
index 0000000000..c7447aa30c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-008-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  justify-items: start;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+}
+
+#firstItem {
+  background: magenta;
+}
+
+#secondItem {
+  background: cyan;
+}
+
+#thirdItem {
+  background: yellow;
+}
+
+#fourthItem {
+  background: lime;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-008.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-008.html
new file mode 100644
index 0000000000..88d9572ed7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-008.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="positioned-grid-items-008-ref.html">
+<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have specific 'top' and 'bottom' offsets and a static inline position (left/right are 'auto').">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-009-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-009-ref.html
new file mode 100644
index 0000000000..5a2bc41506
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-009-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+}
+
+#firstItem {
+  background: magenta;
+}
+
+#secondItem {
+  background: cyan;
+}
+
+#thirdItem {
+  background: yellow;
+}
+
+#fourthItem {
+  background: lime;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-009.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-009.html
new file mode 100644
index 0000000000..bdfd41d8b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-009.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="positioned-grid-items-009-ref.html">
+<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have specific 'left, 'right', 'top' and 'bottom' offsets.">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-010.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-010.html
new file mode 100644
index 0000000000..676deceb40
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-010.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="positioned-grid-items-009-ref.html">
+<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have a static position (left/rigth and top/bottom are 'auto') and a specific size.">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-011-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-011-ref.html
new file mode 100644
index 0000000000..f98381f434
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-011-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  place-items: start;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+}
+
+#grid > div {
+  margin-left: 10px;
+}
+
+#firstItem {
+  background: magenta;
+}
+
+#secondItem {
+  background: cyan;
+}
+
+#thirdItem {
+  background: yellow;
+}
+
+#fourthItem {
+  background: lime;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-011.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-011.html
new file mode 100644
index 0000000000..e13c39837e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-011.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="positioned-grid-items-011-ref.html">
+<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have a specific 'left' offset and a static block position (top/bottom are 'auto').">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  position: absolute;
+  left: 10px;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-012-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-012-ref.html
new file mode 100644
index 0000000000..eee7b3516d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-012-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  justify-items: end;
+  align-items: start;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+}
+
+#grid > div {
+  margin-right: 5px;
+}
+
+#firstItem {
+  background: magenta;
+}
+
+#secondItem {
+  background: cyan;
+}
+
+#thirdItem {
+  background: yellow;
+}
+
+#fourthItem {
+  background: lime;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-012.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-012.html
new file mode 100644
index 0000000000..c9ff571653
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-012.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="positioned-grid-items-012-ref.html">
+<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have a specific 'right' offset and a static block position (top/bottom are 'auto').">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  position: absolute;
+  right: 5px;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-013-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-013-ref.html
new file mode 100644
index 0000000000..d616e3d27a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-013-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  align-items: start;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+}
+
+#grid > div {
+  margin-left: 10px;
+  margin-right: 5px;
+}
+
+#firstItem {
+  background: magenta;
+}
+
+#secondItem {
+  background: cyan;
+}
+
+#thirdItem {
+  background: yellow;
+}
+
+#fourthItem {
+  background: lime;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-013.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-013.html
new file mode 100644
index 0000000000..2bad6861b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-013.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="positioned-grid-items-013-ref.html">
+<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have specific 'left' and 'right' offsets and a static block position (top/bottom are 'auto').">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  position: absolute;
+  left: 10px;
+  right: 5px;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-014-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-014-ref.html
new file mode 100644
index 0000000000..c950fcbfb0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-014-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  place-items: start;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+}
+
+#grid > div {
+  margin-top: 15px;
+}
+
+#firstItem {
+  background: magenta;
+}
+
+#secondItem {
+  background: cyan;
+}
+
+#thirdItem {
+  background: yellow;
+}
+
+#fourthItem {
+  background: lime;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-014.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-014.html
new file mode 100644
index 0000000000..aef497d541
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-014.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="positioned-grid-items-014-ref.html">
+<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have a specific 'top' offset and a static inline position (left/right are 'auto').">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  position: absolute;
+  top: 15px;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-015-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-015-ref.html
new file mode 100644
index 0000000000..5c6583bfa4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-015-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  justify-items: start;
+  align-items: end;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+}
+
+#grid > div {
+  margin-bottom: 20px;
+}
+
+#firstItem {
+  background: magenta;
+}
+
+#secondItem {
+  background: cyan;
+}
+
+#thirdItem {
+  background: yellow;
+}
+
+#fourthItem {
+  background: lime;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-015.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-015.html
new file mode 100644
index 0000000000..4de8be1a86
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-015.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="positioned-grid-items-015-ref.html">
+<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have a specific 'bottom' offset and a static inline position (left/right are 'auto').">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  position: absolute;
+  bottom: 20px;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-016-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-016-ref.html
new file mode 100644
index 0000000000..05e708f492
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-016-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  justify-items: start;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+}
+
+#grid > div {
+  margin-top: 15px;
+  margin-bottom: 20px;
+}
+
+#firstItem {
+  background: magenta;
+}
+
+#secondItem {
+  background: cyan;
+}
+
+#thirdItem {
+  background: yellow;
+}
+
+#fourthItem {
+  background: lime;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-016.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-016.html
new file mode 100644
index 0000000000..bc3ac50d2b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-016.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="positioned-grid-items-016-ref.html">
+<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have specific 'top' and 'bottom' offsets and a static inline position (left/right are 'auto').">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  position: absolute;
+  top: 15px;
+  bottom: 20px;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-017-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-017-ref.html
new file mode 100644
index 0000000000..2633ac41aa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-017-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+}
+
+#grid > div {
+  margin-left: 10px;
+  margin-right: 5px;
+  margin-top: 15px;
+  margin-bottom: 20px;
+}
+
+#firstItem {
+  background: magenta;
+}
+
+#secondItem {
+  background: cyan;
+}
+
+#thirdItem {
+  background: yellow;
+}
+
+#fourthItem {
+  background: lime;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-017.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-017.html
new file mode 100644
index 0000000000..115abf4971
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-017.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="positioned-grid-items-017-ref.html">
+<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have specific 'left, 'right', 'top' and 'bottom' offsets.">
+<style>
+#grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+}
+
+#grid > div {
+  position: absolute;
+  left: 10px;
+  right: 5px;
+  top: 15px;
+  bottom: 20px;
+}
+
+#firstItem {
+  background: magenta;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+#secondItem {
+  background: cyan;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+#thirdItem {
+  background: yellow;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+#fourthItem {
+  background: lime;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-018.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-018.html
new file mode 100644
index 0000000000..0c9d21642e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-018.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div style="display: grid; grid-template-columns: 200px; grid-template-rows: 200px; max-width: 100px; max-height: 100px; position: relative;">
+  <div style="background: green; position: absolute; width: 100%; height: 100%;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-019-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-019-ref.html
new file mode 100644
index 0000000000..865b3d83a2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-019-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Fixed positioned element in grid.</title>
+<style>
+
+  #grid {
+    display: inline-grid;
+    grid: 50px 50px / 50px 50px;
+    padding: 5px;
+    border: 5px solid;
+    background-color: gray;
+    margin: 50px;
+  }
+
+  #fixed {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+  }
+
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="fixed"></div>
+<div id="grid"></div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-019.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-019.html
new file mode 100644
index 0000000000..b0aeac3a1d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-019.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Fixed positioned element in grid.</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="positioned-grid-items-019-ref.html">
+<meta name="assert" content="This test checks the behavior of the fixed positioned elements with a grid container as parent.">
+<style>
+
+  #grid {
+    display: inline-grid;
+    grid: 50px 50px / 50px 50px;
+    padding: 5px;
+    border: 5px solid;
+    background-color: gray;
+    margin: 50px;
+  }
+
+  #fixed {
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+  }
+
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="fixed"></div>
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-020.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-020.html
new file mode 100644
index 0000000000..baddf0bed6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-020.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Checks that absolutely positioned items are properly placed and sized.">
+<style>
+  #grid {
+    display: grid;
+    grid-auto-columns: 9px 14px 22px;
+    width: 100px;
+    height: 100px;
+    position: relative;
+    gap: 2px;
+    background-color: green;
+  }
+
+  .absolute {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    grid-row: 1 / 2;
+    background-color: green;
+  }
+
+  #item {
+    grid-column: 5 / span 2;
+    background-color: red;
+  }
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="grid">
+  <div class="absolute" style="grid-column: 1 / 2"></div>
+  <div class="absolute" style="grid-column: 2 / 3"></div>
+  <div class="absolute" style="grid-column: 3 / 4"></div>
+  <div class="absolute" style="grid-column: 4 / 5"></div>
+  <div class="absolute" style="grid-column: 5 / 6"></div>
+  <div class="absolute" style="grid-column: 6 / 7"></div>
+  <div class="absolute" style="grid-column: 5 / 7"></div>
+  <div id="item"></div>
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-021.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-021.html
new file mode 100644
index 0000000000..1e3d89de6c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-021.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Checks that absolutely positioned items are properly placed and sized.">
+<style>
+  #grid {
+    display: grid;
+    width: 100px;
+    height: 100px;
+    position: relative;
+  }
+
+  .absolute {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    grid-row: 1 / 2;
+    background-color: green;
+  }
+
+  #item {
+    grid-column: 1 / span 3;
+    background-color: red;
+  }
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="grid">
+  <div class="absolute" style="grid-column: 1 / 2"></div>
+  <div class="absolute" style="grid-column: 2 / 3"></div>
+  <div class="absolute" style="grid-column: 3 / 4"></div>
+  <div id="item"></div>
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-022-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-022-ref.html
new file mode 100644
index 0000000000..0b2cfdac07
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-022-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items reference file</title>
+<style>
+  #grid {
+    width: 100px;
+    height: 100px;
+    background-color: blue;
+    position: relative;
+    padding: 5px;
+  }
+
+  .abspos {
+    position: absolute;
+    bottom: 0px; right: 0px;
+    background-color: hotpink;
+  }
+
+  #start {
+    top: 0px; left: 0px;
+    width: 5px;
+    height: 5px;
+  }
+
+  #end {
+    top: 5px; left: 5px;
+    width: 105px;
+    height: 105px;
+  }
+
+</style>
+
+  <p>The test passes if it has the same output than the reference.</p>
+
+  <div id="grid">
+    <div class="abspos" id="start"></div>
+    <div class="abspos" id="end"></div>
+  </div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-022.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-022.html
new file mode 100644
index 0000000000..df35b546f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-022.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="positioned-grid-items-022-ref.html">
+<meta name="assert" content="Checks that absolutely positioned grid items are properly placed in an undefined grid.">
+<style>
+  #grid {
+    display: grid;
+    width: 100px;
+    height: 100px;
+    background-color: blue;
+    position: relative;
+    padding: 5px;
+  }
+
+  .abspos {
+    position: absolute;
+    top: 0px; bottom: 0px; left: 0px; right: 0px;
+    width: 100%;
+    height: 100%;
+    background-color: hotpink;
+  }
+
+  #start {
+    grid-area: 1/1/auto/auto;
+  }
+
+  #end {
+    grid-area: auto/auto/1/1;
+  }
+
+</style>
+
+  <p>The test passes if it has the same output than the reference.</p>
+
+  <div id="grid">
+    <div class="abspos" id="start"></div>
+    <div class="abspos" id="end"></div>
+  </div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-023-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-023-ref.html
new file mode 100644
index 0000000000..c94c7694ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-023-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items reference file</title>
+<style>
+  #grid {
+    display: inline-grid;
+    grid-template-columns: 50px 50px;
+    grid-template-rows: 50px 50px;
+    background-color: blue;
+  }
+  #child {
+    grid-area: 2 / 2 / 2 / 2;
+    width: 50px;
+    height: 50px;
+    background-color: green;
+  }
+  #grandchild {
+    width: 25px;
+    height: 25px;
+    background-color: red;
+  }
+</style>
+
+  <p>Test passes if it matches the reference.</p>
+
+  <div id="grid">
+    <div id="child">
+      <div id="grandchild"></div>
+    </div>
+  </div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-023.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-023.html
new file mode 100644
index 0000000000..a30f20e33e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-023.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="positioned-grid-items-023-ref.html">
+<meta name="assert" content="Checks that absolutely positioned grid items with a strict contain attribute are properly placed in a grid.">
+<style>
+  #grid {
+    display: inline-grid;
+    grid-template-columns: 50px 50px;
+    grid-template-rows: 50px 50px;
+    background-color: blue;
+    position: relative;
+  }
+  #child {
+    grid-area: 2 / 2 / 2 / 2;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: green;
+    contain: strict;
+    position: absolute;
+  }
+  #grandchild {
+    width: 50%;
+    height: 50%;
+    background-color: red;
+  }
+</style>
+
+  <p>Test passes if it matches the reference.</p>
+
+  <div id="grid">
+    <div id="child">
+      <marquee id="grandchild"></marquee>
+    </div>
+  </div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-024.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-024.html
new file mode 100644
index 0000000000..b214787026
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-024.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Checks that absolutely positioned items are properly placed and sized.">
+<style>
+  #grid {
+    display: grid;
+    grid-template-columns: 50px 50px;
+    grid-template-rows: 50px 50px;
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    position: relative;
+  }
+
+  #grid > div {
+    background-color: green;
+  }
+
+  #abspos {
+    position: absolute;
+    margin-top: auto;
+    margin-left: auto;
+    width: 50%;
+    height: 50%;
+  }
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="grid">
+  <div style="grid-column: 2 / 3; grid-row: 1 / 2;"></div>
+  <div style="grid-column: 1 / 2; grid-row: 2 / 3;"></div>
+  <div style="grid-column: 2 / 3; grid-row: 2 / 3;"></div>
+  <div id="abspos"></div>
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-025-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-025-ref.html
new file mode 100644
index 0000000000..b9e30e4286
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-025-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Matt Woodrow" href="mwoodrow@apple.com">
+</head>
+<body>
+    <div style="background-color:blue; height: 100px; width: 50px"></div>
+    <div style="background-color:blue; height: 100px; width: 80px;
+                position: relative; top: -100px; left: 200px;"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-025.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-025.html
new file mode 100644
index 0000000000..d4c1b01a53
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-025.html
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>CSS Grid Layout Test: Positioned grid items</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos">
+<link rel="match" href="positioned-grid-items-025-ref.html">
+<meta name="assert" content="Checks that absolutely positioned items are properly placed and sized.">
+<style>
+  #grid {
+    display: grid;
+    grid-template-columns: 50px 100px;
+    height: 100px;
+    width: 150px;
+    direction: rtl;
+    padding-left: 50px;
+    padding-right: 80px;
+    position: absolute;
+  }
+
+  #grid > div {
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    position: absolute;
+    background-color: blue;
+  }
+</style>
+
+</head><body><div id="grid">
+  <div style="grid-column: auto / 1;"></div>
+  <div style="grid-column: -1 / auto;"></div>
+</div>
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-crash.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-crash.html
new file mode 100644
index 0000000000..228a6264df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-crash.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Grid Layout Test: Positioned grid items</title>
+<link rel="author" title="Manuel Rego" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=402504">
+<meta name="assert" content="Checks that positioned grid items (absolute or fixed) do not cause a crash."/>
+
+<link rel="stylesheet" href="/css/support/grid.css">
+<body>
+    <div class="grid">
+        <div style="position: absolute;"></div>
+        <div style="position: fixed;"></div>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-001-ref.html
new file mode 100644
index 0000000000..2bbc3a9513
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-001-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items reference file</title>
+<style>
+  #grid {
+    display: grid;
+    grid: 150px 100px / 200px 300px;
+    place-items: start;
+    margin: 1px 2px 3px 4px;
+    padding: 20px 15px 10px 5px;
+    border-width: 9px 3px 12px 6px;
+    border-style: solid;
+    width: 550px;
+    height: 400px;
+  }
+
+  #firstItem {
+    background: magenta;
+  }
+
+  #secondItem {
+    background: cyan;
+  }
+
+  #thirdItem {
+    background: yellow;
+  }
+
+  #fourthItem {
+    background: lime;
+  }
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-001.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-001.html
new file mode 100644
index 0000000000..f723b2486c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-001.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Absolutely positioned items with negative indices</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos">
+<link rel="match" href="positioned-grid-items-negative-indices-001-ref.html">
+<meta name="assert" content="Checks that absolutely positioned items are properly placed and sized when they have negative indices.">
+<style>
+  #grid {
+    display: grid;
+    grid: 150px 100px / 200px 300px;
+    margin: 1px 2px 3px 4px;
+    padding: 20px 15px 10px 5px;
+    border-width: 9px 3px 12px 6px;
+    border-style: solid;
+    width: 550px;
+    height: 400px;
+    position: relative;
+  }
+
+  #grid > div {
+    position: absolute;
+  }
+
+  #firstItem {
+    background: magenta;
+    grid-column: -3 / -2;
+    grid-row: -3 / -2;
+  }
+
+  #secondItem {
+    background: cyan;
+    grid-column: -2 / -1;
+    grid-row: -3 / -2;
+  }
+
+  #thirdItem {
+    background: yellow;
+    grid-column: -3 / -2;
+    grid-row: -2 / -1;
+  }
+
+  #fourthItem {
+    background: lime;
+    grid-column: -2 / -1;
+    grid-row: -2 / -1;
+  }
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+<div id="grid">
+  <div id="firstItem">First item</div>
+  <div id="secondItem">Second item</div>
+  <div id="thirdItem">Third item</div>
+  <div id="fourthItem">Fourth item</div>
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-002-ref.html
new file mode 100644
index 0000000000..a5ee066e84
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-002-ref.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Absolutely positioned items reference file</title>
+<style>
+  #grid {
+    display: grid;
+    grid: 50px 50px / 50px 50px;
+    margin: 1px 2px 3px 4px;
+    padding: 100px 100px 100px 100px;
+    border-width: 9px 3px 12px 6px;
+    border-style: solid;
+    width: 100px;
+    height: 100px;
+    position: relative;
+    background-color: gray;
+  }
+
+  #grid > div {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  #firstItem {
+    background: magenta;
+    grid-column: auto / 1;
+    grid-row: auto / 1;
+  }
+
+  #secondItem {
+    background: cyan;
+    grid-column: 3 / auto;
+    grid-row: 3 / auto;
+  }
+
+  #thirdItem {
+    background: yellow;
+    grid-column: 5 / 6;
+    grid-row: 5 / 6;
+    width: 25% !important;
+    height: 25% !important;
+  }
+
+  #fourthItem {
+    background: lime;
+    grid-column: 2 / 3;
+    grid-row: 2 / 3;
+  }
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+<div id="grid">
+  <div id="firstItem"></div>
+  <div id="secondItem"></div>
+  <div id="thirdItem"></div>
+  <div id="fourthItem"></div>
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-002.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-002.html
new file mode 100644
index 0000000000..4a023e1c62
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-002.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Absolutely positioned items with negative indices</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos">
+<link rel="match" href="positioned-grid-items-negative-indices-002-ref.html">
+<meta name="assert" content="Checks that absolutely positioned items are properly placed and sized when they have negative indices.">
+<style>
+  #grid {
+    display: grid;
+    grid: 50px 50px / 50px 50px;
+    margin: 1px 2px 3px 4px;
+    padding: 100px 100px 100px 100px;
+    border-width: 9px 3px 12px 6px;
+    border-style: solid;
+    width: 100px;
+    height: 100px;
+    position: relative;
+    background-color: gray;
+  }
+
+  #grid > div {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  #firstItem {
+    background: magenta;
+    grid-column: auto / -3;
+    grid-row: auto / -3;
+  }
+
+  #secondItem {
+    background: cyan;
+    grid-column: -1 / auto;
+    grid-row: -1 / auto;
+  }
+
+  #thirdItem {
+    background: yellow;
+    grid-column: -5 / -6;
+    grid-row: -5 / -6;
+    width: 25% !important;
+    height: 25% !important;
+  }
+
+  #fourthItem {
+    background: lime;
+    grid-column: -2 / 3;
+    grid-row: 2 / -1;
+  }
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+<div id="grid">
+  <div id="firstItem"></div>
+  <div id="secondItem"></div>
+  <div id="thirdItem"></div>
+  <div id="fourthItem"></div>
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-003-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-003-ref.html
new file mode 100644
index 0000000000..4e8e9a4314
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-003-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Absolutely positioned items with negative indices</title>
+<style>
+  #grid {
+    display: grid;
+    margin: 4px;
+    padding: 10px;
+    width: 500px;
+    height: 130px;
+    position: relative;
+  }
+
+  #firstItem {
+    grid-column: 1 / span 2;
+    background-color: hotpink;
+  }
+
+  #secondItem {
+    grid-column: 3 / span 6;
+    background-color: lightblue;
+  }
+
+</style>
+
+<p>The test passes if there are two tracks in hotpink and 6 in light blue.</p>
+<div id="grid">
+  <div id="firstItem"></div>
+  <div id="secondItem"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-003.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-003.html
new file mode 100644
index 0000000000..099dd9ca06
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-003.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Absolutely positioned items with negative indices</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos">
+<link rel="match" href="positioned-grid-items-negative-indices-003-ref.html">
+<meta name="assert" content="Checks that absolutely positioned items are properly placed and sized when they have negative indices in an undefined sized grid.">
+<style>
+  #grid {
+    display: grid;
+    margin: 4px;
+    padding: 10px;
+    width: 500px;
+    height: 130px;
+    position: relative;
+  }
+
+  #absolute {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    grid-column: -3 / span 6;
+    grid-row: 1 / 2;
+    background-color: lightblue;
+  }
+
+  #item {
+    grid-column: -5 / span 8;
+    background-color: hotpink;
+  }
+
+</style>
+
+<p>The test passes if there are two tracks in hotpink and 6 in light blue.</p>
+<div id="grid">
+  <div id="absolute"></div>
+  <div id="item"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-should-not-create-implicit-tracks-001.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-should-not-create-implicit-tracks-001.html
new file mode 100644
index 0000000000..08779ec1e0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-should-not-create-implicit-tracks-001.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items should not create implicit tracks</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="This test checks that positioned items shouldn't create implicit tracks on the grid.">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+
+.grid {
+  grid-auto-columns: 100px;
+  grid-auto-rows: 50px;
+  width: 400px;
+  height: 300px;
+  /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+  position: relative;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.seventhRowFourthColumn {
+  background-color: coral;
+  grid-column: 4;
+  grid-row: 7;
+}
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<div class="grid">
+  <div class="sizedToGridArea absolute seventhRowFourthColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="300">
+  </div>
+  <div class="autoRowAutoColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">
+  </div>
+  <div class="autoRowAutoColumn"
+    data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50">
+  </div>
+  <div class="autoRowAutoColumn"
+    data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50">
+  </div>
+  <div class="autoRowAutoColumn"
+    data-offset-x="0" data-offset-y="150" data-expected-width="100" data-expected-height="50">
+  </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-should-not-take-up-space-001.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-should-not-take-up-space-001.html
new file mode 100644
index 0000000000..bb3be69cfb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-should-not-take-up-space-001.html
@@ -0,0 +1,194 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items should not take up space</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<meta name="assert" content="This test checks that positioned items shouldn't take up space or otherwise participate in the layout of the grid.">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+
+.grid {
+  grid-template-columns: 50px 100px;
+  grid-template-rows: 50px 100px;
+  width: 150px;
+  height: 150px;
+  /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+  position: relative;
+  /* Ensures that the grid container is the containing block of the fixed positioned grid children. */
+  transform: translate(10px, 20px);
+}
+
+.absolute {
+  position: absolute;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.offsetLeft100 {
+  left: 100px;
+}
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<p>Absolutely positioned:</p>
+
+<div class="grid">
+  <div class="sizedToGridArea absolute autoRowAutoColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="150">
+  </div>
+  <div class="sizedToGridArea autoRowAutoColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft100"
+    data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150">
+  </div>
+  <div class="sizedToGridArea autoRowAutoColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="sizedToGridArea autoRowAutoColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+  </div>
+  <div class="sizedToGridArea absolute autoRowAutoColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="150">
+  </div>
+  <div class="sizedToGridArea autoRowAutoColumn"
+    data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="sizedToGridArea autoRowAutoColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+  </div>
+  <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft100"
+    data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150">
+  </div>
+  <div class="sizedToGridArea autoRowAutoColumn"
+    data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="sizedToGridArea autoRowAutoColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+  </div>
+  <div class="sizedToGridArea autoRowAutoColumn"
+    data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">
+    <div class="sizedToGridArea absolute autoRowAutoColumn"
+      data-offset-x="50" data-offset-y="0" data-expected-width="150" data-expected-height="150">
+    </div>
+  </div>
+  <div class="sizedToGridArea autoRowAutoColumn"
+    data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="sizedToGridArea autoRowAutoColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+  </div>
+  <div class="sizedToGridArea autoRowAutoColumn"
+    data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">
+    <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft100"
+      data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150">
+    </div>
+  </div>
+  <div class="sizedToGridArea autoRowAutoColumn"
+    data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">
+  </div>
+</div>
+
+<p>Fixed positioned:</p>
+
+<div class="grid">
+  <div class="sizedToGridArea fixed autoRowAutoColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="150">
+  </div>
+  <div class="sizedToGridArea autoRowAutoColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="sizedToGridArea fixed autoRowAutoColumn offsetLeft100"
+    data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150">
+  </div>
+  <div class="sizedToGridArea autoRowAutoColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="sizedToGridArea autoRowAutoColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+  </div>
+  <div class="sizedToGridArea fixed autoRowAutoColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="150">
+  </div>
+  <div class="sizedToGridArea autoRowAutoColumn"
+    data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="sizedToGridArea autoRowAutoColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+  </div>
+  <div class="sizedToGridArea fixed autoRowAutoColumn offsetLeft100"
+    data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150">
+  </div>
+  <div class="sizedToGridArea autoRowAutoColumn"
+    data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="sizedToGridArea autoRowAutoColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+  </div>
+  <div class="sizedToGridArea autoRowAutoColumn"
+    data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">
+    <div class="sizedToGridArea fixed autoRowAutoColumn"
+      data-offset-x="50" data-offset-y="0" data-expected-width="150" data-expected-height="150">
+    </div>
+  </div>
+  <div class="sizedToGridArea autoRowAutoColumn"
+    data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">
+  </div>
+</div>
+
+<div class="grid">
+  <div class="sizedToGridArea autoRowAutoColumn"
+    data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+  </div>
+  <div class="sizedToGridArea autoRowAutoColumn"
+    data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">
+    <div class="sizedToGridArea fixed autoRowAutoColumn offsetLeft100"
+      data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150">
+    </div>
+  </div>
+  <div class="sizedToGridArea autoRowAutoColumn"
+    data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">
+  </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-sizing-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-sizing-001-ref.html
new file mode 100644
index 0000000000..cd0e378e3b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-sizing-001-ref.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items sizing reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<meta name="flags" content="ahem">
+<link href="/css/support/grid.css" rel="stylesheet">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+
+.grid {
+  grid: 25px 50px / 100px 60px;
+  margin: 1px 2px 3px 4px;
+  padding: 6px 3px 9px 12px;
+  border: solid;
+  border-width: 8px 2px 4px 6px;
+  font: 10px/1 Ahem;
+  float: left;
+  inline-size: 200px;
+  block-size: 100px;
+  justify-items: start;
+  align-items: start;
+}
+
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div class="grid">
+  <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div>
+  <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div>
+  <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div>
+  <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div>
+  <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div>
+  <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div>
+  <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div>
+</div>
+
+<div class="grid verticalLR">
+  <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div>
+  <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div>
+  <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div>
+  <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div>
+</div>
+
+<div class="grid verticalLR directionRTL">
+  <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div>
+  <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div>
+  <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div>
+  <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div>
+  <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div>
+  <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div>
+  <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div>
+</div>
+
+<div class="grid verticalRL directionRTL">
+  <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div>
+  <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div>
+  <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div>
+  <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-sizing-001.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-sizing-001.html
new file mode 100644
index 0000000000..7fb303c0dd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-sizing-001.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Positioned grid items sizing</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning">
+<link rel="match" href="positioned-grid-items-sizing-001-ref.html">
+<meta name="assert" content="This test checks that the sizing of positioned grid items without specific dimensions or offsets is equivalent to the size of regular items.">
+<meta name="flags" content="ahem">
+<link href="/css/support/grid.css" rel="stylesheet">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+
+.grid {
+  grid: 25px 50px / 100px 60px;
+  margin: 1px 2px 3px 4px;
+  padding: 6px 3px 9px 12px;
+  border: solid;
+  border-width: 8px 2px 4px 6px;
+  font: 10px/1 Ahem;
+  float: left;
+  inline-size: 200px;
+  block-size: 100px;
+  /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
+  position: relative;
+}
+
+.grid > div {
+  position: absolute;
+}
+
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div class="grid">
+  <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div>
+  <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div>
+  <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div>
+  <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div>
+</div>
+
+<div class="grid directionRTL">
+  <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div>
+  <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div>
+  <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div>
+  <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div>
+</div>
+
+<div class="grid verticalLR">
+  <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div>
+  <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div>
+  <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div>
+  <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div>
+</div>
+
+<div class="grid verticalLR directionRTL">
+  <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div>
+  <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div>
+  <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div>
+  <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div>
+  <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div>
+  <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div>
+  <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div>
+</div>
+
+<div class="grid verticalRL directionRTL">
+  <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div>
+  <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div>
+  <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div>
+  <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/abspos/support/colors-8x16.png b/testing/web-platform/tests/css/css-grid/abspos/support/colors-8x16.png
new file mode 100644
index 0000000000..596fdb389d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/support/colors-8x16.png
diff --git a/testing/web-platform/tests/css/css-grid/abspos/support/positioned-grid-descendants.css b/testing/web-platform/tests/css/css-grid/abspos/support/positioned-grid-descendants.css
new file mode 100644
index 0000000000..9fa29a25ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/support/positioned-grid-descendants.css
@@ -0,0 +1,25 @@
+.grid {
+  display: grid;
+  grid: 150px 100px / 200px 300px;
+  margin: 1px 2px 3px 4px;
+  padding: 20px 15px 10px 5px;
+  border-width: 9px 3px 12px 6px;
+  border-style: solid;
+  width: 550px;
+  height: 400px;
+  position: relative;
+  font: 25px/1 Ahem;
+}
+.abspos {
+  position: absolute;
+  display: inline;
+}
+.orthogonal {
+  writing-mode: vertical-lr;
+}
+.grid > :nth-child(1) > .abspos {
+  color: cyan;
+}
+.grid > :nth-child(2) > .abspos {
+  color: yellow;
+}
diff --git a/testing/web-platform/tests/css/css-grid/abspos/support/positioned-grid-descendants.js b/testing/web-platform/tests/css/css-grid/abspos/support/positioned-grid-descendants.js
new file mode 100644
index 0000000000..d45df4bc22
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/support/positioned-grid-descendants.js
@@ -0,0 +1,73 @@
+// Track sizes, including preceding padding and following remaining space
+const colSizes = [5, 200, 300, 65];
+const rowSizes = [20, 150, 100, 160];
+
+// Calculate track positions
+const colOffsets = [0];
+const rowOffsets = [0];
+for (const size of colSizes)
+  colOffsets.push(size + colOffsets[colOffsets.length - 1]);
+for (const size of rowSizes)
+  rowOffsets.push(size + rowOffsets[rowOffsets.length - 1]);
+
+export function runTests({left, top, right, bottom, orthogonal = false}) {
+  // Iterate all pairs of grid lines, where 0 and 4 represent "auto".
+  for (let colStart = 0; colStart < 4; ++colStart)
+  for (let colEnd = colStart + 1; colEnd <= 4; ++colEnd)
+  for (let rowStart = 0; rowStart < 4; ++rowStart)
+  for (let rowEnd = rowStart + 1; rowEnd <= 4; ++rowEnd)
+  {
+    // Create a 2x2 grid with two grid items, each one containing an abspos.
+    const grid = document.createElement("div");
+    grid.className = "grid";
+    for (let i = 1; i <= 2; ++i) {
+      // Create a grid item with some content before the abspos, so that the static
+      // position is shifted 50px to the right and 25px to the bottom.
+      const gridItem = document.createElement("div");
+      gridItem.style.gridArea = `${i} / ${i}`;
+      grid.appendChild(gridItem);
+      gridItem.innerHTML = "X<br />XX";
+
+      // Create an abspos with content of 50px inline size, 25px block size.
+      const absPos = document.createElement("div");
+      gridItem.appendChild(absPos);
+      absPos.className = "abspos";
+      absPos.textContent = "XX";
+      if (orthogonal) absPos.classList.add("orthogonal");
+
+      // Let the containing block be the grid area, and set offsets.
+      Object.assign(absPos.style, {
+        gridColumnStart: colStart || "auto",
+        gridColumnEnd: colEnd % 4 || "auto",
+        gridRowStart: rowStart || "auto",
+        gridRowEnd: rowEnd % 4 || "auto",
+        left: left == "auto" ? left : left + "px",
+        top: top == "auto" ? top : top + "px",
+        right: right == "auto" ? right : right + "px",
+        bottom: bottom == "auto" ? bottom : bottom + "px",
+      });
+
+      // Calculate expected position and size.
+      const expectedWidth =
+        left == "auto" || right == "auto" ? 25 * (orthogonal ? 1 : 2) :
+        Math.max(0, colOffsets[colEnd] - colOffsets[colStart] - left - right);
+      const expectedHeight =
+        top == "auto" || bottom == "auto" ? 25 * (orthogonal ? 2 : 1) :
+        Math.max(0, rowOffsets[rowEnd] - rowOffsets[rowStart] - top - bottom);
+      const offsetX =
+        left != "auto" ? colOffsets[colStart] + left :
+        right != "auto" ? colOffsets[colEnd] - right - expectedWidth :
+        colOffsets[i] + 25*2;
+      const offsetY =
+        top != "auto" ? rowOffsets[rowStart] + top :
+        bottom != "auto" ? rowOffsets[rowEnd] - bottom - expectedHeight :
+        rowOffsets[i] + 25;
+      Object.assign(absPos.dataset, {expectedWidth, expectedHeight, offsetX, offsetY});
+    }
+    document.body.appendChild(grid);
+  }
+
+  document.fonts.ready.then(() => {
+    checkLayout(".grid");
+  });
+}
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-001.html
new file mode 100644
index 0000000000..a03ce153b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-001.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<style>
+#target {
+  display: grid;
+  grid-auto-flow: column;
+  align-items: last baseline;
+  width: 200px;
+  border: solid 3px;
+  position: relative;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(1) {
+  background: lime;
+  margin-right: 20px;
+  padding-right: 20px;
+  font-size: 20px;
+  line-height: 20px;
+  align-self: first baseline;
+  writing-mode: vertical-rl;
+}
+#target > :nth-child(2) {
+  background: hotpink;
+  font-size: 30px;
+  line-height: 30px;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(3) {
+  background: papayawhip;
+  font-size: 16px;
+  line-height: 16px;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(4) {
+  background: orange;
+  margin-left: 20px;
+  padding-left: 20px;
+  font-size: 20px;
+  line-height: 20px;
+  align-self: first baseline;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(5) {
+  background: cyan;
+  font-size: 30px;
+  line-height: 30px;
+  writing-mode: vertical-rl;
+}
+#target > :nth-child(6) {
+  background: papayawhip;
+  font-size: 16px;
+  line-height: 16px;
+  writing-mode: vertical-rl;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('#target > div')">
+
+<div id="target">
+  <div data-offset-x="120">line1<br>line2</div>
+  <div data-offset-x="105">line1<br>line2</div>
+  <div data-offset-x="126">line1<br>line2</div>
+  <div data-offset-x="20">line1<br>line2</div>
+  <div data-offset-x="35">line1<br>line2</div>
+  <div data-offset-x="42">line1<br>line2</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-002.html
new file mode 100644
index 0000000000..2b4d71756d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-002.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<style>
+#target {
+  display: grid;
+  grid-auto-flow: column;
+  align-items: last baseline;
+  width: 200px;
+  border: solid 3px;
+  position: relative;
+  writing-mode: vertical-rl;
+}
+#target > :nth-child(1) {
+  background: lime;
+  margin-right: 20px;
+  padding-right: 20px;
+  font-size: 20px;
+  line-height: 20px;
+  align-self: first baseline;
+  writing-mode: vertical-rl;
+}
+#target > :nth-child(2) {
+  background: hotpink;
+  font-size: 30px;
+  line-height: 30px;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(3) {
+  background: papayawhip;
+  font-size: 16px;
+  line-height: 16px;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(4) {
+  background: orange;
+  margin-left: 20px;
+  padding-left: 20px;
+  font-size: 20px;
+  line-height: 20px;
+  align-self: first baseline;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(5) {
+  background: cyan;
+  font-size: 30px;
+  line-height: 30px;
+  writing-mode: vertical-rl;
+}
+#target > :nth-child(6) {
+  background: papayawhip;
+  font-size: 16px;
+  line-height: 16px;
+  writing-mode: vertical-rl;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('#target > div')">
+
+<div id="target">
+  <div data-offset-x="120">line1<br>line2</div>
+  <div data-offset-x="105">line1<br>line2</div>
+  <div data-offset-x="126">line1<br>line2</div>
+  <div data-offset-x="20">line1<br>line2</div>
+  <div data-offset-x="35">line1<br>line2</div>
+  <div data-offset-x="42">line1<br>line2</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-003.html
new file mode 100644
index 0000000000..2e0c5f29f3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-003.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<style>
+#target {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-rows: 120px;
+  align-items: last baseline;
+  width: 200px;
+  border: solid 3px;
+  position: relative;
+  line-height: 0;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cornflowerblue 3px;
+  outline-offset: -3px;
+}
+#target > div {
+  flex: none;
+}
+#target > :nth-child(1) {
+  background: lime;
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  font-size: 20px;
+}
+#target > :nth-child(2) {
+  background: hotpink;
+  font-size: 30px;
+}
+#target > :nth-child(3) {
+  background: papayawhip;
+  font-size: 10px;
+  writing-mode: vertical-lr;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('#target > div')">
+
+<div id="target">
+  <div data-offset-y="40"><span></span><br><span></span></div>
+  <div data-offset-y="20"><span></span><br><span></span></div>
+  <div data-offset-y="70"><span></span><br><span></span></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-004.html
new file mode 100644
index 0000000000..233c88a01f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-004.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<style>
+#target {
+  display: grid;
+  grid-template: 50px 50px 50px / 50px 50px;
+  grid-auto-flow: column;
+  align-items: last baseline;
+  width: 200px;
+  border: solid 3px;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('#target > div')">
+
+<div id="target">
+  <div style="grid-area: 3 / 1; margin-bottom: 10px;" data-offset-y="100"><span></span><br><span></span></div>
+  <div style="grid-area: 1 / 2 / 4 / 2;" data-offset-y="100"><span></span><br><span></span></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-005.html
new file mode 100644
index 0000000000..c217a3b6de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-005.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="display: inline-grid; grid-template: auto / 50px 50px; align-items: baseline; background: red;">
+  <canvas style="background: green; width: 100%; height: 100%;"></canvas>
+  <div style="height: 100px; background: green;"><br></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-001.html
new file mode 100644
index 0000000000..207fabb166
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-001.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7656#issuecomment-1248617134">
+<style>
+.target {
+  display: grid;
+  width: min-content;
+  grid-auto-flow: column;
+  position: relative;
+  line-height: 0;
+}
+.target > div {
+  background: hotpink;
+  font-size: 30px;
+}
+fieldset {
+  padding: 10px;
+  border: solid 10px;
+  margin: 0;
+  font-size: 20px;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="20"><span></span></div>
+  <fieldset data-offset-y="0">
+    <legend><span></span></legend>
+    <span></span><br><span></span>
+  </table>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="40"><span></span></div>
+  <fieldset data-offset-y="0">
+    <span></span><br><span></span>
+    <legend><span></span></legend>
+  </table>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-002.html
new file mode 100644
index 0000000000..dbbca16150
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-002.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7656#issuecomment-1248617134">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  width: min-content;
+  position: relative;
+  line-height: 0;
+  writing-mode: vertical-rl;
+}
+.target > div {
+  background: hotpink;
+  font-size: 30px;
+}
+fieldset {
+  padding: 10px;
+  border: solid 10px;
+  margin: 0;
+  font-size: 20px;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="35"><span></span></div>
+  <fieldset data-offset-x="0">
+    <legend><span></span></legend>
+    <span></span><br><span></span>
+  </table>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="15"><span></span></div>
+  <fieldset data-offset-x="0">
+    <span></span><br><span></span>
+    <legend><span></span></legend>
+  </table>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-003.html
new file mode 100644
index 0000000000..38fc5b5eb8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-fieldset-003.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7656#issuecomment-1248617134">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  width: min-content;
+  position: relative;
+  line-height: 0;
+  writing-mode: vertical-lr;
+}
+.target > div {
+  background: hotpink;
+  font-size: 30px;
+}
+fieldset {
+  padding: 10px;
+  border: solid 10px;
+  margin: 0;
+  font-size: 20px;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <fieldset data-offset-x="0">
+    <legend><span></span></legend>
+    <span></span><br><span></span>
+  </table>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="45"><span></span></div>
+  <fieldset data-offset-x="0">
+    <span></span><br><span></span>
+    <legend><span></span></legend>
+  </table>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-001.html
new file mode 100644
index 0000000000..d00472474b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-001.html
@@ -0,0 +1,261 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 200px;
+  margin-block: 10px;
+  padding: 10px;
+  border: solid 3px;
+}
+
+.inner {
+  display: flex;
+  border: solid 5px;
+  padding: 10px;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="15"><span></span></div>
+  <div class="inner" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="35"><span></span></div>
+  <div class="inner" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="35"><span></span></div>
+  <div class="inner" style="flex-direction: row-reverse;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="15"><span></span></div>
+  <div class="inner" style="flex-direction: row-reverse;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="15"><span></span></div>
+  <div class="inner" style="flex-direction: column;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="45"><span></span></div>
+  <div class="inner" style="flex-direction: column;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="35"><span></span></div>
+  <div class="inner" style="flex-direction: column-reverse;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="45"><span></span></div>
+  <div class="inner" style="flex-direction: column-reverse;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<!-- flex-wrap: wrap -->
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="25"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="70"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="35"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="45"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="25"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="50"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="35"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="55"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<!-- flex-wrap: wrap-reverse -->
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="15"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="70"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="40"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="60"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="15"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="55"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="45"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="55"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-002.html
new file mode 100644
index 0000000000..b6df9d7d73
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-002.html
@@ -0,0 +1,262 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 200px;
+  margin-inline: 10px;
+  padding: 10px;
+  border: solid 3px;
+  writing-mode: vertical-rl;
+}
+
+.inner {
+  display: flex;
+  border: solid 5px;
+  padding: 10px;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="40"><span></span></div>
+  <div class="inner" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="30"><span></span></div>
+  <div class="inner" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="30"><span></span></div>
+  <div class="inner" style="flex-direction: row-reverse;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="40"><span></span></div>
+  <div class="inner" style="flex-direction: row-reverse;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="50"><span></span></div>
+  <div class="inner" style="flex-direction: column;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="30"><span></span></div>
+  <div class="inner" style="flex-direction: column;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="40"><span></span></div>
+  <div class="inner" style="flex-direction: column-reverse;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="20"><span></span></div>
+  <div class="inner" style="flex-direction: column-reverse;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+  </div>
+</div>
+
+<!-- flex-wrap: wrap -->
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="70"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="33"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="65"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="45"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="55"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="38"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="50"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="20"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<!-- flex-wrap: wrap-reverse -->
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="75"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="30"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="63"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="35"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="60"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="30"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="43"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-003.html
new file mode 100644
index 0000000000..7fdc921b27
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-003.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 200px;
+  margin-block: 10px;
+  padding: 10px;
+  border: solid 3px;
+}
+
+.inner {
+  display: flex;
+  border: solid 5px;
+  padding: 10px;
+  gap: 10px;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="45"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="45"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="55"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="55"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="115"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="115"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="115"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="115"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-y="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-004.html
new file mode 100644
index 0000000000..447f008e0e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-flex-004.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 200px;
+  margin-block: 10px;
+  padding: 10px;
+  border: solid 3px;
+  writing-mode: vertical-rl;
+}
+
+.inner {
+  display: flex;
+  border: solid 5px;
+  padding: 10px;
+  gap: 10px;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="110"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="110"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="45"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="45"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="40"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="40"><span></span></div>
+  <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10">
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 50px;"><span></span></div>
+    <div style="font-size: 60px;"><span></span></div>
+    <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div>
+    <div style="font-size: 20px;"><span></span></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-001.html
new file mode 100644
index 0000000000..d59e70601a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-001.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 300px;
+  margin-block: 10px;
+  padding: 10px;
+  border: solid 3px;
+}
+
+.inner {
+  display: grid;
+  gap: 10px;
+  grid-template: 50px 50px / 50px 50px 50px;
+  border: solid 5px;
+  padding: 10px;
+}
+
+.inner > div:first-child,
+.inner > div:last-child {
+  align-self: start;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="35"><span></span></div>
+  <div class="inner" style="align-items: first baseline;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="100"><span></span></div>
+  <div class="inner" style="align-items: first baseline;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="55"><span></span></div>
+  <div class="inner" style="align-items: last baseline;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="115"><span></span></div>
+  <div class="inner" style="align-items: last baseline;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="25"><span></span></div>
+  <div class="inner" style="align-items: end;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="90"><span></span></div>
+  <div class="inner" style="align-items: end;" data-offset-y="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-002.html
new file mode 100644
index 0000000000..686587bc94
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-002.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 300px;
+  margin-block: 10px;
+  padding: 10px;
+  border: solid 3px;
+  writing-mode: vertical-rl;
+}
+
+.inner {
+  display: grid;
+  gap: 10px;
+  grid-template: 50px 50px / 50px 50px 50px;
+  border: solid 5px;
+  padding: 10px;
+}
+
+.inner > div:first-child,
+.inner > div:last-child {
+  align-self: start;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="110"><span></span></div>
+  <div class="inner" style="align-items: first baseline;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="48"><span></span></div>
+  <div class="inner" style="align-items: first baseline;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="90"><span></span></div>
+  <div class="inner" style="align-items: last baseline;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="33"><span></span></div>
+  <div class="inner" style="align-items: last baseline;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="115"><span></span></div>
+  <div class="inner" style="align-items: end;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="53"><span></span></div>
+  <div class="inner" style="align-items: end;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-003.html
new file mode 100644
index 0000000000..f561e13cfa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-grid-003.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 300px;
+  margin-block: 10px;
+  padding: 10px;
+  border: solid 3px;
+  writing-mode: vertical-lr;
+}
+
+.inner {
+  display: grid;
+  gap: 10px;
+  grid-template: 50px 50px / 50px 50px 50px;
+  border: solid 5px;
+  padding: 10px;
+}
+
+.inner > div:first-child,
+.inner > div:last-child {
+  align-self: start;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="30"><span></span></div>
+  <div class="inner" style="align-items: first baseline;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="93"><span></span></div>
+  <div class="inner" style="align-items: first baseline;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="50"><span></span></div>
+  <div class="inner" style="align-items: last baseline;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="108"><span></span></div>
+  <div class="inner" style="align-items: last baseline;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="inner" style="align-items: end;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="88"><span></span></div>
+  <div class="inner" style="align-items: end;" data-offset-x="10">
+    <div style="font-size: 20px;"><span></span></div>
+    <div style="font-size: 10px;"><span></span></div>
+    <div style="font-size: 30px;"><span></span></div>
+    <div style="font-size: 15px;"><span></span></div>
+    <div style="font-size: 35px;"><span></span></div>
+    <div style="font-size: 25px;"><span></span></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-001.tentative.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-001.tentative.html
new file mode 100644
index 0000000000..27e48bc7cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-001.tentative.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-last-baseline">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  inline-size: 100px;
+  position: relative;
+  line-height: 0;
+  padding: 10px;
+}
+.target > div {
+  background: hotpink;
+  font-size: 30px;
+}
+.line-clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  border: solid 10px;
+  font-size: 40px !important;
+  overflow: hidden;
+}
+.line-clamp div {
+  background: orange;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<!-- Five lines -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="30"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><br><span></span><br><span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="110"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><br><span></span><br><span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+<!-- Two lines -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="30"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><br><span></span>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="70"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><br><span></span>
+  </div>
+</div>
+
+<!-- Three lines -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="30"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="110"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+
+<!-- Wrapping div -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="30"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="110"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<!-- Nested div after first line -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="30"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="110"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<!-- Block within inline. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="30"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="110"><span></span></div>
+  <div class="line-clamp" data-offset-y="10">
+    <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-002.tentative.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-002.tentative.html
new file mode 100644
index 0000000000..a51c43f406
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-002.tentative.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-last-baseline">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  inline-size: 100px;
+  position: relative;
+  line-height: 0;
+  padding: 10px;
+  writing-mode: vertical-rl;
+}
+.target > div {
+  background: hotpink;
+  font-size: 30px;
+}
+.line-clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  border: solid 10px;
+  font-size: 40px !important;
+  overflow: hidden;
+}
+.line-clamp div {
+  background: orange;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<!-- Five lines -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span><br><span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span><br><span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+<!-- Two lines -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="65"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span>
+  </div>
+</div>
+
+<!-- Three lines -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+
+<!-- Wrapping div -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<!-- Nested div after first line -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<!-- Block within inline. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-003.tentative.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-003.tentative.html
new file mode 100644
index 0000000000..689c952dbb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-line-clamp-003.tentative.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-last-baseline">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  inline-size: 100px;
+  position: relative;
+  line-height: 0;
+  padding: 10px;
+  writing-mode: vertical-lr;
+}
+.target > div {
+  background: hotpink;
+  font-size: 30px;
+}
+.line-clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  border: solid 10px;
+  font-size: 40px !important;
+  overflow: hidden;
+}
+.line-clamp div {
+  background: orange;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<!-- Five lines -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span><br><span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span><br><span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+<!-- Two lines -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="65"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span>
+  </div>
+</div>
+
+<!-- Three lines -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><span></span><br><span></span>
+  </div>
+</div>
+
+
+<!-- Wrapping div -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <div><span></span><br><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<!-- Nested div after first line -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><div><span></span><br><span></span><br><span></span><br><span></span></div>
+  </div>
+</div>
+
+<!-- Block within inline. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="line-clamp" data-offset-x="10">
+    <span></span><br><i><span></span><div><span></span><br><span></span><br><span></span></div></i>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-001.html
new file mode 100644
index 0000000000..d7d6faabb1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-001.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7639">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  inline-size: 100px;
+  position: relative;
+  line-height: 0;
+  padding: 10px;
+}
+.target > div {
+  background: hotpink;
+  font-size: 20px;
+}
+.multicol {
+  columns: 3;
+  column-fill: auto;
+  padding: 10px;
+  border: solid 10px;
+}
+.multicol > div {
+  break-inside: avoid;
+  break-before: column;
+  break-after: column;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<!-- Three columns, largest in the middle. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="20"><span></span></div>
+  <div class="multicol" data-offset-y="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="100"><span></span></div>
+  <div class="multicol" data-offset-y="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<!-- Start spanning element. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="30"><span></span></div>
+  <div class="multicol" data-offset-y="10">
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="140"><span></span></div>
+  <div class="multicol" data-offset-y="10">
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<!-- End spanning element. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="20"><span></span></div>
+  <div class="multicol" data-offset-y="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="140"><span></span></div>
+  <div class="multicol" data-offset-y="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-002.html
new file mode 100644
index 0000000000..d237f4c2e2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-002.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7639">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  inline-size: 200px;
+  position: relative;
+  line-height: 0;
+  margin: 40px;
+  padding: 10px;
+  writing-mode: vertical-rl;
+}
+.target > div {
+  background: hotpink;
+  font-size: 20px;
+}
+.multicol {
+  columns: 3;
+  column-fill: auto;
+  padding: 10px;
+  border: solid 10px;
+}
+.multicol > div {
+  break-inside: avoid;
+  break-before: column;
+  break-after: column;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<!-- Three columns, largest in the middle. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="105"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="35"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<!-- Start spanning element. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="140"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="35"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<!-- End spanning element. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="145"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="30"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-003.html
new file mode 100644
index 0000000000..52b2403f88
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-multicol-003.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7639">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  inline-size: 200px;
+  position: relative;
+  line-height: 0;
+  margin: 40px;
+  padding: 10px;
+  writing-mode: vertical-lr;
+}
+.target > div {
+  background: hotpink;
+  font-size: 20px;
+}
+.multicol {
+  columns: 3;
+  column-fill: auto;
+  padding: 10px;
+  border: solid 10px;
+}
+.multicol > div {
+  break-inside: avoid;
+  break-before: column;
+  break-after: column;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<!-- Three columns, largest in the middle. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="95"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<!-- Start spanning element. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="30"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="135"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<!-- End spanning element. -->
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="25"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="140"><span></span></div>
+  <div class="multicol" data-offset-x="10">
+    <div style="font-size: 10px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 30px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="font-size: 20px;">
+      <span></span><br><span></span><br><span></span>
+    </div>
+    <div style="column-span: all; background: orange;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-001.html
new file mode 100644
index 0000000000..66f9eb1bcf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-001.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 300px;
+  margin-block: 10px;
+  padding: 10px;
+  border: solid 3px;
+}
+
+.inner {
+  overflow: hidden;
+  inline-size: 100px;
+  block-size: 80px;
+  margin: 10px;
+  border: solid 5px;
+  padding: 10px;
+  font-size: 30px;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="45"><span></span><br><span></span></div>
+  <div class="inner" data-offset-y="20">
+    <div>
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="55"><span></span><br><span></span></div>
+  <div class="inner" data-offset-y="20">
+    <div>
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="10"><span></span><br><span></span></div>
+  <div class="inner" data-offset-y="30">
+    <div style="margin-block-start: -200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="10"><span></span><br><span></span></div>
+  <div class="inner" data-offset-y="50">
+    <div style="margin-block-start: -200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="110"><span></span><br><span></span></div>
+  <div class="inner" data-offset-y="20">
+    <div style="margin-block-start: 200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="90"><span></span><br><span></span></div>
+  <div class="inner" data-offset-y="20">
+    <div style="margin-block-start: 200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-002.html
new file mode 100644
index 0000000000..b74dbf750b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-002.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 300px;
+  margin-block: 10px;
+  padding: 10px;
+  border: solid 3px;
+  writing-mode: vertical-rl;
+}
+
+.inner {
+  overflow: hidden;
+  inline-size: 100px;
+  block-size: 80px;
+  margin: 10px;
+  border: solid 5px;
+  padding: 10px;
+  font-size: 30px;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="70"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div>
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="60"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div>
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="100"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div style="margin-block-start: -200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="120"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div style="margin-block-start: -200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="10"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="40">
+    <div style="margin-block-start: 200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="10"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div style="margin-block-start: 200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-003.html
new file mode 100644
index 0000000000..569dd1ae37
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-overflow-003.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7660">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  position: relative;
+  line-height: 0;
+  font-size: 20px;
+  inline-size: 300px;
+  margin-block: 10px;
+  padding: 10px;
+  border: solid 3px;
+  writing-mode: vertical-lr;
+}
+
+.inner {
+  overflow: hidden;
+  inline-size: 100px;
+  block-size: 80px;
+  margin: 10px;
+  border: solid 5px;
+  padding: 10px;
+  font-size: 30px;
+}
+
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="40"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div>
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="50"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div>
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="10"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div style="margin-block-start: -200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="10"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="40">
+    <div style="margin-block-start: -200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="120"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div style="margin-block-start: 200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="100"><span></span><br><span></span></div>
+  <div class="inner" data-offset-x="20">
+    <div style="margin-block-start: 200px;">
+      <span></span><br><span></span>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-001.html
new file mode 100644
index 0000000000..ad1d778c57
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-001.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  justify-items: start;
+  position: relative;
+}
+.target > div, .target td {
+  background: hotpink;
+  font-size: 20px;
+  line-height: 0;
+}
+.target table { border-spacing: 0; }
+.target td { padding: 5px; min-width: 5px; min-height: 5px; }
+.target caption {
+  margin: 10px;
+  background: lime;
+  block-size: 20px;
+}
+.target span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="45"><span></span></div>
+  <table data-offset-y="0">
+    <caption>top</caption>
+    <tr style="vertical-align: baseline;">
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+      <td><span></span><br><span></span></td>
+    </tr>
+    <tr style="vertical-align: baseline;">
+      <td><span></span><br><span></span></td>
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+    </tr>
+    <caption style="caption-side: bottom;">bottom</caption>
+  </table>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="95"><span></span></div>
+  <table data-offset-y="0">
+    <caption>top</caption>
+    <tr style="vertical-align: baseline;">
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+      <td><span></span><br><span></span></td>
+    </tr>
+    <tr style="vertical-align: baseline;">
+      <td><span></span><br><span></span></td>
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+    </tr>
+    <caption style="caption-side: bottom;">bottom</caption>
+  </table>
+</div>
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-y="20"><span></span></div>
+  <table data-offset-y="0">
+    <tr>
+      <td style="border: solid 10px;"></td>
+      <td style="border: solid 5px;"></td>
+      <td style="border: solid 20px;"></td>
+    </tr>
+    <tr>
+      <td style="border: solid 10px;"></td>
+      <td style="border: solid 5px;"></td>
+      <td style="border: solid 20px;"></td>
+    </tr>
+  </table>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-y="70"><span></span></div>
+  <table data-offset-y="0">
+    <tr>
+      <td style="border: solid 10px;"></td>
+      <td style="border: solid 5px;"></td>
+      <td style="border: solid 20px;"></td>
+    </tr>
+    <tr>
+      <td style="border: solid 10px;"></td>
+      <td style="border: solid 5px;"></td>
+      <td style="border: solid 20px;"></td>
+    </tr>
+  </table>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-002.html
new file mode 100644
index 0000000000..cabb32c40a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-002.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  justify-items: start;
+  position: relative;
+  writing-mode: vertical-rl;
+}
+.target > div, .target td {
+  background: hotpink;
+  font-size: 20px;
+  line-height: 0;
+}
+.target table { border-spacing: 0; }
+.target td { padding: 5px; min-width: 5px; min-height: 5px; }
+.target caption {
+  margin: 10px;
+  background: lime;
+  block-size: 20px;
+}
+.target span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="115"><span></span></div>
+  <table data-offset-x="0">
+    <caption>top</caption>
+    <tr style="vertical-align: baseline;">
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+      <td><span></span><br><span></span></td>
+    </tr>
+    <tr style="vertical-align: baseline;">
+      <td><span></span><br><span></span></td>
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+    </tr>
+    <caption style="caption-side: bottom;">bottom</caption>
+  </table>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="65"><span></span></div>
+  <table data-offset-x="0">
+    <caption>top</caption>
+    <tr style="vertical-align: baseline;">
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+      <td><span></span><br><span></span></td>
+    </tr>
+    <tr style="vertical-align: baseline;">
+      <td><span></span><br><span></span></td>
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+    </tr>
+    <caption style="caption-side: bottom;">bottom</caption>
+  </table>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-003.html
new file mode 100644
index 0000000000..5c2e56b649
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-table-003.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7655#issuecomment-1248528627">
+<style>
+.target {
+  display: grid;
+  grid-auto-flow: column;
+  justify-items: start;
+  position: relative;
+  writing-mode: vertical-lr;
+}
+.target > div, .target td {
+  background: hotpink;
+  font-size: 20px;
+  line-height: 0;
+}
+.target table { border-spacing: 0; }
+.target td { padding: 5px; min-width: 5px; min-height: 5px; }
+.target caption {
+  margin: 10px;
+  background: lime;
+  block-size: 20px;
+}
+.target span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cyan 3px;
+  outline-offset: -3px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.target > *')">
+
+<div class="target" style="align-items: first baseline;">
+  <div data-offset-x="45"><span></span></div>
+  <table data-offset-x="0">
+    <caption>top</caption>
+    <tr style="vertical-align: baseline;">
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+      <td><span></span><br><span></span></td>
+    </tr>
+    <tr style="vertical-align: baseline;">
+      <td><span></span><br><span></span></td>
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+    </tr>
+    <caption style="caption-side: bottom;">bottom</caption>
+  </table>
+</div>
+
+<div class="target" style="align-items: last baseline;">
+  <div data-offset-x="95"><span></span></div>
+  <table data-offset-x="0">
+    <caption>top</caption>
+    <tr style="vertical-align: baseline;">
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+      <td><span></span><br><span></span></td>
+    </tr>
+    <tr style="vertical-align: baseline;">
+      <td><span></span><br><span></span></td>
+      <td style="font-size: 10px;"><span></span><br><span></span></td>
+    </tr>
+    <caption style="caption-side: bottom;">bottom</caption>
+  </table>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-vertical.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-vertical.html
new file mode 100644
index 0000000000..aff424be77
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline-vertical.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: grid align baseline vertical</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#intro-baselines">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<meta name="assert" content="This test checks that baseline alignment works correctly for align-self properties in vertical-rl and -lr writing modes">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+
+<style>
+
+.grid {
+    height: 600px;
+    grid-auto-columns: 1fr;
+    margin-bottom: 20px;
+    position: relative;
+    text-orientation: sideways;
+    font: 20px/1 Ahem;
+}
+
+.grid :nth-child(1) { background-color: brown; }
+.grid :nth-child(2) { background-color: green; }
+.grid :nth-child(3) { background-color: red; }
+.grid :nth-child(4) { background-color: yellow; }
+.grid :nth-child(5) { background-color: purple; }
+.grid :nth-child(6) { background-color: orange; }
+.grid :nth-child(7) { background-color: lime; }
+.grid :nth-child(8) { background-color: lightblue; }
+.grid :nth-child(9) { background-color: darkred; }
+.grid :nth-child(10) { background-color: gold; }
+.grid :nth-child(11) { background-color: salmon; }
+
+.firstRowThirdColumn {
+    grid-row: 1;
+    grid-column: 3;
+}
+.firstRowFourthColumn {
+    grid-row: 1;
+    grid-column: 4;
+}
+.firstRowFifthColumn {
+    grid-row: 1;
+    grid-column: 5;
+}
+.grid > div {
+    min-width: 0px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript"> setup({ explicit_done: true }); </script>
+
+<body onload="document.fonts.ready.then(() => { runTests(); })">
+
+<div class="grid" style="writing-mode: vertical-rl">
+    <div data-expected-width="20" data-offset-x="70" class="firstRowFirstColumn alignSelfBaseline" style="width: 20px;"></div>
+    <div data-expected-width="10" data-offset-x="70" class="firstRowSecondColumn alignSelfBaseline" style="width: 10px; margin: 0 20px 0 10px;"></div>
+    <div data-expected-width="10" data-offset-x="70" class="firstRowThirdColumn alignSelfBaseline" style="width: 10px; margin: 0 20px 0 0;"></div>
+    <div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn" style="width: 100px;"></div>
+</div>
+
+<div class="grid" style="writing-mode: vertical-rl">
+  <div id="baseline1" class="firstRowFirstColumn alignSelfBaseline">ahem</div>
+  <div id="baseline2" class="firstRowSecondColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="25" class="firstRowThirdColumn alignSelfCenter"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div>
+  <div id="baseline3" data-expected-width="50" class="firstRowFourthColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div>
+  <div data-expected-width="100" data-offset-x="0" class="firstRowFifthColumn" style="width: 100px;"></div>
+</div>
+
+<div class="grid" style="writing-mode: vertical-rl">
+  <div id="baseline4" class="firstRowFirstColumn alignSelfBaseline">ahem</div>
+  <div id="baseline5" class="firstRowSecondColumn alignSelfBaseline"><br><img src="/css/support/1x1-lime.png" style="width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="50" class="firstRowThirdColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div>
+  <div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn" style="width: 100px;"></div>
+</div>
+
+<div class="grid" style="writing-mode: vertical-lr">
+  <div id="baseline6" data-offset-x="13" class="firstRowFirstColumn alignSelfBaseline">ahem</div>
+  <div id="baseline7" data-offset-x="13" class="firstRowSecondColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="25" class="firstRowThirdColumn alignSelfCenter"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div>
+  <div data-expected-width="50" data-offset-x="0" class="firstRowFourthColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div>
+  <div data-expected-width="100" data-offset-x="0" class="firstRowFifthColumn" style="width: 100px;"></div>
+</div>
+
+<div class="grid" style="writing-mode: vertical-lr">
+  <div id="baseline8" class="firstRowFirstColumn alignSelfBaseline">ahem</div>
+  <div id="baseline9" class="firstRowSecondColumn alignSelfBaseline"><br><img src="/css/support/1x1-lime.png" style="width: 50px;"></div>
+  <div data-expected-width="50" data-offset-x="0" class="firstRowThirdColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div>
+  <div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn" style="width: 100px;"></div>
+</div>
+
+<div id="log"></div>
+
+</body>
+
+<script>
+
+  function runTests() {
+    var baseline1 = document.getElementById("baseline1");
+    var baseline2 = document.getElementById("baseline2");
+    var baseline3 = document.getElementById("baseline3");
+    var baseline4 = document.getElementById("baseline4");
+    var baseline5 = document.getElementById("baseline5");
+    var baseline6 = document.getElementById("baseline6");
+    var baseline7 = document.getElementById("baseline7");
+    var baseline8 = document.getElementById("baseline8");
+    var baseline9 = document.getElementById("baseline9");
+
+    checkLayout('.grid', false);
+
+    test(() => {assert_equals(baseline1.offsetLeft, baseline2.offsetLeft, "baseline1 and baseline2 should have the same baseline;")}, "Additional Check 1");
+    test(() => {assert_greater_than(baseline3.offsetLeft + baseline3.offsetWidth, 75, "baseline3 should be above the center align-itemsed item;")}, "Additional Check 2");
+    test(() => {assert_equals(baseline4.offsetLeft + baseline4.offsetWidth, baseline5.offsetLeft + baseline5.offsetWidth, "baseline4 and baseline5 should be right aligned with each other;")}, "Additional Check 3");
+    test(() => {assert_less_than(baseline4.offsetLeft + baseline4.offsetWidth, 100, "baseline4 and baseline5 should be below the dominant baseline;")}, "Additional Check 4");
+    test(() => {assert_equals(baseline6.offsetLeft, baseline7.offsetLeft, "baseline6 and baseline7 should have the same baseline;")}, "Additional Check 5");
+    test(() => {assert_equals(baseline8.offsetLeft, baseline9.offsetLeft, "baseline8 and baseline9 should be left aligned with each other;")}, "Additional Check 6");
+
+    done();
+  };
+
+</script>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline.html
new file mode 100644
index 0000000000..175811718f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-baseline.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: grid align baseline</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#intro-baselines">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<meta name="assert" content="This test checks that baseline alignment works correctly for align-items and align-self properties">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+
+<style>
+
+.grid {
+    width: 600px;
+    grid-auto-columns: 1fr;
+    position: relative;
+    margin-bottom: 20px;
+    font: 20px/1 Ahem;
+}
+
+.grid :nth-child(1) { background-color: blue; }
+.grid :nth-child(2) { background-color: green; }
+.grid :nth-child(3) { background-color: red; }
+.grid :nth-child(4) { background-color: yellow; }
+.grid :nth-child(5) { background-color: purple; }
+.grid :nth-child(6) { background-color: orange; }
+.grid :nth-child(7) { background-color: lime; }
+.grid :nth-child(8) { background-color: lightblue; }
+.grid :nth-child(9) { background-color: darkred; }
+.grid :nth-child(10) { background-color: gold; }
+.grid :nth-child(11) { background-color: salmon; }
+
+.firstRowThirdColumn {
+    grid-row: 1;
+    grid-column: 3;
+}
+.firstRowFourthColumn {
+    grid-row: 1;
+    grid-column: 4;
+}
+.firstRowFifthColumn {
+    grid-row: 1;
+    grid-column: 5;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript"> setup({ explicit_done: true }); </script>
+
+<body onload="document.fonts.ready.then(() => { runTests(); })">
+
+<div class="grid alignItemsBaseline">
+    <div style="margin: 40px 0px;" class="firstRowFirstColumn" data-offset-x="0" data-offset-y="40" data-expected-width="200" data-expected-height="20"><div style="display:inline-block;"></div></div>
+    <div style="margin: auto 0px 0px;" class="firstRowSecondColumn" data-offset-x="200" data-offset-y="80" data-expected-width="200" data-expected-height="20"><div style="display:inline-block;"></div></div>
+    <div style="margin: 20px 0px;" class="firstRowThirdColumn" data-offset-x="400" data-offset-y="40" data-expected-width="200" data-expected-height="20"><div style="display:inline-block;"></div></div>
+</div>
+
+<div class="grid">
+    <div data-expected-height="20" data-offset-y="20" class="firstRowFirstColumn alignSelfBaseline" style="height: 20px;"></div>
+    <div data-expected-height="10" data-offset-y="30" class="firstRowSecondColumn alignSelfBaseline" style="height: 10px; margin: 30px 0 10px;"></div>
+    <div data-expected-height="10" data-offset-y="30" class="firstRowThirdColumn alignSelfBaseline" style="height: 10px; margin: 20px 0 0;"></div>
+    <div data-expected-height="100" data-offset-y="0" class="firstRowFourthColumn" style="height: 100px;"></div>
+</div>
+
+<div class="grid">
+    <div data-expected-height="20" data-offset-y="70" class="firstRowFirstColumn alignSelfLastBaseline" style="height: 20px;"></div>
+    <div data-expected-height="10" data-offset-y="80" class="firstRowSecondColumn alignSelfLastBaseline" style="height: 10px; margin: 30px 0 10px;"></div>
+    <div data-expected-height="10" data-offset-y="80" class="firstRowThirdColumn alignSelfLastBaseline" style="height: 10px; margin: 20px 0 0;"></div>
+    <div data-expected-height="100" data-offset-y="0" class="firstRowFourthColumn" style="height: 100px;"></div>
+</div>
+
+<div class="grid">
+    <div id="baseline1" class="firstRowFirstColumn alignSelfBaseline">ahem</div>
+    <div id="baseline2" data-offset-y="0" class="firstRowSecondColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="height: 50px;"></div>
+    <div data-expected-height="50" data-offset-y="25" class="firstRowThirdColumn alignSelfCenter"><img src="/css/support/1x1-lime.png" style="height: 50px; vertical-align: middle"></div>
+    <div id="baseline3" data-expected-height="50" class="firstRowFourthColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="height: 50px; vertical-align: middle"></div>
+    <div data-expected-height="100" data-offset-y="0" class="firstRowFifthColumn" style="height: 100px;"></div>
+</div>
+
+<div class="grid">
+    <div id="baseline4" class="firstRowFirstColumn alignSelfBaseline">ahem</div>
+    <div id="baseline5" class="firstRowSecondColumn alignSelfBaseline"><br><img src="/css/support/1x1-lime.png" style="height: 50px;"></div>
+    <div data-expected-height="50" data-offset-y="0" class="firstRowThirdColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="height: 50px; vertical-align: middle"></div>
+    <div data-expected-height="100" data-offset-y="0" class="firstRowFourthColumn" style="height: 100px;"></div>
+</div>
+
+<div id="log"></div>
+
+</body>
+
+<script>
+
+    function runTests() {
+      var baseline1 = document.getElementById("baseline1");
+      var baseline2 = document.getElementById("baseline2");
+      var baseline3 = document.getElementById("baseline3");
+      var baseline4 = document.getElementById("baseline4");
+      var baseline5 = document.getElementById("baseline5");
+
+      checkLayout('.grid', false);
+
+      test(() => {assert_equals(baseline1.offsetTop + baseline1.offsetHeight, baseline2.offsetTop + baseline2.offsetHeight, "baseline1 and baseline2 should have the same baseline;")},
+                  "Additional Check 1");
+      test(() => {assert_less_than(baseline3.offsetTop, 25, "baseline3 should be above the center align-selfed item;")}, "Additional Check 2");
+      test(() => {assert_equals(baseline4.offsetTop, baseline5.offsetTop, "baseline4 and baseline5 should be top aligned with each other;")}, "Additional Check 3");
+      test(() => {assert_greater_than(baseline4.offsetTop, 0, "baseline4 and baseline5 should be below the dominant baseline;")}, "Additional Check 4");
+
+      done();
+    };
+
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-lr.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-lr.html
new file mode 100644
index 0000000000..98d4e3c661
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-lr.html
@@ -0,0 +1,343 @@
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: aligned content distribution for vertical lr</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
+<meta name="assert" content="This test checks that the align-content property is applied correctly when using content-distribution values for the vertical-lr writing mode.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+
+<style>
+
+.grid {
+    grid-auto-columns: 20px;
+    grid-auto-rows: 40px;
+    position: relative;
+    width: 400px;
+    height: 300px;
+}
+
+.stretchedGrid {
+    grid-auto-rows: auto;
+}
+
+.width300height400 {
+    width: 300px;
+    height: 400px;
+}
+
+.fourthRowFirstColumn {
+    background-color: deepskyblue;
+    grid-column: 1;
+    grid-row: 4;
+}
+
+.fourthRowSecondColumn {
+    background-color: maroon;
+    grid-column: 2;
+  	grid-row: 4;
+}
+
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<p>This test checks that the align-content property is applied correctly when using content-distribution values in vertical-lr writing mode.</p>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween verticalLR" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround verticalLR" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="80" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="280" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="280" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly verticalLR" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="107" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="107" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="253" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="253" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid alignContentStretch verticalLR" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="200" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="200" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween verticalLR" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround verticalLR" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="47" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="47" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="313" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="313" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly verticalLR" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="70" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="70" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="290" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="290" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid width300height400 alignContentStretch verticalLR" data-expected-width="300" data-expected-height="400">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween verticalLR" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="120" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="240" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="240" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround verticalLR" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="130" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="230" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="230" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="330" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="330" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly verticalLR" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="48" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="48" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="136" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="136" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="224" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="224" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="312" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="312" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid alignContentStretch verticalLR" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="300" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
+    </div>
+</div>
+
+<!-- RTL direction. -->
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="280" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="280" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="107" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="107" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="253" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="253" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid alignContentStretch verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="200" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="260" data-expected-width="200" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="47" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="47" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="313" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="313" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="70" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="70" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="290" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="290" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid width300height400 alignContentStretch verticalLR directionRTL" data-expected-width="300" data-expected-height="400">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="380" data-expected-width="100" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="360" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="380" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="200" data-offset-y="380" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="200" data-offset-y="360" data-expected-width="100" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="120" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="240" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="240" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="130" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="130" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="230" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="230" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="330" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="330" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="48" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="48" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="136" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="136" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="224" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="224" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="312" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="312" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid alignContentStretch verticalLR directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="200" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="200" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="300" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="300" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
+    </div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-rl.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-rl.html
new file mode 100644
index 0000000000..60864c110d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-rl.html
@@ -0,0 +1,343 @@
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: aligned content distribution for vertical rl</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
+<meta name="assert" content="This test checks that the align-content property is applied correctly when using content-distribution values for the vertical-rl writing mode.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+
+<style>
+
+.grid {
+    grid-auto-columns: 20px;
+    grid-auto-rows: 40px;
+    position: relative;
+    width: 400px;
+    height: 300px;
+}
+
+.stretchedGrid {
+    grid-auto-rows: auto;
+}
+
+.width300height400 {
+    width: 300px;
+    height: 400px;
+}
+
+.fourthRowFirstColumn {
+    background-color: deepskyblue;
+    grid-column: 1;
+    grid-row: 4;
+}
+
+.fourthRowSecondColumn {
+    background-color: maroon;
+    grid-column: 2;
+  	grid-row: 4;
+}
+
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<p>This test checks that the align-content property is applied correctly when using content-distribution values for vertical-rl mode.</p>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween verticalRL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround verticalRL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="280" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="280" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="80" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly verticalRL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="253" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="253" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="107" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="107" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid alignContentStretch verticalRL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="200" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="200" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween verticalRL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround verticalRL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="313" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="313" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="47" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="47" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly verticalRL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="290" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="290" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="70" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="70" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid width300height400 alignContentStretch verticalRL" data-expected-width="300" data-expected-height="400">
+        <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween verticalRL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="240" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="240" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="120" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="120" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround verticalRL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="330" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="330" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="230" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="230" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="130" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="130" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="30" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly verticalRL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="312" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="312" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="224" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="224" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="136" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="136" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="48" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="48" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid alignContentStretch verticalRL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="300" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="100" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="100" data-expected-height="20"></div>
+    </div>
+</div>
+
+<!-- RTL direction. -->
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="280" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="280" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="253" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="253" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="107" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="107" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid alignContentStretch verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="260" data-expected-width="200" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="200" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="313" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="313" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="47" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="47" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="290" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="290" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="180" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="70" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="70" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid width300height400 alignContentStretch verticalRL directionRTL" data-expected-width="300" data-expected-height="400">
+        <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="380" data-expected-width="100" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="360" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="380" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="380" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="0" data-offset-y="360" data-expected-width="100" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="240" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="240" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="120" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="120" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="330" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="330" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="230" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="230" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="130" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="130" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="30" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="30" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="312" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="312" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="224" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="224" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="136" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="136" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="48" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="48" data-offset-y="260" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid alignContentStretch verticalRL directionRTL" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="300" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="300" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="100" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="100" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="100" data-expected-height="20"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="0" data-offset-y="260" data-expected-width="100" data-expected-height="20"></div>
+    </div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution.html
new file mode 100644
index 0000000000..cc3785da0f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution.html
@@ -0,0 +1,338 @@
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: aligned content distribution</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
+<meta name="assert" content="This test checks that the align-content property is applied correctly when using content-distribution values.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+
+<style>
+
+.grid {
+    grid-auto-columns: 20px;
+    grid-auto-rows: 40px;
+    position: relative;
+    width: 200px;
+    height: 300px;
+}
+
+.stretchedGrid {
+    grid-auto-rows: auto;
+}
+
+.fourthRowFirstColumn {
+    background-color: deepskyblue;
+    grid-column: 1;
+    grid-row: 4;
+}
+
+.fourthRowSecondColumn {
+    background-color: maroon;
+    grid-column: 2;
+  	grid-row: 4;
+}
+
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<p>This test checks that the align-content property is applied correctly when using content-distribution values.</p>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="55" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="55" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="205" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="205" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="73" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="73" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="187" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="187" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid alignContentStretch" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="150"></div>
+        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="150"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="20" data-expected-height="150"></div>
+        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="150" data-expected-width="20" data-expected-height="150"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="230" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="230" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="45" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="45" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="215" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="215" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid alignContentStretch" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="100" data-expected-width="20" data-expected-height="100"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="100"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="200" data-expected-width="20" data-expected-height="100"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="87" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="87" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="173" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="173" data-expected-width="20" data-expected-height="40"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="20" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="18" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="18" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="93" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="93" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="168" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="168" data-expected-width="20" data-expected-height="40"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="243" data-expected-width="20" data-expected-height="40"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="20" data-offset-y="243" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="28" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="28" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="96" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="96" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="164" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="164" data-expected-width="20" data-expected-height="40"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="232" data-expected-width="20" data-expected-height="40"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="20" data-offset-y="232" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid alignContentStretch" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="75"></div>
+        <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="75"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="75" data-expected-width="20" data-expected-height="75"></div>
+        <div class="secondRowSecondColumn" data-offset-x="20" data-offset-y="75" data-expected-width="20" data-expected-height="75"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="20" data-expected-height="75"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="20" data-offset-y="150" data-expected-width="20" data-expected-height="75"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="0" data-offset-y="225" data-expected-width="20" data-expected-height="75"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="20" data-offset-y="225" data-expected-width="20" data-expected-height="75"></div>
+    </div>
+</div>
+
+<!-- RTL direction. -->
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween directionRTL" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround directionRTL" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="55" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="55" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="205" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="205" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly directionRTL" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="73" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="73" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="187" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="187" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid alignContentStretch directionRTL" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="150"></div>
+        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="150"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="150" data-expected-width="20" data-expected-height="150"></div>
+        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="150" data-expected-width="20" data-expected-height="150"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween directionRTL" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround directionRTL" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="230" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="230" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly directionRTL" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="45" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="45" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="215" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="215" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid alignContentStretch directionRTL" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="100" data-expected-width="20" data-expected-height="100"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="200" data-expected-width="20" data-expected-height="100"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="200" data-expected-width="20" data-expected-height="100"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-between'</p>
+    <div class="grid alignContentSpaceBetween directionRTL" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="87" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="87" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="173" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="173" data-expected-width="20" data-expected-height="40"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="180" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="160" data-offset-y="260" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-around'</p>
+    <div class="grid alignContentSpaceAround directionRTL" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="18" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="18" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="93" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="93" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="168" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="168" data-expected-width="20" data-expected-height="40"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="180" data-offset-y="243" data-expected-width="20" data-expected-height="40"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="160" data-offset-y="243" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'space-evenly'</p>
+    <div class="grid alignContentSpaceEvenly directionRTL" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="28" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="28" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="96" data-expected-width="20" data-expected-height="40"></div>
+        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="96" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="164" data-expected-width="20" data-expected-height="40"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="164" data-expected-width="20" data-expected-height="40"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="180" data-offset-y="232" data-expected-width="20" data-expected-height="40"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="160" data-offset-y="232" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'stretch'</p>
+    <div class="grid stretchedGrid alignContentStretch directionRTL" data-expected-width="200" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="75"></div>
+        <div class="firstRowSecondColumn" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="75"></div>
+        <div class="secondRowFirstColumn" data-offset-x="180" data-offset-y="75" data-expected-width="20" data-expected-height="75"></div>
+        <div class="secondRowSecondColumn" data-offset-x="160" data-offset-y="75" data-expected-width="20" data-expected-height="75"></div>
+        <div class="thirdRowFirstColumn" data-offset-x="180" data-offset-y="150" data-expected-width="20" data-expected-height="75"></div>
+        <div class="thirdRowSecondColumn" data-offset-x="160" data-offset-y="150" data-expected-width="20" data-expected-height="75"></div>
+        <div class="fourthRowFirstColumn" data-offset-x="180" data-offset-y="225" data-expected-width="20" data-expected-height="75"></div>
+        <div class="fourthRowSecondColumn" data-offset-x="160" data-offset-y="225" data-expected-width="20" data-expected-height="75"></div>
+    </div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-vertical-lr.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-vertical-lr.html
new file mode 100644
index 0000000000..484ab78e9d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-vertical-lr.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test: align-content in vertical-lr</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-direction">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#alignment-values">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#direction">
+<meta name="assert" content="This test checks that the align-content property is applied correctly in vertical-lr grids, for both LTR and RTL directions.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+
+<style>
+
+.grid {
+    grid: 100px 100px / 50px 50px;
+    position: relative;
+    width: 300px;
+    height: 200px;
+}
+
+.cell {
+    width: 20px;
+    height: 40px;
+}
+
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'center'</p>
+    <div class="grid verticalLR alignContentCenter" data-expected-width="300" data-expected-height="200">
+        <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'start'</p>
+    <div class="grid verticalLR alignContentStart" data-expected-width="300" data-expected-height="200">
+        <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+        <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'end'</p>
+    <div class="grid verticalLR alignContentEnd" data-expected-width="300" data-expected-height="200">
+        <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="200" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- RTL direction. -->
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'center'</p>
+    <div class="grid directionRTL verticalLR alignContentCenter" data-expected-width="300" data-expected-height="200">
+        <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'start'</p>
+    <div class="grid directionRTL verticalLR alignContentStart" data-expected-width="300" data-expected-height="200">
+        <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+        <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'end'</p>
+    <div class="grid directionRTL verticalLR alignContentEnd" data-expected-width="300" data-expected-height="200">
+        <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="200" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-vertical-rl.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-vertical-rl.html
new file mode 100644
index 0000000000..fc584d8818
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-vertical-rl.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test: align-content in vertical-rl</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-direction">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#alignment-values">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#direction">
+<meta name="assert" content="This test checks that the align-content property is applied correctly in vertical-rl grids, for both LTR and RTL directions.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+
+<style>
+
+.grid {
+    grid: 100px 100px / 50px 50px;
+    position: relative;
+    width: 300px;
+    height: 200px;
+}
+
+.cell {
+    width: 20px;
+    height: 40px;
+}
+
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'center'</p>
+    <div class="grid verticalRL alignContentCenter" data-expected-width="300" data-expected-height="200">
+        <div class="cell firstRowFirstColumn" data-offset-x="230" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+        <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'start'</p>
+    <div class="grid verticalRL alignContentStart" data-expected-width="300" data-expected-height="200">
+        <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+        <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'end'</p>
+    <div class="grid verticalRL alignContentEnd" data-expected-width="300" data-expected-height="200">
+        <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+        <div class="secondRowFirstColumn" data-offset-x="00" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="80" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- RTL direction. -->
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'center'</p>
+    <div class="grid directionRTL verticalRL alignContentCenter" data-expected-width="300" data-expected-height="200">
+        <div class="cell firstRowFirstColumn" data-offset-x="230" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+        <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'start'</p>
+    <div class="grid directionRTL verticalRL alignContentStart" data-expected-width="300" data-expected-height="200">
+        <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+        <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'end'</p>
+    <div class="grid directionRTL verticalRL alignContentEnd" data-expected-width="300" data-expected-height="200">
+        <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+        <div class="secondRowFirstColumn" data-offset-x="00" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="80" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-content.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content.html
new file mode 100644
index 0000000000..85d0d501ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content.html
@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test: align-content property</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<meta name="assert" content="This test checks that the align-content property is applied correctly in both directions RTL and LTR.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+body {
+    margin: 0;
+}
+
+.grid {
+    grid: 100px 100px / 50px 50px;
+    position: relative;
+    width: 200px;
+    height: 300px;
+}
+
+.verticalGrid {
+    width: 300px;
+    height: 200px;
+}
+
+.cell {
+    width: 20px;
+    height: 40px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'center'</p>
+    <div class="grid alignContentCenter" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="150" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'left'</p>
+    <div class="grid alignContentLeft" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'right'</p>
+    <div class="grid alignContentRight" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'start'</p>
+    <div class="grid alignContentStart" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'end'</p>
+    <div class="grid alignContentEnd" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'flex-start'</p>
+    <div class="grid alignContentFlexStart" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'flex-end</p>
+    <div class="grid alignContentFlexEnd" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- Default alignment and initial values. -->
+<div style="position: relative">
+    <p>direction: LTR | align-content: 'auto' (resolved to 'start')</p>
+    <div class="grid" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- RTL direction. -->
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'center'</p>
+    <div class="grid directionRTL alignContentCenter" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="150" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'left'</p>
+    <div class="grid directionRTL alignContentLeft" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'right'</p>
+    <div class="grid directionRTL alignContentRight" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'start'</p>
+    <div class="grid directionRTL alignContentStart" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <p>direction: RTL | align-content: 'end'</p>
+    <div class="grid directionRTL alignContentEnd" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-lr.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-lr.html
new file mode 100644
index 0000000000..76f195311d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-lr.html
@@ -0,0 +1,243 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test: box model parts and alignment properties, vertical-LR writing mode</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode">
+<meta name="assert" content="This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties on vertical-LR grids, in both LTR and RTL directions.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+
+.grid {
+    grid-template-columns: 100px 200px;
+    grid-template-rows: 200px 200px;
+    padding: 10px 15px 20px 30px;
+    border-width: 5px 10px 15px 20px;
+    border-style: dotted;
+    border-color: blue;
+    position: relative;
+}
+
+.cell {
+    width: 20px;
+    height: 40px;
+    margin: 4px 8px 12px 16px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<p>This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties on vertical-LR grids.</p>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'auto' | justify-items: 'auto'</p>
+    <div class="grid fit-content verticalLR" data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"   data-offset-x="46"  data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowSecondColumn"  data-offset-x="46"  data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowFirstColumn"  data-offset-x="246" data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="246" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'center' | justify-items: 'center'</p>
+    <div class="grid fit-content verticalLR itemsCenter" data-expected-width="475" data-expected-height="350">
+        <div class="firstRowFirstColumn cell"     data-offset-x="124"  data-offset-y="36"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"   data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="324"  data-offset-y="186" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'end' | justify-items: 'end'</p>
+    <div class="grid fit-content verticalLR itemsEnd" data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"     data-offset-x="202" data-offset-y="58" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="402" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'left' | justify-items: 'left'</p>
+    <div class="grid fit-content verticalLR itemsLeft" data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="246" data-offset-y="114" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'start' | justify-items: 'right'</p>
+    <div class="grid fit-content verticalLR alignItemsStart justifyItemsRight" data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="58" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="246" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (ortho) | align-items: 'self-start' (vertical-lr) | justify-items: 'self-start' (direction: rtl)</p>
+    <div class="grid fit-content directionLTR verticalLR itemsSelfStart" data-expected-width="475" data-expected-height="350">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="58" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="246" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (ortho) | align-items: 'self-end' (vertical-lr) | justify-items: 'self-end' (direction: rtl)</p>
+    <div class="grid fit-content directionLTR verticalLR itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="202" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="402" data-offset-y="114" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
+    <div class="grid fit-content directionLTR verticalLR itemsSelfStart" data-expected-width="475" data-expected-height="350">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="14" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="246" data-offset-y="114" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
+    <div class="grid fit-content directionLTR verticalLR itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="202" data-offset-y="58"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="402" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- RTL direction. -->
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'auto' | justify-items: 'auto'</p>
+    <div class="grid fit-content verticalLR directionRTL" data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"   data-offset-x="46"  data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowSecondColumn"  data-offset-x="46"  data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowFirstColumn"  data-offset-x="246" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="246" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'center' | justify-items: 'center'</p>
+    <div class="grid fit-content verticalLR directionRTL itemsCenter" data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"     data-offset-x="124" data-offset-y="236" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="324" data-offset-y="86" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'end' | justify-items: 'end'</p>
+    <div class="grid fit-content verticalLR directionRTL itemsEnd"       data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"     data-offset-x="202" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="402" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'start' | justify-items: 'left'</p>
+    <div class="grid fit-content verticalLR directionRTL alignItemsStart justifyItemsLeft"      data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="246" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'start' | justify-items: 'right'</p>
+    <div class="grid fit-content verticalLR directionRTL alignItemsStart justifyItemsRight"     data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="246" data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (ortho) | align-items: 'self-start' (vertical-lr) | justify-items: 'self-start' (direction: ltr)</p>
+    <div class="grid fit-content verticalLR directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="246" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (ortho) | align-items: 'self-end' (vertical-lr) | justify-items: 'self-end' (direction: ltr)</p>
+    <div class="grid fit-content verticalLR directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="202" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="402" data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
+    <div class="grid fit-content verticalLR directionRTL itemsSelfStart" data-expected-width="475" data-expected-height="350">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="246" data-offset-y="158"  data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
+    <div class="grid fit-content verticalLR directionRTL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="202" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="402" data-offset-y="14" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-rl.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-rl.html
new file mode 100644
index 0000000000..f24bbc120f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-rl.html
@@ -0,0 +1,244 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test: box model parts and alignment properties, vertical-RL writing mode</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode">
+<meta name="assert" content="This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties on vertical-RL grids, in both LTR and RTL directions.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+
+.grid {
+    grid-template-columns: 100px 200px;
+    grid-template-rows: 200px 200px;
+    padding: 10px 15px 20px 30px;
+    border-width: 5px 10px 15px 20px;
+    border-style: dotted;
+    border-color: blue;
+    position: relative;
+}
+
+.cell {
+    width: 20px;
+    height: 40px;
+    margin: 4px 8px 12px 16px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<p>This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties on vertical-RL grids.</p>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'auto' | justify-items: 'auto'</p>
+    <div class="grid fit-content verticalRL" data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"   data-offset-x="402" data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowSecondColumn"  data-offset-x="402" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowFirstColumn"  data-offset-x="202" data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="114" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'center' | justify-items: 'center'</p>
+    <div class="grid fit-content verticalRL itemsCenter" data-expected-width="475" data-expected-height="350">
+        <div class="firstRowFirstColumn cell"     data-offset-x="324" data-offset-y="36"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="124" data-offset-y="186" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'end' | justify-items: 'end'</p>
+    <div class="grid fit-content verticalRL itemsEnd" data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="58" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'left' | justify-items: 'left'</p>
+    <div class="grid fit-content verticalRL itemsLeft" data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="114" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'start' | justify-items: 'right'</p>
+    <div class="grid fit-content verticalRL alignItemsStart justifyItemsRight" data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="58" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (ortho) | align-items: 'self-start' (vertical-rl) | justify-items: 'self-start' (direction: rtl)</p>
+    <div class="grid fit-content directionLTR verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="58" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (ortho) | align-items: 'self-end' (vertical-rl) | justify-items: 'self-end' (direction: rtl)</p>
+    <div class="grid fit-content directionLTR verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="114" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
+    <div class="grid fit-content directionLTR verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="14" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="114" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
+    <div class="grid fit-content directionLTR verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="58"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="110" data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+
+<!-- RTL direction. -->
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'auto' | justify-items: 'auto'</p>
+    <div class="grid fit-content directionRTL verticalRL" data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"   data-offset-x="402" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowSecondColumn"  data-offset-x="402" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowFirstColumn"  data-offset-x="202" data-offset-y="258" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'center' | justify-items: 'center'</p>
+    <div class="grid fit-content directionRTL verticalRL itemsCenter" data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"     data-offset-x="324" data-offset-y="236" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="124" data-offset-y="86" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'end' | justify-items: 'end'</p>
+    <div class="grid fit-content directionRTL verticalRL itemsEnd"       data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'start' | justify-items: 'left'</p>
+    <div class="grid fit-content directionRTL verticalRL alignItemsStart justifyItemsLeft"      data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'start' | justify-items: 'right'</p>
+    <div class="grid fit-content directionRTL verticalRL alignItemsStart justifyItemsRight"     data-expected-width="475" data-expected-height="350">
+        <div class="cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (ortho) | align-items: 'self-start' (vertical-rl) | justify-items: 'self-start' (direction: ltr)</p>
+    <div class="grid fit-content directionRTL verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (ortho) | align-items: 'self-end' (vertical-rl) | justify-items: 'self-end' (direction: ltr)</p>
+    <div class="grid fit-content directionRTL verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
+    <div class="grid fit-content directionRTL verticalRL itemsSelfStart" data-expected-width="475" data-expected-height="350">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="402" data-offset-y="258" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="158"  data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
+    <div class="grid fit-content directionRTL verticalRL itemsSelfEnd" data-expected-width="475" data-expected-height="350">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="230" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="200" data-expected-height="100"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="14" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding.html
new file mode 100644
index 0000000000..d4de084267
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding.html
@@ -0,0 +1,242 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test: box model parts and alignment properties</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<meta name="assert" content="This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties, in both LTR and RTL directions.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+
+.grid {
+    grid-template-columns: 100px 200px;
+    grid-template-rows: 200px 200px;
+    padding: 10px 15px 20px 30px;
+    border-width: 5px 10px 15px 20px;
+    border-style: dotted;
+    border-color: blue;
+    position: relative;
+}
+
+.cell {
+    width: 20px;
+    height: 40px;
+    margin: 4px 8px 12px 16px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<p>This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties.</p>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'auto' | justify-items: 'auto'</p>
+    <div class="grid fit-content" data-expected-width="375" data-expected-height="450">
+        <div class="cell firstRowFirstColumn"   data-offset-x="46"  data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowSecondColumn"  data-offset-x="146" data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowFirstColumn"  data-offset-x="46"  data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="146" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'center' | justify-items: 'center'</p>
+    <div class="grid fit-content itemsCenter" data-expected-width="375" data-expected-height="450">
+        <div class="firstRowFirstColumn cell"     data-offset-x="74"  data-offset-y="86" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="224" data-offset-y="286" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'end' | justify-items: 'end'</p>
+    <div class="grid fit-content itemsEnd" data-expected-width="375" data-expected-height="450">
+        <div class="cell firstRowFirstColumn"     data-offset-x="102" data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="302" data-offset-y="358" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'start' | justify-items: 'left'</p>
+    <div class="grid fit-content alignItemsStart justifyItemsLeft" data-expected-width="375" data-expected-height="450">
+        <div class="cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="146" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR | align-items: 'start' | justify-items: 'right'</p>
+    <div class="grid fit-content alignItemsStart justifyItemsRight" data-expected-width="375" data-expected-height="450">
+        <div class="cell firstRowFirstColumn"     data-offset-x="102" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="302" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
+    <div class="grid fit-content directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="102" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="302" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
+    <div class="grid fit-content directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="146" data-offset-y="358" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
+    <div class="grid fit-content directionLTR itemsSelfStart" data-expected-width="375" data-expected-height="450">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="46" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="146" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR - (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
+    <div class="grid fit-content directionLTR itemsSelfEnd" data-expected-width="375" data-expected-height="450">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="102"  data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="130" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="302" data-offset-y="358" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- RTL direction. -->
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'auto' | justify-items: 'auto'</p>
+    <div class="grid fit-content directionRTL" data-expected-width="375" data-expected-height="450">
+        <div class="cell firstRowFirstColumn"   data-offset-x="302" data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowSecondColumn"  data-offset-x="202" data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowFirstColumn"  data-offset-x="302" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="202" data-offset-y="214" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'center' | justify-items: 'center'</p>
+    <div class="grid fit-content directionRTL itemsCenter" data-expected-width="375" data-expected-height="450">
+        <div class="cell firstRowFirstColumn"     data-offset-x="274" data-offset-y="86" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="124" data-offset-y="286" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'end' | justify-items: 'end'</p>
+    <div class="grid fit-content directionRTL itemsEnd"       data-expected-width="375" data-expected-height="450">
+        <div class="cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="358" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'start' | justify-items: 'left'</p>
+    <div class="grid fit-content directionRTL alignItemsStart justifyItemsLeft"      data-expected-width="375" data-expected-height="450">
+        <div class="cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'start' | justify-items: 'right'</p>
+    <div class="grid fit-content directionRTL alignItemsStart justifyItemsRight"     data-expected-width="375" data-expected-height="450">
+        <div class="cell firstRowFirstColumn"     data-offset-x="302" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (ortho) | align-items: 'self-start' | justify-items: 'self-start'</p>
+    <div class="grid fit-content directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="46"  data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
+    <div class="grid fit-content directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="302" data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="358" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
+    <div class="grid fit-content directionRTL itemsSelfStart" data-expected-width="375" data-expected-height="450">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="302" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="202"  data-offset-y="214" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div>
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (parall) | align-items: 'self-end' | justify-items: 'self-end'</p>
+    <div class="grid fit-content directionRTL itemsSelfEnd" data-expected-width="375" data-expected-height="450">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="246" data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="230" data-offset-y="210" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="46" data-offset-y="358" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-overflow.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-overflow.html
new file mode 100644
index 0000000000..37d5c14600
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-overflow.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: overflow for justify and align</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#overflow-values">
+<meta name="assert" content="This test checks that both safe and unsafe overflow positions are applied correctly for align-items and justify-items properties.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+
+<style>
+
+.grid {
+    grid-template-columns: 150px 150px;
+    grid-template-rows: 120px 120px 120px;
+    margin-bottom: 20px;
+}
+.cellOverflowWidth {
+    width: 180px;
+    height: 40px;
+}
+.cellOverflowHeight {
+    width: 50px;
+    height: 150px;
+}
+.cellWithNoOverflow {
+    width: 50px;
+    height: 40px;
+}
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<p>This test checks that the 'overflow' keyword is applied correctly for 'align' and 'justify' properties.</p>
+
+<div style="position: relative">
+    <div class="grid fit-content alignItemsCenter justifyItemsCenter" data-expected-width="300" data-expected-height="360">
+        <div class="cellOverflowWidth  firstRowFirstColumn" data-offset-x="-15" data-offset-y="40" data-expected-width="180" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellOverflowWidth  secondRowSecondColumn" data-offset-x="135" data-offset-y="160" data-expected-width="180" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content alignItemsUnsafeCenter justifyItemsUnsafeCenter" data-expected-width="300" data-expected-height="360">
+        <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="50" data-offset-y="-15" data-expected-width="50" data-expected-height="150"></div>
+        <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="200" data-offset-y="105" data-expected-width="50" data-expected-height="150"></div>
+        <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content alignItemsSafeCenter justifyItemsSafeCenter" data-expected-width="300" data-expected-height="360">
+        <div class="cellOverflowWidth  firstRowFirstColumn" data-offset-x="0" data-offset-y="40" data-expected-width="180" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellOverflowWidth  secondRowSecondColumn" data-offset-x="150" data-offset-y="160" data-expected-width="180" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content alignItemsSafeCenter justifyItemsSafeCenter" data-expected-width="300" data-expected-height="360">
+        <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div>
+        <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="200" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellOverflowHeight secondRowSecondColumn alignSelfCenterSafe justifySelfCenterSafe" data-offset-x="200" data-offset-y="120" data-expected-width="50" data-expected-height="150"></div>
+        <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="200" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content alignItemsEnd justifyItemsEnd" data-expected-width="300" data-expected-height="360">
+        <div class="cellOverflowWidth  firstRowFirstColumn" data-offset-x="-30" data-offset-y="80" data-expected-width="180" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow secondRowFirstColumn justifySelfCenter" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="250" data-offset-y="80" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellOverflowWidth  secondRowSecondColumn" data-offset-x="120" data-offset-y="200" data-expected-width="180" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content alignItemsUnsafeEnd justifyItemsUnsafeEnd" data-expected-width="300" data-expected-height="360">
+        <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="100" data-offset-y="-30" data-expected-width="50" data-expected-height="150"></div>
+        <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow firstRowSecondColumn alignSelfCenter" data-offset-x="250" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="250" data-offset-y="90" data-expected-width="50" data-expected-height="150"></div>
+        <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content alignItemsSafeEnd justifyItemsSafeEnd" data-expected-width="300" data-expected-height="360">
+        <div class="cellOverflowWidth  firstRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="180" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow secondRowFirstColumn justifySelfUnsafeCenter" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow firstRowSecondColumn" data-offset-x="250" data-offset-y="80" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellOverflowWidth  secondRowSecondColumn" data-offset-x="150" data-offset-y="200" data-expected-width="180" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content alignItemsSafeEnd justifyItemsSafeEnd" data-expected-width="300" data-expected-height="360">
+        <div class="cellOverflowHeight firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="150"></div>
+        <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="100" data-offset-y="200" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="100" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellWithNoOverflow firstRowSecondColumn alignSelfUnsafeCenter" data-offset-x="250" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
+        <div class="cellOverflowHeight secondRowSecondColumn" data-offset-x="250" data-offset-y="120" data-expected-width="50" data-expected-height="150"></div>
+        <div class="cellWithNoOverflow thirdRowSecondColumn" data-offset-x="250" data-offset-y="320" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-stretch-with-orthogonal-flows.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-stretch-with-orthogonal-flows.html
new file mode 100644
index 0000000000..3b50bb4d6e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-stretch-with-orthogonal-flows.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test:align stretch with orthogonal flows</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#orthogonal-flows">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
+<meta name="assert" content="This test checks that stretching alignment works as expected with orthogonal flows, in horizontal and vertical writing mode.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+
+.container {
+    position: relative;
+}
+.grid {
+    grid-template-columns: 100px 100px;
+    grid-template-rows: 150px 150px;
+    font: 10px/1 ahem;
+    margin-bottom: 20px;
+}
+.widthAndHeightSet {
+    width: 20px;
+    height: 40px;
+}
+.onlyWidthSet { width: 20px; }
+.onlyHeightSet { height: 40px; }
+.maxHeight { max-height: 160px; }
+.maxWidth { max-width: 90px; }
+.minWidth { min-width: 120px; }
+.minHeight { min-height: 220px; }
+.topAutoMargin { margin-top: auto; }
+.bottomAutoMargin { margin-bottom: auto; }
+.leftAutoMargin { margin-left: auto; }
+.rightAutoMargin { margin-right: auto; }
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<p>This test checks that stretching alignment works as expected with orthogonal flows.</p>
+
+<p>HORIZONTAL vs VERTICAL-RL</p>
+<div class="container">
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="300">
+        <div class="verticalRL firstRowFirstColumn selfStretch widthAndHeightSet" data-expected-width="20"  data-expected-height="40">XXX</div>
+        <div class="verticalRL firstRowSecondColumn selfStretch onlyWidthSet" data-expected-width="20"  data-expected-height="150">XXX</div>
+        <div class="verticalRL secondRowFirstColumn selfStretch onlyHeightSet" data-expected-width="100" data-expected-height="40">XXX</div>
+        <div class="verticalRL secondRowSecondColumn selfSelfStart" data-expected-width="10"  data-expected-height="30">XXX</div>
+    </div>
+</div>
+
+<div class="container">
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="300">
+        <div class="verticalRL firstRowFirstColumn selfStretch bottomAutoMargin" data-expected-width="100" data-expected-height="30">XXX</div>
+        <div class="verticalRL firstRowSecondColumn selfStretch leftAutoMargin" data-expected-width="10"  data-expected-height="150">XXX</div>
+        <div class="verticalRL secondRowFirstColumn selfStretch topAutoMargin" data-expected-width="100" data-expected-height="30">XXX</div>
+        <div class="verticalRL secondRowSecondColumn selfStretch rightAutoMargin" data-expected-width="10"  data-expected-height="150">XXX</div>
+    </div>
+</div>
+
+<p>HORIZONTAL vs VERTICAL-LR</p>
+<div class="container">
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="300">
+        <div class="verticalLR firstRowFirstColumn selfStretch widthAndHeightSet" data-expected-width="20"  data-expected-height="40">XXX</div>
+        <div class="verticalLR firstRowSecondColumn selfStretch onlyWidthSet" data-expected-width="20"  data-expected-height="150">XXX</div>
+        <div class="verticalLR secondRowFirstColumn selfStretch onlyHeightSet" data-expected-width="100" data-expected-height="40">XXX</div>
+        <div class="verticalLR secondRowSecondColumn selfSelfStart" data-expected-width="10"  data-expected-height="30">XXX</div>
+    </div>
+</div>
+<div class="container">
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="300">
+        <div class="verticalLR firstRowFirstColumn selfStretch bottomAutoMargin" data-expected-width="100" data-expected-height="30">XXX</div>
+        <div class="verticalLR firstRowSecondColumn selfStretch leftAutoMargin" data-expected-width="10"  data-expected-height="150">XXX</div>
+        <div class="verticalLR secondRowFirstColumn selfStretch topAutoMargin" data-expected-width="100" data-expected-height="30">XXX</div>
+        <div class="verticalLR secondRowSecondColumn selfStretch rightAutoMargin" data-expected-width="10"  data-expected-height="150">XXX</div>
+    </div>
+</div>
+
+<p>VERTICAL-RL vs HORIZONTAL</p>
+<div class="container">
+    <div class="grid fit-content verticalRL" data-expected-width="300" data-expected-height="200">
+        <div class="horizontalTB firstRowFirstColumn selfStretch widthAndHeightSet" data-expected-width="20"  data-expected-height="40">XXX</div>
+        <div class="horizontalTB firstRowSecondColumn selfStretch onlyWidthSet" data-expected-width="20"  data-expected-height="100">XXX</div>
+        <div class="horizontalTB secondRowFirstColumn selfStretch onlyHeightSet" data-expected-width="150" data-expected-height="40">XXX</div>
+        <div class="horizontalTB secondRowSecondColumn selfSelfStart" data-expected-width="30"  data-expected-height="10">XXX</div>
+    </div>
+</div>
+<div class="container">
+    <div class="grid fit-content verticalRL" data-expected-width="300" data-expected-height="200">
+        <div class="horizontalTB firstRowFirstColumn selfStretch bottomAutoMargin" data-expected-width="150" data-expected-height="10">XXX</div>
+        <div class="horizontalTB firstRowSecondColumn selfStretch leftAutoMargin" data-expected-width="30"  data-expected-height="100">XXX</div>
+        <div class="horizontalTB secondRowFirstColumn selfStretch topAutoMargin" data-expected-width="150" data-expected-height="10">XXX</div>
+        <div class="horizontalTB secondRowSecondColumn selfStretch rightAutoMargin" data-expected-width="30"  data-expected-height="100">XXX</div>
+    </div>
+</div>
+
+<p>VERTICAL-LR vs HORIZONTAL</p>
+<div class="container">
+    <div class="grid fit-content verticalLR" data-expected-width="300" data-expected-height="200">
+        <div class="horizontalTB firstRowFirstColumn selfStretch widthAndHeightSet" data-expected-width="20"  data-expected-height="40">XXX</div>
+        <div class="horizontalTB firstRowSecondColumn selfStretch onlyWidthSet" data-expected-width="20"  data-expected-height="100">XXX</div>
+        <div class="horizontalTB secondRowFirstColumn selfStretch onlyHeightSet" data-expected-width="150" data-expected-height="40">XXX</div>
+        <div class="horizontalTB secondRowSecondColumn selfSelfStart" data-expected-width="30"  data-expected-height="10">XXX</div>
+    </div>
+</div>
+<div class="container">
+    <div class="grid fit-content verticalLR" data-expected-width="300" data-expected-height="200">
+        <div class="horizontalTB firstRowFirstColumn selfStretch bottomAutoMargin" data-expected-width="150" data-expected-height="10">XXX</div>
+        <div class="horizontalTB firstRowSecondColumn selfStretch leftAutoMargin" data-expected-width="30"  data-expected-height="100">XXX</div>
+        <div class="horizontalTB secondRowFirstColumn selfStretch topAutoMargin" data-expected-width="150" data-expected-height="10">XXX</div>
+        <div class="horizontalTB secondRowSecondColumn selfStretch rightAutoMargin" data-expected-width="30"  data-expected-height="100">XXX</div>
+    </div>
+</div>
+
+<div id="log"></div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-stretch.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-stretch.html
new file mode 100644
index 0000000000..7af6695a65
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-stretch.html
@@ -0,0 +1,196 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test: stretch value for align and justify properties</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-self-position">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+
+<meta name="assert" content="This test checks that the 'stretch' value is applied correctly for 'align' and 'justify' properties for both RTL/LTR directions and horizontal/vertical writing modes.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+body {
+    margin: 0;
+}
+
+.grid {
+    grid-template-columns: 100px 100px;
+    grid-template-rows: 200px 200px;
+    margin-bottom: 20px;
+}
+
+.widthAndHeightSet {
+    width: 20px;
+    height: 40px;
+}
+.onlyWidthSet { width: 20px; }
+.onlyHeightSet { height: 40px; }
+.maxHeight { max-height: 160px; }
+.maxWidth { max-width: 90px; }
+.minWidth { min-width: 120px; }
+.minHeight { min-height: 220px; }
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div style="position: relative">
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+        <div class="alignSelfStretch justifySelfStart firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="0" data-expected-height="200"></div>
+        <div class="widthAndHeightSet alignSelfStretch justifySelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="onlyWidthSet alignSelfStretch justifySelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
+        <div class="onlyHeightSet alignSelfStretch justifySelfStart secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="0" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+        <div class="alignSelfStart justifySelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0"></div>
+        <div class="widthAndHeightSet alignSelfStart justifySelfStretch firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="onlyWidthSet alignSelfStart justifySelfStretch secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="0"></div>
+        <div class="onlyHeightSet alignSelfStart justifySelfStretch secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+        <div class="maxHeight alignSelfStretch justifySelfStart firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="0" data-expected-height="160"></div>
+        <div class="minWidth widthAndHeightSet alignSelfStretch justifySelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="120" data-expected-height="40"></div>
+        <div class="minHeight onlyWidthSet alignSelfStretch justifySelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="220"></div>
+        <div class="maxWidth onlyHeightSet alignSelfStretch justifySelfStretch secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="90" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+        <div class="alignSelfStretch justifySelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+        <div class="widthAndHeightSet alignSelfStretch justifySelfStretch firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="onlyWidthSet alignSelfStretch justifySelfStretch secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
+        <div class="onlyHeightSet alignSelfStretch justifySelfStretch secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content alignItemsStretch justifyItemsStart" data-expected-width="200" data-expected-height="400">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="0" data-expected-height="200"></div>
+        <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
+        <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="0" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content alignItemsStart justifyItemsStretch" data-expected-width="200" data-expected-height="400">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0"></div>
+        <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="0"></div>
+        <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content alignItemsStretch justifyItemsStretch" data-expected-width="200" data-expected-height="400">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+        <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
+        <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content alignItemsAuto justifyItemsAuto" data-expected-width="200" data-expected-height="400">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+        <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
+        <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+        <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
+        <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+        <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="200"></div>
+        <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="200"></div>
+    </div>
+</div>
+
+<!-- RTL direction (it should not affect the block-flow direction). -->
+<div style="position: relative">
+    <div class="grid fit-content directionRTL alignItemsStretch justifyItemsStretch" data-expected-width="200" data-expected-height="400">
+        <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+        <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="180" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
+        <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- RTL direction (it should not affect the block-flow) with opposite directions grid container vs grid item. -->
+<div style="position: relative">
+    <div class="grid fit-content alignItemsStretch justifyItemsStretch" data-expected-width="200" data-expected-height="400">
+        <div class="firstRowFirstColumn  directionRTL" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+        <div class="widthAndHeightSet firstRowSecondColumn  directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="onlyWidthSet secondRowFirstColumn  directionRTL" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
+        <div class="onlyHeightSet secondRowSecondColumn  directionRTL" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- Vertical RL writing mode. -->
+<div style="position: relative">
+    <div class="grid fit-content verticalRL alignItemsStretch justifyItemsStretch" data-expected-width="400" data-expected-height="200">
+        <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+        <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div>
+        <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
+        <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100"></div>
+    </div>
+</div>
+
+<!-- Vertical LR writing mode. -->
+<div style="position: relative">
+    <div class="grid fit-content verticalLR alignItemsStretch justifyItemsStretch" data-expected-width="400" data-expected-height="200">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+        <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="100"></div>
+        <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+        <div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="200" data-expected-height="100"></div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-stretching-replaced-items.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-stretching-replaced-items.html
new file mode 100644
index 0000000000..b1dbbd8fd2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-stretching-replaced-items.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: alignment for replaced element</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element">
+<link rel="help" href="https://drafts.csswg.org/css-align/#align-grid">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#grid-item-sizing">
+<meta name="assert" content="This test checks that the alignment properties apply the 'stretch' value correctly on replaced elements, such as images.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+
+<style>
+.grid {
+  grid-template-columns: 500px;
+  grid-template-rows: 500px;
+}
+.fixedSizes {
+   width: 150px;
+   height: 150px;
+}
+.autoMargins {
+   margin: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+    <p>This test checks that the alignment properties align-self and justify-self apply the 'stretch' value correctly on replaced elements.</p>
+
+    <div style="position: relative">
+        <p>The blue image's original size is 100px x 100px, default alignment is resolved as 'start' for replaced elements so it prevents stretching to be applied.</p>
+        <div class="grid">
+            <img src="/css/support/blue-100.png" data-expected-width="100" data-expected-height="100"/>
+        </div>
+    </div>
+
+    <div style="position: relative">
+        <p>The blue image's original size is 100px x 100px, 'normal' is resolved as 'start' for replaced elements so it prevents stretching to be applied.</p>
+        <div class="grid itemsNormal">
+            <img src="/css/support/blue-100.png" data-expected-width="100" data-expected-height="100"/>
+        </div>
+    </div>
+
+    <div style="position: relative">
+        <p>The blue image's original size is 100px x 100px, but it should be stretched to fill the 500px x 500px grid area it's placed into.</p>
+        <div class="grid alignItemsStretch justifyItemsStretch">
+            <img src="/css/support/blue-100.png" data-expected-width="500" data-expected-height="500"/>
+        </div>
+    </div>
+
+    <div style="position: relative">
+        <p>The blue image's original size is 100px x 100px, non-stretch values prevent stretching to be applied.</p>
+        <div class="grid itemsCenter">
+            <img src="/css/support/blue-100.png" data-expected-width="100" data-expected-height="100"/>
+        </div>
+    </div>
+
+    <div style="position: relative">
+        <p>The blue image's original size is 100px x 100px, non-auto sizes prevent stretching to be applied.</p>
+        <div class="grid">
+            <img class="fixedSizes" src="/css/support/blue-100.png" data-expected-width="150" data-expected-height="150"/>
+        </div>
+    </div>
+
+    <div style="position: relative">
+        <p>The blue image's original size is 100px x 100px, auto-margins prevent stretching to be applied.</p>
+        <div class="grid">
+            <img class="autoMargins" src="/css/support/blue-100.png" data-expected-width="100" data-expected-height="100"/>
+        </div>
+    </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align.html
new file mode 100644
index 0000000000..79aa684740
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align.html
@@ -0,0 +1,225 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test: align-self property</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#alignment-values">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-direction">
+<meta name="assert" content="This test checks that the align-self property is applied correctly for RL and LR, vertical and horizontal writing modes.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+
+.grid {
+    grid-template-columns: 100px 100px;
+    grid-template-rows: 200px 200px;
+    margin-bottom: 20px;
+}
+
+.cell {
+    width: 20px;
+    height: 40px;
+}
+
+.item {
+    width: 8px;
+    height: 16px;
+    background: black;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div style="position: relative">
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+        <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+        <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+        <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- Default alignment and initial values. -->
+<div style="position: relative">
+    <div class="grid fit-content alignItemsCenter" data-expected-width="200" data-expected-height="400">
+        <div class="cell alignSelfAuto firstRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+        <div class="alignSelfAuto firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+        <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfEnd secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- RTL direction (it should not affect the block-flow direction). -->
+<div style="position: relative">
+     <div class="grid fit-content directionRTL" data-expected-width="200" data-expected-height="400">
+         <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+         <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="80" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+     </div>
+</div>
+
+<div style="position: relative">
+     <div class="grid fit-content directionRTL" data-expected-width="200" data-expected-height="400">
+         <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="180" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="180" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="80" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div>
+     </div>
+</div>
+
+<!-- RTL direction (it should not affect the block-flow) with opposite directions grid container vs grid item. -->
+<div style="position: relative">
+     <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+         <div class="alignSelfStretch firstRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+         <div class="cell alignSelfStart firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfEnd firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfCenter secondRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+     </div>
+</div>
+
+<div style="position: relative">
+     <div class="grid fit-content" data-expected-width="200" data-expected-height="400">
+         <div class="cell alignSelfFlexEnd firstRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfFlexStart firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfSelfStart secondRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfSelfEnd secondRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div>
+     </div>
+</div>
+
+<!-- Vertical RL writing mode. -->
+<div style="position: relative">
+    <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
+        <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
+        <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- Vertical LR writing mode. -->
+<div style="position: relative">
+    <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
+        <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+        <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
+        <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- Vertical RL writing mode with opposite block-flow directions grid container vs grid item. -->
+<div style="position: relative">
+    <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
+        <div class="alignSelfStretch firstRowFirstColumn verticalLR" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100">
+        </div>
+        <div class="cell alignSelfStart firstRowSecondColumn verticalLR" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfEnd firstRowSecondColumn verticalLR" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfCenter secondRowFirstColumn verticalLR" data-offset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content verticalRL" data-expected-width="400" data-expected-height="200">
+        <div class="cell alignSelfFlexEnd firstRowFirstColumn verticalLR" data-offset-x="200" data-offset-y="0" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfFlexStart firstRowSecondColumn verticalLR" data-offset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfSelfStart secondRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfSelfEnd secondRowSecondColumn verticalLR" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+    </div>
+</div>
+
+<!-- Vertical LR writing mode with opposite block-flow directions grid container vs grid item. -->
+<div style="position: relative">
+    <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
+        <div class="alignSelfStretch firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
+        </div>
+        <div class="cell alignSelfStart firstRowSecondColumn verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfEnd firstRowSecondColumn verticalRL" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfCenter secondRowFirstColumn verticalRL" data-offset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content verticalLR" data-expected-width="400" data-expected-height="200">
+        <div class="cell alignSelfFlexEnd firstRowFirstColumn verticalRL" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfFlexStart firstRowSecondColumn verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfSelfStart secondRowFirstColumn verticalRL" data-offset-x="380" data-offset-y="0" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfSelfEnd secondRowSecondColumn verticalRL" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-001.html
new file mode 100644
index 0000000000..ee931b990f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-001.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid's align-items value from 'stretch' to 'start' causes non-replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: stretch;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 200);
+  grid.style.alignItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-height", 100);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-002.html
new file mode 100644
index 0000000000..2ef899fca9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-002.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid's align-items value from 'start' to 'stretch' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 100);
+  grid.style.alignItems = "stretch";
+  evaluateStyleChange(item, "after", "data-expected-height", 200);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-003.html
new file mode 100644
index 0000000000..47cb3347db
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-003.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<meta name="assert" content="Changing the grid's align-items value from 'stretch' to 'normal' causes no effect on non-replaced items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: stretch;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 200);
+  grid.style.alignItems = "normal";
+  evaluateStyleChange(item, "after", "data-expected-height", 200);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-004.html
new file mode 100644
index 0000000000..d3f22e9bc9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-004.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<meta name="assert" content="Changing the grid item's align-items value from 'normal' to 'stretch' causes no effect on non-replaced items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: normal;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 200);
+  grid.style.alignItems = "stretch";
+  evaluateStyleChange(item, "after", "data-expected-height", 200);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-005.html
new file mode 100644
index 0000000000..bb9de73d73
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-005.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<meta name="assert" content="Changing the grid's align-items value from 'start' to 'normal' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 100);
+  grid.style.alignItems = "normal";
+  evaluateStyleChange(item, "after", "data-expected-height", 200);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-006.html
new file mode 100644
index 0000000000..5a61e333f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-006.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid's align-items value from 'normal' to 'start' causes non-replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: normal;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 200);
+  grid.style.alignItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-height", 100);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-007.html
new file mode 100644
index 0000000000..b50d8be7a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-007.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid item's align-items value from 'start' to 'stretch' causes non-replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 80px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 100);
+  grid.style.alignItems = "stretch";
+  evaluateStyleChange(item, "after", "data-expected-height", 80);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-008.html
new file mode 100644
index 0000000000..fd394b83e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-008.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid item's align-items value from 'stretch' to 'start' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 80px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: stretch;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 80);
+  grid.style.alignItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-height", 100);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-009.html
new file mode 100644
index 0000000000..0ef6351dbb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-009.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid item's align-items value from 'start' to 'normal' causes non-replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 80px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 100);
+  grid.style.alignItems = "normal";
+  evaluateStyleChange(item, "after", "data-expected-height", 80);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-010.html
new file mode 100644
index 0000000000..d9eb6066b9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-010.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid item's align-items value from 'normal' to 'start' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 80px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: normal;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 80);
+  grid.style.alignItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-height", 100);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-011.html
new file mode 100644
index 0000000000..c06918538d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-011.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid's align-items value from 'stretch' to 'start' causes replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: stretch;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 200,
+      'data-expected-height': 200,
+    },
+  });
+  grid.style.alignItems = 'start';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-012.html
new file mode 100644
index 0000000000..1fe7d2696f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-012.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid's align-items value from 'start' to 'stretch' causes replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  grid.style.alignItems = 'stretch';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 200,
+      'data-expected-height': 200,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-013.html
new file mode 100644
index 0000000000..266e2124fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-013.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<meta name="assert" content="Changing the grid's align-items value from 'stretch' to 'normal' causes replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: stretch;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 200,
+      'data-expected-height': 200,
+    },
+  });
+  grid.style.alignItems = 'normal';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-014.html
new file mode 100644
index 0000000000..23f79cba32
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-014.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<meta name="assert" content="Changing the grid item's align-items value from 'normal' to 'stretch' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: normal;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  grid.style.alignItems = 'stretch';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 200,
+      'data-expected-height': 200,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-015.html
new file mode 100644
index 0000000000..405dbcf7bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-015.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<meta name="assert" content="Changing the grid item's align-items value from 'start' to 'normal' causes no effect on replaced items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 100);
+  grid.style.alignItems = "normal";
+  evaluateStyleChange(item, "after", "data-expected-height", 100);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img data-expected-width="100" id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-016.html
new file mode 100644
index 0000000000..f3477a2aa9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-016.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<meta name="assert" content="Changing the grid item's align-items value from 'normal' to 'start' causes no effect on replaced items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: normal;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 100);
+  grid.style.alignItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-height", 100);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img data-expected-width="100" id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-017.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-017.html
new file mode 100644
index 0000000000..2f45db5eae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-017.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<meta name="assert" content="Changing the grid item's align-items value from 'start' to 'stretch' causes replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 80px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  grid.style.alignItems = 'stretch';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 80,
+      'data-expected-height': 80,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-018.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-018.html
new file mode 100644
index 0000000000..2aa06ab2e9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-018.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid item's align-items value from 'stretch' to 'start' causes replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 80px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: stretch;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 80,
+      'data-expected-height': 80,
+    },
+  });
+  grid.style.alignItems = 'start';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-019.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-019.html
new file mode 100644
index 0000000000..49896c21f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-019.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid's justify-items value from 'stretch' to 'start' causes non-replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: stretch;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 200);
+  grid.style.justifyItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-width", 120);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-020.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-020.html
new file mode 100644
index 0000000000..e04356bc72
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-020.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid's justify-items value from 'start' to 'stretch' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 120);
+  grid.style.justifyItems = "stretch";
+  evaluateStyleChange(item, "after", "data-expected-width", 200);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-021.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-021.html
new file mode 100644
index 0000000000..29aa8ff6eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-021.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<meta name="assert" content="Changing the grid's justify-items value from 'stretch' to 'normal' causes no effect on non-replaced items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: stretch;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 200);
+  grid.style.alignItems = "normal";
+  evaluateStyleChange(item, "after", "data-expected-width", 200);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-022.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-022.html
new file mode 100644
index 0000000000..b986bbe659
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-022.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<meta name="assert" content="Changing the grid item's justify-items value from 'normal' to 'stretch' causes no effect on non-replaced items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: normal;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 200);
+  grid.style.justifyItems = "stretch";
+  evaluateStyleChange(item, "after", "data-expected-width", 200);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-023.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-023.html
new file mode 100644
index 0000000000..e896326a95
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-023.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<meta name="assert" content="Changing the grid's justify-items value from 'start' to 'normal' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 120);
+  grid.style.justifyItems = "normal";
+  evaluateStyleChange(item, "after", "data-expected-width", 200);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-024.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-024.html
new file mode 100644
index 0000000000..b236ef15d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-024.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid's justify-items value from 'normal' to 'start' causes non-replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: normal;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 200);
+  grid.style.justifyItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-width", 120);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-025.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-025.html
new file mode 100644
index 0000000000..6f268ee774
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-025.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid item's justify-items value from 'start' to 'stretch' causes non-replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 80px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 120);
+  grid.style.justifyItems = "stretch";
+  evaluateStyleChange(item, "after", "data-expected-width", 80);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XXXXXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-026.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-026.html
new file mode 100644
index 0000000000..c3bfc67a7e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-026.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid item's justify-items value from 'stretch' to 'start' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 80px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: stretch;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 80);
+  grid.style.justifyItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-width", 120);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XXXXXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-027.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-027.html
new file mode 100644
index 0000000000..5f1512c8c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-027.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid item's justify-items value from 'start' to 'normal' causes non-replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 80px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 120);
+  grid.style.justifyItems = "normal";
+  evaluateStyleChange(item, "after", "data-expected-width", 80);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XXXXXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-028.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-028.html
new file mode 100644
index 0000000000..2fb651162a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-028.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid item's justify-items value from 'normal' to 'start' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 80px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: normal;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 80);
+  grid.style.justifyItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-width", 120);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XXXXXX<br>X<br>XX XXX</div>
+</div>
+</body>
+
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-029.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-029.html
new file mode 100644
index 0000000000..6d41acfb2a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-029.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid's justify-items value from 'stretch' to 'start' causes replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: stretch;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 200,
+      'data-expected-height': 200,
+    },
+  });
+  grid.style.justifyItems = 'start';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-030.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-030.html
new file mode 100644
index 0000000000..559f04a11e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-030.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid's justify-items value from 'start' to 'stretch' causes replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  grid.style.justifyItems = 'stretch';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 200,
+      'data-expected-height': 200,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-031.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-031.html
new file mode 100644
index 0000000000..843e1b2acd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-031.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<meta name="assert" content="Changing the grid's justify-items value from 'stretch' to 'normal' causes replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: stretch;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 200,
+      'data-expected-height': 200,
+    },
+  });
+  grid.style.justifyItems = 'normal';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-032.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-032.html
new file mode 100644
index 0000000000..011eea64a2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-032.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<meta name="assert" content="Changing the grid item's justify-items value from 'normal' to 'stretch' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: normal;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 100);
+  grid.style.justifyItems = "stretch";
+  evaluateStyleChange(item, "after", "data-expected-width", 200);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img data-expected-width="100" id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-033.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-033.html
new file mode 100644
index 0000000000..eace9b956d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-033.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<meta name="assert" content="Changing the grid item's justify-items value from 'start' to 'normal' causes no effect on replaced items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 100);
+  grid.style.justifyItems = "normal";
+  evaluateStyleChange(item, "after", "data-expected-width", 100);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img data-expected-height="100" id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-034.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-034.html
new file mode 100644
index 0000000000..7b22dffe31
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-034.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<meta name="assert" content="Changing the grid item's justify-items value from 'normal' to 'start' causes no effect on replaced items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: normal;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 100);
+  grid.style.justifyItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-width", 100);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img data-expected-height="100" id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-035.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-035.html
new file mode 100644
index 0000000000..b4b0725d8d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-035.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<meta name="assert" content="Changing the grid item's justify-items value from 'start' to 'stretch' causes replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 80px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  grid.style.justifyItems = 'stretch';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 80,
+      'data-expected-height': 80,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-036.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-036.html
new file mode 100644
index 0000000000..99396bf173
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-036.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid item's justify-items value from 'stretch' to 'start' causes replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 80px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: stretch;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 80,
+      'data-expected-height': 80,
+    },
+  });
+  grid.style.justifyItems = 'start';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-001.html
new file mode 100644
index 0000000000..25ce0619db
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-001.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position">
+<meta name="assert" content="Changing the 'align-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.">
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 100px / 50px 50px 50px;
+  background: grey;
+  align-items: baseline;
+}
+#item1 {
+  height: 20px;
+  background: blue;
+}
+#item2 {
+  height: 50px;
+  background: green;
+}
+#item3 {
+  height: 30px;
+  background: red;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+function runTest() {
+    let before = {
+        item1: {"data-offset-y": 30 },
+        item2: {"data-offset-y": 0  },
+        item3: {"data-offset-y": 20 }
+    };
+
+    let after = {
+        item1: {"data-offset-y": 10 },
+        item2: {"data-offset-y": 50 },
+        item3: {"data-offset-y": 0  }
+    };
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.alignSelf = "end";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="runTest()">
+    <div id="container">
+        <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0"></div>
+        <div id="item2" data-expected-width="50" data-expected-height="50" data-offset-x="50"></div>
+        <div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100"></div>
+    </div>
+    <div id="log"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-002.html
new file mode 100644
index 0000000000..c97be7ddb8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-002.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position">
+<meta name="assert" content="Changing the 'align-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context.">
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 100px / 50px 50px 50px;
+  background: grey;
+  align-items: baseline;
+}
+#item1 {
+  height: 20px;
+  background: blue;
+}
+#item2 {
+  height: 50px;
+  background: green;
+  align-self: center;
+}
+#item3 {
+  height: 30px;
+  background: red;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+function runTest() {
+    let before = {
+        item1: {"data-offset-y": 10 },
+        item2: {"data-offset-y": 25 },
+        item3: {"data-offset-y": 0  }
+    };
+
+    let after = {
+        item1: {"data-offset-y": 30 },
+        item2: {"data-offset-y": 0  },
+        item3: {"data-offset-y": 20 }
+    };
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.alignSelf = "baseline";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="runTest()">
+    <div id="container">
+        <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0"></div>
+        <div id="item2" data-expected-width="50" data-expected-height="50" data-offset-x="50"></div>
+        <div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100"></div>
+    </div>
+    <div id="log"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-003.html
new file mode 100644
index 0000000000..dc7f350af5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-003.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing the Self-Alignment properties to interfere in Baseline Alignment</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position">
+<meta name="assert" content="Changing the justify-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.">
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 50px 50px 50px / 100px;
+  background: grey;
+  justify-items: baseline;
+}
+#container > div { writing-mode: vertical-rl; }
+#item1 {
+  width: 20px;
+  background: blue;
+}
+#item2 {
+  width: 50px;
+  margin: 0 10px;
+  background: green;
+}
+#item3 {
+  width: 30px;
+  background: red;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+function runTest() {
+    let before = {
+        item1: {"data-offset-x": 40 },
+        item2: {"data-offset-x": 40 },
+        item3: {"data-offset-x": 40 }
+    };
+
+    let after = {
+        item1: {"data-offset-x": 70 },
+        item2: {"data-offset-x": 40 },
+        item3: {"data-offset-x": 70 }
+    };
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.justifySelf = "end";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="runTest()">
+    <div id="container">
+        <div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0"></div>
+        <div id="item2" data-expected-width="50" data-expected-height="50" data-offset-y="50"></div>
+        <div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100"></div>
+    </div>
+    <div id="log"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-004.html
new file mode 100644
index 0000000000..84475fdbce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-004.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing the Self-Alignment properties to interfere in Baseline Alignment</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position">
+<meta name="assert" content="Changing the 'justify-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context.">
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 50px 50px 50px / 100px;
+  background: grey;
+  justify-items: baseline;
+}
+#container > div { writing-mode: vertical-rl; }
+#item1 {
+  width: 20px;
+  background: blue;
+}
+#item2 {
+  width: 50px;
+  margin: 0 10px;
+  background: green;
+  justify-self: center;
+}
+#item3 {
+  width: 30px;
+  background: red;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+function runTest() {
+    let before = {
+        item1: {"data-offset-x": 70 },
+        item2: {"data-offset-x": 25 },
+        item3: {"data-offset-x": 70 }
+    };
+
+    let after = {
+        item1: {"data-offset-x": 40 },
+        item2: {"data-offset-x": 40 },
+        item3: {"data-offset-x": 40 }
+    };
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.justifySelf = "baseline";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="runTest()">
+    <div id="container">
+        <div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0"></div>
+        <div id="item2" data-expected-width="50" data-expected-height="50" data-offset-y="50"></div>
+        <div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100"></div>
+    </div>
+    <div id="log"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-005.html
new file mode 100644
index 0000000000..919c6eefa8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-005.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position">
+<meta name="assert" content="Changing the 'align-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 100px / 50px 50px 50px;
+  background: grey;
+  align-items: baseline;
+  font-family: Ahem;
+  line-height: 1;
+}
+#item1 {
+  font-size: 20px;
+  background: blue;
+}
+#item2 {
+  font-size: 40px;
+  background: green;
+}
+#item3 {
+  font-size: 30px;
+  background: red;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+    let before = {
+        item1: {"data-offset-y": 16 },
+        item2: {"data-offset-y": 0  },
+        item3: {"data-offset-y": 8  }
+    }
+
+    let after = {
+        item1: {"data-offset-y": 8  },
+        item2: {"data-offset-y": 60 },
+        item3: {"data-offset-y": 0  }
+    }
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.alignSelf = "end";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+    <div id="container">
+        <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0">É</div>
+        <div id="item2" data-expected-width="50" data-expected-height="40" data-offset-x="50">É</div>
+        <div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100">É</div>
+    </div>
+    <div id="log"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-006.html
new file mode 100644
index 0000000000..21e7d0d3ab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-006.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position">
+<meta name="assert" content="Changing the 'align-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 100px / 50px 50px 50px;
+  background: grey;
+  align-items: baseline;
+  font-family: Ahem;
+  line-height: 1;
+}
+#item1 {
+  font-size: 20px;
+  background: blue;
+}
+#item2 {
+  font-size: 40px;
+  background: green;
+  align-self: center;
+}
+#item3 {
+  font-size: 30px;
+  background: red;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+    let before = {
+        item1: {"data-offset-y": 8  },
+        item2: {"data-offset-y": 30 },
+        item3: {"data-offset-y": 0  }
+    }
+
+    let after = {
+        item1: {"data-offset-y": 16 },
+        item2: {"data-offset-y": 0  },
+        item3: {"data-offset-y": 8  }
+    }
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.alignSelf = "baseline";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+    <div id="container">
+        <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0">É</div>
+        <div id="item2" data-expected-width="50" data-expected-height="40" data-offset-x="50">É</div>
+        <div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100">É</div>
+    </div>
+    <div id="log"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-007.html
new file mode 100644
index 0000000000..136a36167a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-007.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing the value of Self-Alignment properties</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position">
+<meta name="assert" content="Changing the 'align-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 50px 50px 50px / 100px;
+  background: grey;
+  justify-items: baseline;
+  font-family: Ahem;
+  text-orientation: sideways;
+  line-height: 1;
+}
+#container > div { writing-mode: vertical-lr; }
+#item1 {
+  font-size: 20px;
+  background: blue;
+}
+#item2 {
+  font-size: 40px;
+  background: green;
+}
+#item3 {
+  font-size: 30px;
+  background: red;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+    let before = {
+        item1: {"data-offset-x": 4 },
+        item2: {"data-offset-x": 0 },
+        item3: {"data-offset-x": 2 }
+    }
+
+    let after = {
+        item1: {"data-offset-x": 2 },
+        item2: {"data-offset-x": 60 },
+        item3: {"data-offset-x": 0  }
+    }
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.justifySelf = "end";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+    <div id="container">
+        <div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0">É</div>
+        <div id="item2" data-expected-width="40" data-expected-height="50" data-offset-y="50">É</div>
+        <div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100">É</div>
+    </div>
+    <div id="log"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-008.html
new file mode 100644
index 0000000000..3145fb0cc6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-008.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing the Self-Alignment properties to interfere in Baseline Alignment</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position">
+<meta name="assert" content="Changing the 'justify-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 50px 50px 50px / 100px;
+  background: grey;
+  justify-items: baseline;
+  font-family: Ahem;
+  text-orientation: sideways;
+  line-height: 1;
+}
+#container > div { writing-mode: vertical-lr; }
+#item1 {
+  font-size: 20px;
+  background: blue;
+}
+#item2 {
+  font-size: 40px;
+  background: green;
+  justify-self: center;
+}
+#item3 {
+  font-size: 30px;
+  background: red;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+    let before = {
+        item1: {"data-offset-x": 2  },
+        item2: {"data-offset-x": 30 },
+        item3: {"data-offset-x": 0  }
+    };
+
+    let after = {
+        item1: {"data-offset-x": 4 },
+        item2: {"data-offset-x": 0 },
+        item3: {"data-offset-x": 2 }
+    };
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.justifySelf = "baseline";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+    <div id="container">
+        <div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0">É</div>
+        <div id="item2" data-expected-width="40" data-expected-height="50" data-offset-y="50">É</div>
+        <div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100">É</div>
+    </div>
+    <div id="log"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-001.html
new file mode 100644
index 0000000000..ef8c0e4d34
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-001.html
@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Grid: Grid container baseline</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+<link rel="help" href="https://crbug.com/234191">
+<link rel="match" href="references/grid-baseline-001-ref.html">
+<meta name="assert" content="Check the first baselines of a grid container."/>
+
+<style>
+body {
+    margin: 0;
+}
+.inline-grid {
+    display: inline-grid;
+    background-color: lightgrey;
+    margin-top: 5px;
+    grid-auto-flow: column;
+}
+.grid {
+    display: grid;
+    background-color: grey;
+    margin-top: 10px;
+    grid-auto-flow: column;
+}
+.empty {
+    border-style: solid;
+    border-width: 5px 0px 10px;
+    padding: 2px 0px 4px;
+    margin: 10px 0px 20px;
+}
+.column {
+    grid-auto-flow: row;
+}
+.firstRowFirstColumn {
+    grid-column: 1;
+    grid-row: 1;
+}
+.secondRowFirstColumn {
+    grid-column: 1;
+    grid-row: 2;
+}
+</style>
+
+<body style="position: relative">
+
+<!-- If any of the grid items whose areas intersect the grid container's first
+row/column participate in baseline alignment, the grid container's baseline is
+the baseline of those grid items. -->
+<div>
+before text
+<div class="inline-grid" style="grid-auto-rows: 50px;">
+    <div style="align-self: end">below</div>
+    <div style="align-self: baseline; margin-top: 15px">baseline</div>
+    <div style="align-self: start">above</div>
+</div>
+after text
+</div>
+
+<!-- This grid has a baseline item, it's orthogonal but it still participates
+in baseline alignment. -->
+<div>
+before text
+<div class="inline-grid" style="grid-auto-rows: 40px">
+    <div style="align-self: end">below</div>
+    <div style="align-self: baseline; margin-top: 20px; writing-mode: vertical-rl"></div>
+    <div style="align-self: start">above</div>
+</div>
+after text
+</div>
+
+<div>
+before text
+<div class="inline-grid">
+    <h2>h2 baseline</h2>
+    <div>above</div>
+</div>
+after text
+</div>
+
+<div>
+before text
+<div class="inline-grid">
+    <div>baseline</div>
+    <h2>h2 below</h2>
+</div>
+after text
+</div>
+
+<!-- If the first grid item has an orthogonal baseline, use the synthesized
+baseline (bottom of the content box of the first item). -->
+<div>
+should align with the middle
+<div class="inline-grid" style="width: 40px; height: 40px">
+    <div style="writing-mode: vertical-rl; height: 20px; width: 40px; border-bottom: 1px solid black"></div>
+</div>
+of the grey box
+</div>
+
+<!-- If there are no griditems, align to the bottom of the margin box. -->
+<div>
+should align below the bottom
+<div class="empty inline-grid" style="width: 30px; height: 30px">
+</div>
+of the black line
+</div>
+
+<div>
+should align with the bottom
+<div class="inline-grid" style="width: 40px; height: 40px;">
+    <div style="width: 20px; height: 20px; border: 5px solid black; background: red;"></div>
+</div>
+of the red box
+</div>
+
+<!-- column-axis test cases. -->
+<div>
+before text
+<div class="inline-grid column">
+    <div>baseline</div>
+    <div>below</div>
+</div>
+after text
+</div>
+
+<!-- If the first grid item has an orthogonal baseline, use the synthesized
+baseline (bottom of the border box of the first item). -->
+<div>
+should align with the middle
+<div class="inline-grid column" style="width: 40px; height: 40px;">
+    <div style="writing-mode: vertical-rl; width: 40px; height: 20px; border-bottom: 1px solid black"></div>
+    <div style="writing-mode: vertical-rl; width: 40px; height: 19px"></div>
+</div>
+of the grey box
+</div>
+
+<!-- More tests on the right side of the page. -->
+<div style="position: absolute; top: 0; left: 400px; width: 360px">
+
+<!-- Ignore absolutely positioned grid items. -->
+<div>
+before text
+<div class="inline-grid">
+    <div style="position: absolute">absolute</div>
+    <div style="margin-top: 30px">baseline</div>
+</div>
+after text
+</div>
+
+<!-- We don't participate in baseline alignment if there's an auto margin. -->
+<div>
+before text
+<div class="inline-grid" style="grid-auto-rows: 40px;">
+    <div>baseline</div>
+    <div style="align-self: baseline; margin-top: auto">below</div>
+</div>
+after text
+</div>
+
+<div>
+before text
+<div style="display: inline-block">
+<div class="inline-grid" style="height: 40px;">
+    <div>above</div>
+    <div style="align-self: baseline; margin-top: 10px">baseline</div>
+    <div>above</div>
+</div>
+after
+</div>
+text
+</div>
+
+<!-- The spec is a little unclear what should happen here. For now,
+align to the last line box. -->
+<div>
+    before text
+    <div style="display: inline-block">
+        <div class="grid" style="height: 30px;">
+            baseline
+        </div>
+    </div>
+    after text
+</div>
+
+<table style="background-color: lightgrey; margin-top: 5px">
+<tr style="height: 50px">
+  <td style="vertical-align: bottom">bottom</td>
+  <td style="vertical-align: baseline">baseline</td>
+  <td style="vertical-align: top">top</td>
+  <td style="vertical-align: baseline"><div class="grid">
+    <h2>h2 baseline</h2>
+    <div>above</div>
+  </div></td>
+</table>
+
+<!-- If a box contributing a baseline has a scrollbar, the box must be treated
+as being in its initial scroll position when computing the baseline. -->
+<div>
+before text
+<div id="grid-with-scrollbar" class="inline-grid" style="height: 65px; width: 150px">
+    <div id="griditem-with-scrollbar" style="align-self: baseline; padding-top: 15px; height: 50px; overflow-y: scroll;">
+        The baseline is based on<br>
+        the non-scrolled position;<br>
+        this won't line up.
+    </div>
+</div>
+after text
+</div>
+
+</div>
+
+<script>
+document.getElementById("griditem-with-scrollbar").scrollTop = 999;
+document.getElementById("grid-with-scrollbar").style.width = "auto";
+</script>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-002.html
new file mode 100644
index 0000000000..b52eeff27e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-002.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<title>CSS Grid: Grid container baseline</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+<link rel="help" href="https://crbug.com/234191">
+<link rel="match" href="references/grid-baseline-002-ref.html">
+<meta name="assert" content="Check that Baseline Alignment works for 1-dimensional Grid like in Flexible Box, even using margins, paddings and borders."/>
+
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+.inline-block { display: inline-block; }
+.grid, .inline-grid {
+   background-color: lightgrey;
+   grid-auto-flow: column;
+}
+.border { border: 11px solid pink; }
+.padding { padding: 13px; }
+.margin { margin: 8px 0; }
+</style>
+<div>
+before text
+<div class="border" style="display: inline-block; background-color: lightgrey">
+<div class="grid" style="height: 30px; margin-top: 7px; padding-top: 10px;">
+  baseline
+</div>
+</div>
+after text
+</div>
+
+<div>
+Should align
+<div class="inline-block border">
+  <div class="grid padding" style="grid-template-columns: 50px; grid-template-rows: 50px; background-color: pink">
+      <div style="background-color: lightgrey"></div>
+  </div>
+</div>
+with the
+<div class="inline-block margin">
+  <div class="grid border" style="grid-template-columns: 50px; grid-template-rows: 50px; background-color: pink">
+      <div style="background-color: lightgrey"></div>
+  </div>
+</div>
+bottom of
+<div class="inline-block padding" style="padding-left: 0; padding-right: 0">
+  <div class="grid margin border" style="grid-template-columns: 50px; grid-template-rows: 50px; background-color: pink">
+      <div style="background-color: lightgrey;"></div>
+  </div>
+</div>
+the grey box.
+</div>
+
+<div>
+Should align with the
+<div class="inline-block">
+  <div class="grid" style="background-color: white">
+      <div class="border padding margin" style="background-color: lightgrey;"></div>
+  </div>
+</div>
+bottom of the pink box.
+</div>
+
+<div>
+Should align 8px
+<div class="inline-grid margin border" style="grid-template-columns: 30px; grid-template-rows: 30px;"></div>
+below the bottom
+<div class="inline-grid margin border padding"></div>
+of the pink box.
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-003.html
new file mode 100644
index 0000000000..bd411abed9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-003.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<title>CSS Grid: Grid container baseline</title>
+<link rel="author" title="Manuel Rego" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#synthesize-baseline">
+<link rel="help" href="https://crbug.com/234191">
+<link rel="match" href="references/grid-baseline-003-ref.html">
+<meta name="assert" content="Check that grid container baseline should be synthesized from the border edges when it has no baseline."/>
+
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+.inline-block { display: inline-block; }
+.grid, .inline-grid {
+   background-color: lightgrey;
+   grid-auto-flow: column;
+}
+.border { border: 11px solid pink; }
+.padding { padding: 13px; }
+.margin { margin: 8px 0; }
+</style>
+
+<div>
+Should align with the bottom
+<div class="inline-block border margin padding" style="background-color: pink">
+  <div class="grid border margin padding" style="grid-template-columns: 100px; grid-template-rows: 100px; background-color: pink">
+      <div style="overflow: scroll; background-color: lightgrey; margin: 10px 0px; border-top: 10px solid pink;"></div>
+  </div>
+</div>
+of the horizontal scrollbar.
+</div>
+
+<div>
+Should align 10px below the
+<div class="inline-block" style="background-color: pink">
+  <div class="grid" style="grid-template-columns: 100px; grid-template-rows: 100px; background-color: pink">
+      <div style="overflow: scroll; padding-bottom: 10px; background-color: lightgrey; margin: 10px 0px; border-top: 10px solid pink; border-bottom: 10px solid pink;"></div>
+  </div>
+</div>
+horizontal scrollbar, if one is visible.
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-004.html
new file mode 100644
index 0000000000..cd565a10ad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-004.html
@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<title>CSS Grid: Grid container baseline</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-order">
+<link rel="help" href="https://crbug.com/234191">
+<meta name="assert" content="Check that grid container must use its first item in grid-modified document order (grid order) to compute its baseline."/>
+
+<link href="/css/support/grid.css" rel="stylesheet">
+<link href="/css/support/alignment.css" rel="stylesheet">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+body { margin: 0; }
+.container {
+    position: relative;
+    font: 10px/1 Ahem;
+    border: 5px solid;
+    width: 470px;
+}
+.grid {
+    display: inline-grid;
+    grid-template-columns: 50px 50px;
+    width: 150px;
+    background-color: transparent;
+    position: relative;
+}
+.twoRows { grid-template-rows: 50px 50px; }
+.threeRows { grid-template-rows: 50px 50px 50px; }
+.empty {
+    border-color: black;
+    border-style: solid;
+    margin: 15px 0px 30px;
+    border-width: 5px 0px 10px;
+    padding: 10px 0px 20px;
+}
+.item {
+    height: 25px;
+    border-color: gray;
+    border-style: solid;
+}
+.grid.grid > * {
+    background: silver;
+    background: rgba(0,0,0,0.3);
+}
+.target.target {
+    background: blue;
+    border-color: navy;
+}
+.style1 {
+    border-width: 5px 0px 10px;
+    padding: 10px 0px 20px;
+}
+.style2 {
+    border-width: 10px 0px 5px;
+    padding: 20px 0px 10px;
+    margin-top: 10px;
+}
+.style3 {
+    border-width: 10px 0px 20px;
+    padding: 5px 0px 10px;
+    margin-top: 20px;
+}
+
+.bothRowFirstColumn, .secondRowSecondColumn {
+    margin-right: 10px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    background-color: pink;
+}
+.firstRowBothColumn, .secondRowBothColumn {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    background-color: green;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+    setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid, container'); })">
+<div id="log"></div>
+<p>
+    The test shows 3 grids each of them with 3 items sorted differently in the DOM.<br>
+    Each grid container must use its first (grid order) item to compute its baseline, and using document-oder in case of element with same grid-order. Hence they might be baseline aligned each other accordingly.
+</p>
+
+<p>
+    This case shows 3 items located along the first row and in different columns.
+    The grid baseline is computed using the one located at first column (blue item)
+    regardless of source order.
+</p>
+<div class="container" data-expected-width="480" data-expected-height="120">
+    <div class="grid" data-offset-x="0" data-offset-y="20">
+        <div class="item style1 firstRowFirstColumn target"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="item style2 firstRowSecondColumn" data-offset-x="50"  data-offset-y="10"></div>
+        <div class="item style3 firstRowThirdColumn"  data-offset-x="100" data-offset-y="20"></div>
+    </div>
+    <div class="grid" data-offset-x="160" data-offset-y="10">
+        <div class="item style1 firstRowThirdColumn"  data-offset-x="100" data-offset-y="0"></div>
+        <div class="item style2 firstRowFirstColumn target"  data-offset-x="0"   data-offset-y="10"></div>
+        <div class="item style3 firstRowSecondColumn" data-offset-x="50"  data-offset-y="20"></div>
+    </div>
+    <div class="grid" data-offset-x="320" data-offset-y="0">
+        <div class="item style1 firstRowSecondColumn" data-offset-x="50"  data-offset-y="0"></div>
+        <div class="item style2 firstRowThirdColumn"  data-offset-x="100" data-offset-y="10"></div>
+        <div class="item style3 firstRowFirstColumn target"  data-offset-x="0"   data-offset-y="20"></div>
+    </div>
+</div>
+
+<p>
+    This case shows 3 items located along the first row and in different columns.
+    The baseline-aligned item (blue) always determines the grid baseline.
+</p>
+<div class="container" data-expected-width="480" data-expected-height="120">
+    <div class="grid" data-offset-x="0" data-offset-y="0">
+        <div class="item style1 firstRowFirstColumn"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="item style2 firstRowSecondColumn" data-offset-x="50"  data-offset-y="10"></div>
+        <div class="item style3 firstRowThirdColumn alignSelfBaseline target"  data-offset-x="100" data-offset-y="20"></div>
+    </div>
+    <div class="grid" data-offset-x="160" data-offset-y="0">
+        <div class="item style1 firstRowThirdColumn"  data-offset-x="100" data-offset-y="0"></div>
+        <div class="item style2 firstRowFirstColumn"  data-offset-x="0"   data-offset-y="10"></div>
+        <div class="item style3 firstRowSecondColumn alignSelfBaseline target" data-offset-x="50"  data-offset-y="20"></div>
+    </div>
+    <div class="grid" data-offset-x="320" data-offset-y="20">
+        <div class="item style1 firstRowSecondColumn alignSelfBaseline target" data-offset-x="50"  data-offset-y="0"></div>
+        <div class="item style2 firstRowThirdColumn"  data-offset-x="100" data-offset-y="10"></div>
+        <div class="item style3 firstRowFirstColumn"  data-offset-x="0"   data-offset-y="20"></div>
+    </div>
+</div>
+
+<p>
+    This case shows 3 items' areas intersecting the first row and first column,
+    but none of them participate in baseline alignment in the first row,
+    so the dom order must be used to determine each grid's baseline.
+</p>
+<div class="container" data-expected-width="480" data-expected-height="165">
+    <div class="grid twoRows" data-offset-x="0" data-offset-y="40">
+        <div class="firstRowFirstColumn target"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="firstRowBothColumn" data-offset-x="0"  data-offset-y="15"></div>
+        <div class="bothRowFirstColumn style2" style="align-self: last baseline"  data-offset-x="0"></div>
+    </div>
+    <div class="grid twoRows" data-offset-x="160" data-offset-y="0">
+        <div class="bothRowFirstColumn target"  data-offset-x="0" data-offset-y="10"></div>
+        <div class="firstRowFirstColumn"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="firstRowBothColumn" data-offset-x="0"  data-offset-y="15"></div>
+    </div>
+    <div class="grid twoRows" data-offset-x="320" data-offset-y="55">
+        <div class="firstRowBothColumn target" data-offset-x="0"  data-offset-y="15"></div>
+        <div class="firstRowFirstColumn"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="bothRowFirstColumn"  data-offset-x="0" data-offset-y="10"></div>
+    </div>
+</div>
+
+<p>
+    This case shows 3 items' areas intersecting the first row and first column,
+    but one of the items participates in baseline alignment in the first row,
+    so such item is used to determine the grid's baseline
+    instead of using the dom order.
+</p>
+<div class="container" data-expected-width="480" data-expected-height="165">
+    <div class="grid twoRows" data-offset-x="0" data-offset-y="55">
+        <div class="firstRowFirstColumn"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="firstRowBothColumn alignSelfBaseline target" style="width: 100px; height: 20px;"  data-offset-x="0"  data-offset-y="15"></div>
+        <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
+    </div>
+    <div class="grid twoRows" data-offset-x="160" data-offset-y="40">
+        <div class="bothRowFirstColumn style2" style="align-self: last baseline" data-offset-x="0"></div>
+        <div class="firstRowFirstColumn alignSelfBaseline target" style="width: 50px; height: 50px;"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="firstRowBothColumn" data-offset-x="0"  data-offset-y="15"></div>
+    </div>
+    <div class="grid twoRows" data-offset-x="320" data-offset-y="0">
+        <div class="firstRowBothColumn" data-offset-x="0"  data-offset-y="15"></div>
+        <div class="firstRowFirstColumn"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="bothRowFirstColumn alignSelfBaseline target" style="width: 40px; height: 80px;"  data-offset-x="0" data-offset-y="10"></div>
+    </div>
+</div>
+
+<p>
+    This case shows one of the grids with no items,
+    hence its baseline must be synthesized from its margin box.
+</p>
+<div class="container" data-expected-width="480" data-expected-height="250">
+    <div class="grid twoRows" data-offset-x="0" data-offset-y="140">
+        <div class="firstRowFirstColumn target"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="firstRowBothColumn" data-offset-x="0"  data-offset-y="15"></div>
+        <div class="bothRowFirstColumn"  data-offset-x="0" data-offset-y="10"></div>
+    </div>
+    <div class="grid twoRows" data-offset-x="160" data-offset-y="100">
+        <div class="bothRowFirstColumn target"  data-offset-x="0" data-offset-y="10"></div>
+        <div class="firstRowFirstColumn"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="firstRowBothColumn" data-offset-x="0"  data-offset-y="15"></div>
+    </div>
+    <div class="grid empty twoRows target" data-offset-x="320" data-offset-y="15">
+    </div>
+</div>
+
+<p>
+    This case shows two of the grids with no items in their first row,
+    hence the items in the second row are evaluated.
+</p>
+<div class="container" data-expected-width="480" data-expected-height="250">
+    <div id=first class="grid twoRows" data-offset-x="0" data-offset-y="80">
+        <div class="firstRowFirstColumn target"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="firstRowBothColumn" data-offset-x="0"  data-offset-y="15"></div>
+        <div class="bothRowFirstColumn"  data-offset-x="0" data-offset-y="10"></div>
+    </div>
+    <div id=second class="grid threeRows" data-offset-x="160" data-offset-y="55">
+        <div class="thirdRowFirstColumn" data-offset-x="0" data-offset-y="100"></div>
+        <div class="secondRowBothColumn" data-offset-x="0" data-offset-y="65"></div>
+        <div class="secondRowSecondColumn style3 alignSelfBaseline target" id="first"  data-offset-x="50"   data-offset-y="60"></div>
+    </div>
+    <div class="grid empty threeRows" data-offset-x="320" data-offset-y="15">
+        <div class="thirdRowSecondColumn"  data-offset-x="50"   data-offset-y="110"></div>
+        <div class="secondRowFirstColumn target"  data-offset-x="0" data-offset-y="60"></div>
+        <div class="secondRowBothColumn" data-offset-x="0"  data-offset-y="75"></div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-align-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-align-001.html
new file mode 100644
index 0000000000..e32031779f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-align-001.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<title>
+  Grid Item (First) Baseline Block-Axis Alignment: auto-height grid, auto row, auto items
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-content">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#baseline-values">
+<link rel="match" href="references/grid-baseline-align-001-ref.html">
+
+<style>
+  @import "/fonts/ahem.css";
+  .grid {
+    border: solid silver;
+    margin: 1em 2px;
+    font: 20px/1 Ahem;
+
+    display: inline-grid;
+    vertical-align: top;
+    grid-template-columns: repeat(4, max-content);
+  }
+  .grid > div {
+    border: black 10px;
+    border-style: solid none;
+    color: orange;
+  }
+  div + div {
+    font-size: 2em;
+  }
+  div + div + div {
+    font-size: 50%;
+  }
+  .self > div {
+    align-self: baseline;
+  }
+  .content > div {
+    align-content: baseline;
+  }
+  div.stretch {
+    align-self: stretch;
+  }
+
+  .ref {
+    position: relative;
+    width: 80px;
+    height: 96px;
+  }
+  .ref > div {
+    position: absolute;
+  }
+  .ref1 { top:   16px; }
+  .ref2 { left:  20px; }
+  .ref3 { top:   24px;
+          left:  60px; }
+  .ref4 { right:  0px;
+          top:    0px;
+          bottom: 0px;
+          width: 10px; }
+
+  .ref.content > div:not(.stripe) {
+    border-color: transparent;
+  }
+  .stripe {
+    width: 80px;
+    height: 76px;
+  }
+</style>
+
+<p>Test passes if each pair of boxes is identical.</p>
+
+<div class="grid self">
+  <div>
+    p<br>
+    p<br>
+    p
+  </div>
+  <div>
+    p
+  </div>
+  <div>
+    p
+  </div>
+  <div class="stretch">
+    &nbsp;
+  </div>
+</div>
+
+<div class="grid self ref">
+  <div class="ref1">
+    p<br>
+    p<br>
+    p
+  </div>
+  <div class="ref2">
+    p
+  </div>
+  <div class="ref3">
+    p
+  </div>
+  <div class="ref4">
+    &nbsp;
+  </div>
+</div>
+
+<br>
+
+<div class="grid content">
+  <div>
+    p<br>
+    p<br>
+    p
+  </div>
+  <div>
+    p
+  </div>
+  <div>
+    p
+  </div>
+  <div class="stretch">
+    &nbsp;
+  </div>
+</div>
+
+<div class="grid content ref">
+  <div class="ref1">
+    p<br>
+    p<br>
+    p
+  </div>
+  <div class="ref2">
+    p
+  </div>
+  <div class="ref3">
+    p
+  </div>
+  <div class="ref4">
+    &nbsp;
+  </div>
+  <div class="stripe">
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-align-cycles-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-align-cycles-001.html
new file mode 100644
index 0000000000..b6b04144ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-align-cycles-001.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>
+  CSS Grid Layout Test: Grid Item (First) Baseline Alignment Row Cyclic Sizing Exclusions
+</title>
+<meta name="assert" content="
+  If baseline alignment is specified on a grid item whose size in that axis
+  depends on the size of an intrinsically-sized track (whose size is therefore
+  dependent on both the item’s size and baseline alignment, creating a cyclic
+  dependency), that item does not participate in baseline alignment, and
+  instead uses its fallback alignment as if that were originally specified.
+">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#row-align">
+<link rel="match" href="references/grid-baseline-align-cycles-001-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .grid {
+    border: solid silver;
+    margin: 1em 0.25em;
+    display: inline-grid;
+    grid-template-columns: repeat(2, auto);
+    font: 20px/1 Ahem;
+    height: 5em;
+  }
+  .grid > div {
+    border: 1em aqua;
+    border-style: solid none;
+  }
+  .index {
+    padding: 1em 0;
+  }
+  .percent {
+    height: 20%;
+  }
+  .orthogonal {
+    height: 20%;
+    writing-mode: vertical-rl;
+  }
+
+  .self > div {
+    align-self: baseline;
+  }
+  .content > div {
+    align-content: baseline;
+  }
+  .self.ref > div {
+    align-self: start;
+  }
+  .content.ref > div {
+    align-content: start;
+  }
+</style>
+
+<p>Test passes if the upper set of boxes is identical to the lower set.
+
+<div class="grid self">
+  <div class="index">
+    X
+  </div>
+  <div class="percent orthogonal">
+    X
+  </div>
+</div>
+
+<div class="grid self">
+  <div class="index">
+    X
+  </div>
+  <div class="orthogonal">
+    X
+  </div>
+</div>
+
+<div class="grid content">
+  <div class="index">
+    X
+  </div>
+  <div class="percent">
+    X
+  </div>
+</div>
+
+<div class="grid content">
+  <div class="index">
+    X
+  </div>
+  <div class="orthogonal">
+    X
+  </div>
+</div>
+
+<br>
+
+<div class="grid self ref">
+  <div class="index">
+    X
+  </div>
+  <div class="percent">
+    X
+  </div>
+</div>
+
+<div class="grid self ref">
+  <div class="index">
+    X
+  </div>
+  <div class="orthogonal">
+    X
+  </div>
+</div>
+
+<div class="grid content ref">
+  <div class="index">
+    X
+  </div>
+  <div class="percent">
+    X
+  </div>
+</div>
+
+<div class="grid content ref">
+  <div class="index">
+    X
+  </div>
+  <div class="orthogonal">
+    X
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-justify-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-justify-001.html
new file mode 100644
index 0000000000..171fcd3fcd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-baseline-justify-001.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<title>
+  Grid Item (First) Baseline Inline-Axis Alignment: auto-width grid, auto column, auto items
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-content">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#baseline-values">
+<link rel="match" href="references/grid-baseline-justify-001-ref.html">
+
+<style>
+  @import "/fonts/ahem.css";
+  .grid {
+    border: solid silver;
+    margin: 1em 2px;
+    font: 20px/1 Ahem;
+
+    display: inline-grid;
+    vertical-align: top;
+    grid-template-rows: repeat(4, max-content);
+  }
+  .grid > div {
+    border: black 10px;
+    border-style: none solid;
+    color: orange;
+    writing-mode: vertical-rl;
+  }
+  div + div {
+    font-size: 2em;
+  }
+  div + div + div {
+    font-size: 50%;
+  }
+  .self > div {
+    justify-self: baseline;
+  }
+  .content > div {
+    align-content: baseline;
+  }
+  div.stretch {
+    justify-self: stretch;
+  }
+
+  .ref {
+    position: relative;
+    width: 96px;
+    height: 80px;
+  }
+  .ref > div {
+    position: absolute;
+  }
+  .ref1 { right:  16px; }
+  .ref2 { top:    20px;
+          right:   0px; }
+  .ref3 { right:  24px;
+          top:    60px; }
+  .ref4 { bottom:  0px;
+          right:   0px;
+          left:    0px;
+          height: 10px; }
+
+  .ref.content > div:not(.stripe) {
+    border-color: transparent;
+  }
+  .stripe {
+    width: 76px;
+    height: 80px;
+  }
+</style>
+
+<p>Test passes if each pair of boxes is identical.</p>
+
+<div class="grid self">
+  <div>
+    p<br>
+    p<br>
+    p
+  </div>
+  <div>
+    p
+  </div>
+  <div>
+    p
+  </div>
+  <div class="stretch">
+    &nbsp;
+  </div>
+</div>
+
+<div class="grid self ref">
+  <div class="ref1">
+    p<br>
+    p<br>
+    p
+  </div>
+  <div class="ref2">
+    p
+  </div>
+  <div class="ref3">
+    p
+  </div>
+  <div class="ref4">
+    &nbsp;
+  </div>
+</div>
+
+<br>
+
+<div class="grid content">
+  <div>
+    p<br>
+    p<br>
+    p
+  </div>
+  <div>
+    p
+  </div>
+  <div>
+    p
+  </div>
+  <div class="stretch">
+    &nbsp;
+  </div>
+</div>
+
+<div class="grid content ref">
+  <div class="ref1">
+    p<br>
+    p<br>
+    p
+  </div>
+  <div class="ref2">
+    p
+  </div>
+  <div class="ref3">
+    p
+  </div>
+  <div class="ref4">
+    &nbsp;
+  </div>
+  <div class="stripe">
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001.html
new file mode 100644
index 0000000000..e3a880f66e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid's height changes.">
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-rows: 40% 60%;
+      height: 500px;
+      width: 300px;
+  }
+  #grid div {
+    margin: auto 0px auto 0px;
+  }
+  #item1 {
+      background: green;
+      width: 25px;
+      height: 50px;
+  }
+  #item2 {
+      background: blue;
+      width: 25px;
+      height: 100px;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1"></div>
+    <div id="item2"></div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-y", "75");
+    item2.setAttribute("data-offset-y", "300");
+    checkLayout('#grid', false);
+
+    grid.style.height = "300px";
+
+    item1.setAttribute("data-offset-y", "35");
+    item2.setAttribute("data-offset-y", "160");
+
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002.html
new file mode 100644
index 0000000000..7390548371
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid item's height changes.">
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-rows: 40% 60%;
+      height: 500px;
+      width: 300px;
+  }
+  #grid div {
+    margin: auto 0px auto 0px;
+  }
+  #item1 {
+      background: green;
+      width: 25px;
+      height: 50px;
+  }
+  #item2 {
+      background: blue;
+      width: 25px;
+      height: 100px;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1"></div>
+    <div id="item2"></div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-y", "75");
+    item2.setAttribute("data-offset-y", "300");
+    checkLayout('#grid', false);
+
+    item1.style.height = "100px";
+
+    item1.setAttribute("data-offset-y", "50");
+    item2.setAttribute("data-offset-y", "300");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003.html
new file mode 100644
index 0000000000..f451ebeae7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid items's height changes.">
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-columns: 300px;
+      grid-template-rows: 40% 60%;
+      height: 500px;
+      width: 300px;
+  }
+  #grid div {
+    margin: auto 0px auto 0px;
+  }
+  #item1 {
+      background: green;
+      width: 25px;
+      height: 50px;
+  }
+  #item2 {
+      background: blue;
+      width: 25px;
+      height: 100px;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1"></div>
+    <div id="item2"></div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-y", "75");
+    item2.setAttribute("data-offset-y", "300");
+    checkLayout('#grid', false);
+
+    item1.style.height = "100px";
+
+    item1.setAttribute("data-offset-y", "50");
+    item2.setAttribute("data-offset-y", "300");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004.html
new file mode 100644
index 0000000000..4d0a092e00
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid's height changes.">
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-columns: 300px;
+      grid-template-rows: 40% 60%;
+      height: 500px;
+      width: min-content;
+  }
+  #grid div {
+    margin: auto 0px auto 0px;
+  }
+  #item1 {
+      background: green;
+      width: 25px;
+      height: 50px;
+  }
+  #item2 {
+      background: blue;
+      width: 25px;
+      height: 100px;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1"></div>
+    <div id="item2"></div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-y", "75");
+    item2.setAttribute("data-offset-y", "300");
+    checkLayout('#grid', false);
+
+    grid.style.height = "300px";
+
+    item1.setAttribute("data-offset-y", "35");
+    item2.setAttribute("data-offset-y", "160");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005.html
new file mode 100644
index 0000000000..9231779e2a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid item's height changes.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-rows: 40% 60%;
+      height: 500px;
+      width: 300px;
+  }
+  #grid div {
+    margin: auto 0px auto 0px;
+  }
+  #item1 {
+      font: 20px/1 Ahem;
+      color: green;
+  }
+  #item2 {
+      font: 10px/1 Ahem;
+      color: blue;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1">XXXXX</div>
+    <div id="item2">XXXXX</div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-y", "90");
+    item2.setAttribute("data-offset-y", "345");
+    checkLayout('#grid', false);
+
+    item2.style.fontSize = "40px";
+
+    item1.setAttribute("data-offset-y", "90");
+    item2.setAttribute("data-offset-y", "330");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006.html
new file mode 100644
index 0000000000..ccb2dfd5dc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid item's height changes.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      font: 10px/1 Ahem;
+      grid-template-columns: 100px;
+      grid-template-rows: 40% 60%;
+      height: 500px;
+      width: 300px;
+  }
+  #grid div {
+    margin: auto 0px auto 0px;
+  }
+  #item1 {
+      color: green;
+  }
+  #item2 {
+      color: blue;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1">XXXXX</div>
+    <div id="item2">XXXXX</div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-y", "95");
+    item2.setAttribute("data-offset-y", "345");
+    checkLayout('#grid', false);
+
+    grid.style.fontSize = "40px";
+
+    item1.setAttribute("data-offset-y", "80");
+    item2.setAttribute("data-offset-y", "330");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007.html
new file mode 100644
index 0000000000..da51ff321c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid's height changes.">
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-rows: 40% 60%;
+      height: 500px;
+      width: 200px;
+  }
+  #grid div {
+    margin: auto 0px auto 0px;
+  }
+  #item1 {
+      background: green;
+      width: 25px;
+      height: 50px;
+  }
+  #item2 {
+      background: blue;
+      width: 25px;
+      height: 100px;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1"></div>
+    <div id="item2"></div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-y", "75");
+    item2.setAttribute("data-offset-y", "300");
+    checkLayout('#grid', false);
+
+    grid.style.height = "300px";
+
+    item1.setAttribute("data-offset-y", "35");
+    item2.setAttribute("data-offset-y", "160");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-008.html
new file mode 100644
index 0000000000..9b489ac119
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-008.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<link rel="match" href="../reference/grid-block-axis-alignment-auto-margins-008-ref.html">
+<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed after the grid's intrinsic size is determined.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-columns: auto;
+      grid-template-rows: 40% 60%;
+      height: 50vh;
+      width: auto;
+  }
+  #grid div {
+    margin: auto 0px auto 0px;
+  }
+  #item1 {
+      font: 20px/1 Ahem;
+      color: green;
+  }
+  #item2 {
+      font: 40px/1 Ahem;
+      color: blue;
+  }
+</style>
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div id="item1">XXX</div>
+    <div id="item2">XXXXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-001.html
new file mode 100644
index 0000000000..9216ed370c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-001.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start">
+<meta name="assert" content="Absolute positioned grid items with 'start' value for align-self are flushed with its alignment container's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: start;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-002.html
new file mode 100644
index 0000000000..4a4a397ffa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-002.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end">
+<meta name="assert" content="Absolute positioned grid items with 'end' value for align-self are flushed with its alignment container's 'end' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="140" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="120" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="210" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-003.html
new file mode 100644
index 0000000000..c1f9b16ef0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-003.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values">
+<meta name="assert" content="Absolute positioned grid items with 'left' value for align-self are flushed with its alignment container's 'left' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: left;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: left;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: left;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br></br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-004.html
new file mode 100644
index 0000000000..d52ed74f6f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-004.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values">
+<meta name="assert" content="Absolute positioned grid items with 'right' value for align-self are flushed with its alignment container's 'right' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: right;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: right;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: right;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br></br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-005.html
new file mode 100644
index 0000000000..7c903389f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-005.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-center">
+<meta name="assert" content="Absolute positioned grid items with 'center' value for align-self are 'centered' within its alignment container.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: center;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: center;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="70"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="60"  data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="195" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="180" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="70"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="60"  data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="195" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="180" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br></br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="70"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="195" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="170" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="160" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="45"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="30"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-006.html
new file mode 100644
index 0000000000..b1f2136a57
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-006.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-flex-start">
+<meta name="assert" content="The 'flex-start' value of align-self behaves like 'start' for absolute positioned grid items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: flex-start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: flex-start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: flex-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: flex-start;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br></br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-007.html
new file mode 100644
index 0000000000..eeeadeff45
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-007.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-flex-end">
+<meta name="assert" content="The 'flex-end' value of align-self behaves like 'end' for absolute positioned grid items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: flex-end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: flex-end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: flex-end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: flex-end;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br></br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="140" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="120" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="210" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-008.html
new file mode 100644
index 0000000000..1329501015
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-008.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
+<meta name="assert" content="Absolute positioned grid items with 'self-start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: self-start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: self-start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: self-start;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br></br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-009.html
new file mode 100644
index 0000000000..60a135dfee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-009.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-end">
+<meta name="assert" content="Absolute positioned grid items with 'self-end' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: self-end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: self-end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: self-end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: self-end;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="140" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="120" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="210" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-010.html
new file mode 100644
index 0000000000..eb01d61bc2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-010.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
+<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: self-start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: self-start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: self-start;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="140" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalRL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="120" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalRL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalRL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="210" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalRL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalLR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalLR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalLR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalLR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-011.html
new file mode 100644
index 0000000000..ad3beb8ab1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-011.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
+<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: self-end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: self-end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: self-end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: self-end;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="140" data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="240" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalRL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalRL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalRL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalRL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalLR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalLR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalLR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalLR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-012.html
new file mode 100644
index 0000000000..57db133a7d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-012.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start">
+<meta name="assert" content="Absolute positioned grid items with 'start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+  align-content: center;
+}
+.grid.LTR, .grid.RTL { height: 450px; }
+.grid.verticalLR, .grid.verticalRL { width: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: auto / 1;
+  grid-column: 1 / 2;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / auto;
+  grid-column: 1 / 2;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: auto / auto;
+  grid-column: 2 / 3;
+  align-self: start;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="250" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="190" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="80"  data-offset-y="100" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="190" data-offset-y="250" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="250" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="440" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="320" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="190" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="410" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-013.html
new file mode 100644
index 0000000000..9854540a6f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-013.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end">
+<meta name="assert" content="Absolute positioned grid items with 'end' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+  align-content: center;
+}
+.grid.LTR, .grid.RTL { height: 450px; }
+.grid.verticalLR, .grid.verticalRL { width: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: auto / 1;
+  grid-column: 1 / 2;
+  align-self: end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / auto;
+  grid-column: 1 / 2;
+  align-self: end;
+}
+.secondRowSecondColumn {
+  grid-row: auto / auto;
+  grid-column: 2 / 3;
+  align-self: end;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="0"   data-offset-y="90"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="220" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="440" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="410" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="190" data-offset-y="90"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="80"  data-offset-y="220" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="190" data-offset-y="440" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="410" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="440" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="410" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="350" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="200" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-014.html
new file mode 100644
index 0000000000..2f0cd54c42
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-014.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-center">
+<meta name="assert" content="Absolute positioned grid items with 'center' value for align-self are 'centered' within its alignment container.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+  align-content: center;
+}
+.grid.LTR, .grid.RTL { height: 450px; }
+.grid.verticalLR, .grid.verticalRL { width: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: auto / 1;
+  grid-column: 1 / 2;
+  align-self: center;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / auto;
+  grid-column: 1 / 2;
+  align-self: center;
+}
+.secondRowSecondColumn {
+  grid-row: auto / auto;
+  grid-column: 2 / 3;
+  align-self: center;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="0"   data-offset-y="45"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="160" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="345" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="205" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="190" data-offset-y="45"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="80"  data-offset-y="160" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="190" data-offset-y="345" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="205" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="45"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="160" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="345" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="205" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="395" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="260" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="95"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="205" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-015.html
new file mode 100644
index 0000000000..d2bd432d9d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-015.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
+<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+  align-content: center;
+}
+.grid.LTR, .grid.RTL { height: 450px; }
+.grid.verticalLR, .grid.verticalRL { width: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: auto / 1;
+  grid-column: 1 / 2;
+  align-self: self-start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: self-start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / auto;
+  grid-column: 1 / 2;
+  align-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: auto / auto;
+  grid-column: 2 / 3;
+  align-self: self-start;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="250" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="190" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="80"  data-offset-y="100" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="190" data-offset-y="250" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalRL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalRL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="440" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalRL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="410" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalRL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="350" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalLR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="200" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalLR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalLR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalLR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-016.html
new file mode 100644
index 0000000000..53284b4678
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-016.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-end">
+<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-end' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+  align-content: center;
+}
+.grid.LTR, .grid.RTL { height: 450px; }
+.grid.verticalLR, .grid.verticalRL { width: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: auto / 1;
+  grid-column: 1 / 2;
+  align-self: self-end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: self-end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / auto;
+  grid-column: 1 / 2;
+  align-self: self-end;
+}
+.secondRowSecondColumn {
+  grid-row: auto / auto;
+  grid-column: 2 / 3;
+  align-self: self-end;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="0"   data-offset-y="90"  data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="220" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="440" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="410" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="190" data-offset-y="90"  data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="80"  data-offset-y="220" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="190" data-offset-y="440" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="410" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalRL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalRL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="250" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalRL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalRL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="440" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalLR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="320" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalLR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="190" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalLR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="410" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalLR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-017.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-017.html
new file mode 100644
index 0000000000..f20ac0d02c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-017.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start">
+<meta name="assert" content="Absolute positioned grid items don't participate in Baseline Alignment, so the value 'baseline' behaves like 'start'.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: baseline;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: baseline;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: baseline;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: baseline;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-001.html
new file mode 100644
index 0000000000..975360f4c1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-001.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of stcky positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Sticky positioned grid items are aligned correcly.">
+<style>
+.container {
+  border: solid 1px;
+  overflow: auto;
+  height: 500px;
+}
+.grid {
+  position: relative;
+  float: left;
+  display: grid;
+  grid-template-columns: 75px 75px 75px 75px;
+  grid-template-rows: 100px 100px 100px 300px;
+  background: grey;
+  height: 400px;
+  margin-right: 20px;
+}
+.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+  width: 20px;
+  height: 20px;
+  background-color: #cae8ca;
+}
+.item1 {
+  top: 0px;
+  grid-column: 1;
+  grid-row: 1;
+}
+.item2 {
+  top: 0px;
+  grid-column: 2;
+  grid-row: 2;
+}
+.item3 {
+  top: 0px;
+  grid-column: 3;
+  grid-row: 3;
+}
+.item4 {
+  grid-column: 4;
+  grid-row: 4;
+  background: lightgrey;
+}
+.scroll { overflow: auto; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+<div class="container">
+    <div style="height:30px"></div>
+    <div class="grid">
+        <div class="item1 sticky alignSelfStart"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="item2 sticky alignSelfCenter" data-offset-x="75"  data-offset-y="140"></div>
+        <div class="item3 sticky alignSelfEnd"    data-offset-x="150" data-offset-y="280"></div>
+        <div class="item4"></div>
+    </div>
+    <div class="grid scroll">
+        <div class="item1 sticky alignSelfStart"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="item2 sticky alignSelfCenter" data-offset-x="75"  data-offset-y="140"></div>
+        <div class="item3 sticky alignSelfEnd"    data-offset-x="150" data-offset-y="280"></div>
+        <div class="item4"></div>
+    </div>
+    <div style="height:2000px"></div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-002.html
new file mode 100644
index 0000000000..357cbe13e2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-sticky-positioned-items-002.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of stcky positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Sticky positioned grid items are aligned correcly, but preserving non-static positions when required.">
+<style>
+.container {
+  border: solid 1px;
+  overflow: auto;
+  height: 500px;
+}
+.grid {
+  position: relative;
+  float: left;
+  display: grid;
+  grid-template-columns: 75px 75px 75px 75px;
+  grid-template-rows: 100px 100px 100px 300px;
+  background: grey;
+  height: 400px;
+  margin-right: 20px;
+}
+.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+  width: 20px;
+  height: 20px;
+  background-color: #cae8ca;
+}
+.item1 {
+  top: 40px;
+  grid-column: 1;
+  grid-row: 1;
+}
+.item2 {
+  top: 100px;
+  grid-column: 2;
+  grid-row: 2;
+}
+.item3 {
+  top: 290px;
+  grid-column: 3;
+  grid-row: 3;
+}
+.item4 {
+  grid-column: 4;
+  grid-row: 4;
+  background: lightgrey;
+}
+.scroll { overflow: auto; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+<div class="container">
+    <div style="height:30px"></div>
+    <div class="grid">
+        <div class="item1 sticky alignSelfStart"  data-offset-x="0"   data-offset-y="10"></div>
+        <div class="item2 sticky alignSelfCenter" data-offset-x="75"  data-offset-y="140"></div>
+        <div class="item3 sticky alignSelfEnd"    data-offset-x="150" data-offset-y="280"></div>
+        <div class="item4"></div>
+    </div>
+    <div class="grid scroll">
+        <div class="item1 sticky alignSelfStart"  data-offset-x="0"   data-offset-y="40"></div>
+        <div class="item2 sticky alignSelfCenter" data-offset-x="75"  data-offset-y="140"></div>
+        <div class="item3 sticky alignSelfEnd"    data-offset-x="150" data-offset-y="290"></div>
+        <div class="item4"></div>
+    </div>
+    <div style="height:2000px"></div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001.html
new file mode 100644
index 0000000000..0d3a556f40
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container { position: relative; }
+.grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: 200px 100px / 100px 200px;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.width25  { width: 25px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 25px; }
+.paddingRight { padding-right: 25px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<pre>Horizontal grid and verticalRL item</pre>
+
+<div class="grid width300 alignItemsBaseline">
+  <div class="firstRowFirstColumn verticalRL" data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="firstRowSecondColumn bigFont"   data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 height25"></div>
+</div>
+
+<pre>Horizontal grid and verticalLR item</pre>
+
+<div class="grid width300 alignItemsBaseline">
+  <div class="firstRowFirstColumn verticalLR" data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="firstRowSecondColumn bigFont"   data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 height25"></div>
+</div>
+
+<pre>VerticalLR grid and Horizontal item</pre>
+
+<div class="grid alignItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn horizontalTB"         data-offset-x="35" data-offset-y="0"   data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="firstRowSecondColumn bigFont paddingLeft" data-offset-x="0"  data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
+
+<pre>VerticalRL grid and Horizontal item</pre>
+
+<div class="grid alignItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn horizontalTB"          data-offset-x="100" data-offset-y="0"   data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="40"  data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002.html
new file mode 100644
index 0000000000..c20489e9a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: 200px 100px / 100px 200px;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.width25  { width: 25px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 20px; }
+.paddingRight { padding-right: 20px; }
+
+.fixedHeight { height: 125px; }
+.fixedWidth  { width: 125px; }
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<pre>Horizontal grid and item with fixed height</pre>
+
+<div class="grid width300 alignItemsBaseline">
+  <div class="firstRowFirstColumn fixedHeight"  data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="125"></div>
+  <div class="firstRowSecondColumn bigFont"     data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 height25"></div>
+</div>
+
+<pre>VerticalLR grid and item with fixed width</pre>
+
+<div class="grid alignItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn fixedWidth"            data-offset-x="30" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
+  <div class="firstRowSecondColumn bigFont paddingLeft"  data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
+
+<pre>VerticalRL grid and item with fixed width</pre>
+
+<div class="grid alignItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn fixedWidth"            data-offset-x="175" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
+  <div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="115" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003.html
new file mode 100644
index 0000000000..10a9adb9ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Empty grid items with relative size should use their border-box 'under' edge as synthesized baseline.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: 200px 100px / 100px 200px;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.height75 { height: 75px; }
+.width25  { width: 25px; }
+.width75  { width: 75px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 20px; }
+.paddingRight { padding-right: 20px; }
+
+.relativeHeight { height: 50%; }
+.relativeWidth  { width: 50%; }
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<pre>Horizontal grid and item with relative height</pre>
+
+<div class="grid width300 alignItemsBaseline">
+  <div class="firstRowFirstColumn relativeHeight"  data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="100"></div>
+  <div class="firstRowSecondColumn bigFont"        data-offset-x="100" data-offset-y="60" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 height25"></div>
+</div>
+
+<pre>VerticalLR grid and item with relative width</pre>
+
+<div class="grid alignItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn relativeWidth"         data-offset-x="30" data-offset-y="0"   data-expected-width="100" data-expected-height="100"></div>
+  <div class="firstRowSecondColumn bigFont paddingLeft"  data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
+
+<pre>VerticalRL grid and item with rlative width</pre>
+
+<div class="grid alignItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn relativeWidth"          data-offset-x="200" data-offset-y="0"   data-expected-width="100" data-expected-height="100"></div>
+  <div class="firstRowSecondColumn bigFont paddingRight"  data-offset-x="140" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html
new file mode 100644
index 0000000000..8c6d7abe4e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on content-sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.">
+<meta name="assert" content="Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: auto auto / 100px 200px;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.width25  { width: 25px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 20px; }
+.paddingRight { padding-right: 20px; }
+
+.fixedHeight { height: 125px; }
+.fixedWidth  { width: 125px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<pre>Horizontal grid and item with fixed height</pre>
+
+<div class="grid width300 alignItemsBaseline">
+  <div class="firstRowFirstColumn fixedHeight" data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="125"></div>
+  <div class="firstRowSecondColumn bigFont"    data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 height25"></div>
+</div>
+
+<pre>VerticalLR grid and item with fixed width</pre>
+
+<div class="grid alignItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn fixedWidth"            data-offset-x="30" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
+  <div class="firstRowSecondColumn bigFont paddingLeft"  data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
+
+<pre>VerticalRL grid and item with fixed width</pre>
+
+<div class="grid alignItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn fixedWidth"             data-offset-x="85" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
+  <div class="firstRowSecondColumn bigFont paddingRight"  data-offset-x="25" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowAutoColumnSpanning2 width25"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-005.html
new file mode 100644
index 0000000000..6207ce5b88
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-005.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+body { overflow: scroll; }
+.container { position: relative; }
+.grid {
+  position: relative;
+  grid-template-rows: 150px;
+  text-orientation: sideways;
+  font: 20px/1 Ahem;
+}
+.width100 { width: 100px; }
+.width200 { width: 200px; }
+.width300 { width: 300px; }
+.bigFont  { font-size: 50px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<pre>verticalLR grid and parallel items</pre>
+
+<div class="grid width100 alignItemsBaseline">
+    <div class="firstRowFirstColumn verticalLR"          data-offset-x="0"  data-offset-y="0"  data-expected-width="35" data-expected-height="120">É É ÉÉ</div>
+    <div class="firstRowSecondColumn verticalLR bigFont" data-offset-x="35" data-offset-y="70" data-expected-width="65" data-expected-height="50">É</div>
+</div>
+
+<pre>verticalRL grid and parallel items</pre>
+
+<div class="grid width100 alignItemsBaseline">
+    <div class="firstRowFirstColumn verticalRL"          data-offset-x="0"  data-offset-y="0"  data-expected-width="35" data-expected-height="120">É É ÉÉ</div>
+    <div class="firstRowSecondColumn verticalRL bigFont" data-offset-x="35" data-offset-y="70" data-expected-width="65" data-expected-height="50">É</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-container-auto-margins-scrollbars-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-container-auto-margins-scrollbars-001.html
new file mode 100644
index 0000000000..51c7b18e94
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-container-auto-margins-scrollbars-001.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>CSS Grid Layout Test: Ignore auto-margins in the track sizing algorithm</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins"/>
+<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=776581"/>
+<link rel="match" href="../reference/grid-container-auto-margins-scrollbars-001-ref.html">
+<meta name="assert" content="This test ensures that the grid logic ignores any 'auto' margin during the track sizing algorithm. Previously resolved auto-margins should not affect the track sizing computation."/>
+<style>
+body {
+   display: grid;
+   grid-template-columns: auto;
+   grid-template-rows: 1fr auto;
+   height: 100vh;
+}
+.item1 {
+   margin: 0px auto;
+}
+.item2 {
+   background-color: cyan;
+   height: 50px;
+}
+</style>
+<div class="item1">item1</div>
+<div class="item2">item2</div>
+<script>
+    document.body.style = "overflow: hidden;";
+    document.body.offsetLeft;
+    document.body.style = "overflow: auto;";
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-container-baseline-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-container-baseline-001.html
new file mode 100644
index 0000000000..aa6e77871a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-container-baseline-001.html
@@ -0,0 +1,154 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid container baseline</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines">
+<meta name="assert" content="Grid container baseline should match the element with 'align-self: baseline' in the first row, even if it's an orthogonal element.">
+<style>
+.wrapper {
+  position: relative;
+  margin: 10px;
+  line-height: 0;
+}
+
+.grid {
+  display: inline-grid;
+  grid-auto-flow: column;
+  background: grey;
+}
+
+.i1 {
+  width: 150px;
+  height: 100px;
+  background: magenta;
+}
+
+.i2 {
+  align-self: baseline;
+  width: 75px;
+  height: 50px;
+  background: cyan;
+}
+
+.i3 {
+  width: 100px;
+  height: 75px;
+  background: yellow;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.wrapper')">
+
+<div class="wrapper" style="writing-mode: horizontal-tb;">
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-y="40"></div>
+  <div class="grid">
+    <div class="i1"></div>
+    <div class="i2" data-offset-y="0"></div>
+    <div class="i3"></div>
+  </div>
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-y="40"></div>
+</div>
+
+<div class="wrapper" style="writing-mode: horizontal-tb;">
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-y="40"></div>
+  <div class="grid">
+    <div class="i1"></div>
+    <div class="i2" style="writing-mode: vertical-lr;" data-offset-y="0"></div>
+    <div class="i3"></div>
+  </div>
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-y="40"></div>
+</div>
+
+<div class="wrapper" style="writing-mode: horizontal-tb;">
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-y="40"></div>
+  <div class="grid">
+    <div class="i1"></div>
+    <div class="i2" style="writing-mode: vertical-rl;" data-offset-y="0"></div>
+    <div class="i3"></div>
+  </div>
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-y="40"></div>
+</div>
+
+<div class="wrapper" style="writing-mode: vertical-lr; text-orientation: sideways;">
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
+  <div class="grid">
+    <div class="i1"></div>
+    <div class="i2" data-offset-x="0"></div>
+    <div class="i3"></div>
+  </div>
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
+</div>
+
+<div class="wrapper" style="writing-mode: vertical-lr; text-orientation: sideways;">
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
+  <div class="grid">
+    <div class="i1"></div>
+    <div class="i2" style="writing-mode: horizontal-tb;" data-offset-x="0"></div>
+    <div class="i3"></div>
+  </div>
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
+</div>
+
+<div class="wrapper" style="writing-mode: vertical-lr; text-orientation: sideways;">
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
+  <div class="grid">
+    <div class="i1"></div>
+    <div class="i2" data-offset-x="0"></div>
+    <div class="i3"></div>
+  </div>
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
+</div>
+
+<div class="wrapper" style="writing-mode: vertical-lr; text-orientation: sideways;">
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
+  <div class="grid">
+    <div class="i1"></div>
+    <div class="i2" style="writing-mode: horizontal-tb;" data-offset-x="0"></div>
+    <div class="i3"></div>
+  </div>
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
+</div>
+
+<div class="wrapper" style="writing-mode: vertical-rl; text-orientation: sideways;">
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
+  <div class="grid">
+    <div class="i1"></div>
+    <div class="i2" data-offset-x="75"></div>
+    <div class="i3"></div>
+  </div>
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
+</div>
+
+<div class="wrapper" style="writing-mode: vertical-rl; text-orientation: sideways;">
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
+  <div class="grid">
+    <div class="i1"></div>
+    <div class="i2" style="writing-mode: horizontal-tb;" data-offset-x="75"></div>
+    <div class="i3"></div>
+  </div>
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
+</div>
+
+<div class="wrapper" style="writing-mode: vertical-rl; text-orientation: sideways;">
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
+  <div class="grid">
+    <div class="i1"></div>
+    <div class="i2" data-offset-x="75"></div>
+    <div class="i3"></div>
+  </div>
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
+</div>
+
+<div class="wrapper" style="writing-mode: vertical-rl; text-orientation:  sideways;">
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
+  <div class="grid">
+    <div class="i1"></div>
+    <div class="i2" style="writing-mode: horizontal-tb;" data-offset-x="75"></div>
+    <div class="i3"></div>
+  </div>
+  <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="75"></div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-and-self-alignment-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-and-self-alignment-001.html
new file mode 100644
index 0000000000..4c47ffdda9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-and-self-alignment-001.html
@@ -0,0 +1,379 @@
+<!DOCTYPE html>
+<title>CSS Grid Layout Test: content distribution alignment and self alignment.</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that content distribution alignment works fine in combination with self alignment and items in just one cell." />
+
+<style>
+.grid {
+  grid-template-columns: 200px 100px;
+  grid-template-rows: 100px 50px;
+  width: 500px;
+  height: 350px;
+  position: relative;
+  font: 10px/1 Ahem;
+}
+
+.gridGaps {
+  grid-gap: 10px 20px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<p>direction: LTR | distribution: 'space-between' | self-alignment: center</p>
+<div class="grid contentSpaceBetween itemsCenter">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="95" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="445" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="95" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="445" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: LTR | distribution: 'space-between' | self-alignment: end</p>
+<div class="grid contentSpaceBetween itemsEnd">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="190" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="490" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="190" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="490" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: LTR | distribution: 'space-around' | self-alignment: center</p>
+<div class="grid contentSpaceAround itemsCenter">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="145" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="395" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="145" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="395" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: LTR | distribution: 'space-around' | self-alignment: end</p>
+<div class="grid contentSpaceAround itemsEnd">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="240" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="440" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="240" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="440" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: LTR | distribution: 'space-evenly' | self-alignment: center</p>
+<div class="grid contentSpaceEvenly itemsCenter">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="162" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="378" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="162" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="378" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: LTR | distribution: 'space-evenly' | self-alignment: end</p>
+<div class="grid contentSpaceEvenly itemsEnd">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="257" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="423" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="257" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="423" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: center</p>
+<div class="grid gridGaps contentSpaceBetween itemsCenter">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="95" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="445" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="95" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="445" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: end</p>
+<div class="grid gridGaps contentSpaceBetween itemsEnd">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="190" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="490" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="190" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="490" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: center</p>
+<div class="grid gridGaps contentSpaceAround itemsCenter">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="140" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="400" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="140" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="400" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: end</p>
+<div class="grid gridGaps contentSpaceAround itemsEnd">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="235" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="445" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="235" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="445" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: center</p>
+<div class="grid gridGaps contentSpaceEvenly itemsCenter">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="155" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="385" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="155" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="385" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: LTR | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: end</p>
+<div class="grid gridGaps contentSpaceEvenly itemsEnd">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="250" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="430" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="250" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="430" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<!-- RTL direction. -->
+
+<p>direction: RTL | distribution: 'space-between' | self-alignment: center</p>
+<div class="grid directionRTL contentSpaceBetween itemsCenter">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="395" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="45" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="395" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: RTL | distribution: 'space-between' | self-alignment: end</p>
+<div class="grid directionRTL contentSpaceBetween itemsEnd">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="300" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="300" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: RTL | distribution: 'space-around' | self-alignment: center</p>
+<div class="grid directionRTL contentSpaceAround itemsCenter">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="345" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="95" data-offset-y="95" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="345" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="95" data-offset-y="270" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: RTL | distribution: 'space-around' | self-alignment: end</p>
+<div class="grid directionRTL contentSpaceAround itemsEnd">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="250" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="140" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="250" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="290" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: RTL | distribution: 'space-evenly' | self-alignment: center</p>
+<div class="grid directionRTL contentSpaceEvenly itemsCenter">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="328" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="112" data-offset-y="112" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="328" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="112" data-offset-y="253" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: RTL | distribution: 'space-evenly' | self-alignment: end</p>
+<div class="grid directionRTL contentSpaceEvenly itemsEnd">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="233" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="67" data-offset-y="157" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="233" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="67" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: center</p>
+<div class="grid directionRTL gridGaps contentSpaceBetween itemsCenter">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="395" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="45" data-offset-y="45" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="395" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="320" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-between' | self-alignment: end</p>
+<div class="grid directionRTL gridGaps contentSpaceBetween itemsEnd">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="300" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="90" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="300" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="340" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: center</p>
+<div class="grid directionRTL gridGaps contentSpaceAround itemsCenter">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="350" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="90" data-offset-y="93" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="350" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="90" data-offset-y="273" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-around' | self-alignment: end</p>
+<div class="grid directionRTL gridGaps contentSpaceAround itemsEnd">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="255" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="45" data-offset-y="138" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="255" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="293" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: center</p>
+<div class="grid directionRTL gridGaps contentSpaceEvenly itemsCenter">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="335" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="105" data-offset-y="108" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="335" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="105" data-offset-y="257" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+<p>direction: RTL | grid-gap: 10px 20px | distribution: 'space-evenly' | self-alignment: end</p>
+<div class="grid directionRTL gridGaps contentSpaceEvenly itemsEnd">
+  <!-- Dummy DIVs to help checking the result visually. -->
+  <div class="firstRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="firstRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowFirstColumn justifySelfStretch alignSelfStretch"></div>
+  <div class="secondRowSecondColumn justifySelfStretch alignSelfStretch"></div>
+
+  <div class="firstRowFirstColumn" data-offset-x="240" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="firstRowSecondColumn" data-offset-x="60" data-offset-y="153" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowFirstColumn" data-offset-x="240" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div>
+  <div class="secondRowSecondColumn" data-offset-x="60" data-offset-y="277" data-expected-width="10" data-expected-height="10">X</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-and-self-alignment-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-and-self-alignment-002.html
new file mode 100644
index 0000000000..68835c0461
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-and-self-alignment-002.html
@@ -0,0 +1,561 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Grid Layout Test: content distribution alignment and self alignment.</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-tracks">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=602670">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that content distribution alignment works fine in combination with self alignment and items spanning more than one track." />
+
+<style>
+body {
+  margin: 0px;
+}
+
+.grid {
+  position: relative;
+}
+.spanningTwo {
+  grid-auto-columns: 20px;
+  grid-auto-rows: 40px;
+  grid-template-areas: "a a b"
+                       "c d b";
+  width: 300px;
+  height: 200px;
+}
+.spanningThree {
+  grid-auto-columns: 50px;
+  grid-auto-rows: 50px;
+  grid-template-areas: ". . . . . ."
+                       ". b b b c ."
+                       ". . . . c ."
+                       ". . . . c ."
+                       ". . . . . .";
+  width: 550px;
+  height: 450px;
+}
+
+.gridRowColumnGaps {
+  grid-row-gap: 20px;
+  grid-column-gap: 10px;
+}
+
+.i1 { grid-row: 1; }
+.i2 { grid-row: 2; }
+.i3 { grid-row: 3; grid-column: 6; }
+.i4 { grid-row: 4; grid-column: 6; }
+.i5 { grid-row: 5; grid-column: 6; }
+
+.a {
+  grid-area: a;
+  background-color: blue;
+}
+.b {
+  grid-area: b;
+  background-color: lime;
+}
+.c {
+  grid-area: c;
+  background-color: purple;
+}
+.d {
+  grid-area: d;
+  background-color: orange;
+}
+.stretchedGrid {
+  grid-auto-columns: minmax(20px, auto);
+  grid-auto-rows: minmax(40px, auto);
+}
+
+.cell {
+  width: 20px;
+  height: 40px;
+}
+.cell1 {
+  width: 20px;
+  height: 20px;
+}
+</style>
+</head>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-between' | self-alignment: center</p>
+  <div class="grid spanningTwo contentSpaceBetween" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfCenter" data-offset-x="70" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell alignSelfCenter" data-offset-x="280" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-between' | self-alignment: end</p>
+  <div class="grid spanningTwo contentSpaceBetween" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell alignSelfEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-around' | self-alignment: center</p>
+  <div class="grid spanningTwo contentSpaceAround" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell alignSelfCenter" data-offset-x="240" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-around' | self-alignment: end</p>
+  <div class="grid spanningTwo contentSpaceAround" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell alignSelfEnd" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-evenly' | self-alignment: center</p>
+  <div class="grid spanningTwo contentSpaceEvenly" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfCenter" data-offset-x="100" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell alignSelfCenter" data-offset-x="220" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-evenly' | self-alignment: end</p>
+  <div class="grid spanningTwo contentSpaceEvenly" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell alignSelfEnd" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'stretch' | self-alignment: center</p>
+  <div class="grid spanningTwo stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfCenter alignSelfCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell justifySelfCenter alignSelfCenter" data-offset-x="240" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+    <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'stretch' | self-alignment: end</p>
+  <div class="grid spanningTwo stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfEnd alignSelfEnd" data-offset-x="180" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell justifySelfEnd alignSelfEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+    <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'default' | self-alignment: center</p>
+  <div class="grid spanningThree">
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfCenter" data-offset-x="115" data-offset-y="50" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfCenter" data-offset-x="200" data-offset-y="115" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'default' | self-alignment: end</p>
+  <div class="grid spanningThree">
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfEnd" data-offset-x="180" data-offset-y="50" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfEnd" data-offset-x="200" data-offset-y="180" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-between' | self-alignment: center</p>
+  <div class="grid spanningThree contentSpaceBetween">
+    <div class="i1" style="background: blue;"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfCenter" data-offset-x="215" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfCenter" data-offset-x="400" data-offset-y="215" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-between' | self-alignment: end</p>
+  <div class="grid spanningThree contentSpaceBetween">
+    <div class="i1" style="background: blue;"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfEnd" data-offset-x="330" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfEnd" data-offset-x="400" data-offset-y="330" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | rows/columns gap: 20px/40px | distribution: 'default' | self-alignment: center</p>
+  <div class="grid spanningThree gridRowColumnGaps">
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfCenter" data-offset-x="135" data-offset-y="70" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfCenter" data-offset-x="240" data-offset-y="155" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | rows/columns gap: 20px/40px | distribution: 'default' | self-alignment: end</p>
+  <div class="grid spanningThree gridRowColumnGaps">
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfEnd" data-offset-x="210" data-offset-y="70" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfEnd" data-offset-x="240" data-offset-y="240" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<!-- Same expected result than without gaps because space-between just use the remaining available space. -->
+<div style="position: relative">
+  <p>direction: LTR | rows/columns gap: 20px/40px | distribution: 'space-between' | self-alignment: center</p>
+  <div class="grid spanningThree contentSpaceBetween gridRowColumnGaps">
+    <div class="i1" style="background: blue;"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfCenter" data-offset-x="215" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfCenter" data-offset-x="400" data-offset-y="215" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<!-- Same expected result than without gaps because space-between just use the remaining available space. -->
+<div style="position: relative">
+  <p>direction: LTR | rows/columns gap: 20px/40px | distribution: 'space-between' | self-alignment: end</p>
+  <div class="grid spanningThree contentSpaceBetween gridRowColumnGaps">
+    <div class="i1" style="background: blue;"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfEnd" data-offset-x="330" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfEnd" data-offset-x="400" data-offset-y="330" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<!-- RTL direction. -->
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-between' | self-alignment: center</p>
+  <div class="grid spanningTwo contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfCenter" data-offset-x="210" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell alignSelfCenter" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-between' | self-alignment: end</p>
+  <div class="grid spanningTwo contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell alignSelfEnd" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-around' | self-alignment: center</p>
+  <div class="grid spanningTwo contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell alignSelfCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-around' | self-alignment: end</p>
+  <div class="grid spanningTwo contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell alignSelfEnd" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-evenly' | self-alignment: center</p>
+  <div class="grid spanningTwo contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfCenter" data-offset-x="180" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell alignSelfCenter" data-offset-x="60" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-evenly' | self-alignment: end</p>
+  <div class="grid spanningTwo contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfEnd" data-offset-x="140" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell alignSelfEnd" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'stretch' | self-alignment: center</p>
+  <div class="grid spanningTwo stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfCenter alignSelfCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell justifySelfCenter alignSelfCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+    <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'stretch' | self-alignment: end</p>
+  <div class="grid spanningTwo stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200">
+    <div class="a cell justifySelfEnd alignSelfEnd" data-offset-x="100" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
+    <div class="b cell justifySelfEnd alignSelfEnd" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+    <div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+    <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'default' | self-alignment: center</p>
+  <div class="grid spanningThree directionRTL">
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfCenter" data-offset-x="415" data-offset-y="50" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfCenter" data-offset-x="330" data-offset-y="115" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'default' | self-alignment: end</p>
+  <div class="grid spanningThree directionRTL">
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfEnd" data-offset-x="350" data-offset-y="50" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfEnd" data-offset-x="330" data-offset-y="180" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-between' | self-alignment: center</p>
+  <div class="grid spanningThree contentSpaceBetween directionRTL">
+    <div class="i1" style="background: blue;"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfCenter" data-offset-x="315" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfCenter" data-offset-x="130" data-offset-y="215" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-between' | self-alignment: end</p>
+  <div class="grid spanningThree contentSpaceBetween directionRTL">
+    <div class="i1" style="background: blue;"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfEnd" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfEnd" data-offset-x="130" data-offset-y="330" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | rows/columns gap: 20px/40px | distribution: 'default' | self-alignment: center</p>
+  <div class="grid spanningThree gridRowColumnGaps directionRTL">
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfCenter" data-offset-x="395" data-offset-y="70" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfCenter" data-offset-x="290" data-offset-y="155" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | rows/columns gap: 20px/40px | distribution: 'default' | self-alignment: end</p>
+  <div class="grid spanningThree gridRowColumnGaps directionRTL">
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfEnd" data-offset-x="320" data-offset-y="70" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfEnd" data-offset-x="290" data-offset-y="240" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | rows/columns gap: 20px/40px | distribution: 'space-between' | self-alignment: center</p>
+  <div class="grid spanningThree contentSpaceBetween gridRowColumnGaps directionRTL">
+    <div class="i1" style="background: blue;"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfCenter" data-offset-x="315" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfCenter" data-offset-x="130" data-offset-y="215" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | rows/columns gap: 20px/40px | distribution: 'space-between' | self-alignment: end</p>
+  <div class="grid spanningThree contentSpaceBetween gridRowColumnGaps directionRTL">
+    <div class="i1" style="background: blue;"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i1" style="background: blue"></div>
+    <div class="i1" style="background: red"></div>
+    <div class="i2" style="background: red"></div>
+    <div class="i2" style="background: blue"></div>
+    <div class="b cell1 justifySelfEnd" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="20"></div>
+    <div class="c cell1 alignSelfEnd" data-offset-x="130" data-offset-y="330" data-expected-width="20" data-expected-height="20"></div>
+    <div class="i3" style="background: red"></div>
+    <div class="i4" style="background: blue"></div>
+    <div class="i5" style="background: red"></div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-auto-sized-tracks-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-auto-sized-tracks-001.html
new file mode 100644
index 0000000000..32c3e3e474
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-auto-sized-tracks-001.html
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Grid Layout Test: content alignment and auto sized tracks.</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-tracks">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<meta name="assert" content="Test that 'stretch' value for content alignment properties is applied only on 'auto-sized' tracks, which are the ones with an 'auto' max sizing function." />
+
+<style>
+body {
+  margin: 0px;
+}
+
+.grid {
+  display: grid;
+  background-color: grey;
+  position: relative;
+}
+
+.definiteSize {
+  width: 200px;
+  height: 300px;
+}
+
+.item {
+  width: 40px;
+  height: 80px;
+}
+
+.content {
+  width: 20px;
+  height: 40px;
+}
+
+.firstRowFirstColumn {
+  background-color: blue;
+  grid-column: 1;
+  grid-row: 1;
+}
+.firstRowSecondColumn {
+  background-color: lime;
+  grid-column: 2;
+  grid-row: 1;
+}
+.secondRowFirstColumn {
+  background-color: purple;
+  grid-column: 1;
+  grid-row: 2;
+}
+.secondRowSecondColumn {
+  background-color: orange;
+  grid-column: 2;
+  grid-row: 2;
+}
+
+/* track sizes allowed to be stetched */
+.autoTracks { grid: auto auto / auto auto; }
+.autoMaxTracks { grid:  minmax(40px, auto) minmax(40px, auto) / minmax(20px, auto) minmax(20px, auto); }
+
+/* content-sized tracks disallowed to be stetched */
+.minContentTracks { grid: min-content min-content / min-content min-content; }
+.maxContentTracks { grid: max-content max-content / max-content max-content; }
+.minMaxWithMaxContentTracks { grid: minmax(20px, max-content) minmax(20px, max-content) / minmax(20px, max-content) minmax(20px, max-content); }
+.minMaxWithMinContentTracks { grid: minmax(20px, min-content) minmax(20px, min-content) / minmax(20px, min-content) minmax(20px, min-content); }
+.minMaxWithMinAutoTracks { grid: minmax(auto, max-content) minmax(auto, max-content) / minmax(auto, max-content) minmax(auto, max-content); }
+.fitContentTracks { grid: fit-content(20px) fit-content(20px) / fit-content(40px) fit-content(40px); font: 10px/1 Ahem; }
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+</head>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div style="position: relative">
+  <p>cols: 'auto' | rows: 'auto' | definite-sized container | definite-sized items </p>
+  <div class="grid contentStretch itemsStart definiteSize autoTracks" data-expected-width="200" data-expected-height="300">
+    <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item secondRowSecondColumn" data-offset-x="100" data-offset-y="150" data-expected-width="40" data-expected-height="80"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>cols: 'minmax(20px, auto)' | rows: 'minmax(40px, auto)' | definite-sized container | definite-sized items </p>
+  <div class="grid contentStretch itemsStart definiteSize autoMaxTracks" data-expected-width="200" data-expected-height="300">
+    <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item secondRowSecondColumn" data-offset-x="100" data-offset-y="150" data-expected-width="40" data-expected-height="80"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>cols: 'min-content' | rows: 'min-content' | definite-sized container | definite-sized items </p>
+  <div class="grid contentStretch itemsStart definiteSize minContentTracks" data-expected-width="200" data-expected-height="300">
+    <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item secondRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>cols: 'max-content' | rows: 'max-content' | definite-sized container | definite-sized items </p>
+  <div class="grid contentStretch itemsStart definiteSize maxContentTracks" data-expected-width="200" data-expected-height="300">
+    <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item secondRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>cols: 'minmax(20px, max-content)' | rows: 'minmax(20px, max-content)' | definite-sized container | definite-sized items </p>
+  <div class="grid contentStretch itemsStart definiteSize minMaxWithMaxContentTracks" data-expected-width="200" data-expected-height="300">
+    <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item secondRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>cols: 'minmax(20px, min-content)' | rows: 'minmax(20px, min-content)' | definite-sized container | definite-sized items </p>
+  <div class="grid contentStretch itemsStart definiteSize minMaxWithMinContentTracks" data-expected-width="200" data-expected-height="300">
+    <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item secondRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>cols: 'minmax(auto, max-content)' | rows: 'minmax(auto, max-content)' | definite-sized container | definite-sized items </p>
+  <div class="grid contentStretch itemsStart definiteSize minMaxWithMinAutoTracks" data-expected-width="200" data-expected-height="300">
+    <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item secondRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
+    <div class="item secondRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="40" data-expected-height="80"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>cols: 'fit-content(40px)' | rows: 'fit-content(20px)' | definite-sized container | content-sized items</p>
+  <div class="grid contentStretch itemsStart definiteSize fitContentTracks" data-expected-width="200" data-expected-height="300">
+    <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20">X XX XX X</div>
+    <div class="firstRowSecondColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="20">X XX XX X</div>
+    <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20">X XX XX X</div>
+    <div class="secondRowSecondColumn" data-offset-x="40" data-offset-y="20" data-expected-width="40" data-expected-height="20">X XX XX X</div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-overflow-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-overflow-001.html
new file mode 100644
index 0000000000..e3e3329583
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-overflow-001.html
@@ -0,0 +1,235 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Grid Layout Test: content alignment and overflow alignment.</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#overflow-values">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<meta name="assert" content="Test that the overflow alignment mode is applied correctly for content alignment properties." />
+
+<style>
+body {
+  margin: 0;
+}
+
+.container {
+  position: relative;
+  float: left;
+}
+
+.grid {
+  grid-template-columns: 50px 50px;
+  grid-template-rows: 100px 100px;
+}
+
+.contentSizedTracks {
+  grid-template:  max-content 100px / max-content 50px;
+}
+
+.overflowWidth {
+  width: 60px;
+  height: 300px;
+}
+
+.overflowHeight {
+  width: 200px;
+  height: 150px;
+}
+
+.item1 {
+  width: 50px;
+  height: 150px;
+}
+
+.item2 {
+  width: 150px;
+  height: 100px;
+}
+
+.minSize {
+  min-width: 300px;
+  min-height: 400px;
+}
+
+.maxSize {
+  max-width: 100px;
+  max-height: 100px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+</head>
+
+<body onload="checkLayout('.grid')">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid overflowWidth contentCenter" data-expected-width="60" data-expected-height="300">
+    <div class="firstRowFirstColumn" data-offset-x="-20" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="-20" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="30" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>default</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid overflowHeight contentCenterUnsafe" data-expected-width="200" data-expected-height="150">
+    <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid overflowWidth contentCenterSafe" data-expected-width="60" data-expected-height="300">
+    <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>safe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 75px; margin-right: 25px;">
+  <div class="grid overflowHeight contentCenterSafe" data-expected-width="200" data-expected-height="150">
+    <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>safe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid overflowWidth contentEnd" data-expected-width="60" data-expected-height="300">
+    <div class="firstRowFirstColumn" data-offset-x="-40" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="-40" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="10" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="10" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>default</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid overflowHeight contentEndUnsafe" data-expected-width="200" data-expected-height="150">
+    <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="-50" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="-50" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid overflowWidth contentEndSafe" data-expected-width="60" data-expected-height="300">
+    <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>safe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 75px; margin-right: 25px;">
+  <div class="grid overflowHeight contentEndSafe" data-expected-width="200" data-expected-height="150">
+    <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>safe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid fit-content contentEndUnsafe" data-expected-width="100" data-expected-height="200">
+    <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container indefinite size using fit-content, hence no possible overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 200px; margin-right: 25px;">
+  <div class="grid fit-content contentCenterUnsafe" data-expected-width="100" data-expected-height="200">
+    <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container indefinite size using fit-content, hence no possible overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 100px; margin-right: 25px;">
+  <div class="grid contentSizedTracks fit-content maxSize contentEndUnsafe" data-expected-width="100" data-expected-height="100">
+    <div class="item1 firstRowSecondColumn" data-offset-x="50" data-offset-y="-150" data-expected-width="50" data-expected-height="150"></div>
+    <div class="item2 secondRowFirstColumn" data-offset-x="-100" data-offset-y="0" data-expected-width="150" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container indefinite size using fit-content, but max-size constraints implies that the content-sized tracks overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 100px; margin-right: 75px;">
+  <div class="grid contentSizedTracks fit-content maxSize contentCenterUnsafe" data-expected-width="100" data-expected-height="100">
+    <div class="item1 firstRowSecondColumn" data-offset-x="100" data-offset-y="-75" data-expected-width="50" data-expected-height="150"></div>
+    <div class="item2 secondRowFirstColumn" data-offset-x="-50" data-offset-y="75" data-expected-width="150" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container indefinite size using fit-content, but max-size constraints implies that the content-sized tracks overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid contentSizedTracks fit-content minSize contentEndUnsafe" data-expected-width="300" data-expected-height="400">
+    <div class="item1 firstRowSecondColumn" data-offset-x="250" data-offset-y="150" data-expected-width="50" data-expected-height="150"></div>
+    <div class="item2 secondRowFirstColumn" data-offset-x="100" data-offset-y="300" data-expected-width="150" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container indefinite size using fit-content, but min-size constraints implies that the content-sized tracks don't overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-right: 25px;">
+  <div class="grid contentSizedTracks fit-content minSize contentCenterUnsafe" data-expected-width="300" data-expected-height="400">
+    <div class="item1 firstRowSecondColumn" data-offset-x="200" data-offset-y="75" data-expected-width="50" data-expected-height="150"></div>
+    <div class="item2 secondRowFirstColumn" data-offset-x="50" data-offset-y="225" data-expected-width="150" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container indefinite size using fit-content, but min-size constraints implies that the content-sized tracks don't overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-overflow-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-overflow-002.html
new file mode 100644
index 0000000000..e358c7b210
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-overflow-002.html
@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Grid Layout Test: content alignment and overflow alignment.</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#overflow-values">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1527539">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<meta name="assert" content="Test that the overflow alignment mode is applied correctly for content alignment properties." />
+
+<style>
+body {
+  margin: 0;
+}
+
+.container {
+  position: relative;
+  float: left;
+}
+
+.grid {
+  grid-template-columns: 50px 50px;
+  grid-template-rows: 100px 100px;
+  padding: 30px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.contentSizedTracks {
+  grid-template:  max-content 100px / max-content 50px;
+}
+
+.overflowWidth {
+  width: 60px;
+  height: 300px;
+}
+
+.overflowHeight {
+  width: 200px;
+  height: 150px;
+}
+
+.item1 {
+  width: 50px;
+  height: 150px;
+}
+
+.item2 {
+  width: 150px;
+  height: 100px;
+}
+
+.minSize {
+  min-width: 300px;
+  min-height: 400px;
+}
+
+.maxSize {
+  max-width: 100px;
+  max-height: 100px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+</head>
+
+<body onload="checkLayout('.grid')">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid overflowWidth contentCenter" data-expected-width="60" data-expected-height="300" data-expected-scroll-width="110" data-expected-scroll-height="300">
+    <div class="firstRowFirstColumn" data-offset-x="-20" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="-20" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="30" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>default</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid overflowHeight contentCenterUnsafe" data-expected-width="200" data-expected-height="150" data-expected-scroll-width="200" data-expected-scroll-height="205">
+    <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid overflowWidth contentCenterSafe" data-expected-width="60" data-expected-height="300" data-expected-scroll-width="160" data-expected-scroll-height="300">
+    <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="30" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>safe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 75px; margin-right: 25px;">
+  <div class="grid overflowHeight contentCenterSafe" data-expected-width="200" data-expected-height="150" data-expected-scroll-width="200" data-expected-scroll-height="260">
+    <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>safe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid overflowWidth contentEnd" data-expected-width="60" data-expected-height="300" data-expected-scroll-width="60" data-expected-scroll-height="300">
+    <div class="firstRowFirstColumn" data-offset-x="-70" data-offset-y="70" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="-70" data-offset-y="170" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="-20" data-offset-y="70" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="-20" data-offset-y="170" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>default</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid overflowHeight contentEndUnsafe" data-expected-width="200" data-expected-height="150" data-expected-scroll-width="200" data-expected-scroll-height="150">
+    <div class="firstRowFirstColumn" data-offset-x="70" data-offset-y="-80" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="70" data-offset-y="20" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="120" data-offset-y="-80" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="20" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid overflowWidth contentEndSafe" data-expected-width="60" data-expected-height="300" data-expected-scroll-width="160" data-expected-scroll-height="300">
+    <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="70" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="30" data-offset-y="170" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="70" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="170" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>safe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 75px; margin-right: 25px;">
+  <div class="grid overflowHeight contentEndSafe" data-expected-width="200" data-expected-height="150" data-expected-scroll-width="200" data-expected-scroll-height="260">
+    <div class="firstRowFirstColumn" data-offset-x="70" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="70" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="120" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>safe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid fit-content contentEndUnsafe" data-expected-width="160" data-expected-height="260" data-expected-scroll-width="160" data-expected-scroll-height="260">
+    <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="30" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container indefinite size using fit-content, hence no possible overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 200px; margin-right: 25px;">
+  <div class="grid fit-content contentCenterUnsafe" data-expected-width="160" data-expected-height="260" data-expected-scroll-width="160" data-expected-scroll-height="260">
+    <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowFirstColumn" data-offset-x="30" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
+    <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="30" data-expected-width="50" data-expected-height="100"></div>
+    <div class="secondRowSecondColumn" data-offset-x="80" data-offset-y="130" data-expected-width="50" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container indefinite size using fit-content, hence no possible overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 100px; margin-right: 25px;">
+  <div class="grid contentSizedTracks fit-content maxSize contentEndUnsafe" data-expected-width="100" data-expected-height="100" data-expected-scroll-width="100" data-expected-scroll-height="100">
+    <div class="item1 firstRowSecondColumn" data-offset-x="20" data-offset-y="-180" data-expected-width="50" data-expected-height="150"></div>
+    <div class="item2 secondRowFirstColumn" data-offset-x="-130" data-offset-y="-30" data-expected-width="150" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container indefinite size using fit-content, but max-size constraints implies that the content-sized tracks overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 100px; margin-right: 75px;">
+  <div class="grid contentSizedTracks fit-content maxSize contentCenterUnsafe" data-expected-width="100" data-expected-height="100" data-expected-scroll-width="180" data-expected-scroll-height="205">
+    <div class="item1 firstRowSecondColumn" data-offset-x="100" data-offset-y="-75" data-expected-width="50" data-expected-height="150"></div>
+    <div class="item2 secondRowFirstColumn" data-offset-x="-50" data-offset-y="75" data-expected-width="150" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container indefinite size using fit-content, but max-size constraints implies that the content-sized tracks overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;">
+  <div class="grid contentSizedTracks fit-content minSize contentEndUnsafe" data-expected-width="300" data-expected-height="400" data-expected-scroll-width="300" data-expected-scroll-height="400">
+    <div class="item1 firstRowSecondColumn" data-offset-x="220" data-offset-y="120" data-expected-width="50" data-expected-height="150"></div>
+    <div class="item2 secondRowFirstColumn" data-offset-x="70" data-offset-y="270" data-expected-width="150" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container indefinite size using fit-content, but min-size constraints implies that the content-sized tracks don't overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+<div class="container" style="margin-right: 25px;">
+  <div class="grid contentSizedTracks fit-content minSize contentCenterUnsafe" data-expected-width="300" data-expected-height="400" data-expected-scroll-width="300" data-expected-scroll-height="400">
+    <div class="item1 firstRowSecondColumn" data-offset-x="200" data-offset-y="75" data-expected-width="50" data-expected-height="150"></div>
+    <div class="item2 secondRowFirstColumn" data-offset-x="50" data-offset-y="225" data-expected-width="150" data-expected-height="100"></div>
+  </div>
+</div>
+<div>Grid container indefinite size using fit-content, but min-size constraints implies that the content-sized tracks don't overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div>
+
+<br clear="all">
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-second-pass-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-second-pass-001.html
new file mode 100644
index 0000000000..1d83f53a47
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-second-pass-001.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content alignment second pass</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview">
+<meta name="flags" content="ahem dom">
+<meta name="assert" content="This test checks that content alignment is properly applied when the size of the tracks changes in the second pass of the track sizing algorithm.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  width: 100px;
+  height: 50px;
+  font: 25px/1 Ahem;
+  margin: 10px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<div class="grid">
+  <div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX X</div>
+</div>
+
+<div class="grid contentStretch">
+  <div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX X</div>
+</div>
+
+<div class="grid contentStart">
+  <div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div>
+</div>
+
+<div class="grid contentCenter">
+  <div class="firstRowFirstColumn verticalLR" data-offset-x="25" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div>
+</div>
+
+<div class="grid contentEnd">
+  <div class="firstRowFirstColumn verticalLR" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div>
+</div>
+
+<div class="grid contentSpaceBetween">
+  <div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div>
+  <div class="firstRowSecondColumn" data-offset-x="75" data-offset-y="0" data-expected-width="25" data-expected-height="50">X</div>
+</div>
+
+<div class="grid contentSpaceEvenly" style="width: 105px;">
+  <div class="firstRowFirstColumn verticalLR" data-offset-x="10" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div>
+  <div class="firstRowSecondColumn" data-offset-x="70" data-offset-y="0" data-expected-width="25" data-expected-height="50">X</div>
+</div>
+
+<div class="grid contentSpaceAround" style="width: 115px;">
+  <div class="firstRowFirstColumn verticalLR" data-offset-x="10" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX X</div>
+  <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="50">X</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-second-pass-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-second-pass-002.html
new file mode 100644
index 0000000000..74a783bce2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-second-pass-002.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content alignment second pass</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview">
+<meta name="flags" content="ahem dom">
+<meta name="assert" content="This test checks that content alignment is properly applied when the size of the tracks changes in the second pass of the track sizing algorithm.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  font: 20px/1 Ahem;
+  margin: 10px;
+  display: inline-grid;
+  grid: 50% / 70%;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<div class="grid" data-expected-width="100" data-expected-height="40">
+  <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="20">XXX X</div>
+</div>
+
+<div class="grid contentStretch" data-expected-width="100" data-expected-height="40">
+  <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="20">XXX X</div>
+</div>
+
+<div class="grid contentStart" data-expected-width="100" data-expected-height="40">
+  <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="20">XXX X</div>
+</div>
+
+<div class="grid contentCenter" data-expected-width="100" data-expected-height="40">
+  <div class="firstRowFirstColumn" data-offset-x="15" data-offset-y="10" data-expected-width="70" data-expected-height="20">XXX X</div>
+</div>
+
+<div class="grid contentEnd" data-expected-width="100" data-expected-height="40">
+  <div class="firstRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="70" data-expected-height="20">XXX X</div>
+</div>
+
+<div class="grid contentSpaceBetween" data-expected-width="100" data-expected-height="60">
+  <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="30">XXX X</div>
+  <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="40" data-expected-width="70" data-expected-height="20">X</div>
+</div>
+
+<div class="grid contentSpaceEvenly" style="grid-template-rows: 30%;" data-expected-width="100" data-expected-height="80">
+  <div class="firstRowFirstColumn" data-offset-x="15" data-offset-y="5" data-expected-width="70" data-expected-height="24">XXX X</div>
+  <div class="secondRowFirstColumn" data-offset-x="15" data-offset-y="35" data-expected-width="70" data-expected-height="40">X<br>X</div>
+</div>
+
+<div class="grid contentSpaceAround" style="grid-template-rows: 25%;" data-expected-width="100" data-expected-height="80">
+  <div class="firstRowFirstColumn" data-offset-x="15" data-offset-y="5" data-expected-width="70" data-expected-height="20">XXX X</div>
+  <div class="secondRowFirstColumn" data-offset-x="15" data-offset-y="35" data-expected-width="70" data-expected-height="40">X<br>X</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-abspos-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-abspos-001.html
new file mode 100644
index 0000000000..c9aa165e80
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-abspos-001.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Grid Layout Test: dynamic content alignment with abspos elements.</title>
+<link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1248940">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<meta name="assert" content="Test that dynamically changing alignment for abspos grid items works as expected." />
+
+<style>
+body {
+  margin: 0px;
+  width: 800px;
+}
+
+.grid {
+  width: 100%;
+  height: 600px;
+}
+
+.a {
+    width: 140px;
+    height: 60px;
+    border: 1px solid purple;
+    position: absolute;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script>
+  function updateAlignmentAndCheckLayout() {
+    let item = document.getElementById("item");
+    item.style.alignSelf = "center";
+    item.style.justifySelf = "center";
+    checkLayout('.grid');
+  }
+</script>
+</head>
+
+<body onload="updateAlignmentAndCheckLayout()">
+
+  <div class="grid" data-expected-width="800" data-expected-height="600">
+    <div class="a" id="item" data-offset-x="329" data-offset-y="269" data-expected-width="142" data-expected-height="62"></div>
+  </div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-001.html
new file mode 100644
index 0000000000..6333c13b00
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-001.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Grid Layout Test: content alignment and items spanning multiple tracks.</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-tracks">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<meta name="assert" content="Test that content distribution alignment is applied correctly when items span more than one track." />
+
+<style>
+body {
+  margin: 0px;
+}
+
+.grid {
+  grid-auto-columns: 20px;
+  grid-auto-rows: 40px;
+  grid-template-areas: "a a b"
+                       "c d b";
+  position: relative;
+  width: 300px;
+  height: 200px;
+}
+.a {
+  grid-area: a;
+  background-color: blue;
+}
+.b {
+  grid-area: b;
+  background-color: lime;
+}
+.c {
+  grid-area: c;
+  background-color: purple;
+}
+.d {
+  grid-area: d;
+  background-color: orange;
+}
+.stretchedGrid {
+  grid-auto-columns: auto;
+  grid-auto-rows: auto;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+</head>
+
+<body onload="checkLayout('.grid')">
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-between'</p>
+  <div class="grid contentSpaceBetween" data-expected-width="300" data-expected-height="200">
+    <div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="160" data-expected-height="40"></div>
+    <div class="b" data-offset-x="280" data-offset-y="0" data-expected-width="20" data-expected-height="200"></div>
+    <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-around'</p>
+  <div class="grid contentSpaceAround" data-expected-width="300" data-expected-height="200">
+    <div class="a" data-offset-x="40" data-offset-y="30" data-expected-width="120" data-expected-height="40"></div>
+    <div class="b" data-offset-x="240" data-offset-y="30" data-expected-width="20" data-expected-height="140"></div>
+    <div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-evenly'</p>
+  <div class="grid contentSpaceEvenly" data-expected-width="300" data-expected-height="200">
+    <div class="a" data-offset-x="60" data-offset-y="40" data-expected-width="100" data-expected-height="40"></div>
+    <div class="b" data-offset-x="220" data-offset-y="40" data-expected-width="20" data-expected-height="120"></div>
+    <div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'stretch'</p>
+  <div class="grid stretchedGrid contentStretch" data-expected-width="300" data-expected-height="200">
+    <div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+    <div class="b" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+    <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+    <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+  </div>
+</div>
+
+<!-- RTL direction. -->
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-between'</p>
+  <div class="grid contentSpaceBetween directionRTL" data-expected-width="300" data-expected-height="200">
+    <div class="a" data-offset-x="140" data-offset-y="0" data-expected-width="160" data-expected-height="40"></div>
+    <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="200"></div>
+    <div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-around'</p>
+  <div class="grid contentSpaceAround directionRTL" data-expected-width="300" data-expected-height="200">
+    <div class="a" data-offset-x="140" data-offset-y="30" data-expected-width="120" data-expected-height="40"></div>
+    <div class="b" data-offset-x="40" data-offset-y="30" data-expected-width="20" data-expected-height="140"></div>
+    <div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-evenly''</p>
+  <div class="grid contentSpaceEvenly directionRTL" data-expected-width="300" data-expected-height="200">
+    <div class="a" data-offset-x="140" data-offset-y="40" data-expected-width="100" data-expected-height="40"></div>
+    <div class="b" data-offset-x="60" data-offset-y="40" data-expected-width="20" data-expected-height="120"></div>
+    <div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+    <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'stretch'</p>
+  <div class="grid stretchedGrid contentStretch directionRTL" data-expected-width="300" data-expected-height="200">
+    <div class="a" data-offset-x="100" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+    <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+    <div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+    <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-vertical-lr-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-vertical-lr-001.html
new file mode 100644
index 0000000000..d1b256bc0a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-vertical-lr-001.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Grid Layout Test: content alignment and items spanning multiple tracks (vertical-lr).</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-tracks">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<meta name="assert" content="Test that content distribution alignment is applied correctly when items span more than one track with 'writing-mode: vertical-lr'." />
+
+<style>
+body {
+  margin: 0px;
+}
+
+.grid {
+  grid-auto-columns: 20px;
+  grid-auto-rows: 40px;
+  grid-template-areas: "a a b"
+                       "c d b";
+  position: relative;
+  width: 200px;
+  height: 300px;
+}
+.a {
+  grid-area: a;
+  background-color: blue;
+}
+.b {
+  grid-area: b;
+  background-color: lime;
+}
+.c {
+  grid-area: c;
+  background-color: purple;
+}
+.d {
+  grid-area: d;
+  background-color: orange;
+}
+.stretchedGrid {
+  grid-auto-columns: auto;
+  grid-auto-rows: auto;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+</head>
+
+<body onload="checkLayout('.grid')">
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-between'</p>
+  <div class="grid contentSpaceBetween verticalLR" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="160"></div>
+    <div class="b" data-offset-x="0" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
+    <div class="c" data-offset-x="160" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="160" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-around'</p>
+  <div class="grid contentSpaceAround verticalLR" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="30" data-offset-y="40" data-expected-width="40" data-expected-height="120"></div>
+    <div class="b" data-offset-x="30" data-offset-y="240" data-expected-width="140" data-expected-height="20"></div>
+    <div class="c" data-offset-x="130" data-offset-y="40" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="130" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-evenly'</p>
+  <div class="grid contentSpaceEvenly verticalLR" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="40" data-offset-y="60" data-expected-width="40" data-expected-height="100"></div>
+    <div class="b" data-offset-x="40" data-offset-y="220" data-expected-width="120" data-expected-height="20"></div>
+    <div class="c" data-offset-x="120" data-offset-y="60" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="120" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'stretch'</p>
+  <div class="grid stretchedGrid contentStretch verticalLR" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+    <div class="b" data-offset-x="0" data-offset-y="200" data-expected-width="200" data-expected-height="100"></div>
+    <div class="c" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
+    <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+  </div>
+</div>
+
+<!-- RTL direction. -->
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-between'</p>
+  <div class="grid contentSpaceBetween verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="0" data-offset-y="140" data-expected-width="40" data-expected-height="160"></div>
+    <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div>
+    <div class="c" data-offset-x="160" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="160" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-around'</p>
+  <div class="grid contentSpaceAround verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="30" data-offset-y="140" data-expected-width="40" data-expected-height="120"></div>
+    <div class="b" data-offset-x="30" data-offset-y="40" data-expected-width="140" data-expected-height="20"></div>
+    <div class="c" data-offset-x="130" data-offset-y="240" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="130" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-evenly'</p>
+  <div class="grid contentSpaceEvenly verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="40" data-offset-y="140" data-expected-width="40" data-expected-height="100"></div>
+    <div class="b" data-offset-x="40" data-offset-y="60" data-expected-width="120" data-expected-height="20"></div>
+    <div class="c" data-offset-x="120" data-offset-y="220" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="120" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'stretch'</p>
+  <div class="grid stretchedGrid contentStretch verticalLR directionRTL" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="200"></div>
+    <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+    <div class="c" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expected-height="100"></div>
+    <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-vertical-rl-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-vertical-rl-001.html
new file mode 100644
index 0000000000..f3102a82b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-with-span-vertical-rl-001.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Grid Layout Test: content alignment and items spanning multiple tracks (vertical-rl).</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-tracks">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-content">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=376823">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=249451">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<meta name="assert" content="Test that content distribution alignment is applied correctly when items span more than one track with 'writing-mode: vertical-rl'." />
+
+<style>
+body {
+  margin: 0px;
+}
+
+.grid {
+  grid-auto-columns: 20px;
+  grid-auto-rows: 40px;
+  grid-template-areas: "a a b"
+                       "c d b";
+  position: relative;
+  width: 200px;
+  height: 300px;
+}
+.a {
+  grid-area: a;
+  background-color: blue;
+}
+.b {
+  grid-area: b;
+  background-color: lime;
+}
+.c {
+  grid-area: c;
+  background-color: purple;
+}
+.d {
+  grid-area: d;
+  background-color: orange;
+}
+.stretchedGrid {
+  grid-auto-columns: auto;
+  grid-auto-rows: auto;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+</head>
+
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that Content Distribution alignment is applied correctly when items span more than one track.</p>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-between'</p>
+  <div class="grid contentSpaceBetween verticalRL" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="160" data-offset-y="0" data-expected-width="40" data-expected-height="160"></div>
+    <div class="b" data-offset-x="0" data-offset-y="280" data-expected-width="200" data-expected-height="20"></div>
+    <div class="c" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="0" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-around'</p>
+  <div class="grid contentSpaceAround verticalRL" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="130" data-offset-y="40" data-expected-width="40" data-expected-height="120"></div>
+    <div class="b" data-offset-x="30" data-offset-y="240" data-expected-width="140" data-expected-height="20"></div>
+    <div class="c" data-offset-x="30" data-offset-y="40" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="30" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'space-evenly'</p>
+  <div class="grid contentSpaceEvenly verticalRL" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="120" data-offset-y="60" data-expected-width="40" data-expected-height="100"></div>
+    <div class="b" data-offset-x="40" data-offset-y="220" data-expected-width="120" data-expected-height="20"></div>
+    <div class="c" data-offset-x="40" data-offset-y="60" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="40" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: LTR | distribution: 'stretch'</p>
+  <div class="grid stretchedGrid contentStretch verticalRL" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+    <div class="b" data-offset-x="0" data-offset-y="200" data-expected-width="200" data-expected-height="100"></div>
+    <div class="c" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
+    <div class="d" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+  </div>
+</div>
+
+<!-- RTL direction. -->
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-between'</p>
+  <div class="grid contentSpaceBetween verticalRL directionRTL" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="160" data-offset-y="140" data-expected-width="40" data-expected-height="160"></div>
+    <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="20"></div>
+    <div class="c" data-offset-x="0" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="0" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-around'</p>
+  <div class="grid contentSpaceAround verticalRL directionRTL" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="130" data-offset-y="140" data-expected-width="40" data-expected-height="120"></div>
+    <div class="b" data-offset-x="30" data-offset-y="40" data-expected-width="140" data-expected-height="20"></div>
+    <div class="c" data-offset-x="30" data-offset-y="240" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="30" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'space-evenly'</p>
+  <div class="grid contentSpaceEvenly verticalRL directionRTL" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="120" data-offset-y="140" data-expected-width="40" data-expected-height="100"></div>
+    <div class="b" data-offset-x="40" data-offset-y="60" data-expected-width="120" data-expected-height="20"></div>
+    <div class="c" data-offset-x="40" data-offset-y="220" data-expected-width="40" data-expected-height="20"></div>
+    <div class="d" data-offset-x="40" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>direction: RTL | distribution: 'stretch'</p>
+  <div class="grid stretchedGrid contentStretch verticalRL directionRTL" data-expected-width="200" data-expected-height="300">
+    <div class="a" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="200"></div>
+    <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+    <div class="c" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="100"></div>
+    <div class="d" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-001.html
new file mode 100644
index 0000000000..7b53a2897b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-001.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-evenly' on 2x2 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 25px;
+  height: 25px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 25px 25px;
+  grid-template-rows: 25px 25px;
+  align-content: space-evenly;
+  justify-content: space-evenly;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 50px; left: 50px;"></div>
+    <div style="top: 125px; left: 125px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 1; grid-column: 1;"></div>
+    <div style="grid-row: 2; grid-column: 2;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-002.html
new file mode 100644
index 0000000000..194934bb93
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-002.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-between' on 2x2 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 20px 20px;
+  grid-template-rows: 20px 20px;
+  align-content: space-between;
+  justify-content: space-between;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 0px;"></div>
+    <div style="top: 180px; left: 180px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 1; grid-column: 1;"></div>
+    <div style="grid-row: 2; grid-column: 2;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-003.html
new file mode 100644
index 0000000000..ed6e322639
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-003.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-around' on 2x2 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 20px 20px;
+  grid-template-rows: 20px 20px;
+  align-content: space-around;
+  justify-content: space-around;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 40px; left: 40px;"></div>
+    <div style="top: 140px; left: 140px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 1; grid-column: 1;"></div>
+    <div style="grid-row: 2; grid-column: 2;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-004.html
new file mode 100644
index 0000000000..419d0fb1bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-004.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'stretch' on 2x2 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'stretch' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 100px;
+  height: 100px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: auto auto;
+  grid-template-rows: auto auto;
+  align-content: stretch;
+  justify-content: stretch;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 0px;"></div>
+    <div style="top: 100px; left: 100px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 1; grid-column: 1;"></div>
+    <div style="grid-row: 2; grid-column: 2;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-005.html
new file mode 100644
index 0000000000..2830aecab6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-005.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution default value</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties have 'stretch' as default value and render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 100px;
+  height: 100px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: auto auto;
+  grid-template-rows: auto auto;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 0px;"></div>
+    <div style="top: 100px; left: 100px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 1; grid-column: 1;"></div>
+    <div style="grid-row: 2; grid-column: 2;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-006.html
new file mode 100644
index 0000000000..61cfe2b68e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-006.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-evenly' and gaps on 2x2 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 20px 20px;
+  grid-template-rows: 20px 20px;
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: space-evenly;
+  justify-content: space-evenly;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 50px; left: 50px;"></div>
+    <div style="top: 130px; left: 130px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 1; grid-column: 1;"></div>
+    <div style="grid-row: 2; grid-column: 2;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-007.html
new file mode 100644
index 0000000000..d4dce5dc95
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-007.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-evenly' on 3x3 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px;
+  align-content: space-evenly;
+  justify-content: space-evenly;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 35px; left: 90px;"></div>
+    <div style="top: 35px; left: 145px;"></div>
+    <div style="top: 90px; left: 35px;"></div>
+    <div style="top: 145px; left: 35px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-008.html
new file mode 100644
index 0000000000..3e381ec68b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-008.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-evenly' and gaps on 3x3 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px;
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: space-evenly;
+  justify-content: space-evenly;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 30px; left: 90px;"></div>
+    <div style="top: 30px; left: 150px;"></div>
+    <div style="top: 90px; left: 30px;"></div>
+    <div style="top: 150px; left: 30px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-009.html
new file mode 100644
index 0000000000..aa28a980b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-009.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-evenly' on 4x4 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 25px;
+  height: 25px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 25px 25px 25px 25px;
+  grid-template-rows: 25px 25px 25px 25px;
+  align-content: space-evenly;
+  justify-content: space-evenly;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 20px; left: 65px;"></div>
+    <div style="top: 20px; left: 110px;"></div>
+    <div style="top: 65px; left: 110px;"></div>
+    <div style="top: 110px; left: 110px;"></div>
+    <div style="top: 155px; left: 20px;"></div>
+    <div style="top: 155px; left: 155px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 4;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-010.html
new file mode 100644
index 0000000000..cb08775cd2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-010.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-evenly' and gaps on 4x4 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 15px;
+  height: 15px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 15px 15px 15px 15px;
+  grid-template-rows: 15px 15px 15px 15px;
+  grid-row-gap: 5px;
+  grid-column-gap: 5px;
+  align-content: space-evenly;
+  justify-content: space-evenly;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 25px; left: 70px;"></div>
+    <div style="top: 25px; left: 115px;"></div>
+    <div style="top: 70px; left: 115px;"></div>
+    <div style="top: 115px; left: 115px;"></div>
+    <div style="top: 160px; left: 25px;"></div>
+    <div style="top: 160px; left: 160px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 4;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-011.html
new file mode 100644
index 0000000000..57eb3d0eac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-011.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-between' and gaps on 2x2 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 20px 20px;
+  grid-template-rows: 20px 20px;
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: space-between;
+  justify-content: space-between;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 0px;"></div>
+    <div style="top: 180px; left: 180px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 1; grid-column: 1;"></div>
+    <div style="grid-row: 2; grid-column: 2;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-012.html
new file mode 100644
index 0000000000..e45dbec8fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-012.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-between' on 3x3 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px;
+  align-content: space-between;
+  justify-content: space-between;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 90px;"></div>
+    <div style="top: 0px; left: 180px;"></div>
+    <div style="top: 90px; left: 0px;"></div>
+    <div style="top: 180px; left: 0px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-013.html
new file mode 100644
index 0000000000..3e1df650fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-013.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-between' and gaps on 3x3 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px;
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: space-between;
+  justify-content: space-between;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 90px;"></div>
+    <div style="top: 0px; left: 180px;"></div>
+    <div style="top: 90px; left: 0px;"></div>
+    <div style="top: 180px; left: 0px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-014.html
new file mode 100644
index 0000000000..423aad172b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-014.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-between' on 4x4 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 20px 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px 20px;
+  align-content: space-between;
+  justify-content: space-between;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 60px;"></div>
+    <div style="top: 0px; left: 120px;"></div>
+    <div style="top: 60px; left: 120px;"></div>
+    <div style="top: 120px; left: 120px;"></div>
+    <div style="top: 180px; left: 0px;"></div>
+    <div style="top: 180px; left: 180px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 4;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-015.html
new file mode 100644
index 0000000000..ef4c857db6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-015.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-between' and gaps on 4x4 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 20px 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px 20px;
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: space-between;
+  justify-content: space-between;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 60px;"></div>
+    <div style="top: 0px; left: 120px;"></div>
+    <div style="top: 60px; left: 120px;"></div>
+    <div style="top: 120px; left: 120px;"></div>
+    <div style="top: 180px; left: 0px;"></div>
+    <div style="top: 180px; left: 180px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 4;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-016.html
new file mode 100644
index 0000000000..11a66915de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-016.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-around' and gaps on 2x2 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 25px;
+  height: 25px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 25px 25px;
+  grid-template-rows: 25px 25px;
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: space-around;
+  justify-content: space-around;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 35px; left: 35px;"></div>
+    <div style="top: 140px; left: 140px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 1; grid-column: 1;"></div>
+    <div style="grid-row: 2; grid-column: 2;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-017.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-017.html
new file mode 100644
index 0000000000..9a490ad948
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-017.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-around' on 3x3 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around">
+<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 300px;
+  height: 300px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 300px;
+  height: 300px;
+  grid-template-columns: 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px;
+  align-content: space-around;
+  justify-content: space-around;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 40px; left: 140px;"></div>
+    <div style="top: 40px; left: 240px;"></div>
+    <div style="top: 140px; left: 40px;"></div>
+    <div style="top: 240px; left: 40px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-018.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-018.html
new file mode 100644
index 0000000000..1ba4f54aa4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-018.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-around' and gaps on 3x3 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  grid-template-columns: 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px;
+  align-content: space-around;
+  justify-content: space-around;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 20px; left: 90px;"></div>
+    <div style="top: 20px; left: 160px;"></div>
+    <div style="top: 90px; left: 20px;"></div>
+    <div style="top: 90px; left: 20px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-019.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-019.html
new file mode 100644
index 0000000000..49ca22eb24
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-019.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-around' on 4x4 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: 20px 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px 20px;
+  align-content: space-around;
+  justify-content: space-around;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 15px; left: 65px;"></div>
+    <div style="top: 15px; left: 115px;"></div>
+    <div style="top: 65px; left: 115px;"></div>
+    <div style="top: 115px; left: 115px;"></div>
+    <div style="top: 165px; left: 15px;"></div>
+    <div style="top: 165px; left: 165px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 4;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-020.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-020.html
new file mode 100644
index 0000000000..249f57d93f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-020.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-around' and gaps on 4x4 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around">
+<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 300px;
+  height: 300px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 300px;
+  height: 300px;
+  grid-row-gap: 20px;
+  grid-column-gap: 20px;
+  grid-template-columns: 20px 20px 20px 20px;
+  grid-template-rows: 20px 20px 20px 20px;
+  align-content: space-around;
+  justify-content: space-around;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 20px; left: 100px;"></div>
+    <div style="top: 20px; left: 180px;"></div>
+    <div style="top: 100px; left: 180px;"></div>
+    <div style="top: 180px; left: 180px;"></div>
+    <div style="top: 260px; left: 20px;"></div>
+    <div style="top: 260px; left: 260px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 4;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-021.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-021.html
new file mode 100644
index 0000000000..6a5469fc8c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-021.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'stretch' and gaps on 2x2 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'stretch' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 95px;
+  height: 95px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: auto auto;
+  grid-template-rows: auto auto;
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: stretch;
+  justify-content: stretch;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 0px;"></div>
+    <div style="top: 105px; left: 105px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 1; grid-column: 1;"></div>
+    <div style="grid-row: 2; grid-column: 2;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-022.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-022.html
new file mode 100644
index 0000000000..15a69c1102
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-022.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'stretch' on 3x3 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch">
+<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
+<meta name="assert" content="Content Distribution properties with 'stretch' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 300px;
+  height: 300px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 100px;
+  height: 100px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 300px;
+  height: 300px;
+  grid-template-columns: auto auto auto;
+  grid-template-rows: auto auto auto;
+  align-content: stretch;
+  justify-content: stretch;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 100px;"></div>
+    <div style="top: 0px; left: 200px;"></div>
+    <div style="top: 100px; left: 0px;"></div>
+    <div style="top: 200px; left: 0px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-023.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-023.html
new file mode 100644
index 0000000000..f5d07b7648
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-023.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'stretch' and gaps on 3x3 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'stretch' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 60px;
+  height: 60px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: auto auto auto;
+  grid-template-rows: auto auto auto;
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: stretch;
+  justify-content: stretch;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 70px;"></div>
+    <div style="top: 0px; left: 140px;"></div>
+    <div style="top: 70px; left: 0px;"></div>
+    <div style="top: 140px; left: 0px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-024.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-024.html
new file mode 100644
index 0000000000..1b6932bca5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-024.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'stretch' on 4x4 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'stretch' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 50px;
+  height: 50px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: auto auto auto auto;
+  grid-template-rows: auto auto auto auto;
+  align-content: stretch;
+  justify-content: stretch;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 50px;"></div>
+    <div style="top: 0px; left: 100px;"></div>
+    <div style="top: 50px; left: 100px;"></div>
+    <div style="top: 100px; left: 100px;"></div>
+    <div style="top: 150px; left: 0px;"></div>
+    <div style="top: 150px; left: 150px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 4;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-025.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-025.html
new file mode 100644
index 0000000000..f229a56f4f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-025.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'stretch' and gaps on 4x4 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch">
+<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
+<meta name="assert" content="Content Distribution properties with 'stretch' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 300px;
+  height: 300px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 60px;
+  height: 60px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 300px;
+  height: 300px;
+  grid-template-columns: auto auto auto auto;
+  grid-template-rows: auto auto auto auto;
+  grid-row-gap: 20px;
+  grid-column-gap: 20px;
+  align-content: stretch;
+  justify-content: stretch;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 80px;"></div>
+    <div style="top: 0px; left: 160px;"></div>
+    <div style="top: 80px; left: 160px;"></div>
+    <div style="top: 160px; left: 160px;"></div>
+    <div style="top: 240px; left: 0px;"></div>
+    <div style="top: 240px; left: 240px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 2; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 4;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-026.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-026.html
new file mode 100644
index 0000000000..8f5a8111c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-026.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-evenly">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="The fallback alignment for 'space-evenly' should be 'safe center'.">
+<p>Test passes if there is a filled green square.</p>
+<div style="display: grid; width: 50px; height: 50px; align-content: space-evenly; justify-content: space-evenly;">
+  <div style="width: 100px; height: 100px; background: green;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-027.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-027.html
new file mode 100644
index 0000000000..35e300ee64
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-027.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-around">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="The fallback alignment for 'space-around' should be 'safe center'.">
+<p>Test passes if there is a filled green square.</p>
+<div style="display: grid; width: 50px; height: 50px; align-content: space-around; justify-content: space-around;">
+  <div style="width: 100px; height: 100px; background: green;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-028.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-028.html
new file mode 100644
index 0000000000..216b05a4d6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-028.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-space-between">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="The fallback alignment for 'space-between' should be 'start'.">
+<p>Test passes if there is a filled green square.</p>
+<div style="display: grid; width: 50px; height: 50px; align-content: space-between; justify-content: space-between;">
+  <div style="width: 100px; height: 100px; background: green;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-029.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-029.html
new file mode 100644
index 0000000000..95f5281379
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-029.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
+<meta name="assert" content="Alignment must work after max-width clamps the aspect ratio.">
+<p>Test passes if there is a filled green square.</p>
+<div style="display: grid; width: 100px; aspect-ratio: 2; max-width: 50px; align-content: center;">
+  <div style="width: 100px; height: 100px; background: green;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-001.html
new file mode 100644
index 0000000000..ebd169cf59
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-001.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-evenly' with collapsed tracks on 2x2 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'space-evenly'.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 25px;
+  height: 25px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 25px);
+  grid-template-rows: repeat(auto-fit, 25px);
+  align-content: space-evenly;
+  justify-content: space-evenly;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 50px; left: 50px;"></div>
+    <div style="top: 125px; left: 125px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 2; grid-column: 3;"></div>
+    <div style="grid-row: 3; grid-column: 4;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-002.html
new file mode 100644
index 0000000000..a48c377ef3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-002.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-between' with collapsed tracks on 2x2 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'space-between'.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  display: grid;
+  z-index: 1;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 20px);
+  grid-template-rows: repeat(auto-fit, 20px);
+  align-content: space-between;
+  justify-content: space-between;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 0px;"></div>
+    <div style="top: 180px; left: 180px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 2; grid-column: 3;"></div>
+    <div style="grid-row: 3; grid-column: 4;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-003.html
new file mode 100644
index 0000000000..25c03022a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-003.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-around' with collapsed tracks on 2x2 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'space-around'.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 20px);
+  grid-template-rows: repeat(auto-fit, 20px);
+  align-content: space-around;
+  justify-content: space-around;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 40px; left: 40px;"></div>
+    <div style="top: 140px; left: 140px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 2; grid-column: 3;"></div>
+    <div style="grid-row: 3; grid-column: 4;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-004.html
new file mode 100644
index 0000000000..a280a69871
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-004.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'stretch' with collapsed tracks on 2x2 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 100px;
+  height: 100px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, minmax(25px, auto));
+  grid-template-rows: repeat(auto-fit, minmax(25px, auto));
+  align-content: stretch;
+  justify-content: stretch;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 0px;"></div>
+    <div style="top: 100px; left: 100px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 2; grid-column: 3;"></div>
+    <div style="grid-row: 3; grid-column: 4;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-005.html
new file mode 100644
index 0000000000..34d62116ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-005.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-evenly' and gaps on 2x2 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 20px);
+  grid-template-rows: repeat(auto-fit, 20px);
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: space-evenly;
+  justify-content: space-evenly;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 50px; left: 50px;"></div>
+    <div style="top: 130px; left: 130px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 1; grid-column: 1;"></div>
+    <div style="grid-row: 2; grid-column: 2;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-006.html
new file mode 100644
index 0000000000..151d34d2bb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-006.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-evenly' on 3x3 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 20px);
+  grid-template-rows: repeat(auto-fit, 20px);
+  align-content: space-evenly;
+  justify-content: space-evenly;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 35px; left: 90px;"></div>
+    <div style="top: 35px; left: 145px;"></div>
+    <div style="top: 90px; left: 35px;"></div>
+    <div style="top: 145px; left: 35px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 4;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-007.html
new file mode 100644
index 0000000000..061e93bae7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-007.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-evenly' and gaps on 3x3 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 20px);
+  grid-template-rows: repeat(auto-fit, 20px);
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: space-evenly;
+  justify-content: space-evenly;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 30px; left: 90px;"></div>
+    <div style="top: 30px; left: 150px;"></div>
+    <div style="top: 90px; left: 30px;"></div>
+    <div style="top: 150px; left: 30px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 4;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-008.html
new file mode 100644
index 0000000000..1b7135e70b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-008.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-evenly' on 4x4 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 25px;
+  height: 25px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 25px);
+  grid-template-rows: repeat(auto-fit, 25px);
+  align-content: space-evenly;
+  justify-content: space-evenly;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 20px; left: 65px;"></div>
+    <div style="top: 20px; left: 110px;"></div>
+    <div style="top: 65px; left: 110px;"></div>
+    <div style="top: 110px; left: 110px;"></div>
+    <div style="top: 155px; left: 20px;"></div>
+    <div style="top: 155px; left: 155px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 7;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-009.html
new file mode 100644
index 0000000000..0bc4adae76
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-009.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-evenly' and gaps on 4x4 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-evenly' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 15px;
+  height: 15px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 15px);
+  grid-template-rows: repeat(auto-fit, 15px);
+  grid-row-gap: 5px;
+  grid-column-gap: 5px;
+  align-content: space-evenly;
+  justify-content: space-evenly;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 25px; left: 70px;"></div>
+    <div style="top: 25px; left: 115px;"></div>
+    <div style="top: 70px; left: 115px;"></div>
+    <div style="top: 115px; left: 115px;"></div>
+    <div style="top: 160px; left: 25px;"></div>
+    <div style="top: 160px; left: 160px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 7;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-010.html
new file mode 100644
index 0000000000..eccf0041c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-010.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-between' and gaps on 2x2 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 20px);
+  grid-template-rows: repeat(auto-fit, 20px);
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: space-between;
+  justify-content: space-between;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 0px;"></div>
+    <div style="top: 180px; left: 180px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 1; grid-column: 1;"></div>
+    <div style="grid-row: 2; grid-column: 2;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-011.html
new file mode 100644
index 0000000000..fca4df588d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-011.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-between' on 3x3 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 20px);
+  grid-template-rows: repeat(auto-fit, 20px);
+  align-content: space-between;
+  justify-content: space-between;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 90px;"></div>
+    <div style="top: 0px; left: 180px;"></div>
+    <div style="top: 90px; left: 0px;"></div>
+    <div style="top: 180px; left: 0px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 4;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-012.html
new file mode 100644
index 0000000000..4250c14126
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-012.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-between' and gaps on 3x3 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 20px);
+  grid-template-rows: repeat(auto-fit, 20px);
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: space-between;
+  justify-content: space-between;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 90px;"></div>
+    <div style="top: 0px; left: 180px;"></div>
+    <div style="top: 90px; left: 0px;"></div>
+    <div style="top: 180px; left: 0px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 4;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-013.html
new file mode 100644
index 0000000000..f20741e4a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-013.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-between' on 4x4 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 20px);
+  grid-template-rows: repeat(auto-fit, 20px);
+  align-content: space-between;
+  justify-content: space-between;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 60px;"></div>
+    <div style="top: 0px; left: 120px;"></div>
+    <div style="top: 60px; left: 120px;"></div>
+    <div style="top: 120px; left: 120px;"></div>
+    <div style="top: 180px; left: 0px;"></div>
+    <div style="top: 180px; left: 180px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 7;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-014.html
new file mode 100644
index 0000000000..78d2477109
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-014.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-between' and gaps on 4x4 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-between' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 20px);
+  grid-template-rows: repeat(auto-fit, 20px);
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: space-between;
+  justify-content: space-between;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 60px;"></div>
+    <div style="top: 0px; left: 120px;"></div>
+    <div style="top: 60px; left: 120px;"></div>
+    <div style="top: 120px; left: 120px;"></div>
+    <div style="top: 180px; left: 0px;"></div>
+    <div style="top: 180px; left: 180px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 7;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-015.html
new file mode 100644
index 0000000000..e8247e0419
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-015.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-around' and gaps on 2x2 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 25px;
+  height: 25px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 25px);
+  grid-template-rows: repeat(auto-fit, 25px);
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: space-around;
+  justify-content: space-around;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 35px; left: 35px;"></div>
+    <div style="top: 140px; left: 140px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 1; grid-column: 1;"></div>
+    <div style="grid-row: 2; grid-column: 2;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-016.html
new file mode 100644
index 0000000000..511961f34e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-016.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-around' on 3x3 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 300px;
+  height: 300px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 300px;
+  height: 300px;
+  grid-template-columns: repeat(auto-fit, 20px);
+  grid-template-rows: repeat(auto-fit, 20px);
+  align-content: space-around;
+  justify-content: space-around;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 40px; left: 140px;"></div>
+    <div style="top: 40px; left: 240px;"></div>
+    <div style="top: 140px; left: 40px;"></div>
+    <div style="top: 240px; left: 40px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 4;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-017.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-017.html
new file mode 100644
index 0000000000..f587301599
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-017.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-around' and gaps on 3x3 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 20px);
+  grid-template-rows: repeat(auto-fit, 20px);
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: space-around;
+  justify-content: space-around;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 20px; left: 90px;"></div>
+    <div style="top: 20px; left: 160px;"></div>
+    <div style="top: 90px; left: 20px;"></div>
+    <div style="top: 90px; left: 20px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 4;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-018.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-018.html
new file mode 100644
index 0000000000..d91c1c5cab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-018.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-around' on 4x4 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, 20px);
+  grid-template-rows: repeat(auto-fit, 20px);
+  align-content: space-around;
+  justify-content: space-around;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 15px; left: 65px;"></div>
+    <div style="top: 15px; left: 115px;"></div>
+    <div style="top: 65px; left: 115px;"></div>
+    <div style="top: 115px; left: 115px;"></div>
+    <div style="top: 165px; left: 15px;"></div>
+    <div style="top: 165px; left: 165px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 7;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-019.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-019.html
new file mode 100644
index 0000000000..7a09ce699d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-019.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'space-around' and gaps on 4x4 grid with collapsed tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
+<meta name="assert" content="Content Distribution properties with 'space-around' value render correcly.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 300px;
+  height: 300px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 20px;
+  height: 20px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 300px;
+  height: 300px;
+  grid-template-columns: repeat(auto-fit, 20px);
+  grid-template-rows: repeat(auto-fit, 20px);
+  grid-row-gap: 20px;
+  grid-column-gap: 20px;
+  align-content: space-around;
+  justify-content: space-around;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 20px; left: 100px;"></div>
+    <div style="top: 20px; left: 180px;"></div>
+    <div style="top: 100px; left: 180px;"></div>
+    <div style="top: 180px; left: 180px;"></div>
+    <div style="top: 260px; left: 20px;"></div>
+    <div style="top: 260px; left: 260px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 7;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-020.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-020.html
new file mode 100644
index 0000000000..f0a29e7f45
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-020.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'stretch' with collapsed tracks on 2x2 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 95px;
+  height: 95px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, minmax(25px, auto));
+  grid-template-rows: repeat(auto-fit, minmax(25px, auto));
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: stretch;
+  justify-content: stretch;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 0px;"></div>
+    <div style="top: 105px; left: 105px;"></div>
+</div>
+<div class="grid">
+    <div style="grid-row: 2; grid-column: 3;"></div>
+    <div style="grid-row: 3; grid-column: 4;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-021.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-021.html
new file mode 100644
index 0000000000..d45f528d49
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-021.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'stretch' with collapsed tracks on 3x3 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
+<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 300px;
+  height: 300px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 100px;
+  height: 100px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 300px;
+  height: 300px;
+  grid-template-columns: repeat(auto-fit, minmax(25px, auto));
+  grid-template-rows: repeat(auto-fit, minmax(25px, auto));
+  align-content: stretch;
+  justify-content: stretch;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 100px;"></div>
+    <div style="top: 0px; left: 200px;"></div>
+    <div style="top: 100px; left: 0px;"></div>
+    <div style="top: 200px; left: 0px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 4;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-022.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-022.html
new file mode 100644
index 0000000000..7f837ba4b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-022.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'stretch' and gaps with collapsed tracks on 3x3 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 60px;
+  height: 60px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, minmax(25px, auto));
+  grid-template-rows: repeat(auto-fit, minmax(25px, auto));
+  grid-row-gap: 10px;
+  grid-column-gap: 10px;
+  align-content: stretch;
+  justify-content: stretch;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 70px;"></div>
+    <div style="top: 0px; left: 140px;"></div>
+    <div style="top: 70px; left: 0px;"></div>
+    <div style="top: 140px; left: 0px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 3;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 4;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 1;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-023.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-023.html
new file mode 100644
index 0000000000..11de67a099
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-023.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'stretch' with collapsed tracks on 4x4 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 200px;
+  height: 200px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 50px;
+  height: 50px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 200px;
+  height: 200px;
+  grid-template-columns: repeat(auto-fit, minmax(25px, auto));
+  grid-template-rows: repeat(auto-fit, minmax(25px, auto));
+  align-content: stretch;
+  justify-content: stretch;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 50px;"></div>
+    <div style="top: 0px; left: 100px;"></div>
+    <div style="top: 50px; left: 100px;"></div>
+    <div style="top: 100px; left: 100px;"></div>
+    <div style="top: 150px; left: 0px;"></div>
+    <div style="top: 150px; left: 150px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 7;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-024.html b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-024.html
new file mode 100644
index 0000000000..9afd058692
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-distribution-with-collapsed-tracks-024.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution 'stretch' and gaps with collapsed tracks on 4x4 grid</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#collapsed-track">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
+<meta name="assert" content="Content Distribution alignment ignore collapsed grid tracks and render correctly with a value of 'stretch'.">
+<style>
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 300px;
+  height: 300px;
+}
+.block > div {
+  position: absolute;
+  background: red;
+  width: 60px;
+  height: 60px;
+}
+.grid {
+  z-index: 1;
+  display: grid;
+  width: 300px;
+  height: 300px;
+  grid-template-columns: repeat(auto-fit, minmax(25px, auto));
+  grid-template-rows: repeat(auto-fit, minmax(25px, auto));
+  grid-row-gap: 20px;
+  grid-column-gap: 20px;
+  align-content: stretch;
+  justify-content: stretch;
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 0px; left: 80px;"></div>
+    <div style="top: 0px; left: 160px;"></div>
+    <div style="top: 80px; left: 160px;"></div>
+    <div style="top: 160px; left: 160px;"></div>
+    <div style="top: 240px; left: 0px;"></div>
+    <div style="top: 240px; left: 240px;"></div>
+</div>
+<div class="grid">
+    <div class="item" style="grid-row: 1; grid-column: 2;"></div>
+    <div class="item" style="grid-row: 1; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 3; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 4; grid-column: 5;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 1;"></div>
+    <div class="item" style="grid-row: 6; grid-column: 7;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-fit-content-tracks-dont-stretch-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-fit-content-tracks-dont-stretch-001.html
new file mode 100644
index 0000000000..a03b549a9a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-fit-content-tracks-dont-stretch-001.html
@@ -0,0 +1,212 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: fit-content() tracks don't stretch</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing" title="7.2. Explicit Track Sizing: the grid-template-rows and grid-template-columns properties">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align" title="10.5. Aligning the Grid: the justify-content and align-content properties">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-stretch" title="11.8. Stretch auto Tracks">
+<meta name="flags" content="ahem dom">
+<meta name="assert" content="This test checks that 'fit-content()' tracks behave the same with 'normal', 'stretch' or 'start' values for content distribution properties.">
+
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  display: grid;
+  width: 400px;
+  height: 200px;
+  font: 25px/1 Ahem;
+}
+
+.constrainedGrid {
+  width: 20px;
+  height: 10px;
+}
+
+.fitContent200x100 {
+  grid-template-columns: fit-content(200px);
+  grid-template-rows: fit-content(100px);
+}
+
+.placeContentStretch {
+  place-content: stretch;
+}
+
+.placeContentStart {
+  place-content: start;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<h1>1) place-content: normal</h1>
+
+<h2>1.2) Unconstrained grid container</h2>
+
+<div class="grid" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="400" data-expected-height="200">X</div>
+</div>
+
+<div class="grid" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="400" data-expected-height="200">XXXX XXX XX X</div>
+</div>
+
+<div class="grid fitContent200x100" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="25" data-expected-height="25">X</div>
+</div>
+
+<div class="grid fitContent200x100" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="200" data-expected-height="50">XXXX XXX XX X</div>
+</div>
+
+<div class="grid fitContent200x100" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
+</div>
+
+<div class="grid fitContent200x100" data-expected-width="400" data-expected-height="200">
+    <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
+</div>
+
+<h2>1.2) Constrained grid container</h2>
+
+<div class="grid constrainedGrid" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="25" data-expected-height="25">X</div>
+</div>
+
+<div class="grid constrainedGrid" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
+</div>
+
+<div class="grid constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="25" data-expected-height="25">X</div>
+</div>
+
+<div class="grid constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
+</div>
+
+<div class="grid constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
+</div>
+
+<div class="grid constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
+    <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
+</div>
+
+<h1>2) place-content: stretch</h1>
+
+<h2>2.2) Unconstrained grid container</h2>
+
+<div class="grid placeContentStretch" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="400" data-expected-height="200">X</div>
+</div>
+
+<div class="grid placeContentStretch" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="400" data-expected-height="200">XXXX XXX XX X</div>
+</div>
+
+<div class="grid placeContentStretch fitContent200x100" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="25" data-expected-height="25">X</div>
+</div>
+
+<div class="grid placeContentStretch fitContent200x100" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="200" data-expected-height="50">XXXX XXX XX X</div>
+</div>
+
+<div class="grid placeContentStretch fitContent200x100" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
+</div>
+
+<div class="grid placeContentStretch fitContent200x100" data-expected-width="400" data-expected-height="200">
+    <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
+</div>
+
+<h2>2.2) Constrained grid container</h2>
+
+<div class="grid placeContentStretch constrainedGrid" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="25" data-expected-height="25">X</div>
+</div>
+
+<div class="grid placeContentStretch constrainedGrid" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
+</div>
+
+<div class="grid placeContentStretch constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="25" data-expected-height="25">X</div>
+</div>
+
+<div class="grid placeContentStretch constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
+</div>
+
+<div class="grid placeContentStretch constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
+</div>
+
+<div class="grid placeContentStretch constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
+    <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
+</div>
+
+<h1>3) place-content: start</h1>
+
+<h2>3.1) Unconstrained grid container</h2>
+
+<div class="grid placeContentStart" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="25" data-expected-height="25">X</div>
+</div>
+
+<div class="grid placeContentStart" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="325" data-expected-height="25">XXXX XXX XX X</div>
+</div>
+
+<div class="grid placeContentStart fitContent200x100" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="25" data-expected-height="25">X</div>
+</div>
+
+<div class="grid placeContentStart fitContent200x100" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="200" data-expected-height="50">XXXX XXX XX X</div>
+</div>
+
+<div class="grid placeContentStart fitContent200x100" data-expected-width="400" data-expected-height="200">
+  <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
+</div>
+
+<div class="grid placeContentStart fitContent200x100" data-expected-width="400" data-expected-height="200">
+    <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
+</div>
+
+<h2>3.2) Constrained grid container</h2>
+
+<div class="grid placeContentStart constrainedGrid" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="25" data-expected-height="25">X</div>
+</div>
+
+<div class="grid placeContentStart constrainedGrid" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
+</div>
+
+<div class="grid placeContentStart constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="25" data-expected-height="25">X</div>
+</div>
+
+<div class="grid placeContentStart constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="100" data-expected-height="75">XXXX XXX XX X</div>
+</div>
+
+<div class="grid placeContentStart constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
+  <div data-expected-width="225" data-expected-height="50">XXXXXXXXX X</div>
+</div>
+
+<div class="grid placeContentStart constrainedGrid fitContent200x100" data-expected-width="20" data-expected-height="10">
+    <div data-expected-width="50" data-expected-height="125">XX<br>X<br>X<br>X<br>X</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-001.html
new file mode 100644
index 0000000000..310aa4322a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-001.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for gap shorthand property of row-gap and column-gap</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
+<link rel="match" href="../reference/grid-equal-gutters-ref.html">
+<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
+<style>
+    #grid {
+        display: grid;
+        width:200px;
+        gap: 20px;
+        grid-template-columns: 90px 90px;
+        grid-template-rows: 90px 90px;
+        background-color: green;
+    }
+
+    #grid > div {
+        background-color: silver;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-002.html
new file mode 100644
index 0000000000..dbe9d14533
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-002.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for grid-gap shorthand property as an alias for gap</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
+<link rel="match" href="../reference/grid-equal-gutters-ref.html">
+<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
+<style>
+    #grid {
+        display: grid;
+        width:200px;
+        grid-gap: 20px;
+        grid-template-columns: 90px 90px;
+        grid-template-rows: 90px 90px;
+        background-color: green;
+    }
+
+    #grid > div {
+        background-color: silver;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-003.html
new file mode 100644
index 0000000000..51bc25b3f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-003.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for gap shorthand property of row-gap and column-gap setting both to different values</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
+<link rel="match" href="../reference/grid-different-gutters-ref.html">
+<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
+<style>
+    #grid {
+        display: grid;
+        width:200px;
+        gap: 40px 20px;
+        grid-template-columns: 90px 90px;
+        grid-template-rows: 90px 90px;
+        background-color: green;
+    }
+
+    #grid > div {
+        background-color: silver;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-004.html
new file mode 100644
index 0000000000..c7d549a1b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-004.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for grid-gap shorthand property as an alias for gap setting both to different values</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
+<link rel="match" href="../reference/grid-different-gutters-ref.html">
+<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
+<style>
+    #grid {
+        display: grid;
+        width:200px;
+        grid-gap: 40px 20px;
+        grid-template-columns: 90px 90px;
+        grid-template-rows: 90px 90px;
+        background-color: green;
+    }
+
+    #grid > div {
+        background-color: silver;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-005.html
new file mode 100644
index 0000000000..cc67190aff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-005.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for row-gap and column-gap properties</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
+<link rel="match" href="../reference/grid-different-gutters-ref.html">
+<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
+<style>
+    #grid {
+        display: grid;
+        width:200px;
+        row-gap: 40px;
+        column-gap: 20px;
+        grid-template-columns: 90px 90px;
+        grid-template-rows: 90px 90px;
+        background-color: green;
+    }
+
+    #grid > div {
+        background-color: silver;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-006.html
new file mode 100644
index 0000000000..87fb7ec49d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-006.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for grid-row-gap alias for row-gap and grid-column-gap for column-gap</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
+<link rel="match" href="../reference/grid-different-gutters-ref.html">
+<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
+<style>
+    #grid {
+        display: grid;
+        width:200px;
+        grid-row-gap: 40px;
+        grid-column-gap: 20px;
+        grid-template-columns: 90px 90px;
+        grid-template-rows: 90px 90px;
+        background-color: green;
+    }
+
+    #grid > div {
+        background-color: silver;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-007.html
new file mode 100644
index 0000000000..4d66cf6750
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-007.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for percentage values for gap with definite height and width for grid</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
+<link rel="match" href="../reference/grid-equal-gutters-ref.html">
+<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
+<style>
+    #grid {
+        display: grid;
+        width:200px;
+        height: 200px;
+        gap: 10%;
+        grid-template-columns: 90px 90px;
+        grid-template-rows: 90px 90px;
+        background-color: green;
+    }
+
+    #grid > div {
+        background-color: silver;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-008.html
new file mode 100644
index 0000000000..a96eba3828
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-008.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for aliased support to gap of percentage values for grid-gap</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
+<link rel="match" href="../reference/grid-equal-gutters-ref.html">
+<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
+<style>
+    #grid {
+        display: grid;
+        width:200px;
+        height: 200px;
+        grid-gap: 10%;
+        grid-template-columns: 90px 90px;
+        grid-template-rows: 90px 90px;
+        background-color: green;
+    }
+
+    #grid > div {
+        background-color: silver;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-009.html
new file mode 100644
index 0000000000..dfc595f820
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-009.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for percentage values for gap with indefinite percentage basis</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
+<link rel="match" href="../reference/grid-percentage-gap-ref.html">
+<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
+<style>
+    #grid {
+        display: grid;
+        width: 200px;
+        gap: 10%;
+        grid-template-columns: 90px 90px;
+        grid-template-rows: 90px 90px;
+        background-color: green;
+        margin-bottom: 30px;
+    }
+
+    #grid > div {
+        background-color: silver;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference. Column gap should be percentage of width. Row gap should be percentage of height.</p>
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
+<div id="grid" style="display:inline-grid; width:auto; gap:calc(20px + 5%)">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-010.html
new file mode 100644
index 0000000000..22be6df72e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-010.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for percentage values for grid-gap with indefinite percentage basis</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
+<link rel="match" href="../reference/grid-percentage-gap-ref.html">
+<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
+<style>
+    #grid {
+        display: grid;
+        width: 200px;
+        grid-gap: 10%;
+        grid-template-columns: 90px 90px;
+        grid-template-rows: 90px 90px;
+        background-color: green;
+        margin-bottom: 30px;
+    }
+
+    #grid > div {
+        background-color: silver;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference. Column gap should be percentage of width. Row gap should be percentage of height.</p>
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
+<div id="grid" style="display:inline-grid; width:auto; grid-gap:calc(20px + 5%)">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-011.html
new file mode 100644
index 0000000000..daeba00aee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-011.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for calc mixing fixed and percentage values for gap</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
+<link rel="match" href="../reference/grid-different-gutters-ref.html">
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+    #grid {
+        display: grid;
+        width: 200px;
+        height: 220px;
+        gap: calc(15% + 7px) calc(10px + 5%);
+        grid-template-columns: 90px 90px;
+        grid-template-rows: 90px 90px;
+        background-color: green;
+    }
+
+    #grid > div {
+        background-color: silver;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-012.html
new file mode 100644
index 0000000000..b4af6f7a28
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-012.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for calc mixing fixed and percentage values for grid-gap as alias for gap</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
+<link rel="match" href="../reference/grid-different-gutters-ref.html">
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+    #grid {
+        display: grid;
+        width: 200px;
+        height: 220px;
+        grid-gap: calc(15% + 7px) calc(10px + 5%);
+        grid-template-columns: 90px 90px;
+        grid-template-rows: 90px 90px;
+        background-color: green;
+    }
+
+    #grid > div {
+        background-color: silver;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-013.html
new file mode 100644
index 0000000000..e72814725d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-013.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Gutters adjacent to collapsed tracks also collapse</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#repeat-notation">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<meta name="assert" content="This test checks that gutters adjacent to collapsed tracks don't reduce the space available for aligning adjacent grid items." />
+<style>
+    #grid {
+        display: grid;
+        margin-top: -50px;
+        margin-left: -50px;
+        width: 500px;
+        height: 500px;
+        grid-gap: 100px;
+        grid-template-rows: repeat(auto-fit, 200px);
+        grid-template-columns: repeat(auto-fit, 200px);
+        align-items: center;
+        justify-items: center;
+        background: linear-gradient(red, red) no-repeat 50px 50px / 100px 100px;
+    }
+
+    #grid > div {
+        background-color: green;
+        width: 50%;
+        height: 50%;
+    }
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="grid">
+    <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-014-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-014-ref.html
new file mode 100644
index 0000000000..a6ca7c5aa7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-014-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Reference: Percentage gap, content-based width/height (via float)</title>
+<style>
+    #grid {
+        border: solid 5px teal;
+        width: 200px;
+        height: 100px;
+        padding: 10px 0 0 10px;
+    }
+
+    #grid > div {
+        float: left;
+        border: solid 5px aqua;
+        width: 70px;
+        height: 30px;
+        margin-left: 5px;
+    }
+
+    /* highlight manual pass condition */
+    #grid > div:nth-child(even) {
+        border-right: none;
+        margin-left: 40px;
+    }
+    #grid > div:nth-child(n + 3) {
+        border-bottom: none;
+        margin-top: 25px;
+    }
+</style>
+
+<p>Test passes if there is no red.
+
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-014.html
new file mode 100644
index 0000000000..404e694ec8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-014.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Percentage gap, content-based width/height (via float)</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gaps">
+<link rel="match" href="grid-gutters-014-ref.html">
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<meta name="assert" content="Tests that percentage gaps contribute zero to intrinsic sizing, then resolve against corresponding axis of containing block for layout.">
+
+<style>
+    #grid {
+        display: grid;
+        border: solid 5px teal;
+        padding: 5px;
+        grid-gap: 15% 10%;
+        gap: 15% 10%;
+        float: left;
+        grid: auto auto / auto auto;
+        /* content box width = 200px height = 100px -> gap x = 20px y = 15px */
+        position: relative;
+    }
+
+    #grid > div {
+        margin: 5px 10px;
+        border: solid 5px aqua;
+        width: 70px;
+        height: 30px;
+        /* margin box height = 50px width = 100px */
+    }
+
+    /* highlight manual pass condition */
+    #grid > div:nth-child(even) {
+        border-right-color: red;
+    }
+    #grid > div:nth-child(n + 3) {
+        border-bottom-color: red;
+    }
+    #mask {
+        position: absolute;
+        border: 5px teal;
+        border-style: none solid solid none;
+        bottom: -5px; right: -5px;
+        top: 10px; left: 15px;
+    }
+</style>
+
+<p>Test passes if there is no red.
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <span id="mask"></span>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-015-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-015-ref.html
new file mode 100644
index 0000000000..dd4d8daf6a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-015-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<style>
+.grid {
+  display: grid;
+  padding: 10px;
+  grid-template-columns: 40px 40px;
+  grid-template-rows: 40px 40px;
+  border: solid;
+  width: 80px;
+  height: 80px;
+  gap: 16px;
+}
+.grid > div {
+  background: green;
+}
+</style>
+<div class="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-015.html
new file mode 100644
index 0000000000..ed1048fd69
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-015.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gaps">
+<link rel="match" href="grid-gutters-015-ref.html">
+<style>
+.grid {
+  display: inline-grid;
+  padding: 10px;
+  grid-template-columns: 40px 40px;
+  grid-template-rows: 40px 40px;
+  border: solid;
+  gap: 20%;
+}
+.grid > div {
+  background: green;
+}
+</style>
+<div class="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-016-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-016-ref.html
new file mode 100644
index 0000000000..a56ab07e18
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-016-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<style>
+.grid {
+  display: grid;
+  padding: 10px;
+  grid-template-columns: 40px 40px;
+  grid-template-rows: 40px 40px;
+  border: solid;
+  width: 140px;
+  height: 140px;
+  gap: 28px;
+}
+.grid > div {
+  background: green;
+}
+</style>
+<div class="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-016.html
new file mode 100644
index 0000000000..163787cfee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-016.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gaps">
+<link rel="match" href="grid-gutters-016-ref.html">
+<style>
+.grid {
+  display: inline-grid;
+  padding: 10px;
+  grid-template-columns: 40px 40px;
+  grid-template-rows: 40px 40px;
+  border: solid;
+  gap: 20%;
+  min-width: 140px;
+  min-height: 140px;
+}
+.grid > div {
+  background: green;
+}
+</style>
+<div class="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-and-alignment.html b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-and-alignment.html
new file mode 100644
index 0000000000..bc8af31c75
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-and-alignment.html
@@ -0,0 +1,366 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test:gutters with align and justify properties</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#gaps">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#column-row-gap">
+<meta name="assert" content="This test checks that gutters do not interfere with align and justify computation, with or without borders, paddings, margins and negative space.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+.grid100And200 {
+    grid-template-columns: 100px 100px;
+    grid-template-rows: 200px 200px;
+    position: relative; /* For the <p> comments */
+}
+
+.grid50And100 {
+    grid: 100px 100px / 50px 50px;
+    width: 200px;
+    height: 300px;
+    position: relative; /* For the <p> comments */
+}
+
+.gridAuto20And40 {
+    grid-auto-columns: 20px;
+    grid-auto-rows: 40px;
+    width: 400px;
+    height: 300px;
+    position: relative; /* For the <p> comments */
+}
+
+.gridWithPaddingBorder {
+    grid-template-columns: 100px 200px;
+    grid-template-rows: 200px 200px;
+    padding: 10px 15px 20px 30px;
+    border-width: 5px 10px 15px 20px;
+    border-style: dotted;
+    border-color: blue;
+    position: relative; /* For the <p> comments */
+}
+
+.gridWithAutoColumns {
+    grid-auto-columns: 20px;
+    border: 2px solid black;
+    width: 10px;
+    margin-left: 200px;
+    position: relative;
+}
+
+.gridWithAutoRows {
+    grid-auto-rows: 40px;
+    border: 2px solid black;
+    height: 50px;
+    width: 20px;
+    position: relative;
+}
+
+.stretchedGrid { grid-auto-columns: auto; }
+
+.gridRowColumnGaps {
+    grid-row-gap: 15px;
+    grid-column-gap: 20px;
+}
+
+div.grid > div { font: 10px/1 Ahem; }
+
+.cell {
+    width: 20px;
+    height: 40px;
+}
+
+div.gridWithPaddingBorder > div.cell {
+    margin: 4px 8px 12px 16px;
+}
+
+.container {
+    position: relative;
+    margin-bottom: 10px;
+}
+
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<!-- Check that gutters do not interfere with self alignment computation. -->
+<div class="container">
+    <div class="grid grid100And200 fit-content alignItemsCenter gridRowColumnGaps" data-expected-width="220" data-expected-height="415">
+        <div class="cell alignSelfAuto firstRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowSecondColumn" data-offset-x="120" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="215" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="120" data-offset-y="375" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <div class="grid grid100And200 fit-content verticalLR gridRowColumnGaps" data-expected-width="415" data-expected-height="220">
+        <div class="alignSelfStretch firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
+        </div>
+        <div class="cell alignSelfStart firstRowSecondColumn verticalRL" data-offset-x="0" data-offset-y="120" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfEnd firstRowSecondColumn verticalRL" data-offset-x="180" data-offset-y="120" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+        <div class="cell alignSelfCenter secondRowFirstColumn verticalRL" data-offset-x="305" data-offset-y="0" data-expected-width="20" data-expected-height="40">
+            <div class="item"></div>
+        </div>
+    </div>
+</div>
+
+<div class="container">
+     <div class="grid grid100And200 fit-content directionRTL gridRowColumnGaps" data-expected-width="220" data-expected-height="415">
+         <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="120" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
+         <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="80" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+         <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="200" data-offset-y="295" data-expected-width="20" data-expected-height="40"></div>
+     </div>
+</div>
+
+<!-- Check that gutters do not interfere with align-content computation. -->
+<div class="container">
+    <p>direction: LTR | align-content: 'center'</p>
+    <div class="grid grid50And100 alignContentCenter gridRowColumnGaps" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="43" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="70" data-offset-y="43" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="158" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="70" data-offset-y="158" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>direction: LTR | align-content: 'right'</p>
+    <div class="grid grid50And100 alignContentRight gridRowColumnGaps" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="70" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="115" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="70" data-offset-y="115" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>direction: RTL | align-content: 'right'</p>
+    <div class="grid grid50And100 directionRTL alignContentRight gridRowColumnGaps" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="115" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="110" data-offset-y="115" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>direction: RTL | align-content: 'start'</p>
+    <div class="grid grid50And100 directionRTL alignContentStart gridRowColumnGaps" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="115" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="110" data-offset-y="115" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- Check that gutters do not interfere with justify-content computation. -->
+<div class="container">
+    <p>direction: LTR | justify-content: 'center'</p>
+    <div class="grid grid50And100 justifyContentCenter gridRowColumnGaps" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="40" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="110" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="40" data-offset-y="115" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="110" data-offset-y="115" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>direction: LTR | justify-content: 'end'</p>
+    <div class="grid grid50And100 justifyContentEnd gridRowColumnGaps" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="80" data-offset-y="115" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-y="115" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>direction: RTL | justify-content: 'end'</p>
+    <div class="grid grid50And100 directionRTL justifyContentRight gridRowColumnGaps" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="115" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="110" data-offset-y="115" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>direction: RTL | justify-content: 'start'</p>
+    <div class="grid grid50And100 directionRTL justifyContentStart gridRowColumnGaps" data-expected-width="200" data-expected-height="300">
+        <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="firstRowSecondColumn" data-offset-x="80" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
+        <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="115" data-expected-width="50" data-expected-height="100"></div>
+        <div class="cell secondRowSecondColumn" data-offset-x="110" data-offset-y="115" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- Check that gutters do not interfere with vertical justify-content computation. -->
+
+<div class="container">
+    <p>direction: RTL | justify-content: 'stretch'</p>
+    <div class="grid gridAuto20And40 stretchedGrid justifyContentStretch verticalLR directionRTL gridRowColumnGaps" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="240" data-expected-width="40" data-expected-height="60"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="160" data-expected-width="40" data-expected-height="60"></div>
+        <div class="firstRowThirdColumn" data-offset-x="0" data-offset-y="80" data-expected-width="40" data-expected-height="60"></div>
+        <div class="firstRowFourthColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="60"></div>
+        <div class="secondRowFirstColumn" data-offset-x="55" data-offset-y="240" data-expected-width="40" data-expected-height="60"></div>
+        <div class="secondRowSecondColumn" data-offset-x="55" data-offset-y="160" data-expected-width="40" data-expected-height="60"></div>
+        <div class="secondRowThirdColumn" data-offset-x="55" data-offset-y="80" data-expected-width="40" data-expected-height="60"></div>
+        <div class="secondRowFourthColumn" data-offset-x="55" data-offset-y="0" data-expected-width="40" data-expected-height="60"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>direction: LTR | justify-content: 'space-evenly'</p>
+    <div class="grid gridAuto20And40 justifyContentSpaceEvenly verticalLR directionRTL gridRowColumnGaps" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="230" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowThirdColumn" data-offset-x="0" data-offset-y="50" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="55" data-offset-y="230" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="55" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowThirdColumn" data-offset-x="55" data-offset-y="50" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>direction: LTR | justify-content: 'space-between'</p>
+    <div class="grid gridAuto20And40 justifyContentSpaceBetween verticalRL directionRTL gridRowColumnGaps" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="187" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowThirdColumn" data-offset-x="360" data-offset-y="93" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowFourthColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="305" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="305" data-offset-y="187" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowThirdColumn" data-offset-x="305" data-offset-y="93" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFourthColumn" data-offset-x="305" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>direction: LTR | justify-content: 'space-around'</p>
+    <div class="grid gridAuto20And40 justifyContentSpaceAround verticalRL directionRTL gridRowColumnGaps" data-expected-width="400" data-expected-height="300">
+        <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="220" data-expected-width="40" data-expected-height="20"></div>
+        <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="60" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowFirstColumn" data-offset-x="305" data-offset-y="220" data-expected-width="40" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="305" data-offset-y="60" data-expected-width="40" data-expected-height="20"></div>
+    </div>
+</div>
+
+<!-- Check that gutters do not interfere with align&justify computation when having border, padding and margins. -->
+<div class="container">
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
+    <div class="grid gridWithPaddingBorder fit-content directionLTR itemsSelfStart gridRowColumnGaps" data-expected-width="395" data-expected-height="465">
+        <div class="directionLTR cell firstRowFirstColumn"     data-offset-x="46" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x="150" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="225" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionLTR cell secondRowSecondColumn"   data-offset-x="166" data-offset-y="229" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self-end'</p>
+    <div class="grid gridWithPaddingBorder fit-content directionLTR itemsSelfEnd gridRowColumnGaps" data-expected-width="395" data-expected-height="465">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="46"  data-offset-y="158" data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="150" data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="30"  data-offset-y="225" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="166" data-offset-y="373" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL | align-items: 'right' | justify-items: 'right'</p>
+    <div class="grid gridWithPaddingBorder fit-content directionRTL itemsRight gridRowColumnGaps"     data-expected-width="395" data-expected-height="465">
+        <div class="cell firstRowFirstColumn"     data-offset-x="322" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="selfStretch secondRowFirstColumn" data-offset-x="250" data-offset-y="225" data-expected-width="100" data-expected-height="200"></div>
+        <div class="cell secondRowSecondColumn"   data-offset-x="202" data-offset-y="229" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
+        direction: RTL (parall) | align-items: 'self-start' | justify-items: 'self-start'</p>
+    <div class="grid gridWithPaddingBorder fit-content directionRTL itemsSelfStart gridRowColumnGaps" data-expected-width="395" data-expected-height="465">
+        <div class="directionRTL cell firstRowFirstColumn"     data-offset-x="322" data-offset-y="14"  data-expected-width="20"  data-expected-height="40"></div>
+        <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x="30"  data-offset-y="10"  data-expected-width="200" data-expected-height="200"></div>
+        <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x="250" data-offset-y="225" data-expected-width="100" data-expected-height="200"></div>
+        <div class="directionRTL cell secondRowSecondColumn"   data-offset-x="202"  data-offset-y="229" data-expected-width="20"  data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- Check behavior with negative free space -->
+<div class="container">
+    <p>Negative free space. justify-content: start</p>
+    <div class="grid gridWithAutoColumns justifyContentStart gridRowColumnGaps" data-expected-width="14" data-expected-height="44">
+        <div class="cell firstRowFirstColumn"  data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowSecondColumn"  data-offset-x="40" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowThirdColumn"  data-offset-x="80" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>Negative free space. justify-content: center</p>
+    <div class="grid gridWithAutoColumns justifyContentCenter gridRowColumnGaps" data-expected-width="14" data-expected-height="44">
+        <div class="cell firstRowFirstColumn"  data-offset-x="-45" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowSecondColumn"  data-offset-x="-5" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowThirdColumn"  data-offset-x="35" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container">
+    <p>Negative free space. justify-content: end</p>
+    <div class="grid gridWithAutoColumns justifyContentEnd gridRowColumnGaps" data-expected-width="14" data-expected-height="44">
+        <div class="cell firstRowFirstColumn"  data-offset-x="-90" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowSecondColumn"  data-offset-x="-50" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell firstRowThirdColumn"  data-offset-x="-10" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<!-- NOTE: for the following 3 test cases we use margins just for enhancing the visual output (otherwise grids would overlap) -->
+<div class="container" style="margin-bottom: 125px;">
+    <p>Negative free space. align-content: start</p>
+    <div class="grid gridWithAutoRows alignContentStart gridRowColumnGaps" data-expected-width="24" data-expected-height="54">
+        <div class="cell firstRowFirstColumn"  data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowFirstColumn"  data-offset-x="0" data-offset-y="55" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell thirdRowFirstColumn"  data-offset-x="0" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container" style="margin-bottom: 75px;">
+    <p>Negative free space. align-content: center</p>
+    <div class="grid gridWithAutoRows alignContentCenter gridRowColumnGaps" style="margin-top: 75px" data-expected-width="24" data-expected-height="54">
+        <div class="cell firstRowFirstColumn"  data-offset-x="0" data-offset-y="-50" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowFirstColumn"  data-offset-x="0" data-offset-y="5" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell thirdRowFirstColumn"  data-offset-x="0" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div class="container" style="margin-bottom: 25px;">
+    <p>Negative free space. align-content: end</p>
+    <div class="grid gridWithAutoRows alignContentEnd gridRowColumnGaps" style="margin-top: 125px" data-expected-width="24" data-expected-height="54">
+        <div class="cell firstRowFirstColumn"  data-offset-x="0" data-offset-y="-100" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell secondRowFirstColumn"  data-offset-x="0" data-offset-y="-45" data-expected-width="20" data-expected-height="40"></div>
+        <div class="cell thirdRowFirstColumn"  data-offset-x="0" data-offset-y="10" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+</body>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-001.html
new file mode 100644
index 0000000000..5c7825ca2f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-001.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid's width changes.">
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-columns: 40% 60%;
+      height: 30vh;
+      width: 500px;
+  }
+  #grid div {
+    margin: 0px auto 0px auto;
+  }
+  #item1 {
+      background: green;
+      width: 50px;
+      height: 25px;
+  }
+  #item2 {
+      background: blue;
+      width: 100px;
+      height: 25px;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1"></div>
+    <div id="item2"></div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-x", "75");
+    item2.setAttribute("data-offset-x", "300");
+    checkLayout('#grid', false);
+
+    grid.style.width = "300px";
+
+    item1.setAttribute("data-offset-x", "35");
+    item2.setAttribute("data-offset-x", "160");
+    checkLayout('#grid', true);
+
+    done();
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-002.html
new file mode 100644
index 0000000000..3aa47a2570
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-002.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid item's width changes.">
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-columns: 40% 60%;
+      height: 30vh;
+      width: 500px;
+  }
+  #grid div {
+    margin: 0px auto 0px auto;
+  }
+  #item1 {
+      background: green;
+      width: 50px;
+      height: 25px;
+  }
+  #item2 {
+      background: blue;
+      width: 100px;
+      height: 25px;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1"></div>
+    <div id="item2"></div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-x", "75");
+    item2.setAttribute("data-offset-x", "300");
+    checkLayout('#grid', false);
+
+    item1.style.width = "100px";
+
+    item1.setAttribute("data-offset-x", "50");
+    item2.setAttribute("data-offset-x", "300");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-003.html
new file mode 100644
index 0000000000..0136d7b4b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-003.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid items's width changes.">
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-columns: 40% 60%;
+      grid-template-rows: 300px;
+      height: 400px;
+      width: 500px;
+  }
+  #grid div {
+    margin: 0px auto 0px auto;
+  }
+  #item1 {
+      background: green;
+      width: 50px;
+      height: 25px;
+  }
+  #item2 {
+      background: blue;
+      width: 100px;
+      height: 25px;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1"></div>
+    <div id="item2"></div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-x", "75");
+    item2.setAttribute("data-offset-x", "300");
+    checkLayout('#grid', false);
+
+    item1.style.width = "100px";
+
+    item1.setAttribute("data-offset-x", "50");
+    item2.setAttribute("data-offset-x", "300");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-004.html
new file mode 100644
index 0000000000..1ee0de73bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-004.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid's width changes.">
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-columns: 40% 60%;
+      grid-template-rows: 300px;
+      height: auto;
+      width: 500px;
+  }
+  #grid div {
+    margin: 0px auto 0px auto;
+  }
+  #item1 {
+      background: green;
+      width: 50px;
+      height: 25px;
+  }
+  #item2 {
+      background: blue;
+      width: 100px;
+      height: 25px;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1"></div>
+    <div id="item2"></div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-x", "75");
+    item2.setAttribute("data-offset-x", "300");
+    checkLayout('#grid', false);
+
+    grid.style.width = "300px";
+
+    item1.setAttribute("data-offset-x", "35");
+    item2.setAttribute("data-offset-x", "160");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-005.html
new file mode 100644
index 0000000000..72427f1020
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-005.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid items's width changes.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-columns: 40% 60%;
+      grid-template-rows: 100px;
+      height: 200px;
+      width: 500px;
+      align-items: start;
+  }
+  #grid div {
+    margin: 0px auto 0px auto;
+  }
+  #item1 {
+      font: 20px/1 Ahem;
+      color: green;
+  }
+  #item2 {
+      font: 10px/1 Ahem;
+      color: blue;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1">XXXXX</div>
+    <div id="item2">XXXXX</div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-x", "50");
+    item2.setAttribute("data-offset-x", "325");
+    checkLayout('#grid', false);
+
+    item2.style.fontSize = "30px";
+
+    item1.setAttribute("data-offset-x", "50");
+    item2.setAttribute("data-offset-x", "275");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-006.html
new file mode 100644
index 0000000000..ed54ce722a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-006.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid items's width changes.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      font: 10px/1 Ahem;
+      grid-template-columns: 40% 60%;
+      grid-template-rows: 100px;
+      height: auto;
+      width: 500px;
+      align-items: start;
+  }
+  #grid div {
+    margin: 0px auto 0px auto;
+  }
+  #item1 {
+      color: green;
+  }
+  #item2 {
+      color: blue;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1">XXXX</div>
+    <div id="item2">XX</div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-x", "80");
+    item2.setAttribute("data-offset-x", "340");
+    checkLayout('#grid', false);
+
+    grid.style.fontSize = "25px";
+
+    item1.setAttribute("data-offset-x", "50");
+    item2.setAttribute("data-offset-x", "325");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-007.html
new file mode 100644
index 0000000000..0b991de98b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-007.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'left' and 'right' margins must be recomputed whenever the grid's width changes.">
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-columns: 40% 60%;
+      height: 200px;
+      width: 500px;
+  }
+  #grid div {
+    margin: 0px auto 0px auto;
+  }
+  #item1 {
+      background: green;
+      width: 50px;
+      height: 25px;
+  }
+  #item2 {
+      background: blue;
+      width: 100px;
+      height: 25px;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1"></div>
+    <div id="item2"></div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-x", "75");
+    item2.setAttribute("data-offset-x", "300");
+    checkLayout('#grid', false);
+
+    grid.style.width = "300px";
+
+    item1.setAttribute("data-offset-x", "35");
+    item2.setAttribute("data-offset-x", "160");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-008.html
new file mode 100644
index 0000000000..eb96664655
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-008.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<link rel="match" href="../reference/grid-inline-axis-alignment-auto-margins-008-ref.html">
+<meta name="assert" content="The 'left' and 'right' margins must be recomputed after the grid's intrinsic size is determined.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-columns: 40% 60%;
+      grid-template-rows: 100px;
+      height: 200px;
+      width: auto;
+      align-items: start;
+  }
+  #grid div {
+    margin: 0px auto 0px auto;
+  }
+  #item1 {
+      font: 20px/1 Ahem;
+      color: green;
+  }
+  #item2 {
+      font: 40px/1 Ahem;
+      color: blue;
+  }
+</style>
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div id="item1">XXX</div>
+    <div id="item2">XXXXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-baseline.html b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-baseline.html
new file mode 100644
index 0000000000..0ff058553c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-baseline.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=943013">
+<link rel="match" href="../reference/grid-inline-baseline-ref.html">
+<p>Test passes if the text is aligned.</p>
+<div style="writing-mode: vertical-lr; text-orientation: sideways;">
+  before
+  <div style="display: inline-grid;">
+    <div style="background: green; width: 100px; height: 50px;">grid</div>
+  </div>
+  after
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-lr.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-lr.html
new file mode 100644
index 0000000000..a9ec652289
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-lr.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test:item alignment with orthogonal flows, vertical-lr writing mode</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#alignment-values">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#orthogonal-flows">
+<meta name="assert" content="This test checks that grid item alignment works as expected with vertical-lr and horizontal-tb orthogonal flows">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+.container {
+    position: relative;
+}
+.grid {
+    grid-template-columns: 100px 100px;
+    grid-template-rows: 150px 150px 150px;
+    font-size: 10px;
+}
+.item {
+   width: 50px;
+   height: 20px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<p>This test checks that grid items alignment works as expected with VERTICAL-LR vs HORIZONTAL-TB orthogonal flows.</p>
+
+<p>Direction: LTR vs LTR</p>
+<div class="container">
+    <div class="grid fit-content verticalLR directionLTR">
+        <div class="item firstRowFirstColumn   horizontalTB selfEnd"       data-offset-x="100" data-offset-y="80">end</div>
+        <div class="item firstRowSecondColumn  horizontalTB selfCenter"    data-offset-x="50"  data-offset-y="140">center</div>
+        <div class="item secondRowFirstColumn  horizontalTB selfStart"     data-offset-x="150"   data-offset-y="0">start</div>
+        <div class="item secondRowSecondColumn horizontalTB selfSelfEnd"   data-offset-x="250" data-offset-y="180">s-end</div>
+        <div class="item thirdRowFirstColumn   horizontalTB selfSelfStart" data-offset-x="300" data-offset-y="0">s-start</div>
+        <div class="item thirdRowSecondColumn  horizontalTB"               data-offset-x="300" data-offset-y="100">default</div>
+    </div>
+</div>
+
+<p>Direction: RTL vs LTR</p>
+<div class="container">
+    <div class="grid fit-content verticalLR directionRTL">
+        <div class="item firstRowFirstColumn   directionLTR horizontalTB selfEnd"       data-offset-x="100" data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  directionLTR horizontalTB selfCenter"    data-offset-x="50"  data-offset-y="40">center</div>
+        <div class="item secondRowFirstColumn  directionLTR horizontalTB selfStart"     data-offset-x="150"   data-offset-y="180">start</div>
+        <div class="item secondRowSecondColumn directionLTR horizontalTB selfSelfEnd"   data-offset-x="250" data-offset-y="80">s-end</div>
+        <div class="item thirdRowFirstColumn   directionLTR horizontalTB selfSelfStart" data-offset-x="300" data-offset-y="100">s-start</div>
+        <div class="item thirdRowSecondColumn  directionLTR horizontalTB"               data-offset-x="300" data-offset-y="80">default</div>
+    </div>
+</div>
+
+<p>Direction: LTR vs RTL</p>
+<div class="container">
+    <div class="grid fit-content verticalLR directionLTR">
+        <div class="item firstRowFirstColumn   directionRTL horizontalTB selfEnd"       data-offset-x="100" data-offset-y="80">end</div>
+        <div class="item firstRowSecondColumn  directionRTL horizontalTB selfCenter"    data-offset-x="50"  data-offset-y="140">center</div>
+        <div class="item secondRowFirstColumn  directionRTL horizontalTB selfStart"     data-offset-x="150"   data-offset-y="0">start</div>
+        <div class="item secondRowSecondColumn directionRTL horizontalTB selfSelfEnd"   data-offset-x="150"   data-offset-y="180">s-end</div>
+        <div class="item thirdRowFirstColumn   directionRTL horizontalTB selfSelfStart" data-offset-x="400" data-offset-y="0">s-start</div>
+        <div class="item thirdRowSecondColumn  directionRTL horizontalTB"               data-offset-x="300" data-offset-y="100">default</div>
+    </div>
+</div>
+
+<p>Direction: RTL vs RTL</p>
+<div class="container">
+    <div class="grid fit-content verticalLR directionRTL">
+        <div class="item firstRowFirstColumn   horizontalTB selfEnd"       data-offset-x="100" data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  horizontalTB selfCenter"    data-offset-x="50"  data-offset-y="40">center</div>
+        <div class="item secondRowFirstColumn  horizontalTB selfStart"     data-offset-x="150"   data-offset-y="180">start</div>
+        <div class="item secondRowSecondColumn horizontalTB selfSelfEnd"   data-offset-x="150"   data-offset-y="80">s-end</div>
+        <div class="item thirdRowFirstColumn   horizontalTB selfSelfStart" data-offset-x="400" data-offset-y="100">s-start</div>
+        <div class="item thirdRowSecondColumn  horizontalTB"               data-offset-x="300" data-offset-y="80">default</div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-rl.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-rl.html
new file mode 100644
index 0000000000..2b3b7a489e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-rl.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test:item alignment with orthogonal flows, vertical-rl writing mode</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#alignment-values">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#orthogonal-flows">
+<meta name="assert" content="This test checks that grid item alignment works as expected with vertical-rl and horizontal-tb orthogonal flows">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+.container {
+    position: relative;
+}
+.grid {
+    grid-template-columns: 100px 100px;
+    grid-template-rows: 150px 150px 150px;
+    font-size: 10px;
+}
+.item {
+   width: 50px;
+   height: 20px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<p>This test checks that grid items alignment works as expected with VERTICAL-RL vs HORIZONTAL-TB orthogonal flows.</p>
+
+<p>Direction: LTR vs LTR</p>
+<div class="container">
+    <div class="grid fit-content verticalRL directionLTR">
+        <div class="item firstRowFirstColumn   horizontalTB selfEnd"       data-offset-x="300" data-offset-y="80">end</div>
+        <div class="item firstRowSecondColumn  horizontalTB selfCenter"    data-offset-x="350" data-offset-y="140">center</div>
+        <div class="item secondRowFirstColumn  horizontalTB selfStart"     data-offset-x="250" data-offset-y="0">start</div>
+        <div class="item secondRowSecondColumn horizontalTB selfSelfEnd"   data-offset-x="250" data-offset-y="180">s-end</div>
+        <div class="item thirdRowFirstColumn horizontalTB selfSelfStart" data-offset-x="0"   data-offset-y="0">s-start</div>
+        <div class="item thirdRowSecondColumn  horizontalTB"               data-offset-x="100" data-offset-y="100">default</div>
+    </div>
+</div>
+
+<p>Direction: RTL vs LTR</p>
+<div class="container">
+    <div class="grid fit-content verticalRL directionRTL">
+        <div class="item firstRowFirstColumn   directionLTR horizontalTB selfEnd"       data-offset-x="300" data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  directionLTR horizontalTB selfCenter"    data-offset-x="350" data-offset-y="40">center</div>
+        <div class="item secondRowFirstColumn  directionLTR horizontalTB selfStart"     data-offset-x="250" data-offset-y="180">start</div>
+        <div class="item secondRowSecondColumn directionLTR horizontalTB selfSelfEnd"   data-offset-x="250" data-offset-y="80">s-end</div>
+        <div class="item thirdRowFirstColumn   directionLTR horizontalTB selfSelfStart" data-offset-x="0"   data-offset-y="100">s-start</div>
+        <div class="item thirdRowSecondColumn  directionLTR horizontalTB"               data-offset-x="100" data-offset-y="80">default</div>
+    </div>
+</div>
+
+<p>Direction: LTR vs RTL</p>
+<div class="container">
+    <div class="grid fit-content verticalRL directionLTR">
+        <div class="item firstRowFirstColumn   directionRTL horizontalTB selfEnd"       data-offset-x="300" data-offset-y="80">end</div>
+        <div class="item firstRowSecondColumn  directionRTL horizontalTB selfCenter"    data-offset-x="350" data-offset-y="140">center</div>
+        <div class="item secondRowFirstColumn  directionRTL horizontalTB selfStart"     data-offset-x="250" data-offset-y="0">start</div>
+        <div class="item secondRowSecondColumn directionRTL horizontalTB selfSelfEnd"   data-offset-x="150" data-offset-y="180">s-end</div>
+        <div class="item thirdRowFirstColumn   directionRTL horizontalTB selfSelfStart" data-offset-x="100" data-offset-y="0">s-start</div>
+        <div class="item thirdRowSecondColumn  directionRTL horizontalTB"               data-offset-x="100" data-offset-y="100">default</div>
+
+    </div>
+</div>
+
+<p>Direction: RTL vs RTL</p>
+<div class="container">
+    <div class="grid fit-content verticalRL directionRTL">
+        <div class="item firstRowFirstColumn   horizontalTB selfEnd"       data-offset-x="300" data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  horizontalTB selfCenter"    data-offset-x="350" data-offset-y="40">center</div>
+        <div class="item secondRowFirstColumn  horizontalTB selfStart"     data-offset-x="250" data-offset-y="180">start</div>
+        <div class="item secondRowSecondColumn horizontalTB selfSelfEnd"   data-offset-x="150" data-offset-y="80">s-end</div>
+        <div class="item thirdRowFirstColumn   horizontalTB selfSelfStart" data-offset-x="100" data-offset-y="100">s-start</div>
+        <div class="item thirdRowSecondColumn  horizontalTB"               data-offset-x="100" data-offset-y="80">default</div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows.html
new file mode 100644
index 0000000000..133132529a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test: item alignment with orthogonal flows</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#alignment-values">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#orthogonal-flows">
+<meta name="assert" content="This test checks that grid item alignment works as expected with horizontal-tb and vertical-rl/vertical-lr orthogonal flows">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+.container {
+    position: relative;
+}
+.grid {
+    grid-template-columns: 100px 100px;
+    grid-template-rows: 150px 150px 150px;
+    font-size: 10px;
+}
+.item {
+   width: 20px;
+   height: 50px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<p>This test checks that grid items alignment works as expected with HORIZONTAL-TB vs VERTICAL-RL orthogonal flows.</p>
+
+<p>Orthogonal flows: HORIZONTAL-TB vs VERTICAL-RL</p>
+<p>Direction: LTR vs LTR</p>
+<div class="container">
+    <div class="grid fit-content directionLTR">
+        <div class="item firstRowFirstColumn   verticalRL selfEnd"       data-offset-x="80"   data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  verticalRL selfCenter"    data-offset-x="140"  data-offset-y="50">center</div>
+        <div class="item secondRowFirstColumn  verticalRL selfStart"     data-offset-x="0"    data-offset-y="150">start</div>
+        <div class="item secondRowSecondColumn verticalRL selfSelfEnd"   data-offset-x="100"  data-offset-y="250">s-end</div>
+        <div class="item thirdRowFirstColumn   verticalRL selfSelfStart" data-offset-x="80"   data-offset-y="300">s-start</div>
+        <div class="item thirdRowSecondColumn  verticalRL"               data-offset-x= "100" data-offset-y="300">default</div>
+    </div>
+</div>
+
+<p>Direction: RTL vs LTR</p>
+<div class="container">
+    <div class="grid fit-content directionRTL">
+        <div class="item firstRowFirstColumn   directionLTR verticalRL selfEnd"       data-offset-x="100" data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  directionLTR verticalRL selfCenter"    data-offset-x="40"  data-offset-y="50">center</div>
+        <div class="item secondRowFirstColumn  directionLTR verticalRL selfStart"     data-offset-x="180"  data-offset-y="150">start</div>
+        <div class="item secondRowSecondColumn directionLTR verticalRL selfSelfEnd"   data-offset-x="0" data-offset-y="250">s-end</div>
+        <div class="item thirdRowFirstColumn   directionLTR verticalRL selfSelfStart" data-offset-x="180"  data-offset-y="300">s-start</div>
+        <div class="item thirdRowSecondColumn  directionLTR verticalRL"               data-offset-x="80" data-offset-y="300">default</div>
+
+    </div>
+</div>
+
+<p>Direction: LTR vs RTL</p>
+<div class="container">
+    <div class="grid fit-content directionLTR">
+        <div class="item firstRowFirstColumn   directionRTL verticalRL selfEnd"       data-offset-x="80"  data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  directionRTL verticalRL selfCenter"    data-offset-x="140" data-offset-y="50">center</div>
+        <div class="item secondRowFirstColumn  directionRTL verticalRL selfStart"     data-offset-x="0" data-offset-y="150">start</div>
+        <div class="item secondRowSecondColumn directionRTL verticalRL selfSelfEnd"   data-offset-x="100"   data-offset-y="150">s-end</div>
+        <div class="item thirdRowFirstColumn   directionRTL verticalRL selfSelfStart" data-offset-x="80" data-offset-y="400">s-start</div>
+        <div class="item thirdRowSecondColumn  directionRTL verticalRL"               data-offset-x="100"   data-offset-y="300">default</div>
+    </div>
+</div>
+
+<p>Direction: RTL vs RTL</p>
+<div class="container">
+    <div class="grid fit-content directionRTL">
+        <div class="item firstRowFirstColumn   verticalRL selfEnd"       data-offset-x="100" data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  verticalRL selfCenter"    data-offset-x="40"  data-offset-y="50">center</div>
+        <div class="item secondRowFirstColumn  verticalRL selfStart"     data-offset-x="180" data-offset-y="150">start</div>
+        <div class="item secondRowSecondColumn verticalRL selfSelfEnd"   data-offset-x="0"   data-offset-y="150">s-end</div>
+        <div class="item thirdRowFirstColumn   verticalRL selfSelfStart" data-offset-x="180" data-offset-y="400">s-start</div>
+        <div class="item thirdRowSecondColumn  verticalRL"               data-offset-x="80"  data-offset-y="300">default</div>
+    </div>
+</div>
+
+<!-- HORIZONTAL-TB vs VERTICAL-LR -->
+<p>Orthogonal flows: HORIZONTAL-TB vs VERTICAL-LR</p>
+<p>Direction: LTR vs LTR</p>
+<div class="container">
+    <div class="grid fit-content drectionLTR">
+        <div class="item firstRowFirstColumn   verticalLR selfEnd"       data-offset-x="80"  data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  verticalLR selfCenter"    data-offset-x="140" data-offset-y="50">center</div>
+        <div class="item secondRowFirstColumn  verticalLR selfStart"     data-offset-x="0"   data-offset-y="150">start</div>
+        <div class="item secondRowSecondColumn verticalLR selfSelfEnd"   data-offset-x="180" data-offset-y="250">s-end</div>
+        <div class="item thirdRowFirstColumn   verticalLR selfSelfStart" data-offset-x="0"   data-offset-y="300">s-start</div>
+        <div class="item thirdRowSecondColumn  verticalLR"               data-offset-x="100" data-offset-y="300">default</div>
+    </div>
+</div>
+
+<p>Direction: RTL vs LTR</p>
+<div class="container">
+    <div class="grid fit-content directionRTL">
+        <div class="item firstRowFirstColumn   directionLTR verticalLR selfEnd"       data-offset-x="100" data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  directionLTR verticalLR selfCenter"    data-offset-x="40"  data-offset-y="50">center</div>
+        <div class="item secondRowFirstColumn  directionLTR verticalLR selfStart"     data-offset-x="180" data-offset-y="150">start</div>
+        <div class="item secondRowSecondColumn directionLTR verticalLR selfSelfEnd"   data-offset-x="80"  data-offset-y="250">s-end</div>
+        <div class="item thirdRowFirstColumn   directionLTR verticalLR selfSelfStart" data-offset-x="100" data-offset-y="300">s-start</div>
+        <div class="item thirdRowSecondColumn  directionLTR verticalLR"               data-offset-x="80"  data-offset-y="300">default</div>
+    </div>
+</div>
+
+<p>Direction: RTL vs RTL</p>
+<div class="container">
+    <div class="grid fit-content directionRTL">
+        <div class="item firstRowFirstColumn   verticalLR selfEnd"       data-offset-x="100" data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  verticalLR selfCenter"    data-offset-x="40"  data-offset-y="50">center</div>
+        <div class="item secondRowFirstColumn  verticalLR selfStart"     data-offset-x="180" data-offset-y="150">start</div>
+        <div class="item secondRowSecondColumn verticalLR selfSelfEnd"   data-offset-x="80"  data-offset-y="150">s-end</div>
+        <div class="item thirdRowFirstColumn   verticalLR selfSelfStart" data-offset-x="100" data-offset-y="400">s-start</div>
+        <div class="item thirdRowSecondColumn  verticalLR"               data-offset-x="80"  data-offset-y="300">default</div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-justify-self-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-justify-self-001.html
new file mode 100644
index 0000000000..5104c2837b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-justify-self-001.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<meta name="assert" content="For a grid item with an 'aspect-ratio' and a resolvable percent height and a non-stretching justify-self, the item's inline-size should be resolved based on the height and 'aspect-ratio'">
+<style>
+  .group { margin-bottom: 20px;}
+  .group.orthog .item { writing-mode: vertical-rl }
+  .grid {
+      height: 32px;
+      width: 24px;
+      display: inline-grid;
+      border: 2px solid black;
+      vertical-align: top;
+      background: cyan;
+  }
+
+  .item {
+      height: 100%;
+      background: fuchsia;
+      box-sizing: border-box;
+      aspect-ratio: 1/2;
+  }
+  .center     { justify-self: center; }
+  .start      { justify-self: start; }
+  .end        { justify-self: end; }
+  .self-start { justify-self: self-start; }
+  .self-end   { justify-self: self-end; }
+  .flex-start { justify-self: flex-start; }
+  .flex-end   { justify-self: flex-end; }
+  .left       { justify-self: left; }
+  .right      { justify-self: right; }
+  .normal     { justify-self: normal; }
+  .stretch    { justify-self: stretch; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.item')">
+  <div class="group">
+    <div class="grid">
+      <div class="item start"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item end"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item self-start"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item self-end"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item flex-start"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item flex-end"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item left"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item right"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item center"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item normal"
+           data-expected-width="24" data-expected-height="48"></div>
+    </div>
+    <div class="grid">
+      <div class="item stretch"
+           data-expected-width="24" data-expected-height="48"></div>
+    </div>
+  </div>
+
+  <!-- For these ones, the item's writing-mode will be orthogonal to the
+       grid container's writing-mode -->
+  <div class="group orthog">
+    <div class="grid">
+      <div class="item start"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item end"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item self-start"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item self-end"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item flex-start"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item flex-end"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item left"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item right"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item center"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <!-- TODO(dholbert):
+         These ones behave differently in every browser. Need to sort out
+         the expected rendering here...
+    <div class="grid">
+      <div class="item normal"
+           data-expected-width="24" data-expected-height="48"></div>
+    </div>
+    <div class="grid">
+      <div class="item stretch"
+           data-expected-width="24" data-expected-height="48"></div>
+    </div>
+    -->
+  </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-justify-self-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-justify-self-002.html
new file mode 100644
index 0000000000..9f40289775
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-justify-self-002.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<meta name="assert" content="For a grid item with display:table, an 'aspect-ratio', a resolvable percent height, and a non-stretching justify-self, the item's inline-size should be resolved based on the height and 'aspect-ratio'">
+<style>
+  .group { margin-bottom: 20px;}
+  .group.orthog .item { writing-mode: vertical-rl }
+  .grid {
+      height: 32px;
+      width: 24px;
+      display: inline-grid;
+      border: 2px solid black;
+      vertical-align: top;
+      background: cyan;
+  }
+
+  .item {
+      display: table;
+      height: 100%;
+      background: fuchsia;
+      box-sizing: border-box;
+      aspect-ratio: 1/2;
+  }
+  .center     { justify-self: center; }
+  .start      { justify-self: start; }
+  .end        { justify-self: end; }
+  .self-start { justify-self: self-start; }
+  .self-end   { justify-self: self-end; }
+  .flex-start { justify-self: flex-start; }
+  .flex-end   { justify-self: flex-end; }
+  .left       { justify-self: left; }
+  .right      { justify-self: right; }
+  .normal     { justify-self: normal; }
+  .stretch    { justify-self: stretch; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.item')">
+  <div class="group">
+    <div class="grid">
+      <div class="item start"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item end"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item self-start"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item self-end"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item flex-start"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item flex-end"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item left"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item right"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item center"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item normal"
+           data-expected-width="24" data-expected-height="48"></div>
+    </div>
+    <div class="grid">
+      <div class="item stretch"
+           data-expected-width="24" data-expected-height="48"></div>
+    </div>
+  </div>
+
+  <!-- For these ones, the item's writing-mode will be orthogonal to the
+       grid container's writing-mode -->
+  <div class="group orthog">
+    <div class="grid">
+      <div class="item start"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item end"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item self-start"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item self-end"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item flex-start"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item flex-end"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item left"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item right"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <div class="grid">
+      <div class="item center"
+           data-expected-width="16" data-expected-height="32"></div>
+    </div>
+    <!-- TODO(dholbert):
+         These ones behave differently in every browser. Need to sort out
+         the expected rendering here...
+    <div class="grid">
+      <div class="item normal"
+           data-expected-width="24" data-expected-height="48"></div>
+    </div>
+    <div class="grid">
+      <div class="item stretch"
+           data-expected-width="24" data-expected-height="48"></div>
+    </div>
+    -->
+  </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1-ref.html
new file mode 100644
index 0000000000..1120e45f5c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1-ref.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: stretching works for replaced items with a fallback aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-block;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  img {
+    display: block;
+  }
+
+  .justify {
+    width: 350px;
+  }
+  .align {
+    height: 250px;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img style="width:10px; height:20px">
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1.html
new file mode 100644
index 0000000000..909406f5e9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-1.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>stretching works for replaced items with a fallback aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544">
+<link rel="match" href="grid-item-aspect-ratio-stretch-1-ref.html">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-grid;
+    grid-template: 100% / 100%;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  .justify {
+    justify-self: stretch;
+  }
+  .align {
+    align-self: stretch;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img>
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2-ref.html
new file mode 100644
index 0000000000..84d7950b09
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2-ref.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: stretching works for replaced items with a fallback aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-block;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  img {
+    display: block;
+  }
+
+  .justify {
+    width: 350px;
+  }
+  .align {
+    height: 250px;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img style="width:20px; height:40px">
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2.html
new file mode 100644
index 0000000000..2a4dd2d787
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-2.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>stretching works for replaced items with a fallback aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544">
+<link rel="match" href="grid-item-aspect-ratio-stretch-2-ref.html">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-2">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-grid;
+    grid-template: 100% / 100%;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  .justify {
+    justify-self: stretch;
+  }
+  .align {
+    align-self: stretch;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img>
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3-ref.html
new file mode 100644
index 0000000000..b85803ec8f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3-ref.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: stretching works for replaced items with a fallback aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-block;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  img {
+    display: block;
+    background: blue;
+  }
+
+  .justify {
+    width: 350px;
+  }
+  .align {
+    height: 250px;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img style="width:0px; height:20px">
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3.html
new file mode 100644
index 0000000000..43202541b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-3.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>stretching works for replaced items with a fallback aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544">
+<link rel="match" href="grid-item-aspect-ratio-stretch-3-ref.html">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-grid;
+    grid-template: 100% / 100%;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+  img { background: blue; }
+
+  .justify {
+    justify-self: stretch;
+  }
+  .align {
+    align-self: stretch;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img>
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="20px" viewBox="0 0 50 100"></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4-ref.html
new file mode 100644
index 0000000000..8d7fc870fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4-ref.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: stretching works for replaced items with a fallback aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-block;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  img {
+    display: block;
+    background: blue;
+  }
+
+  .justify {
+    width: 350px;
+  }
+  .align {
+    height: 250px;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img style="width:20px; height:0px">
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4.html
new file mode 100644
index 0000000000..f689cce023
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-aspect-ratio-stretch-4.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>stretching works for replaced items with a fallback aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544">
+<link rel="match" href="grid-item-aspect-ratio-stretch-4-ref.html">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-grid;
+    grid-template: 100% / 100%;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+  img { background: blue; }
+
+  .justify {
+    justify-self: stretch;
+  }
+  .align {
+    align-self: stretch;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img>
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="0px" viewBox="0 0 50 100"></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-001.html
new file mode 100644
index 0000000000..be5eb6efbe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-001.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1213878">
+<meta name="assert" content="Auto margin alignment should be safe.">
+<style>
+#grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  background: red;
+  grid-template: 0px / 0px;
+}
+
+#grid > div {
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="grid">
+  <div style="margin: auto;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-002.html
new file mode 100644
index 0000000000..037794e6cc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-002.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1213878">
+<meta name="assert" content="Auto margin alignment should be safe.">
+<style>
+#grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  background: red;
+  grid-template: 0px / 0px;
+}
+
+#grid > div {
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="grid">
+  <div style="margin-left: auto; margin-top: auto;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment-vertical-lr.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment-vertical-lr.html
new file mode 100644
index 0000000000..e11398907e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment-vertical-lr.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test: align-self and justify-self with auto margins, vertical-lr</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<meta name="assert" content="This test checks that align-self and justify-self properties are not applied when there is auto-margin in the corresponding axis. Instead, auto-margin alignment should be applied, both for LTR and RTL directions, vertical-lr writing mode.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+.grid {
+    grid-template-columns: 100px 100px;
+    grid-template-rows: 200px 200px;
+    margin-bottom: 20px;
+}
+
+.item {
+    width: 20px;
+    height: 40px;
+}
+
+.autoMarginTop { margin-top: auto; }
+.autoMarginRight { margin-right: auto; }
+.autoMarginBottom { margin-bottom: auto; }
+.autoMarginLeft { margin-left: auto; }
+.autoMargin { margin: auto; }
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<p>This test checks that align-self and justify-self properties are not applied when there is auto-margin in the corresponding axis. Instead, auto-margin alignment should be applied.</p>
+
+<p>Direction: LTR | Self Alignment: center | fixed size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalLR itemsCenter">
+        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="290" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: LTR | Self Alignment: start | fixed size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalLR">
+        <div class="item autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: LTR | Self Alignment: center | auto size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalLR itemsCenter">
+        <div class="autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="60" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMarginBottom secondRowSecondColumn" data-offset-x="290" data-offset-y="100" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+    </div>
+</div>
+
+<p>Direction: LTR | Self Alignment: start | auto size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalLR">
+        <div class="autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMargin secondRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+    </div>
+</div>
+
+<!-- direction RTL -->
+<p>Direction: RTL | Self Alignment: center | fixed size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalLR itemsCenter directionRTL">
+        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+
+<p>Direction: RTL | Self Alignment: start | fixed size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalLR directionRTL">
+        <div class="item autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowSecondColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: RTL | Self Alignment: center | auto size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalLR itemsCenter directionRTL">
+        <div class="autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="160" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMarginLeft secondRowFirstColumn" data-offset-x="380" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMarginBottom secondRowSecondColumn" data-offset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+    </div>
+</div>
+
+
+<p>Direction: RTL | Self Alignment: start | auto size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalLR directionRTL">
+        <div class="autoMargin firstRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMargin firstRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMargin secondRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMargin secondRowSecondColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+    </div>
+</div>
+
+</body>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment-vertical-rl.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment-vertical-rl.html
new file mode 100644
index 0000000000..42c6dd2d29
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment-vertical-rl.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test: align-self and justify-self with auto margins, vertical-rl</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<meta name="assert" content="This test checks that align-self and justify-self properties are not applied when there is auto-margin in the corresponding axis. Instead, auto-margin alignment should be applied, both for LTR and RTL directions, vertical-rl writing mode.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+.grid {
+    grid-template-columns: 100px 100px;
+    grid-template-rows: 200px 200px;
+    margin-bottom: 20px;
+}
+
+.item {
+    width: 20px;
+    height: 40px;
+}
+
+.autoMarginTop { margin-top: auto; }
+.autoMarginRight { margin-right: auto; }
+.autoMarginBottom { margin-bottom: auto; }
+.autoMarginLeft { margin-left: auto; }
+.autoMargin { margin: auto; }
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<p>This test checks that align-self and justify-self properties are not applied when there is auto-margin in the corresponding axis. Instead, auto-margin alignment should be applied.</p>
+
+<p>Direction: LTR | Self Alignment: center | fixed size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalRL itemsCenter">
+        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="90" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: LTR | Self Alignment: start | fixed size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalRL">
+        <div class="item autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: LTR | Self Alignment: center | auto size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalRL itemsCenter">
+        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="60" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="90" data-offset-y="100" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+    </div>
+</div>
+
+<p>Direction: LTR | Self Alignment: start | auto size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalRL">
+        <div class="item autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="item autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="item autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="item autoMargin secondRowSecondColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+    </div>
+</div>
+
+<!-- direction RTL -->
+<p>Direction: RTL | Self Alignment: center | fixed size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalRL itemsCenter directionRTL">
+        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+
+<p>Direction: RTL | Self Alignment: start | fixed size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalRL directionRTL">
+        <div class="item autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: RTL | Self Alignment: center | auto size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content verticalRL itemsCenter directionRTL">
+        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="160" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+    </div>
+</div>
+
+
+<p>Direction: RTL | Self Alignment: start | auto size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid verticalRL directionRTL" data-expected-width="400" data-expected-height="200">
+        <div class="item autoMargin firstRowFirstColumn" data-offset-x="290" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="item autoMargin firstRowSecondColumn" data-offset-x="290" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="item autoMargin secondRowFirstColumn" data-offset-x="90" data-offset-y="130" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="item autoMargin secondRowSecondColumn" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+    </div>
+</div>
+
+</body>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment.html
new file mode 100644
index 0000000000..f9fdfd7dbf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test: align-self and justify-self with auto margins</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<meta name="assert" content="This test checks that align-self and justify-self properties are not applied when there is auto-margin in the corresponding axis. Instead, auto-margin alignment should be applied, both for LTR and RTL directions.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+.grid {
+    grid-template-columns: 100px 100px;
+    grid-template-rows: 200px 200px;
+    margin-bottom: 20px;
+}
+
+.item {
+    width: 20px;
+    height: 40px;
+}
+
+.autoMarginTop { margin-top: auto; }
+.autoMarginRight { margin-right: auto; }
+.autoMarginBottom { margin-bottom: auto; }
+.autoMarginLeft { margin-left: auto; }
+.autoMargin { margin: auto; }
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<p>This test checks that align-self and justify-self properties are not applied when there is auto-margin in the corresponding axis. Instead, auto-margin alignment should be applied.</p>
+
+<p>Direction: LTR | Self Alignment: center | fixed size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content itemsCenter">
+        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="40" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="140" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: LTR | Self Alignment: start | fixed size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content">
+        <div class="item autoMargin firstRowFirstColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin firstRowSecondColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowFirstColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowSecondColumn" data-offset-x="140" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: LTR | Self Alignment: center | auto size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content itemsCenter">
+        <div class="autoMarginTop firstRowFirstColumn" data-offset-x="40" data-offset-y="160" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMarginRight firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMarginLeft secondRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMarginBottom secondRowSecondColumn" data-offset-x="140" data-offset-y="200" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+    </div>
+</div>
+
+<p>Direction: LTR | Self Alignment: start | auto size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content">
+        <div class="autoMargin firstRowFirstColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMargin firstRowSecondColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMargin secondRowFirstColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMargin secondRowSecondColumn" data-offset-x="140" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+    </div>
+</div>
+
+<!-- direction RTL -->
+<p>Direction: RTL | Self Alignment: center | fixed size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content itemsCenter directionRTL">
+        <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x="40" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: RTL | Self Alignment: start | fixed size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content directionRTL">
+        <div class="item autoMargin firstRowFirstColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin firstRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowFirstColumn" data-offset-x="140" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+        <div class="item autoMargin secondRowSecondColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<p>Direction: RTL | Self Alignment: center | auto size items | 1 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content itemsCenter directionRTL">
+        <div class="autoMarginTop firstRowFirstColumn" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMarginLeft secondRowFirstColumn" data-offset-x="180" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMarginBottom secondRowSecondColumn" data-offset-x="40" data-offset-y="200" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+    </div>
+</div>
+
+<p>Direction: RTL | Self Alignment: start | auto size items | 4 auto-margin</p>
+<div style="position: relative">
+    <div class="grid fit-content directionRTL">
+        <div class="autoMargin firstRowFirstColumn" data-offset-x="140" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMargin firstRowSecondColumn" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMargin secondRowFirstColumn" data-offset-x="140" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+        <div class="autoMargin secondRowSecondColumn" data-offset-x="40" data-offset-y="280" data-expected-width="20" data-expected-height="40"><div class="item"></div></div>
+    </div>
+</div>
+
+</body>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-001-ref.html
new file mode 100644
index 0000000000..e55fe0b9f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-001-ref.html
@@ -0,0 +1,110 @@
+<!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: align-content/justify-content:baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: auto / repeat(4, auto);
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+div {
+  float: left;
+  border:2px solid;
+  padding:1px;
+  margin:1px;
+}
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:20px; }
+span:nth-child(2) { font-size:30px; }
+span:nth-child(3) { font-size:10px; }
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-self:baseline; justify-self:baseline; }
+.lb { align-self:last baseline; justify-self:last baseline; }
+.s  { align-self:self-stretch; justify-self:self-stretch; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span style="padding-block-start:8px;" class="fb">A<br>B</span><span class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span style="padding-block-start:8px;" class="fb pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span style="padding-block-start:2px;" class="fb">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:4px; padding-block-end:36px;" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span style="padding-block-start:15px;" class="fb pbs">A<br>B</span><span style="padding-block-start:18px;" class="fb">M<br>N</span><span style="padding-block-start:22px; padding-block-end:36px;" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span style="padding-block-start:8px;" class="fb">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span style="padding-block-start:8px;" class="fb pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span style="padding-block-end:2px;" class="lb">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid hl"><span style="padding-block-end:7px;" class="lb pbe">A<br>B</span><span style="padding-block-end:8px;" class="lb">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:8px;" class="lb">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:8px;" class="lb pbs">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:2px;" class="lb">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:7px;" class="lb pbe">A<br>B</span><span style="padding-block-end:8px;" class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-start:2px;" class="fb vl">A<br>B</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; padding-block-end:36px;" class="fb s vl">X<br>Z</span></div>
+<div class="grid c hl"><span style="padding-block-start:2px;" class="fb vl pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; padding-block-end:36px;" class="fb s vl">X<br>Z</span></div>
+<div class="grid c vl"><span style="padding-block-start:8px;" class="fb hl">A<br>B</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s hl">X<br>Z</span></div>
+<div class="grid c vl"><span style="padding-block-start:15px;" class="fb hl pbs">A<br>B</span><span style="padding-block-start:12px;" class="fb hl">M<br>N</span><span style="padding-block-start:28px; padding-block-end:24px;" class="fb s hl">X<br>Z</span></div>
+<div class="grid c vr"><span style="padding-block-start:8px;" class="fb hl">A<br>B</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s hl">X<br>Z</span></div>
+<div class="grid c vr"><span style="padding-block-start:8px;" class="fb hl pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s hl">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-end:8px;" class="lb vl">A<br>B</span><span style="padding-block-end:0;" class="lb vl">M<br>N</span></div>
+<div class="grid c hl"><span style="padding-block-end:7px;" class="lb vl pbe">A<br>B</span><span style="padding-block-end:2px;" class="lb vl">M<br>N</span></div>
+<div class="grid c vl"><span style="padding-block-end:2px;" class="lb hl">A<br>B</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vl"><span style="padding-block-end:2px;" class="lb hl pbs">A<br>B</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span style="padding-block-end:2px;" class="lb hl">A<br>B</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span style="padding-block-end:7px;" class="lb hl pbe">A<br>B</span><span style="padding-block-end:8px;" class="lb hl">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-start:8px;" class="fb vr">A<br>B</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s vr">X<br>Z</span></div>
+<div class="grid c hl"><span style="padding-block-start:5px;" class="fb vr pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s vr">X<br>Z</span></div>
+<div class="grid vl"><span style="padding-block-start:8px;" class="fb vr">A<br>B</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px;" class="fb s vr">X<br>Z</span></div>
+<div class="grid vl"><span style="padding-block-start:15px;" class="fb vr pbs">A<br>B</span><span style="padding-block-start:7px;" class="fb vr">M<br>N</span><span style="padding-block-start:23px; padding-block-end:24px;" class="fb s vr">X<br>Z</span></div>
+<div class="grid vr"><span style="padding-block-start:2px;" class="fb vl">A<br>B</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; padding-block-end:36px;" class="fb s vl">X<br>Z</span></div>
+<div class="grid vr"><span style="padding-block-start:0;" class="fb vl pbe">A<br>B</span><span style="padding-block-start:1px;" class="fb vl">M<br>N</span><span style="padding-block-start:5px; padding-block-end:36px;" class="fb s vl">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-end:2px;" class="lb vr">A<br>B</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div>
+<div class="grid c hl"><span style="padding-block-end:7px;" class="lb vr pbe">A<br>B</span><span style="padding-block-end:5px;" class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:2px;" class="lb vr">A<br>B</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:0px;" class="lb vr pbs">A<br>B</span><span style="padding-block-end:3px;" class="lb vr">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:8px;" class="lb vl">A<br>B</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:8px;" class="lb vl pbe">A<br>B</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-001.html
new file mode 100644
index 0000000000..aa33f3c15b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-001.html
@@ -0,0 +1,110 @@
+<!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: align-content:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content">
+  <link rel="match" href="grid-item-content-baseline-001-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: auto / repeat(4, auto);
+  border: 2px solid;
+  padding: 1px;
+  margin: 1px;
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:20px; }
+span:nth-child(2) { font-size:30px; }
+span:nth-child(3) { font-size:10px; }
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; align-self:self-start; justify-self:self-start; }
+.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; }
+.s  { align-self:stretch; justify-self:stretch; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="fb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="lb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="lb pbs">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="lb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="fb vl">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div>
+<div class="grid c hl"><span class="fb vl pbe">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div>
+<div class="grid c vl"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div>
+<div class="grid c vl"><span class="fb hl pbs">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div>
+<div class="grid c vr"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div>
+<div class="grid c vr"><span class="fb hl pbe">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="lb vl">A<br>B</span><span class="lb vl">M<br>N</span></div>
+<div class="grid c hl"><span class="lb vl pbe">A<br>B</span><span class="lb vl">M<br>N</span></div>
+<div class="grid c vl"><span class="lb hl">A<br>B</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vl"><span class="lb hl pbs">A<br>B</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span class="lb hl">A<br>B</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span class="lb hl pbe">A<br>B</span><span class="lb hl">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="fb vr">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div>
+<div class="grid c hl"><span class="fb vr pbe">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div>
+<div class="grid vl"><span class="fb vr">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div>
+<div class="grid vl"><span class="fb vr pbs">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div>
+<div class="grid vr"><span class="fb vl">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div>
+<div class="grid vr"><span class="fb vl pbe">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="lb vr">A<br>B</span><span class="lb vr">M<br>N</span></div>
+<div class="grid c hl"><span class="lb vr pbe">A<br>B</span><span class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span class="lb vr">A<br>B</span><span class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span class="lb vr pbs">A<br>B</span><span class="lb vr">M<br>N</span></div>
+<div class="grid vr"><span class="lb vl">A<br>B</span><span class="lb vl">M<br>N</span></div>
+<div class="grid vr"><span class="lb vl pbe">A<br>B</span><span class="lb vl">M<br>N</span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-002-ref.html
new file mode 100644
index 0000000000..d32bbf2931
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-002-ref.html
@@ -0,0 +1,109 @@
+<!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: align-content/justify-content:baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: 100px / repeat(4, auto);
+}
+.c {
+  grid: repeat(4, auto) / 100px;
+}
+div {
+  float: left;
+  border:2px solid;
+  padding:1px;
+  margin:1px;
+}
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:20px; }
+span:nth-child(2) { font-size:30px; }
+span:nth-child(3) { font-size:10px; }
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-self:baseline; justify-self:baseline; }
+.lb { align-self:last baseline; justify-self:last baseline; }
+.s  { align-self:self-stretch; justify-self:self-stretch; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span style="padding-block-start:8px;" class="fb">A<br>B</span><span class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span style="padding-block-start:8px;" class="fb pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span style="padding-block-start:2px;" class="fb">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:4px; padding-block-end:74px;" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span style="padding-block-start:15px;" class="fb pbs">A<br>B</span><span style="padding-block-start:18px;" class="fb">M<br>N</span><span style="padding-block-start:22px; padding-block-end:56px;" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span style="padding-block-start:8px;" class="fb">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span style="padding-block-start:8px;" class="fb pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span style="padding-block-end:2px;" class="lb">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid hl"><span style="padding-block-end:7px;" class="lb pbe">A<br>B</span><span style="padding-block-end:8px;" class="lb">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:8px;" class="lb">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:8px;" class="lb pbs">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:2px;" class="lb">A<br>B</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:7px;" class="lb pbe">A<br>B</span><span style="padding-block-end:8px;" class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-start:2px;" class="fb vl">A<br>B</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; padding-block-end:74px;" class="fb s vl">X<br>Z</span></div>
+<div class="grid c hl"><span style="padding-block-start:2px;" class="fb vl pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; padding-block-end:74px;" class="fb s vl">X<br>Z</span></div>
+<div class="grid c vl"><span style="padding-block-start:8px;" class="fb hl">A<br>B</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s hl">X<br>Z</span></div>
+<div class="grid c vl"><span style="padding-block-start:15px;" class="fb hl pbs">A<br>B</span><span style="padding-block-start:12px;" class="fb hl">M<br>N</span><span style="padding-block-start:28px; padding-block-end:50px;" class="fb s hl">X<br>Z</span></div>
+<div class="grid c vr"><span style="padding-block-start:8px;" class="fb hl">A<br>B</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s hl">X<br>Z</span></div>
+<div class="grid c vr"><span style="padding-block-start:8px;" class="fb hl pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s hl">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-end:8px;" class="lb vl">A<br>B</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+<div class="grid c hl"><span style="padding-block-end:7px;" class="lb vl pbe">A<br>B</span><span style="padding-block-end:2px;" class="lb vl">M<br>N</span></div>
+<div class="grid c vl"><span style="padding-block-end:2px;" class="lb hl">A<br>B</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vl"><span style="padding-block-end:2px;" class="lb hl pbs">A<br>B</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span style="padding-block-end:2px;" class="lb hl">A<br>B</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span style="padding-block-end:7px;" class="lb hl pbe">A<br>B</span><span style="padding-block-end:8px;" class="lb hl">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-start:8px;" class="fb vr">A<br>B</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s vr">X<br>Z</span></div>
+<div class="grid c hl"><span style="padding-block-start:5px;" class="fb vr pbe">A<br>B</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s vr">X<br>Z</span></div>
+<div class="grid vl"><span style="padding-block-start:8px;" class="fb vr">A<br>B</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px;" class="fb s vr">X<br>Z</span></div>
+<div class="grid vl"><span style="padding-block-start:15px;" class="fb vr pbs">A<br>B</span><span style="padding-block-start:7px;" class="fb vr">M<br>N</span><span style="padding-block-start:23px; padding-block-end:55px;" class="fb s vr">X<br>Z</span></div>
+<div class="grid vr"><span style="padding-block-start:2px;" class="fb vl">A<br>B</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; padding-block-end:74px;" class="fb s vl">X<br>Z</span></div>
+<div class="grid vr"><span style="padding-block-start:0;" class="fb vl pbe">A<br>B</span><span style="padding-block-start:1px;" class="fb vl">M<br>N</span><span style="padding-block-start:5px; padding-block-end:73px;" class="fb s vl">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-end:2px;" class="lb vr">A<br>B</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div>
+<div class="grid c hl"><span style="padding-block-end:7px;" class="lb vr pbe">A<br>B</span><span style="padding-block-end:5px;" class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:2px;" class="lb vr">A<br>B</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:0px;" class="lb vr pbs">A<br>B</span><span style="padding-block-end:3px;" class="lb vr">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:8px;" class="lb vl">A<br>B</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:8px;" class="lb vl pbe">A<br>B</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-002.html
new file mode 100644
index 0000000000..3d12f68cb0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-002.html
@@ -0,0 +1,112 @@
+<!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: align-content:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content">
+  <link rel="match" href="grid-item-content-baseline-002-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: 100px / repeat(4, auto);
+  border: 2px solid;
+  padding: 1px;
+  margin: 1px;
+}
+.c {
+  grid: repeat(4, auto) / 100px;
+}
+.e { align-content:end; }
+.c.e { justify-content:end; }
+
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:20px; }
+span:nth-child(2) { font-size:30px; }
+span:nth-child(3) { font-size:10px; }
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; align-self:self-start; justify-self:self-start; }
+.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; }
+.s  { align-self:stretch; justify-self:stretch; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="fb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid e hl"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid e hl"><span class="lb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid e vl"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid e vl"><span class="lb pbs">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid e vr"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid e vr"><span class="lb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="fb vl">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div>
+<div class="grid c hl"><span class="fb vl pbe">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div>
+<div class="grid c vl"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div>
+<div class="grid c vl"><span class="fb hl pbs">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div>
+<div class="grid c vr"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div>
+<div class="grid c vr"><span class="fb hl pbe">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb s hl">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid e c hl"><span class="lb vl">A<br>B</span><span class="lb vl">M<br>N</span></div>
+<div class="grid e c hl"><span class="lb vl pbe">A<br>B</span><span class="lb vl">M<br>N</span></div>
+<div class="grid e c vl"><span class="lb hl">A<br>B</span><span class="lb hl">M<br>N</span></div>
+<div class="grid e c vl"><span class="lb hl pbs">A<br>B</span><span class="lb hl">M<br>N</span></div>
+<div class="grid e c vr"><span class="lb hl">A<br>B</span><span class="lb hl">M<br>N</span></div>
+<div class="grid e c vr"><span class="lb hl pbe">A<br>B</span><span class="lb hl">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="fb vr">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div>
+<div class="grid c hl"><span class="fb vr pbe">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div>
+<div class="grid vl"><span class="fb vr">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div>
+<div class="grid vl"><span class="fb vr pbs">A<br>B</span><span class="fb vr">M<br>N</span><span class="fb s vr">X<br>Z</span></div>
+<div class="grid vr"><span class="fb vl">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div>
+<div class="grid vr"><span class="fb vl pbe">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb s vl">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid e c hl"><span class="lb vr">A<br>B</span><span class="lb vr">M<br>N</span></div>
+<div class="grid e c hl"><span class="lb vr pbe">A<br>B</span><span class="lb vr">M<br>N</span></div>
+<div class="grid e vl"><span class="lb vr">A<br>B</span><span class="lb vr">M<br>N</span></div>
+<div class="grid e vl"><span class="lb vr pbs">A<br>B</span><span class="lb vr">M<br>N</span></div>
+<div class="grid e vr"><span class="lb vl">A<br>B</span><span class="lb vl">M<br>N</span></div>
+<div class="grid e vr"><span class="lb vl pbe">A<br>B</span><span class="lb vl">M<br>N</span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-003-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-003-ref.html
new file mode 100644
index 0000000000..5efb78b00f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-003-ref.html
@@ -0,0 +1,110 @@
+<!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: align-content/justify-content:baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1611724">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: auto / repeat(4, auto);
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+div {
+  float: left;
+  border:2px solid;
+  padding:1px;
+  margin:1px;
+}
+span {
+  background: content-box silver;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:20px; }
+span:nth-child(2) { font-size:30px; }
+span:nth-child(3) { font-size:10px; }
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-self:baseline; justify-self:baseline; }
+.lb { align-self:last baseline; justify-self:last baseline; }
+.s  { align-self:self-stretch; justify-self:self-stretch; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span style="padding-block-start:8px;" class="fb">A</span><span class="fb">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s">X</span></div>
+<div class="grid hl"><span style="padding-block-start:8px;" class="fb pbe">A</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s">X</span></div>
+<div class="grid vl"><span style="padding-block-start:2px;" class="fb">A</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:4px; width:56px;" class="fb s">X</span></div>
+<div class="grid vl"><span style="padding-block-start:15px;" class="fb">A</span><span style="padding-block-start:18px;" class="fb">M<br>N</span><span style="padding-block-start:22px; width:56px;" class="fb s">X</span></div>
+<div class="grid vr"><span style="padding-block-start:8px;" class="fb">A</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s">X</span></div>
+<div class="grid vr"><span style="padding-block-start:8px;" class="fb pbe">A</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s">X</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span style="padding-block-end:2px;" class="lb">A</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid hl"><span style="padding-block-end:7px;" class="lb pbe">A</span><span style="padding-block-end:8px;" class="lb">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:8px;" class="lb">A</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:8px;" class="lb pbs">A</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:2px;" class="lb">A</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:7px;" class="lb pbe">A</span><span style="padding-block-end:8px;" class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-start:2px;" class="fb vl">A</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; width:56px;" class="fb s vl">X</span></div>
+<div class="grid c hl"><span style="padding-block-start:2px;" class="fb vl pbe">A</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; width:56px;" class="fb s vl">X</span></div>
+<div class="grid c vl"><span style="padding-block-start:8px;" class="fb hl">A</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s hl">X</span></div>
+<div class="grid c vl"><span style="padding-block-start:15px;" class="fb hl pbs">A</span><span style="padding-block-start:12px;" class="fb hl">M<br>N</span><span style="padding-block-start:28px; height:44px;" class="fb s hl">X</span></div>
+<div class="grid c vr"><span style="padding-block-start:8px;" class="fb hl">A</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s hl">X</span></div>
+<div class="grid c vr"><span style="padding-block-start:8px;" class="fb hl pbe">A</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s hl">X</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-end:8px;" class="lb vl">A</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+<div class="grid c hl"><span style="padding-block-end:7px;" class="lb vl pbe">A</span><span style="padding-block-end:2px;" class="lb vl">M<br>N</span></div>
+<div class="grid c vl"><span style="padding-block-end:2px;" class="lb hl">A</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vl"><span style="padding-block-end:2px;" class="lb hl pbs">A</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span style="padding-block-end:2px;" class="lb hl">A</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span style="padding-block-end:7px;" class="lb hl pbe">A</span><span style="padding-block-end:8px;" class="lb hl">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-start:8px;" class="fb vr">A</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s vr">X</span></div>
+<div class="grid c hl"><span style="padding-block-start:5px;" class="fb vr pbe">A</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s vr">X</span></div>
+<div class="grid vl"><span style="padding-block-start:8px;" class="fb vr">A</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s vr">X</span></div>
+<div class="grid vl"><span style="" class="fb vr pbs">A</span><span style="padding-block-start:7px;" class="fb vr">M<br>N</span><span style="padding-block-start:23px; width:44px;" class="fb s vr">X</span></div>
+<div class="grid vr"><span style="padding-block-start:2px;" class="fb vl">A</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; width:56px;" class="fb s vl">X</span></div>
+<div class="grid vr"><span style="padding-block-start:0;" class="fb vl pbe">A</span><span style="padding-block-start:1px;" class="fb vl">M<br>N</span><span style="padding-block-start:5px; width:56px;" class="fb s vl">X</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-end:2px;" class="lb vr">A</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div>
+<div class="grid c hl"><span style="padding-block-end:7px;" class="lb vr pbe">A</span><span style="padding-block-end:5px;" class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:2px;" class="lb vr">A</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:0px;" class="lb vr pbs">A</span><span style="padding-block-end:3px;" class="lb vr">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:8px;" class="lb vl">A</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:8px;" class="lb vl pbe">A</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-003.html
new file mode 100644
index 0000000000..8845afe864
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-003.html
@@ -0,0 +1,110 @@
+<!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: align-content:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1611724">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content">
+  <link rel="match" href="grid-item-content-baseline-003-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: auto / repeat(4, auto);
+  border: 2px solid;
+  padding: 1px;
+  margin: 1px;
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+
+span {
+  background: content-box silver;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:20px; }
+span:nth-child(2) { font-size:30px; }
+span:nth-child(3) { font-size:10px; }
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; align-self:self-start; justify-self:self-start; }
+.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; }
+.s  { align-self:stretch; justify-self:stretch; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="fb">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+<div class="grid hl"><span class="fb pbe">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+<div class="grid vl"><span class="fb">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+<div class="grid vl"><span class="fb pbs">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+<div class="grid vr"><span class="fb">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+<div class="grid vr"><span class="fb pbe">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="lb">A</span><span class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="lb pbe">A</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="lb">A</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="lb pbs">A</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="lb">A</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="lb pbe">A</span><span class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="fb vl">A</span><span class="fb vl">M<br>N</span><span class="fb s vl">X</span></div>
+<div class="grid c hl"><span class="fb vl pbe">A</span><span class="fb vl">M<br>N</span><span class="fb s vl">X</span></div>
+<div class="grid c vl"><span class="fb hl">A</span><span class="fb hl">M<br>N</span><span class="fb s hl">X</span></div>
+<div class="grid c vl"><span class="fb hl pbs">A</span><span class="fb hl">M<br>N</span><span class="fb s hl">X</span></div>
+<div class="grid c vr"><span class="fb hl">A</span><span class="fb hl">M<br>N</span><span class="fb s hl">X</span></div>
+<div class="grid c vr"><span class="fb hl pbe">A</span><span class="fb hl">M<br>N</span><span class="fb s hl">X</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="lb vl">A</span><span class="lb vl">M<br>N</span></div>
+<div class="grid c hl"><span class="lb vl pbe">A</span><span class="lb vl">M<br>N</span></div>
+<div class="grid c vl"><span class="lb hl">A</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vl"><span class="lb hl pbs">A</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span class="lb hl">A</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span class="lb hl pbe">A</span><span class="lb hl">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="fb vr">A</span><span class="fb vr">M<br>N</span><span class="fb s vr">X</span></div>
+<div class="grid c hl"><span class="fb vr pbe">A</span><span class="fb vr">M<br>N</span><span class="fb s vr">X</span></div>
+<div class="grid vl"><span class="fb vr">A</span><span class="fb vr">M<br>N</span><span class="fb s vr">X</span></div>
+<div class="grid vl"><span class="fb vr pbs">A</span><span class="fb vr">M<br>N</span><span class="fb s vr">X</span></div>
+<div class="grid vr"><span class="fb vl">A</span><span class="fb vl">M<br>N</span><span class="fb s vl">X</span></div>
+<div class="grid vr"><span class="fb vl pbe">A</span><span class="fb vl">M<br>N</span><span class="fb s vl">X</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="lb vr">A</span><span class="lb vr">M<br>N</span></div>
+<div class="grid c hl"><span class="lb vr pbe">A</span><span class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span class="lb vr">A</span><span class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span class="lb vr pbs">A</span><span class="lb vr">M<br>N</span></div>
+<div class="grid vr"><span class="lb vl">A</span><span class="lb vl">M<br>N</span></div>
+<div class="grid vr"><span class="lb vl pbe">A</span><span class="lb vl">M<br>N</span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-004-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-004-ref.html
new file mode 100644
index 0000000000..2394818c7d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-004-ref.html
@@ -0,0 +1,110 @@
+<!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: align-content/justify-content:baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1611724">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: auto / repeat(4, auto);
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+div {
+  float: left;
+  border:2px solid;
+  padding:1px;
+  margin:1px;
+}
+span {
+  background: silver;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:20px; }
+span:nth-child(2) { font-size:30px; }
+span:nth-child(3) { font-size:10px; }
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-self:baseline; justify-self:baseline; }
+.lb { align-self:last baseline; justify-self:last baseline; }
+.s  { align-self:self-stretch; justify-self:self-stretch; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span style="padding-block-start:8px;" class="fb">A</span><span class="fb">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s">X</span></div>
+<div class="grid hl"><span style="padding-block-start:8px;" class="fb pbe">A</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s">X</span></div>
+<div class="grid vl"><span style="padding-block-start:2px;" class="fb">A</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:4px; width:56px;" class="fb s">X</span></div>
+<div class="grid vl"><span style="padding-block-start:15px;" class="fb">A</span><span style="padding-block-start:18px;" class="fb">M<br>N</span><span style="padding-block-start:22px; width:56px;" class="fb s">X</span></div>
+<div class="grid vr"><span style="padding-block-start:8px;" class="fb">A</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s">X</span></div>
+<div class="grid vr"><span style="padding-block-start:8px;" class="fb pbe">A</span><span style="padding-block-start:0px;" class="fb">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s">X</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span style="padding-block-end:2px;" class="lb">A</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid hl"><span style="padding-block-end:7px;" class="lb pbe">A</span><span style="padding-block-end:8px;" class="lb">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:8px;" class="lb">A</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:8px;" class="lb pbs">A</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:2px;" class="lb">A</span><span style="padding-block-end:0px;" class="lb">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:7px;" class="lb pbe">A</span><span style="padding-block-end:8px;" class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-start:2px;" class="fb vl">A</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; width:56px;" class="fb s vl">X</span></div>
+<div class="grid c hl"><span style="padding-block-start:2px;" class="fb vl pbe">A</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; width:56px;" class="fb s vl">X</span></div>
+<div class="grid c vl"><span style="padding-block-start:8px;" class="fb hl">A</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s hl">X</span></div>
+<div class="grid c vl"><span style="padding-block-start:15px;" class="fb hl pbs">A</span><span style="padding-block-start:12px;" class="fb hl">M<br>N</span><span style="padding-block-start:28px; height:44px;" class="fb s hl">X</span></div>
+<div class="grid c vr"><span style="padding-block-start:8px;" class="fb hl">A</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s hl">X</span></div>
+<div class="grid c vr"><span style="padding-block-start:8px;" class="fb hl pbe">A</span><span style="padding-block-start:0px;" class="fb hl">M<br>N</span><span style="padding-block-start:16px; height:44px;" class="fb s hl">X</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-end:8px;" class="lb vl">A</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+<div class="grid c hl"><span style="padding-block-end:7px;" class="lb vl pbe">A</span><span style="padding-block-end:2px;" class="lb vl">M<br>N</span></div>
+<div class="grid c vl"><span style="padding-block-end:2px;" class="lb hl">A</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vl"><span style="padding-block-end:2px;" class="lb hl pbs">A</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span style="padding-block-end:2px;" class="lb hl">A</span><span style="padding-block-end:0px;" class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span style="padding-block-end:7px;" class="lb hl pbe">A</span><span style="padding-block-end:8px;" class="lb hl">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-start:8px;" class="fb vr">A</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s vr">X</span></div>
+<div class="grid c hl"><span style="padding-block-start:5px;" class="fb vr pbe">A</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s vr">X</span></div>
+<div class="grid vl"><span style="padding-block-start:8px;" class="fb vr">A</span><span style="padding-block-start:0px;" class="fb vr">M<br>N</span><span style="padding-block-start:16px; width:44px;" class="fb s vr">X</span></div>
+<div class="grid vl"><span style="" class="fb vr pbs">A</span><span style="padding-block-start:7px;" class="fb vr">M<br>N</span><span style="padding-block-start:23px; width:44px;" class="fb s vr">X</span></div>
+<div class="grid vr"><span style="padding-block-start:2px;" class="fb vl">A</span><span style="padding-block-start:0px;" class="fb vl">M<br>N</span><span style="padding-block-start:4px; width:56px;" class="fb s vl">X</span></div>
+<div class="grid vr"><span style="padding-block-start:0;" class="fb vl pbe">A</span><span style="padding-block-start:1px;" class="fb vl">M<br>N</span><span style="padding-block-start:5px; width:56px;" class="fb s vl">X</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span style="padding-block-end:2px;" class="lb vr">A</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div>
+<div class="grid c hl"><span style="padding-block-end:7px;" class="lb vr pbe">A</span><span style="padding-block-end:5px;" class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:2px;" class="lb vr">A</span><span style="padding-block-end:0px;" class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span style="padding-block-end:0px;" class="lb vr pbs">A</span><span style="padding-block-end:3px;" class="lb vr">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:8px;" class="lb vl">A</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+<div class="grid vr"><span style="padding-block-end:8px;" class="lb vl pbe">A</span><span style="padding-block-end:0px;" class="lb vl">M<br>N</span></div>
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-004.html
new file mode 100644
index 0000000000..81a046be91
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-content-baseline-004.html
@@ -0,0 +1,110 @@
+<!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: align-content:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1611724">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content">
+  <link rel="match" href="grid-item-content-baseline-004-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: auto / repeat(4, auto);
+  border: 2px solid;
+  padding: 1px;
+  margin: 1px;
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+
+span {
+  background: silver;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:20px; }
+span:nth-child(2) { font-size:30px; }
+span:nth-child(3) { font-size:10px; }
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; align-self:self-start; justify-self:self-start; }
+.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; }
+.s  { align-self:stretch; justify-self:stretch; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="fb">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+<div class="grid hl"><span class="fb pbe">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+<div class="grid vl"><span class="fb">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+<div class="grid vl"><span class="fb pbs">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+<div class="grid vr"><span class="fb">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+<div class="grid vr"><span class="fb pbe">A</span><span class="fb">M<br>N</span><span class="fb s">X</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="lb">A</span><span class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="lb pbe">A</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="lb">A</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="lb pbs">A</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="lb">A</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="lb pbe">A</span><span class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="fb vl">A</span><span class="fb vl">M<br>N</span><span class="fb s vl">X</span></div>
+<div class="grid c hl"><span class="fb vl pbe">A</span><span class="fb vl">M<br>N</span><span class="fb s vl">X</span></div>
+<div class="grid c vl"><span class="fb hl">A</span><span class="fb hl">M<br>N</span><span class="fb s hl">X</span></div>
+<div class="grid c vl"><span class="fb hl pbs">A</span><span class="fb hl">M<br>N</span><span class="fb s hl">X</span></div>
+<div class="grid c vr"><span class="fb hl">A</span><span class="fb hl">M<br>N</span><span class="fb s hl">X</span></div>
+<div class="grid c vr"><span class="fb hl pbe">A</span><span class="fb hl">M<br>N</span><span class="fb s hl">X</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="lb vl">A</span><span class="lb vl">M<br>N</span></div>
+<div class="grid c hl"><span class="lb vl pbe">A</span><span class="lb vl">M<br>N</span></div>
+<div class="grid c vl"><span class="lb hl">A</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vl"><span class="lb hl pbs">A</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span class="lb hl">A</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span class="lb hl pbe">A</span><span class="lb hl">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="fb vr">A</span><span class="fb vr">M<br>N</span><span class="fb s vr">X</span></div>
+<div class="grid c hl"><span class="fb vr pbe">A</span><span class="fb vr">M<br>N</span><span class="fb s vr">X</span></div>
+<div class="grid vl"><span class="fb vr">A</span><span class="fb vr">M<br>N</span><span class="fb s vr">X</span></div>
+<div class="grid vl"><span class="fb vr pbs">A</span><span class="fb vr">M<br>N</span><span class="fb s vr">X</span></div>
+<div class="grid vr"><span class="fb vl">A</span><span class="fb vl">M<br>N</span><span class="fb s vl">X</span></div>
+<div class="grid vr"><span class="fb vl pbe">A</span><span class="fb vl">M<br>N</span><span class="fb s vl">X</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="lb vr">A</span><span class="lb vr">M<br>N</span></div>
+<div class="grid c hl"><span class="lb vr pbe">A</span><span class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span class="lb vr">A</span><span class="lb vr">M<br>N</span></div>
+<div class="grid vl"><span class="lb vr pbs">A</span><span class="lb vr">M<br>N</span></div>
+<div class="grid vr"><span class="lb vl">A</span><span class="lb vl">M<br>N</span></div>
+<div class="grid vr"><span class="lb vl pbe">A</span><span class="lb vl">M<br>N</span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-001-ref.html
new file mode 100644
index 0000000000..6b89ef49d0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-001-ref.html
@@ -0,0 +1,110 @@
+<!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: mixed align-content/self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: auto / repeat(10, auto);
+  border: 2px solid;
+  margin: 1px;
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+.t2 { grid: auto / repeat(3, auto);}
+
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:30px; }
+span:nth-child(2) { font-size:15px; }
+span:nth-child(3) { font-size:10px; }
+span:nth-child(4) { font-size:20px; }
+
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-self:baseline; justify-self:self-start; }
+.lb { align-self:last baseline; justify-self:self-end; }
+.s  { justify-self:stretch; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last baseline; align-content:self-end;}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px" class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:34px" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span style="padding-block-start:3px" class="fb">M<br>N</span><span style="padding-block-start:4px; padding-block-end:36px" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span style="padding-block-start:23px" class="fb">M<br>N</span><span style="padding-block-start:24px; padding-block-end:36px" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:24px" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:34px" class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span style="padding-block-start:3px" class="fb">M<br>N</span><span style="padding-block-end:8px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span style="padding-block-start:23px" class="fb">M<br>N</span><span style="padding-block-end:8px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span style="padding-block-end:12px" class="lb">R<br>S</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span style="padding-block-end:8px" class="lb">R<br>S</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+
+<div class="grid t2 hl"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span style="align-self:stretch" class="vr fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span style="align-self:stretch" class="vl fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 vl"><span class="slb">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="hr sfb">R<br>S</span><span class="hl fb">U<br>V</span><span style="align-self:stretch" class="hr fb s">X<br>Z</span><span class="hr sfb">K<br>L</span></div>
+<br clear="all">
+<div class="grid t2 vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="hr lb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span style="align-self:stretch" class="hl fb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+
+<br clear="all">
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-001.html
new file mode 100644
index 0000000000..f724b3b6c4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-001.html
@@ -0,0 +1,112 @@
+<!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: mixed align-content/self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content">
+  <link rel="match" href="grid-item-mixed-baseline-001-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: auto / repeat(10, auto);
+  border: 2px solid;
+  margin: 1px;
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+.t2 { grid: auto / repeat(3, auto);}
+
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:30px; }
+span:nth-child(2) { font-size:15px; }
+span:nth-child(3) { font-size:10px; }
+span:nth-child(4) { font-size:20px; }
+
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; align-self:self-start; justify-self:self-start; }
+.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; }
+.s  { align-self:stretch; justify-self:stretch; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last baseline; align-content:self-end;}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="lb">R<br>S</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="lb">R<br>S</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+
+<div class="grid t2 hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span class="vr fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span class="vl fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="hr sfb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hr fb s">X<br>Z</span><span class="hr sfb">K<br>L</span></div>
+<br clear="all">
+<div class="grid t2 vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span><span class="hr lb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl fb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+
+<br clear="all">
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-002-ref.html
new file mode 100644
index 0000000000..fae8d2e9b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-002-ref.html
@@ -0,0 +1,114 @@
+<!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: mixed align-content/self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: 100px / repeat(10, auto);
+  border: 2px solid;
+  margin: 1px;
+  align-content: start;
+  justify-content: end;
+}
+.c {
+  grid: repeat(4, auto) / 100px;
+  align-content: end;
+  justify-content: start;
+}
+.t2 { grid: 100px / repeat(3, auto);}
+
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:30px; }
+span:nth-child(2) { font-size:15px; }
+span:nth-child(3) { font-size:10px; }
+span:nth-child(4) { font-size:20px; }
+
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { place-self:first baseline self-start; }
+.lb { place-self:last baseline self-end; }
+.s  { justify-self:stretch; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last baseline; align-content:self-end;}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px" class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span style="padding-block-start:3px" class="fb">M<br>N</span><span style="padding-block-start:4px; padding-block-end:74px" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span style="padding-block-start:23px" class="fb">M<br>N</span><span style="padding-block-start:24px; padding-block-end:54px" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px" class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span style="padding-block-start:3px" class="fb">M<br>N</span><span style="padding-block-end:8px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span style="padding-block-start:23px" class="fb">M<br>N</span><span style="padding-block-end:8px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span style="padding-block-end:12px" class="lb">R<br>S</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span style="padding-block-end:8px" class="lb">R<br>S</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+
+<div class="grid t2 hl"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span style="align-self:stretch" class="vr fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span style="align-self:stretch" class="vl fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 vl"><span class="slb">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="hr sfb">R<br>S</span><span class="hl fb">U<br>V</span><span style="align-self:stretch" class="hr fb s">X<br>Z</span><span class="hr sfb">K<br>L</span></div>
+<br clear="all">
+<div class="grid t2 vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span style="padding-block-end:0px" class="hr lb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span style="align-self:stretch" class="hl fb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+
+<br clear="all">
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-002.html
new file mode 100644
index 0000000000..d14a8cae7a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-002.html
@@ -0,0 +1,114 @@
+<!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: mixed align-content/self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content">
+  <link rel="match" href="grid-item-mixed-baseline-002-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: 100px / repeat(10, auto);
+  border: 2px solid;
+  margin: 1px;
+  place-content: start end;
+}
+.c {
+  grid: repeat(4, auto) / 100px;
+  place-content: end start;
+}
+.t2 { grid: 100px / repeat(3, auto);}
+
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:30px; }
+span:nth-child(2) { font-size:15px; }
+span:nth-child(3) { font-size:10px; }
+span:nth-child(4) { font-size:20px; }
+
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; place-self:self-start; }
+.lb { align-content:last baseline; place-self:self-end; }
+.s  { place-self:stretch; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last baseline; align-content:self-end;}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="lb">R<br>S</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="lb">R<br>S</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+
+<div class="grid t2 hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span class="vr fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span class="vl fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="hr sfb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hr fb s">X<br>Z</span><span class="hr sfb">K<br>L</span></div>
+<br clear="all">
+<div class="grid t2 vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span><span class="hr lb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl fb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+
+<br clear="all">
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-003-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-003-ref.html
new file mode 100644
index 0000000000..1810414816
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-003-ref.html
@@ -0,0 +1,114 @@
+<!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: mixed align-content/self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: 100px / repeat(10, auto);
+  border: 2px solid;
+  margin: 1px;
+  align-content: end;
+  justify-content: start;
+}
+.c {
+  grid: repeat(4, auto) / 100px;
+  align-content: start;
+  justify-content: end;
+}
+.t2 { grid: 100px / repeat(3, auto);}
+
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:30px; }
+span:nth-child(2) { font-size:15px; }
+span:nth-child(3) { font-size:10px; }
+span:nth-child(4) { font-size:20px; }
+
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-self:baseline; justify-self:self-start; }
+.lb { align-self:last baseline; justify-self:self-end; }
+.s  { justify-self:stretch; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last baseline; align-content:self-end;}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px" class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span style="padding-block-start:3px" class="fb">M<br>N</span><span style="padding-block-start:4px; padding-block-end:74px" class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span style="padding-block-start:23px" class="fb">M<br>N</span><span style="padding-block-start:24px; padding-block-end:54px" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px" class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-start:16px; padding-block-end:62px" class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span  style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span style="padding-block-start:3px" class="fb">M<br>N</span><span style="padding-block-end:8px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span style="padding-block-start:23px" class="fb">M<br>N</span><span style="padding-block-end:8px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span style="padding-block-start:12px" class="fb">M<br>N</span><span style="padding-block-end:2px" class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span style="padding-block-end:12px" class="lb">R<br>S</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span style="padding-block-end:8px" class="lb">R<br>S</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+
+<div class="grid t2 hl"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span style="align-self:stretch" class="vr fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 hl"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span style="align-self:stretch" class="vl fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 vl"><span class="slb">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="hr sfb">R<br>S</span><span class="hl fb">U<br>V</span><span style="align-self:stretch" class="hr fb s">X<br>Z</span><span class="hr sfb">K<br>L</span></div>
+<br clear="all">
+<div class="grid t2 vl"><span class="slb pbs">A<br>B</span><span style="padding-block-end:12px" class="lb">M<br>N</span><span class="hr lb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb">A<br>B</span><span style="padding-block-end:3px" class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb pbe">A<br>B</span><span style="padding-block-end:13px" class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span style="align-self:stretch" class="hl fb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+
+<br clear="all">
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-003.html
new file mode 100644
index 0000000000..0a78d59e98
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-003.html
@@ -0,0 +1,116 @@
+<!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: mixed align-content/self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content">
+  <link rel="match" href="grid-item-mixed-baseline-003-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: 100px / repeat(10, auto);
+  border: 2px solid;
+  margin: 1px;
+  align-content: end;
+  justify-content: start;
+}
+.c {
+  grid: repeat(4, auto) / 100px;
+  align-content: start;
+  justify-content: end;
+}
+.t2 { grid: 100px / repeat(3, auto);}
+
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:30px; }
+span:nth-child(2) { font-size:15px; }
+span:nth-child(3) { font-size:10px; }
+span:nth-child(4) { font-size:20px; }
+
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; align-self:self-start; justify-self:self-start; }
+.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; }
+.s  { align-self:stretch; justify-self:stretch; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last baseline; align-content:self-end;}
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="sfb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="sfb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="lb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="lb">R<br>S</span></div>
+<div class="grid vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="lb">R<br>S</span></div>
+<div class="grid vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+<div class="grid vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="fb">X<br>Z</span><span class="slb">R<br>S</span></div>
+
+<br clear="all">
+
+
+<div class="grid t2 hl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span class="vr fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 hl"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="vl sfb">R<br>S</span><span class="vl fb">U<br>V</span><span class="vl fb s">X<br>Z</span><span class="vr sfb">K<br>L</span></div>
+<div class="grid t2 vl"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="hr sfb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hr fb s">X<br>Z</span><span class="hr sfb">K<br>L</span></div>
+<br clear="all">
+<div class="grid t2 vl"><span class="slb pbs">A<br>B</span><span class="lb">M<br>N</span><span class="hr lb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb">A<br>B</span><span class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl sfb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+<div class="grid t2 vr"><span class="slb pbe">A<br>B</span><span class="lb">M<br>N</span><span class="hl fb">R<br>S</span><span class="hl fb">U<br>V</span><span class="hl fb s">X<br>Z</span><span class="hl sfb s">X<br>Z</span><span class="hl slb">K<br>L</span></div>
+
+<br clear="all">
+
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-004-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-004-ref.html
new file mode 100644
index 0000000000..d167a5f154
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-004-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: mixed align-content/self:baseline/last baseline in fragmentated grid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.columns {
+  position:relative;
+     columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+  height: 120px;
+}
+
+.grid {
+  display: grid;
+  grid: 100px / repeat(3, auto);
+  grid-auto-rows: 100px;
+  border: 2px solid;
+  margin: 1px;
+}
+.g1 {
+  border-bottom-width: 0;
+  grid-template-rows: 100px 0 0;
+}
+.g2 {
+  border-top-width: 0;
+  grid-template-rows: 0 100px 100px;
+}
+
+.h {
+  visibility: hidden;
+  height: 0;
+}
+
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:30px; }
+span:nth-child(2) { font-size:15px; }
+span:nth-child(3) { font-size:10px; }
+span:nth-child(4) { font-size:20px; }
+
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; align-self:self-start; justify-self:self-start; }
+.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; }
+.s  { align-self:stretch; justify-self:stretch; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last baseline; align-content:self-end; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="columns">
+<div class="grid hl g1">
+<span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span>
+<span class="sfb h">A<br>B</span><span class="fb h">M<br>N</span><span class="fb h">X<br>Z</span>
+<span class="sfb h">A<br>B</span><span class="fb h">M<br>N</span><span class="fb s h">X<br>Z</span>
+</div>
+<div class="grid hl g2">
+<span class="sfb h ">A<br>B</span><span class="fb h">M<br>N</span><span class="fb s h">X<br>Z</span>
+<span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span>
+<span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-004.html
new file mode 100644
index 0000000000..6202845f6f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-mixed-baseline-004.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>CSS Grid Test: mixed align-content/self:baseline/last baseline in fragmentated grid</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1256429">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content">
+  <link rel="match" href="grid-item-mixed-baseline-004-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0;
+}
+
+.columns {
+  position:relative;
+     columns: 5;
+      -ms-columns: 5;
+  -webkit-columns: 5;
+          columns: 5;
+     column-fill: auto;
+      -ms-column-fill: auto;
+  -webkit-column-fill: auto;
+          column-fill: auto;
+  border: 2px dashed;
+  margin-bottom: 5px;
+  height: 120px;
+}
+
+.grid {
+  display: grid;
+  grid: 100px / repeat(3, auto);
+  grid-auto-rows: 100px;
+  border: 2px solid;
+  margin: 1px;
+}
+
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:30px; }
+span:nth-child(2) { font-size:15px; }
+span:nth-child(3) { font-size:10px; }
+span:nth-child(4) { font-size:20px; }
+
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; align-self:self-start; justify-self:self-start; }
+.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; }
+.s  { align-self:stretch; justify-self:stretch; }
+
+.sfb { align-self:baseline; }
+.slb { align-self:last baseline; align-content:self-end; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="columns">
+<div class="grid hl">
+<span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span>
+<span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span>
+<span class="sfb">A<br>B</span><span class="fb">M<br>N</span><span class="fb s">X<br>Z</span>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-1-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-1-ref.html
new file mode 100644
index 0000000000..6a7862c9ac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-1-ref.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-block;
+    height: 250px;
+    width: 350px;
+    background: purple;
+    margin: 10px;
+  }
+
+  svg {
+    display: block;
+    background: green;
+  }
+  .justify {
+    width: 350px;
+  }
+  .align {
+    height: 250px;
+  }
+</style>
+<div>
+  <svg class="align justify"></svg>
+</div>
+<div>
+  <svg class="align"></svg>
+</div>
+<div>
+  <svg class="justify"></svg>
+</div>
+<div>
+  <svg></svg>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-1.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-1.html
new file mode 100644
index 0000000000..1b5ae0a6ad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-1.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>stretching works for replaced items with no aspect ratio</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
+<link rel="match" href="grid-item-no-aspect-ratio-stretch-1-ref.html">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-grid;
+    height: 250px;
+    width: 350px;
+    background: purple;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  svg {
+    background: green;
+  }
+
+  .justify {
+    justify-self: stretch;
+  }
+  .align {
+    align-self: stretch;
+  }
+</style>
+<div>
+  <svg class="align justify"></svg>
+</div>
+<div>
+  <svg class="align"></svg>
+</div>
+<div>
+  <svg class="justify"></svg>
+</div>
+<div>
+  <svg></svg>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-2-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-2-ref.html
new file mode 100644
index 0000000000..69d59e85a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-2-ref.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: stretching works for replaced items with no aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-block;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  img {
+    display: block;
+    width: 300px;
+    height: 150px;
+  }
+
+  .justify {
+    width: 350px;
+  }
+  .align {
+    height: 250px;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align" style="width:20px">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img style="width:20px">
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-2.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-2.html
new file mode 100644
index 0000000000..5371e560a5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-2.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>stretching works for replaced items with no aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
+<link rel="match" href="grid-item-no-aspect-ratio-stretch-2-ref.html">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-grid;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  .justify {
+    justify-self: stretch;
+  }
+  .align {
+    align-self: stretch;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img>
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-3-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-3-ref.html
new file mode 100644
index 0000000000..7ee8a2d6bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-3-ref.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: stretching works for replaced items with no aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-block;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  img {
+    display: block;
+    width: 300px;
+    height: 150px;
+  }
+
+  .justify {
+    width: 350px;
+  }
+  .align {
+    height: 250px;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify" style="height:20px">
+</div>
+<div>
+  <img style="height:20px">
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-3.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-3.html
new file mode 100644
index 0000000000..e2b05bd216
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-3.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>stretching works for replaced items with no aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
+<link rel="match" href="grid-item-no-aspect-ratio-stretch-3-ref.html">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-grid;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  .justify {
+    justify-self: stretch;
+  }
+  .align {
+    align-self: stretch;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img>
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4-ref.html
new file mode 100644
index 0000000000..4a543b4a34
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4-ref.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: stretching works for replaced items with no aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-block;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  img {
+    display: block;
+    width: 0px;
+    height: 20px;
+  }
+
+  .justify {
+    width: 350px;
+  }
+  .align {
+    height: 250px;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img>
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4.html
new file mode 100644
index 0000000000..a53c0fd87c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-4.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>stretching works for replaced items with no aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
+<link rel="match" href="grid-item-no-aspect-ratio-stretch-4-ref.html">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-grid;
+    grid-template: 100% / 100%;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  .justify {
+    justify-self: stretch;
+  }
+  .align {
+    align-self: stretch;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img>
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="20px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5-ref.html
new file mode 100644
index 0000000000..98f88fed7b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5-ref.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: stretching works for replaced items with no aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-block;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  img {
+    display: block;
+    width: 20px;
+    height: 0px;
+  }
+
+  .justify {
+    width: 350px;
+  }
+  .align {
+    height: 250px;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img>
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5.html
new file mode 100644
index 0000000000..c28022c6e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-5.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>stretching works for replaced items with no aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
+<link rel="match" href="grid-item-no-aspect-ratio-stretch-5-ref.html">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-grid;
+    grid-template: 100% / 100%;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  .justify {
+    justify-self: stretch;
+  }
+  .align {
+    align-self: stretch;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img>
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6-ref.html
new file mode 100644
index 0000000000..8e989d1045
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6-ref.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Reference: stretching works for replaced items with no aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-block;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  img {
+    display: block;
+    width: 0px;
+    height: 0px;
+  }
+
+  .justify {
+    width: 350px;
+  }
+  .align {
+    height: 250px;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img>
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6.html
new file mode 100644
index 0000000000..b4f172c10d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-no-aspect-ratio-stretch-6.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>stretching works for replaced items with no aspect ratio</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
+<link rel="match" href="grid-item-no-aspect-ratio-stretch-6-ref.html">
+<style>
+  body {
+    line-height: 0;
+  }
+
+  div {
+    display: inline-grid;
+    height: 250px;
+    width: 350px;
+    background: grey;
+    margin: 10px;
+    vertical-align: top;
+  }
+
+  .justify {
+    justify-self: stretch;
+  }
+  .align {
+    align-self: stretch;
+  }
+</style>
+<div>
+  <img class="align justify">
+</div>
+<div>
+  <img class="align">
+</div>
+<div>
+  <img class="justify">
+</div>
+<div>
+  <img>
+</div>
+
+<script>
+var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
+var imgs = document.querySelectorAll('img');
+for (var i = 0; i < imgs.length; ++i) {
+  var img = imgs[i];
+  img.src = url;
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-self-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-self-baseline-001-ref.html
new file mode 100644
index 0000000000..6eadf9a02a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-self-baseline-001-ref.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>Reference: align-self/justify-self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1221525">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  display: grid;
+  grid: auto / repeat(4, auto);
+  align-items: start;
+  justify-items: start;
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+div {
+  float: left;
+  border:2px solid;
+  padding:1px;
+  margin:1px;
+}
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+span:nth-child(1) { font-size:12px; }
+span:nth-child(2) { font-size:16px; }
+span:nth-child(3) { font-size:24px; }
+span:nth-child(4) { font-size:32px; }
+.pbe { padding-block-end:20px; }
+.pbs { padding-block-start:20px; }
+
+.fb { align-self:baseline; }
+.lb { align-self:last baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span></div>
+<div><span class="fb hl pbe">A</span><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span></div>
+<div class="vl"><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="vl"><span class="fb pbs">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="vr"><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="vr"><span class="fb pbe">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+
+<br clear="all">
+
+<div><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span></div>
+<div><span class="lb hl pbe">A</span><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span></div>
+<div class="vl"><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+<div class="vl"><span class="lb pbs">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+<div class="vr"><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+<div class="vr"><span class="lb pbe">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+
+<br clear="all">
+
+<div class="grid vl"><span class="fb vl">A</span><span class="fb vl">A</span><span class="fb vl">A</span><span class="fb vl">A</span></div>
+<div class="grid vl"><span class="fb vl pbe">A</span><span class="fb vl">A</span><span class="fb vl">A</span><span class="fb vl">A</span></div>
+<div class="grid"><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="grid"><span class="fb pbs">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="grid"><span class="fb" style="order:99">A</span><span class="fb" style="order:98">A</span><span class="fb" style="order:97">A</span><span class="fb" style="order:96">A</span></div>
+<div class="grid"><span class="fb pbe" style="order:99;">A</span><span class="fb" style="order:98">A</span><span class="fb" style="order:97">A</span><span class="fb" style="order:96">A</span></div>
+
+<br clear="all">
+
+<div><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span></div>
+<div><span class="lb hl pbe">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span></div>
+<div class="vl"><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+<div class="vl"><span class="lb pbs">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+<div class="vr"><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+<div class="vr"><span class="lb pbe">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-item-self-baseline-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-item-self-baseline-001.html
new file mode 100644
index 0000000000..ccc50c7649
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-self-baseline-001.html
@@ -0,0 +1,95 @@
+<!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: align-self/justify-self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1221525">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+  <link rel="match" href="grid-item-self-baseline-001-ref.html">
+  <style type="text/css">
+html,body {
+    color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: auto / repeat(4, auto);
+  place-items: start;
+  border: 2px solid;
+  padding: 1px;
+  margin: 1px;
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+
+span {
+  background: lime;
+  display: inline-block;
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+span:nth-child(1) { font-size:12px; }
+span:nth-child(2) { font-size:16px; }
+span:nth-child(3) { font-size:24px; }
+span:nth-child(4) { font-size:32px; }
+.pbe { padding-block-end:20px; }
+.pbs { padding-block-start:20px; }
+
+.fb { align-self:baseline; }
+.lb { align-self:last baseline; }
+
+.jfb { justify-self:baseline; }
+.jlb { justify-self:last baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid"><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span></div>
+<div class="grid"><span class="fb hl pbe">A</span><span class="fb hl">A</span><span class="fb hl">A</span><span class="fb hl">A</span></div>
+<div class="grid vl"><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="grid vl"><span class="fb pbs">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="grid vr"><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+<div class="grid vr"><span class="fb pbe">A</span><span class="fb">A</span><span class="fb">A</span><span class="fb">A</span></div>
+
+<br clear="all">
+
+<div class="grid"><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span></div>
+<div class="grid"><span class="lb hl pbe">A</span><span class="lb hl">A</span><span class="lb hl">A</span><span class="lb hl">A</span></div>
+<div class="grid vl"><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+<div class="grid vl"><span class="lb pbs">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+<div class="grid vr"><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+<div class="grid vr"><span class="lb pbe">A</span><span class="lb">A</span><span class="lb">A</span><span class="lb">A</span></div>
+
+<br clear="all">
+
+<div class="grid c"><span class="jfb vl">A</span><span class="jfb vl">A</span><span class="jfb vl">A</span><span class="jfb vl">A</span></div>
+<div class="grid c"><span class="jfb vl pbe">A</span><span class="jfb vl">A</span><span class="jfb vl">A</span><span class="jfb vl">A</span></div>
+<div class="grid c vl"><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span></div>
+<div class="grid c vl"><span class="jfb hl pbs">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span></div>
+<div class="grid c vr"><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span></div>
+<div class="grid c vr"><span class="jfb hl pbe">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span><span class="jfb hl">A</span></div>
+
+<br clear="all">
+
+<div class="grid"><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span></div>
+<div class="grid"><span class="lb hl pbe">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span><span class="lb hl">A<br>A</span></div>
+<div class="grid vl"><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+<div class="grid vl"><span class="lb pbs">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+<div class="grid vr"><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+<div class="grid vr"><span class="lb pbe">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span><span class="lb">A<br>A</span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-001-ref.html
new file mode 100644
index 0000000000..17a59d6edc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-001-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<div style="display: grid; width: 100px; height: 100px; background: gray;">
+  <div style="writing-mode: vertical-rl; background: cyan; justify-self: end; direction: rtl;">one<br>two</div>
+  <div style="writing-mode: vertical-lr; font-size: 30px; background: lime; justify-self: start; direction: rtl;">one<br>two</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-001.html
new file mode 100644
index 0000000000..959767bd7c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-001.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-sharing-group">
+<link rel="match" href="grid-justify-baseline-001-ref.html">
+<div style="display: grid; width: 100px; height: 100px; direction: rtl; justify-items: baseline; background: gray;">
+  <div style="writing-mode: vertical-rl; background: cyan;">one<br>two</div>
+  <div style="writing-mode: vertical-lr; font-size: 30px; background: lime;">one<br>two</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-002.html
new file mode 100644
index 0000000000..27be724bf9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-002.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<style>
+#target {
+  display: grid;
+  justify-items: last baseline;
+  width: 200px;
+  border: solid 3px;
+  position: relative;
+}
+#target > :nth-child(1) {
+  background: lime;
+  margin-right: 20px;
+  padding-right: 20px;
+  font-size: 20px;
+  line-height: 20px;
+  justify-self: first baseline;
+  writing-mode: vertical-rl;
+}
+#target > :nth-child(2) {
+  background: hotpink;
+  font-size: 30px;
+  line-height: 30px;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(3) {
+  background: papayawhip;
+  font-size: 16px;
+  line-height: 16px;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(4) {
+  background: orange;
+  margin-left: 20px;
+  padding-left: 20px;
+  font-size: 20px;
+  line-height: 20px;
+  justify-self: first baseline;
+  writing-mode: vertical-lr;
+}
+#target > :nth-child(5) {
+  background: cyan;
+  font-size: 30px;
+  line-height: 30px;
+  writing-mode: vertical-rl;
+}
+#target > :nth-child(6) {
+  background: papayawhip;
+  font-size: 16px;
+  line-height: 16px;
+  writing-mode: vertical-rl;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('#target > div')">
+
+<div id="target">
+  <div data-offset-x="120">line1<br>line2</div>
+  <div data-offset-x="105">line1<br>line2</div>
+  <div data-offset-x="126">line1<br>line2</div>
+  <div data-offset-x="20">line1<br>line2</div>
+  <div data-offset-x="35">line1<br>line2</div>
+  <div data-offset-x="42">line1<br>line2</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-003.html
new file mode 100644
index 0000000000..623f849115
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-003.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<style>
+#target {
+  display: grid;
+  grid-template-columns: 120px;
+  justify-items: last baseline;
+  width: 200px;
+  border: solid 3px;
+  position: relative;
+  line-height: 0;
+  writing-mode: vertical-lr;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cornflowerblue 3px;
+  outline-offset: -3px;
+}
+#target > div {
+  flex: none;
+}
+#target > :nth-child(1) {
+  background: lime;
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  font-size: 20px;
+  writing-mode: horizontal-tb;
+}
+#target > :nth-child(2) {
+  background: hotpink;
+  font-size: 30px;
+  writing-mode: horizontal-tb;
+}
+#target > :nth-child(3) {
+  background: papayawhip;
+  font-size: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('#target > div')">
+
+<div id="target">
+  <div data-offset-y="40"><span></span><br><span></span></div>
+  <div data-offset-y="20"><span></span><br><span></span></div>
+  <div data-offset-y="75"><span></span><br><span></span></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-004.html
new file mode 100644
index 0000000000..b2e1d6d2ef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-004.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<style>
+#target {
+  display: grid;
+  grid-template-columns: 120px;
+  justify-items: last baseline;
+  width: 200px;
+  border: solid 3px;
+  position: relative;
+  line-height: 0;
+  writing-mode: vertical-rl;
+}
+span {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  outline: solid cornflowerblue 3px;
+  outline-offset: -3px;
+}
+#target > div {
+  flex: none;
+}
+#target > :nth-child(1) {
+  background: lime;
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  font-size: 20px;
+  writing-mode: horizontal-tb;
+}
+#target > :nth-child(2) {
+  background: hotpink;
+  font-size: 30px;
+  writing-mode: horizontal-tb;
+}
+#target > :nth-child(3) {
+  background: papayawhip;
+  font-size: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('#target > div')">
+
+<div id="target">
+  <div data-offset-y="40"><span></span><br><span></span></div>
+  <div data-offset-y="20"><span></span><br><span></span></div>
+  <div data-offset-y="75"><span></span><br><span></span></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-005.html
new file mode 100644
index 0000000000..ea835caa80
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-justify-baseline-005.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<style>
+#target {
+  display: grid;
+  grid-template: 50px 50px 50px 50px / 50px 50px 50px;
+  width: 200px;
+  border: solid 3px;
+  position: relative;
+  line-height: 20px;
+}
+#target > div {
+  writing-mode: vertical-rl;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('#target > div')">
+
+<div id="target">
+  <div style="grid-row: 1; grid-column: 3; justify-self: baseline; margin-right: 10px;" data-offset-x="100">line1<br>line2</div>
+  <div style="grid-row: 2; grid-column: span 3; justify-self: baseline;" data-offset-x="100">line1<br>line2</div>
+  <div style="grid-row: 3; grid-column: 1; justify-self: last baseline; margin-left: 10px;" data-offset-x="10">line1<br>line2</div>
+  <div style="grid-row: 4; grid-column: span 3; justify-self: last baseline;" data-offset-x="10">line1<br>line2</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-place-content-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-place-content-001.html
new file mode 100644
index 0000000000..cc1fe75799
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-place-content-001.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid containers support 'place-content'</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align" title="10.5. Aligning the Grid: the 'justify-content' and 'align-content' properties">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-justify-content" title="5.1. The 'justify-content' and 'align-content' Properties">
+<meta name="assert" content="This test checks that the 'justify-content' and 'align-content' properties, set using their 'place-content' shorthand, work well in grid containers.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  display: inline-grid;
+  position: relative;
+  vertical-align: top;
+  border: 10px solid black;
+  margin: 5px;
+  font: 40px/1 Ahem;
+  color: cyan;
+}
+.small {
+  padding: 40px;
+}
+.big {
+  padding: 0px;
+}
+.content-box.small {
+  width: 0px;
+  height: 0px;
+}
+.content-box.big {
+  width: 80px;
+  height: 80px;
+}
+.border-box {
+  box-sizing: border-box;
+  width: 100px;
+  height: 100px;
+}
+.start {
+  place-content: start;
+}
+.center {
+  place-content: center;
+}
+.end {
+  place-content: end;
+}
+.space-between {
+  place-content: space-between;
+}
+.space-around {
+  place-content: space-around;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<div id="log"></div>
+
+<h3>Small content area</h3>
+
+<pre>box-sizing: content-box</pre>
+
+<div class="grid small content-box start">
+  <div data-offset-x="40" data-offset-y="40">X</div>
+</div>
+<div class="grid small content-box center">
+  <div data-offset-x="20" data-offset-y="20">X</div>
+</div>
+<div class="grid small content-box end">
+  <div data-offset-x="0" data-offset-y="0">X</div>
+</div>
+<div class="grid small content-box space-between">
+  <div data-offset-x="40" data-offset-y="40">X</div>
+</div>
+<div class="grid small content-box space-around">
+  <div data-offset-x="40" data-offset-y="40">X</div>
+</div>
+
+<pre>box-sizing: border-box</pre>
+
+<div class="grid small border-box start">
+  <div data-offset-x="40" data-offset-y="40">X</div>
+</div>
+<div class="grid small border-box center">
+  <div data-offset-x="20" data-offset-y="20">X</div>
+</div>
+<div class="grid small border-box end">
+  <div data-offset-x="0" data-offset-y="0">X</div>
+</div>
+<div class="grid small border-box space-between">
+  <div data-offset-x="40" data-offset-y="40">X</div>
+</div>
+<div class="grid small border-box space-around">
+  <div data-offset-x="40" data-offset-y="40">X</div>
+</div>
+
+<h3>Big content area</h3>
+
+<pre>box-sizing: content-box</pre>
+
+<div class="grid big content-box start">
+  <div data-offset-x="0" data-offset-y="0">X</div>
+</div>
+<div class="grid big content-box center">
+  <div data-offset-x="20" data-offset-y="20">X</div>
+</div>
+<div class="grid big content-box end">
+  <div data-offset-x="40" data-offset-y="40">X</div>
+</div>
+<div class="grid big content-box space-between">
+  <div data-offset-x="0" data-offset-y="0">X</div>
+</div>
+<div class="grid big content-box space-around">
+  <div data-offset-x="20" data-offset-y="20">X</div>
+</div>
+
+<pre>box-sizing: border-box</pre>
+
+<div class="grid border-box start">
+  <div data-offset-x="0" data-offset-y="0">X</div>
+</div>
+<div class="grid big border-box center">
+  <div data-offset-x="20" data-offset-y="20">X</div>
+</div>
+<div class="grid big border-box end">
+  <div data-offset-x="40" data-offset-y="40">X</div>
+</div>
+<div class="grid big border-box space-between">
+  <div data-offset-x="0" data-offset-y="0">X</div>
+</div>
+<div class="grid big border-box space-around">
+  <div data-offset-x="20" data-offset-y="20">X</div>
+</div>
+
+<script>
+document.fonts.ready.then(() => {
+  checkLayout('.grid');
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-001.html
new file mode 100644
index 0000000000..b76e808da5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-001.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start">
+<meta name="assert" content="Absolute positioned grid items with 'start' value for justify-self are flushed with its alignment container's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: start;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-002.html
new file mode 100644
index 0000000000..c7ae3f0b7c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-002.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end">
+<meta name="assert" content="Absolute positioned grid items with 'end' value for justify-self are flushed with its alignment container's 'end' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: end;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="40"  data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="300" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-003.html
new file mode 100644
index 0000000000..342ba8f2e2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-003.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values">
+<meta name="assert" content="Absolute positioned grid items with 'left' value for justify-self are flushed with its alignment container's 'left' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: left;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: left;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: left;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="300" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-004.html
new file mode 100644
index 0000000000..39a3560c86
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-004.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values">
+<meta name="assert" content="Absolute positioned grid items with 'right' value for justify-self are flushed with its alignment container's 'right' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: right;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: right;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: right;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="40"  data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-005.html
new file mode 100644
index 0000000000..d37e541f68
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-005.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-center">
+<meta name="assert" content="Absolute positioned grid items with 'center' value for justify-self are 'centered' within its alignment container.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: center;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: center;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: center;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="20"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="140" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="20"  data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="145" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="320" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="190" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="320" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="195" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="20"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="140" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="20"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="145" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="20"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="140" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="20"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="145" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-006.html
new file mode 100644
index 0000000000..fe440bf0ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-006.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-flex-start">
+<meta name="assert" content="The 'flex-start' value of justify-self behaves like 'start' for absolute positioned grid items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: flex-start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: flex-start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: flex-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: flex-start;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-007.html
new file mode 100644
index 0000000000..cdd8b5a1f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-007.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-flex-start">
+<meta name="assert" content="The 'flex-end' value of justify-self behaves like 'end' for absolute positioned grid items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: flex-end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: flex-end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: flex-end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: flex-end;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="40"  data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="300" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-008.html
new file mode 100644
index 0000000000..a52265e344
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-008.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
+<meta name="assert" content="Absolute positioned grid items with 'self-start' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: self-start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: self-start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: self-start;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-009.html
new file mode 100644
index 0000000000..2ff678ecc8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-009.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-end">
+<meta name="assert" content="Absolute positioned grid items with 'self-end' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: self-end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: self-end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: self-end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: self-end;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="40"  data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="300" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-010.html
new file mode 100644
index 0000000000..801f6590a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-010.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
+<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: self-start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: self-start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: self-start;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="40"  data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="300" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="180" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="190" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-011.html
new file mode 100644
index 0000000000..596787d0bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-011.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
+<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-end' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: self-end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: self-end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: self-end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: self-end;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-012.html
new file mode 100644
index 0000000000..1b27bfc941
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-012.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start">
+<meta name="assert" content="Absolute positioned grid items with 'start' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+  justify-content: center;
+}
+.grid.LTR, .grid.RTL { width: 450px; }
+.grid.verticalLR, .grid.verticalRL { height: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: auto / 1;
+  justify-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / auto;
+  justify-self: start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: auto / auto;
+  justify-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: start;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="200" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="390" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="390" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="290" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="200" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="200" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-013.html
new file mode 100644
index 0000000000..a15bbc0608
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-013.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end">
+<meta name="assert" content="Absolute positioned grid items with 'end' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+  justify-content: center;
+}
+.grid.LTR, .grid.RTL { width: 450px; }
+.grid.verticalLR, .grid.verticalRL { height: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: auto / 1;
+  justify-self: end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / auto;
+  justify-self: end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: auto / auto;
+  justify-self: end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: end;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="380" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="390" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="140" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="350" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="250" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="380" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="390" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="140" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="380" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="390" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="140" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-014.html
new file mode 100644
index 0000000000..52d8ca640d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-014.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-center">
+<meta name="assert" content="Absolute positioned grid items with 'center' value for justify-self are 'centered' within its alignment container.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+  justify-content: center;
+}
+.grid.LTR, .grid.RTL { width: 450px; }
+.grid.verticalLR, .grid.verticalRL { height: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: auto / 1;
+  justify-self: center;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / auto;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: auto / auto;
+  justify-self: center;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: center;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="20"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="290" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="195" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="120" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="370" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="195" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="270" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+o
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="20"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="290" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="195" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="120" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="20"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="290" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="195" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="120" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-015.html
new file mode 100644
index 0000000000..83071e0c23
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-015.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
+<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+  justify-content: center;
+}
+.grid.LTR, .grid.RTL { width: 450px; }
+.grid.verticalLR, .grid.verticalRL { height: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: auto / 1;
+  justify-self: self-start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / auto;
+  justify-self: self-start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: auto / auto;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: self-start;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="380" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="390" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="140" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="350" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="250" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="380" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="390" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="140" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="380" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="390" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="140" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-016.html
new file mode 100644
index 0000000000..1ea1220092
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-016.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-end">
+<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-end' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+  justify-content: center;
+}
+.grid.LTR, .grid.RTL { width: 450px; }
+.grid.verticalLR, .grid.verticalRL { height: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: auto / 1;
+  justify-self: self-end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / auto;
+  justify-self: self-end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: auto / auto;
+  justify-self: self-end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: self-end;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="200" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="390" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="390" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="290" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="200" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="200" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-017.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-017.html
new file mode 100644
index 0000000000..041ee3fcc1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-017.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start">
+<meta name="assert" content="Absolute positioned grid items don't participate in Baseline Alignment, so the value 'baseline' behaves like 'start'.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: baseline;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: baseline;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: baseline;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: baseline;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-001.html
new file mode 100644
index 0000000000..31d06b8062
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-001.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of stcky positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Sticky positioned grid items are aligned correcly.">
+<style>
+.container {
+  border: solid 1px;
+  overflow: auto;
+  width: 500px;
+}
+.grid {
+  position: relative;
+  display: grid;
+  grid-template-columns: 100px 100px 100px 300px;
+  grid-template-rows: 75px 75px 75px 75px;
+  background: grey;
+  width: 400px;
+  margin-bottom: 20px;
+}
+.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+  width: 20px;
+  height: 20px;
+  background-color: #cae8ca;
+}
+.item1 {
+  left: 0px;
+  grid-column: 1;
+  grid-row: 1;
+}
+.item2 {
+  left: 0px;
+  grid-column: 2;
+  grid-row: 2;
+}
+.item3 {
+  left: 0px;
+  grid-column: 3;
+  grid-row: 3;
+}
+.item4 {
+  grid-column: 4;
+  grid-row: 4;
+  background: lightgrey;
+}
+.scroll { overflow: auto; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+<div class="container">
+    <div style="width: 30px; float:left; height: 10px;"></div>
+    <div class="grid">
+        <div class="item1 sticky justifySelfStart"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div>
+        <div class="item3 sticky justifySelfEnd"    data-offset-x="280" data-offset-y="150"></div>
+        <div class="item4"></div>
+    </div>
+    <div style="width: 30px; float:left; height: 10px;"></div>
+    <div class="grid scroll">
+        <div class="item1 sticky justifySelfStart"  data-offset-x="0"   data-offset-y="0"></div>
+        <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div>
+        <div class="item3 sticky justifySelfEnd"    data-offset-x="280" data-offset-y="150"></div>
+        <div class="item4"></div>
+    </div>
+    <div style="width: 2000px; height: 10px;"></div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-002.html
new file mode 100644
index 0000000000..cf14691161
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-sticky-positioned-items-002.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of stcky positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Sticky positioned grid items are aligned correcly, but preserving non-static positions when required.">
+<style>
+.container {
+  border: solid 1px;
+  overflow: auto;
+  width: 500px;
+}
+.grid {
+  position: relative;
+  display: grid;
+  grid-template-columns: 100px 100px 100px 300px;
+  grid-template-rows: 75px 75px 75px 75px;
+  background: grey;
+  width: 400px;
+  margin-bottom: 20px;
+}
+.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+  width: 20px;
+  height: 20px;
+  background-color: #cae8ca;
+}
+.item1 {
+  left: 40px;
+  grid-column: 1;
+  grid-row: 1;
+}
+.item2 {
+  left: 100px;
+  grid-column: 2;
+  grid-row: 2;
+}
+.item3 {
+  left: 290px;
+  grid-column: 3;
+  grid-row: 3;
+}
+.item4 {
+  grid-column: 4;
+  grid-row: 4;
+  background: lightgrey;
+}
+.scroll { overflow: auto; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+<div class="container">
+    <div style="width: 30px; float:left; height: 10px;"></div>
+    <div class="grid">
+        <div class="item1 sticky justifySelfStart"  data-offset-x="10"  data-offset-y="0"></div>
+        <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div>
+        <div class="item3 sticky justifySelfEnd"    data-offset-x="280" data-offset-y="150"></div>
+        <div class="item4"></div>
+    </div>
+    <div style="width: 30px; float:left; height: 10px;"></div>
+    <div class="grid scroll">
+        <div class="item1 sticky justifySelfStart"  data-offset-x="40"  data-offset-y="0"></div>
+        <div class="item2 sticky justifySelfCenter" data-offset-x="140" data-offset-y="75"></div>
+        <div class="item3 sticky justifySelfEnd"    data-offset-x="290" data-offset-y="150"></div>
+        <div class="item4"></div>
+    </div>
+    <div style="width: 2000px; height: 10px;"></div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html
new file mode 100644
index 0000000000..c9e630cbac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on fixed sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container { position: relative; }
+.grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: 100px 200px / 200px 100px;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.width25 { width: 25px; }
+.width200 { width: 200px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 25px; }
+.paddingRight { padding-right: 25px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<pre>Horizontal grid and verticalRL items do not share a baseline context</pre>
+
+<div class="grid width300 justifyItemsBaseline">
+  <div class="firstRowFirstColumn"                                   data-offset-x="0" data-offset-y="0"   data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="secondRowFirstColumn bigFont paddingRight verticalRL"  data-offset-x="75"  data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn width25"></div>
+</div>
+
+<pre>Horizontal grid and verticalLR item</pre>
+
+<div class="grid width300 justifyItemsBaseline">
+  <div class="firstRowFirstColumn"                                  data-offset-x="35" data-offset-y="0"   data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="secondRowFirstColumn bigFont paddingLeft verticalLR"  data-offset-x="0"  data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn width25"></div>
+</div>
+
+<pre>VerticalLR grid and Horizontal item</pre>
+
+<div class="grid justifyItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn"                        data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="secondRowFirstColumn bigFont horizontalTB"  data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn height25"></div>
+</div>
+
+<pre>VerticalRL grid and Horizontal item</pre>
+
+<div class="grid justifyItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn"                        data-offset-x="200" data-offset-y="0"   data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
+  <div class="secondRowFirstColumn bigFont horizontalTB"  data-offset-x="0"   data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn height25"></div>
+</div>
+
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html
new file mode 100644
index 0000000000..e96f8da6e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on fixed sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container { position: relative; }
+.grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: 100px 200px / 200px 100px;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.width25 { width: 25px; }
+.width200 { width: 200px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 20px; }
+.paddingRight { padding-right: 20px; }
+
+.fixedHeight { height: 125px; }
+.fixedWidth  { width: 125px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<pre>Horizontal grid and verticalLR item with fixed width</pre>
+
+<div class="grid width300 justifyItemsBaseline">
+  <div class="firstRowFirstColumn fixedWidth"                       data-offset-x="30" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
+  <div class="secondRowFirstColumn bigFont paddingLeft verticalLR"  data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn width25"></div>
+</div>
+
+<pre>Horizontal grid and verticalRL item with fixed width do not share a baseline context</pre>
+
+<div class="grid width300 justifyItemsBaseline">
+  <div class="firstRowFirstColumn fixedWidth"                        data-offset-x="0" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
+  <div class="secondRowFirstColumn bigFont paddingRight verticalRL"  data-offset-x="80"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn width25"></div>
+</div>
+
+<pre>VerticalLR grid and item with fixed height</pre>
+
+<div class="grid justifyItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn fixedHeight"            data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="125"></div>
+  <div class="secondRowFirstColumn bigFont horizontalTB"  data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn height25"></div>
+</div>
+
+<pre>VerticalRL grid and item with fixed width</pre>
+
+<div class="grid justifyItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn fixedHeight"            data-offset-x="200" data-offset-y="0"  data-expected-width="100" data-expected-height="125"></div>
+  <div class="secondRowFirstColumn bigFont horizontalTB"  data-offset-x="0"   data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn height25"></div>
+</div>
+
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html
new file mode 100644
index 0000000000..19a4f5193b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on fixed sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Empty grid items with relative size should use their border-box 'under' edge as synthesized baseline.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container { position: relative; }
+.grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: 100px 200px / 200px 100px;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.width25 { width: 25px; }
+.width200 { width: 200px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 20px; }
+.paddingRight { padding-right: 20px; }
+
+.relativeHeight { height: 50%; }
+.relativeWidth  { width: 50%; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<pre>Horizontal grid and verticalLR item with relative width</pre>
+
+<div class="grid width300 justifyItemsBaseline">
+  <div class="firstRowFirstColumn relativeWidth"                    data-offset-x="30" data-offset-y="0"   data-expected-width="100" data-expected-height="100"></div>
+  <div class="secondRowFirstColumn bigFont paddingLeft verticalLR"  data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn width25"></div>
+</div>
+
+<pre>Horizontal grid and verticalRL item with relative width do not share a baseline context</pre>
+
+<div class="grid width300 justifyItemsBaseline">
+  <div class="firstRowFirstColumn relativeWidth"                    data-offset-x="00" data-offset-y="0"   data-expected-width="100" data-expected-height="100"></div>
+  <div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="80"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn width25"></div>
+</div>
+
+<pre>VerticalLR grid and item with relative height</pre>
+
+<div class="grid justifyItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn relativeHeight"         data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="100"></div>
+  <div class="secondRowFirstColumn bigFont horizontalTB"  data-offset-x="100" data-offset-y="60" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn height25"></div>
+</div>
+
+<pre>VerticalRL grid and item with relative height</pre>
+
+<div class="grid justifyItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn relativeHeight"         data-offset-x="200" data-offset-y="0"  data-expected-width="100" data-expected-height="100"></div>
+  <div class="secondRowFirstColumn bigFont horizontalTB"  data-offset-x="0"   data-offset-y="60" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn height25"></div>
+</div>
+
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004.html
new file mode 100644
index 0000000000..f3f70790c9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on content-sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container { position: relative; }
+.inline-grid {
+  position: relative;
+  text-orientation: sideways;
+  grid: 100px 200px / auto auto;
+  font-family: Ahem;
+}
+.bigFont  { font-size: 50px; }
+.height25 { height: 25px; }
+.width25 { width: 25px; }
+.width200 { width: 200px; }
+.width300 { width: 300px; }
+
+.paddingLeft { padding-left: 20px; }
+.paddingRight { padding-right: 20px; }
+
+.fixedHeight { height: 125px; }
+.fixedWidth  { width: 125px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.inline-grid'); })">
+
+<pre>Horizontal grid and verticalLR item with fixed width</pre>
+
+<!-- The two items share a baseline group. -->
+<div class="inline-grid justifyItemsBaseline" data-expected-width="180" data-expected-height="300">
+  <div class="firstRowFirstColumn fixedWidth"                       data-offset-x="30" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
+  <div class="secondRowFirstColumn bigFont paddingLeft verticalLR"  data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn width25"></div>
+</div>
+
+<pre>Horizontal grid and verticalRL item with fixed width</pre>
+
+<!-- The two items *do not* share a baseline group. -->
+<div class="inline-grid justifyItemsBaseline" data-expected-width="150" data-expected-height="300">
+  <div class="firstRowFirstColumn fixedWidth"                       data-offset-x="0" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
+  <div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="5"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn width25"></div>
+</div>
+
+<pre>VerticalLR grid and item with fixed height</pre>
+
+<div class="inline-grid justifyItemsBaseline verticalLR">
+  <div class="firstRowFirstColumn fixedHeight"            data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="125"></div>
+  <div class="secondRowFirstColumn bigFont horizontalTB"  data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn height25"></div>
+</div>
+
+<pre>VerticalRL grid and item with fixed height</pre>
+
+<div class="inline-grid justifyItemsBaseline verticalRL">
+  <div class="firstRowFirstColumn fixedHeight"            data-offset-x="200" data-offset-y="0"  data-expected-width="100" data-expected-height="125"></div>
+  <div class="secondRowFirstColumn bigFont horizontalTB"  data-offset-x="0"   data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
+  <div class="autoRowSpanning2AutoColumn height25"></div>
+</div>
+
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-005.html
new file mode 100644
index 0000000000..8e0ca6f0c4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-005.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on content-sized grids and synthesized baselines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="assert" content="Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+body { overflow: scroll; }
+.container { position: relative; }
+.grid {
+  position: relative;
+  grid-template-columns: 150px;
+  text-orientation: sideways;
+  font: 20px/1 Ahem;
+}
+.width100 { width: 100px; }
+.width200 { width: 200px; }
+.width300 { width: 300px; }
+.bigFont  { font-size: 50px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<pre>verticalLR grid and parallel items</pre>
+
+<div class="container width100 verticalLR">
+    <div class="grid justifyItemsBaseline">
+        <div class="firstRowFirstColumn"          data-offset-x="0"  data-offset-y="0"  data-expected-width="20" data-expected-height="120">É É ÉÉ</div>
+        <div class="secondRowFirstColumn bigFont" data-offset-x="20" data-offset-y="70" data-expected-width="50" data-expected-height="50">É</div>
+    </div>
+</div>
+
+<pre>verticalRL grid and parallel items</pre>
+
+<div class="container width100 verticalRL">
+    <div class="grid justifyItemsBaseline">
+        <div class="firstRowFirstColumn"          data-offset-x="50" data-offset-y="0"  data-expected-width="20" data-expected-height="120">É É ÉÉ</div>
+        <div class="secondRowFirstColumn bigFont" data-offset-x="0"  data-offset-y="70" data-expected-width="50" data-expected-height="50">É</div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-001-ref.html
new file mode 100644
index 0000000000..df72a88262
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-001-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: baseline align a display:block item with a display:grid 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;
+}
+
+.inner-grid {
+  background: lightgrey;
+  grid-column: 2;
+  grid-row: 3;
+  min-width: 10px;
+  min-height: 0;
+  border: 0 solid lightblue;
+  border-top-width: 10px;
+  border-bottom-width: 40px;
+  padding-bottom: 20px;
+}
+
+x, z {
+  display: block;
+  min-width: 40px;
+  min-height: 10px;
+  font-size: 10em;
+  background: silver;
+}
+z {
+  width: 40px;
+  height: 10px;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<y style="grid-area:3/1">A&nbsp;</y>
+<div class="inner-grid">
+  <x>&nbsp;A</x><z></z>
+</div>
+</div>
+
+<div class="grid" style="align-items:last baseline">
+<y style="grid-area:3/1">A&nbsp;</y>
+<div class="inner-grid">
+  <z></z><x>&nbsp;A</x>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-001.html
new file mode 100644
index 0000000000..19a26d8d6a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-001.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: baseline align a display:block item with a display:grid item</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="grid-self-alignment-baseline-with-grid-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;
+}
+
+.inner-grid {
+  display: grid;
+  grid: auto auto / auto;
+  background: lightgrey;
+  grid-column: 2;
+  grid-row: 3;
+  min-width: 10px;
+  min-height: 0;
+  border: 0 solid lightblue;
+  border-top-width: 10px;
+  border-bottom-width: 40px;
+  place-content: inherit;
+  place-items: inherit;
+  padding-bottom: 20px;
+}
+
+x {
+  min-width: 40px;
+  min-height: 10px;
+  font-size: 10em;
+  background: silver;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<y style="grid-area:3/1">A&nbsp;</y>
+<div class="inner-grid">
+  <x>&nbsp;A</x><x style="grid-row:2"></x>
+</div>
+</div>
+
+<div class="grid" style="align-items:last baseline">
+<y style="grid-area:3/1">A&nbsp;</y>
+<div class="inner-grid">
+  <x></x><x style="grid-row:2">&nbsp;A</x>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-002.html
new file mode 100644
index 0000000000..a426f879c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-002.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: baseline align a display:block item with a display:grid item with spanned item</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="grid-self-alignment-baseline-with-grid-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;
+}
+
+.inner-grid {
+  display: grid;
+  grid: auto auto / auto;
+  background: lightgrey;
+  grid-column: 2;
+  grid-row: 3;
+  min-width: 10px;
+  min-height: 0;
+  border: 0 solid lightblue;
+  border-top-width: 10px;
+  border-bottom-width: 40px;
+  place-content: inherit;
+  place-items: inherit;
+  padding-bottom: 20px;
+}
+
+x {
+  min-width: 40px;
+  min-height: 10px;
+  font-size: 10em;
+  background: silver;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<y style="grid-area:3/1">A&nbsp;</y>
+<div class="inner-grid">
+  <x style="grid-row:1/span 3">&nbsp;A</x><x style="grid-column:1"></x>
+</div>
+</div>
+
+<div class="grid" style="align-items:last baseline">
+<y style="grid-area:3/1">A&nbsp;</y>
+<div class="inner-grid">
+  <x></x><x style="grid-row:2/span 3">&nbsp;A</x>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-003.html
new file mode 100644
index 0000000000..ed3bf30317
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-003.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: baseline align a display:block item with a display:grid spanned item</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="grid-self-alignment-baseline-with-grid-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;
+}
+
+.inner-grid {
+  display: grid;
+  grid: auto auto / auto;
+  background: lightgrey;
+  grid-column: 2;
+  grid-row: 2 / span 2;
+  min-width: 10px;
+  min-height: 0;
+  border: 0 solid lightblue;
+  border-top-width: 10px;
+  border-bottom-width: 40px;
+  place-content: inherit;
+  place-items: inherit;
+  padding-bottom: 20px;
+}
+
+x {
+  min-width: 40px;
+  min-height: 10px;
+  font-size: 10em;
+  background: silver;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<y style="grid-area:2/1">A&nbsp;</y>
+<div class="inner-grid">
+  <x>&nbsp;A</x><x style="grid-row:2"></x>
+</div>
+</div>
+
+<div class="grid" style="align-items:last baseline">
+<y style="grid-area:3/1">A&nbsp;</y>
+<div class="inner-grid">
+  <x></x><x style="grid-row:2">&nbsp;A</x>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-004.html
new file mode 100644
index 0000000000..5e20b88d35
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-baseline-with-grid-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: baseline align a display:block item with a display:grid spanned item with spanned item</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-baselines">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <link rel="match" href="grid-self-alignment-baseline-with-grid-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;
+}
+
+.inner-grid {
+  display: grid;
+  grid: auto auto / auto;
+  background: lightgrey;
+  grid-column: 2;
+  grid-row: 2 / span 2;
+  min-width: 10px;
+  min-height: 0;
+  border: 0 solid lightblue;
+  border-top-width: 10px;
+  border-bottom-width: 40px;
+  place-content: inherit;
+  place-items: inherit;
+  padding-bottom: 20px;
+}
+
+x {
+  min-width: 40px;
+  min-height: 10px;
+  font-size: 10em;
+  background: silver;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+<y style="grid-area:2/1">A&nbsp;</y>
+<div class="inner-grid">
+  <x style="grid-row:1/span 3">&nbsp;A</x><x style="grid-row:4"></x>
+</div>
+</div>
+
+<div class="grid" style="align-items:last baseline">
+<y style="grid-area:3/1">A&nbsp;</y>
+<div class="inner-grid">
+  <x></x><x style="grid-row:2/span 3">&nbsp;A</x>
+</div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-001.html
new file mode 100644
index 0000000000..93e622ce6d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-001.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Alignment properties don't apply on absolute positioned grid items with non-static position in the property's axis.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+  left: 5px;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+  right: 10px;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+  top: 10px
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+  left: 5px;
+  top: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="5"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="170" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="160" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="105" data-offset-y="160" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="155" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="70"  data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="190" data-offset-y="160" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="5"   data-offset-y="160" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="5"   data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="110" data-offset-y="140" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="195" data-offset-y="10"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="155" data-offset-y="110" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="105" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="210" data-offset-y="140" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="45"  data-offset-y="10"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="5"   data-offset-y="110" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-002.html
new file mode 100644
index 0000000000..6b2d5c4256
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-002.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned grid items with margins.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div { margin: 5px 10px 15px 20px; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+  left: 5px;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+  right: 10px;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+  top: 10px
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+  left: 5px;
+  top: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="25"  data-offset-y="5"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="160" data-offset-y="105" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="20"  data-offset-y="165" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="125" data-offset-y="165" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="175" data-offset-y="5"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="105" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="180" data-offset-y="165" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="25"  data-offset-y="165" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="25"  data-offset-y="25"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="135" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="200" data-offset-y="15"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="175" data-offset-y="115" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="125" data-offset-y="25"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="200" data-offset-y="135" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="50"  data-offset-y="15"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="25"  data-offset-y="115" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-003.html
new file mode 100644
index 0000000000..0a5d674fbd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-003.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned grid items with borders.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div {
+   border-color: silver;
+   border-style: solid;
+   border-width: 5px 10px 15px 20px;
+}
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+  left: 5px;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+  right: 10px;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+  top: 10px
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+  left: 5px;
+  top: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="5"   data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="140" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="160" data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="105" data-offset-y="160" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="155" data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="40"  data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="160" data-offset-y="160" data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="5"   data-offset-y="160" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="5"   data-offset-y="20"  data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="80"  data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="180" data-offset-y="10"  data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="155" data-offset-y="110" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="105" data-offset-y="20"  data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="30"  data-offset-y="10"  data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="5"   data-offset-y="110" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-004.html
new file mode 100644
index 0000000000..b9237a5334
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-004.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned grid items with paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div { padding: 5px 10px 15px 20px; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+  left: 5px;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+  right: 10px;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+  top: 10px
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+  left: 5px;
+  top: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="5"   data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="140" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="160" data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="105" data-offset-y="160" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="155" data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="40"  data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="160" data-offset-y="160" data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="5"   data-offset-y="160" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="5"   data-offset-y="20"  data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="80"  data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="180" data-offset-y="10"  data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="155" data-offset-y="110" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="105" data-offset-y="20"  data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="30"  data-offset-y="10"  data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="5"   data-offset-y="110" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-005.html
new file mode 100644
index 0000000000..39c75eb5d7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-005.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned grid items with margins, borders and paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div {
+   margin: 2px 4px 6px 8px;
+   padding: 3px 2px 4px 5px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 1px 6px 2px 3px;
+}
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+  left: 5px;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+  right: 10px;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+  top: 10px
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+  left: 5px;
+  top: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="13"  data-offset-y="2"   data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="104" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="8"   data-offset-y="162" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="113" data-offset-y="162" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="163" data-offset-y="2"   data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="50"  data-offset-y="104" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="170" data-offset-y="162" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="13"  data-offset-y="162" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="13"  data-offset-y="24"  data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="133" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="189" data-offset-y="12"  data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="163" data-offset-y="112" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="113" data-offset-y="24"  data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="190" data-offset-y="133" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="39"  data-offset-y="12"  data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="13"  data-offset-y="112" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-006.html
new file mode 100644
index 0000000000..6565a60387
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-006.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned grid items when both grid and its items have margins, borders and paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid {
+   margin: 4px 2px 8px 3px;
+   padding: 1px 4px 2px 3px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 5px 6px 4px 8px;
+}
+
+.grid > div {
+   margin: 2px 4px 6px 8px;
+   padding: 3px 2px 4px 5px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 1px 6px 2px 3px;
+}
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+  left: 5px;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+  right: 10px;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+  top: 10px
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+  left: 5px;
+  top: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="16"  data-offset-y="3"   data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="153" data-offset-y="105" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="11"  data-offset-y="163" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="116" data-offset-y="163" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="166" data-offset-y="3"   data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="53"  data-offset-y="105" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="173" data-offset-y="163" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="16"  data-offset-y="163" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="16"  data-offset-y="25"  data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="93"  data-offset-y="134" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="192" data-offset-y="13"  data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="166" data-offset-y="113" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="116" data-offset-y="25"  data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="193" data-offset-y="134" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="42"  data-offset-y="13"  data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="16"  data-offset-y="113" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-007.html
new file mode 100644
index 0000000000..55c1892da1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-007.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Alignment properties don't apply on absolute positioned orthogonal grid items with non-static position in the property's axis.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+.horizontal { writing-mode: horizontal-tb; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+  left: 5px;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+  right: 10px;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+  top: 10px
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+  left: 5px;
+  top: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="5"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="210" data-offset-y="80"  data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="160" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn RTL">X XX X</div>
+  <div data-offset-x="105" data-offset-y="160" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="155" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="110" data-offset-y="80"  data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="190" data-offset-y="160" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn LTR">X XX X</div>
+  <div data-offset-x="5"   data-offset-y="160" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="5"   data-offset-y="90"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="70"  data-offset-y="160" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="195" data-offset-y="10"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn verticalRL">X XX X</div>
+  <div data-offset-x="155" data-offset-y="110" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="105" data-offset-y="90"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="170" data-offset-y="160" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="20"  data-offset-y="10"  data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn horizontal RTL">X XX X</div>
+  <div data-offset-x="5"   data-offset-y="110" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-008.html
new file mode 100644
index 0000000000..653dee6f7f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-008.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned orthogonal grid items with margins.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div { margin: 5px 10px 15px 20px; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+.horizontal { writing-mode: horizontal-tb; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+  left: 5px;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+  right: 10px;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+  top: 10px
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+  left: 5px;
+  top: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="25"  data-offset-y="5"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="200" data-offset-y="65"  data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="20"  data-offset-y="165" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn RTL">X XX X</div>
+  <div data-offset-x="125" data-offset-y="165" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="175" data-offset-y="5"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="100" data-offset-y="65"  data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="180" data-offset-y="165" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn LTR">X XX X</div>
+  <div data-offset-x="25"  data-offset-y="165" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="25"  data-offset-y="75"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="155" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="200" data-offset-y="15"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn verticalRL">X XX X</div>
+  <div data-offset-x="175" data-offset-y="115" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="125" data-offset-y="75"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="160" data-offset-y="155" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="25"  data-offset-y="15"  data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn horizontal RTL">X XX X</div>
+  <div data-offset-x="25"  data-offset-y="115" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-009.html
new file mode 100644
index 0000000000..4136c44b0d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-009.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned orthogonal grid items with borders.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div {
+   border-color: silver;
+   border-style: solid;
+   border-width: 5px 10px 15px 20px;
+}
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+.horizontal { writing-mode: horizontal-tb; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+  left: 5px;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+  right: 10px;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+  top: 10px
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+  left: 5px;
+  top: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="5"   data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="180" data-offset-y="60"  data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="160" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn RTL">X XX X</div>
+  <div data-offset-x="105" data-offset-y="160" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="155" data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="80"  data-offset-y="60"  data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="160" data-offset-y="160" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn LTR">X XX X</div>
+  <div data-offset-x="5"   data-offset-y="160" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="5"   data-offset-y="70"  data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="40"  data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="180" data-offset-y="10"  data-expected-width="40"  data-expected-height="80" class="secondRowFirstColumn verticalRL">X XX X</div>
+  <div data-offset-x="155" data-offset-y="110" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="105" data-offset-y="70"  data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="140" data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="5"   data-offset-y="10"  data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn horizontal RTL">X XX X</div>
+  <div data-offset-x="5"   data-offset-y="110" data-expected-width="70"  data-expected-height="80" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-010.html
new file mode 100644
index 0000000000..86dc3257a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-010.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned orthogonal grid items with paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div { padding: 5px 10px 15px 20px; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+.horizontal { writing-mode: horizontal-tb; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+  left: 5px;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+  right: 10px;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+  top: 10px
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+  left: 5px;
+  top: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="5"   data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="180" data-offset-y="60"  data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="160" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn RTL">X XX X</div>
+  <div data-offset-x="105" data-offset-y="160" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="155" data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="80"  data-offset-y="60"  data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="160" data-offset-y="160" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn LTR">X XX X</div>
+  <div data-offset-x="5"   data-offset-y="160" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="5"   data-offset-y="70"  data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="40"  data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="180" data-offset-y="10"  data-expected-width="40"  data-expected-height="80" class="secondRowFirstColumn verticalRL">X XX X</div>
+  <div data-offset-x="155" data-offset-y="110" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="105" data-offset-y="70"  data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="140" data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="5"   data-offset-y="10"  data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn horizontal RTL">X XX X</div>
+  <div data-offset-x="5"   data-offset-y="110" data-expected-width="70"  data-expected-height="80" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-011.html
new file mode 100644
index 0000000000..d12c1826f7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-011.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned orthogonal grid items with margins, borders and paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div {
+   margin: 2px 4px 6px 8px;
+   padding: 3px 2px 4px 5px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 1px 6px 2px 3px;
+}
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+.horizontal { writing-mode: horizontal-tb; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+  left: 5px;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+  right: 10px;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+  top: 10px
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+  left: 5px;
+  top: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="13"  data-offset-y="2"   data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="190" data-offset-y="64"  data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="8"   data-offset-y="162" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn RTL">X XX X</div>
+  <div data-offset-x="113" data-offset-y="162" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="163" data-offset-y="2"   data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="64"  data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="170" data-offset-y="162" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn LTR">X XX X</div>
+  <div data-offset-x="13"  data-offset-y="162" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="13"  data-offset-y="74"  data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="50"  data-offset-y="153" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="189" data-offset-y="12"  data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn verticalRL">X XX X</div>
+  <div data-offset-x="163" data-offset-y="112" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="113" data-offset-y="74"  data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="150" data-offset-y="153" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="14"  data-offset-y="12"  data-expected-width="76"  data-expected-height="20" class="secondRowFirstColumn horizontal RTL">X XX X</div>
+  <div data-offset-x="13"  data-offset-y="112" data-expected-width="56"  data-expected-height="70" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-012.html
new file mode 100644
index 0000000000..003c3bbb37
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-012.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned orthogonal grid items alignment works as expected when grid and its items have margins, borders and paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid {
+   margin: 4px 2px 8px 3px;
+   padding: 1px 4px 2px 3px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 5px 6px 4px 8px;
+}
+
+.grid > div {
+   margin: 2px 4px 6px 8px;
+   padding: 3px 2px 4px 5px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 1px 6px 2px 3px;
+}
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+.horizontal { writing-mode: horizontal-tb; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: self-end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="73"  data-offset-y="3"   data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="157" data-offset-y="65"  data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="23"  data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn RTL">X XX X</div>
+  <div data-offset-x="111" data-offset-y="153" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="223" data-offset-y="3"   data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="57"  data-offset-y="65"  data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="161" data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn LTR">X XX X</div>
+  <div data-offset-x="11"  data-offset-y="153" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="11"  data-offset-y="75"  data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="63"  data-offset-y="154" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="192" data-offset-y="3"   data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn verticalRL">X XX X</div>
+  <div data-offset-x="161" data-offset-y="103" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="173" data-offset-y="75"  data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="111" data-offset-y="154" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="17"  data-offset-y="3"   data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn horizontal RTL">X XX X</div>
+  <div data-offset-x="43"  data-offset-y="103" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-001.html
new file mode 100644
index 0000000000..4c8bd89ecf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-001.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned grid items alignment works as expected when items have margins.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div { margin: 5px 10px 15px 20px; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="30"  data-offset-y="5"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="145" data-offset-y="105" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="20"  data-offset-y="190" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="120" data-offset-y="195" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="180" data-offset-y="5"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="45"  data-offset-y="105" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="180" data-offset-y="190" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="20"  data-offset-y="195" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="20"  data-offset-y="25"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="110" data-offset-y="135" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="200" data-offset-y="5"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="200" data-offset-y="105" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="230" data-offset-y="25"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="120" data-offset-y="135" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="50"  data-offset-y="5"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="20"  data-offset-y="105" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-002.html
new file mode 100644
index 0000000000..6624ea00d4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-002.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned grid items alignment works as expected when items have borders.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div {
+   border-color: silver;
+   border-style: solid;
+   border-width: 5px 10px 15px 20px;
+}
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="10"  data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="125" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="185" data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="190" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="160" data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="25"  data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="160" data-offset-y="185" data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="190" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="20"  data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="210" data-offset-y="20"  data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="30"  data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-003.html
new file mode 100644
index 0000000000..cc377a5c59
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-003.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned grid items alignment works as expected when items have paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div { padding: 5px 10px 15px 20px; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="10"  data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="125" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="185" data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="190" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="160" data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="25"  data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="160" data-offset-y="185" data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="190" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="20"  data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="210" data-offset-y="20"  data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="30"  data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-004.html
new file mode 100644
index 0000000000..afbbfcb1dd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-004.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned grid items alignment works as expected when items have margins, borders and paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div {
+   margin: 2px 4px 6px 8px;
+   padding: 3px 2px 4px 5px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 1px 6px 2px 3px;
+}
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="20"  data-offset-y="2"   data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="134" data-offset-y="104" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="8"   data-offset-y="188" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="108" data-offset-y="194" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="rid RTL">
+  <div data-offset-x="170" data-offset-y="2"   data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="34"  data-offset-y="104" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="170" data-offset-y="188" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="8"   data-offset-y="194" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="rid verticalLR">
+  <div data-offset-x="8"   data-offset-y="24"  data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="133" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="189" data-offset-y="2"   data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="190" data-offset-y="102" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="rid verticalRL">
+  <div data-offset-x="220" data-offset-y="24"  data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="108" data-offset-y="133" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="39"  data-offset-y="2"   data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="8"   data-offset-y="102" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-005.html
new file mode 100644
index 0000000000..3cf29475ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-005.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned grid items alignment works as expected when the grid and its items have margins, borders and paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid {
+   margin: 4px 2px 8px 3px;
+   padding: 1px 4px 2px 3px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 5px 6px 4px 8px;
+}
+
+.grid > div {
+   margin: 2px 4px 6px 8px;
+   padding: 3px 2px 4px 5px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 1px 6px 2px 3px;
+}
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="23"  data-offset-y="3"   data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="137" data-offset-y="105" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="11"  data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="111" data-offset-y="195" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="173" data-offset-y="3"   data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="37"  data-offset-y="105" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="173" data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="11"  data-offset-y="195" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="11"  data-offset-y="25"  data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="103" data-offset-y="134" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="192" data-offset-y="3"   data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="193" data-offset-y="103" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="223" data-offset-y="25"  data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="111" data-offset-y="134" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="42"  data-offset-y="3"   data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="11"  data-offset-y="103" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-006.html
new file mode 100644
index 0000000000..e1b3fc4d25
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-006.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned orthogonal grid items alignment works as expected when items have margins.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div { margin: 5px 10px 15px 20px; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+.horizontal { writing-mode: horizontal-tb; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: self-end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="80"  data-offset-y="5"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="165" data-offset-y="65"  data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="30"  data-offset-y="190" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn RTL">X XX X</div>
+  <div data-offset-x="120" data-offset-y="155" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="230" data-offset-y="5"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="65"  data-offset-y="65"  data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="170" data-offset-y="190" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn LTR">X XX X</div>
+  <div data-offset-x="20"  data-offset-y="155" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="20"  data-offset-y="75"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="70"  data-offset-y="155" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="200" data-offset-y="5"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn verticalRL">X XX X</div>
+  <div data-offset-x="170" data-offset-y="105" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="180" data-offset-y="75"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="120" data-offset-y="155" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="25"  data-offset-y="5"   data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn horizontal RTL">X XX X</div>
+  <div data-offset-x="50"  data-offset-y="105" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-007.html
new file mode 100644
index 0000000000..855ed7cdef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-007.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned orthogonal grid items alignment works as expected when items have borders.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div {
+   border-color: silver;
+   border-style: solid;
+   border-width: 5px 10px 15px 20px;
+}
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+.horizontal { writing-mode: horizontal-tb; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: self-end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="60"  data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="145" data-offset-y="60"  data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="10"  data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn RTL">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="210" data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="45"  data-offset-y="60"  data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn LTR">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="70"  data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="50"  data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="40"  data-expected-height="80" class="secondRowFirstColumn verticalRL">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="160" data-offset-y="70"  data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="5"   data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn horizontal RTL">X XX X</div>
+  <div data-offset-x="30"  data-offset-y="100" data-expected-width="70"  data-expected-height="80" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-008.html
new file mode 100644
index 0000000000..6fa38b9206
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-008.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned orthogonal grid items alignment works as expected when items have paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div { padding: 5px 10px 15px 20px; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+.horizontal { writing-mode: horizontal-tb; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: self-end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="60"  data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="145" data-offset-y="60"  data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="10"  data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn RTL">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="210" data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="45"  data-offset-y="60"  data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn LTR">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="70"  data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="50"  data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="40"  data-expected-height="80" class="secondRowFirstColumn verticalRL">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="160" data-offset-y="70"  data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="5"   data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn horizontal RTL">X XX X</div>
+  <div data-offset-x="30"  data-offset-y="100" data-expected-width="70"  data-expected-height="80" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-009.html
new file mode 100644
index 0000000000..0ff8497818
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-009.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned orthogonal grid items alignment works as expected when items have margins, borders and paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div {
+   margin: 2px 4px 6px 8px;
+   padding: 3px 2px 4px 5px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 1px 6px 2px 3px;
+}
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+.horizontal { writing-mode: horizontal-tb; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: self-end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="70"  data-offset-y="2"   data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="154" data-offset-y="64"  data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="20"  data-offset-y="188" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn RTL">X XX X</div>
+  <div data-offset-x="108" data-offset-y="152" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="220" data-offset-y="2"   data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="54"  data-offset-y="64"  data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="158" data-offset-y="188" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn LTR">X XX X</div>
+  <div data-offset-x="8"   data-offset-y="152" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="8"   data-offset-y="74"  data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="153" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="189" data-offset-y="2"   data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn verticalRL">X XX X</div>
+  <div data-offset-x="158" data-offset-y="102" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="170" data-offset-y="74"  data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="108" data-offset-y="153" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="14"  data-offset-y="2"   data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn horizontal RTL">X XX X</div>
+  <div data-offset-x="40"  data-offset-y="102" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-010.html
new file mode 100644
index 0000000000..003c3bbb37
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-010.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned orthogonal grid items alignment works as expected when grid and its items have margins, borders and paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid {
+   margin: 4px 2px 8px 3px;
+   padding: 1px 4px 2px 3px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 5px 6px 4px 8px;
+}
+
+.grid > div {
+   margin: 2px 4px 6px 8px;
+   padding: 3px 2px 4px 5px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 1px 6px 2px 3px;
+}
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+.horizontal { writing-mode: horizontal-tb; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: self-end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="73"  data-offset-y="3"   data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="157" data-offset-y="65"  data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="23"  data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn RTL">X XX X</div>
+  <div data-offset-x="111" data-offset-y="153" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="223" data-offset-y="3"   data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div>
+  <div data-offset-x="57"  data-offset-y="65"  data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="161" data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn LTR">X XX X</div>
+  <div data-offset-x="11"  data-offset-y="153" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="11"  data-offset-y="75"  data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="63"  data-offset-y="154" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="192" data-offset-y="3"   data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn verticalRL">X XX X</div>
+  <div data-offset-x="161" data-offset-y="103" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="173" data-offset-y="75"  data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div>
+  <div data-offset-x="111" data-offset-y="154" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="17"  data-offset-y="3"   data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn horizontal RTL">X XX X</div>
+  <div data-offset-x="43"  data-offset-y="103" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-011.html
new file mode 100644
index 0000000000..e0681310d0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-011.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'auto' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned grid items alignment works as expected.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-content: center;
+}
+.grid.LTR, .grid.RTL { width: 450px; }
+.grid.verticalLR, .grid.verticalRL { height: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: auto / 1;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / auto;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: auto / auto;
+  align-self: center;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: self-end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="290" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="195" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="390" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="390" data-offset-y="195" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="250" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="120" data-offset-y="290" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="195" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="210" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="290" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="45"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-012.html
new file mode 100644
index 0000000000..9049a826a5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-012.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'auto' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned grid items alignment works as expected when items have margins.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-content: center;
+}
+.grid.LTR, .grid.RTL { width: 450px; }
+.grid.verticalLR, .grid.verticalRL { height: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div { margin: 5px 10px 15px 20px; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: auto / 1;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / auto;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: auto / auto;
+  align-self: center;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: self-end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="30"  data-offset-y="5"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="295" data-offset-y="105" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="20"  data-offset-y="190" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="120" data-offset-y="195" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="380" data-offset-y="5"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="95"  data-offset-y="105" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="380" data-offset-y="190" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="270" data-offset-y="195" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="20"  data-offset-y="25"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="110" data-offset-y="285" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="200" data-offset-y="5"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="200" data-offset-y="105" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="230" data-offset-y="25"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="120" data-offset-y="285" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="50"  data-offset-y="5"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="20"  data-offset-y="105" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-013.html
new file mode 100644
index 0000000000..42b92fd681
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-013.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'auto' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned grid items alignment works as expected when items have borders.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-content: center;
+}
+.grid.LTR, .grid.RTL { width: 450px; }
+.grid.verticalLR, .grid.verticalRL { height: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div {
+   border-color: silver;
+   border-style: solid;
+   border-width: 5px 10px 15px 20px;
+}
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: auto / 1;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / auto;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: auto / auto;
+  align-self: center;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: self-end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="10"  data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="275" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="185" data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="190" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="360" data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="75"  data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="360" data-offset-y="185" data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="250" data-offset-y="190" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="20"  data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="280" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="210" data-offset-y="20"  data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="280" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="30"  data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-014.html
new file mode 100644
index 0000000000..db5c0f89cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-014.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'auto' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned grid items alignment works as expected when items have paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-content: center;
+}
+.grid.LTR, .grid.RTL { width: 450px; }
+.grid.verticalLR, .grid.verticalRL { height: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div { padding: 5px 10px 15px 20px; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: auto / 1;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / auto;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: auto / auto;
+  align-self: center;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: self-end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="10"  data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="275" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="185" data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="190" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="360" data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="75"  data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="360" data-offset-y="185" data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="250" data-offset-y="190" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="20"  data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="280" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="210" data-offset-y="20"  data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="280" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="30"  data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-015.html
new file mode 100644
index 0000000000..3b0a3be6c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-015.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'auto' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned grid items alignment works as expected when items have margins, borders and paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-content: center;
+}
+.grid.LTR, .grid.RTL { width: 450px; }
+.grid.verticalLR, .grid.verticalRL { height: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid > div {
+   margin: 2px 4px 6px 8px;
+   padding: 3px 2px 4px 5px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 1px 6px 2px 3px;
+}
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: auto / 1;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / auto;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: auto / auto;
+  align-self: center;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: self-end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="20"  data-offset-y="2"   data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="284" data-offset-y="104" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="8"   data-offset-y="188" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="108" data-offset-y="194" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="370" data-offset-y="2"   data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="84"  data-offset-y="104" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="370" data-offset-y="188" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="258" data-offset-y="194" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="8"   data-offset-y="24"  data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="283" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="189" data-offset-y="2"   data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="190" data-offset-y="102" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="220" data-offset-y="24"  data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="108" data-offset-y="283" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="39"  data-offset-y="2"   data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="8"   data-offset-y="102" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-016.html
new file mode 100644
index 0000000000..537ce0ba80
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-016.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'auto' grid positions and margin, border and padding</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<meta name="assert" content="Absolute positioned grid items alignment works as expected when the grid and its items have margins, borders and paddings.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-content: center;
+}
+.grid.LTR, .grid.RTL { width: 450px; }
+.grid.verticalLR, .grid.verticalRL { height: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.grid {
+   margin: 4px 2px 8px 3px;
+   padding: 1px 4px 2px 3px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 5px 6px 4px 8px;
+}
+
+.grid > div {
+   margin: 2px 4px 6px 8px;
+   padding: 3px 2px 4px 5px;
+   border-color: silver;
+   border-style: solid;
+   border-width: 1px 6px 2px 3px;
+}
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: auto / 1;
+  align-self: start;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / auto;
+  align-self: end;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: auto / auto;
+  align-self: center;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: self-end;
+  justify-self: left;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="23"  data-offset-y="3"   data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="289" data-offset-y="105" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="8"   data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="111" data-offset-y="195" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="377" data-offset-y="3"   data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="86"  data-offset-y="105" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="377" data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="261" data-offset-y="195" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="11"  data-offset-y="25"  data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="103" data-offset-y="285" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="192" data-offset-y="2"   data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="193" data-offset-y="103" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="223" data-offset-y="25"  data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="111" data-offset-y="285" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="42"  data-offset-y="2"   data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="11"  data-offset-y="103" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-001.html
new file mode 100644
index 0000000000..95b5f4fe6d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-001.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="Grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="10"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="60"  data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-002.html
new file mode 100644
index 0000000000..10ea533404
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-002.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  margin-right: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  margin-bottom: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  margin-right: 20px;
+  margin-bottom: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="90"  data-expected-height="10"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="60"  data-expected-height="130" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="130" data-expected-height="90"  class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-003.html
new file mode 100644
index 0000000000..51ad16826e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-003.html
@@ -0,0 +1,67 @@
+ <!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined border-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { border-style: solid; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  border-width: 0px 10px 0px 0px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  border-width: 0px 0px 20px 0px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+  border-width: 0px 0px 0px 0px;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  border-width: 0px 20px 10px 0px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="10"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="60"  data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-004.html
new file mode 100644
index 0000000000..f0f19e2920
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-004.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined padding-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  padding-right: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  padding-bottom: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  padding-right: 20px;
+  padding-bottom: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="10"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="60"  data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-005.html
new file mode 100644
index 0000000000..c21500cd3f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-005.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="60"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="40"  data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-006.html
new file mode 100644
index 0000000000..65f5246764
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-006.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  margin-right: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  margin-bottom: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  margin-right: 20px;
+  margin-bottom: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="90"  data-expected-height="60"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="40"  data-expected-height="130" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="130" data-expected-height="90"  class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-007.html
new file mode 100644
index 0000000000..6ba763ea9c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-007.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined border-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { writing-mode: vertical-lr; }
+.grid > div { border-style: solid; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  border-width: 0px 10px 0px 0px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  border-width: 0px 0px 20px 0px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+  border-width: 0px 0px 0px 0px;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  border-width: 0px 20px 10px 0px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="60"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="40"  data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-008.html
new file mode 100644
index 0000000000..e433dde9b9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-008.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined padding-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  padding-right: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  padding-bottom: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  padding-right: 20px;
+  padding-bottom: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="60"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="40"  data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-009.html
new file mode 100644
index 0000000000..90de8d4bc0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-009.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="Grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="125" data-expected-height="20"  class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="125" data-offset-y="0"   data-expected-width="80"  data-expected-height="125" class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="125" data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-010.html
new file mode 100644
index 0000000000..b71a318908
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-010.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  margin-right: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  margin-bottom: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  margin-right: 20px;
+  margin-bottom: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="110" data-expected-height="20"  class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="0"   data-expected-width="80"  data-expected-height="110" class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="130" data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="130" data-expected-width="110" data-expected-height="110" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-011.html
new file mode 100644
index 0000000000..8b1999b4b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-011.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+}
+.grid > div { border-style: solid; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  border-width: 0px 10px 0px 0px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  border-width: 0px 0px 20px 0px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+  border-width: 0px 0px 0px 0px;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  border-width: 0px 20px 10px 0px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="120" data-expected-height="20"  class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="0"   data-expected-width="80"  data-expected-height="130" class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="130" data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="130" data-expected-width="130" data-expected-height="120" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-012.html
new file mode 100644
index 0000000000..fe738f2e8a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-012.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined padding-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  padding-right: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  padding-bottom: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  padding-right: 20px;
+  padding-bottom: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="120" data-expected-height="20"  class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="0"   data-expected-width="80"  data-expected-height="130" class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="130" data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="130" data-expected-width="130" data-expected-height="120" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-013.html
new file mode 100644
index 0000000000..ffb52481a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-013.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="125" data-expected-height="80"  class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="125" data-offset-y="0"   data-expected-width="20"  data-expected-height="125" class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="125" data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-014.html
new file mode 100644
index 0000000000..34e1c5ec6c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-014.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  margin-right: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  margin-bottom: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  margin-right: 20px;
+  margin-bottom: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="110" data-expected-height="80"  class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="0"   data-expected-width="20"  data-expected-height="110" class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="130" data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="130" data-expected-width="110" data-expected-height="110" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-015.html
new file mode 100644
index 0000000000..df8749c47b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-015.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined border-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+}
+.grid > div { writing-mode: vertical-lr; }
+.grid > div { border-style: solid; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  border-width: 0px 10px 0px 0px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  border-width: 0px 0px 20px 0px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+  border-width: 0px 0px 0px 0px;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  border-width: 0px 20px 10px 0px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="120" data-expected-height="80"  class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="0"   data-expected-width="20"  data-expected-height="130" class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="130" data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="130" data-expected-width="130" data-expected-height="120" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-016.html
new file mode 100644
index 0000000000..00059268fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-016.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined padding-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  padding-right: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  padding-bottom: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  padding-right: 20px;
+  padding-bottom: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="120" data-expected-height="80"  class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="0"   data-expected-width="20"  data-expected-height="130" class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="130" data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="130" data-expected-width="130" data-expected-height="120" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-input-range-ref.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-input-range-ref.html
new file mode 100644
index 0000000000..ad71302aef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-input-range-ref.html
@@ -0,0 +1,61 @@
+<!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 Reference: align/justify-self on range INPUT items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace;
+}
+
+input {
+  margin:0;
+  padding:0;
+  border:none; /* NOTE: On Windows, GetWidgetBorder returns 1px on all sides,
+                  so we need the next declaration for the width/height to match: */
+  box-sizing: border-box;
+  width:300px;
+  height:80px;
+}
+
+.grid {
+  display: inline-grid;
+  grid: 80px / 300px;
+  place-items: stretch;
+  border:1px solid;
+}
+
+.zero { grid:0/0; }
+.zero input { width:0; height:0; }
+
+.none input { -webkit-appearance:none; }
+
+    </style>
+</head>
+<body>
+
+<div class="grid"><input type=range></div>
+<br>
+<div class="grid zero"><input type=range></div>
+<br>
+<div class="grid"><input type=range style="place-self:normal"></div>
+<br>
+<div class="grid zero"><input type=range style="place-self:normal"></div>
+<br>
+
+<div class="none">
+<div class="grid"><input type=range></div>
+<br>
+<div class="grid zero"><input type=range></div>
+<br>
+<div class="grid"><input type=range style="place-self:normal"></div>
+<br>
+<div class="grid zero"><input type=range style="place-self:normal"></div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-input-range.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-input-range.html
new file mode 100644
index 0000000000..fb17f3a4a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-input-range.html
@@ -0,0 +1,58 @@
+<!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: align/justify-self on range INPUT items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+  <link rel="match" href="grid-self-alignment-stretch-input-range-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace;
+}
+
+input {
+  margin:0;
+  padding:0;
+  border:none;
+}
+
+.grid {
+  display: inline-grid;
+  grid: 80px / 300px;
+  place-items: stretch;
+  border:1px solid;
+}
+
+.zero { grid:0/0; }
+
+.none input { -webkit-appearance:none; }
+
+    </style>
+</head>
+<body>
+
+<div class="grid"><input type=range></div>
+<br>
+<div class="grid zero"><input type=range></div>
+<br>
+<div class="grid"><input type=range style="place-self:normal"></div>
+<br>
+<div class="grid zero"><input type=range style="place-self:normal"></div>
+<br>
+
+<div class="none">
+<div class="grid"><input type=range></div>
+<br>
+<div class="grid zero"><input type=range></div>
+<br>
+<div class="grid"><input type=range style="place-self:normal"></div>
+<br>
+<div class="grid zero"><input type=range style="place-self:normal"></div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-001.html
new file mode 100644
index 0000000000..ac851b2514
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-001.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="Grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-lr;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="150" data-expected-height="60"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-002.html
new file mode 100644
index 0000000000..d1640a5510
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-002.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-lr;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  margin-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  margin-right: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  margin-bottom: 20px;
+  margin-right: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10"  data-expected-height="90"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="130" data-expected-height="60"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="90"  data-expected-height="130" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-003.html
new file mode 100644
index 0000000000..6b9563bbdf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-003.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined border-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-lr;
+}
+.grid > div { border-style: solid; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  border-width: 0px 0px 10px 0px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  border-width: 0px 20px 0px 0px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+  border-width: 0px 0px 0px 0px;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  border-width: 0px 10px 20px 0px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="150" data-expected-height="60"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-004.html
new file mode 100644
index 0000000000..05332f1c9a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-004.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined padding-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-lr;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  padding-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  padding-right: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  padding-bottom: 20px;
+  padding-right: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="150" data-expected-height="60"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-005.html
new file mode 100644
index 0000000000..ce17538fe9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-005.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-lr;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="150" data-expected-height="40"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-006.html
new file mode 100644
index 0000000000..ab6282ab4d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-006.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-lr;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  margin-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  margin-right: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  margin-bottom: 20px;
+  margin-right: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60"  data-expected-height="90"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="130" data-expected-height="40"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="90"  data-expected-height="130" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-007.html
new file mode 100644
index 0000000000..f960feec88
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-007.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined border-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-lr;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.grid > div { border-style: solid; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  border-width: 0px 0px 10px 0px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  border-width: 0px 20px 0px 0px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+  border-width: 0px 0px 0px 0px;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  border-width: 0px 10px 20px 0px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="150" data-expected-height="40"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-008.html
new file mode 100644
index 0000000000..fae2519cf8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-008.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined padding-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-lr;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  padding-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  padding-right: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  padding-bottom: 20px;
+  padding-right: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="150" data-expected-height="40"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-009.html
new file mode 100644
index 0000000000..6fa5073311
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-009.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="Grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-lr;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="20"  data-expected-height="125" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="125" data-expected-width="125" data-expected-height="80"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="125" data-offset-y="0"   data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-010.html
new file mode 100644
index 0000000000..2ca7951bff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-010.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-lr;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  margin-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  margin-right: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  margin-bottom: 20px;
+  margin-right: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="20"  data-expected-height="110" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="120" data-expected-width="110" data-expected-height="80"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="130" data-offset-y="00"  data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="130" data-offset-y="120" data-expected-width="110" data-expected-height="110" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-011.html
new file mode 100644
index 0000000000..f15f0c59fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-011.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-lr;
+}
+.grid > div { border-style: solid; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  border-width: 0px 0px 10px 0px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  border-width: 0px 20px 0px 0px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+  border-width: 0px 0px 0px 0px;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  border-width: 0px 10px 20px 0px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="20"  data-expected-height="120" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="120" data-expected-width="130" data-expected-height="80"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="130" data-offset-y="0"   data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="130" data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-012.html
new file mode 100644
index 0000000000..e5077b26e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-012.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined padding-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-lr;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  padding-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  padding-right: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  padding-bottom: 20px;
+  padding-right: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="20"  data-expected-height="120" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="120" data-expected-width="130" data-expected-height="80"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="130" data-offset-y="0"   data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="130" data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-013.html
new file mode 100644
index 0000000000..a7790b60ef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-013.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-lr;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="80"  data-expected-height="125" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="125" data-expected-width="125" data-expected-height="20"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="125" data-offset-y="0"   data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-014.html
new file mode 100644
index 0000000000..5c7fd92cc1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-014.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-lr;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  margin-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  margin-right: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  margin-bottom: 20px;
+  margin-right: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="80"  data-expected-height="110" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="120" data-expected-width="110" data-expected-height="20"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="130" data-offset-y="0"   data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="130" data-offset-y="120" data-expected-width="110" data-expected-height="110" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-015.html
new file mode 100644
index 0000000000..9265d65728
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-015.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined border-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-lr;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.grid > div { border-style: solid; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  border-width: 0px 0px 10px 0px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  border-width: 0px 20px 0px 0px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+  border-width: 0px 0px 0px 0px;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  border-width: 0px 10px 20px 0px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="80"  data-expected-height="120" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="120" data-expected-width="130" data-expected-height="20"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="130" data-offset-y="0"   data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="130" data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-016.html
new file mode 100644
index 0000000000..46370e4dcc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-016.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined padding-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-lr;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  padding-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  padding-right: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  padding-bottom: 20px;
+  padding-right: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="80"  data-expected-height="120" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="120" data-expected-width="130" data-expected-height="20"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="130" data-offset-y="0"   data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="130" data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-001.html
new file mode 100644
index 0000000000..b41aeb73f5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-001.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="Grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-rl;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="150" data-expected-height="60"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-002.html
new file mode 100644
index 0000000000..36cec785e1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-002.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-rl;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  margin-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  margin-left: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  margin-bottom: 20px;
+  margin-left: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10"  data-expected-height="90"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="120" data-offset-y="100" data-expected-width="130" data-expected-height="60"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="10"  data-offset-y="100" data-expected-width="90"  data-expected-height="130" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-003.html
new file mode 100644
index 0000000000..c8e34e484b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-003.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined border-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-rl;
+}
+.grid > div { border-style: solid; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  border-width: 0px 0px 10px 0px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  border-width: 0px 0px 0px 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+  border-width: 0px 0px 0px 0px;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  border-width: 0px 0px 20px 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="150" data-expected-height="60"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-004.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-004.html
new file mode 100644
index 0000000000..d88a7300b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-004.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined padding-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-rl;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  padding-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  padding-left: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  padding-bottom: 20px;
+  padding-left: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="150" data-expected-height="60"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-005.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-005.html
new file mode 100644
index 0000000000..d38de47eff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-005.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-rl;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="190" data-offset-y="0"   data-expected-width="60"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="150" data-expected-height="40"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-006.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-006.html
new file mode 100644
index 0000000000..36aaff90f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-006.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-rl;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  margin-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  margin-right: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  margin-bottom: 20px;
+  margin-right: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="190" data-offset-y="0"   data-expected-width="60"  data-expected-height="90"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="130" data-expected-height="40"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="90"  data-expected-height="130" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-007.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-007.html
new file mode 100644
index 0000000000..d32631e7d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-007.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined border-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-rl;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.grid > div { border-style: solid; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  border-width: 0px 0px 10px 0px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  border-width: 0px 20px 0px 0px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+  border-width: 0px 0px 0px 0px;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  border-width: 0px 10px 20px 0px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="190" data-offset-y="0"   data-expected-width="60"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="150" data-expected-height="40"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-008.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-008.html
new file mode 100644
index 0000000000..f6616048dd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-008.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined padding-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  writing-mode: vertical-rl;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  padding-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  padding-right: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  padding-bottom: 20px;
+  padding-right: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="190" data-offset-y="0"   data-expected-width="60"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="150" data-expected-height="40"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-009.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-009.html
new file mode 100644
index 0000000000..1f852aba4e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-009.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="Grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-rl;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="20"  data-expected-height="125" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="80"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="105" data-offset-y="0"   data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-010.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-010.html
new file mode 100644
index 0000000000..e691767589
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-010.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-rl;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  margin-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  margin-left: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  margin-bottom: 20px;
+  margin-left: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="20"  data-expected-height="110" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="140" data-offset-y="120" data-expected-width="110" data-expected-height="80"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="100" data-offset-y="00"  data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="10"  data-offset-y="120" data-expected-width="110" data-expected-height="110" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-011.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-011.html
new file mode 100644
index 0000000000..86a02c6026
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-011.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-rl;
+}
+.grid > div { border-style: solid; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  border-width: 0px 0px 10px 0px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  border-width: 0px 0px 00px 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+  border-width: 0px 0px 0px 0px;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  border-width: 0px 0px 20px 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="20"  data-expected-height="120" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="120" data-expected-width="130" data-expected-height="80"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-012.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-012.html
new file mode 100644
index 0000000000..d99580eecc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-012.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined padding-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-rl;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  padding-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  padding-left: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  padding-bottom: 20px;
+  padding-left: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="20"  data-expected-height="120" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="120" data-expected-width="130" data-expected-height="80"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-013.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-013.html
new file mode 100644
index 0000000000..59b953a0af
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-013.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-rl;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="170" data-offset-y="0"   data-expected-width="80"  data-expected-height="125" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="20"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="45"  data-offset-y="0"   data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-014.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-014.html
new file mode 100644
index 0000000000..4da2cd6c98
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-014.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-rl;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  margin-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  margin-right: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  margin-bottom: 20px;
+  margin-right: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="170" data-offset-y="0"   data-expected-width="80"  data-expected-height="110" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="120" data-expected-width="110" data-expected-height="20"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="120" data-expected-width="110" data-expected-height="110" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-015.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-015.html
new file mode 100644
index 0000000000..86ed82f66e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-015.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined border-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-rl;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.grid > div { border-style: solid; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  border-width: 0px 0px 10px 0px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  border-width: 0px 20px 0px 0px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+  border-width: 0px 0px 0px 0px;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  border-width: 0px 10px 20px 0px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="170" data-offset-y="0"   data-expected-width="80"  data-expected-height="120" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="120" data-expected-width="130" data-expected-height="20"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-016.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-016.html
new file mode 100644
index 0000000000..57a25d1372
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-016.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined padding-box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+  writing-mode: vertical-rl;
+}
+.grid > div { writing-mode: horizontal-tb; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  padding-bottom: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  padding-right: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  padding-bottom: 20px;
+  padding-right: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="170" data-offset-y="0"   data-expected-width="80"  data-expected-height="120" class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="120" data-expected-width="130" data-expected-height="20"  class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment.html
new file mode 100644
index 0000000000..56ad9c6a12
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment.html
@@ -0,0 +1,249 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<meta name="assert" content="This test checks that the self-start/self-end alignment values are applied correctly in all writing-modes for inflow content.">
+<style>
+body {
+  line-height: 30px;
+}
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 20px;
+  grid-template-rows: 20px;
+  width: 20px;
+  height: 20px;
+  border: solid;
+  vertical-align: bottom;
+}
+.child {
+  background: green;
+  width: 10px;
+  height: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.child')">
+
+<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<br>
+<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: horizontal-tb; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<br>
+<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<br>
+<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-lr; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<br>
+<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: ltr;">
+  <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<br>
+<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
+  <div class="child" style="writing-mode: horizontal-tb; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-lr; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-lr; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=0></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-rl; direction: ltr; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-start; justify-self: self-start;" data-offset-x=10 data-offset-y=10></div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; direction: rtl;">
+  <div class="child" style="writing-mode: vertical-rl; direction: rtl; align-self: self-end; justify-self: self-end;" data-offset-x=0 data-offset-y=0></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html
new file mode 100644
index 0000000000..d6526d7995
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment and sizing cyclic dependency</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.inline-grid {
+  position: relative;
+  border: solid;
+  text-orientation: sideways;
+  font: 15px/1 Ahem;
+}
+
+.columns { grid-template-columns: 100px 100px; }
+.rows { grid-template-rows: 100px 100px; }
+
+.min-content-columns { grid-template-columns: min-content; }
+.max-content-columns { grid-template-columns: max-content; }
+.fit-content-columns { grid-template-columns: fit-content; }
+.min-content-rows { grid-template-rows: min-content; }
+.max-content-rows { grid-template-rows: max-content; }
+.fit-content-rows { grid-template-rows: fit-content; }
+
+.flex-columns     { grid-template-columns: 1fr; }
+.max-flex-columns { grid-template-columns: minmax(0px, 1fr); }
+.flex-rows        { grid-template-rows: 1fr; }
+.max-flex-rows    { grid-template-rows: minmax(0px, 1fr); }
+.auto-rows        { grid-template-rows: auto 100px; }
+
+.height25  { height: 25px; }
+.height50  { height: 50px; }
+.height200 { height: 200px; }
+.width25   { width: 25px; }
+.width50   { width: 50px; }
+.width200  { width: 200px; }
+
+.height200Percent { height: 200%; }
+.width200Percent  { width: 200%; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.inline-grid'); })">
+<!-- NOTE: previously this test was asserting some "cyclic" behaviour where an item would switch baseline alignment participation - this is no longer the case per spec. -->
+<div style="height: 125px">
+    <pre>auto-sized rows - items with relative height</pre>
+    <div class="inline-grid alignItemsBaseline columns">
+        <div class="firstRowFirstColumn height50"          data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50"></div>
+        <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="100"></div>
+        <div class="autoRowAutoColumnSpanning2 height25"   data-offset-x="0"   data-offset-y="50" data-expected-width="200" data-expected-height="25"></div>
+    </div>
+</div>
+
+<div style="height: 200px">
+    <pre>min-content-sized rows - items with relative height</pre>
+    <div class="inline-grid alignItemsBaseline columns min-content-rows">
+        <div class="firstRowFirstColumn"                   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="75">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+        <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="150"></div>
+        <div class="autoRowAutoColumnSpanning2 height25"   data-offset-x="0"   data-offset-y="75" data-expected-width="200" data-expected-height="25"></div>
+    </div>
+</div>
+
+<div style="height: 200px">
+    <pre>max-content-sized rows - items with relative height</pre>
+    <div class="inline-grid alignItemsBaseline columns max-content-rows">
+        <div class="firstRowFirstColumn"                   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="75">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+        <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="150"></div>
+        <div class="autoRowAutoColumnSpanning2 height25"   data-offset-x="0"   data-offset-y="75" data-expected-width="200" data-expected-height="25"></div>
+    </div>
+</div>
+
+<div style="height: 200px">
+    <pre>fit-content-sized rows - items with relative height</pre>
+    <div class="inline-grid alignItemsBaseline columns fit-content-rows">
+        <div class="firstRowFirstColumn"                   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="75">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+        <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="150"></div>
+        <div class="autoRowAutoColumnSpanning2 height25"   data-offset-x="0"   data-offset-y="75" data-expected-width="200" data-expected-height="25"></div>
+    </div>
+</div>
+
+<div style="height: 125px">
+    <pre>flexible-sized rows - items with relative height</pre>
+    <div class="inline-grid alignItemsBaseline columns flex-rows">
+        <div class="firstRowFirstColumn height50"          data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50"></div>
+        <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="100"></div>
+        <div class="autoRowAutoColumnSpanning2 height25"   data-offset-x="0"   data-offset-y="50" data-expected-width="200" data-expected-height="25"></div>
+    </div>
+</div>
+
+<div style="height: 125px">
+    <pre>flex max-function rows - items with relative height</pre>
+    <div class="inline-grid alignItemsBaseline columns max-flex-rows">
+        <div class="firstRowFirstColumn height50"          data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50"></div>
+        <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="100"></div>
+        <div class="autoRowAutoColumnSpanning2 height25"   data-offset-x="0"   data-offset-y="50" data-expected-width="200" data-expected-height="25"></div>
+    </div>
+</div>
+
+<div style="height: 250px">
+    <pre>auto-sized columns - items with relative width</pre>
+    <div class="inline-grid justifyItemsBaseline rows">
+        <div class="firstRowFirstColumn verticalRL width50"          data-offset-x="0"  data-offset-y="0"   data-expected-width="50"  data-expected-height="100"></div>
+        <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0"  data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowSpanning2AutoColumn verticalRL width25"  data-offset-x="50" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+    </div>
+</div>
+
+<div style="height: 250px">
+    <pre>min-content-sized columns - items with relative width</pre>
+    <div class="inline-grid justifyItemsBaseline rows min-content-columns">
+        <div class="firstRowFirstColumn verticalRL"                  data-offset-x="0"  data-offset-y="0"   data-expected-width="75"  data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+        <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0"  data-offset-y="100" data-expected-width="150" data-expected-height="100"></div>
+        <div class="firstRowSpanning2AutoColumn verticalRL width25"  data-offset-x="75" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+    </div>
+</div>
+
+<div style="height: 250px">
+    <pre>max-content-sized columns - items with relative width</pre>
+    <div class="inline-grid justifyItemsBaseline rows max-content-columns">
+        <div class="firstRowFirstColumn verticalRL"                  data-offset-x="0"  data-offset-y="0"   data-expected-width="75"  data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+        <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0"  data-offset-y="100" data-expected-width="150" data-expected-height="100"></div>
+        <div class="firstRowSpanning2AutoColumn verticalRL width25"  data-offset-x="75" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+    </div>
+</div>
+
+<div style="height: 250px">
+    <pre>fit-content-sized columns - items with relative width</pre>
+    <div class="inline-grid justifyItemsBaseline rows fit-content-columns">
+        <div class="firstRowFirstColumn verticalRL"                  data-offset-x="0"  data-offset-y="0"   data-expected-width="75"  data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+        <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0"  data-offset-y="100" data-expected-width="150" data-expected-height="100"></div>
+        <div class="firstRowSpanning2AutoColumn verticalRL width25"  data-offset-x="75" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+    </div>
+</div>
+
+<div style="height: 250px">
+    <pre>flexible-sized columns - items with relative width</pre>
+    <div class="inline-grid justifyItemsBaseline rows flex-columns">
+        <div class="firstRowFirstColumn verticalRL width50"          data-offset-x="0"  data-offset-y="0"   data-expected-width="50"  data-expected-height="100"></div>
+        <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0"  data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
+        <div class="firstRowSpanning2AutoColumn verticalRL width25"  data-offset-x="50" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+    </div>
+</div>
+
+<div style="height: 250px">
+    <pre>flex max-function columns - items with relative width<br>baseline is not applied initially, but orthogonal items in an auto-sized row force repeating the track sizing and height is not indefinite in that phase.</pre>
+    <!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
+    <div class="inline-grid justifyItemsBaseline auto-rows max-flex-columns">
+        <div class="firstRowFirstColumn verticalLR width50 height50"          data-offset-x="0"   data-offset-y="0"   data-expected-width="50"  data-expected-height="50"></div>
+        <div class="secondRowFirstColumn verticalLR width200Percent height50" data-offset-x="0"   data-offset-y="50"  data-expected-width="100" data-expected-height="50"></div>
+        <div class="firstRowSpanning2AutoColumn verticalLR width25"           data-offset-x="50"  data-offset-y="0"   data-expected-width="25"  data-expected-height="150"></div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html
new file mode 100644
index 0000000000..ad989b98a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html
@@ -0,0 +1,238 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment and sizing cyclic dependency</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.inline-grid {
+  position: relative;
+  border: solid;
+  text-orientation: sideways;
+  font: 15px/1 Ahem;
+}
+
+.columns { grid-template-columns: 100px 100px; }
+.rows { grid-template-rows: 100px 100px; }
+
+.min-content-columns { grid-template-columns: min-content; }
+.max-content-columns { grid-template-columns: max-content; }
+.fit-content-columns { grid-template-columns: fit-content; }
+.flex-columns        { grid-template-columns: 1fr; }
+.max-flex-columns    { grid-template-columns: minmax(0px, 1fr); }
+.auto-columns        { grid-template-columns: auto 100px; }
+
+.min-content-rows { grid-template-rows: min-content; }
+.max-content-rows { grid-template-rows: max-content; }
+.fit-content-rows { grid-template-rows: fit-content; }
+.flex-rows        { grid-template-rows: 1fr; }
+.max-flex-rows    { grid-template-rows: minmax(0px, 1fr); }
+.auto-rows        { grid-template-rows: auto 100px; }
+
+.height25  { height: 25px; }
+.height50  { height: 50px; }
+.height200 { height: 200px; }
+.width25   { width: 25px; }
+.width50   { width: 50px; }
+.width200  { width: 200px; }
+
+.bigFont { font-size: 50px; }
+.paddingLeft { padding-left: 25px; }
+.paddingBottom { padding-bottom: 25px; }
+.paddingRight { padding-right: 25px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.inline-grid'); })">
+
+<!-- NOTE: previously this test was asserting some "cyclic" behaviour where an item would switch baseline alignment participation - this is no longer the case per spec. -->
+<pre>auto-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
+<div class="inline-grid alignItemsBaseline columns height200">
+  <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0"   data-offset-y="95"   data-expected-width="100" data-expected-height="75">É</div>
+  <div class="firstRowSecondColumn verticalLR"           data-offset-x="100" data-offset-y="0"   data-expected-width="100" data-expected-height="135">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 height25"       data-offset-x="0"   data-offset-y="135" data-expected-width="200" data-expected-height="25"></div>
+</div>
+
+<pre>min-content-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
+<div class="inline-grid alignItemsBaseline columns min-content-rows">
+  <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0"   data-offset-y="55"  data-expected-width="100" data-expected-height="75">É</div>
+  <div class="firstRowSecondColumn verticalLR"           data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="95">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 height25"       data-offset-x="0"   data-offset-y="95" data-expected-width="200" data-expected-height="25"></div>
+</div>
+
+<pre>max-content-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
+<div class="inline-grid alignItemsBaseline columns max-content-rows">
+  <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0"   data-offset-y="55"   data-expected-width="100" data-expected-height="75">É</div>
+  <div class="firstRowSecondColumn verticalLR"           data-offset-x="100" data-offset-y="0"   data-expected-width="100" data-expected-height="95">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 height25"       data-offset-x="0"   data-offset-y="95" data-expected-width="200" data-expected-height="25"></div>
+</div>
+
+<pre>fit-content-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
+<div class="inline-grid alignItemsBaseline columns fit-content-rows">
+  <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0"   data-offset-y="55"   data-expected-width="100" data-expected-height="75">É</div>
+  <div class="firstRowSecondColumn verticalLR"           data-offset-x="100" data-offset-y="0"   data-expected-width="100" data-expected-height="95">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 height25"       data-offset-x="0"   data-offset-y="95" data-expected-width="200" data-expected-height="25"></div>
+</div>
+
+<pre>flex-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
+<div class="inline-grid alignItemsBaseline columns flex-rows">
+  <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0"   data-offset-y="55"   data-expected-width="100" data-expected-height="75">É</div>
+  <div class="firstRowSecondColumn verticalLR"           data-offset-x="100" data-offset-y="0"   data-expected-width="100" data-expected-height="95">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 height25"       data-offset-x="0"   data-offset-y="95" data-expected-width="200" data-expected-height="25"></div>
+</div>
+
+<pre>max-flex-sized rows - horizonal grid and verticalLR item - column-axis baseline<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre>
+<!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
+<div class="inline-grid alignItemsBaseline columns auto-rows">
+  <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0"   data-offset-y="55"   data-expected-width="100" data-expected-height="75">É</div>
+  <div class="firstRowSecondColumn verticalLR"           data-offset-x="100" data-offset-y="0"   data-expected-width="100" data-expected-height="95">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 height25"       data-offset-x="0"   data-offset-y="95" data-expected-width="200" data-expected-height="25"></div>
+</div>
+
+<pre>auto-sized columns - horizontal grid item - row-axis baseline</pre>
+<div class="inline-grid justifyItemsBaseline rows width200">
+  <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0"   data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="secondRowFirstColumn"                               data-offset-x="35"   data-offset-y="100" data-expected-width="175" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="firstRowSpanning2AutoColumn width25"                data-offset-x="175" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>min-content-sized columns - horizontal grid item - row-axis baseline</pre>
+<div class="inline-grid justifyItemsBaseline rows min-content-columns">
+  <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0"  data-offset-y="0"   data-expected-width="75" data-expected-height="100">É</div>
+  <div class="secondRowFirstColumn"                               data-offset-x="35"  data-offset-y="100" data-expected-width="95" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="firstRowSpanning2AutoColumn width25"                data-offset-x="95" data-offset-y="0"   data-expected-width="25" data-expected-height="200"></div>
+</div>
+
+<pre>max-content-sized columns - horizontal grid item - row-axis baseline</pre>
+<div class="inline-grid justifyItemsBaseline rows max-content-columns">
+  <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0"   data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="secondRowFirstColumn"                               data-offset-x="35"   data-offset-y="100" data-expected-width="390" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="firstRowSpanning2AutoColumn width25"                data-offset-x="425" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>fit-content-sized columns - horizontal grid item - row-axis baseline</pre>
+<div class="inline-grid justifyItemsBaseline rows fit-content-columns">
+  <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0"   data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="secondRowFirstColumn"                               data-offset-x="35"   data-offset-y="100" data-expected-width="390" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="firstRowSpanning2AutoColumn width25"                data-offset-x="425" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>flex-sized columns - horizontal grid item - row-axis baseline</pre>
+<div class="inline-grid justifyItemsBaseline rows flex-columns">
+  <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0"   data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="secondRowFirstColumn"                               data-offset-x="35"   data-offset-y="100" data-expected-width="390" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="firstRowSpanning2AutoColumn width25"                data-offset-x="425" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>max-flex-sized columns - horizontal grid item - row-axis baseline<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre>
+<!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
+<div class="inline-grid justifyItemsBaseline auto-rows max-flex-columns">
+  <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0"   data-offset-y="0"   data-expected-width="75"  data-expected-height="50">É</div>
+  <div class="secondRowFirstColumn verticalLR"                    data-offset-x="32"  data-offset-y="50"  data-expected-width="75"  data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="firstRowSpanning2AutoColumn width25"                data-offset-x="107" data-offset-y="0"   data-expected-width="25"  data-expected-height="150"></div>
+</div>
+
+<pre>auto-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
+<div class="inline-grid verticalLR alignItemsBaseline columns width200">
+  <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0"   data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="firstRowSecondColumn horizontalTB"       data-offset-x="35"   data-offset-y="100" data-expected-width="175" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"      data-offset-x="175" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>min-content-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
+<div class="inline-grid verticalLR alignItemsBaseline columns min-content-rows">
+  <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0"  data-offset-y="0"   data-expected-width="75" data-expected-height="100">É</div>
+  <div class="firstRowSecondColumn horizontalTB"       data-offset-x="35"  data-offset-y="100" data-expected-width="95" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"      data-offset-x="95" data-offset-y="0"   data-expected-width="25" data-expected-height="200"></div>
+</div>
+
+<pre>max-content-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
+<div class="inline-grid verticalLR alignItemsBaseline columns max-content-rows">
+  <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0"   data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="firstRowSecondColumn horizontalTB"       data-offset-x="35"   data-offset-y="100" data-expected-width="390" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"      data-offset-x="425" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>fit-content-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
+<div class="inline-grid verticalLR alignItemsBaseline columns fit-content-rows">
+  <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0"   data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="firstRowSecondColumn horizontalTB"       data-offset-x="35"   data-offset-y="100" data-expected-width="390" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"      data-offset-x="425" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>flex-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
+<div class="inline-grid verticalLR alignItemsBaseline columns flex-rows">
+  <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0"   data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="firstRowSecondColumn horizontalTB"       data-offset-x="35"   data-offset-y="100" data-expected-width="390" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"      data-offset-x="425" data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>max-flex-sized rows - verticalLR grid and horizontal item - column-axis baseline<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre>
+<!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
+<div class="inline-grid verticalLR alignItemsBaseline auto-columns max-flex-rows">
+  <div class="firstRowFirstColumn bigFont"        data-offset-x="0"   data-offset-y="0"   data-expected-width="50"  data-expected-height="50">É</div>
+  <div class="firstRowSecondColumn horizontalBT"  data-offset-x="7"  data-offset-y="50"   data-expected-width="75"  data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="82" data-offset-y="0"    data-expected-width="25"  data-expected-height="150"></div>
+</div>
+
+<pre>auto-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
+<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre>
+<div class="inline-grid verticalRL alignItemsBaseline columns width200">
+  <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="30" data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="firstRowSecondColumn horizontalTB"       data-offset-x="65"  data-offset-y="100" data-expected-width="135" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"      data-offset-x="40"   data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>min-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
+<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre>
+<div class="inline-grid verticalRL alignItemsBaseline columns min-content-rows">
+  <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" data-offset-y="0"   data-expected-width="75" data-expected-height="100">É</div>
+  <div class="firstRowSecondColumn horizontalTB"       data-offset-x="25" data-offset-y="100" data-expected-width="95" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"      data-offset-x="0"  data-offset-y="0"   data-expected-width="25" data-expected-height="200"></div>
+</div>
+
+<pre>max-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
+<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre>
+<div class="inline-grid verticalRL alignItemsBaseline columns max-content-rows">
+  <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" data-offset-y="0"   data-expected-width="75"  data-expected-height="100">É</div>
+  <div class="firstRowSecondColumn horizontalTB"       data-offset-x="25"  data-offset-y="100" data-expected-width="95" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"      data-offset-x="0"   data-offset-y="0"   data-expected-width="25"  data-expected-height="200"></div>
+</div>
+
+<pre>fit-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
+<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre>
+<div class="inline-grid verticalRL alignItemsBaseline auto-columns fit-content-rows">
+  <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" data-offset-y="0"   data-expected-width="75"  data-expected-height="50">É</div>
+  <div class="firstRowSecondColumn horizontalTB"       data-offset-x="25"  data-offset-y="50" data-expected-width="95" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"      data-offset-x="0"   data-offset-y="0"   data-expected-width="25"  data-expected-height="150"></div>
+</div>
+
+<pre>flex-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
+<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre>
+<div class="inline-grid verticalRL alignItemsBaseline auto-columns flex-rows">
+  <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" data-offset-y="0"   data-expected-width="75"  data-expected-height="50">É</div>
+  <div class="firstRowSecondColumn horizontalTB"       data-offset-x="25"  data-offset-y="50" data-expected-width="95" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"      data-offset-x="0"   data-offset-y="0"   data-expected-width="25"  data-expected-height="150"></div>
+</div>
+
+<pre>max-flex-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
+<pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre>
+<div class="inline-grid verticalRL alignItemsBaseline auto-columns max-flex-rows">
+  <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10"  data-offset-y="0"   data-expected-width="75"  data-expected-height="50">É</div>
+  <div class="firstRowSecondColumn horizontalTB"       data-offset-x="25"   data-offset-y="50"  data-expected-width="95" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
+  <div class="autoRowAutoColumnSpanning2 width25"      data-offset-x="0"    data-offset-y="0"   data-expected-width="25"  data-expected-height="150"></div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003.html b/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003.html
new file mode 100644
index 0000000000..3d688ad15f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment and sizing cyclic dependency</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="../../support/alignment.css">
+<!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  background: grey;
+  text-orientation: sideways;
+  font: 15px/1 Ahem;
+}
+.row { grid: minmax(0px, 1fr) / auto 50px 100px }
+.column { grid: auto 50px 100px / minmax(0px, 1fr); }
+.item1 {
+   font-size: 30px;
+   background: blue;
+}
+.item2 {
+  font-size: 20px;
+  background: red;
+}
+.item3 {
+  font-size: 80px;
+  background: green;
+}
+.height50 { height: 50px; }
+.relativeHeight { height: 50%; }
+.relativeWidth  { width: 50%; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<!-- NOTE: previously this test was asserting some "cyclic" behaviour where an item would switch baseline alignment participation - this is no longer the case per spec. -->
+<pre>flex row</pre>
+<div class="grid row alignItemsBaseline">
+  <div class="item1 verticalLR" data-offset-x="0"   data-offset-y="34" data-expected-width="30"  data-expected-height="30">É</div>
+  <div class="item2"            data-offset-x="30"  data-offset-y="48" data-expected-width="50"  data-expected-height="20">É</div>
+  <div class="item3"            data-offset-x="80" data-offset-y="0"  data-expected-width="100" data-expected-height="80">É</div>
+</div>
+
+<pre>flex row</pre>
+<div class="grid row alignItemsBaseline">
+  <div class="item1 relativeHeight" data-offset-x="0"   data-offset-y="56" data-expected-width="30"  data-expected-height="43">É</div>
+  <div class="item2"                data-offset-x="30"  data-offset-y="64" data-expected-width="50"  data-expected-height="20">É</div>
+  <div class="item3 verticalLR"     data-offset-x="80" data-offset-y="0"  data-expected-width="100" data-expected-height="80">É</div>
+</div>
+
+<pre>flex row</pre>
+<div class="grid row alignItemsBaseline">
+  <div class="item1 relativeHeight" data-offset-x="0"   data-offset-y="40" data-expected-width="30"  data-expected-height="40">É</div>
+  <div class="item2 verticalLR"     data-offset-x="30"  data-offset-y="44" data-expected-width="50"  data-expected-height="20">É</div>
+  <div class="item3"                data-offset-x="80" data-offset-y="0"  data-expected-width="100" data-expected-height="80">É</div>
+</div>
+
+<pre>flex column - all items share a baseline group</pre>
+<div class="grid column justifyItemsBaseline">
+  <div class="item1"            data-offset-x="16" data-offset-y="0"   data-expected-width="30" data-expected-height="30">É</div>
+  <div class="item2 verticalLR" data-offset-x="12" data-offset-y="30"  data-expected-width="20" data-expected-height="50">É</div>
+  <div class="item3 verticalLR" data-offset-x="0"  data-offset-y="80" data-expected-width="80" data-expected-height="100">É</div>
+</div>
+
+<pre>flex column - all items share a baseline group</pre>
+<div class="grid column justifyItemsBaseline">
+  <div class="item1 relativeWidth height50" data-offset-x="0" data-offset-y="0"   data-expected-width="40" data-expected-height="50">É</div>
+  <div class="item2 verticalLR"             data-offset-x="12" data-offset-y="50"  data-expected-width="20" data-expected-height="50">É</div>
+  <div class="item3 verticalLR"             data-offset-x="0"  data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div>
+</div>
+
+<pre>flex column - all items share a baseline group</pre>
+<div class="grid column justifyItemsBaseline">
+  <div class="item1 relativeWidth height50" data-offset-x="0" data-offset-y="0"   data-expected-width="40" data-expected-height="50">É</div>
+  <div class="item2"                        data-offset-x="16" data-offset-y="50"  data-expected-width="20" data-expected-height="50">É</div>
+  <div class="item3 verticalLR"             data-offset-x="0"  data-offset-y="100" data-expected-width="80" data-expected-height="100">É</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-001-ref.html
new file mode 100644
index 0000000000..6a02ae4796
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-001-ref.html
@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html>
+<style>
+body {
+    margin: 0;
+}
+.inline-flexbox {
+    display: inline-flex;
+    background-color: lightgrey;
+    margin-top: 5px;
+}
+.flexbox {
+    display: flex;
+    background-color: grey;
+    margin-top: 10px;
+}
+.empty {
+    border-style: solid;
+    border-width: 5px 0px 10px;
+    padding: 2px 0px 4px;
+    margin: 10px 0px 20px;
+}
+.column {
+    flex-flow: column;
+}
+.column-reverse {
+    flex-flow: column-reverse;
+}
+</style>
+
+<body style="position: relative">
+
+<!-- If any of the flex items on the flex container's first line participate
+in baseline alignment, the flex container's main-axis baseline is the baseline
+of those flex items. -->
+<div>
+before text
+<div class="inline-flexbox" style="height: 50px;">
+    <div style="align-self: flex-end">below</div>
+    <div style="align-self: baseline; margin-top: 15px">baseline</div>
+    <div style="align-self: flex-start">above</div>
+</div>
+after text
+</div>
+
+<!-- This grid has a baseline item, it's orthogonal but it still participates
+in baseline alignment. -->
+<div>
+before text
+<div class="inline-flexbox" style="height: 40px">
+    <div style="align-self: flex-end">below</div>
+    <div style="align-self: baseline; margin-top: 20px"></div>
+    <div style="align-self: flex-start">above</div>
+</div>
+after text
+</div>
+
+<div>
+before text
+<div class="inline-flexbox">
+    <h2>h2 baseline</h2>
+    <div>above</div>
+</div>
+after text
+</div>
+
+<div>
+before text
+<div class="inline-flexbox">
+    <div>baseline</div>
+    <h2>h2 below</h2>
+</div>
+after text
+</div>
+
+<!-- If the first flex item has an orthogonal baseline, use the synthesized
+baseline (bottom of the content box of the first item). -->
+<div>
+should align with the middle
+<div class="inline-flexbox" style="width: 40px; height: 40px">
+    <div style="writing-mode: vertical-rl; height: 20px; width: 40px; border-bottom: 1px solid black"></div>
+</div>
+of the grey box
+</div>
+
+<!-- If there are no flexitems, align to the bottom of the margin box. -->
+<div>
+should align below the bottom
+<div class="empty inline-flexbox" style="width: 30px; height: 30px">
+</div>
+of the black line
+</div>
+
+<!-- If the griditem has not a natural baseline, align to the bottom of the box. -->
+<div>
+should align with the bottom
+<div class="inline-flexbox" style="width: 40px; height: 40px;">
+    <div style="width: 20px; height: 20px; border: 5px solid; background: red; "></div>
+</div>
+of the red box
+</div>
+
+<!-- cross-axis (column) test cases. -->
+<div>
+before text
+<div class="inline-flexbox column">
+    <div>baseline</div>
+    <div>below</div>
+</div>
+after text
+</div>
+
+<!-- If the first flex item has an orthogonal baseline, use the synthesized
+baseline (bottom of the content box of the first item). -->
+<div>
+should align with the middle
+<div class="inline-flexbox column" style="width: 40px; height: 40px;">
+    <div style="writing-mode: vertical-rl; width: 40px; height: 20px; border-bottom: 1px solid black"></div>
+    <div style="writing-mode: vertical-rl; width: 40px; height: 19px"></div>
+</div>
+of the grey box
+</div>
+
+<!-- More tests on the right side of the page. -->
+<div style="position: absolute; top: 0; left: 400px; width: 360px">
+
+<!-- Ignore absolutely positioned flex items. -->
+<div>
+before text
+<div class="inline-flexbox">
+    <div style="position: absolute">absolute</div>
+    <div style="margin-top: 30px">baseline</div>
+</div>
+after text
+</div>
+
+<!-- We don't participate in baseline alignment if there's an auto margin. -->
+<div>
+before text
+<div class="inline-flexbox" style="height: 40px;">
+    <div>baseline</div>
+    <div style="align-self: baseline; margin-top: auto">below</div>
+</div>
+after text
+</div>
+
+<div>
+before text
+<div style="display: inline-block">
+<div class="inline-flexbox" style="height: 40px;">
+    <div>above</div>
+    <div style="align-self: baseline; margin-top: 10px">baseline</div>
+    <div>above</div>
+</div>
+after
+</div>
+text
+</div>
+
+<!-- The spec is a little unclear what should happen here. For now, align to
+the last line box. -->
+<div>
+before text
+<div style="display: inline-block">
+<div class="flexbox" style="height: 30px;">
+  baseline
+</div>
+</div>
+after text
+</div>
+
+<table style="background-color: lightgrey; margin-top: 5px">
+<tr style="height: 50px">
+  <td style="vertical-align: bottom">bottom</td>
+  <td style="vertical-align: baseline">baseline</td>
+  <td style="vertical-align: top">top</td>
+  <td style="vertical-align: baseline"><div class="flexbox">
+    <h2>h2 baseline</h2>
+    <div>above</div>
+  </div></td>
+</table>
+
+<!-- If a box contributing a baseline has a scrollbar, the box must be treated
+as being in its initial scroll position when computing the baseline. -->
+<div>
+before text
+<div id="flexbox-with-scrollbar" class="inline-flexbox" style="height: 65px; width: 150px">
+    <div id="flexitem-with-scrollbar" style="align-self: baseline; padding-top: 15px; height: 50px; overflow-y: scroll;">
+        The baseline is based on<br>
+        the non-scrolled position;<br>
+        this won't line up.
+    </div>
+</div>
+after text
+</div>
+
+</div>
+
+<script>
+document.getElementById("flexitem-with-scrollbar").scrollTop = 999;
+document.getElementById("flexbox-with-scrollbar").style.width = "auto";
+</script>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-002-ref.html
new file mode 100644
index 0000000000..43634e58c3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-002-ref.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<style>
+.flexbox {
+    display: flex;
+}
+.inline-flexbox {
+    display: inline-flex;
+}
+.flex-one {
+    flex: 1;
+}
+.inline-block { display: inline-block; }
+.flexbox, .inline-flexbox { background-color: lightgrey; }
+.border { border: 11px solid pink; }
+.padding { padding: 13px; }
+.margin { margin: 8px 0; }
+.flexbox > div {
+    min-width: 0;
+    min-height: 0;
+}
+</style>
+<div>
+before text
+<div class="border" style="display: inline-block; background-color: lightgrey">
+<div class="flexbox" style="height: 30px; margin-top: 7px; padding-top: 10px;">
+  baseline
+</div>
+</div>
+after text
+</div>
+
+<div>
+Should align
+<div class="inline-block border">
+  <div class="flexbox padding" style="width: 50px; height: 50px; background-color: pink">
+      <div class="flex-one" style="background-color: lightgrey"></div>
+  </div>
+</div>
+with the
+<div class="inline-block margin">
+  <div class="flexbox border" style="width: 50px; height: 50px; background-color: pink">
+      <div class="flex-one" style="background-color: lightgrey"></div>
+  </div>
+</div>
+bottom of
+<div class="inline-block padding" style="padding-left: 0; padding-right: 0">
+  <div class="flexbox margin border" style="width: 50px; height: 50px; background-color: pink">
+      <div class="flex-one" style="background-color: lightgrey;"></div>
+  </div>
+</div>
+the grey box.
+</div>
+
+<div>
+Should align with the
+<div class="inline-block">
+  <div class="flexbox" style="background-color: white">
+      <div class="flex-one border padding margin" style="background-color: lightgrey;"></div>
+  </div>
+</div>
+bottom of the pink box.
+</div>
+
+<div>
+Should align 8px
+<div class="inline-flexbox margin border" style="width: 30px; height: 30px;"></div>
+below the bottom
+<div class="inline-flexbox margin border padding"></div>
+of the pink box.
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-003-ref.html b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-003-ref.html
new file mode 100644
index 0000000000..446c42f1a2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-003-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<style>
+.flexbox {
+    display: flex;
+}
+.inline-flexbox {
+    display: inline-flex;
+}
+.flex-one {
+    flex: 1;
+}
+.inline-block { display: inline-block; }
+.flexbox, .inline-flexbox { background-color: lightgrey; }
+.border { border: 11px solid pink; }
+.padding { padding: 13px; }
+.margin { margin: 8px 0; }
+.flexbox > div {
+    min-width: 0;
+    min-height: 0;
+}
+</style>
+
+<div>
+Should align with the bottom
+<div class="inline-block border margin padding" style="background-color: pink">
+  <div class="flexbox border margin padding" style="width: 100px; height: 100px; background-color: pink">
+      <div style="width: 200px; overflow: scroll; background-color: lightgrey; margin: 10px 0px; border-top: 10px solid pink;"></div>
+  </div>
+</div>
+of the horizontal scrollbar.
+</div>
+
+<div>
+Should align 10px below the
+<div class="inline-block" style="background-color: pink">
+  <div class="flexbox" style="width: 100px; height: 100px; background-color: pink">
+      <div style="width: 200px; overflow: scroll; background-color: lightgrey; padding-bottom: 10px; margin: 10px 0px; border-top: 10px solid pink; border-bottom: 10px solid pink;"></div>
+  </div>
+</div>
+horizontal scrollbar, if one is visible.
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-align-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-align-001-ref.html
new file mode 100644
index 0000000000..7f8bb12cd6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-align-001-ref.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<title>
+  Reference for Grid Item (First) Baseline Block-Axis Alignment: auto-height grid, auto row, auto items
+</title>
+
+<style>
+  @import "/fonts/ahem.css";
+  .grid {
+    border: solid silver;
+    margin: 1em 2px;
+    font: 20px/1 Ahem;
+
+    display: inline-block;
+    vertical-align: top;
+  }
+  .grid > div {
+    border: black 10px;
+    border-style: solid none;
+    color: orange;
+  }
+  div + div {
+    font-size: 2em;
+  }
+  div + div + div {
+    font-size: 50%;
+  }
+
+  .ref {
+    position: relative;
+    width: 80px;
+    height: 96px;
+  }
+  .ref > div {
+    position: absolute;
+  }
+  .ref1 { top:   16px; }
+  .ref2 { left:  20px; }
+  .ref3 { top:   24px;
+          left:  60px; }
+  .ref4 { right:  0px;
+          top:    0px;
+          bottom: 0px;
+          width: 10px; }
+
+  .ref.content > div:not(.stripe) {
+    border-color: transparent;
+  }
+  .stripe {
+    width: 80px;
+    height: 76px;
+  }
+</style>
+
+<p>Test passes if each pair of boxes is identical.</p>
+
+<div class="grid self ref">
+  <div class="ref1">
+    p<br>
+    p<br>
+    p
+  </div>
+  <div class="ref2">
+    p
+  </div>
+  <div class="ref3">
+    p
+  </div>
+  <div class="ref4">
+    &nbsp;
+  </div>
+</div>
+
+<div class="grid self ref">
+  <div class="ref1">
+    p<br>
+    p<br>
+    p
+  </div>
+  <div class="ref2">
+    p
+  </div>
+  <div class="ref3">
+    p
+  </div>
+  <div class="ref4">
+    &nbsp;
+  </div>
+</div>
+
+<br>
+
+<div class="grid content ref">
+  <div class="ref1">
+    p<br>
+    p<br>
+    p
+  </div>
+  <div class="ref2">
+    p
+  </div>
+  <div class="ref3">
+    p
+  </div>
+  <div class="ref4">
+    &nbsp;
+  </div>
+  <div class="stripe">
+  </div>
+</div>
+
+
+<div class="grid content ref">
+  <div class="ref1">
+    p<br>
+    p<br>
+    p
+  </div>
+  <div class="ref2">
+    p
+  </div>
+  <div class="ref3">
+    p
+  </div>
+  <div class="ref4">
+    &nbsp;
+  </div>
+  <div class="stripe">
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-align-cycles-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-align-cycles-001-ref.html
new file mode 100644
index 0000000000..e8932cba9f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-align-cycles-001-ref.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>
+  CSS Grid Layout Test: Grid Item (First) Baseline Alignment Row Cyclic Sizing Exclusions Reference File
+</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .grid {
+    border: solid silver;
+    margin: 1em 0.25em;
+    display: inline-grid;
+    grid-template-columns: repeat(3, auto);
+    font: 20px/1 Ahem;
+    height: 5em;
+  }
+  .grid > div {
+    border: 1em aqua;
+    border-style: solid none;
+  }
+  .index {
+    padding: 1em 0;
+  }
+  .percent, .orthogonal {
+    height: 1em;
+  }
+
+  .self > div {
+    align-self: start;
+  }
+  .content > div {
+    align-content: start;
+  }
+  .self.ref > div {
+    align-self: start;
+  }
+  .content.ref > div {
+    align-content: start;
+  }
+</style>
+
+<p>Test passes if the upper set of boxes is identical to the lower set.
+
+<div class="grid self">
+  <div class="index">
+    X
+  </div>
+  <div class="percent">
+    X
+  </div>
+</div>
+
+<div class="grid self">
+  <div class="index">
+    X
+  </div>
+  <div class="orthogonal">
+    X
+  </div>
+</div>
+
+<div class="grid content">
+  <div class="index">
+    X
+  </div>
+  <div class="percent">
+    X
+  </div>
+</div>
+
+<div class="grid content">
+  <div class="index">
+    X
+  </div>
+  <div class="orthogonal">
+    X
+  </div>
+</div>
+
+<br>
+
+<div class="grid self ref">
+  <div class="index">
+    X
+  </div>
+  <div class="percent">
+    X
+  </div>
+</div>
+
+<div class="grid self ref">
+  <div class="index">
+    X
+  </div>
+  <div class="orthogonal">
+    X
+  </div>
+</div>
+
+<div class="grid content ref">
+  <div class="index">
+    X
+  </div>
+  <div class="percent">
+    X
+  </div>
+</div>
+
+<div class="grid content ref">
+  <div class="index">
+    X
+  </div>
+  <div class="orthogonal">
+    X
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-justify-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-justify-001-ref.html
new file mode 100644
index 0000000000..d4db58e090
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/references/grid-baseline-justify-001-ref.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<title>
+  Reference for Grid Item (First) Baseline Inline-Axis Alignment: auto-width grid, auto column, auto items
+</title>
+
+<style>
+  @import "/fonts/ahem.css";
+  .grid {
+    border: solid silver;
+    margin: 1em 2px;
+    font: 20px/1 Ahem;
+
+    display: inline-block;
+    vertical-align: top;
+  }
+  .grid > div {
+    border: black 10px;
+    border-style: none solid;
+    color: orange;
+    writing-mode: vertical-rl;
+  }
+  div + div {
+    font-size: 2em;
+  }
+  div + div + div {
+    font-size: 50%;
+  }
+
+  .ref {
+    position: relative;
+    width: 96px;
+    height: 80px;
+  }
+  .ref > div {
+    position: absolute;
+  }
+  .ref1 { right:  16px; }
+  .ref2 { top:    20px;
+          right:   0px; }
+  .ref3 { right:  24px;
+          top:    60px; }
+  .ref4 { bottom:  0px;
+          right:   0px;
+          left:    0px;
+          height: 10px; }
+
+  .ref.content > div:not(.stripe) {
+    border-color: transparent;
+  }
+  .stripe {
+    width: 76px;
+    height: 80px;
+  }
+</style>
+
+<p>Test passes if each pair of boxes is identical.</p>
+
+<div class="grid self ref">
+  <div class="ref1">
+    p<br>
+    p<br>
+    p
+  </div>
+  <div class="ref2">
+    p
+  </div>
+  <div class="ref3">
+    p
+  </div>
+  <div class="ref4">
+    &nbsp;
+  </div>
+</div>
+
+<div class="grid self ref">
+  <div class="ref1">
+    p<br>
+    p<br>
+    p
+  </div>
+  <div class="ref2">
+    p
+  </div>
+  <div class="ref3">
+    p
+  </div>
+  <div class="ref4">
+    &nbsp;
+  </div>
+</div>
+
+<br>
+
+<div class="grid content ref">
+  <div class="ref1">
+    p<br>
+    p<br>
+    p
+  </div>
+  <div class="ref2">
+    p
+  </div>
+  <div class="ref3">
+    p
+  </div>
+  <div class="ref4">
+    &nbsp;
+  </div>
+  <div class="stripe">
+  </div>
+</div>
+
+<div class="grid content ref">
+  <div class="ref1">
+    p<br>
+    p<br>
+    p
+  </div>
+  <div class="ref2">
+    p
+  </div>
+  <div class="ref3">
+    p
+  </div>
+  <div class="ref4">
+    &nbsp;
+  </div>
+  <div class="stripe">
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-001.html b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-001.html
new file mode 100644
index 0000000000..d7ab97b9ec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-001.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5713">
+<meta name="assert" content="If stretch alignment is applied to one axis the aspect-ratio of a replaced element is preserved.">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="display: grid; grid-template: 100px / 200px; width: 100px; height: 100px; background: red;">
+  <canvas width=10 height=10 style="background: green; align-self: stretch;"></canvas>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-002.html b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-002.html
new file mode 100644
index 0000000000..1a4e344dd0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-002.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5713">
+<meta name="assert" content="If stretch alignment is applied to one axis the aspect-ratio of a replaced element is preserved.">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="display: grid; grid-template: 200px / 100px; width: 100px; height: 100px; background: red;">
+  <canvas width=10 height=10 style="background: green; justify-self: stretch;"></canvas>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-003.tentative.html b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-003.tentative.html
new file mode 100644
index 0000000000..2c27480d5a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-003.tentative.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5713">
+<meta name="assert" content="If stretch alignment is applied to both axis the aspect-ratio of a replaced element is ignored.">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="display: grid; grid-template: 100px / 100px; width: 100px; height: 100px; background: red;">
+  <canvas width=10 height=20 style="background: green; align-self: stretch; justify-self: stretch;"></canvas>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-004.html b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-004.html
new file mode 100644
index 0000000000..437b379332
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-004.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5713">
+<meta name="assert" content="If stretch alignment is applied to both axis the aspect-ratio of a replaced element is ignored.">
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div style="display: grid; grid-template: 100px / 100px; width: 100px; height: 100px; background: red;">
+  <img src="support/25x50-green.png" width=25 height=50 style="background: green; align-self: stretch; justify-self: stretch; width: auto; height: auto;"></img>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-005.html b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-005.html
new file mode 100644
index 0000000000..b14c45d0c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-005.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5713">
+<meta name="assert" content="If stretch alignment is applied to both axis the aspect-ratio of a replaced element is ignored.">
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div style="display: grid; grid-template: 100px / 100px; width: 100px; height: 100px; background: red;">
+  <img src="support/25x50-green.png" width=25 height=50 style="background: green; align-self: stretch; justify-self: stretch; width: auto; height: auto; writing-mode: vertical-lr;"></img>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-006.html b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-006.html
new file mode 100644
index 0000000000..ed14e36057
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-006.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5713">
+<meta name="assert" content="If stretch alignment is applied to both axis the aspect-ratio of a replaced element is ignored, but not when auto margins are present.">
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div style="display: grid; grid-template: 100px / 500px; width: 100px; height: 100px; background: red;">
+  <img src="support/50x50-green.png" width=50 height=50 style="background: green; align-self: stretch; justify-self: stretch; width: auto; height: auto; margin-right: auto;"></img>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-007.html b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-007.html
new file mode 100644
index 0000000000..0c841c7654
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-007.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5713">
+<meta name="assert" content="If stretch alignment is applied to both axis the aspect-ratio of a replaced element is ignored, but not when auto margins are present.">
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div style="display: grid; grid-template: 500px / 100px; width: 100px; height: 100px; background: red;">
+  <img src="support/50x50-green.png" width=50 height=50 style="background: green; align-self: stretch; justify-self: stretch; width: auto; height: auto; margin-bottom: auto;"></img>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-008.html b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-008.html
new file mode 100644
index 0000000000..9227332851
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-008.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5713">
+<meta name="assert" content="Stretch alignment in one axis should apply aspect-ratio in the other">
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div style="display: grid; grid-template: 100px / 100px; width: 100px; height: 100px; background: red;">
+  <img src="support/50x50-green.png" width=50 height=50 style="background: green; justify-self: stretch; width: auto; height: auto;"></img>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-009.html b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-009.html
new file mode 100644
index 0000000000..ff721b8f19
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/replaced-alignment-with-aspect-ratio-009.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5713">
+<meta name="assert" content="Stretch alignment in one axis should apply aspect-ratio in the other">
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div style="display: grid; grid-template: 100px / 100px; width: 100px; height: 100px; background: red;">
+  <img src="support/50x50-green.png" width=50 height=50 style="background: green; align-self: stretch; width: auto; height: auto;"></img>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-001-ref.html
new file mode 100644
index 0000000000..c85fd77ef9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-001-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.area { display: inline-block; }
+.area:nth-child(1) { width: 60px;  }
+.area:nth-child(2) { width: 60px;  }
+.area:nth-child(3) { width: 75px;  }
+.area:nth-child(4) { width: 100px; }
+.verticalLR.area, .verticalRL.area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 60px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 60px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 75px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 100px; }
+.block { height: 125px; }
+.block.verticalLR, .block.verticalRL {
+   width: 125px;
+   height: auto;
+}
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+
+<br clear="all">
+
+<div class="block verticalLR"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block verticalLR"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block verticalRL"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block verticalRL"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-001.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-001.html
new file mode 100644
index 0000000000..2473bb5d4f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-001.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-001-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. The 'align-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the row-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.grid { grid: 125px / 60px 60px 75px 100px; }
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item extraBottomPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+
+<br clear="all">
+
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b-ref.html
new file mode 100644
index 0000000000..1b563f1f42
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b-ref.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 175px;
+   height: 300px;
+   font-family: Ahem;
+}
+.block1 > :nth-child(1) { font-size:24px; }
+.block1 > :nth-child(2) { font-size:32px; }
+.block2 > :nth-child(1) { font-size:48px; }
+.block2 > :nth-child(2) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area { display: inline-block; }
+.block1 > .area:nth-child(1) { height: 60px;  }
+.block1 > .area:nth-child(2) { height: 60px;  }
+.block2 > .area:nth-child(1) { height: 75px;  }
+.block2 > .area:nth-child(2) { height: 100px; }
+.block1 { float: left;  }
+.block2 { float: left;  }
+</style>
+
+<p>4x1 with orthogonal items, but opposite block-flow direction.</p>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left: 23px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item extraRightPadding">É</div></div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left: 23px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b.html
new file mode 100644
index 0000000000..7d9ebecb8c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-b.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-002-b-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. The 'justify-self' property (orthogonal to the shared context) aligns items in each group along the baseline-axis using the column-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 175px;
+   height: 300px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.column { grid-auto-flow: row; }
+.grid { grid: 60px 60px 75px 100px / 125px; }
+</style>
+
+<p>4x1 with orthogonal items, but opposite block-flow direction.</p>
+<div class="block grid contentStart itemsBaseline"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
+<div class="block grid contentStart itemsBaseline"><div class="item verticalLR extraLeftPadding">É</div><div class="item verticalLR extraRightPadding">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-ref.html
new file mode 100644
index 0000000000..8593ea1abc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002-ref.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 175px;
+   font-family: Ahem;
+}
+.block1 > :nth-child(1) { font-size:24px; }
+.block1 > :nth-child(2) { font-size:32px; }
+.block2 > :nth-child(1) { font-size:48px; }
+.block2 > :nth-child(2) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area { display: inline-block; }
+.block1 > .area:nth-child(1) { height: 60px;  }
+.block1 > .area:nth-child(2) { height: 60px;  }
+.block2 > .area:nth-child(1) { height: 75px;  }
+.block2 > .area:nth-child(2) { height: 100px; }
+.block1 { float: left;  }
+.block2 { float: left;  }
+</style>
+
+<p>1x4 with parallel items, but opposite block-flow direction.</p>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left: 73px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left: 73px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
+<div class="block verticalRL">
+  <div class="block1">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+  <div class="block2 verticalLR" style="margin-right: 73px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
+<div class="block verticalRL">
+  <div class="block1">
+    <div class="area"><div class="item extraRightPadding">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+  <div class="block2 verticalLR" style="margin-right: 73px;">
+    <div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002.html
new file mode 100644
index 0000000000..700fd26097
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-002.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-002-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. The 'align-self' property (orthogonal to the shared context) aligns items in each group along the baseline-axis using the row-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.grid { grid: 175px / 60px 60px 75px 100px; }
+</style>
+
+<p>1x4 with parallel items, but opposite block-flow direction.</p>
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item extraRightPadding">É</div><div class="item">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-003-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-003-ref.html
new file mode 100644
index 0000000000..cd097c1d48
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-003-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area:nth-child(1) { width: 70px;  }
+.area:nth-child(2) { width: 80px;  }
+.area:nth-child(3) { width: 100px;  }
+.area:nth-child(4) { width: 125px; }
+.area { display: inline-block; }
+.block.verticalLR > .area { float: left;  }
+.verticalLR > .area, .verticalRL > .area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 70px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 80px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 100px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 125px; }
+.block {
+   width: 375px;
+   height: 100px;
+}
+.block.verticalLR, .block.verticalRL {
+   width: 125px;
+   height: auto;
+}
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block"><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
+<div class="block"><div class="area verticalLR"><div class="item extraBottomPadding">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
+
+<br clear="all">
+
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item extraLeftPadding">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item ">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block verticalRL"><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block verticalRL"><div class="area horizontalTB"><div class="item extraRightPadding">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-003.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-003.html
new file mode 100644
index 0000000000..2372ac1931
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-003.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-003-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). All items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. The 'align-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the row-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.grid { grid: 100px / 70px 80px 100px 125px; }
+.block.verticalLR, .block.verticalRL {
+   width: 125px;
+}
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item verticalLR extraBottomPadding">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
+
+<br clear="all">
+
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB  extraLeftPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item horizontalTB  extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-004-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-004-ref.html
new file mode 100644
index 0000000000..d589acb374
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-004-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.area.verticalLR > .item { margin: 10px 6px 0px 12px; }
+.area.horizontalTB > .item { margin: 10px 6px 4px 0px; }
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area { display: inline-block; }
+.area:nth-child(1) { width: 60px;  }
+.area:nth-child(2) { width: 75px;  }
+.area:nth-child(3) { width: 75px;  }
+.area:nth-child(4) { width: 125px; }
+.verticalLR > .area, .verticalRL > .area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 60px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 75px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 75px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 125px; }
+.block { height: 125px; }
+.block.verticalLR, .block.verticalRL {
+   width: 150px;
+   height: auto;
+}
+</style>
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block"><div class="area"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
+<div class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area verticalLR"><div class="item extraTopPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area verticalLR top"><div class="item">É</div></div></div>
+
+<br clear="all">
+
+<div class="block verticalLR"><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block verticalLR"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area horizontalTB"><div class="item extraRightPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block verticalRL"><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block verticalRL"><div class="area"><div class="item extraRightPadding">É</div></div><div class="area horizontalTB"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-004.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-004.html
new file mode 100644
index 0000000000..c7f49bf24a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-004.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-004-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). All items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. The 'align-self' property (orthogonal to the shared context) aligns all the items along the baseline-axis using the row-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.grid { grid: 125px / 60px 75px 75px 125px; }
+.grid.verticalLR, .grid.verticalRL { grid-template-rows: 150px; }
+</style>
+
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item verticalLR">É</div><div class="item">É</div><div class="item verticalLR">É</div></div>
+<div class="block grid contentStart justifyItemsStart alignItemsBaseline"><div class="item extraBottomPadding">É</div><div class="item verticalLR  extraTopPadding">É</div><div class="item">É</div><div class="item verticalLR">É</div></div>
+
+<br clear="all">
+
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsStart alignItemsBaseline"><div class="item extraLeftPadding">É</div><div class="item horizontalTB extraRightPadding">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsStart alignItemsBaseline"><div class="item extraRightPadding">É</div><div class="item horizontalTB extraLeftPadding">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-005-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-005-ref.html
new file mode 100644
index 0000000000..75a366fc40
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-005-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.area { display: inline-block; }
+.area:nth-child(1) { width: 60px;  }
+.area:nth-child(2) { width: 60px;  }
+.area:nth-child(3) { width: 75px;  }
+.area:nth-child(4) { width: 100px; }
+.verticalLR.area, .verticalRL.area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 60px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 60px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 75px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 100px; }
+.block { height: 140px; }
+.block.verticalLR, .block.verticalRL {
+   width: 140px;
+   height: auto;
+}
+</style>
+
+<p>4x1 with orthogonal items.</p>
+<div class="block verticalLR"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block verticalLR"><div class="area"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+
+<br clear="all">
+
+<div style="direction: rtl;" class="block"><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div style="direction: rtl;" class="block"><div class="area"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-005.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-005.html
new file mode 100644
index 0000000000..3bfa2d2079
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-005.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-005-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context. All items share 'first-column' Baseline Context. The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.grid { grid: 60px 60px 75px 100px / 140px; }
+</style>
+
+<p>4x1 with orthogonal items.</p>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item verticalLR  extraLeftPadding">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
+<div class="block grid contentStart verticalLR justifyItemsBaseline alignItemsStart"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid contentStart verticalLR justifyItemsBaseline alignItemsStart"><div class="item horizontalTB extraBottomPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+
+<br clear="all">
+
+<div class="block grid contentStart verticalRL justifyItemsBaseline alignItemsStart"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid contentStart verticalRL justifyItemsBaseline alignItemsStart"><div class="item horizontalTB extraBottomPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-006-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-006-ref.html
new file mode 100644
index 0000000000..610b2ad0a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-006-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area { display: inline-block; }
+.block.verticalLR > .area { float: left; }
+.area:nth-child(1) { width: 65px;  }
+.area:nth-child(2) { width: 75px;  }
+.area:nth-child(3) { width: 100px;  }
+.area:nth-child(4) { width: 125px; }
+.verticalLR > .area, .verticalRL > .area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 65px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 75px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 100px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 125px; }
+.block { height: 100px; }
+.block.verticalLR, .block.verticalRL {
+   width: 100px;
+   height: auto;
+}
+</style>
+
+<p>4x1 with parallel items.</p>
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item extraRightPadding">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div></div>
+<div class="block"><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
+<div class="block"><div class="area verticalLR"><div class="item extraTopPadding">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div></div>
+<div class="block directionRTL"><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div></div>
+<div class="block directionRTL"><div class="area verticalRL"><div class="item extraBottomPadding">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-006.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-006.html
new file mode 100644
index 0000000000..34edced2b4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-006.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-006-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). No item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.grid { grid: 65px 75px 100px 125px / 100px; }
+</style>
+
+<p>4x1 with parallel items.</p>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item extraRightPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item extraTopPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item extraBottomPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-007-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-007-ref.html
new file mode 100644
index 0000000000..59a0e33959
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-007-ref.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   display: inline-block;
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.area.verticalLR > .item, .area.verticalRL > .item { margin: 10px 6px 0px 12px; }
+.area.horizontalTB > .item { margin: 10px 6px 4px 0px; }
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.area { display: inline-block; }
+.area:nth-child(1) { width: 65px;  }
+.area:nth-child(2) { width: 60px;  }
+.area:nth-child(3) { width: 100px; }
+.area:nth-child(4) { width: 100px; }
+.verticalLR > .area, .verticalRL > .area { width: auto; }
+.verticalLR > .area:nth-child(1), .verticalRL > .area:nth-child(1) { height: 65px; }
+.verticalLR > .area:nth-child(2), .verticalRL > .area:nth-child(2) { height: 60px; }
+.verticalLR > .area:nth-child(3), .verticalRL > .area:nth-child(3) { height: 100px; }
+.verticalLR > .area:nth-child(4), .verticalRL > .area:nth-child(4) { height: 100px; }
+.block { height: 125px; }
+.block.verticalLR, .block.verticalRL {
+   width: 150px;
+   height: auto;
+}
+</style>
+
+<p>4x1 with parallel and orthogonal items.</p>
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block verticalLR"><div class="area horizontalTB"><div class="item extraLeftPadding">É</div></div><div class="area"><div class="item extraRightPadding">É</div></div><div class="area horizontalTB"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block"><div class="area verticalLR"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block"><div class="area verticalLR"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item extraTopPadding">É</div></div><div class="area verticalLR"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+
+<br clear="all">
+
+<div class="block directionRTL"><div class="area verticalRL"><div class="item">É</div></div><div class="area"><div class="item">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
+<div class="block directionRTL"><div class="area verticalRL"><div class="item extraBottomPadding">É</div></div><div class="area"><div class="item extraTopPadding">É</div></div><div class="area verticalRL"><div class="item">É</div></div><div class="area"><div class="item">É</div></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-007.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-007.html
new file mode 100644
index 0000000000..e0966bb6e6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-007.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-007-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that items orthogonal to the baseline-axis will use a synthesized baseline (border-box 'under' edge). No item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. The 'justify-self' property (orthogonal to the shared context) aligns all items along the baseline-axis using the column-like baseline." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.grid { grid: 65px 60px 100px 100px / 150px; }
+.grid.verticalLR, .grid.verticalRL { grid-template-columns: 125px; }
+</style>
+
+<p>4x1 with parallel and orthogonal items.</p>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item verticalLR">É</div><div class="item">É</div><div class="item verticalLR">É</div></div>
+<div class="block grid contentStart justifyItemsBaseline alignItemsStart"><div class="item extraLeftPadding">É</div><div class="item verticalLR extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item verticalLR">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid verticalLR contentStart justifyItemsBaseline alignItemsStart"><div class="item extraBottomPadding">É</div><div class="item horizontalTB extraTopPadding">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
+
+<br clear="all">
+
+<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
+<div class="block grid verticalRL contentStart justifyItemsBaseline alignItemsStart"><div class="item extraBottomPadding">É</div><div class="item horizontalTB extraTopPadding">É</div><div class="item">É</div><div class="item horizontalTB">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-008-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-008-ref.html
new file mode 100644
index 0000000000..7876656c20
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-008-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+div {
+  float: left;
+  width: 200px;
+  height: 200px;
+  background: green;
+}
+</style>
+<div></div>
+<div style="margin-top: 100px"></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-008.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-008.html
new file mode 100644
index 0000000000..5398b7e9c1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-008.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1121761">
+<link rel="match" href="grid-self-baseline-008-ref.html">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<meta name="assert" content="Test baseline alignment with percentage track sizing functions and grid items being or containing replaced elements with aspect ratio and percentage sizes." />
+<style>
+.grid {
+  display: grid;
+  width: 400px;
+  grid-template-columns: 25% 25% 25% 25%;
+  line-height: 0;
+}
+.percent {
+  width: 100%;
+}
+canvas {
+  background: green;
+}
+</style>
+<div class="grid alignItemsBaseline">
+  <canvas width="100" height="200"></canvas>
+  <canvas width="200" height="400" class="percent"></canvas>
+  <div>
+    <canvas width="100" height="100" class="percent"></canvas>
+    <canvas width="100" height="100" class="percent"></canvas>
+  </div>
+  <div class="percent">
+    <canvas width="100" height="100" class="percent"></canvas>
+    <canvas width="100" height="100" class="percent"></canvas>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-001.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-001.html
new file mode 100644
index 0000000000..5b2ecaaab0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-001.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Column-Axis Self-Baseline alignment may change grid area height on a fixed grid.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  color: green;
+  grid-auto-columns: 50px;
+  align-items: baseline;
+  align-content: start;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+    <div style="top: 8px; left: 0px;">XX<br>XXXX<br>XX<br>XX X</div>
+    <div style="top: 0px; left: 50px" class="big">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn">XX XXXX XX</div>
+  <div class="firstRowSecondColumn big">X</div>
+  <div class="secondRowFirstColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-002.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-002.html
new file mode 100644
index 0000000000..fb4e3f1a4c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-002.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Column-Axis Self-Baseline alignment may change grid area height on fixed-sized grid and content-distribution.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  color: green;
+  grid-auto-columns: 50px;
+  align-items: baseline;
+  align-content: space-evenly;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 25px; left: 0px;">XX<br>XXXX<br>XX</div>
+  <div style="top: 73px; left: 0px;">XX X</div>
+  <div style="top: 17px; left: 50px" class="big">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn">XX XXXX XX</div>
+  <div class="firstRowSecondColumn big">X</div>
+  <div class="secondRowFirstColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-003.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-003.html
new file mode 100644
index 0000000000..c06394ad58
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-003.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Column-Axis Self-Baseline alignment may change grid area height on fixed-sized grid and empty items .">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  color: green;
+  grid-auto-columns: 50px;
+  align-items: baseline;
+  align-content: start;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  font: 20px/1 Ahem;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 0px; left: 0px; width: 40px; background: red; height: 40px;"></div>
+  <div style="top: 24px; left: 50px" class="big">X</div>
+  <div style="top: 44px; left: 0px;">XX X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn" style="background: green; width: 40px; height: 40px;"></div>
+  <div class="firstRowSecondColumn big">X</div>
+  <div class="secondRowFirstColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-004.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-004.html
new file mode 100644
index 0000000000..e877b81480
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-004.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Column-Axis Self-Baseline alignment may change grid area height on auto-sized grid.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: inline-grid;
+  color: green;
+  grid-auto-columns: 50px;
+  align-items: baseline;
+  align-content: start;
+  vertical-align: top;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 8px; left: 0px;">XX<br>XXXX<br>XX<br>XX X</div>
+  <div style="top: 0px; left: 50px" class="big">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn">XX XXXX XX</div>
+  <div class="firstRowSecondColumn big">X</div>
+  <div class="secondRowFirstColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-005.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-005.html
new file mode 100644
index 0000000000..21cc0b8ac2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-005.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Column-Axis Self-Baseline alignment may change grid area height on auto-sized grid and gutters.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: inline-grid;
+  color: green;
+  grid-auto-columns: 50px;
+  align-items: baseline;
+  grid-row-gap: 20px;
+  vertical-align: top;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 8px; left: 0px;">XX<br>XXXX<br>XX</div>
+  <div style="top: 58px; left: 0px;">XX X</div>
+  <div style="top: 0px; left: 50px" class="big">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn">XX XXXX XX</div>
+  <div class="firstRowSecondColumn big">X</div>
+  <div class="secondRowFirstColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-006.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-006.html
new file mode 100644
index 0000000000..ed3449babe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-006.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Column-Axis Self-Baseline alignment may change grid area height on auto-sized grid and empty items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: inline-grid;
+  font: 10px/1 Ahem;
+  color: green;
+  grid-auto-columns: 50px;
+  align-items: baseline;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 0px; left: 0px; width: 40px; background: red; height: 40px;"></div>
+  <div style="top: 24px; left: 50px" class="big">X</div>
+  <div style="top: 44px; left: 0px;">XX X</div>
+</div>
+<div class="grid"">
+  <div class="firstRowFirstColumn" style="background: green; width: 40px; height: 40px;"></div>
+  <div class="firstRowSecondColumn big">X</div>
+  <div class="secondRowFirstColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-007.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-007.html
new file mode 100644
index 0000000000..4b854119b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-007.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Row-Axis Self-Baseline alignment may change grid area width on fixed-sized grid.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  color: green;
+  grid-auto-rows: 50px;
+  justify-items: baseline;
+  justify-content: start;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 0px; left: 5px;">XXXX<br>XXXX</div>
+  <div style="top: 20px; left: 15px;">X</div>
+  <div style="top: 30px; left: 15px;">X X</div>
+  <div style="top: 50px; left: 0px" class="big">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn">XX XXXX XX</div>
+  <div class="secondRowFirstColumn big">X</div>
+  <div class="firstRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-008.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-008.html
new file mode 100644
index 0000000000..6eb65039e2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-008.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Row-Axis Self-Baseline alignment may change grid area width on fixed-sized grid and content-distribution.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  color: green;
+  grid-auto-rows: 50px;
+  justify-items: baseline;
+  justify-content: space-evenly;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 0px; left: 23px;">XXX<br>XXX</div>
+  <div style="top: 0px; left: 72px;">X</div>
+  <div style="top: 10px; left: 72px;">X</div>
+  <div style="top: 20px; left: 33px;">X</div>
+  <div style="top: 30px; left: 33px;">X</div>
+  <div style="top: 30px; left: 72px;">X</div>
+  <div style="top: 50px; left: 18px" class="big">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn">XX XXXX XX</div>
+  <div class="secondRowFirstColumn big">X</div>
+  <div class="firstRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-009.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-009.html
new file mode 100644
index 0000000000..a173d290ea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-009.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Row-Axis Self-Baseline alignment may change grid area width on fixed-sized grid and empty items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  color: green;
+  grid-auto-rows: 50px;
+  justify-items: baseline;
+  justify-content: start;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 0px; left: 10px; width: 40px; background: red; height: 40px;"></div>
+  <div style="top: 0px; left: 50px;">X</div>
+  <div style="top: 10px; left: 50px;">X</div>
+  <div style="top: 30px; left: 50px;">X</div>
+  <div style="top: 50px; left: 0px" class="big">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn" style="background: green; width: 40px; height: 40px;"></div>
+  <div class="secondRowFirstColumn big">X</div>
+  <div class="firstRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-010.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-010.html
new file mode 100644
index 0000000000..0c1c1dbb36
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-010.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Row-Axis Self-Baseline alignment may change grid area width on auto-sized grid.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: inline-grid;
+  color: green;
+  grid-auto-rows: 50px;
+  justify-items: baseline;
+  justify-content: start;
+}
+.grid > div { writing-mode: vertical-lr; }
+.big { font-size: 20px; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 0px; left: 5px;">XXXX<br>XXXX</div>
+  <div style="top: 20px; left: 15px;">X</div>
+  <div style="top: 30px; left: 15px;">X X</div>
+  <div style="top: 50px; left: 0px" class="big">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn">XX XXXX XX</div>
+  <div class="secondRowFirstColumn big">X</div>
+  <div class="firstRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-011.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-011.html
new file mode 100644
index 0000000000..dba173a439
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-011.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Row-Axis Self-Baseline alignment may change grid area width on auto-sized grid and gutters.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: inline-grid;
+  color: green;
+  grid-auto-rows: 50px;
+  justify-items: baseline;
+  grid-column-gap: 20px;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 0px; left: 5px;">XXX<br>XXX</div>
+  <div style="top: 0px; left: 55px;">X</div>
+  <div style="top: 10px; left: 55px;">X</div>
+  <div style="top: 20px; left: 15px;">X</div>
+  <div style="top: 30px; left: 15px;">X</div>
+  <div style="top: 30px; left: 55px;">X</div>
+  <div style="top: 50px; left: 0px" class="big">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn">XX XXXX XX</div>
+  <div class="secondRowFirstColumn big">X</div>
+  <div class="firstRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-012.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-012.html
new file mode 100644
index 0000000000..ff5903459b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-changes-grid-area-size-012.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Baseline alignment may change grid area width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Row-Axis Self-Baseline alignment may change grid area width on auto-sized grid and empty items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.block, .grid { font: 10px/1 Ahem; }
+.big { font-size: 20px; }
+.block {
+  position: absolute;
+  z-index: -1;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+.block > div {
+  position: absolute;
+  color: red;
+}
+.grid {
+  display: inline-grid;
+  color: green;
+  grid-auto-rows: 50px;
+  justify-items: baseline;
+  justify-content: start;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="block">
+  <div style="top: 0px; left: 10px; width: 40px; background: red; height: 40px;"></div>
+  <div style="top: 0px; left: 50px;">X</div>
+  <div style="top: 10px; left: 50px;">X</div>
+  <div style="top: 30px; left: 50px;">X</div>
+  <div style="top: 50px; left: 0px;">X</div>
+</div>
+<div class="grid">
+  <div class="firstRowFirstColumn" style="background: green; width: 40px; height: 40px;"></div>
+  <div class="secondRowFirstColumn big">X</div>
+  <div class="firstRowSecondColumn">XX X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-001-ref.html
new file mode 100644
index 0000000000..1b8130d7b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-001-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div class="item">
+<div class="block"><div class="item extraBottomPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-001.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-001.html
new file mode 100644
index 0000000000..556009dfde
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-001.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-horiz-001-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item extraBottomPadding">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-002-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-002-ref.html
new file mode 100644
index 0000000000..735ea55786
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-002-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+.item.verticalLR, .item.verticalRL { margin-bottom: 0px; }
+</style>
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block"><div class="item">É</div><div class="item verticalLR">É</div><div class="item">É</div><div class="item verticalLR">É</div></div>
+<div class="block"><div class="item extraBottomPadding">É</div><div class="item verticalLR extraTopPadding">É</div><div class="item">É</div><div class="item verticalLR">É</div></div>
+
+<br clear="all">
+
+<div class="block"><div class="item">É</div><div class="item verticalRL">É</div><div class="item">É</div><div class="item verticalRL">É</div></div>
+<div class="block"><div class="item extraBottomPadding">É</div><div class="item verticalRL extraTopPadding">É</div><div class="item">É</div><div class="item verticalRL">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-002.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-002.html
new file mode 100644
index 0000000000..c196cd35c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-002.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-horiz-002-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'align-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item extraBottomPadding">É</div>
+    <div class="item verticalLR extraTopPadding">É</div>
+    <div class="item">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+
+<br clear="all">
+
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item">É</div>
+    <div class="item verticalRL">É</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item extraBottomPadding">É</div>
+    <div class="item verticalRL extraTopPadding">É</div>
+    <div class="item">É</div>
+    <div class="item verticalRL">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-003-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-003-ref.html
new file mode 100644
index 0000000000..fd966d16a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-003-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 375px;
+   height: 100px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+.item.verticalLR, .item.verticalRL { margin-bottom: 0px; }
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
+<div class="block" ><div class="item verticalLR extraTopPadding">É</div><div class="item verticalLR">É</div><div class="item verticalLR extraBottomPadding">É</div><div class="item verticalLR">É</div></div>
+<div class="block"><div class="item verticalRL">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
+<div class="block" ><div class="item verticalRL extraTopPadding">É</div><div class="item verticalRL">É</div><div class="item verticalRL extraBottomPadding">É</div><div class="item verticalRL">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-003.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-003.html
new file mode 100644
index 0000000000..287cb80fd5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-003.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-horiz-003-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Orthogonal items don't participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, neither 'aling-self' or 'justify-self' apply." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 375px;
+   height: 100px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item verticalLR extraTopPadding">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR extraBottomPadding">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+</div>
+<div class="block grid row contentStart itemsBaseline">
+    <div class="item verticalRL extraTopPadding">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL extraBottomPadding">É</div>
+    <div class="item verticalRL">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-004-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-004-ref.html
new file mode 100644
index 0000000000..be610d4f7f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-004-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 150px;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraRightPadding { padding-right: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.item { display: inline; }
+.left { vertical-align: bottom; }
+</style>
+
+<p>4x1 with parallel items.</p>
+<div class="block verticalLR"><div class="item horizontalTB left">É</div><div class="item horizontalTB left">É</div><div class="item horizontalTB left">É</div><div class="item horizontalTB left">É</div></div>
+<div class="block verticalLR"><div class="item horizontalTB extraRightPadding left">É</div><div class="item horizontalTB left">É</div><div class="item horizontalTB extraLeftPadding left">É</div><div class="item horizontalTB left">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-004.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-004.html
new file mode 100644
index 0000000000..673c9ff208
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-004.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-horiz-004-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. All the items are orthogonal to the column-axis, so they don't participate in the column-like Baseline Context; since no items shares row-like Baseline context, neither 'justify-self' or 'align-self' should apply." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 150px;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraRightPadding { padding-right: 30px; }
+.extraLeftPadding { padding-left: 30px; }
+.column { grid-auto-flow: row; }
+</style>
+
+<p>4x1 with parallel items.</p>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item extraRightPadding">É</div>
+    <div class="item">É</div>
+    <div class="item extraLeftPadding">É</div>
+    <div class="item">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005-ref.html
new file mode 100644
index 0000000000..c38b6c7611
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   position: relative;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.inline { display: inline-block; }
+.item { display: inline-block; }
+.item.horizontalTB:not(.bottom) { margin-left: 0px; }
+.bottom { vertical-align: bottom; }
+</style>
+
+<p>4x1 with parallel and orthogonal items.</p>
+<div class="block verticalLR"><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div>
+<div class="block verticalLR"><div class="item horizontalTB extraRightPadding">É</div><div class="item extraLeftPadding">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div>
+<div class="block verticalRL"><div class="item horizontalTB bottom">É</div><div class="item">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div>
+<div class="block verticalRL"><div class="item horizontalTB bottom extraRightPadding">É</div><div class="item extraLeftPadding">É</div><div class="item bottom horizontalTB">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005.html
new file mode 100644
index 0000000000..f816e893ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-005.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-horiz-005-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with parallel and orthogonal items.</p>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item extraRightPadding">É</div>
+    <div class="item verticalLR extraLeftPadding">É</div>
+    <div class="item">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item">É</div>
+    <div class="item verticalRL">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item extraRightPadding">É</div>
+    <div class="item verticalRL extraLeftPadding">É</div>
+    <div class="item">É</div>
+    <div class="item verticalRL">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006-ref.html
new file mode 100644
index 0000000000..6053b38a6f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>4x1 with orthogonal items.</p>
+<div class="block verticalLR"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block verticalLR"><div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block verticalRL"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block verticalRL"><div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006.html
new file mode 100644
index 0000000000..c034040b5f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-006.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-horiz-006-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with orthogonal items.</p>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalLR extraLeftPadding">É</div>
+    <div class="item verticalLR extraRightPadding ">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalRL extraLeftPadding">É</div>
+    <div class="item verticalRL extraRightPadding ">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007-ref.html
new file mode 100644
index 0000000000..cba725f425
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 200px;
+   height: 300px;
+   font-family: Ahem;
+}
+.block1 > :nth-child(1) { font-size:24px; }
+.block1 > :nth-child(2) { font-size:32px; }
+.block2 > :nth-child(1) { font-size:48px; }
+.block2 > :nth-child(2) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+.block1, .block2 { float: left; }
+</style>
+
+<p>4x1 with orthogonal items, but opposite block-flow direction.</p>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+  <div class="block2 verticalRL">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="item extraRightPadding">É</div><div class="item extraLeftPadding">É</div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left: 10px;">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007.html
new file mode 100644
index 0000000000..6018514242
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-horiz-007.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (horizontal)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-horiz-007-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. We have 2 baseline-sharing groups. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 200px;
+   height: 300px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with orthogonal items, but opposite block-flow direction.</p>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+</div>
+<div class="block grid column contentStart itemsBaseline">
+    <div class="item verticalLR extraRightPadding">É</div>
+    <div class="item verticalLR extraLeftPadding">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-001-ref.html
new file mode 100644
index 0000000000..cf19544be8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-001-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block verticalLR"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block verticalLR"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-001.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-001.html
new file mode 100644
index 0000000000..801474df57
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-001.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-lr-001-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item extraLeftPadding">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-002-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-002-ref.html
new file mode 100644
index 0000000000..9a7a53969d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-002-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+.item.horizontalTB { margin-left: 0px; }
+</style>
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block verticalLR"><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div>
+<div class="block verticalLR"><div class="item horizontalTB extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-002.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-002.html
new file mode 100644
index 0000000000..6dd235a7b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-002.html
@@ -0,0 +1,54 @@
+ <!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-lr-002-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item horizontalTB">É</div>
+    <div class="item">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item">É</div>
+</div>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item horizontalTB extraLeftPadding">É</div>
+    <div class="item extraRightPadding">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-003-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-003-ref.html
new file mode 100644
index 0000000000..795926615f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-003-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 150px;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { float: left; }
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block verticalLR"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+<div class="block verticalLR"><div class="item horizontalTB extraLeftPadding">É</div><div class="item horizontalTB extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-003.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-003.html
new file mode 100644
index 0000000000..18f581620d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-003.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-lr-003-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. All the items are orthogonal to the row-axis, so they don't participate in the row-like Baseline Context; since no items shares column-like Baseline context, neither 'justify-self' or 'align-self' should apply." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 150px;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item horizontalTB extraLeftPadding">É</div>
+    <div class="item horizontalTB extraRightPadding">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-004-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-004-ref.html
new file mode 100644
index 0000000000..1ce8267ee7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-004-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   height: 100px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block"><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
+<div class="block"><div class="item verticalLR extraTopPadding">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div><div class="item verticalLR">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-004.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-004.html
new file mode 100644
index 0000000000..1f2e3860b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-004.html
@@ -0,0 +1,54 @@
+ <!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-lr-004-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Orthogonal items don't participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, neither 'aling-self' or 'justify-self' apply." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   height: 100px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block grid column verticalLR contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
+<div class="block grid column verticalLR contentStart itemsBaseline">
+    <div class="item extraTopPadding">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-005-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-005-ref.html
new file mode 100644
index 0000000000..fb68579d9a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-005-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+.item.verticalLR, .item.verticalRL { margin: 10px 6px 0px 12px; }
+.item.horizontalTB  { margin: 10px 6px 4px 0px; }
+</style>
+
+<p>4x1 with parallel and orthogonal items.</p>
+<div class="block"><div class="item verticalLR">É</div><div class="item">É</div><div class="item verticalLR">É</div><div class="item">É</div></div>
+<div class="block"><div class="item verticalLR extraTopPadding">É</div><div class="item extraBottomPadding">É</div><div class="item verticalLR">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-005.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-005.html
new file mode 100644
index 0000000000..a27cb67898
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-005.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-lr-005-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with parallel and orthogonal items.</p>
+<div class="block grid column verticalLR contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
+<div class="block grid column verticalLR contentStart itemsBaseline">
+    <div class="item extraTopPadding">É</div>
+    <div class="item horizontalTB extraBottomPadding">É</div>
+    <div class="item">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-006-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-006-ref.html
new file mode 100644
index 0000000000..51c5f77da3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-006-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>4x1 with orthogonal items.</p>
+<div class="block"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block"><div class="item extraBottomPadding">É</div><div class="item extraTopPadding">É</div><div class="item">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-006.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-006.html
new file mode 100644
index 0000000000..654c17cd9e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-006.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-lr-006-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with orthogonal items.</p>
+<div class="block grid column verticalLR contentStart itemsBaseline">
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
+<div class="block grid column verticalLR contentStart itemsBaseline">
+    <div class="item horizontalTB extraBottomPadding">É</div>
+    <div class="item horizontalTB extraTopPadding">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007-ref.html
new file mode 100644
index 0000000000..6f5641448d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 200px;
+   font-family: Ahem;
+}
+.block1 > :nth-child(1) { font-size:24px; }
+.block1 > :nth-child(2) { font-size:32px; }
+.block2 > :nth-child(1) { font-size:48px; }
+.block2 > :nth-child(2) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+.block1, .block2 { float: left; }
+</style>
+
+<p>1x4 with parallel items, but opposite block-flow direction.</p>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+  <div class="block2 verticalRL">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
+<div class="block verticalLR">
+  <div class="block1">
+    <div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div>
+  </div>
+  <div class="block2 verticalRL" style="margin-left:15.5px;">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007.html
new file mode 100644
index 0000000000..ae7b6bf36e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-lr-007.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-lr)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-lr-007-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'align-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 200px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel items, but opposite block-flow direction.</p>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+</div>
+<div class="block grid row verticalLR contentStart itemsBaseline">
+    <div class="item extraLeftPadding">É</div>
+    <div class="item extraRightPadding">É</div>
+    <div class="item verticalRL">É</div>
+    <div class="item verticalRL">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-001-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-001-ref.html
new file mode 100644
index 0000000000..02d3feb126
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-001-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block verticalRL"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block verticalRL"><div class="item extraLeftPadding">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-001.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-001.html
new file mode 100644
index 0000000000..af7ca16d63
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-001.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-rl-001-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel items.</p>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item extraLeftPadding">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-002-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-002-ref.html
new file mode 100644
index 0000000000..ef6b45c9c9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-002-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+.item.horizontalTB { margin-left: 0px; }
+</style>
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block verticalRL"><div class="item horizontalTB">É</div><div class="item">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div>
+<div class="block verticalRL"><div class="item horizontalTB extraLeftPadding">É</div><div class="item extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-002.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-002.html
new file mode 100644
index 0000000000..9aa00a7114
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-002.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-rl-002-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context. No item shares any column-like Baseline Context. Only the parallel items participate in baseline alignment in the row-like Baseline Context; since no item shares column-like Baseline Context, only 'aling-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel and orthogonal items.</p>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item horizontalTB">É</div>
+    <div class="item">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item">É</div>
+</div>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item horizontalTB extraLeftPadding">É</div>
+    <div class="item extraRightPadding">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-003-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-003-ref.html
new file mode 100644
index 0000000000..b72fc8817a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-003-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 150px;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block verticalRL"><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
+<div class="block verticalRL"><div class="item horizontalTB extraLeftPadding">É</div><div class="item horizontalTB extraRightPadding">É</div><div class="item horizontalTB">É</div><div class="item horizontalTB">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-003.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-003.html
new file mode 100644
index 0000000000..2ae2f4fba6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-003.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-rl-003-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. All the items are orthogonal to the row-axis, so they don't participate in the row-like Baseline Context; since no items shares column-like Baseline context, neither 'justify-self' or 'align-self' should apply." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 150px;
+   height: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with orthogonal items.</p>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item horizontalTB extraLeftPadding">É</div>
+    <div class="item horizontalTB extraRightPadding">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-004-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-004-ref.html
new file mode 100644
index 0000000000..bab3592266
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-004-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   height: 100px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>4x1 with parallel items.</p>
+<div class="block directionRTL"><div class="item verticalRL">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
+<div class="block directionRTL"><div class="item verticalRL extraBottomPadding">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div><div class="item verticalRL">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-004.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-004.html
new file mode 100644
index 0000000000..d2f08642fc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-004.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-rl-004-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Orthogonal items don't participate in baseline alignment in the column-like baseline; since no item shares row-like Baseline Context, neither 'aling-self' or 'justify-self' apply." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   height: 100px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraBottomPadding { padding-bottom: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>4x1 with parallel items.</p>
+<div class="block grid column verticalRL contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
+<div class="block grid column verticalRL contentStart itemsBaseline">
+    <div class="item extraBottomPadding">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-005-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-005-ref.html
new file mode 100644
index 0000000000..da72a5f017
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-005-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+.item.verticalRL { margin-bottom: 0px; }
+</style>
+
+<p>4x1 with parallel and orthogonal items.</p>
+<div class="block directionRTL"><div class="item verticalRL">É</div><div class="item">É</div><div class="item verticalRL">É</div><div class="item">É</div></div>
+<div class="block directionRTL"><div class="item verticalRL extraTopPadding">É</div><div class="item extraBottomPadding">É</div><div class="item verticalRL">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-005.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-005.html
new file mode 100644
index 0000000000..0d40ce288d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-005.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-rl-005-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Only the parallel items participate in baseline alignment in the column-like Baseline Context; since no item shares row-like Baseline Context, only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with parallel and orthogonal items.</p>
+<div class="block grid column verticalRL contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
+<div class="block grid column verticalRL contentStart itemsBaseline">
+    <div class="item extraTopPadding">É</div>
+    <div class="item horizontalTB extraBottomPadding">É</div>
+    <div class="item">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-006-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-006-ref.html
new file mode 100644
index 0000000000..4011c69142
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-006-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.item { display: inline-block; }
+</style>
+
+<p>4x1 with orthogonal items.</p>
+<div class="block directionRTL"><div class="item">É</div><div class="item">É</div><div class="item">É</div><div class="item">É</div></div>
+<div class="block directionRTL"><div class="item extraBottomPadding">É</div><div class="item extraTopPadding">É</div><div class="item">É</div><div class="item">É</div></div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-006.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-006.html
new file mode 100644
index 0000000000..40f1e0796e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-006.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-rl-006-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that no item shares any row-like Baseline Context and all items share 'first-column' Baseline Context. Items participate in both, column and row baseline, but since they only share a column-like Baseline Context only 'justify-self' (row baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 30px; }
+.extraBottomPadding { padding-bottom: 30px; }
+.column { grid-auto-flow: row }
+</style>
+
+<p>4x1 with orthogonal items.</p>
+<div class="block grid column verticalRL contentStart itemsBaseline">
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
+<div class="block grid column verticalRL contentStart itemsBaseline">
+    <div class="item horizontalTB extraBottomPadding">É</div>
+    <div class="item horizontalTB extraTopPadding">É</div>
+    <div class="item horizontalTB">É</div>
+    <div class="item horizontalTB">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007-ref.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007-ref.html
new file mode 100644
index 0000000000..30658b8cc7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007-ref.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 200px;
+   font-family: Ahem;
+}
+.block1 > :nth-child(1) { font-size:24px; }
+.block1 > :nth-child(2) { font-size:32px; }
+.block2 > :nth-child(1) { font-size:48px; }
+.block2 > :nth-child(2) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.item { display: inline-block; }
+.block1, .block2 { float: left; }
+</style>
+
+<p>1x4 with parallel items, but opposite block-flow direction.</p>
+<div class="block verticalRL">
+  <div class="block1">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+  <div class="block2 verticalLR">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
+<div class="block verticalRL">
+  <div class="block1">
+    <div class="item extraLeftPadding">É</div><div class="item extraRightPadding">É</div>
+  </div>
+  <div class="block2 verticalLR" style="margin-right: 16px;">
+    <div class="item">É</div><div class="item">É</div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007.html b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007.html
new file mode 100644
index 0000000000..49bab61ca0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/self-baseline/grid-self-baseline-vertical-rl-007.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: baseline context and self alignment (vertical-rl)</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-items-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=412410">
+<link rel="match" href="grid-self-baseline-vertical-rl-007-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that all items share 'first-row' Baseline Context and no item shares any column-like Baseline Context. We have 2 baseline-sharing groups. Items participate in both, column and row baseline, but since they only share a row-like Baseline Context only 'align-self' (column baseline-axis) should apply. The Baseline Alignment may increase size contribution of some items." />
+
+<style>
+body { margin: 0; }
+.block {
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 200px;
+   font-family: Ahem;
+}
+.block > :nth-child(1) { font-size:24px; }
+.block > :nth-child(2) { font-size:32px; }
+.block > :nth-child(3) { font-size:48px; }
+.block > :nth-child(4) { font-size:64px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 30px; }
+.extraRightPadding { padding-right: 30px; }
+.row { grid-auto-flow: column; }
+</style>
+
+<p>1x4 with parallel items, but opposite block-flow direction.</p>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item">É</div>
+    <div class="item">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+</div>
+<div class="block grid row verticalRL contentStart itemsBaseline">
+    <div class="item extraLeftPadding">É</div>
+    <div class="item extraRightPadding">É</div>
+    <div class="item verticalLR">É</div>
+    <div class="item verticalLR">É</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/alignment/support/100x100-green.png b/testing/web-platform/tests/css/css-grid/alignment/support/100x100-green.png
new file mode 100644
index 0000000000..25b76c3c6f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/support/100x100-green.png
diff --git a/testing/web-platform/tests/css/css-grid/alignment/support/25x50-green.png b/testing/web-platform/tests/css/css-grid/alignment/support/25x50-green.png
new file mode 100644
index 0000000000..6ab02fce0f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/support/25x50-green.png
diff --git a/testing/web-platform/tests/css/css-grid/alignment/support/50x50-green.png b/testing/web-platform/tests/css/css-grid/alignment/support/50x50-green.png
new file mode 100644
index 0000000000..6c1406b7df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/support/50x50-green.png
diff --git a/testing/web-platform/tests/css/css-grid/alignment/support/style-change.js b/testing/web-platform/tests/css/css-grid/alignment/support/style-change.js
new file mode 100644
index 0000000000..766d140d2b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/alignment/support/style-change.js
@@ -0,0 +1,14 @@
+function evaluateStyleChange(element, phase, expectedProperty, expectedResult) {
+    element.className += " " + phase;
+    element.setAttribute(expectedProperty, expectedResult);
+    checkLayout("." + phase, false);
+}
+function evaluateStyleChangeMultiple(phase, expectedResult) {
+    for (var item in expectedResult) {
+        var element = document.getElementById(item);
+        element.className += " " + phase;
+        for (var key in expectedResult[item])
+            element.setAttribute(key, expectedResult[item][key]);
+    }
+    checkLayout("." + phase, false);
+}
diff --git a/testing/web-platform/tests/css/css-grid/animation/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-grid/animation/WEB_FEATURES.yml
new file mode 100644
index 0000000000..169b731925
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/WEB_FEATURES.yml
@@ -0,0 +1,3 @@
+features:
+- name: grid-animation
+  files: "**"
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-no-interpolation.html b/testing/web-platform/tests/css/css-grid/animation/grid-no-interpolation.html
new file mode 100644
index 0000000000..33806b8586
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-no-interpolation.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441">
+<link rel=help href="https://drafts.csswg.org/css-transitions-2/#transition-property-property">
+<link rel=help href="https://drafts.csswg.org/css-grid/#auto-tracks">
+<link rel=help href="https://drafts.csswg.org/css-grid/#grid-auto-flow-property">
+<link rel=help href="https://drafts.csswg.org/css-grid/#line-placement">
+<link rel=help href="https://drafts.csswg.org/css-grid/#propdef-grid-template-areas">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_no_interpolation({
+  property: 'grid-auto-columns',
+  from: 'initial',
+  to: '123px'
+});
+
+test_no_interpolation({
+  property: 'grid-auto-flow',
+  from: 'initial',
+  to: 'column'
+});
+
+test_no_interpolation({
+  property: 'grid-auto-rows',
+  from: 'initial',
+  to: '123px'
+});
+
+test_no_interpolation({
+  property: 'grid-column-end',
+  from: 'initial',
+  to: '123'
+});
+
+test_no_interpolation({
+  property: 'grid-column-start',
+  from: 'initial',
+  to: '123'
+});
+
+test_no_interpolation({
+  property: 'grid-row-end',
+  from: 'initial',
+  to: '123'
+});
+
+test_no_interpolation({
+  property: 'grid-row-start',
+  from: 'initial',
+  to: '123'
+});
+
+test_no_interpolation({
+  property: 'grid-template-areas',
+  from: 'initial',
+  to: '"."'
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-001-ref.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-001-ref.html
new file mode 100644
index 0000000000..1d53815f37
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-001-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Grid: Reference for grid-template-columns interpolation</title>
+  <style>
+    .grid {
+      display: grid;
+      width: 400px;
+      grid-gap: 10px;
+      grid-template-columns: 60px 1fr;
+    }
+    span { border: 1px solid; }
+  </style>
+</head>
+<body>
+  <div class="grid">
+    <span>column1</span>
+    <span>column2</span>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-001.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-001.html
new file mode 100644
index 0000000000..4e618edb22
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-001.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+  <title>CSS Grid: Test grid-template-columns interpolation</title>
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+  <link rel="match" href="grid-template-columns-001-ref.html">
+  <meta name="assert" content="The grid-template-columns property should have
+                               correct interpolation result.">
+  <style>
+    @keyframes anim {
+      from {
+        grid-template-columns: 20px 1fr;
+      }
+      to {
+        grid-template-columns: 100px 1fr;
+      }
+    }
+    .grid {
+      display: grid;
+      width: 400px;
+      grid-gap: 10px;
+      animation: anim 10s -5s paused linear;
+    }
+    span { border: 1px solid; }
+  </style>
+</head>
+<body>
+  <div class="grid">
+    <span>column1</span>
+    <span>column2</span>
+  </div>
+</body>
+<script>
+  requestAnimationFrame(() => {
+    document.documentElement.classList.remove('reftest-wait');
+  });
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-composition.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-composition.html
new file mode 100644
index 0000000000..2db49bc53e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-composition.html
@@ -0,0 +1,247 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>grid-template-columns composition</title>
+    <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+    <meta name="assert" content="grid-template-columns supports composition.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      test_composition({
+        property: 'grid-template-columns',
+        underlying: '50px 10%',
+        addFrom: '100px 100px',
+        addTo: '200px 20%',
+      }, [
+        {at: -0.3, expect: '120px calc(130px + 4%)'},
+        {at: 0, expect: '150px calc(100px + 10%)'},
+        {at: 0.5, expect: '200px calc(50px + 20%)'},
+        {at: 1, expect: '250px 30%'},
+        {at: 1.5, expect: '300px calc(-50px + 40%)'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-columns',
+        underlying: '1fr 1fr',
+        addFrom: '1fr 2fr',
+        addTo: '2fr 1fr',
+      }, [
+        {at: -0.5, expect: '1.5fr 3.5fr'},
+        {at: 0, expect: '2fr 3fr'},
+        {at: 0.5, expect: '2.5fr 2.5fr'},
+        {at: 1, expect: '3fr 2fr'},
+        {at: 1.5, expect: '3.5fr 1.5fr'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-columns',
+        underlying: '50px',
+        addFrom: '100px',
+        replaceTo: '200px',
+      }, [
+        {at: -0.3, expect: '135px'},
+        {at: 0, expect: '150px'},
+        {at: 0.5, expect: '175px'},
+        {at: 1, expect: '200px'},
+        {at: 1.5, expect: '225px'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-columns',
+        underlying: '1fr',
+        addFrom: '1fr',
+        replaceTo: '3fr',
+      }, [
+        {at: -0.5, expect: '1.5fr'},
+        {at: 0, expect: '2fr'},
+        {at: 0.5, expect: '2.5fr'},
+        {at: 1, expect: '3fr'},
+        {at: 1.5, expect: '3.5fr'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-columns',
+        underlying: '1fr 1fr',
+        addFrom: '1fr 1fr',
+        addTo: '3fr auto',
+      }, [
+        {at: -0.5, expect: '1fr 2fr'},
+        {at: 0, expect: '2fr 2fr'},
+        {at: 0.5, expect: '3fr auto'},
+        {at: 1, expect: '4fr auto'},
+        {at: 1.5, expect: '5fr auto'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-columns',
+        underlying: '1fr 1fr',
+        addFrom: '1fr auto',
+        addTo: '3fr 3fr',
+      }, [
+        {at: -0.5, expect: '1fr auto'},
+        {at: 0, expect: '2fr auto'},
+        {at: 0.5, expect: '3fr 4fr'},
+        {at: 1, expect: '4fr 4fr'},
+        {at: 1.5, expect: '5fr 4fr'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-columns',
+        underlying: '1fr auto',
+        addFrom: '1fr 1fr',
+        addTo: '3fr 3fr',
+      }, [
+        {at: -0.5, expect: '1fr 0fr'},
+        {at: 0, expect: '2fr 1fr'},
+        {at: 0.5, expect: '3fr 2fr'},
+        {at: 1, expect: '4fr 3fr'},
+        {at: 1.5, expect: '5fr 4fr'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-columns',
+        underlying: '0fr repeat(2, 0fr 10px) 1fr',
+        addFrom: "1fr repeat(2, 1fr 20px) 1fr",
+        addTo: "2fr repeat(2, 3fr 40px) 3fr"
+      }, [
+        {at: -0.3, expect: "0.7fr repeat(2, 0.4fr 24px) 1.4fr"},
+        {at: 0, expect: "1fr repeat(2, 1fr 30px) 2fr"},
+        {at: 0.5, expect: "1.5fr repeat(2, 2fr 40px) 3fr"},
+        {at: 1, expect: "2fr repeat(2, 3fr 50px) 4fr"},
+        {at: 1.5, expect: "2.5fr repeat(2, 4fr 60px) 5fr"}
+      ]);
+
+      test_composition({
+        property: 'grid-template-columns',
+        underlying: '1fr 1fr',
+        addFrom: '1fr [a b] 1fr [d]',
+        addTo: '3fr [c] 3fr',
+      }, [
+        {at: -0.5, expect: '1fr [ a b ] 1fr [d]'},
+        {at: 0, expect: '2fr [ a b ] 2fr [d]'},
+        {at: 0.5, expect: '3fr [c] 3fr'},
+        {at: 1, expect: '4fr [c] 4fr'},
+        {at: 1.5, expect: '5fr [c] 5fr'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-columns',
+        underlying: 'fit-content(5px) fit-content(20px)',
+        addFrom: 'fit-content(5px) fit-content(20px)',
+        addTo: 'fit-content(15px) max-content',
+      }, [
+        {at: -0.5, expect: 'fit-content(5px) fit-content(40px)'},
+        {at: 0, expect: 'fit-content(10px) fit-content(40px)'},
+        {at: 0.5, expect: 'fit-content(15px) max-content'},
+        {at: 1, expect: 'fit-content(20px) max-content'},
+        {at: 1.5, expect: 'fit-content(25px) max-content'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-columns',
+        underlying: 'minmax(5px, 1fr) minmax(10px, 2fr)',
+        addFrom: 'minmax(5px, 1fr) minmax(10px, 2fr)',
+        addTo: 'minmax(15px, 3fr) minmax(30px, auto)',
+      }, [
+        {at: -0.5, expect: 'minmax(5px, 1fr) minmax(10px, 4fr)'},
+        {at: 0, expect: 'minmax(10px, 2fr) minmax(20px, 4fr)'},
+        {at: 0.5, expect: 'minmax(15px, 3fr) minmax(30px, auto)'},
+        {at: 1, expect: 'minmax(20px, 4fr) minmax(40px, auto)'},
+        {at: 1.5, expect: 'minmax(25px, 5fr) minmax(50px, auto)'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-columns',
+        underlying: '1fr 1fr',
+        addFrom: 'none',
+        addTo: '1fr 1fr',
+      }, [
+        {at: -0.5, expect: 'none'},
+        {at: 0, expect: 'none'},
+        {at: 0.3, expect: 'none'},
+        {at: 0.5, expect: '2fr 2fr'},
+        {at: 0.7, expect: '2fr 2fr'},
+        {at: 1, expect: '2fr 2fr'},
+        {at: 1.5, expect: '2fr 2fr'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-columns',
+        underlying: '1fr 1fr',
+        addFrom: '1fr 1fr',
+        addTo: 'none',
+      }, [
+        {at: -0.5, expect: '2fr 2fr'},
+        {at: 0, expect: '2fr 2fr'},
+        {at: 0.3, expect: '2fr 2fr'},
+        {at: 0.5, expect: 'none'},
+        {at: 0.7, expect: 'none'},
+        {at: 1, expect: 'none'},
+        {at: 1.5, expect: 'none'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-columns',
+        underlying: '1fr 1fr 1fr',
+        addFrom: '1fr 1fr 1fr',
+        addTo: '2fr 2fr',
+      }, [
+        {at: -0.5, expect: '2fr 2fr 2fr'},
+        {at: 0, expect: '2fr 2fr 2fr'},
+        {at: 0.3, expect: '2fr 2fr 2fr'},
+        {at: 0.5, expect: '2fr 2fr'},
+        {at: 0.7, expect: '2fr 2fr'},
+        {at: 1, expect: '2fr 2fr'},
+        {at: 1.5, expect: '2fr 2fr'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-columns',
+        underlying: '10px 20px 30px',
+        addFrom: '15px 4px',
+        addTo: '30px 3px',
+      }, [
+        {at: -0.5, expect: '7.5px 4.5px'},
+        {at: 0, expect: '15px 4px'},
+        {at: 0.5, expect: '22.5px 3.5px'},
+        {at: 1, expect: '30px 3px'},
+        {at: 1.5, expect: '37.5px 2.5px'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-columns',
+        addFrom: "repeat(2, 2fr 30px)",
+        addTo: "repeat(3, 3fr 50px)"
+      }, [
+        {at: -0.5, expect: 'repeat(2, 2fr 30px)'},
+        {at: 0, expect: 'repeat(2, 2fr 30px)'},
+        {at: 0.3, expect: 'repeat(2, 2fr 30px)'},
+        {at: 0.5, expect: 'repeat(3, 3fr 50px)'},
+        {at: 0.7, expect: 'repeat(3, 3fr 50px)'},
+        {at: 1, expect: 'repeat(3, 3fr 50px)'},
+        {at: 1.5, expect: 'repeat(3, 3fr 50px)'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-columns',
+        addFrom: "repeat(2, 2fr 30px)",
+        addTo: "repeat(2, 3fr)"
+      }, [
+        {at: -0.5, expect: 'repeat(2, 2fr 30px)'},
+        {at: 0, expect: 'repeat(2, 2fr 30px)'},
+        {at: 0.3, expect: 'repeat(2, 2fr 30px)'},
+        {at: 0.5, expect: 'repeat(2, 3fr)'},
+        {at: 0.7, expect: 'repeat(2, 3fr)'},
+        {at: 1, expect: 'repeat(2, 3fr)'},
+        {at: 1.5, expect: 'repeat(2, 3fr)'},
+      ]);
+
+    </script>
+  </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-interpolation.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-interpolation.html
new file mode 100644
index 0000000000..55df24f708
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-interpolation.html
@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>grid-template-columns interpolation</title>
+    <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+    <meta name="assert" content="grid-template-columns supports animation.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+    <style>
+      .parent {
+        grid-template-columns: 10px 20px 30px;
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      // Distinct length of track list.
+      test_no_interpolation({
+        property: 'grid-template-columns',
+        from: "1fr 1fr 1fr",
+        to: "2fr 2fr"
+      });
+
+      test_no_interpolation({
+        property: 'grid-template-columns',
+        from: "10px 20px 30px",
+        to: "20px 30px"
+      });
+
+      test_no_interpolation({
+        property: 'grid-template-columns',
+        from: "1fr 1fr 1fr",
+        to: "none"
+      });
+
+      test_no_interpolation({
+        property: 'grid-template-columns',
+        from: "none",
+        to: "20px 30px"
+      });
+
+      // Exercise <explicit-track-list>
+      test_interpolation({
+        property: 'grid-template-columns',
+        from: "10px 20px 30px",
+        to: "20px 30px 40px"
+      }, [
+        {at: -1, expect: "0px 10px 20px"},
+        {at: 0, expect: "10px 20px 30px"},
+        {at: 0.4, expect: "14px 24px 34px"},
+        {at: 0.6, expect: "16px 26px 36px"},
+        {at: 1, expect: "20px 30px 40px"},
+        {at: 2, expect: "30px 40px 50px"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-columns',
+        from: "10px 20px 30px",
+        to: "20% 30% 40px"
+      }, [
+        {at: -1, expect: "calc(20px + -20%) calc(40px + -30%) 20px"},
+        {at: 0, expect: "calc(10px + 0%) calc(20px + 0%) 30px"},
+        {at: 0.4, expect: "calc(6px + 8%) calc(12px + 12%) 34px"},
+        {at: 0.6, expect: "calc(4px + 12%) calc(8px + 18%) 36px"},
+        {at: 1, expect: "20% 30% 40px"},
+        {at: 2, expect: "calc(-10px + 40%) calc(-20px + 60%) 50px"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-columns',
+        from: "1fr 1fr 1fr",
+        to: "2fr auto 2fr"
+      }, [
+        {at: -1, expect: "0fr 1fr 0fr"},
+        {at: 0, expect: "1fr 1fr 1fr"},
+        {at: 0.4, expect: "1.4fr 1fr 1.4fr"},
+        {at: 0.6, expect: "1.6fr auto 1.6fr"},
+        {at: 1, expect: "2fr auto 2fr"},
+        {at: 2, expect: "3fr auto 3fr"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-columns',
+        from: "1fr [a b] 1fr [d] 1fr",
+        to: "2fr [c] auto 2fr"
+      }, [
+        {at: -1, expect: "0fr [a b] 1fr [d] 0fr"},
+        {at: 0, expect: "1fr [a b] 1fr [d] 1fr"},
+        {at: 0.4, expect: "1.4fr [a b] 1fr [d] 1.4fr"},
+        {at: 0.6, expect: "1.6fr [c] auto 1.6fr"},
+        {at: 1, expect: "2fr [c] auto 2fr"},
+        {at: 2, expect: "3fr [c] auto 3fr"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-columns',
+        from: "fit-content(10px) fit-content(20px)",
+        to: "fit-content(20px) max-content"
+      }, [
+        {at: -1, expect: "fit-content(0px) fit-content(20px)"},
+        {at: 0, expect: "fit-content(10px) fit-content(20px)"},
+        {at: 0.4, expect: "fit-content(14px) fit-content(20px)"},
+        {at: 0.6, expect: "fit-content(16px) max-content"},
+        {at: 1, expect: "fit-content(20px) max-content"},
+        {at: 2, expect: "fit-content(30px) max-content"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-columns',
+        from: "minmax(10px, 1fr) minmax(20px, 2fr)",
+        to: "minmax(20px, 2fr) minmax(30px, auto)"
+      }, [
+        {at: -1, expect: "minmax(0px, 0fr) minmax(10px, 2fr)"},
+        {at: 0, expect: "minmax(10px, 1fr) minmax(20px, 2fr)"},
+        {at: 0.4, expect: "minmax(14px, 1.4fr) minmax(24px, 2fr)"},
+        {at: 0.6, expect: "minmax(16px, 1.6fr) minmax(26px, auto)"},
+        {at: 1, expect: "minmax(20px, 2fr) minmax(30px, auto)"},
+        {at: 2, expect: "minmax(30px, 3fr) minmax(40px, auto)"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-columns',
+        from: "10px 10px 10px",
+        to: "1fr fit-content(20px) minmax(20px, 2fr)"
+      }, [
+        {at: -1, expect: "10px 10px 10px"},
+        {at: 0, expect: "10px 10px 10px"},
+        {at: 0.4, expect: "10px 10px 10px"},
+        {at: 0.6, expect: "1fr fit-content(20px) minmax(20px, 2fr)"},
+        {at: 1, expect: "1fr fit-content(20px) minmax(20px, 2fr)"},
+        {at: 2, expect: "1fr fit-content(20px) minmax(20px, 2fr)"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-columns',
+        from: "1fr 1fr 1fr",
+        to: "20px fit-content(20px) minmax(20px, 2fr)"
+      }, [
+        {at: -1, expect: "1fr 1fr 1fr"},
+        {at: 0, expect: "1fr 1fr 1fr"},
+        {at: 0.4, expect: "1fr 1fr 1fr"},
+        {at: 0.6, expect: "20px fit-content(20px) minmax(20px, 2fr)"},
+        {at: 1, expect: "20px fit-content(20px) minmax(20px, 2fr)"},
+        {at: 2, expect: "20px fit-content(20px) minmax(20px, 2fr)"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-columns',
+        from: "fit-content(10px)",
+        to: "minmax(20px, 2fr)"
+      }, [
+        {at: -1, expect: "fit-content(10px)"},
+        {at: 0, expect: "fit-content(10px)"},
+        {at: 0.4, expect: "fit-content(10px)"},
+        {at: 0.6, expect: "minmax(20px, 2fr)"},
+        {at: 1, expect: "minmax(20px, 2fr)"},
+        {at: 2, expect: "minmax(20px, 2fr)"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-columns',
+        from: "inherit",
+        to: "20px 30px 40px"
+      }, [
+        {at: -1, expect: "0px 10px 20px"},
+        {at: 0, expect: "10px 20px 30px"},
+        {at: 0.4, expect: "14px 24px 34px"},
+        {at: 0.6, expect: "16px 26px 36px"},
+        {at: 1, expect: "20px 30px 40px"},
+        {at: 2, expect: "30px 40px 50px"}
+      ]);
+
+      // Exercise <track-list> (with <track-repeat>)
+      // https://drafts.csswg.org/css-grid/#repeat-interpolation
+      test_no_interpolation({
+        property: 'grid-template-columns',
+        from: "1fr repeat(2, 2fr 30px) 1fr",
+        to: "2fr repeat(2, 3fr 40px 50px) 2fr"
+      });
+
+      test_no_interpolation({
+        property: 'grid-template-columns',
+        from: "1fr repeat(2, 2fr 30px) 1fr",
+        to: "2fr repeat(3, 3fr 40px) 2fr"
+      });
+
+      test_no_interpolation({
+        property: 'grid-template-columns',
+        from: "repeat(2, 2fr 30px)",
+        to: "repeat(4, 40px)"
+      });
+
+      test_interpolation({
+        property: 'grid-template-columns',
+        from: "1fr repeat(2, 2fr auto 30px) 1fr",
+        to: "2fr repeat(2, 3fr 30px 40px) 2fr"
+      }, [
+        {at: -1, expect: "0fr repeat(2, 1fr auto 20px) 0fr"},
+        {at: 0, expect: "1fr repeat(2, 2fr auto 30px) 1fr"},
+        {at: 0.4, expect: "1.4fr repeat(2, 2.4fr auto 34px) 1.4fr"},
+        {at: 0.6, expect: "1.6fr repeat(2, 2.6fr 30px 36px) 1.6fr"},
+        {at: 1, expect: "2fr repeat(2, 3fr 30px 40px) 2fr"},
+        {at: 2, expect: "3fr repeat(2, 4fr 30px 50px) 3fr"}
+      ]);
+
+      // Exercise <auto-track-list>
+      test_no_interpolation({
+        property: 'grid-template-columns',
+        from: "10px repeat(auto-fill, minmax(25px, 1fr)) 10px",
+        to: "20px 20px repeat(auto-fill, minmax(30px, 1fr))"
+      });
+
+      test_no_interpolation({
+        property: 'grid-template-columns',
+        from: "10px repeat(auto-fill, minmax(25px, 1fr)) 10px",
+        to: "20px repeat(auto-fit, minmax(30px, 1fr)) 20px"
+      });
+
+      test_no_interpolation({
+        property: 'grid-template-columns',
+        from: "10px repeat(auto-fill, minmax(25px, 1fr)) 10px",
+        to: "20px repeat(auto-fill, minmax(35px, auto)) 20px"
+      });
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-neutral-keyframe-001.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-neutral-keyframe-001.html
new file mode 100644
index 0000000000..070539e2c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-neutral-keyframe-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>grid-template-columns neutral keyframe</title>
+    <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+    <meta name="assert" content="grid-template-columns supports neutral keyframe.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <body>
+    <div id="target"></div>
+    <script>
+      test(() => {
+        target.style.gridTemplateColumns = '1fr 200px';
+        var animation = target.animate([{}, {gridTemplateColumns: '30px 300px'}], 1000);
+        animation.pause();
+        animation.currentTime = 500;
+        assert_equals(getComputedStyle(target).gridTemplateColumns, '30px 250px');
+        target.style.gridTemplateColumns = '20px 200px';
+        assert_equals(getComputedStyle(target).gridTemplateColumns, '25px 250px');
+      }, 'Invalidate the result for the neutral keyframe if the value of the <track-breadth> changes.');
+    </script>
+  </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-neutral-keyframe-002.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-neutral-keyframe-002.html
new file mode 100644
index 0000000000..6cd163711e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-neutral-keyframe-002.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>grid-template-columns neutral keyframe</title>
+    <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+    <meta name="assert" content="grid-template-columns supports neutral keyframe.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <body>
+    <div id="target"></div>
+    <script>
+      test(() => {
+        target.style.gridTemplateColumns = '10px minmax(10px, 1fr)';
+        var animation = target.animate([{}, {gridTemplateColumns: '30px minmax(30px, 3fr)'}], 1000);
+        animation.pause();
+        animation.currentTime = 500;
+        assert_equals(getComputedStyle(target).gridTemplateColumns, '20px minmax(20px, 2fr)');
+        target.style.gridTemplateColumns = '10px fit-content(10px)';
+        assert_equals(getComputedStyle(target).gridTemplateColumns, '20px minmax(30px, 3fr)');
+      }, 'Invalidate the result for the neutral keyframe if the type of <track-size> changes.');
+    </script>
+  </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-neutral-keyframe-003.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-neutral-keyframe-003.html
new file mode 100644
index 0000000000..80187cf684
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-neutral-keyframe-003.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>grid-template-columns neutral keyframe</title>
+    <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+    <meta name="assert" content="grid-template-columns supports neutral keyframe.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <body>
+    <div id="target"></div>
+    <script>
+      test(() => {
+        target.style.gridTemplateColumns = '200px';
+        var animation = target.animate([{}, {gridTemplateColumns: '30px 300px'}], 1000);
+        animation.pause();
+        animation.currentTime = 500;
+        assert_equals(getComputedStyle(target).gridTemplateColumns, '30px 300px');
+        target.style.gridTemplateColumns = '20px 200px';
+        assert_equals(getComputedStyle(target).gridTemplateColumns, '25px 250px');
+        target.style.gridTemplateColumns = '200px';
+        assert_equals(getComputedStyle(target).gridTemplateColumns, '30px 300px');
+      }, 'Invalidate the result for the neutral keyframe if the size of the list changes.');
+    </script>
+  </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-neutral-keyframe-004.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-neutral-keyframe-004.html
new file mode 100644
index 0000000000..a207aa713c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-columns-neutral-keyframe-004.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>grid-template-columns neutral keyframe</title>
+    <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+    <meta name="assert" content="grid-template-columns supports neutral keyframe.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <body>
+    <div id="target"></div>
+    <script>
+      test(() => {
+        target.style.gridTemplateColumns = '10px [a] 20px [b]';
+        var animation = target.animate([{}, {gridTemplateColumns: '30px 40px [c]'}], 1000);
+        animation.pause();
+        animation.currentTime = 250;
+        assert_equals(getComputedStyle(target).gridTemplateColumns, '15px [a] 25px [b]');
+        target.style.gridTemplateColumns = '10px 20px [d]';
+        assert_equals(getComputedStyle(target).gridTemplateColumns, '15px 25px [d]');
+      }, 'Invalidate the result for the neutral keyframe if the named lines change.');
+    </script>
+  </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-001-ref.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-001-ref.html
new file mode 100644
index 0000000000..8f9929f97d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-001-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Grid: Reference for grid-template-rows interpolation</title>
+  <style>
+    .grid {
+      display: grid;
+      width: 400px;
+      height: 400px;
+      grid-gap: 10px;
+      grid-template-rows: 60px 1fr;
+    }
+    span { border: 1px solid; }
+  </style>
+</head>
+<body>
+  <div class="grid">
+    <span>row1</span>
+    <span>row2</span>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-001.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-001.html
new file mode 100644
index 0000000000..403fed432a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+  <title>CSS Grid: Test grid-template-rows interpolation</title>
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+  <link rel="match" href="grid-template-rows-001-ref.html">
+  <meta name="assert" content="The grid-template-rows property should have
+                               correct interpolation result.">
+  <style>
+    @keyframes anim {
+      from {
+        grid-template-rows: 20px 1fr;
+      }
+      to {
+        grid-template-rows: 100px 1fr;
+      }
+    }
+    .grid {
+      display: grid;
+      width: 400px;
+      height: 400px;
+      grid-gap: 10px;
+      animation: anim 10s -5s paused linear;
+    }
+    span { border: 1px solid; }
+  </style>
+</head>
+<body>
+  <div class="grid">
+    <span>row1</span>
+    <span>row2</span>
+  </div>
+</body>
+<script>
+  requestAnimationFrame(() => {
+    document.documentElement.classList.remove('reftest-wait');
+  });
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-composition.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-composition.html
new file mode 100644
index 0000000000..42f9c92e9a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-composition.html
@@ -0,0 +1,247 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>grid-template-rows composition</title>
+    <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+    <meta name="assert" content="grid-template-rows supports composition.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      test_composition({
+        property: 'grid-template-rows',
+        underlying: '50px 10%',
+        addFrom: '100px 100px',
+        addTo: '200px 20%',
+      }, [
+        {at: -0.3, expect: '120px calc(130px + 4%)'},
+        {at: 0, expect: '150px calc(100px + 10%)'},
+        {at: 0.5, expect: '200px calc(50px + 20%)'},
+        {at: 1, expect: '250px 30%'},
+        {at: 1.5, expect: '300px calc(-50px + 40%)'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-rows',
+        underlying: '1fr 1fr',
+        addFrom: '1fr 2fr',
+        addTo: '2fr 1fr',
+      }, [
+        {at: -0.5, expect: '1.5fr 3.5fr'},
+        {at: 0, expect: '2fr 3fr'},
+        {at: 0.5, expect: '2.5fr 2.5fr'},
+        {at: 1, expect: '3fr 2fr'},
+        {at: 1.5, expect: '3.5fr 1.5fr'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-rows',
+        underlying: '50px',
+        addFrom: '100px',
+        replaceTo: '200px',
+      }, [
+        {at: -0.3, expect: '135px'},
+        {at: 0, expect: '150px'},
+        {at: 0.5, expect: '175px'},
+        {at: 1, expect: '200px'},
+        {at: 1.5, expect: '225px'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-rows',
+        underlying: '1fr',
+        addFrom: '1fr',
+        replaceTo: '3fr',
+      }, [
+        {at: -0.5, expect: '1.5fr'},
+        {at: 0, expect: '2fr'},
+        {at: 0.5, expect: '2.5fr'},
+        {at: 1, expect: '3fr'},
+        {at: 1.5, expect: '3.5fr'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-rows',
+        underlying: '1fr 1fr',
+        addFrom: '1fr 1fr',
+        addTo: '3fr auto',
+      }, [
+        {at: -0.5, expect: '1fr 2fr'},
+        {at: 0, expect: '2fr 2fr'},
+        {at: 0.5, expect: '3fr auto'},
+        {at: 1, expect: '4fr auto'},
+        {at: 1.5, expect: '5fr auto'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-rows',
+        underlying: '1fr 1fr',
+        addFrom: '1fr auto',
+        addTo: '3fr 3fr',
+      }, [
+        {at: -0.5, expect: '1fr auto'},
+        {at: 0, expect: '2fr auto'},
+        {at: 0.5, expect: '3fr 4fr'},
+        {at: 1, expect: '4fr 4fr'},
+        {at: 1.5, expect: '5fr 4fr'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-rows',
+        underlying: '1fr auto',
+        addFrom: '1fr 1fr',
+        addTo: '3fr 3fr',
+      }, [
+        {at: -0.5, expect: '1fr 0fr'},
+        {at: 0, expect: '2fr 1fr'},
+        {at: 0.5, expect: '3fr 2fr'},
+        {at: 1, expect: '4fr 3fr'},
+        {at: 1.5, expect: '5fr 4fr'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-rows',
+        underlying: '0fr repeat(2, 0fr 10px) 1fr',
+        addFrom: "1fr repeat(2, 1fr 20px) 1fr",
+        addTo: "2fr repeat(2, 3fr 40px) 3fr"
+      }, [
+        {at: -0.3, expect: "0.7fr repeat(2, 0.4fr 24px) 1.4fr"},
+        {at: 0, expect: "1fr repeat(2, 1fr 30px) 2fr"},
+        {at: 0.5, expect: "1.5fr repeat(2, 2fr 40px) 3fr"},
+        {at: 1, expect: "2fr repeat(2, 3fr 50px) 4fr"},
+        {at: 1.5, expect: "2.5fr repeat(2, 4fr 60px) 5fr"}
+      ]);
+
+      test_composition({
+        property: 'grid-template-rows',
+        underlying: '1fr 1fr',
+        addFrom: '1fr [a b] 1fr [d]',
+        addTo: '3fr [c] 3fr',
+      }, [
+        {at: -0.5, expect: '1fr [ a b ] 1fr [d]'},
+        {at: 0, expect: '2fr [ a b ] 2fr [d]'},
+        {at: 0.5, expect: '3fr [c] 3fr'},
+        {at: 1, expect: '4fr [c] 4fr'},
+        {at: 1.5, expect: '5fr [c] 5fr'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-rows',
+        underlying: 'fit-content(5px) fit-content(20px)',
+        addFrom: 'fit-content(5px) fit-content(20px)',
+        addTo: 'fit-content(15px) max-content',
+      }, [
+        {at: -0.5, expect: 'fit-content(5px) fit-content(40px)'},
+        {at: 0, expect: 'fit-content(10px) fit-content(40px)'},
+        {at: 0.5, expect: 'fit-content(15px) max-content'},
+        {at: 1, expect: 'fit-content(20px) max-content'},
+        {at: 1.5, expect: 'fit-content(25px) max-content'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-rows',
+        underlying: 'minmax(5px, 1fr) minmax(10px, 2fr)',
+        addFrom: 'minmax(5px, 1fr) minmax(10px, 2fr)',
+        addTo: 'minmax(15px, 3fr) minmax(30px, auto)',
+      }, [
+        {at: -0.5, expect: 'minmax(5px, 1fr) minmax(10px, 4fr)'},
+        {at: 0, expect: 'minmax(10px, 2fr) minmax(20px, 4fr)'},
+        {at: 0.5, expect: 'minmax(15px, 3fr) minmax(30px, auto)'},
+        {at: 1, expect: 'minmax(20px, 4fr) minmax(40px, auto)'},
+        {at: 1.5, expect: 'minmax(25px, 5fr) minmax(50px, auto)'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-rows',
+        underlying: '1fr 1fr',
+        addFrom: 'none',
+        addTo: '1fr 1fr',
+      }, [
+        {at: -0.5, expect: 'none'},
+        {at: 0, expect: 'none'},
+        {at: 0.3, expect: 'none'},
+        {at: 0.5, expect: '2fr 2fr'},
+        {at: 0.7, expect: '2fr 2fr'},
+        {at: 1, expect: '2fr 2fr'},
+        {at: 1.5, expect: '2fr 2fr'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-rows',
+        underlying: '1fr 1fr',
+        addFrom: '1fr 1fr',
+        addTo: 'none',
+      }, [
+        {at: -0.5, expect: '2fr 2fr'},
+        {at: 0, expect: '2fr 2fr'},
+        {at: 0.3, expect: '2fr 2fr'},
+        {at: 0.5, expect: 'none'},
+        {at: 0.7, expect: 'none'},
+        {at: 1, expect: 'none'},
+        {at: 1.5, expect: 'none'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-rows',
+        underlying: '1fr 1fr 1fr',
+        addFrom: '1fr 1fr 1fr',
+        addTo: '2fr 2fr',
+      }, [
+        {at: -0.5, expect: '2fr 2fr 2fr'},
+        {at: 0, expect: '2fr 2fr 2fr'},
+        {at: 0.3, expect: '2fr 2fr 2fr'},
+        {at: 0.5, expect: '2fr 2fr'},
+        {at: 0.7, expect: '2fr 2fr'},
+        {at: 1, expect: '2fr 2fr'},
+        {at: 1.5, expect: '2fr 2fr'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-rows',
+        underlying: '10px 20px 30px',
+        addFrom: '15px 4px',
+        addTo: '30px 3px',
+      }, [
+        {at: -0.5, expect: '7.5px 4.5px'},
+        {at: 0, expect: '15px 4px'},
+        {at: 0.5, expect: '22.5px 3.5px'},
+        {at: 1, expect: '30px 3px'},
+        {at: 1.5, expect: '37.5px 2.5px'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-rows',
+        addFrom: "repeat(2, 2fr 30px)",
+        addTo: "repeat(3, 3fr 50px)"
+      }, [
+        {at: -0.5, expect: 'repeat(2, 2fr 30px)'},
+        {at: 0, expect: 'repeat(2, 2fr 30px)'},
+        {at: 0.3, expect: 'repeat(2, 2fr 30px)'},
+        {at: 0.5, expect: 'repeat(3, 3fr 50px)'},
+        {at: 0.7, expect: 'repeat(3, 3fr 50px)'},
+        {at: 1, expect: 'repeat(3, 3fr 50px)'},
+        {at: 1.5, expect: 'repeat(3, 3fr 50px)'},
+      ]);
+
+      test_composition({
+        property: 'grid-template-rows',
+        addFrom: "repeat(2, 2fr 30px)",
+        addTo: "repeat(2, 3fr)"
+      }, [
+        {at: -0.5, expect: 'repeat(2, 2fr 30px)'},
+        {at: 0, expect: 'repeat(2, 2fr 30px)'},
+        {at: 0.3, expect: 'repeat(2, 2fr 30px)'},
+        {at: 0.5, expect: 'repeat(2, 3fr)'},
+        {at: 0.7, expect: 'repeat(2, 3fr)'},
+        {at: 1, expect: 'repeat(2, 3fr)'},
+        {at: 1.5, expect: 'repeat(2, 3fr)'},
+      ]);
+
+    </script>
+  </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-interpolation.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-interpolation.html
new file mode 100644
index 0000000000..f749cbd832
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-interpolation.html
@@ -0,0 +1,231 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>grid-template-rows interpolation</title>
+    <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+    <meta name="assert" content="grid-template-rows supports animation.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+    <style>
+      .parent {
+        grid-template-rows: 10px 20px 30px;
+      }
+    </style>
+  </head>
+  <body>
+    <script>
+      'use strict';
+
+      // Distinct length of track list.
+      test_no_interpolation({
+        property: 'grid-template-rows',
+        from: "1fr 1fr 1fr",
+        to: "2fr 2fr"
+      });
+
+      test_no_interpolation({
+        property: 'grid-template-rows',
+        from: "10px 20px 30px",
+        to: "20px 30px"
+      });
+
+      test_no_interpolation({
+        property: 'grid-template-rows',
+        from: "1fr 1fr 1fr",
+        to: "none"
+      });
+
+      test_no_interpolation({
+        property: 'grid-template-rows',
+        from: "none",
+        to: "20px 30px"
+      });
+
+      // Exercise <explicit-track-list>
+      test_interpolation({
+        property: 'grid-template-rows',
+        from: "10px 20px 30px",
+        to: "20px 30px 40px"
+      }, [
+        {at: -1, expect: "0px 10px 20px"},
+        {at: 0, expect: "10px 20px 30px"},
+        {at: 0.4, expect: "14px 24px 34px"},
+        {at: 0.6, expect: "16px 26px 36px"},
+        {at: 1, expect: "20px 30px 40px"},
+        {at: 2, expect: "30px 40px 50px"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-rows',
+        from: "10px 20px 30px",
+        to: "20% 30% 40px"
+      }, [
+        {at: -1, expect: "calc(20px + -20%) calc(40px + -30%) 20px"},
+        {at: 0, expect: "calc(10px + 0%) calc(20px + 0%) 30px"},
+        {at: 0.4, expect: "calc(6px + 8%) calc(12px + 12%) 34px"},
+        {at: 0.6, expect: "calc(4px + 12%) calc(8px + 18%) 36px"},
+        {at: 1, expect: "20% 30% 40px"},
+        {at: 2, expect: "calc(-10px + 40%) calc(-20px + 60%) 50px"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-rows',
+        from: "1fr 1fr 1fr",
+        to: "2fr auto 2fr"
+      }, [
+        {at: -1, expect: "0fr 1fr 0fr"},
+        {at: 0, expect: "1fr 1fr 1fr"},
+        {at: 0.4, expect: "1.4fr 1fr 1.4fr"},
+        {at: 0.6, expect: "1.6fr auto 1.6fr"},
+        {at: 1, expect: "2fr auto 2fr"},
+        {at: 2, expect: "3fr auto 3fr"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-rows',
+        from: "1fr [a b] 1fr [d] 1fr",
+        to: "2fr [c] auto 2fr"
+      }, [
+        {at: -1, expect: "0fr [a b] 1fr [d] 0fr"},
+        {at: 0, expect: "1fr [a b] 1fr [d] 1fr"},
+        {at: 0.4, expect: "1.4fr [a b] 1fr [d] 1.4fr"},
+        {at: 0.6, expect: "1.6fr [c] auto 1.6fr"},
+        {at: 1, expect: "2fr [c] auto 2fr"},
+        {at: 2, expect: "3fr [c] auto 3fr"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-rows',
+        from: "fit-content(10px) fit-content(20px)",
+        to: "fit-content(20px) max-content"
+      }, [
+        {at: -1, expect: "fit-content(0px) fit-content(20px)"},
+        {at: 0, expect: "fit-content(10px) fit-content(20px)"},
+        {at: 0.4, expect: "fit-content(14px) fit-content(20px)"},
+        {at: 0.6, expect: "fit-content(16px) max-content"},
+        {at: 1, expect: "fit-content(20px) max-content"},
+        {at: 2, expect: "fit-content(30px) max-content"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-rows',
+        from: "minmax(10px, 1fr) minmax(20px, 2fr)",
+        to: "minmax(20px, 2fr) minmax(30px, auto)"
+      }, [
+        {at: -1, expect: "minmax(0px, 0fr) minmax(10px, 2fr)"},
+        {at: 0, expect: "minmax(10px, 1fr) minmax(20px, 2fr)"},
+        {at: 0.4, expect: "minmax(14px, 1.4fr) minmax(24px, 2fr)"},
+        {at: 0.6, expect: "minmax(16px, 1.6fr) minmax(26px, auto)"},
+        {at: 1, expect: "minmax(20px, 2fr) minmax(30px, auto)"},
+        {at: 2, expect: "minmax(30px, 3fr) minmax(40px, auto)"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-rows',
+        from: "10px 10px 10px",
+        to: "1fr fit-content(20px) minmax(20px, 2fr)"
+      }, [
+        {at: -1, expect: "10px 10px 10px"},
+        {at: 0, expect: "10px 10px 10px"},
+        {at: 0.4, expect: "10px 10px 10px"},
+        {at: 0.6, expect: "1fr fit-content(20px) minmax(20px, 2fr)"},
+        {at: 1, expect: "1fr fit-content(20px) minmax(20px, 2fr)"},
+        {at: 2, expect: "1fr fit-content(20px) minmax(20px, 2fr)"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-rows',
+        from: "1fr 1fr 1fr",
+        to: "20px fit-content(20px) minmax(20px, 2fr)"
+      }, [
+        {at: -1, expect: "1fr 1fr 1fr"},
+        {at: 0, expect: "1fr 1fr 1fr"},
+        {at: 0.4, expect: "1fr 1fr 1fr"},
+        {at: 0.6, expect: "20px fit-content(20px) minmax(20px, 2fr)"},
+        {at: 1, expect: "20px fit-content(20px) minmax(20px, 2fr)"},
+        {at: 2, expect: "20px fit-content(20px) minmax(20px, 2fr)"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-rows',
+        from: "fit-content(10px)",
+        to: "minmax(20px, 2fr)"
+      }, [
+        {at: -1, expect: "fit-content(10px)"},
+        {at: 0, expect: "fit-content(10px)"},
+        {at: 0.4, expect: "fit-content(10px)"},
+        {at: 0.6, expect: "minmax(20px, 2fr)"},
+        {at: 1, expect: "minmax(20px, 2fr)"},
+        {at: 2, expect: "minmax(20px, 2fr)"}
+      ]);
+
+      test_interpolation({
+        property: 'grid-template-rows',
+        from: "inherit",
+        to: "20px 30px 40px"
+      }, [
+        {at: -1, expect: "0px 10px 20px"},
+        {at: 0, expect: "10px 20px 30px"},
+        {at: 0.4, expect: "14px 24px 34px"},
+        {at: 0.6, expect: "16px 26px 36px"},
+        {at: 1, expect: "20px 30px 40px"},
+        {at: 2, expect: "30px 40px 50px"}
+      ]);
+
+      // Exercise <track-list> (with <track-repeat>)
+      // https://drafts.csswg.org/css-grid/#repeat-interpolation
+      test_no_interpolation({
+        property: 'grid-template-rows',
+        from: "1fr repeat(2, 2fr 30px) 1fr",
+        to: "2fr repeat(2, 3fr 40px 50px) 2fr"
+      });
+
+      test_no_interpolation({
+        property: 'grid-template-rows',
+        from: "1fr repeat(2, 2fr 30px) 1fr",
+        to: "2fr repeat(3, 3fr 40px) 2fr"
+      });
+
+      // See https://github.com/w3c/csswg-drafts/issues/3503
+      test_no_interpolation({
+        property: 'grid-template-rows',
+        from: "repeat(2, 2fr 30px)",
+        to: "repeat(4, 40px)"
+      });
+
+      test_interpolation({
+        property: 'grid-template-rows',
+        from: "1fr repeat(2, 2fr auto 30px) 1fr",
+        to: "2fr repeat(2, 3fr 30px 40px) 2fr"
+      }, [
+        {at: -1, expect: "0fr repeat(2, 1fr auto 20px) 0fr"},
+        {at: 0, expect: "1fr repeat(2, 2fr auto 30px) 1fr"},
+        {at: 0.4, expect: "1.4fr repeat(2, 2.4fr auto 34px) 1.4fr"},
+        {at: 0.6, expect: "1.6fr repeat(2, 2.6fr 30px 36px) 1.6fr"},
+        {at: 1, expect: "2fr repeat(2, 3fr 30px 40px) 2fr"},
+        {at: 2, expect: "3fr repeat(2, 4fr 30px 50px) 3fr"}
+      ]);
+
+      // Exercise <auto-track-list>
+      test_no_interpolation({
+        property: 'grid-template-rows',
+        from: "10px repeat(auto-fill, minmax(25px, 1fr)) 10px",
+        to: "20px 20px repeat(auto-fill, minmax(30px, 1fr))"
+      });
+
+      test_no_interpolation({
+        property: 'grid-template-rows',
+        from: "10px repeat(auto-fill, minmax(25px, 1fr)) 10px",
+        to: "20px repeat(auto-fit, minmax(30px, 1fr)) 20px"
+      });
+
+      test_no_interpolation({
+        property: 'grid-template-rows',
+        from: "10px repeat(auto-fill, minmax(25px, 1fr)) 10px",
+        to: "20px repeat(auto-fill, minmax(35px, auto)) 20px"
+      });
+    </script>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-neutral-keyframe-001.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-neutral-keyframe-001.html
new file mode 100644
index 0000000000..ecbe0481ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-neutral-keyframe-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>grid-template-rows neutral keyframe</title>
+    <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+    <meta name="assert" content="grid-template-rows supports neutral keyframe.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <body>
+    <div id="target"></div>
+    <script>
+      test(() => {
+        target.style.gridTemplateRows = '1fr 200px';
+        var animation = target.animate([{}, {gridTemplateRows: '30px 300px'}], 1000);
+        animation.pause();
+        animation.currentTime = 500;
+        assert_equals(getComputedStyle(target).gridTemplateRows, '30px 250px');
+        target.style.gridTemplateRows = '20px 200px';
+        assert_equals(getComputedStyle(target).gridTemplateRows, '25px 250px');
+      }, 'Invalidate the result for the neutral keyframe if the value of the <track-breadth> changes.');
+    </script>
+  </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-neutral-keyframe-002.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-neutral-keyframe-002.html
new file mode 100644
index 0000000000..f63d45b4a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-neutral-keyframe-002.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>grid-template-rows neutral keyframe</title>
+    <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+    <meta name="assert" content="grid-template-rows supports neutral keyframe.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <body>
+    <div id="target"></div>
+    <script>
+      test(() => {
+        target.style.gridTemplateRows = '10px minmax(10px, 1fr)';
+        var animation = target.animate([{}, {gridTemplateRows: '30px minmax(30px, 3fr)'}], 1000);
+        animation.pause();
+        animation.currentTime = 500;
+        assert_equals(getComputedStyle(target).gridTemplateRows, '20px minmax(20px, 2fr)');
+        target.style.gridTemplateRows = '10px fit-content(10px)';
+        assert_equals(getComputedStyle(target).gridTemplateRows, '20px minmax(30px, 3fr)');
+      }, 'Invalidate the result for the neutral keyframe if the type of <track-size> changes.');
+    </script>
+  </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-neutral-keyframe-003.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-neutral-keyframe-003.html
new file mode 100644
index 0000000000..5ffd67528c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-neutral-keyframe-003.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>grid-template-rows neutral keyframe</title>
+    <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+    <meta name="assert" content="grid-template-rows supports neutral keyframe.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <body>
+    <div id="target"></div>
+    <script>
+      test(() => {
+        target.style.gridTemplateRows = '200px';
+        var animation = target.animate([{}, {gridTemplateRows: '30px 300px'}], 1000);
+        animation.pause();
+        animation.currentTime = 500;
+        assert_equals(getComputedStyle(target).gridTemplateRows, '30px 300px');
+        target.style.gridTemplateRows = '20px 200px';
+        assert_equals(getComputedStyle(target).gridTemplateRows, '25px 250px');
+        target.style.gridTemplateRows = '200px';
+        assert_equals(getComputedStyle(target).gridTemplateRows, '30px 300px');
+      }, 'Invalidate the result for the neutral keyframe if the size of the list changes.');
+    </script>
+  </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-neutral-keyframe-004.html b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-neutral-keyframe-004.html
new file mode 100644
index 0000000000..941e843624
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/animation/grid-template-rows-neutral-keyframe-004.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>grid-template-rows neutral keyframe</title>
+    <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+    <meta name="assert" content="grid-template-rows supports neutral keyframe.">
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <script src="/css/support/interpolation-testcommon.js"></script>
+  </head>
+  <body>
+    <div id="target"></div>
+    <script>
+      test(() => {
+        target.style.gridTemplateRows = '10px [a] 20px [b]';
+        var animation = target.animate([{}, {gridTemplateRows: '30px 40px [c]'}], 1000);
+        animation.pause();
+        animation.currentTime = 250;
+        assert_equals(getComputedStyle(target).gridTemplateRows, '15px [a] 25px [b]');
+        target.style.gridTemplateRows = '10px 20px [d]';
+        assert_equals(getComputedStyle(target).gridTemplateRows, '15px 25px [d]');
+      }, 'Invalidate the result for the neutral keyframe if the named lines change.');
+    </script>
+  </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/anonymous-grid-items-001.html b/testing/web-platform/tests/css/css-grid/anonymous-grid-items-001.html
new file mode 100644
index 0000000000..f5ddd5c340
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/anonymous-grid-items-001.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Grid: anonynous grid items.</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
+<link rel="match" href="reference/anonymous-grid-items-001-ref.html">
+<meta name="assert" content="This test ensures that anonymous grid items are supported."/>
+<body>
+  <div>The test passes if it has the same output than the reference.</div>
+  <div style="display: grid;">
+    anonymous item
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/child-border-box-and-max-content-001-ref.html b/testing/web-platform/tests/css/css-grid/child-border-box-and-max-content-001-ref.html
new file mode 100644
index 0000000000..df8393a1f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/child-border-box-and-max-content-001-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+<title>grid item with border-box and max-content should include borders</title>
+<style>
+    .grid {
+        display: grid;
+        grid-auto-columns: 1fr;
+        grid-auto-flow: column;
+        border: 1px solid red;
+        width: max-content;
+    }
+    .item {
+        width: 50px;
+        background-color: blue;
+        padding: 10px 20px;
+    }
+    .content {
+        width: 50px;
+        height: 50px;
+        background-color: green;
+    }
+</style>
+<div class="grid">
+    <div class="item">
+        <div class="content"></div>
+    </div>
+    <div class="item">
+        <div class="content"></div>
+    </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/child-border-box-and-max-content-001.html b/testing/web-platform/tests/css/css-grid/child-border-box-and-max-content-001.html
new file mode 100644
index 0000000000..8d3cda88b4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/child-border-box-and-max-content-001.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+<title>grid item with border-box and max-content should include borders</title>
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3">
+<link rel="match" href="child-border-box-and-max-content-001-ref.html">
+<style>
+    .grid {
+        display: grid;
+        grid-auto-columns: 1fr;
+        grid-auto-flow: column;
+        border: 1px solid red;
+        width: max-content;
+    }
+    .item {
+        max-width: max-content;
+        box-sizing: border-box;
+
+        padding: 10px 20px;
+        background-color: blue;
+    }
+    .content {
+        width: 50px;
+        height: 50px;
+        background-color: green;
+    }
+</style>
+<div class="grid">
+    <div class="item">
+        <div class="content"></div>
+    </div>
+    <div class="item">
+        <div class="content"></div>
+    </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/child-border-box-and-max-content-002-ref.html b/testing/web-platform/tests/css/css-grid/child-border-box-and-max-content-002-ref.html
new file mode 100644
index 0000000000..df8393a1f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/child-border-box-and-max-content-002-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+<title>grid item with border-box and max-content should include borders</title>
+<style>
+    .grid {
+        display: grid;
+        grid-auto-columns: 1fr;
+        grid-auto-flow: column;
+        border: 1px solid red;
+        width: max-content;
+    }
+    .item {
+        width: 50px;
+        background-color: blue;
+        padding: 10px 20px;
+    }
+    .content {
+        width: 50px;
+        height: 50px;
+        background-color: green;
+    }
+</style>
+<div class="grid">
+    <div class="item">
+        <div class="content"></div>
+    </div>
+    <div class="item">
+        <div class="content"></div>
+    </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/child-border-box-and-max-content-002.html b/testing/web-platform/tests/css/css-grid/child-border-box-and-max-content-002.html
new file mode 100644
index 0000000000..fe3e6db0d7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/child-border-box-and-max-content-002.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
+<title>grid item with border-box and max-content should include borders</title>
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3">
+<link rel="match" href="child-border-box-and-max-content-002-ref.html">
+<style>
+    .grid {
+        display: grid;
+        grid-template-columns: fit-content(30px) fit-content(80px);
+        border: 1px solid red;
+        width: max-content;
+    }
+    .item {
+        max-width: max-content;
+        box-sizing: border-box;
+
+        padding: 10px 20px;
+        background-color: blue;
+    }
+    .content {
+        width: 50px;
+        height: 50px;
+        background-color: green;
+    }
+</style>
+<div class="grid">
+    <div class="item">
+        <div class="content"></div>
+    </div>
+    <div class="item">
+        <div class="content"></div>
+    </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/chrome-bug-001.html b/testing/web-platform/tests/css/css-grid/chrome-bug-001.html
new file mode 100644
index 0000000000..7b24f41a47
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/chrome-bug-001.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
+<link rel="help" href="https://crbug.com/1040069">
+<meta name="assert" content="This test checks that a dynamic change relative position paints the grid correctly."/>
+<style>
+#target {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 50px);
+
+  position: relative;
+  top: 10px;
+}
+</style>
+<p>Test passes if there is a filled green square.</p>
+<div id="target">
+  <div style="width: 100px; height: 100px; background: green;"></div>
+</div>
+<script>
+document.body.offsetTop;
+document.getElementById('target').style.top = '0px';
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/chrome-crash-001.html b/testing/web-platform/tests/css/css-grid/chrome-crash-001.html
new file mode 100644
index 0000000000..c9ea9332a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/chrome-crash-001.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=991446">
+<meta name="assert" content="The renderer should not crash.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body style="display: inline-grid; align-items: end;">
+  <div style="border-top-color: inherit;"></div>
+  text
+</body>
+<script>
+test(() => {
+  document.body.offsetTop;
+  document.body.style.alignItems = '';
+  document.body.offsetTop;
+}, 'The renderer should not crash.');
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/dynamic-grid-with-auto-fill.html b/testing/web-platform/tests/css/css-grid/dynamic-grid-with-auto-fill.html
new file mode 100644
index 0000000000..2691674165
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/dynamic-grid-with-auto-fill.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/">
+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div id="target" style="height: 150px;">
+  <div style="display: grid; width: 100px; grid-template-rows: repeat(auto-fill, 100px); min-height: 100%; background: green;"></div>
+</div>
+<script>
+document.body.offsetTop;
+document.getElementById('target').style.height = '50px';
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/dynamic-grid-within-flexbox.html b/testing/web-platform/tests/css/css-grid/dynamic-grid-within-flexbox.html
new file mode 100644
index 0000000000..2b8824f994
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/dynamic-grid-within-flexbox.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/">
+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div id="target" style="display: flex; width: 100px; height: 200px;">
+  <div style="flex-grow: 1; min-height: 100px; display: grid;">
+    <div style="background: green;"></div>
+  </div>
+</div>
+<script>
+document.body.offsetTop;
+document.getElementById('target').style.alignItems = 'start';
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/empty-grid-within-flexbox.html b/testing/web-platform/tests/css/css-grid/empty-grid-within-flexbox.html
new file mode 100644
index 0000000000..1941800cb1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/empty-grid-within-flexbox.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Sizing of an empty grid within a flexbox</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"/>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1246609">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Checks that the intrisic sizes of an empty grid are correctly computed.">
+<style>
+  .flex {
+    display: flex;
+    width: 100px;
+    height: 100px;
+    background-color: red;
+  }
+
+  .flex-item {
+    width: 50px;
+    background-color: green;
+  }
+
+  .empty-grid {
+    display: grid;
+    grid-gap: 50px;
+  }
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div class="flex">
+  <div class="flex-item"></div>
+  <div class="empty-grid"></div>
+  <div class="flex-item"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/fieldset-first-line-crash.html b/testing/web-platform/tests/css/css-grid/fieldset-first-line-crash.html
new file mode 100644
index 0000000000..096558db61
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/fieldset-first-line-crash.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1871513">
+<style>
+*::first-line { }
+.a {
+  display: inline-grid;
+}
+</style>
+<fieldset class="a">
diff --git a/testing/web-platform/tests/css/css-grid/firefox-bug-1881495-ref.html b/testing/web-platform/tests/css/css-grid/firefox-bug-1881495-ref.html
new file mode 100644
index 0000000000..aa6275c4a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/firefox-bug-1881495-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+:root {
+  font: 30px/1 Ahem;
+}
+.grid {
+  display: inline-grid;
+  border: 4px solid gray;
+  vertical-align: top;
+}
+</style>
+<div class="grid" style="inline-size: 1em">
+  <div>
+    X<br>X
+  </div>
+</div>
+<div class="grid" style="inline-size: 2em">
+  <div>
+    X<br>X
+  </div>
+</div>
+<div class="grid" style="inline-size: 3em">
+  <div>
+    X<br>X
+  </div>
+</div>
+<br><br>
+<div class="grid" style="writing-mode: vertical-rl; inline-size: 1em">
+  <div>
+    X<br>X
+  </div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; inline-size: 2em">
+  <div>
+    X<br>X
+  </div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; inline-size: 3em">
+  <div>
+    X<br>X
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/firefox-bug-1881495.html b/testing/web-platform/tests/css/css-grid/firefox-bug-1881495.html
new file mode 100644
index 0000000000..355d26dfb0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/firefox-bug-1881495.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1881671">
+<link rel="match" href="firefox-bug-1881495-ref.html">
+<meta name="assert" content="An auto-block-size grid should choose a content-based block-size that accounts for linewrapping in its content-sized items">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+:root {
+  font: 30px/1 Ahem;
+}
+.grid {
+  display: inline-grid;
+  border: 4px solid gray;
+  justify-items: start;
+  vertical-align: top;
+}
+.negMargin {
+  margin-inline-end: -1px;
+}
+</style>
+<div class="grid" style="inline-size: 1em">
+  <div>
+    X
+    <span class="negMargin">X</span>
+  </div>
+</div>
+<div class="grid" style="inline-size: 2em">
+  <div>
+    X
+    <span class="negMargin">X</span>
+  </div>
+</div>
+<div class="grid" style="inline-size: 3em">
+  <div>
+    X
+    <span class="negMargin">X</span>
+  </div>
+</div>
+<br>
+<br>
+<div class="grid" style="writing-mode: vertical-rl; inline-size: 1em">
+  <div>
+    X
+    <span class="negMargin">X</span>
+  </div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; inline-size: 2em">
+  <div>
+    X
+    <span class="negMargin">X</span>
+  </div>
+</div>
+<div class="grid" style="writing-mode: vertical-rl; inline-size: 3em">
+  <div>
+    X
+    <span class="negMargin">X</span>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-child-percent-basis-resize-1-ref.html b/testing/web-platform/tests/css/css-grid/grid-child-percent-basis-resize-1-ref.html
new file mode 100644
index 0000000000..2ee6b077d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-child-percent-basis-resize-1-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test Reference: bug 1584018</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+
+<style>
+  .container {
+    width: 100px;
+    height: 100px;
+  }
+
+  .scroll-inner {
+    overflow:scroll;
+    height:100%;
+  }
+
+</style>
+
+<div class="container">
+  <div class="scroll-inner">
+    <div>0</div>
+    <div>1</div>
+    <div>2</div>
+    <div>3</div>
+    <div>4</div>
+    <div>5</div>
+    <div>6</div>
+    <div>7</div>
+    <div>8</div>
+    <div>9</div>
+    <div>0</div>
+    <div>1</div>
+    <div>2</div>
+    <div>3</div>
+    <div>4</div>
+    <div>5</div>
+    <div>6</div>
+    <div>7</div>
+    <div>8</div>
+    <div>9</div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-child-percent-basis-resize-1.html b/testing/web-platform/tests/css/css-grid/grid-child-percent-basis-resize-1.html
new file mode 100644
index 0000000000..7fb5d8e117
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-child-percent-basis-resize-1.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Testcase, bug 1584018</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1584018">
+<link rel="match" href="grid-child-percent-basis-resize-1-ref.html">
+
+<style>
+  .grid-container {
+    display: grid;
+    width: 100px;
+  }
+
+  .grid-item {
+  }
+
+  .scroll-outer {
+    overflow:hidden;
+    /* this combination is important */
+    height: 100%;
+    max-height: 100px;
+  }
+
+  .scroll-inner {
+    overflow:scroll;
+    height:100%;
+  }
+
+</style>
+
+<div class="grid-container">
+  <div class="grid-item">
+    <div class="scroll-outer">
+      <div class="scroll-inner">
+        <div>0</div>
+        <div>1</div>
+        <div>2</div>
+        <div>3</div>
+        <div>4</div>
+        <div>5</div>
+        <div>6</div>
+        <div>7</div>
+        <div>8</div>
+        <div>9</div>
+        <div>0</div>
+        <div>1</div>
+        <div>2</div>
+        <div>3</div>
+        <div>4</div>
+        <div>5</div>
+        <div>6</div>
+        <div>7</div>
+        <div>8</div>
+        <div>9</div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-container-baseline-synthesized-001.html b/testing/web-platform/tests/css/css-grid/grid-container-baseline-synthesized-001.html
new file mode 100644
index 0000000000..431b1867f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-container-baseline-synthesized-001.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Grid Test: Grid container synthesizing baseline from empty item</title>
+<meta name="assert" content="An inline-grid with an empty grid item should reliably synthesize an alphabetic (not central) baseline when aligning in a 'horizontal-tb' block's line-box.">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#text-baselines">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#grid-baselines">
+<link rel="match" href="reference/grid-container-baseline-synthesized-001-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+:root {
+  font: 20px/1 Ahem;
+}
+.container {
+  display: inline-grid;
+  grid-template-rows: 60px;
+  grid-template-columns: 60px;
+  background: cyan;
+}
+.f { display: flex; }
+.g { display: grid; }
+.t { display: table; }
+.container > * {
+  border: 3px solid black;
+}
+.vrl-items > * { writing-mode: vertical-rl; }
+.vlr-items > * { writing-mode: vertical-lr; }
+.srl-items > * { writing-mode: sideways-rl; }
+.slr-items > * { writing-mode: sideways-lr; }
+</style>
+X
+<div class="container"><div></div></div>
+<div class="container"><div class="g"></div></div>
+<div class="container"><div class="f"></div></div>
+<div class="container"><div class="t"></div></div>
+<br><br>
+X
+<div class="container vrl-items"><div></div></div>
+<div class="container vrl-items"><div class="g"></div></div>
+<div class="container vrl-items"><div class="f"></div></div>
+<div class="container vrl-items"><div class="t"></div></div>
+<br><br>
+X
+<div class="container vlr-items"><div></div></div>
+<div class="container vlr-items"><div class="g"></div></div>
+<div class="container vlr-items"><div class="f"></div></div>
+<div class="container vlr-items"><div class="t"></div></div>
+<br><br>
+X
+<div class="container srl-items"><div></div></div>
+<div class="container srl-items"><div class="g"></div></div>
+<div class="container srl-items"><div class="f"></div></div>
+<div class="container srl-items"><div class="t"></div></div>
+<br><br>
+X
+<div class="container slr-items"><div></div></div>
+<div class="container slr-items"><div class="g"></div></div>
+<div class="container slr-items"><div class="f"></div></div>
+<div class="container slr-items"><div class="t"></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-container-baseline-synthesized-002.html b/testing/web-platform/tests/css/css-grid/grid-container-baseline-synthesized-002.html
new file mode 100644
index 0000000000..c11c8ac1b9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-container-baseline-synthesized-002.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Grid Test: Grid container synthesizing baseline from empty item</title>
+<meta name="assert" content="An inline-grid with an empty grid item should reliably synthesize an alphabetic (not central) baseline when aligning in a 'horizontal-tb' block's line-box.">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#text-baselines">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#grid-baselines">
+<link rel="match" href="reference/grid-container-baseline-synthesized-001-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+:root {
+  font: 20px/1 Ahem;
+}
+.container {
+  display: inline-grid;
+  grid-template-rows: 60px;
+  grid-template-columns: 60px;
+  background: cyan;
+  writing-mode: vertical-rl;
+}
+.f { display: flex; }
+.g { display: grid; }
+.t { display: table; }
+.container > * {
+  border: 3px solid black;
+}
+.vrl-items > * { writing-mode: vertical-rl; }
+.vlr-items > * { writing-mode: vertical-lr; }
+.srl-items > * { writing-mode: sideways-rl; }
+.slr-items > * { writing-mode: sideways-lr; }
+</style>
+X
+<div class="container"><div></div></div>
+<div class="container"><div class="g"></div></div>
+<div class="container"><div class="f"></div></div>
+<div class="container"><div class="t"></div></div>
+<br><br>
+X
+<div class="container vrl-items"><div></div></div>
+<div class="container vrl-items"><div class="g"></div></div>
+<div class="container vrl-items"><div class="f"></div></div>
+<div class="container vrl-items"><div class="t"></div></div>
+<br><br>
+X
+<div class="container vlr-items"><div></div></div>
+<div class="container vlr-items"><div class="g"></div></div>
+<div class="container vlr-items"><div class="f"></div></div>
+<div class="container vlr-items"><div class="t"></div></div>
+<br><br>
+X
+<div class="container srl-items"><div></div></div>
+<div class="container srl-items"><div class="g"></div></div>
+<div class="container srl-items"><div class="f"></div></div>
+<div class="container srl-items"><div class="t"></div></div>
+<br><br>
+X
+<div class="container slr-items"><div></div></div>
+<div class="container slr-items"><div class="g"></div></div>
+<div class="container slr-items"><div class="f"></div></div>
+<div class="container slr-items"><div class="t"></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-container-baseline-synthesized-003.html b/testing/web-platform/tests/css/css-grid/grid-container-baseline-synthesized-003.html
new file mode 100644
index 0000000000..9964c3dfb4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-container-baseline-synthesized-003.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Grid Test: Grid container synthesizing baseline from empty item</title>
+<meta name="assert" content="An inline-grid with an empty grid item should reliably synthesize an alphabetic (not central) baseline when aligning in a 'horizontal-tb' block's line-box.">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#text-baselines">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#grid-baselines">
+<link rel="match" href="reference/grid-container-baseline-synthesized-001-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+:root {
+  font: 20px/1 Ahem;
+}
+.container {
+  display: inline-grid;
+  grid-template-rows: 60px;
+  grid-template-columns: 60px;
+  background: cyan;
+}
+.f { display: flex; }
+.g { display: grid; }
+.t { display: table; }
+.container > * {
+  border: 3px solid black;
+  overflow: hidden;
+}
+.vrl-items > * { writing-mode: vertical-rl; }
+.vlr-items > * { writing-mode: vertical-lr; }
+.srl-items > * { writing-mode: sideways-rl; }
+.slr-items > * { writing-mode: sideways-lr; }
+</style>
+X
+<div class="container"><div></div></div>
+<div class="container"><div class="g"></div></div>
+<div class="container"><div class="f"></div></div>
+<div class="container"><div class="t"></div></div>
+<br><br>
+X
+<div class="container vrl-items"><div></div></div>
+<div class="container vrl-items"><div class="g"></div></div>
+<div class="container vrl-items"><div class="f"></div></div>
+<div class="container vrl-items"><div class="t"></div></div>
+<br><br>
+X
+<div class="container vlr-items"><div></div></div>
+<div class="container vlr-items"><div class="g"></div></div>
+<div class="container vlr-items"><div class="f"></div></div>
+<div class="container vlr-items"><div class="t"></div></div>
+<br><br>
+X
+<div class="container srl-items"><div></div></div>
+<div class="container srl-items"><div class="g"></div></div>
+<div class="container srl-items"><div class="f"></div></div>
+<div class="container srl-items"><div class="t"></div></div>
+<br><br>
+X
+<div class="container slr-items"><div></div></div>
+<div class="container slr-items"><div class="g"></div></div>
+<div class="container slr-items"><div class="f"></div></div>
+<div class="container slr-items"><div class="t"></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-container-baseline-synthesized-004.html b/testing/web-platform/tests/css/css-grid/grid-container-baseline-synthesized-004.html
new file mode 100644
index 0000000000..d8c4f630ab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-container-baseline-synthesized-004.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Grid Test: Grid container synthesizing baseline from empty item</title>
+<meta name="assert" content="An inline-grid with an empty grid item should reliably synthesize an alphabetic (not central) baseline when aligning in a 'horizontal-tb' block's line-box.">
+<link rel="help" href="https://www.w3.org/TR/css-writing-modes-4/#text-baselines">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#grid-baselines">
+<link rel="match" href="reference/grid-container-baseline-synthesized-001-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+:root {
+  font: 20px/1 Ahem;
+}
+.container {
+  display: inline-grid;
+  grid-template-rows: 60px;
+  grid-template-columns: 60px;
+  background: cyan;
+  writing-mode: vertical-rl;
+}
+.f { display: flex; }
+.g { display: grid; }
+.t { display: table; }
+.container > * {
+  border: 3px solid black;
+  overflow: hidden;
+}
+.vrl-items > * { writing-mode: vertical-rl; }
+.vlr-items > * { writing-mode: vertical-lr; }
+.srl-items > * { writing-mode: sideways-rl; }
+.slr-items > * { writing-mode: sideways-lr; }
+</style>
+X
+<div class="container"><div></div></div>
+<div class="container"><div class="g"></div></div>
+<div class="container"><div class="f"></div></div>
+<div class="container"><div class="t"></div></div>
+<br><br>
+X
+<div class="container vrl-items"><div></div></div>
+<div class="container vrl-items"><div class="g"></div></div>
+<div class="container vrl-items"><div class="f"></div></div>
+<div class="container vrl-items"><div class="t"></div></div>
+<br><br>
+X
+<div class="container vlr-items"><div></div></div>
+<div class="container vlr-items"><div class="g"></div></div>
+<div class="container vlr-items"><div class="f"></div></div>
+<div class="container vlr-items"><div class="t"></div></div>
+<br><br>
+X
+<div class="container srl-items"><div></div></div>
+<div class="container srl-items"><div class="g"></div></div>
+<div class="container srl-items"><div class="f"></div></div>
+<div class="container srl-items"><div class="t"></div></div>
+<br><br>
+X
+<div class="container slr-items"><div></div></div>
+<div class="container slr-items"><div class="g"></div></div>
+<div class="container slr-items"><div class="f"></div></div>
+<div class="container slr-items"><div class="t"></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/explicit-grid-size-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/explicit-grid-size-001.html
new file mode 100644
index 0000000000..266c6a568c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/explicit-grid-size-001.html
@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<title>CSS Grid: grid size with explicit grid-template-areas.</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-definition"/>
+<link rel="issue" href="https://crrev.com/603160"/>
+<meta name="assert" content="Test ensures that the explicit grid size is set by the maximum of the grid-template-columns|rows properties and grid-template-areas."/>
+
+<link href="/css/support/grid.css" rel="stylesheet"/>
+<style>
+
+.grid {
+    grid-auto-columns: 10px;
+    grid-auto-rows: 10px;
+    position: relative;
+}
+
+.oneColumnOneRow {
+    grid-template-columns: 50px;
+    grid-template-rows: 50px;
+}
+
+.twoColumnsOneRow {
+    grid-template-columns: 50px 50px;
+    grid-template-rows: 50px;
+}
+
+.oneColumnTwoRows {
+    grid-template-columns: 50px;
+    grid-template-rows: 50px 50px;
+}
+
+.twoColumnsTwoRows {
+    grid-template-columns: 50px 50px;
+    grid-template-rows: 50px 50px;
+}
+
+.oneColumnOneRowAreas {
+    grid-template-areas: "a";
+}
+
+.twoColumnsOneRowAreas {
+    grid-template-areas: "a b";
+}
+
+.oneColumnTwoRowsAreas {
+    grid-template-areas: "a"
+                         "b";
+}
+
+.twoColumnsTwoRowsAreas {
+    grid-template-areas: "a b"
+                         "c d";
+}
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+<div id="log"></div>
+
+<div class="grid">
+    <div class="autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">
+    </div>
+</div>
+
+<div class="grid oneColumnOneRow">
+    <div class="autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+    </div>
+</div>
+
+<div class="grid oneColumnOneRowAreas">
+    <div class="autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">
+    </div>
+</div>
+
+<div class="grid oneColumnTwoRows">
+    <div class="autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+    </div>
+    <div class="autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50">
+    </div>
+</div>
+
+<div class="grid oneColumnTwoRowsAreas">
+    <div class="autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">
+    </div>
+    <div class="autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="10" data-expected-width="10" data-expected-height="10">
+    </div>
+</div>
+
+<div class="grid twoColumnsOneRow">
+    <div class="autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+    </div>
+    <div class="autoRowAutoColumn"
+        data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+    </div>
+</div>
+
+<div class="grid twoColumnsOneRowAreas">
+    <div class="autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">
+    </div>
+    <div class="autoRowAutoColumn"
+        data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="10">
+    </div>
+</div>
+
+<div class="grid twoColumnsTwoRows">
+    <div class="autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+    </div>
+    <div class="autoRowAutoColumn"
+        data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+    </div>
+    <div class="autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50">
+    </div>
+    <div class="autoRowAutoColumn"
+        data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50">
+    </div>
+</div>
+
+<div class="grid twoColumnsTwoRowsAreas">
+    <div class="autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">
+    </div>
+    <div class="autoRowAutoColumn"
+        data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="10">
+    </div>
+    <div class="autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="10" data-expected-width="10" data-expected-height="10">
+    </div>
+    <div class="autoRowAutoColumn"
+        data-offset-x="10" data-offset-y="10" data-expected-width="10" data-expected-height="10">
+    </div>
+</div>
+
+<div class="grid oneColumnOneRow twoColumnsTwoRowsAreas">
+    <div class="autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+    </div>
+    <div class="autoRowAutoColumn"
+        data-offset-x="50" data-offset-y="0" data-expected-width="10" data-expected-height="50">
+    </div>
+    <div class="autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="10">
+    </div>
+    <div class="autoRowAutoColumn"
+        data-offset-x="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">
+    </div>
+</div>
+
+<div class="grid twoColumnsTwoRows oneColumnOneRowAreas">
+    <div class="autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+    </div>
+    <div class="autoRowAutoColumn"
+        data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50">
+    </div>
+    <div class="autoRowAutoColumn"
+        data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50">
+    </div>
+    <div class="autoRowAutoColumn"
+        data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50">
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-distribution-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-distribution-001.html
new file mode 100644
index 0000000000..62fb46deeb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-distribution-001.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<title>CSS Grid Layout Test: free space computation with flex lengths.</title>
+<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-flex-tracks">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#fr-unit">
+<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=150359">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<meta name="assert" content="Test that free space is properly computed after computing fr tracks so that we could use it for content distribution." />
+
+<style>
+.freeSpaceForColumnsGrid {
+    grid-template: 100% / minmax(20px, 0.7fr);
+    width: 50px;
+    height: 100px;
+}
+
+.freeSpaceForRowsGrid {
+    grid-template: minmax(20px, 0.7fr) / 100%;
+    width: 50px;
+    height: 100px;
+}
+
+.container { position: relative; }
+
+.item {
+    width: 100%;
+    height: 50px;
+    background-color: red;
+}
+
+.item2 {
+    width: 50px;
+    height: 100%;
+    background-color: red;
+}
+
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid');">
+
+<p>Grid with justify-content: start.</p>
+<div class="container">
+    <div class="grid freeSpaceForColumnsGrid justifyContentStart">
+        <div class="item" data-offset-x="0" data-offset-y="0" data-expected-width="35" data-expected-height="50"></div>
+    </div>
+</div>
+
+<p>Grid with justify-content: center.</p>
+<div class="container">
+    <div class="grid freeSpaceForColumnsGrid justifyContentCenter">
+        <div class="item" data-offset-x="8" data-offset-y="0" data-expected-width="35" data-expected-height="50"></div>
+    </div>
+</div>
+
+<p>Grid with justify-content: end.</p>
+<div class="container">
+    <div class="grid freeSpaceForColumnsGrid justifyContentEnd">
+        <div class="item" data-offset-x="15" data-offset-y="0" data-expected-width="35" data-expected-height="50"></div>
+    </div>
+</div>
+
+<p>Grid with align-content: start.</p>
+<div class="container">
+    <div class="grid freeSpaceForRowsGrid alignContentStart">
+        <div class="item2" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="70"></div>
+    </div>
+</div>
+
+<p>Grid with align-content: center.</p>
+<div class="container">
+    <div class="grid freeSpaceForRowsGrid alignContentCenter">
+        <div class="item2" data-offset-x="0" data-offset-y="15" data-expected-width="50" data-expected-height="70"></div>
+    </div>
+</div>
+
+<p>Grid with align-content: end.</p>
+<div class="container">
+    <div class="grid freeSpaceForRowsGrid alignContentEnd">
+        <div class="item2" data-offset-x="0" data-offset-y="30" data-expected-width="50" data-expected-height="70"></div>
+    </div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-resolution-columns-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-resolution-columns-001.html
new file mode 100644
index 0000000000..ce70aa31de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-resolution-columns-001.html
@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Grid Layout Test: Auto repeat tracks, grid-template-columns and flexible lengths.</title>
+<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizes">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#fr-unit">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=235258">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that resolving auto tracks on grid items using <flex> values with grid-template-columns works properly." />
+
+<style>
+.gridFlexContent {
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 50px;
+}
+.gridMaxFlexContent {
+    grid-template-columns: minmax(30px, 2fr);
+    grid-template-rows: 50px;
+}
+.gridTwoMaxFlexContent {
+    grid-template-columns: minmax(10px, 1fr) minmax(10px, 2fr);
+    grid-template-rows: 50px;
+}
+.gridTwoDoubleMaxFlexContent {
+    grid-template-columns: minmax(10px, 0.5fr) minmax(10px, 2fr);
+    grid-template-rows: 50px;
+}
+.gridIgnoreSecondGridItem {
+    grid-template-columns: minmax(300px, 3fr) minmax(150px, 1fr);
+    grid-template-rows: 50px;
+}
+.gridRespectBaseSize {
+    grid-template-columns: minmax(75px, 1fr) minmax(0px, 2fr);
+    grid-template-rows: 50px;
+}
+.gridRespectProportions {
+    grid-template-columns: minmax(0px, .25fr) minmax(0px, .5fr) minmax(0px, 2fr);
+    grid-template-rows: 50px;
+}
+.gridRespectBaseSizeProportions {
+    grid-template-columns: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
+    grid-template-rows: 50px;
+}
+.gridRespectBaseSizeBeforeProportions {
+    grid-template-columns: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
+    grid-template-rows: 50px;
+}
+.firstRowThirdColumn {
+    background-color: yellow;
+    grid-column: 3;
+    grid-row: 1;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div class="constrainedContainer" style="position: relative">
+    <div class="grid gridFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="50">XXX</div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="30" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX</div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridMaxFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="30" data-expected-height="50"></div>
+    </div>
+</div>
+
+<!-- Allow the extra logical space distribution to occur. -->
+<div style="width: 40px; height: 10px">
+    <div class="grid gridMaxFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="width: 100px; height: 10px;">
+    <div class="grid gridMaxFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="100" data-expected-height="50"></div>
+    </div>
+</div>
+
+
+<div class="constrainedContainer">
+    <div class="grid gridTwoMaxFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="10" data-expected-height="50"></div>
+    </div>
+</div>
+
+<!-- Allow the extra logical space distribution to occur. -->
+<div style="width: 60px; height: 10px">
+    <div class="grid gridTwoMaxFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="20" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="40" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="width: 120px; height: 10px;">
+    <div class="grid gridTwoMaxFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="80" data-expected-height="50"></div>
+    </div>
+</div>
+
+
+<div class="constrainedContainer">
+    <div class="grid gridTwoDoubleMaxFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="10" data-expected-height="50"></div>
+    </div>
+</div>
+
+<!-- Allow the extra logical space distribution to occur. -->
+<div style="width: 60px; height: 10px">
+    <div class="grid gridTwoDoubleMaxFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="12" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="48" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="width: 120px; height: 10px;">
+    <div class="grid gridTwoDoubleMaxFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="24" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="96" data-expected-height="50"></div>
+    </div>
+</div>
+
+
+<!-- Custom test for a corner case. -->
+<div style="width: 570px; height: 10px;">
+    <div class="grid gridIgnoreSecondGridItem">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="420" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="150" data-expected-height="50"></div>
+    </div>
+</div>
+
+<!-- Flex track length must be at least its baseSize. -->
+<div style="width: 100px; height: 10px;">
+    <div class="grid gridRespectBaseSize">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="75" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="25" data-expected-height="50"></div>
+    </div>
+</div>
+
+<!-- Flex track lengths must be proportional to their flex factors.. -->
+<div style="width: 275px; height: 10px;">
+    <div class="grid gridRespectProportions">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="25" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="200" data-expected-height="50"></div>
+    </div>
+</div>
+
+<!-- Flex track lengths must be proportional but still respecting their base sizes. -->
+<div style="width: 350px; height: 10px;">
+    <div class="grid gridRespectBaseSizeProportions">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="200" data-expected-height="50"></div>
+    </div>
+</div>
+
+<!-- Not enough space to respect proportions, because minTrackBreadh it's a harder requirement -->
+<div style="width: 275px; height: 10px;">
+    <div class="grid gridRespectBaseSizeBeforeProportions">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="75" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="150" data-expected-height="50"></div>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-resolution-columns-002.html b/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-resolution-columns-002.html
new file mode 100644
index 0000000000..b92eb9f0dd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-resolution-columns-002.html
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Grid Layout Test: Auto repeat tracks, grid-template-columns and minmax sizes.</title>
+<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizes">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#fr-unit">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=235258">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that resolving auto tracks on grid items inside containers using minmax() with grid-template-columns works properly." />
+
+<style>
+.gridMaxMaxContent {
+    grid-template-columns: minmax(10px, max-content) minmax(10px, 1fr);
+    grid-template-rows: 50px;
+}
+
+.gridMinMinContent {
+    grid-template-columns: minmax(10px, 1fr) minmax(min-content, 50px);
+    grid-template-rows: 50px;
+}
+
+.gridWithIntrinsicSizeBiggerThanFlex {
+    grid-template-columns: minmax(min-content, 0.5fr) minmax(18px, 2fr);
+    grid-template-rows: 50px;
+}
+
+.gridShrinkBelowItemsIntrinsicSize {
+    grid-template-columns: minmax(0px, 1fr) minmax(0px, 2fr);
+    grid-template-rows: 50px;
+}
+
+.gridWithNonFlexingItems {
+    grid-template-columns: 40px minmax(min-content, 1fr) auto minmax(20px, 2fr);
+    grid-template-rows: 50px;
+}
+
+.firstRowThirdColumn {
+    grid-column: 3;
+    grid-row: 1;
+}
+.firstRowFourthColumn {
+    grid-column: 4;
+    grid-row: 1;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div class="constrainedContainer">
+    <div class="grid gridMaxMaxContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50">XXXXX</div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="10" data-expected-height="50"></div>
+    </div>
+</div>
+
+<!-- Allow the extra logical space distribution to occur. -->
+<div style="width: 40px; height: 10px">
+    <div class="grid gridMaxMaxContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="30" data-expected-height="50">XXXXX</div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="10" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="width: 110px; height: 10px;">
+    <div class="grid gridMaxMaxContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX</div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="60" data-expected-height="50"></div>
+    </div>
+</div>
+
+
+<div class="constrainedContainer">
+    <div class="grid gridMinMinContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50">XX XX</div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="20" data-expected-height="50">XX XX</div>
+    </div>
+</div>
+
+<!-- Allow the extra logical space distribution to occur. -->
+<div style="width: 40px; height: 10px">
+    <div class="grid gridMinMinContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50">XX XX</div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="30" data-expected-height="50">XX XX</div>
+    </div>
+</div>
+
+<div style="width: 110px; height: 10px;">
+    <div class="grid gridMinMinContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="60" data-expected-height="50">XX XX</div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="50" data-expected-height="50">XX XX</div>
+    </div>
+</div>
+
+
+<div style="width: 220px; height: 10px;">
+    <div class="grid gridWithIntrinsicSizeBiggerThanFlex">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="200" data-expected-height="50">
+            <div style="display: inline-block; width: 200px;"></div>
+        </div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="20" data-expected-height="50"></div>
+    </div>
+</div>
+
+
+<div style="width: 120px; height: 10px;">
+    <div class="grid gridShrinkBelowItemsIntrinsicSize">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50">
+            <div style="display: inline-block; width: 200px;"></div>
+        </div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="80" data-expected-height="50">XXXXXXXXXX</div>
+    </div>
+</div>
+
+
+<!-- No space available for the <flex> -->
+<div style="width: 220px; height: 10px;">
+    <div class="grid gridWithNonFlexingItems">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50">
+            <div style="display: inline-block; width: 100px;"></div>
+        </div>
+        <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="100" data-expected-height="50">XXXXXXXXXX XXXXXXXXX</div>
+        <div class="sizedToGridArea firstRowFourthColumn" data-expected-width="20" data-expected-height="50"></div>
+    </div>
+</div>
+
+<!-- The second track should be sized after the min-content as the <flex> value should be too small. -->
+<div style="width: 380px; height: 10px;">
+    <div class="grid gridWithNonFlexingItems">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50">
+            <div style="display: inline-block; width: 100px;"></div>
+        </div>
+        <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="200" data-expected-height="50">XXXXXXXXXX XXXXXXXXX</div>
+        <div class="sizedToGridArea firstRowFourthColumn" data-expected-width="40" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="width: 400px; height: 10px;">
+    <div class="grid gridWithNonFlexingItems">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50">
+            <div style="display: inline-block; width: 100px;"></div>
+        </div>
+        <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="200" data-expected-height="50">XXXXXXXXXX XXXXXXXXX</div>
+        <div class="sizedToGridArea firstRowFourthColumn" data-expected-width="60" data-expected-height="50"></div>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-resolution-rows-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-resolution-rows-001.html
new file mode 100644
index 0000000000..d10b84014d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-resolution-rows-001.html
@@ -0,0 +1,253 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Grid Layout Test: Auto repeat tracks, grid-template-rows and flexible lengths.</title>
+<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizes">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#fr-unit">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=235258">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that resolving auto tracks on grid items using <flex> values with grid-template-rows works properly." />
+
+<style>
+.gridFlexContent {
+    grid-template-columns: 50px;
+    grid-template-rows: 1fr 1fr;
+}
+.gridMaxFlexContent {
+    grid-template-columns: 50px;
+    grid-template-rows: minmax(30px, 2fr);
+}
+.gridTwoMaxFlexContent {
+    grid-template-columns: 50px;
+    grid-template-rows: minmax(10px, 1fr) minmax(10px, 2fr);
+}
+.gridTwoDoubleMaxFlexContent {
+    grid-template-columns: 50px;
+    grid-template-rows: minmax(10px, 0.5fr) minmax(10px, 2fr);
+}
+.gridRespectBaseSize {
+    grid-template-columns: 50px;
+    grid-template-rows: minmax(75px, 1fr) minmax(0px, 2fr);
+}
+.gridRespectProportions {
+    grid-template-columns: 50px;
+    grid-template-rows: minmax(25px, .25fr) minmax(0px, .5fr) minmax(0px, 2fr);
+}
+.gridRespectBaseSizeProportions {
+    grid-template-columns: 50px;
+    grid-template-rows: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
+}
+.gridRespectBaseSizeBeforeProportions {
+    grid-template-columns: 50px;
+    grid-template-rows: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
+}
+.thirdRowFirstColumn {
+    background-color: yellow;
+    grid-column: 1;
+    grid-row: 3;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div class="grid gridFlexContent constrainedContainer" style="position: relative;">
+    <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="30">X<br>X<br>X</div>
+    <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="30" data-expected-width="50" data-expected-height="50">X<br>X<br>X<br>X<br>X</div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridMaxFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
+    </div>
+</div>
+
+<!-- Allow the extra logical space distribution to occur. -->
+<div style="width: 10px; height: 40px">
+    <div class="grid gridMaxFlexContent" style="height: 100%;">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 40px">
+    <div class="grid gridMaxFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 100px;">
+    <div class="grid gridMaxFlexContent" style="height: 100%;">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 100px;">
+    <div class="grid gridMaxFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridTwoMaxFlexContent" style="height: 100%">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridTwoMaxFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
+    </div>
+</div>
+
+<!-- Allow the extra logical space distribution to occur. -->
+<div style="width: 10px; height: 60px">
+    <div class="grid gridTwoMaxFlexContent" style="height: 100%">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 60px">
+    <div class="grid gridTwoMaxFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 120px;">
+    <div class="grid gridTwoMaxFlexContent" style="height: 100%">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 120px;">
+    <div class="grid gridTwoMaxFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+    </div>
+</div>
+
+<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
+<div class="constrainedContainer">
+    <div class="grid gridTwoDoubleMaxFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
+    </div>
+</div>
+
+<!-- Allow the extra logical space distribution to occur. -->
+<div style="width: 10px; height: 60px">
+    <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="12"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="48"></div>
+    </div>
+</div>
+
+<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
+<div style="width: 10px; height: 60px">
+    <div class="grid gridTwoDoubleMaxFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 120px;">
+    <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="24"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="96"></div>
+    </div>
+</div>
+
+<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
+<div style="width: 10px; height: 120px;">
+    <div class="grid gridTwoDoubleMaxFlexContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
+    </div>
+</div>
+
+<!-- Flex track length must be at least its baseSize. -->
+<div style="width: 10px; height: 100px;">
+    <div class="grid gridRespectBaseSize" style="height: 100%;">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="75"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 100px;">
+    <div class="grid gridRespectBaseSize">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="75"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="150"></div>
+    </div>
+</div>
+
+<!-- Flex track lengths must be proportional to their flex factors.. -->
+<div style="width: 10px; height: 275px;">
+    <div class="grid gridRespectProportions" style="height: 100%;">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="200"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 275px;">
+    <div class="grid gridRespectProportions">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="13"></div>
+        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+    </div>
+</div>
+
+<!-- Flex track lengths must be proportional but still respecting their base sizes. -->
+<div style="width: 10px; height: 350px;">
+    <div class="grid gridRespectBaseSizeProportions" style="height: 100%;">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
+        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="200"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 350px;">
+    <div class="grid gridRespectBaseSizeProportions">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
+        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+    </div>
+</div>
+
+<!-- Not enough space to respect proportions, because minTrackBreadh it's a harder requirement -->
+<div style="width: 10px; height: 275px;">
+    <div class="grid gridRespectBaseSizeBeforeProportions" style="height: 100%;">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="75"></div>
+        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="150"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 275px;">
+    <div class="grid gridRespectBaseSizeBeforeProportions">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
+        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-resolution-rows-002.html b/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-resolution-rows-002.html
new file mode 100644
index 0000000000..d668a93a32
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-resolution-rows-002.html
@@ -0,0 +1,220 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Grid Layout Test: Auto repeat tracks, grid-template-rows and minmax sizes.</title>
+<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizes">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#fr-unit">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=235258">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that resolving auto tracks on grid items inside containers using minmax() with grid-template-rows works properly." />
+
+<style>
+.gridMaxMaxContent {
+    grid-template-columns: 50px;
+    grid-template-rows: minmax(10px, max-content) minmax(10px, 1fr);
+}
+
+.gridMinMinContent {
+    grid-template-columns: 50px;
+    grid-template-rows: minmax(10px, 1fr) minmax(min-content, 50px);
+}
+
+.gridWithIntrinsicSizeBiggerThanFlex {
+    grid-template-columns: 50px;
+    grid-template-rows: minmax(min-content, 0.5fr) minmax(18px, 2fr);
+}
+
+.gridShrinkBelowItemsIntrinsicSize {
+    grid-template-columns: 50px;
+    grid-template-rows: minmax(0px, 1fr) minmax(0px, 2fr);
+}
+
+.gridWithNonFlexingItems {
+    grid-template-columns: 50px;
+    grid-template-rows: 40px minmax(min-content, 1fr) auto minmax(20px, 2fr);
+}
+
+.thirdRowFirstColumn {
+    grid-column: 1;
+    grid-row: 3;
+}
+.fourthRowFirstColumn {
+    grid-column: 1;
+    grid-row: 4;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div class="constrainedContainer">
+    <div class="grid gridMaxMaxContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+    </div>
+</div>
+
+<!-- Allow the extra logical space distribution to occur. -->
+<div style="width: 10px; height: 40px">
+    <div class="grid gridMaxMaxContent" style="height: 100%">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 40px">
+    <div class="grid gridMaxMaxContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 110px;">
+    <div class="grid gridMaxMaxContent" style="height: 100%">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 110px;">
+    <div class="grid gridMaxMaxContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridMinMinContent" style="height: 100%">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX XXXX</div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXX</div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridMinMinContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXX</div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div>
+    </div>
+</div>
+
+<!-- Allow the extra logical space distribution to occur. -->
+<div style="width: 10px; height: 40px">
+    <div class="grid gridMinMinContent" style="height: 100%">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX XXXX</div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXX</div>
+    </div>
+</div>
+
+<div class="grid gridMinMinContent" style="height: 40px">
+    <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX XXXX</div>
+    <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXX</div>
+</div>
+
+<div style="width: 10px; height: 110px;">
+    <div class="grid gridMinMinContent" style="height: 100%">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXX</div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 110px;">
+    <div class="grid gridMinMinContent">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXX</div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 60px;">
+    <div class="grid gridWithIntrinsicSizeBiggerThanFlex" style="height: 100%">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
+    </div>
+</div>
+
+<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
+<div style="width: 10px; height: 60px;">
+    <div class="grid gridWithIntrinsicSizeBiggerThanFlex">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 60px;">
+    <div class="grid gridShrinkBelowItemsIntrinsicSize" style="height: 100%">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 60px;">
+    <div class="grid gridShrinkBelowItemsIntrinsicSize">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
+    </div>
+</div>
+
+<!-- No space available for the <flex> -->
+<div style="width: 10px; height: 100px;">
+    <div class="grid gridWithNonFlexingItems" style="height: 100%">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 100px;">
+    <div class="grid gridWithNonFlexingItems">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
+    </div>
+</div>
+
+<!-- The second track should be sized after the min-content as the <flex> value should be too small. -->
+<div style="width: 10px; height: 180px;">
+    <div class="grid gridWithNonFlexingItems" style="height: 100%">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 180px;">
+    <div class="grid gridWithNonFlexingItems">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 400px;">
+    <div class="grid gridWithNonFlexingItems" style="height: 100%">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="200"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 400px;">
+    <div class="grid gridWithNonFlexingItems">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
+        <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/flex-factor-sum-less-than-1-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/flex-factor-sum-less-than-1-001.html
new file mode 100644
index 0000000000..ad7af2d846
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/flex-factor-sum-less-than-1-001.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Grid Layout Test: flex factor sum smaller than 1.</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-find-fr-size">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#fr-unit">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=520477">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that resolving auto tracks on grid items works properly even when the flex factor sum is less than 1." />
+
+<style>
+.onlyColumnFractionFlexFactors {
+    grid-template-columns: minmax(0, 0.1fr) minmax(0, 0.2fr) minmax(0, 0.3fr);
+    grid-template-rows: 50px;
+    width: 100px;
+}
+.onlyRowFractionFlexFactors {
+    grid-template-columns: 50px;
+    grid-template-rows: minmax(0, 0.1fr) minmax(0, 0.2fr) minmax(0, 0.3fr);
+    width: 50px;
+    height: 100px;
+}
+.fixedAndfractionFlexFactors {
+    grid-template-columns: 50px minmax(0, 0.2fr) 30px;
+    grid-template-rows: minmax(0, 0.1fr) 50px minmax(0, 0.3fr);
+    width: 100px;
+    height: 100px;
+}
+.zeroValueFlexFactor {
+    grid-template-columns: .0fr .2fr .3fr;
+    grid-template-rows: 50px;
+    width: 100px;
+}
+.firstRowThirdColumn {
+    background-color: yellow;
+    grid-column: 3;
+    grid-row: 1;
+}
+.secondRowThirdColumn {
+    background-color: yellow;
+    grid-column: 3;
+    grid-row: 2;
+}
+.thirdRowFirstColumn {
+    background-color: brown;
+    grid-column: 1;
+    grid-row: 3;
+}
+.thirdRowThirdColumn {
+    background-color: magenta;
+    grid-column: 3;
+    grid-row: 3;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid');">
+
+<div style="position: relative;">
+    <div class="grid onlyColumnFractionFlexFactors">
+        <div class="firstRowFirstColumn" data-expected-width="10" data-expected-height="50"></div>
+        <div class="firstRowSecondColumn" data-expected-width="20" data-expected-height="50"></div>
+        <div class="firstRowThirdColumn" data-expected-width="30" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="position: relative;">
+    <div class="grid onlyRowFractionFlexFactors">
+        <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+        <div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
+        <div class="thirdRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
+    </div>
+</div>
+
+<div style="position: relative;">
+    <div class="grid zeroValueFlexFactor">
+        <div class="firstRowFirstColumn" data-expected-width="0" data-expected-height="50"></div>
+        <div class="firstRowSecondColumn" data-expected-width="20" data-expected-height="50"></div>
+        <div class="firstRowThirdColumn" data-expected-width="30" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="position: relative;">
+    <div class="grid fixedAndfractionFlexFactors">
+        <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="5"></div>
+        <div class="firstRowSecondColumn" data-expected-width="4" data-expected-height="5"></div>
+        <div class="firstRowThirdColumn" data-expected-width="30" data-expected-height="5"></div>
+        <div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+        <div class="secondRowSecondColumn" data-expected-width="4" data-expected-height="50"></div>
+        <div class="secondRowThirdColumn" data-expected-width="30" data-expected-height="50"></div>
+        <div class="thirdRowFirstColumn" data-expected-width="50" data-expected-height="15"></div>
+        <div class="thirdRowSecondColumn" data-expected-width="4" data-expected-height="15"></div>
+        <div class="thirdRowThirdColumn" data-expected-width="30" data-expected-height="15"></div>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/flex-item-grid-container-percentage-rows-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/flex-item-grid-container-percentage-rows-001.html
new file mode 100644
index 0000000000..ba655ce8a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/flex-item-grid-container-percentage-rows-001.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<title>CSS Grid Layout Test: Percentage rows resolution in a flex item grid container</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes">
+<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=617876">
+<link rel="match" href="../reference/flex-item-grid-container-percentage-rows-001-ref.html">
+<meta name="assert" content="This test ensures that percentage rows are properly resolved for a grid container that is a flex item with a definite height.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+.flex {
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  height: 200px;
+  border: 5px solid;
+}
+
+.flexitem {
+  flex: 1;
+  background: magenta;
+}
+
+.grid {
+  display: grid;
+  grid: 50% / 1fr;
+}
+
+.griditem {
+  background: cyan;
+}
+</style>
+
+<p>Test passes if you see a 200x200 box with top half cyan and bottom half magenta.</p>
+
+<div class="flex">
+  <div class="flexitem grid">
+    <div class="griditem"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/fr-unit-with-percentage.html b/testing/web-platform/tests/css/css-grid/grid-definition/fr-unit-with-percentage.html
new file mode 100644
index 0000000000..82c97abdd5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/fr-unit-with-percentage.html
@@ -0,0 +1,102 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS3 Grid Layout: Flexible Length</title>
+  <link rel="author" title="swain" href="mailto:swainet@126.com"/>
+  <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-22 -->
+  <link rel="help" href="http://www.w3.org/TR/css-grid-1/#fr-unit"/>
+  <link rel="match" href="../reference/fr-unit-with-percentage-ref.html">
+  <style type="text/css">
+    #container {
+      position:relative;
+      width:400px;
+      height:100px;
+    }
+
+    #grid {
+      display:grid;
+      grid-template-columns:1fr 75%;
+      grid-template-rows:1fr 70%;
+      width:100%;
+      height:100%;
+    }
+
+    #cell1 {
+      grid-column:1;
+      grid-row:1;
+    }
+
+    #cell2 {
+      grid-column:2;
+      grid-row:1;
+    }
+
+    #cell3 {
+      grid-column:1;
+      grid-row:2;
+      height:100%;
+    }
+
+    #cell4 {
+      grid-column:2;
+      grid-row:2;
+      background-color:green;
+      height:100%;
+    }
+
+    .error {
+      position:absolute;
+      top:0;
+      left:0;
+      height:100%;
+      width:100%;
+      z-index:-1;
+    }
+
+    #table {
+      width:100%;
+      height:100%;
+      border-collapse:collapse;
+    }
+
+    #table td {
+      padding:0;
+      vertical-align:top;
+    }
+
+    #table td:first-child {
+      width:100px;
+    }
+
+    #table tr:first-child td {
+      height:30px;
+    }
+  </style>
+</head>
+<body>
+<p>Test passes if there is a green square and no red.</p>
+
+<div id="container">
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+    <div id="cell3">cell3</div>
+    <div id="cell4">cell4</div>
+  </div>
+  <div class="error">
+    <table id="table">
+      <tbody>
+      <tr>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+      </tr>
+      <tr>
+        <td>&nbsp;</td>
+        <td style="background-color:red">&nbsp;</td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/fr-unit.html b/testing/web-platform/tests/css/css-grid/grid-definition/fr-unit.html
new file mode 100644
index 0000000000..00ef5a5974
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/fr-unit.html
@@ -0,0 +1,105 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS3 Grid Layout: Flexible Length</title>
+  <link rel="author" title="swain" href="mailto:swainet@126.com"/>
+  <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-22 -->
+  <link rel="help" href="http://www.w3.org/TR/css-grid-1/#fr-unit"/>
+  <link rel="match" href="../reference/fr-unit-ref.html">
+  <meta name="assert" content="'fr' unit represents a fraction of the free space in the grid container."/>
+  <style type="text/css">
+    #container {
+      position:relative;
+      width:400px;
+      height:100px;
+    }
+
+    #grid {
+      display:grid;
+      grid-template-columns:100px 1fr;
+      grid-template-rows:30px 1fr;
+      width:100%;
+      height:100%;
+    }
+
+    #cell1 {
+      grid-column:1;
+      grid-row:1;
+      height:30px;
+    }
+
+    #cell2 {
+      grid-column:2;
+      grid-row:1;
+      height:30px;
+    }
+
+    #cell3 {
+      grid-column:1;
+      grid-row:2;
+      height:100%;
+    }
+
+    #cell4 {
+      grid-column:2;
+      grid-row:2;
+      background-color:green;
+      height:100%;
+    }
+
+    .error {
+      position:absolute;
+      top:0;
+      left:0;
+      height:100%;
+      width:100%;
+      z-index:-1;
+    }
+
+    #table {
+      width:100%;
+      height:100%;
+      border-collapse:collapse;
+    }
+
+    #table td {
+      padding:0;
+      vertical-align:top;
+    }
+
+    #table td:first-child {
+      width:100px;
+    }
+
+    #table tr:first-child td {
+      height:30px;
+    }
+  </style>
+</head>
+<body>
+<p>Test passes if there is a green square and no red.</p>
+
+<div id="container">
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+    <div id="cell3">cell3</div>
+    <div id="cell4">cell4</div>
+  </div>
+  <div class="error">
+    <table id="table">
+      <tbody>
+      <tr>
+        <td>&nbsp;</td>
+        <td>&nbsp;</td>
+      </tr>
+      <tr>
+        <td>&nbsp;</td>
+        <td style="background-color:red">&nbsp;</td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-add-item-with-positioned-items-crash.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-add-item-with-positioned-items-crash.html
new file mode 100644
index 0000000000..7b2ed99f22
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-add-item-with-positioned-items-crash.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Grid Layout Test: no crash with adding positioned grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-definition">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=273898">
+<meta name="assert" content="Test that adding grid items when some of them are positioned does not crash." />
+
+<style>
+#grid {
+  display: grid;
+  grid-auto-flow: dense;
+}
+
+.absolute {
+  position: absolute;
+}
+</style>
+</head>
+
+<body>
+<div id="grid">
+  <div></div>
+  <div class="absolute"></div>
+</div>
+
+<script>
+  var grid = document.getElementById("grid");
+  grid.offsetTop;
+  var newItem1 = document.createElement("div");
+  grid.appendChild(newItem1);
+  var newItem2 = document.createElement("div");
+  newItem2.className = "absolute";
+  grid.appendChild(newItem2);
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-add-positioned-block-item-after-inline-item-crash.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-add-positioned-block-item-after-inline-item-crash.html
new file mode 100644
index 0000000000..4b7aa9913a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-add-positioned-block-item-after-inline-item-crash.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Grid Layout Test: no crash with positioned block grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-definition">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=273898">
+<meta name="assert" content="Test that adding a positioned block grid item after an inline grid item does not crash." />
+
+<style>
+#grid {
+  display: grid;
+  grid-auto-flow: dense;
+}
+
+embed {
+  position: absolute;
+}
+</style>
+</head>
+
+<body>
+<div id="grid">
+    test
+</div>
+
+<script>
+  var grid = document.getElementById("grid");
+  grid.offsetTop;
+  var embed = document.createElement("embed");
+  embed.setAttribute("type", "image/png");
+  grid.appendChild(embed);
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-explicit-rows-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-explicit-rows-001.html
new file mode 100644
index 0000000000..81b531ca34
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-explicit-rows-001.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<title>grid-auto applies to explicit rows</title>
+
+<link rel=author title="Tab Atkins-Bittner" href="https://www.xanthir.com/contact/">
+<link rel=help href="https://www.w3.org/TR/css-grid-1/#implicit-grids">
+<meta name=assert content="grid-auto-rows/columns should dictate the size of all rows past grid-template-rows/columns, even if they are part of the explicit grid as established by grid-template-areas; they're not just limited to implicit tracks.">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<style>
+.grid {
+ display: grid;
+ grid-template-areas: "a b c" "d e f" "g e h";
+ grid-template-rows: 11px 13px;
+ grid-auto-rows: 17px 19px;
+ grid-template-columns: 23px 29px;
+ grid-auto-columns: 31px 37px;
+}
+
+.grid > div {
+ background: rgba(0, 0, 0, .2);
+}
+#c1 { grid-area: 1 / 1 / 2 / 2; }
+#c2 { grid-area: 1 / 1 / 3 / 3; }
+#c3 { grid-area: 1 / 1 / 4 / 4; }
+#c4 { grid-area: 1 / 1 / 5 / 5; }
+</style>
+
+<div class=grid>
+ <div id=c1 data-expected-width=23 data-expected-height=11></div>
+ <div id=c2 data-expected-width=52 data-expected-height=24></div>
+ <div id=c3 data-expected-width=83 data-expected-height=41></div>
+ <div id=c4 data-expected-width=120 data-expected-height=60></div>
+</div>
+
+<script>
+checkLayout('.grid');
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-fill-columns-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-fill-columns-001.html
new file mode 100644
index 0000000000..44c6080101
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-fill-columns-001.html
@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<title>CSS Grid: auto-fill columns</title>
+<link rel="author" title="Sergio Villar" href="mailto: svillar@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fill">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-column">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-grid-column-gap">
+<link rel="help" href="https://crbug.com/619930">
+<link rel="help" href="https://crbug.com/589460">
+<meta name="assert" content="Check that auto-fill columns are properly computed in a grid container"/>
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+
+.grid {
+    border: 2px solid magenta;
+    width: 200px;
+    position: relative;
+    justify-content: start;
+    grid-auto-columns: 157px;
+    grid-auto-rows: 25px;
+}
+
+.gridOnlyAutoRepeat { grid-template-columns: repeat(auto-fill, 30px [autobar]); }
+.gridPercentAutoRepeat { grid-template-columns: repeat(auto-fit, 30% [autobar]); padding: 0 13px; }
+.gridMinMaxAutoRepeat { grid-template-columns: repeat(auto-fill, minmax(13px, 30px)); }
+.gridMaxMinAutoRepeat { grid-template-columns: repeat(auto-fill, minmax(30px, 13px)); }
+.gridMaxMinPercentAutoRepeat { grid-template-columns: repeat(auto-fill, minmax(30px, 6.5%)); }
+.gridAutoRepeatAndFixedBefore { grid-template-columns: 10px [foo] 20% [bar] repeat(auto-fill, [autofoo] 35px); }
+.gridAutoRepeatAndFixedAfter { grid-template-columns: repeat(auto-fill, [first] 30px [last]) [foo] minmax(60px, 80px) [bar] minmax(45px, max-content); }
+.gridAutoRepeatAndFixed { grid-template-columns: [start] repeat(2, 50px [a]) [middle] repeat(auto-fill, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; }
+.gridMultipleNames { grid-template-columns: [start] 20px [foo] 50% repeat(auto-fill, [bar] 20px [start foo]) [foo] 10% [end bar]; }
+.gridMultipleTracks { grid-template-columns: [start] 20px repeat(auto-fill, [a] 2em [b c] 10% [d]) [e] minmax(75px, 1fr) [last]; }
+
+.item { background: cyan; }
+
+.gap { grid-column-gap: 20px; }
+
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+<div id="log"></div>
+
+<p>This test checks that repeat(auto-fill, ) syntax works as expected.</p>
+
+<div class="grid gridOnlyAutoRepeat">
+    <div class="item" style="grid-column: 1 / -1" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridPercentAutoRepeat">
+    <div class="item" style="grid-column: 1 / -1" data-offset-x="13" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMinMaxAutoRepeat">
+    <div class="item" style="grid-column: 1 / -1" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMaxMinAutoRepeat">
+    <div class="item" style="grid-column: 1 / -1" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMaxMinPercentAutoRepeat">
+    <div class="item" style="grid-column: 1 / -1" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridOnlyAutoRepeat">
+    <div class="item" style="grid-column: 1 / span 6 autobar" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridOnlyAutoRepeat gap">
+    <div class="item" style="grid-column: 1 / span 5" data-offset-x="0" data-offset-y="0" data-expected-width="357" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridOnlyAutoRepeat gap">
+    <div class="item" style="grid-column: autobar 2 / span 3" data-offset-x="100" data-offset-y="0" data-expected-width="257" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore">
+    <div class="item" style="grid-column: 1 / span 6" data-offset-x="0" data-offset-y="0" data-expected-width="190" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore">
+    <div class="item" style="grid-column: foo / autofoo" data-offset-x="10" data-offset-y="0" data-expected-width="40" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore">
+    <div class="item" style="grid-column: bar / 5 autofoo" data-offset-x="50" data-offset-y="0" data-expected-width="297" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore gap">
+    <div class="item" style="grid-column: 1 / span 4" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore gap">
+    <div class="item" style="grid-column: span 3 / 2 autofoo" data-offset-x="0" data-offset-y="0" data-expected-width="125" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore gap">
+    <div class="item" style="grid-column: notPresent / 3 autofoo" data-offset-x="377" data-offset-y="0" data-expected-width="157" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter">
+    <div class="item" style="grid-column: 1 / span 4" data-offset-x="0" data-offset-y="0" data-expected-width="185" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter">
+    <div class="item" style="grid-column: first / last 2" data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter">
+    <div class="item" style="grid-column: last 2 / foo" data-offset-x="60" data-offset-y="0" data-expected-width="80" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter gap">
+    <div class="item" style="grid-column: 1 / span 3" data-offset-x="0" data-offset-y="0" data-expected-width="195" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter gap">
+    <div class="item" style="grid-column: 3 / span 1 bar" data-offset-x="130" data-offset-y="0" data-expected-width="222" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter gap">
+    <div class="item" style="grid-column: first / foo" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed">
+    <div class="item" style="grid-column: 1 / span 8" data-offset-x="0" data-offset-y="0" data-expected-width="195" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed">
+    <div class="item" style="grid-column: a / autobar 2" data-offset-x="50" data-offset-y="0" data-expected-width="80" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed">
+    <div class="item" style="grid-column: autofoo / end" data-offset-x="100" data-offset-y="0" data-expected-width="95" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed gap">
+    <div class="item" style="grid-column: 1 / span 4"  data-offset-x="0" data-offset-y="0" data-expected-width="195" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed gap">
+    <div class="item" style="grid-column: autobar / -1"  data-offset-x="175" data-offset-y="0" data-expected-width="20" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleNames">
+    <div class="item" style="grid-column: 1 / -1"  data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleNames">
+    <div class="item" style="grid-column: foo 3 / 4 bar"  data-offset-x="160" data-offset-y="0" data-expected-width="40" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleNames">
+    <div class="item" style="grid-column: -6 / span 2 start"  data-offset-x="20" data-offset-y="0" data-expected-width="140" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleNames gap">
+    <div class="item" style="grid-column: -4 / -2"  data-offset-x="40" data-offset-y="0" data-expected-width="140" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleNames gap">
+    <div class="item" style="grid-column: bar / foo 2"  data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleNames gap">
+    <div class="item" style="grid-column: foo / bar 2"  data-offset-x="40" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleTracks">
+    <div class="item" style="grid-column: a / 2 c"  data-offset-x="20" data-offset-y="0" data-expected-width="84" data-expected-height="25"></div>
+    <div class="item" style="grid-column: 3 / e; grid-row: 2;"  data-offset-x="52" data-offset-y="25" data-expected-width="72" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleTracks gap">
+    <div class="item" style="grid-column: a / c"  data-offset-x="40" data-offset-y="0" data-expected-width="32" data-expected-height="25"></div>
+    <div class="item" style="grid-column: 3 / last; grid-row: 2;"  data-offset-x="92" data-offset-y="25" data-expected-width="115" data-expected-height="25"></div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-fill-rows-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-fill-rows-001.html
new file mode 100644
index 0000000000..55462fa8d0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-fill-rows-001.html
@@ -0,0 +1,203 @@
+<!DOCTYPE html>
+<title>CSS Grid: auto-fill rows</title>
+<link rel="author" title="Sergio Villar" href="mailto: svillar@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fill">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-rows">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-row">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-grid-row-gap">
+<link rel="help" href="https://crbug.com/619930">
+<link rel="help" href="https://crbug.com/589460">
+<link rel="help" href="https://crbug.com/648814">
+<meta name="assert" content="Check that auto-fill rows are properly computed in a grid container"/>
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+
+.grid {
+    border: 2px solid magenta;
+    height: 200px;
+    width: 25px;
+    align-content: start;
+    grid-auto-rows: 157px;
+    grid-auto-columns: 25px;
+
+    float: left;
+    position: relative;
+    margin-right: 2px;
+}
+
+.gridOnlyAutoRepeat { grid-template-rows: repeat(auto-fill, 30px [autobar]); }
+.gridPercentAutoRepeat { grid-template-rows: repeat(auto-fill, 30%); padding: 13px 0; }
+.gridMinMaxAutoRepeat { grid-template-rows: repeat(auto-fill, minmax(13px, 30px)); }
+.gridMaxMinAutoRepeat { grid-template-rows: repeat(auto-fill, minmax(30px, 13px)); }
+.gridMaxMinPercentAutoRepeat { grid-template-rows: repeat(auto-fill, minmax(30px, 6.5%)); }
+.gridAutoRepeatAndFixedBefore { grid-template-rows: 10px [foo] 20% [bar] repeat(auto-fill, [autofoo] 35px); }
+.gridAutoRepeatAndFixedAfter { grid-template-rows: repeat(auto-fill, [first] 30px [last]) [foo] minmax(60px, 80px) [bar] minmax(45px, max-content); }
+.gridAutoRepeatAndFixed { grid-template-rows: [start] repeat(2, 50px [a]) [middle] repeat(auto-fill, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; }
+.gridMultipleNames { grid-template-rows: [start] 20px [foo] 50% repeat(auto-fill, [bar] 20px [start foo]) [foo] 10% [end bar]; }
+.gridMultipleTracks { grid-template-rows: [start] 20px repeat(auto-fill, [a] 2em [b c] 10% [d]) [e] minmax(75px, 1fr) [last]; }
+
+.item { background: blue; }
+.item:nth-child(2) { background: green; }
+.item:nth-child(3) { background: orange; }
+
+.gap { grid-row-gap: 20px; }
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+<div id="log"></div>
+
+<p>This test checks that repeat(auto-fill, ) syntax works as expected.</p>
+
+<div class="grid gridOnlyAutoRepeat">
+    <div class="item" style="grid-row: 1 / -1" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridPercentAutoRepeat">
+    <div class="item" style="grid-row: 1 / -1" data-offset-y="13" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMinMaxAutoRepeat">
+    <div class="item" style="grid-row: 1 / -1" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMaxMinAutoRepeat">
+    <div class="item" style="grid-row: 1 / -1" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMaxMinPercentAutoRepeat">
+    <div class="item" style="grid-row: 1 / -1" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridOnlyAutoRepeat">
+    <div class="item" style="grid-row: 1 / span 6 autobar" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridOnlyAutoRepeat gap">
+    <div class="item" style="grid-row: 1 / span 5" data-offset-y="0" data-offset-x="0" data-expected-height="357" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridOnlyAutoRepeat gap">
+    <div class="item" style="grid-row: autobar 2 / span 3" data-offset-y="100" data-offset-x="0" data-expected-height="257" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridOnlyAutoRepeat gap" style="height: auto; max-height: 90px;" data-expected-height="94" data-expected-width="29">
+    <div class="item" data-offset-y="0" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div>
+    <div class="item" data-offset-y="50" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div>
+    <div class="item" data-offset-y="100" data-offset-x="0" data-expected-height="157" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridOnlyAutoRepeat gap" style="height: auto; max-height: 90px; min-height: 130px;" data-expected-height="134" data-expected-width="29">
+    <div class="item" data-offset-y="0" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div>
+    <div class="item" data-offset-y="50" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div>
+    <div class="item" data-offset-y="100" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore">
+    <div class="item" style="grid-row: 1 / span 6" data-offset-y="0" data-offset-x="0" data-expected-height="190" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore">
+    <div class="item" style="grid-row: foo / autofoo" data-offset-y="10" data-offset-x="0" data-expected-height="40" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore">
+    <div class="item" style="grid-row: bar / 5 autofoo" data-offset-y="50" data-offset-x="0" data-expected-height="297" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore gap">
+    <div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore gap">
+    <div class="item" style="grid-row: span 3 / 2 autofoo" data-offset-y="0" data-offset-x="0" data-expected-height="125" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore gap">
+    <div class="item" style="grid-row: notPresent / 3 autofoo" data-offset-y="377" data-offset-x="0" data-expected-height="157" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter">
+    <div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="185" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter">
+    <div class="item" style="grid-row: first / last 2" data-offset-y="0" data-offset-x="0" data-expected-height="60" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter">
+    <div class="item" style="grid-row: last 2 / foo" data-offset-y="60" data-offset-x="0" data-expected-height="80" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter gap">
+    <div class="item" style="grid-row: 1 / span 3" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter gap">
+    <div class="item" style="grid-row: 3 / span 1 bar" data-offset-y="130" data-offset-x="0" data-expected-height="222" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter gap">
+    <div class="item" style="grid-row: first / foo" data-offset-y="0" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed">
+    <div class="item" style="grid-row: 1 / span 8" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed">
+    <div class="item" style="grid-row: a / autobar 2" data-offset-y="50" data-offset-x="0" data-expected-height="80" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed">
+    <div class="item" style="grid-row: autofoo / end" data-offset-y="100" data-offset-x="0" data-expected-height="95" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed gap">
+    <div class="item" style="grid-row: 1 / span 4"  data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed gap">
+    <div class="item" style="grid-row: autobar / -1"  data-offset-y="175" data-offset-x="0" data-expected-height="20" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleNames">
+    <div class="item" style="grid-row: 1 / -1"  data-offset-y="0" data-offset-x="0" data-expected-height="200" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleNames">
+    <div class="item" style="grid-row: foo 3 / 4 bar"  data-offset-y="160" data-offset-x="0" data-expected-height="40" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleNames">
+    <div class="item" style="grid-row: -6 / span 2 start"  data-offset-y="20" data-offset-x="0" data-expected-height="140" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleNames gap">
+    <div class="item" style="grid-row: -4 / -2"  data-offset-y="40" data-offset-x="0" data-expected-height="140" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleNames gap">
+    <div class="item" style="grid-row: bar / foo 2"  data-offset-y="160" data-offset-x="0" data-expected-height="20" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleNames gap">
+    <div class="item" style="grid-row: foo / bar 2"  data-offset-y="40" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleTracks">
+    <div class="item" style="grid-row: a / 2 c"  data-offset-y="20" data-offset-x="0" data-expected-height="84" data-expected-width="25"></div>
+    <div class="item" style="grid-row: 3 / e; grid-column: 2;"  data-offset-y="52" data-offset-x="25" data-expected-height="72" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleTracks gap">
+    <div class="item" style="grid-row: a / c"  data-offset-y="40" data-offset-x="0" data-expected-height="32" data-expected-width="25"></div>
+    <div class="item" style="grid-row: 3 / last; grid-column: 2;"  data-offset-y="92" data-offset-x="25" data-expected-height="115" data-expected-width="25"></div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-fit-columns-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-fit-columns-001.html
new file mode 100644
index 0000000000..b19881f5ac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-fit-columns-001.html
@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<title>CSS Grid: auto-fit columns</title>
+
+<link rel="author" title="Sergio Villar" href="mailto: svillar@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-column">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-grid-column-gap">
+<link rel="help" href="https://crbug.com/619930">
+<link rel="help" href="https://crbug.com/589460">
+<link rel="help" href="https://crbug.com/645746">
+<meta name="assert" content="Check that auto-fit columns are properly computed in a grid container"/>
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+
+.grid {
+    border: 2px solid magenta;
+    width: 200px;
+    position: relative;
+    justify-content: start;
+    grid-auto-columns: 157px;
+    grid-auto-rows: 25px;
+}
+
+.gridOnlyAutoRepeat { grid-template-columns: repeat(auto-fit, 30px [autobar]); }
+.gridPercentAutoRepeat { grid-template-columns: repeat(auto-fit, 30% [autobar]); padding: 0 13px; }
+.gridMinMaxAutoRepeat { grid-template-columns: repeat(auto-fill, minmax(13px, 30px)); }
+.gridMaxMinAutoRepeat { grid-template-columns: repeat(auto-fill, minmax(30px, 13px)); }
+.gridMaxMinPercentAutoRepeat { grid-template-columns: repeat(auto-fill, minmax(30px, 6.5%)); }
+.gridAutoRepeatAndFixedBefore { grid-template-columns: 10px [foo] 20% [bar] repeat(auto-fit, [autofoo] 35px); }
+.gridAutoRepeatAndFixedAfter { grid-template-columns: repeat(auto-fit, [first] 30px [last]) [foo] minmax(60px, 80px) [bar] minmax(45px, max-content); }
+.gridAutoRepeatAndFixed { grid-template-columns: [start] repeat(2, 50px [a]) [middle] repeat(auto-fit, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; }
+.gridMultipleNames { grid-template-columns: [start] 20px [foo] 50% repeat(auto-fit, [bar] 20px [start foo]) [foo] 10% [end bar]; }
+.gridMultipleTracks { grid-template-columns: [start] 20px repeat(auto-fit, [a] 2em [b c] 10% [d]) [e] minmax(75px, 1fr) [last]; }
+.gridMinMaxFixedFlex { grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); }
+
+.item { background: cyan; }
+.item:nth-child(2n) { background: green; }
+
+.gap { grid-column-gap: 20px; }
+
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+<div id="log"></div>
+
+<p>This test checks that repeat(auto-fit, ) syntax works as expected.</p>
+
+<div class="grid gridOnlyAutoRepeat">
+    <div class="item" style="grid-column: 1 / -1" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridPercentAutoRepeat">
+    <div class="item" style="grid-column: 1 / -1" data-offset-x="13" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMinMaxAutoRepeat">
+    <div class="item" style="grid-column: 1 / -1" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMaxMinAutoRepeat">
+    <div class="item" style="grid-column: 1 / -1" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMaxMinPercentAutoRepeat">
+    <div class="item" style="grid-column: 1 / -1" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridOnlyAutoRepeat">
+    <div class="item" style="grid-column: 1 / span 6 autobar" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridOnlyAutoRepeat gap">
+    <div class="item" style="grid-column: 1 / span 5" data-offset-x="0" data-offset-y="0" data-expected-width="357" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridOnlyAutoRepeat gap">
+    <div class="item" style="grid-column: autobar 2 / span 3" data-offset-x="0" data-offset-y="0" data-expected-width="257" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore">
+    <div class="item" style="grid-column: 1 / span 6" data-offset-x="0" data-offset-y="0" data-expected-width="190" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore">
+    <div class="item" style="grid-column: foo / autofoo" data-offset-x="10" data-offset-y="0" data-expected-width="40" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore">
+    <div class="item" style="grid-column: bar / 5 autofoo" data-offset-x="50" data-offset-y="0" data-expected-width="297" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore gap">
+    <div class="item" style="grid-column: 1 / span 4" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore gap">
+    <div class="item" style="grid-column: span 3 / 2 autofoo" data-offset-x="0" data-offset-y="0" data-expected-width="125" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore gap">
+    <div class="item" style="grid-column: notPresent / 3 autofoo" data-offset-x="267" data-offset-y="0" data-expected-width="157" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter">
+    <div class="item" style="grid-column: 1 / span 4" data-offset-x="0" data-offset-y="0" data-expected-width="185" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter">
+    <div class="item" style="grid-column: first / last 2" data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter">
+    <div class="item" style="grid-column: last 2 / foo" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter gap">
+    <div class="item" style="grid-column: 1 / span 3" data-offset-x="0" data-offset-y="0" data-expected-width="195" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter gap">
+    <div class="item" style="grid-column: 3 / span 1 bar" data-offset-x="80" data-offset-y="0" data-expected-width="222" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter gap">
+    <div class="item" style="grid-column: first / foo" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed">
+    <div class="item" style="grid-column: 1 / span 8" data-offset-x="0" data-offset-y="0" data-expected-width="195" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed">
+    <div class="item" style="grid-column: a / autobar 2" data-offset-x="50" data-offset-y="0" data-expected-width="80" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed">
+    <div class="item" style="grid-column: autofoo / end" data-offset-x="100" data-offset-y="0" data-expected-width="95" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed gap">
+    <div class="item" style="grid-column: 1 / span 4"  data-offset-x="0" data-offset-y="0" data-expected-width="195" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed gap">
+    <div class="item" style="grid-column: autobar / -1"  data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleNames">
+    <div class="item" style="grid-column: 1 / -1"  data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleNames">
+    <div class="item" style="grid-column: foo 3 / 4 bar"  data-offset-x="120" data-offset-y="0" data-expected-width="40" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleNames">
+    <div class="item" style="grid-column: -6 / span 2 start"  data-offset-x="20" data-offset-y="0" data-expected-width="140" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleNames gap">
+    <div class="item" style="grid-column: -4 / -2"  data-offset-x="40" data-offset-y="0" data-expected-width="140" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleNames gap">
+    <div class="item" style="grid-column: bar / foo 2"  data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleNames gap">
+    <div class="item" style="grid-column: foo / bar 2"  data-offset-x="40" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleTracks">
+    <div class="item" style="grid-column: e / last;"  data-offset-x="52" data-offset-y="0" data-expected-width="148" data-expected-height="25"></div>
+    <div class="item" style="grid-column: start / b;"  data-offset-x="0" data-offset-y="25" data-expected-width="52" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMultipleTracks gap">
+    <div class="item" style="grid-column: c / -1;"  data-offset-x="40" data-offset-y="0" data-expected-width="160" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMinMaxFixedFlex gap">
+    <div class="item" style="grid-column-start: 1" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="25"></div>
+</div>
+
+<div class="grid gridMinMaxFixedFlex gap">
+    <div class="item" style="grid-column-start: 1" data-offset-x="0" data-offset-y="0" data-expected-width="90" data-expected-height="25"></div>
+    <div class="item" style="grid-column-start: 2" data-offset-x="110" data-offset-y="0" data-expected-width="90" data-expected-height="25"></div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-fit-rows-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-fit-rows-001.html
new file mode 100644
index 0000000000..627a980c08
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-fit-rows-001.html
@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<title>CSS Grid: auto-fit rows</title>
+<link rel="author" title="Sergio Villar" href="mailto: svillar@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-rows">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-row">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-grid-row-gap">
+<link rel="help" href="https://crbug.com/619930">
+<link rel="help" href="https://crbug.com/589460">
+<meta name="assert" content="Check that auto-fit rows are properly computed in a grid container"/>
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+
+.grid {
+    border: 2px solid magenta;
+    height: 200px;
+    width: 25px;
+    align-content: start;
+    grid-auto-rows: 157px;
+    grid-auto-columns: 25px;
+
+    float: left;
+    position: relative;
+    margin-right: 2px;
+}
+
+.gridOnlyAutoRepeat { grid-template-rows: repeat(auto-fit, 30px [autobar]); }
+.gridPercentAutoRepeat { grid-template-rows: repeat(auto-fill, 30%); padding: 13px 0; }
+.gridMinMaxAutoRepeat { grid-template-rows: repeat(auto-fill, minmax(13px, 30px)); }
+.gridMaxMinAutoRepeat { grid-template-rows: repeat(auto-fill, minmax(30px, 13px)); }
+.gridMaxMinPercentAutoRepeat { grid-template-rows: repeat(auto-fill, minmax(30px, 6.5%)); }
+.gridAutoRepeatAndFixedBefore { grid-template-rows: 10px [foo] 20% [bar] repeat(auto-fit, [autofoo] 35px); }
+.gridAutoRepeatAndFixedAfter { grid-template-rows: repeat(auto-fit, [first] 30px [last]) [foo] minmax(60px, 80px) [bar] minmax(45px, max-content); }
+.gridAutoRepeatAndFixed { grid-template-rows: [start] repeat(2, 50px [a]) [middle] repeat(auto-fit, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; }
+.gridMultipleNames { grid-template-rows: [start] 20px [foo] 50% repeat(auto-fit, [bar] 20px [start foo]) [foo] 10% [end bar]; }
+.gridMultipleTracks { grid-template-rows: [start] 20px repeat(auto-fit, [a] 2em [b c] 10% [d]) [e] minmax(75px, 1fr) [last]; }
+
+.item { background: cyan; }
+.item:nth-child(2n) { background: green; }
+
+.gap { grid-row-gap: 20px; }
+
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+<div id="log"></div>
+
+<p>This test checks that repeat(auto-fit, ) syntax works as expected.</p>
+
+<div class="grid gridOnlyAutoRepeat">
+    <div class="item" style="grid-row: 1 / span 6" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridPercentAutoRepeat">
+    <div class="item" style="grid-row: 1 / -1" data-offset-y="13" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMinMaxAutoRepeat">
+    <div class="item" style="grid-row: 1 / -1" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMaxMinAutoRepeat">
+    <div class="item" style="grid-row: 1 / -1" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMaxMinPercentAutoRepeat">
+    <div class="item" style="grid-row: 1 / -1" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridOnlyAutoRepeat">
+    <div class="item" style="grid-row: 1 / span 6 autobar" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridOnlyAutoRepeat gap">
+    <div class="item" style="grid-row: 1 / span 5" data-offset-y="0" data-offset-x="0" data-expected-height="357" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridOnlyAutoRepeat gap">
+    <div class="item" style="grid-row: autobar 2 / span 3" data-offset-y="0" data-offset-x="0" data-expected-height="257" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore">
+    <div class="item" style="grid-row: 1 / span 6" data-offset-y="0" data-offset-x="0" data-expected-height="190" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore">
+    <div class="item" style="grid-row: foo / autofoo" data-offset-y="10" data-offset-x="0" data-expected-height="40" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore">
+    <div class="item" style="grid-row: bar / 5 autofoo" data-offset-y="50" data-offset-x="0" data-expected-height="297" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore gap">
+    <div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore gap">
+    <div class="item" style="grid-row: span 3 / 2 autofoo" data-offset-y="0" data-offset-x="0" data-expected-height="125" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedBefore gap">
+    <div class="item" style="grid-row: notPresent / 3 autofoo" data-offset-y="267" data-offset-x="0" data-expected-height="157" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter">
+    <div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="185" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter">
+    <div class="item" style="grid-row: first / last 2" data-offset-y="0" data-offset-x="0" data-expected-height="60" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter">
+    <div class="item" style="grid-row: last 2 / foo" data-offset-y="0" data-offset-x="0" data-expected-height="80" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter gap">
+    <div class="item" style="grid-row: 1 / span 3" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter gap">
+    <div class="item" style="grid-row: 3 / span 1 bar" data-offset-y="80" data-offset-x="0" data-expected-height="222" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixedAfter gap">
+    <div class="item" style="grid-row: first / foo" data-offset-y="0" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed">
+    <div class="item" style="grid-row: 1 / span 8" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed">
+    <div class="item" style="grid-row: a / autobar 2" data-offset-y="50" data-offset-x="0" data-expected-height="80" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed">
+    <div class="item" style="grid-row: autofoo / end" data-offset-y="100" data-offset-x="0" data-expected-height="95" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed gap">
+    <div class="item" style="grid-row: 1 / span 4"  data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridAutoRepeatAndFixed gap">
+    <div class="item" style="grid-row: autobar / -1"  data-offset-y="140" data-offset-x="0" data-expected-height="20" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleNames">
+    <div class="item" style="grid-row: 1 / -1"  data-offset-y="0" data-offset-x="0" data-expected-height="200" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleNames">
+    <div class="item" style="grid-row: foo 3 / 4 bar"  data-offset-y="120" data-offset-x="0" data-expected-height="40" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleNames">
+    <div class="item" style="grid-row: -6 / span 2 start"  data-offset-y="20" data-offset-x="0" data-expected-height="140" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleNames gap">
+    <div class="item" style="grid-row: -4 / -2"  data-offset-y="40" data-offset-x="0" data-expected-height="140" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleNames gap">
+    <div class="item" style="grid-row: bar / foo 2"  data-offset-y="160" data-offset-x="0" data-expected-height="20" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleNames gap">
+    <div class="item" style="grid-row: foo / bar 2"  data-offset-y="40" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleTracks">
+    <div class="item" style="grid-row: e / last;"  data-offset-y="52" data-offset-x="0" data-expected-height="148" data-expected-width="25"></div>
+    <div class="item" style="grid-row: start / b;"  data-offset-y="0" data-offset-x="0" data-expected-height="52" data-expected-width="25"></div>
+</div>
+
+<div class="grid gridMultipleTracks gap">
+    <div class="item" style="grid-row: c / -1;"  data-offset-y="40" data-offset-x="0" data-expected-height="160" data-expected-width="25"></div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-aspect-ratio-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-aspect-ratio-001.html
new file mode 100644
index 0000000000..bd744cf0cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-aspect-ratio-001.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Checks that the min-height is reflected through the aspect-ratio for determining auto repeat tracks.">
+<p>Test passes if there is a filled green square.</p>
+<div style="display: inline-grid; background: green; aspect-ratio: 1/1; min-height: 60px; grid-template-columns: repeat(auto-fill, 50px);"></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-aspect-ratio-002.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-aspect-ratio-002.html
new file mode 100644
index 0000000000..3b74e79224
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-aspect-ratio-002.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Checks that the min-height is reflected through the aspect-ratio for determining auto repeat tracks.">
+<p>Test passes if there is a filled green square.</p>
+<div style="width: min-content; height: 100px; background: green;">
+  <div style="height: 100%;">
+    <div style="display: grid; aspect-ratio: 1/1; min-height: 60%; grid-template-columns: repeat(auto-fill, 50px);"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-dynamic-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-dynamic-001.html
new file mode 100644
index 0000000000..2537892887
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-dynamic-001.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Checks that a dynamic change in containing block width changes the number of auto repeat columns.">
+<p>Test passes if there is a filled green square.</p>
+<div id="target" style="width: 0px; height: 100px;">
+  <div style="display: inline-grid; background: green; height: 100px; min-width: 60%; grid-template-columns: repeat(auto-fill, 50px);"></div>
+</div>
+<script>
+document.body.offsetTop;
+document.getElementById('target').style.width = '100px';
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-dynamic-002.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-dynamic-002.html
new file mode 100644
index 0000000000..8df2158d1f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-dynamic-002.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Checks that a dynamic change in containing block height changes the number of auto repeat rows.">
+<p>Test passes if there is a filled green square.</p>
+<div id="target" style="width: 100px; height: 0px;">
+  <div style="display: inline-grid; background: green; width: 100px; min-height: 60%; grid-template-rows: repeat(auto-fill, 50px);"></div>
+</div>
+<script>
+document.body.offsetTop;
+document.getElementById('target').style.height = '100px';
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-dynamic-003.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-dynamic-003.html
new file mode 100644
index 0000000000..c2fe3ff98a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-dynamic-003.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Checks that a dynamic change in containing block height changes the number of auto repeat columns.">
+<p>Test passes if there is a filled green square.</p>
+<div id="target" style="width: 100px; height: 0px;">
+  <div style="display: inline-grid; background: green; min-height: 60%; grid-template-columns: repeat(auto-fill, 50px); grid-template-rows: 100px; aspect-ratio: 1/1;"></div>
+</div>
+<script>
+document.body.offsetTop;
+document.getElementById('target').style.height = '100px';
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-intrinsic-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-intrinsic-001.html
new file mode 100644
index 0000000000..ba65e9a7e9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-intrinsic-001.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<title>CSS Grid: auto repeat computation for intrinsic sizes.</title>
+<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#repeat-notation"/>
+<meta name="assert" content="Checks that auto repeat tracks are properly recomputed and items are properly repositioned when grids have intrinsic inline sizes."/>
+<link rel="issue" href="https://crbug.com/621517"/>
+<link href="/css/support/grid.css" rel="stylesheet"/>
+<link href="/css/support/width-keyword-classes.css" rel="stylesheet"/>
+
+<style>
+.grid {
+    border: 2px solid black;
+    position: relative;
+    padding-top: 10px;
+    justify-items: start;
+}
+
+.item {
+    background: cyan;
+    height: 20px;
+}
+
+.gridAutoFillFixed { grid-template-columns: repeat(auto-fill, 20px) minmax(min-content, 40px); }
+.gridAutoFillAuto { grid-template-columns: repeat(auto-fill, 10px) minmax(60px, auto); }
+.gridAutoFitFixed { grid-template-columns: repeat(auto-fit, 20px) minmax(min-content, 40px); }
+.gridAutoFitAuto { grid-template-columns: repeat(auto-fit, 10px) minmax(60px, auto); }
+
+.paddingTop { padding-top: 10px; }
+
+.abs {
+    height: 5px;
+    position: absolute;
+    width: 100%;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div class="grid gridAutoFillFixed paddingTop max-content" data-expected-width="104" data-expected-height="34">
+    <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div>
+    <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-offset-x="20" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-offset-x="40" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-offset-x="60" data-offset-y="0"></div>
+</div>
+
+<div class="grid gridAutoFillFixed paddingTop min-content" data-expected-width="104" data-expected-height="34">
+    <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div>
+    <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-offset-x="20" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-offset-x="40" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-offset-x="60" data-offset-y="0"></div>
+</div>
+
+<div class="grid gridAutoFillAuto paddingTop max-content" data-expected-width="104" data-expected-height="34">
+    <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div>
+    <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="10" data-expected-height="5" data-offset-x="10" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="10" data-expected-height="5" data-offset-x="20" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="10" data-expected-height="5" data-offset-x="30" data-offset-y="0"></div>
+</div>
+
+<div class="grid gridAutoFillAuto paddingTop min-content" data-expected-width="74" data-expected-height="34">
+    <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div>
+    <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="60" data-expected-height="5" data-offset-x="10" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="0" data-expected-height="5" data-offset-x="70" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="70" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
+</div>
+
+<!-- auto-fill -->
+
+<div class="grid gridAutoFitFixed paddingTop max-content" data-expected-width="104" data-expected-height="34">
+    <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div>
+    <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-offset-x="20" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-offset-x="40" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-offset-x="60" data-offset-y="0"></div>
+</div>
+
+<div class="grid gridAutoFitFixed paddingTop min-content" data-expected-width="104" data-expected-height="34">
+    <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div>
+    <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-offset-x="20" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-offset-x="40" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-offset-x="60" data-offset-y="0"></div>
+</div>
+
+<div class="grid gridAutoFitAuto paddingTop max-content" data-expected-width="104" data-expected-height="34">
+    <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div>
+    <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="10" data-expected-height="5" data-offset-x="10" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="10" data-expected-height="5" data-offset-x="20" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="10" data-expected-height="5" data-offset-x="30" data-offset-y="0"></div>
+</div>
+
+<div class="grid gridAutoFitAuto paddingTop min-content" data-expected-width="74" data-expected-height="34">
+    <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div>
+    <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="60" data-expected-height="5" data-offset-x="10" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="0" data-expected-height="5" data-offset-x="70" data-offset-y="0"></div>
+    <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="70" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-001.tentative.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-001.tentative.html
new file mode 100644
index 0000000000..144ded9f36
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-001.tentative.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Auto repeat tracks and max sizes</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/8963">
+<meta name="assert" content="This test checks that auto repeat tracks use max size when size is indefinite to compute the number of tracks.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+.grid {
+  position: relative;
+  display: grid;
+  grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);
+  max-width: 300px;
+  max-height: 200px;
+}
+.border {
+  border: 10px solid;
+}
+.border-box {
+  box-sizing: border-box;
+}
+.item {
+  background: lime;
+  /* Place item on the last cell. */
+  grid-column: -2;
+  grid-row: -2;
+}
+.pad-calc {
+ border-width: 0;
+ padding: calc(10% + 20px);
+}
+.pad-percent {
+ border-width: 0;
+ padding: 10%;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid');">
+
+<div id="log"></div>
+
+<div class="grid" data-expected-width="300" data-expected-height="200">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100">
+  <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border" data-expected-width="320" data-expected-height="220">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border" style="width: 200px; height: 100px;" data-expected-width="220" data-expected-height="120">
+  <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border" style="width: min-content; height: min-content;" data-expected-width="320" data-expected-height="220">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border" style="width: max-content; height: max-content;" data-expected-width="320" data-expected-height="220">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border border-box" data-expected-width="300" data-expected-height="170">
+  <div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div style="width:min-content" data-expected-width="300" data-expected-height="160">
+  <div class="grid border border-box pad-percent" data-expected-width="300" data-expected-height="160">
+    <div class="item" data-offset-x="130" data-offset-y="80" data-expected-width="100" data-expected-height="50">x</div>
+  </div>
+</div>
+
+<div style="width:min-content" data-expected-width="240" data-expected-height="188">
+  <div class="grid border border-box pad-calc" data-expected-width="240" data-expected-height="188">
+    <div class="item" data-offset-x="44" data-offset-y="94" data-expected-width="100" data-expected-height="50"></div>
+  </div>
+</div>
+
+<div class="grid border border-box" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100">
+  <div class="item" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div style="width:min-content" data-expected-width="200" data-expected-height="100">
+  <div class="grid border border-box pad-percent" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="50"></div>
+  </div>
+</div>
+
+<div style="width:min-content" data-expected-width="200" data-expected-height="100">
+  <div class="grid border border-box pad-calc" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-offset-x="40" data-offset-y="40" data-expected-width="100" data-expected-height="50"></div>
+  </div>
+</div>
+
+<div class="grid border border-box" style="width: min-content; height: min-content;" data-expected-width="220" data-expected-height="170">
+  <div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div style="width:min-content" data-expected-width="300" data-expected-height="160">
+  <div class="grid border border-box pad-percent" style="width: min-content; height: min-content;" data-expected-width="260" data-expected-height="160" title="Percentage padding, min-content">
+    <div class="item" data-offset-x="130" data-offset-y="80" data-expected-width="100" data-expected-height="50"></div>
+  </div>
+</div>
+
+<div style="width:min-content" data-expected-width="240" data-expected-height="188">
+  <div class="grid border border-box pad-calc" style="width: min-content; height: min-content;" data-expected-width="288" data-expected-height="188">
+    <div class="item" data-offset-x="144" data-offset-y="94" data-expected-width="100" data-expected-height="50"></div>
+  </div>
+</div>
+
+<div class="grid border border-box" style="width: max-content; height: max-content;" data-expected-width="220" data-expected-height="170">
+  <div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div style="width:min-content" data-expected-width="300" data-expected-height="160">
+  <div class="grid border border-box pad-percent" style="width: max-content; height: max-content;" data-expected-width="260" data-expected-height="160" title="Percentage padding, max-content">
+    <div class="item" data-offset-x="130" data-offset-y="80" data-expected-width="100" data-expected-height="50"></div>
+  </div>
+</div>
+
+<div style="width:min-content" data-expected-width="240" data-expected-height="188">
+  <div class="grid border border-box pad-calc" style="width: max-content; height: max-content;" data-expected-width="288" data-expected-height="188">
+    <div class="item" data-offset-x="144" data-offset-y="94" data-expected-width="100" data-expected-height="50"></div>
+  </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-002.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-002.html
new file mode 100644
index 0000000000..9fc0c98311
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-002.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Auto repeat tracks and percentage max sizes</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
+<meta name="assert" content="This test checks that auto repeat tracks use percentage max size when size is indefinite to compute the number of tracks.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+.grid {
+  position: relative;
+  display: grid;
+  grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);
+  max-width: 50%;
+  max-height: 80%;
+}
+.wrapper {
+  width: 600px;
+  height: 250px;
+}
+.item {
+  background: lime;
+  /* Place item on the last cell. */
+  grid-column: -2;
+  grid-row: -2;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid');">
+
+<div id="log"></div>
+
+<div class="wrapper">
+  <div class="grid" data-expected-width="300" data-expected-height="200">
+    <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200">
+    <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200">
+    <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+  </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001.html
new file mode 100644
index 0000000000..7ff8b2ca23
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Auto repeat tracks with min and max sizes</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
+<meta name="assert" content="This test checks that auto repeat tracks don't overflow the grid container size when max size is definite, even if min size is bigger than that.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+.grid {
+  position: relative;
+  display: grid;
+  grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);
+  max-width: 100px;
+  min-width: 250px;
+  max-height: 50px;
+  min-height: 125px;
+  float: left;
+}
+.border {
+  border: 10px solid;
+}
+.border-box {
+  box-sizing: border-box;
+}
+.item {
+  background: lime;
+  /* Place item on the last cell. */
+  grid-column: -2;
+  grid-row: -2;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid');">
+
+<div id="log"></div>
+
+<div class="grid" data-expected-width="250" data-expected-height="125">
+  <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid" style="width: 200px; height: 100px;" data-expected-width="250" data-expected-height="125">
+  <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid" style="width: min-content; height: min-content;" data-expected-width="250" data-expected-height="125">
+  <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid" style="width: max-content; height: max-content;" data-expected-width="250" data-expected-height="125">
+  <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-001.html
new file mode 100644
index 0000000000..cb29eed153
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-001.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Auto repeat tracks and min sizes</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
+<meta name="assert" content="This test checks that auto repeat tracks use min size when available to compute the number of tracks.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+.grid {
+  position: relative;
+  display: grid;
+  grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);
+  min-width: 300px;
+  min-height: 200px;
+  float: left;
+}
+.border {
+  border: 10px solid;
+}
+.border-box {
+  box-sizing: border-box;
+}
+.item {
+  background: lime;
+  /* Place item on the last cell. */
+  grid-column: -2;
+  grid-row: -2;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid');">
+
+<div id="log"></div>
+
+<div class="grid" data-expected-width="300" data-expected-height="200">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid" style="width: 200px; height: 100px;" data-expected-width="300" data-expected-height="200">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border" data-expected-width="320" data-expected-height="220">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border" style="width: 200px; height: 100px;" data-expected-width="320" data-expected-height="220">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border" style="width: min-content; height: min-content;" data-expected-width="320" data-expected-height="220">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border" style="width: max-content; height: max-content;" data-expected-width="320" data-expected-height="220">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border border-box" data-expected-width="320" data-expected-height="220">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border border-box" style="width: 200px; height: 100px;" data-expected-width="300" data-expected-height="200">
+  <div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border border-box" style="width: min-content; height: min-content;" data-expected-width="320" data-expected-height="220">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+<div class="grid border border-box" style="width: max-content; height: max-content;" data-expected-width="320" data-expected-height="220">
+  <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-002.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-002.html
new file mode 100644
index 0000000000..4c73da7773
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-002.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Auto repeat tracks and percentage min sizes</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
+<meta name="assert" content="This test checks that auto repeat tracks use percentage min size when available to compute the number of tracks.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+.grid {
+  position: relative;
+  display: grid;
+  grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);
+  min-width: 50%;
+  min-height: 80%;
+  float: left;
+}
+.wrapper {
+  width: 600px;
+  height: 250px;
+}
+.item {
+  background: lime;
+  /* Place item on the last cell. */
+  grid-column: -2;
+  grid-row: -2;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid');">
+
+<div id="log"></div>
+
+<div class="wrapper">
+  <div class="grid" data-expected-width="300" data-expected-height="200">
+    <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid" style="width: 200px; height: 100px;" data-expected-width="300" data-expected-height="200">
+    <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200">
+    <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200">
+    <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+  </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-003.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-003.html
new file mode 100644
index 0000000000..ffaaab33ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-003.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Auto repeat tracks and percentage min sizes with percentage track sizes</title>
+<link rel="author" title="Jacques Newman" href="mailto:janewman@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
+<meta name="assert"
+  content="This test checks that auto repeat tracks can use percentage track
+  size when only a min size is available to compute the number of tracks.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+  .grid {
+    position: relative;
+    display: inline-grid;
+    grid-template-columns: repeat(auto-fill, 25%);
+    grid-auto-rows: 100px;
+    min-width: 50%;
+    float: left;
+  }
+
+  .wrapper {
+    width: 600px;
+  }
+
+  #cell {
+    background: lime;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid');">
+
+  <div id="log"></div>
+
+  <div class="wrapper">
+    <div class="grid" data-expected-width="300" data-expected-height="200">
+      <div id="cell" data-expected-width="75">Cell 1</div>
+      <div id="cell" data-expected-width="75">Cell 2</div>
+      <div id="cell" data-expected-width="75">Cell 3</div>
+      <div id="cell" data-expected-width="75">Cell 4</div>
+      <div id="cell" data-expected-width="75">Cell 5</div>
+    </div>
+  </div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-004.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-004.html
new file mode 100644
index 0000000000..8d2eda7902
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-004.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Auto repeat tracks and percentage min sizes with percentage track sizes</title>
+<link rel="author" title="Jacques Newman" href="mailto:janewman@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat">
+<meta name="assert"
+  content="This test checks that auto repeat tracks can use percentage track
+  size when only a min size is available to compute the number of tracks.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+  .grid {
+    position: relative;
+    display: inline-grid;
+    grid-template-rows: repeat(auto-fill, 20%);
+    grid-auto-columns: 100px;
+    min-height: 50%;
+    float: left;
+  }
+
+  .wrapper {
+    height: 1000px;
+  }
+
+  #cell {
+    background-color: lime;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid');">
+  <div id="log"></div>
+  <div class="wrapper">
+    <div class="grid" data-expected-width="100" data-expected-height="500">
+      <div id="cell" data-expected-width="100" data-expected-height="100">Cell 1</div>
+      <div id="cell" data-expected-width="100" data-expected-height="100">Cell 2</div>
+      <div id="cell" data-expected-width="100" data-expected-height="100">Cell 3</div>
+      <div id="cell" data-expected-width="100" data-expected-height="100">Cell 4</div>
+      <div id="cell" data-expected-width="100" data-expected-height="100">Cell 5</div>
+    </div>
+  </div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-minmax.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-minmax.html
new file mode 100644
index 0000000000..f6c7af1e70
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-minmax.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=973906">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div style="display: grid; width: 100px; grid-template: 50px 50px / repeat(auto-fill, minmax(50px, 25px));">
+  <div style="background: green;"></div>
+  <div style="background: green;"></div>
+  <div style="background: green;"></div>
+  <div style="background: green;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-001.html
new file mode 100644
index 0000000000..085d94996f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-001.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>CSS Grid Layout Test: Auto Repaeat with Multiple Tracks and Gutters</title>
+    <link rel="author" title="Yu Shen" href="shenyu.tcv@gmail.com">
+    <link rel="help" href="https://www.w3.org/TR/css-grid-1/#repeat-notation">
+    <link rel="match" href="../reference/grid-auto-repeat-multiple-values-001-ref.html">
+    <style>
+        .grid-container {
+            display: grid;
+            border: solid thick;
+            margin: 10px;
+        }
+
+        .columns {
+            grid-template-columns: repeat(auto-fill, 50px 50px);
+            grid-auto-rows: 25px;
+            grid-column-gap: 100px;
+            width: 300px;
+        }
+
+        .rows {
+            grid-auto-flow: column;
+            grid-template-rows: repeat(auto-fill, 50px 50px);
+            grid-auto-columns: 25px;
+            grid-row-gap: 100px;
+            width: min-content;
+            height: 300px;
+        }
+
+        .grid-container>div {
+            background: lime;
+        }
+    </style>
+</head>
+
+<body>
+    <p>The test passes if it has the same visual effect as reference.</p>
+    <div class="grid-container columns">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+    <div class="grid-container rows">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+</body>
+
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-002-ref.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-002-ref.html
new file mode 100644
index 0000000000..754fec3fa0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-002-ref.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#typedef-auto-repeat">
+<head>
+  <style>
+
+.grid-container {
+  height: 30px;
+  width: 300px;
+  border-bottom: 2px solid #cfbfcf;
+}
+
+.grid-container > * { float: left; height: 30px; }
+.grid-container > :nth-child(2n) {  background: sienna; }
+.grid-container > :nth-child(2n + 1) {  background: orange; }
+
+</style>
+</head>
+
+<body>
+  <p>The test passes if it has the same visual effect as reference.</p>
+  <div class="grid-container">
+    <div style="width: 10px;"></div>
+    <div style="width: 20px;"></div>
+    <div style="width: 30px;"></div>
+    <div style="width: 40px;"></div>
+    <div style="width: 30px;"></div>
+    <div style="width: 40px;"></div>
+  </div>
+  <div class="grid-container">
+    <div style="width: 10px;"></div>
+    <div style="width: 20px;"></div>
+    <div style="width: 30px;"></div>
+    <div style="width: 40px;"></div>
+    <div style="width: 30px;"></div>
+    <div style="width: 50px; margin-left: 40px;"></div>
+  </div>
+  <div class="grid-container">
+    <div style="width: 20px; margin-left: 10px"></div>
+    <div style="width: 30px;"></div>
+    <div style="width: 30px; margin-left: 40px;"></div>
+    <div style="width: 40px;"></div>
+    <div style="width: 50px;"></div>
+    <div style="width: 60px;"></div>
+  </div>
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-002.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-002.html
new file mode 100644
index 0000000000..723d876a6a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-002.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#typedef-auto-repeat">
+<link rel="match" href="grid-auto-repeat-multiple-values-002-ref.html">
+<head>
+  <style>
+
+.holder {
+  height: 30px;
+  width: 300px;
+  border-bottom: 2px solid #cfbfcf;
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: 10px 20px repeat(auto-fill, 30px 40px) 50px 60px;
+  grid-template-rows: repeat(auto-fill, minmax(30px, auto));
+}
+
+.grid-container > :nth-child(2n)   {  background: sienna; }
+.grid-container > :nth-child(2n+1) {  background: orange; }
+  </style>
+</head>
+
+<body>
+  <p>The test passes if it has the same visual effect as reference.</p>
+  <div class="holder">
+    <div class="grid-container">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </div>
+
+  <div class="holder">
+    <div class="grid-container">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div style="grid-column: 7;"></div>
+    </div>
+  </div>
+
+  <div class="holder">
+    <div class="grid-container">
+      <div style="grid-column: 2;"></div>
+      <div></div>
+      <div style="grid-column: 5;"></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-003-ref.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-003-ref.html
new file mode 100644
index 0000000000..975c94b795
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-003-ref.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html>
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#typedef-auto-repeat">
+<head>
+  <style>
+
+.grid-container {
+  height: 30px;
+  width: 300px;
+  border-bottom: 2px solid #cfbfcf;
+}
+
+.grid-container > * { float: left; height: 30px; }
+.grid-container > :nth-child(2n) {  background: sienna; }
+.grid-container > :nth-child(2n + 1) {  background: orange; }
+
+.auto-fit-long {
+    width: 650px;
+}
+
+.auto-fit-long > :nth-child(2n) { width: 30px; }
+.auto-fit-long > :nth-child(2n+1) { width: 40px; }
+
+.auto-medium-fit {
+    width: 510px;
+}
+
+</style>
+</head>
+
+<body>
+  <p>The test passes if it has the same visual effect as reference.</p>
+  <div class="grid-container">
+    <div style="width: 10px;"></div>
+    <div style="width: 20px;"></div>
+    <div style="width: 30px;"></div>
+    <div style="width: 40px;"></div>
+    <div style="width: 30px;"></div>
+    <div style="width: 40px;"></div>
+  </div>
+  <div class="grid-container">
+    <div style="width: 10px;"></div>
+    <div style="width: 20px;"></div>
+    <div style="width: 30px;"></div>
+    <div style="width: 40px;"></div>
+    <div style="width: 30px;"></div>
+    <div style="width: 50px;"></div>
+  </div>
+  <div class="grid-container auto-fit-long">
+    <div style="width: 20px; margin-left: 10px"></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <div class="grid-container auto-fit-long">
+    <div style="width: 20px; margin-left: 10px"></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <div class="grid-container auto-fit-long">
+    <div style="width: 20px; margin-left: 10px"></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <div class="grid-container">
+    <div style="width: 20px; margin-left: 10px"></div>
+    <div style="width: 30px;"></div>
+    <div style="width: 30px;"></div>
+    <div style="width: 40px;"></div>
+    <div style="width: 50px;"></div>
+    <div style="width: 60px;"></div>
+  </div>
+  <div class="grid-container">
+    <div style="width: 10px;"></div>
+    <div style="width: 20px;"></div>
+    <div style="width: 30px;"></div>
+    <div style="width: 40px;"></div>
+    <div style="width: 50px;"></div>
+    <div style="width: 60px;"></div>
+  </div>
+  <div class="grid-container">
+    <div style="width: 40px; margin-left: 30px"></div>
+    <div style="width: 30px;"></div>
+    <div style="width: 40px;"></div>
+    <div style="width: 50px;"></div>
+    <div style="width: 60px;"></div>
+  </div>
+  <div class="grid-container auto-medium-fit">
+    <div style="width: 10px;"></div>
+    <div style="width: 110px; margin-left: 20px"></div>
+    <div style="width: 30px;"></div>
+  </div>
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-003.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-003.html
new file mode 100644
index 0000000000..486259a5d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-003.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html>
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#typedef-auto-repeat">
+<link rel="match" href="grid-auto-repeat-multiple-values-003-ref.html">
+<head>
+  <style>
+
+.holder {
+  height: 30px;
+  width: 300px;
+  border-bottom: 2px solid #cfbfcf;
+}
+
+.wide-holder {
+  height: 30px;
+  width: 650px;
+  border-bottom: 2px solid #cfbfcf;
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: 10px 20px repeat(auto-fit, 30px 40px) 50px 60px;
+  grid-template-rows: repeat(auto-fill, minmax(30px, auto));
+}
+
+.grid-container > :nth-child(2n)   {  background: sienna; }
+.grid-container > :nth-child(2n+1) {  background: orange; }
+  </style>
+</head>
+
+<body>
+  <p>The test passes if it has the same visual effect as reference.</p>
+  <div class="holder">
+    <div class="grid-container">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </div>
+
+  <div class="holder">
+    <div class="grid-container">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div style="grid-column: 7;"></div>
+    </div>
+  </div>
+  <!-- Test correct tracking of collapsed tracks -->
+  <div class="holder" style="width: 650px">
+    <div class="grid-container">
+      <div style="grid-column: 2;"></div>
+      <div></div>
+      <div style="grid-column: 6;"></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </div>
+  <div class="holder" style="width: 650px">
+    <div class="grid-container">
+      <div style="grid-column: 2;"></div>
+      <div></div>
+      <div style="grid-column: 10;"></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </div>
+  <div class="holder" style="width: 650px">
+    <div class="grid-container">
+      <div style="grid-column: 2;"></div>
+      <div></div>
+      <div style="grid-column: 12;"></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </div>
+  <div class="holder">
+    <div class="grid-container">
+      <div style="grid-column: 2;"></div>
+      <div></div>
+      <div style="grid-column: 5;"></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </div>
+  <div class="holder">
+    <div class="grid-container">
+      <div></div>
+      <div></div>
+      <div style="grid-column: 5;"></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </div>
+  <!-- Test correct tracking of collapsed tracks when the grid begins in the middle of the repeat. -->
+  <div class="holder">
+    <div class="grid-container">
+      <div style="grid-column: 4;"></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  </div>
+  <!-- Test grid span with correct tracking of collapsed tracks. -->
+  <div class="holder" style="width: 510px">
+    <div class="grid-container">
+      <div></div>
+      <div style="grid-column: 4 / 7;"></div>
+      <div></div>
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-004-ref.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-004-ref.html
new file mode 100644
index 0000000000..650b7d9eaf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-004-ref.html
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>CSS Grid Layout Test: auto-repeat with multiple tracks and line names reference</title>
+    <link rel="author" title="Mozilla" href="https://mozilla.org">
+    <style>
+        .columns {
+            border: 1px solid black;
+            width: 5px;
+            display: grid;
+            grid-template-columns: [u v] 10px [w] 10px [x] 10px [y v] 10px [w] 10px [x] 10px [y z];
+            grid-auto-rows: 5px;
+            grid-column-gap: 3px;
+            /* Does not fit a whole-number of repetitions */
+            width: 94px;
+        }
+        div > div {
+            background: blue;
+        }
+    </style>
+</head>
+<body>
+    <!-- u -->
+    <div class="columns">
+        <div style="grid-column-start: u"></div>
+    </div>
+    <!-- Non-existant line name -->
+    <div class="columns">
+        <div style="grid-column-start: nonesuch"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: u 1"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: u -1"></div>
+    </div>
+    <!-- Also non-existant, there is only one u -->
+    <div class="columns">
+        <div style="grid-column-start: u 4"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: u 9"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: u 2"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: u -2"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: u -6"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: u -7"></div>
+    </div>
+    <!-- v -->
+    <div class="columns">
+        <div style="grid-column-start: v"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: v 1"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: v 2"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: v -1"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: v -2"></div>
+    </div>
+    <!-- Also non-existant, there are only two v's -->
+    <div class="columns">
+        <div style="grid-column-start: v 3"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: v -3"></div>
+    </div>
+    <!-- w -->
+    <div class="columns">
+        <div style="grid-column-start: w"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: w 1"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: w 2"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: w -1"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: w -2"></div>
+    </div>
+    <!-- Also non-existant, there are only two w's -->
+    <div class="columns">
+        <div style="grid-column-start: w 3"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: w -3"></div>
+    </div>
+    <!-- x -->
+    <div class="columns">
+        <div style="grid-column-start: x"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: x 1"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: x 2"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: x -1"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: x -2"></div>
+    </div>
+    <!-- Also non-existant, there are only two x's -->
+    <div class="columns">
+        <div style="grid-column-start: x 3"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: x -3"></div>
+    </div>
+    <!-- y -->
+    <div class="columns">
+        <div style="grid-column-start: y"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: y 1"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: y 2"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: y -1"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: y -2"></div>
+    </div>
+    <!-- Also non-existant, there are only two y's -->
+    <div class="columns">
+        <div style="grid-column-start: y -3"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: y 3"></div>
+    </div>
+    <!-- z -->
+    <div class="columns">
+        <div style="grid-column-start: z"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: z 1"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: z -1"></div>
+    </div>
+    <!-- Also non-existant, there is only one z -->
+    <div class="columns">
+        <div style="grid-column-start: z 2"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: z -2"></div>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-004.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-004.html
new file mode 100644
index 0000000000..460de5f9e8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-004.html
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>CSS Grid Layout Test: auto-repeat with multiple tracks and line names</title>
+    <link rel="author" title="Mozilla" href="https://mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-grid-1/#repeat-notation">
+    <link rel="match" href="grid-auto-repeat-multiple-values-004-ref.html">
+    <style>
+        .columns {
+            border: 1px solid black;
+            display: grid;
+            grid-template-columns: [u] repeat(auto-fill, [v] 10px [w] 10px [x] 10px [y]) [z];
+            grid-auto-rows: 5px;
+            grid-column-gap: 3px;
+            /* Does not fit a whole-number of repetitions */
+            width: 94px;
+        }
+        div > div {
+            background: blue;
+        }
+    </style>
+</head>
+<body>
+    <!-- u -->
+    <div class="columns">
+        <div style="grid-column-start: u"></div>
+    </div>
+    <!-- Non-existant line name -->
+    <div class="columns">
+        <div style="grid-column-start: nonesuch"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: u 1"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: u -1"></div>
+    </div>
+    <!-- Also non-existant, there is only one u -->
+    <div class="columns">
+        <div style="grid-column-start: u 4"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: u 9"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: u 2"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: u -2"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: u -6"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: u -7"></div>
+    </div>
+    <!-- v -->
+    <div class="columns">
+        <div style="grid-column-start: v"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: v 1"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: v 2"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: v -1"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: v -2"></div>
+    </div>
+    <!-- Also non-existant, there are only two v's -->
+    <div class="columns">
+        <div style="grid-column-start: v 3"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: v -3"></div>
+    </div>
+    <!-- w -->
+    <div class="columns">
+        <div style="grid-column-start: w"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: w 1"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: w 2"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: w -1"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: w -2"></div>
+    </div>
+    <!-- Also non-existant, there are only two w's -->
+    <div class="columns">
+        <div style="grid-column-start: w 3"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: w -3"></div>
+    </div>
+    <!-- x -->
+    <div class="columns">
+        <div style="grid-column-start: x"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: x 1"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: x 2"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: x -1"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: x -2"></div>
+    </div>
+    <!-- Also non-existant, there are only two x's -->
+    <div class="columns">
+        <div style="grid-column-start: x 3"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: x -3"></div>
+    </div>
+    <!-- y -->
+    <div class="columns">
+        <div style="grid-column-start: y"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: y 1"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: y 2"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: y -1"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: y -2"></div>
+    </div>
+    <!-- Also non-existant, there are only two y's -->
+    <div class="columns">
+        <div style="grid-column-start: y -3"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: y 3"></div>
+    </div>
+    <!-- z -->
+    <div class="columns">
+        <div style="grid-column-start: z"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: z 1"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: z -1"></div>
+    </div>
+    <!-- Also non-existant, there is only one z -->
+    <div class="columns">
+        <div style="grid-column-start: z 2"></div>
+    </div>
+    <div class="columns">
+        <div style="grid-column-start: z -2"></div>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-005-ref.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-005-ref.html
new file mode 100644
index 0000000000..305d256fcb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-005-ref.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>CSS Grid Layout Test: auto-repeat with multiple tracks and line names reference</title>
+    <link rel="author" title="Mozilla" href="https://mozilla.org">
+    <style>
+        .rows {
+            border: 1px solid black;
+            display: inline-grid;
+            grid-auto-flow: column;
+            grid-template-rows: [u v] 10px [w] 10px [x] 10px [y v] 10px [w] 10px [x] 10px [y z];
+            grid-auto-columns: 5px;
+            grid-row-gap: 3px;
+            width: min-content;
+            /* Does not fit a whole-number of repetitions */
+            height: 94px;
+        }
+        div > div {
+            background: blue;
+        }
+    </style>
+</head>
+<body>
+    <div class="rows">
+        <div style="grid-row-start: u"></div>
+    </div>
+    <!-- Non-existant line name -->
+    <div class="rows">
+        <div style="grid-row-start: nonesuch"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: u 1"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: u -1"></div>
+    </div>
+    <!-- Also non-existant, there is only one u -->
+    <div class="rows">
+        <div style="grid-row-start: u 2"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: u -2"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: u -6"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: u -7"></div>
+    </div>
+    <!-- v -->
+    <div class="rows">
+        <div style="grid-row-start: v"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: v 1"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: v 2"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: v -1"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: v -2"></div>
+    </div>
+    <!-- Also non-existant, there are only two v's -->
+    <div class="rows">
+        <div style="grid-row-start: v 3"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: v -3"></div>
+    </div>
+    <!-- w -->
+    <div class="rows">
+        <div style="grid-row-start: w"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: w 1"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: w 2"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: w -1"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: w -2"></div>
+    </div>
+    <!-- Also non-existant, there are only two w's -->
+    <div class="rows">
+        <div style="grid-row-start: w 3"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: w -3"></div>
+    </div>
+    <!-- x -->
+    <div class="rows">
+        <div style="grid-row-start: x"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: x 1"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: x 2"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: x -1"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: x -2"></div>
+    </div>
+    <!-- Also non-existant, there are only two x's -->
+    <div class="rows">
+        <div style="grid-row-start: x 3"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: x -3"></div>
+    </div>
+    <!-- y -->
+    <div class="rows">
+        <div style="grid-row-start: y"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: y 1"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: y 2"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: y -1"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: y -2"></div>
+    </div>
+    <!-- Also non-existant, there are only two y's -->
+    <div class="rows">
+        <div style="grid-row-start: y 3"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: y -3"></div>
+    </div>
+    <!-- z -->
+    <div class="rows">
+        <div style="grid-row-start: z"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: z 1"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: z -1"></div>
+    </div>
+    <!-- Also non-existant, there is only one z -->
+    <div class="rows">
+        <div style="grid-row-start: z 2"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: z -2"></div>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-005.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-005.html
new file mode 100644
index 0000000000..8671df79b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-005.html
@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>CSS Grid Layout Test: auto-repeat with multiple tracks and line names</title>
+    <link rel="author" title="Mozilla" href="https://mozilla.org">
+    <link rel="help" href="https://www.w3.org/TR/css-grid-1/#repeat-notation">
+    <link rel="match" href="grid-auto-repeat-multiple-values-005-ref.html">
+    <style>
+        .rows {
+            border: 1px solid black;
+            display: inline-grid;
+            grid-auto-flow: column;
+            grid-template-rows: [u] repeat(auto-fill, [v] 10px [w] 10px [x] 10px [y]) [z];
+            grid-auto-columns: 5px;
+            grid-row-gap: 3px;
+            width: min-content;
+            /* Does not fit a whole-number of repetitions */
+            height: 94px;
+        }
+        div > div {
+            background: blue;
+        }
+    </style>
+</head>
+<body>
+    <div class="rows">
+        <div style="grid-row-start: u"></div>
+    </div>
+    <!-- Non-existant line name -->
+    <div class="rows">
+        <div style="grid-row-start: nonesuch"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: u 1"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: u -1"></div>
+    </div>
+    <!-- Also non-existant, there is only one u -->
+    <div class="rows">
+        <div style="grid-row-start: u 2"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: u -2"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: u -6"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: u -7"></div>
+    </div>
+    <!-- v -->
+    <div class="rows">
+        <div style="grid-row-start: v"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: v 1"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: v 2"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: v -1"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: v -2"></div>
+    </div>
+    <!-- Also non-existant, there are only two v's -->
+    <div class="rows">
+        <div style="grid-row-start: v 3"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: v -3"></div>
+    </div>
+    <!-- w -->
+    <div class="rows">
+        <div style="grid-row-start: w"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: w 1"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: w 2"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: w -1"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: w -2"></div>
+    </div>
+    <!-- Also non-existant, there are only two w's -->
+    <div class="rows">
+        <div style="grid-row-start: w 3"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: w -3"></div>
+    </div>
+    <!-- x -->
+    <div class="rows">
+        <div style="grid-row-start: x"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: x 1"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: x 2"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: x -1"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: x -2"></div>
+    </div>
+    <!-- Also non-existant, there are only two x's -->
+    <div class="rows">
+        <div style="grid-row-start: x 3"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: x -3"></div>
+    </div>
+    <!-- y -->
+    <div class="rows">
+        <div style="grid-row-start: y"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: y 1"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: y 2"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: y -1"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: y -2"></div>
+    </div>
+    <!-- Also non-existant, there are only two y's -->
+    <div class="rows">
+        <div style="grid-row-start: y 3"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: y -3"></div>
+    </div>
+    <!-- z -->
+    <div class="rows">
+        <div style="grid-row-start: z"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: z 1"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: z -1"></div>
+    </div>
+    <!-- Also non-existant, there is only one z -->
+    <div class="rows">
+        <div style="grid-row-start: z 2"></div>
+    </div>
+    <div class="rows">
+        <div style="grid-row-start: z -2"></div>
+    </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-positioned-container-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-positioned-container-001-ref.html
new file mode 100644
index 0000000000..a017563aa3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-positioned-container-001-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<link href="/css/support/grid.css" rel="stylesheet"/>
+<style>
+
+.grid {
+    width: 100px;
+    grid: repeat(5, 20px) / repeat(4, 25px);
+    justify-content: start;
+    align-content: start;
+}
+
+.item {
+    background: green;
+}
+</style>
+
+<p>Test passes if you get a grid with 5 rows of 20px and 4 columns of 25px.</p>
+
+<pre id="log">grid: 20px 20px 20px 20px 20px / 25px 25px 25px 25px;</pre>
+
+<div class="wrapper">
+    <div id="grid" class="grid">
+        <div class="item" style="grid-area: 1 / 1;"></div>
+        <div class="item" style="grid-area: 2 / 2;"></div>
+        <div class="item" style="grid-area: 3 / 3;"></div>
+        <div class="item" style="grid-area: 4 / 4;"></div>
+        <div class="item" style="grid-row: 5; grid-column: 1 / -1;"></div>
+    </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-positioned-container-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-positioned-container-001.html
new file mode 100644
index 0000000000..309ad85671
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-positioned-container-001.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<title>CSS Grid: auto-repeat tracks on a positioned grid container.</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"/>
+<link rel="issue" href="https://crbug.com/624301"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#repeat-notation"/>
+<link rel="match" href="grid-auto-repeat-positioned-container-001-ref.html"/>
+<meta name="assert" content="Checks that auto repeat tracks are properly computed for a positioned grid container with a definite width and height."/>
+<link href="/css/support/grid.css" rel="stylesheet"/>
+<style>
+.wrapper {
+    position: relative;
+    width: 100px;
+    height: 100px;
+}
+
+.grid {
+    position: absolute;
+    left: 0; right: 0; top: 0; bottom: 0;
+    grid: repeat(auto-fill, 20px) / repeat(auto-fill, 25px);
+    justify-content: start;
+    align-content: start;
+}
+
+.item {
+    background: green;
+}
+</style>
+
+<p>Test passes if you get a grid with 5 rows of 20px and 4 columns of 25px.</p>
+
+<pre id="log"></pre>
+
+<div class="wrapper">
+    <div id="grid" class="grid">
+        <div class="item" style="grid-area: 1 / 1;"></div>
+        <div class="item" style="grid-area: 2 / 2;"></div>
+        <div class="item" style="grid-area: 3 / 3;"></div>
+        <div class="item" style="grid-area: 4 / 4;"></div>
+        <div class="item" style="grid-row: 5; grid-column: 1 / -1;"></div>
+    </div>
+</div>
+
+<script>
+    var log = document.getElementById("log");
+
+    var grid = document.getElementById("grid");
+    var computedStyle = getComputedStyle(grid);
+
+    log.innerHTML = "grid: " + computedStyle.getPropertyValue("grid-template-rows") + " / " + computedStyle.getPropertyValue("grid-template-columns") + ";";
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-change-auto-repeat-tracks.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-change-auto-repeat-tracks.html
new file mode 100644
index 0000000000..c2d17ec615
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-change-auto-repeat-tracks.html
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support 'repeat()' notation for 'grid-template-columns' and 'grid-template-rows' properties</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#repeat-notation" title="5.1.2 Repeating Rows and Columns: the 'repeat()' notation">
+<meta name="assert" content="This test checks that grid-template-{rows|columns} with auto-repeat tracks recomputes the positions of automatically placed grid items.">
+
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+.grid {
+  grid-auto-rows: 25px;
+  grid-auto-columns: 25px;
+  margin-bottom: 10px;
+}
+.fixedWidth {
+  width: 50px;
+  grid-auto-flow: row;
+  grid-template-columns: repeat(auto-fill, 25px);
+}
+.fixedHeight {
+  width: 100px;
+  height: 50px;
+  grid-auto-flow: column;
+  grid-template-rows: repeat(auto-fill, 25px);
+}
+#i1-1, #i2-1 {
+  grid-row: auto;
+  grid-column: 1;
+  background-color: orange;
+}
+#i1-2, #i2-2 {
+  grid-row: 1;
+  grid-column: auto;
+  background-color: green;
+}
+#i1-3, #i2-3 {
+  grid-row: auto;
+  grid-column: auto;
+  background-color: blue;
+}
+</style>
+
+<div id="log"></div>
+
+<div style="position: relative">
+  <div id="grid1" class="grid fixedWidth">
+    <div id="i1-1"></div>
+    <div id="i1-2"></div>
+    <div id="i1-3"></div>
+  </div>
+</div>
+<div style="position: relative">
+  <div id="grid2" class="grid fixedHeight">
+    <div id="i2-1"></div>
+    <div id="i2-2"></div>
+    <div id="i2-3"></div>
+  </div>
+</div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script>
+function setGridTemplate(id, gridTemplateRows, gridTemplateColumns) {
+  let gridElement = document.getElementById(id);
+  gridElement.style.gridTemplateRows = gridTemplateRows;
+  gridElement.style.gridTemplateColumns = gridTemplateColumns;
+}
+
+function setGridSize(id, width, height) {
+  let gridElement = document.getElementById(id);
+  gridElement.style.width = width;
+  gridElement.style.height = height;
+}
+
+function setGridItemPlacement(id, gridRow, gridColumn) {
+  let gridItem = document.getElementById(id);
+  gridItem.style.gridRow = gridRow;
+  gridItem.style.gridColumn = gridColumn;
+}
+
+function testGridDefinitions(...gridItemDataList) {
+  for (let gridItemData of gridItemDataList) {
+    let gridItem = document.getElementById(gridItemData.id);
+    gridItem.setAttribute("data-expected-width", gridItemData.width);
+    gridItem.setAttribute("data-expected-height", gridItemData.height);
+    gridItem.setAttribute("data-offset-x", gridItemData.x);
+    gridItem.setAttribute("data-offset-y", gridItemData.y);
+  }
+  checkLayout(".grid", false);
+}
+
+// Test changing the number of auto-repeat tracks.
+setGridTemplate('grid1', 'none', 'repeat(auto-fill, 25px)');
+setGridTemplate('grid2', 'repeat(auto-fill, 25px)', 'none');
+testGridDefinitions(
+  { id: 'i1-1', width: '25', height: '25', x: '0', y: '25' },
+  { id: 'i1-2', width: '25', height: '25', x: '0', y: '0' },
+  { id: 'i1-3', width: '25', height: '25', x: '25', y: '25' },
+  { id: 'i2-1', width: '25', height: '25', x: '0', y: '0' },
+  { id: 'i2-2', width: '25', height: '25', x: '25', y: '0' },
+  { id: 'i2-3', width: '25', height: '25', x: '25', y: '25' });
+
+setGridTemplate('grid1', 'none', 'none');
+setGridTemplate('grid2', 'none', 'none');
+testGridDefinitions(
+  { id: 'i1-1', width: '25', height: '25', x: '0', y: '25' },
+  { id: 'i1-2', width: '25', height: '25', x: '0', y: '0' },
+  { id: 'i1-3', width: '25', height: '25', x: '0', y: '50' },
+  { id: 'i2-1', width: '25', height: '25', x: '0', y: '0' },
+  { id: 'i2-2', width: '25', height: '25', x: '25', y: '0' },
+  { id: 'i2-3', width: '25', height: '25', x: '50', y: '0' });
+
+setGridTemplate('grid1', 'none', '5px repeat(auto-fill, 20px)');
+setGridTemplate('grid2', 'repeat(auto-fill, 20px) 3px', 'none');
+testGridDefinitions(
+  { id: 'i1-1', width: '5', height: '25', x: '0', y: '25' },
+  { id: 'i1-2', width: '5', height: '25', x: '0', y: '0' },
+  { id: 'i1-3', width: '20', height: '25', x: '5', y: '25' },
+  { id: 'i2-1', width: '25', height: '20', x: '0', y: '0' },
+  { id: 'i2-2', width: '25', height: '20', x: '25', y: '0' },
+  { id: 'i2-3', width: '25', height: '20', x: '25', y: '20' });
+
+setGridTemplate('grid1', 'none', '5px repeat(auto-fill, 22px)');
+setGridTemplate('grid2', 'repeat(auto-fill, 18px) 3px', 'none');
+testGridDefinitions(
+  { id: 'i1-1', width: '5', height: '25', x: '0', y: '25' },
+  { id: 'i1-2', width: '5', height: '25', x: '0', y: '0' },
+  { id: 'i1-3', width: '22', height: '25', x: '5', y: '25' },
+  { id: 'i2-1', width: '25', height: '18', x: '0', y: '0' },
+  { id: 'i2-2', width: '25', height: '18', x: '25', y: '0' },
+  { id: 'i2-3', width: '25', height: '18', x: '25', y: '18' });
+
+setGridTemplate('grid1', 'none', 'repeat(auto-fill, 45px)');
+setGridTemplate('grid2', 'repeat(auto-fill, 45px)', 'none');
+testGridDefinitions(
+  { id: 'i1-1', width: '45', height: '25', x: '0', y: '25' },
+  { id: 'i1-2', width: '45', height: '25', x: '0', y: '0' },
+  { id: 'i1-3', width: '45', height: '25', x: '0', y: '50' },
+  { id: 'i2-1', width: '25', height: '45', x: '0', y: '0' },
+  { id: 'i2-2', width: '25', height: '45', x: '25', y: '0' },
+  { id: 'i2-3', width: '25', height: '45', x: '50', y: '0' });
+
+// Test changing the size of the grid.
+setGridSize('grid1', '100px', 'auto');
+setGridSize('grid2', '100px', '100px');
+testGridDefinitions(
+  { id: 'i1-1', width: '45', height: '25', x: '0', y: '25' },
+  { id: 'i1-2', width: '45', height: '25', x: '0', y: '0' },
+  { id: 'i1-3', width: '45', height: '25', x: '45', y: '25' },
+  { id: 'i2-1', width: '25', height: '45', x: '0', y: '0' },
+  { id: 'i2-2', width: '25', height: '45', x: '25', y: '0' },
+  { id: 'i2-3', width: '25', height: '45', x: '25', y: '45' });
+
+// Move the third item so that there is an empty track between it and the others.
+setGridItemPlacement('i1-3', 'auto', '3');
+setGridItemPlacement('i2-3', '3', 'auto');
+testGridDefinitions(
+  { id: 'i1-1', width: '45', height: '25', x: '0', y: '25' },
+  { id: 'i1-2', width: '45', height: '25', x: '0', y: '0' },
+  { id: 'i1-3', width: '25', height: '25', x: '90', y: '25' },
+  { id: 'i2-1', width: '25', height: '45', x: '0', y: '0' },
+  { id: 'i2-2', width: '25', height: '45', x: '25', y: '0' },
+  { id: 'i2-3', width: '25', height: '25', x: '25', y: '90' });
+
+// Set the same templates, but using auto-fit instead of auto-fill. The empty track should collapse.
+setGridTemplate('grid1', 'none', 'repeat(auto-fit, 45px)');
+setGridTemplate('grid2', 'repeat(auto-fit, 45px)', 'none');
+testGridDefinitions(
+  { id: 'i1-1', width: '45', height: '25', x: '0', y: '25' },
+  { id: 'i1-2', width: '45', height: '25', x: '0', y: '0' },
+  { id: 'i1-3', width: '25', height: '25', x: '45', y: '25' },
+  { id: 'i2-1', width: '25', height: '45', x: '0', y: '0' },
+  { id: 'i2-2', width: '25', height: '45', x: '25', y: '0' },
+  { id: 'i2-3', width: '25', height: '25', x: '25', y: '45' });
+
+done();
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-change-fit-content-argument-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-change-fit-content-argument-001.html
new file mode 100644
index 0000000000..d697af4743
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-change-fit-content-argument-001.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Change fit-content() argument</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing">
+<meta name="assert" content="This test checks that grid-template-{rows|columns} with fit-content() tracks recomputes the tracks when the fit-content() argument is modified.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  width: fit-content;
+  position: relative;
+  justify-content: start;
+  align-content: start;
+  font: 25px/1 Ahem;
+}
+
+.verticalLR {
+  writing-mode: vertical-lr;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script>
+setup({ explicit_done: true });
+function setGridTemplate(id, gridTemplateRows, gridTemplateColumns)
+{
+  var gridElement = document.getElementById(id);
+  gridElement.style.gridTemplateRows = gridTemplateRows;
+  gridElement.style.gridTemplateColumns = gridTemplateColumns;
+}
+
+function testGridItemDefinitions(gridItemData)
+{
+  var item = document.getElementById(gridItemData.id);
+  item.setAttribute("data-expected-width", gridItemData.width);
+  item.setAttribute("data-expected-height", gridItemData.height);
+  item.setAttribute("data-offset-x", gridItemData.x);
+  item.setAttribute("data-offset-y", gridItemData.y);
+
+  checkLayout(".grid", false);
+}
+
+function testChangingGridDefinitions()
+{
+  // Test changing the argument of fit-content() tracks.
+  setGridTemplate("grid1", "none", "fit-content(100px)");
+  testGridItemDefinitions({"id": "item1", "width": "100", "height": "100", "x": "0", "y": "0" });
+
+  setGridTemplate("grid1", "none", "fit-content(150px)");
+  testGridItemDefinitions({"id": "item1", "width": "150", "height": "75", "x": "0", "y": "0" });
+
+  setGridTemplate("grid2", "fit-content(100px)", "none");
+  testGridItemDefinitions({"id": "item2", "width": "100", "height": "100", "x": "0", "y": "0" });
+
+  setGridTemplate("grid2", "fit-content(150px)", "none");
+  testGridItemDefinitions({"id": "item2", "width": "75", "height": "150", "x": "0", "y": "0" });
+
+  done();
+}
+</script>
+
+<body onload="document.fonts.ready.then(() => { testChangingGridDefinitions(); })">
+<div id="grid1" class="grid">
+  <div id="item1" class="autoRowAutoColumn">XXXX XXX XX X X</div>
+</div>
+
+<div id="grid2" class="grid">
+  <div id="item2" class="autoRowAutoColumn verticalLR">XXXX XXX XX X X</div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-change-intrinsic-size-with-auto-repeat-tracks-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-change-intrinsic-size-with-auto-repeat-tracks-001.html
new file mode 100644
index 0000000000..437ad81879
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-change-intrinsic-size-with-auto-repeat-tracks-001.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<title>CSS Grid: auto-repeat tracks and intrinsic sizes.</title>
+<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#repeat-notation"/>
+<meta name="assert" content="Test ensure that grids properly recompute the number of auto repeat tracks when the min|max-content contributions of grid items changed."/>
+<link rel="issue" href="https://crbug.com/621517"/>
+<link rel="issue" href="https://crbug.com/633474"/>
+<link href="/css/support/grid.css" rel="stylesheet"/>
+<link href="/css/support/width-keyword-classes.css" rel="stylesheet"/>
+<style>
+.grid {
+    border: 2px solid black;
+    position: relative;
+    min-width: 30px;
+
+    grid-auto-columns: 20px;
+
+    padding-top: 10px;
+    margin-bottom: 10px;
+}
+
+.abs { height: 5px; position: absolute; width: 100%; }
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script>
+function setGridTemplate(id, gridTemplateRows, gridTemplateColumns)
+{
+     var gridElement = document.getElementById(id);
+     gridElement.style.gridTemplateRows = gridTemplateRows;
+     gridElement.style.gridTemplateColumns = gridTemplateColumns;
+}
+
+function setItemSize(id, width, height)
+{
+     var gridElement = document.getElementById(id);
+     gridElement.style.width = width;
+     gridElement.style.height = height;
+}
+
+function testGridDefinitions(gridItemsData)
+{
+    var length = gridItemsData.length;
+    for (i = 0; i < length; ++i) {
+        var item = document.getElementById(gridItemsData[i].id);
+        item.setAttribute("data-expected-width", gridItemsData[i].width);
+        item.setAttribute("data-expected-height", gridItemsData[i].height);
+        item.setAttribute("data-offset-x", gridItemsData[i].x);
+        item.setAttribute("data-offset-y", gridItemsData[i].y);
+    }
+
+    checkLayout(".grid", false);
+}
+
+function testChangingGridDefinitions()
+{
+     setGridTemplate('grid1', 'none', 'repeat(auto-fill, 20px) minmax(min-content, 40px)');
+
+     setItemSize('item', '100px', '30px');
+     testGridDefinitions([
+         { 'id': 'item', 'width': '100', 'height': '30', 'x': '0', 'y': '10' },
+         { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
+         { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' },
+         { 'id': 'a3', 'width': '20', 'height': '5', 'x': '40', 'y': '0' },
+         { 'id': 'a4', 'width': '40', 'height': '5', 'x': '60', 'y': '0' }
+     ]);
+
+     setItemSize('item', '80px', '30px');
+     testGridDefinitions([
+         { 'id': 'item', 'width': '80', 'height': '30', 'x': '0', 'y': '10' },
+         { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
+         { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' },
+         { 'id': 'a3', 'width': '40', 'height': '5', 'x': '40', 'y': '0' },
+         { 'id': 'a4', 'width': '0', 'height': '5', 'x': '80', 'y': '0' }
+     ]);
+
+     setItemSize('item', '15px', '30px');
+     testGridDefinitions([
+         { 'id': 'item', 'width': '15', 'height': '30', 'x': '0', 'y': '10' },
+         { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
+         { 'id': 'a2', 'width': '40', 'height': '5', 'x': '20', 'y': '0' },
+         { 'id': 'a3', 'width': '0', 'height': '5', 'x': '60', 'y': '0' },
+         { 'id': 'a4', 'width': '60', 'height': '5', 'x': '0', 'y': '0' }
+     ]);
+
+     setItemSize('item', '120px', '30px');
+     testGridDefinitions([
+         { 'id': 'item', 'width': '120', 'height': '30', 'x': '0', 'y': '10' },
+         { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
+         { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' },
+         { 'id': 'a3', 'width': '20', 'height': '5', 'x': '40', 'y': '0' },
+         { 'id': 'a4', 'width': '20', 'height': '5', 'x': '60', 'y': '0' }
+     ]);
+
+     var grid = document.getElementById('grid1');
+     grid.className = grid.className.replace('max-content', 'min-content');
+
+     setItemSize('item', '100px', '30px');
+     testGridDefinitions([
+         { 'id': 'item', 'width': '100', 'height': '30', 'x': '0', 'y': '10' },
+         { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
+         { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' },
+         { 'id': 'a3', 'width': '20', 'height': '5', 'x': '40', 'y': '0' },
+         { 'id': 'a4', 'width': '40', 'height': '5', 'x': '60', 'y': '0' }
+     ]);
+
+     setItemSize('item', '80px', '30px');
+     testGridDefinitions([
+         { 'id': 'item', 'width': '80', 'height': '30', 'x': '0', 'y': '10' },
+         { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
+         { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' },
+         { 'id': 'a3', 'width': '40', 'height': '5', 'x': '40', 'y': '0' },
+         { 'id': 'a4', 'width': '0', 'height': '5', 'x': '80', 'y': '0' }
+     ]);
+
+     setItemSize('item', '15px', '30px');
+     testGridDefinitions([
+         { 'id': 'item', 'width': '15', 'height': '30', 'x': '0', 'y': '10' },
+         { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
+         { 'id': 'a2', 'width': '10', 'height': '5', 'x': '20', 'y': '0' },
+         { 'id': 'a3', 'width': '0', 'height': '5', 'x': '30', 'y': '0' },
+         { 'id': 'a4', 'width': '30', 'height': '5', 'x': '0', 'y': '0' }
+     ]);
+
+     setItemSize('item', '120px', '30px');
+     testGridDefinitions([
+         { 'id': 'item', 'width': '120', 'height': '30', 'x': '0', 'y': '10' },
+         { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' },
+         { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' },
+         { 'id': 'a3', 'width': '20', 'height': '5', 'x': '40', 'y': '0' },
+         { 'id': 'a4', 'width': '20', 'height': '5', 'x': '60', 'y': '0' }
+     ]);
+
+     done();
+}
+
+window.addEventListener("load", testChangingGridDefinitions, false);
+</script>
+
+<div>This test checks that changing the min|max-content contributions of grid items properly recomputes both track sizes and grid positions in grids with auto repeat tracks.</div>
+<div id="log"></div>
+
+<div id="grid1" class="grid max-content">
+    <div id="item" style="grid-column: 1 / -1; background: cyan;"></div>
+    <div id="a1" class="abs" style="grid-column: 1 / 2; background: purple;"></div>
+    <div id="a2" class="abs" style="grid-column: 2 / 3; background: orange;"></div>
+    <div id="a3" class="abs" style="grid-column: 3 / 4; background: yellow;"></div>
+    <div id="a4" class="abs" style="grid-column: 4 / 5; background: magenta;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-auto-repeat-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-auto-repeat-001.html
new file mode 100644
index 0000000000..deda565667
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-auto-repeat-001.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: auto repeat tracks in indefinite containers with minimum size</title>
+<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#repeat-syntax">
+<meta name="assert" content="This test checks that we properly compute the number of required auto repeat tracks in indefinite sized containers with minimum sizes.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/testing-utils.js"></script>
+<style>
+.grid {
+    display: inline-grid;
+    grid: 20px / 20px;
+    min-width: 20px;
+    min-height: 20px;
+    justify-content: start;
+    align-content: start;
+}
+</style>
+<div id="log"></div>
+
+<div id="autoFillColumns" class="grid"></div>
+<div id="autoFitColumns" class="grid"></div>
+
+<div id="autoFillRows" class="grid"></div>
+<div id="autoFitRows" class="grid"></div>
+
+<script>
+// Exact fit
+TestingUtils.testGridTemplateColumnsRows("autoFillColumns", "repeat(auto-fill, 10px)", "20px", ["repeat(2, 10px)", "10px 10px"], "20px");
+TestingUtils.testGridTemplateColumnsRows("autoFitColumns", "repeat(auto-fit, 10px)", "20px", ["repeat(2, 0px)", "0px 0px"], "20px");
+TestingUtils.testGridTemplateColumnsRows("autoFillRows", "20px", "repeat(auto-fill, 10px)", "20px", ["repeat(2, 10px)", "10px 10px"]);
+TestingUtils.testGridTemplateColumnsRows("autoFitRows", "20px", "repeat(auto-fit, 10px)", "20px", ["repeat(2, 0px)", "0px 0px"]);
+
+// Require an extra track
+TestingUtils.testGridTemplateColumnsRows("autoFillColumns", "repeat(auto-fill, 9px)", "20px", ["repeat(3, 9px)", "9px 9px 9px"], "20px");
+TestingUtils.testGridTemplateColumnsRows("autoFitColumns", "repeat(auto-fit, 9px)", "20px", ["repeat(2, 0px)", "0px 0px"], "20px");
+TestingUtils.testGridTemplateColumnsRows("autoFillRows", "20px", "repeat(auto-fill, 9px)", "20px", ["repeat(3, 9px)", "9px 9px 9px"]);
+TestingUtils.testGridTemplateColumnsRows("autoFitRows", "20px", "repeat(auto-fit, 9px)", "20px", ["repeat(3, 0px)", "0px 0px 0px"]);
+
+// A single repetition is enough to fill in all the available space
+TestingUtils.testGridTemplateColumnsRows("autoFillColumns", "repeat(auto-fill, 30px)", "20px", "30px", "20px");
+TestingUtils.testGridTemplateColumnsRows("autoFitColumns", "repeat(auto-fit, 30px)", "20px", "0px", "20px");
+TestingUtils.testGridTemplateColumnsRows("autoFillRows", "20px", "repeat(auto-fill, 30px)", "20px", "30px");
+TestingUtils.testGridTemplateColumnsRows("autoFitRows", "20px", "repeat(auto-fit, 30px)", "20px", "0px");
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-flexible-lengths-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-flexible-lengths-001.html
new file mode 100644
index 0000000000..3a2c942389
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-flexible-lengths-001.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support flexible lengths for 'grid-template-columns' and 'grid-template-rows' properties within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#fr-unit" title="5.1.3 Flexible Lengths: the fr unit">
+<meta name="flags" content="ahem dom">
+<meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties support flexible lengths (the 'fr' unit) within an inline grid, so you can use it to represent a fraction of the free space in the grid container.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/testing-utils.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .inline-grid {
+    display: inline-grid;
+    width: 800px;
+    height: 600px;
+    font: 10px/1 Ahem;
+    justify-content: start;
+    align-content: start;
+  }
+</style>
+<div id="log"></div>
+
+<div id="emptyGrid" class="inline-grid"></div>
+<div id="grid" class="inline-grid">
+  <div>GRID ITEM</div>
+</div>
+
+<script>
+setup({explicit_done: true});
+document.fonts.ready.then(()=> {
+  // Valid values.
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr", "1fr", "800px", "600px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "1fr", "1fr", "800px", "600px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "2fr", "2fr", "800px", "600px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "2fr", "2fr", "800px", "600px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "10fr", "10fr", "800px", "600px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "10fr", "10fr", "800px", "600px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0.5fr", "0.5fr", "400px", "300px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "0.5fr", "0.5fr", "400px", "300px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", ".5fr", ".5fr", "400px", "300px");
+  TestingUtils.testGridTemplateColumnsRows("grid", ".5fr", ".5fr", "400px", "300px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 1fr)", "minmax(100px, 1fr)", "800px", "600px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 1fr)", "minmax(100px, 1fr)", "800px", "600px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1fr)", "minmax(1fr, 1fr)", "800px", "600px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1fr)", "minmax(1fr, 1fr)", "800px", "600px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 1fr", "1fr 1fr", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "1fr 1fr", "1fr 1fr", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0.25fr 0.75fr", "0.25fr 0.75fr", "200px 600px", "150px 450px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "0.25fr 0.75fr", "0.25fr 0.75fr", "200px 600px", "150px 450px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 2fr 1fr", "1fr 2fr 1fr", "200px 400px 200px", "150px 300px 150px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "1fr 2fr 1fr", "1fr 2fr 1fr", "200px 400px 200px", "150px 300px 150px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr 4fr 3fr 2fr", "auto 1fr 4fr 3fr 2fr", "0px 80px 320px 240px 160px", "0px 60px 240px 180px 120px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr 4fr 3fr 2fr", "auto 1fr 4fr 3fr 2fr", "90px 71px 284px 213px 142px", "10px 59px 236px 177px 118px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 4fr 100px 3fr 2fr", "1fr 4fr 100px 3fr 2fr", "70px 280px 100px 210px 140px", "50px 200px 100px 150px 100px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "1fr 4fr 100px 3fr 2fr", "1fr 4fr 100px 3fr 2fr", "70px 280px 100px 210px 140px", "50px 200px 100px 150px 100px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr", "auto 1fr", "0px 800px", "0px 600px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr", "auto 1fr", "90px 710px", "10px 590px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content 1fr", "max-content 1fr", "0px 800px", "0px 600px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "max-content 1fr", "max-content 1fr", "90px 710px", "10px 590px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content 1fr", "min-content 1fr", "0px 800px", "0px 600px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "min-content 1fr", "min-content 1fr", "40px 760px", "20px 580px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr auto", "1fr auto", "800px 0px", "600px 0px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "1fr auto", "1fr auto", "800px 0px", "600px 0px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "300px 1fr", "200px 1fr", "300px 500px", "200px 400px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "300px 1fr", "200px 1fr", "300px 500px", "200px 400px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "800px 1fr", "600px 1fr", "800px 0px", "600px 0px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "800px 1fr", "600px 1fr", "800px 0px", "600px 0px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1000px 1fr", "700px 1fr", "1000px 0px", "700px 0px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "1000px 1fr", "700px 1fr", "1000px 0px", "700px 0px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(50px + 50%) 1fr", "calc(50px + 50%) 1fr", "450px 350px", "350px 250px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "calc(50px + 50%) 1fr", "calc(50px + 50%) 1fr", "450px 350px", "350px 250px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 300px) 1fr", "minmax(100px, 200px) 1fr", "300px 500px", "200px 400px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 300px) 1fr", "minmax(100px, 200px) 1fr", "300px 500px", "200px 400px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(4, 1fr)", "repeat(4, 1fr)", ["200px 200px 200px 200px", "repeat(4, 200px)"], ["150px 150px 150px 150px", "repeat(4, 150px)"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(4, 1fr)", "repeat(4, 1fr)", ["200px 200px 200px 200px", "repeat(4, 200px)"], ["150px 150px 150px 150px", "repeat(4, 150px)"]);
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(4, [b] 1fr [c]) [d]", "[z] repeat(4, [y] 1fr) [x]", ["[a b] 200px [c b] 200px [c b] 200px [c b] 200px [c d]", "[a] repeat(4, [b] 200px [c]) [d]"], ["[z y] 150px [y] 150px [y] 150px [y] 150px [x]", "[z] repeat(4, [y] 150px) [x]"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(4, [b] 1fr [c]) [d]", "[z] repeat(4, [y] 1fr) [x]", ["[a b] 200px [c b] 200px [c b] 200px [c b] 200px [c d]", "[a] repeat(4, [b] 200px [c]) [d]"], ["[z y] 150px [y] 150px [y] 150px [y] 150px [x]", "[z] repeat(4, [y] 150px) [x]"]);
+
+  // Reset values.
+  document.getElementById("emptyGrid").style.gridTemplateColumns = "";
+  document.getElementById("emptyGrid").style.gridTemplateRows = "";
+  document.getElementById("grid").style.gridTemplateColumns = "";
+  document.getElementById("grid").style.gridTemplateRows = "";
+
+  // Wrong values.
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "fr", "fr", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "fr", "fr", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1 fr", "1 fr", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "1 fr", "1 fr", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1free-space", "1free-space", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "1free-space", "1free-space", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "-2fr", "-2fr", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "-2fr", "-2fr", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0,5fr", "0,5fr", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "0,5fr", "0,5fr", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(1fr + 100px)", "calc(1fr + 100px)", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "calc(1fr + 100px)", "calc(1fr + 100px)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(1fr) auto", "(1fr) auto", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "(1fr) auto", "(1fr) auto", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "90px", "10px");
+  done();
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-grid-template-areas-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-grid-template-areas-001.html
new file mode 100644
index 0000000000..1573fa496f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-grid-template-areas-001.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for 'grid-template-ares' property within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-template-areas-property" title="5.2 Named Areas: the 'grid-template-areas' property">
+<meta name="flags" content="ahem dom">
+<meta name="assert" content="This test checks that 'grid-template-areas' is supported in an inline grid. So you can define the grid structure.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/testing-utils.js"></script>
+<style>
+  #inline-grid {
+    display: inline-grid;
+  }
+</style>
+<div id="log"></div>
+
+<div id="inline-grid"></div>
+
+<script>
+  // Single values.
+  TestingUtils.testGridTemplateAreas('inline-grid', 'none', 'none');
+  TestingUtils.testGridTemplateAreas('inline-grid', '"a"', '"a"');
+  TestingUtils.testGridTemplateAreas('inline-grid', '"."', '"."');
+  TestingUtils.testGridTemplateAreas('inline-grid', '"lower UPPER 10 -minus _low 1-st ©copy_right line¶"', '"lower UPPER 10 -minus _low 1-st ©copy_right line¶"');
+  TestingUtils.testGridTemplateAreas('inline-grid', '"a b"', '"a b"');
+  TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "c d"', '"a b" "c d"');
+  TestingUtils.testGridTemplateAreas('inline-grid', '"a   b"   "c   d"', ['"a b" "c d"', '"a   b" "c   d"']);
+  TestingUtils.testGridTemplateAreas('inline-grid', '"a b""c d"', '"a b" "c d"');
+  TestingUtils.testGridTemplateAreas('inline-grid', '"a b"\t"c d"', '"a b" "c d"');
+  TestingUtils.testGridTemplateAreas('inline-grid', '"a b"\n"c d"', '"a b" "c d"');
+  TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "a b"', '"a b" "a b"');
+  TestingUtils.testGridTemplateAreas('inline-grid', '"a a" "b b"', '"a a" "b b"');
+  TestingUtils.testGridTemplateAreas('inline-grid', '". a ." "b a c"', '". a ." "b a c"');
+  TestingUtils.testGridTemplateAreas('inline-grid', '".. a ..." "b a c"', ['". a ." "b a c"', '".. a ..." "b a c"']);
+  TestingUtils.testGridTemplateAreas('inline-grid', '".a..." "b a c"', ['". a ." "b a c"', '".a..." "b a c"']);
+  TestingUtils.testGridTemplateAreas('inline-grid', '"head head" "nav main" "foot ."', '"head head" "nav main" "foot ."');
+  TestingUtils.testGridTemplateAreas('inline-grid', '"head head" "nav main" "foot ...."', ['"head head" "nav main" "foot ."', '"head head" "nav main" "foot ...."']);
+  TestingUtils.testGridTemplateAreas('inline-grid', '"head head" "nav main" "foot."', ['"head head" "nav main" "foot ."', '"head head" "nav main" "foot."']);
+  TestingUtils.testGridTemplateAreas('inline-grid', '". header header ." "nav main main main" "nav footer footer ."', '". header header ." "nav main main main" "nav footer footer ."');
+  TestingUtils.testGridTemplateAreas('inline-grid', '"... header header ...." "nav main main main" "nav footer footer ...."', ['". header header ." "nav main main main" "nav footer footer ."', '"... header header ...." "nav main main main" "nav footer footer ...."']);
+  TestingUtils.testGridTemplateAreas('inline-grid', '"...header header...." "nav main main main" "nav footer footer...."', ['". header header ." "nav main main main" "nav footer footer ."', '"...header header...." "nav main main main" "nav footer footer...."']);
+  TestingUtils.testGridTemplateAreas('inline-grid', '"title stats" "score stats" "board board" "ctrls ctrls"', '"title stats" "score stats" "board board" "ctrls ctrls"');
+  TestingUtils.testGridTemplateAreas('inline-grid', '"title board" "stats board" "score ctrls"', '"title board" "stats board" "score ctrls"');
+  TestingUtils.testGridTemplateAreas('inline-grid', '". a" "b a" ". a"', '". a" "b a" ". a"');
+  TestingUtils.testGridTemplateAreas('inline-grid', '".. a" "b a" "... a"', ['". a" "b a" ". a"', '".. a" "b a" "... a"']);
+  TestingUtils.testGridTemplateAreas('inline-grid', '"..a" "b a" ".a"', ['". a" "b a" ". a"', '"..a" "b a" ".a"']);
+  TestingUtils.testGridTemplateAreas('inline-grid', '"a a a" "b b b"', '"a a a" "b b b"');
+  TestingUtils.testGridTemplateAreas('inline-grid', '". ." "a a"', '". ." "a a"');
+  TestingUtils.testGridTemplateAreas('inline-grid', '"... ...." "a a"', ['". ." "a a"', '"... ...." "a a"']);
+
+  // Reset values.
+  document.getElementById('inline-grid').style.gridTemplateAreas = '';
+
+  // Wrong values.
+  TestingUtils.testGridTemplateAreas('inline-grid', 'a', 'none');
+  TestingUtils.testGridTemplateAreas('inline-grid', '"a" "b c"', 'none');
+  TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "c" "d e"', 'none');
+  TestingUtils.testGridTemplateAreas('inline-grid', '"a b c" "d e"', 'none');
+  TestingUtils.testGridTemplateAreas('inline-grid', '"a b"-"c d"', 'none');
+  TestingUtils.testGridTemplateAreas('inline-grid', '"a b" - "c d"', 'none');
+  TestingUtils.testGridTemplateAreas('inline-grid', '"a b" . "c d"', 'none');
+  TestingUtils.testGridTemplateAreas('inline-grid', '"a b a"', 'none');
+  TestingUtils.testGridTemplateAreas('inline-grid', '"a" "b" "a"', 'none');
+  TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "b b"', 'none');
+  TestingUtils.testGridTemplateAreas('inline-grid', '"b a" "b b"', 'none');
+  TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "b a"', 'none');
+  TestingUtils.testGridTemplateAreas('inline-grid', '"a ." ". a"', 'none');
+  TestingUtils.testGridTemplateAreas('inline-grid', '","', 'none');
+  TestingUtils.testGridTemplateAreas('inline-grid', '"10%"', 'none');
+  TestingUtils.testGridTemplateAreas('inline-grid', '"USD$"', 'none');
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-grid-template-columns-rows-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-grid-template-columns-rows-001.html
new file mode 100644
index 0000000000..32733e238f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-grid-template-columns-rows-001.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for 'grid-template-columns' and 'grid-template-rows' properties within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#track-sizing" title="5.1 Track Sizing: the 'grid-template-rows' and 'grid-template-columns' properties">
+<meta name="flags" content="ahem dom">
+<meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties are supported in an inline grid. So you can use the different syntax options to define the trak list.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/testing-utils.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .inline-grid {
+    display: inline-grid;
+    width: 800px;
+    height: 600px;
+    font: 10px/1 Ahem;
+    justify-content: start;
+    align-content: start;
+  }
+</style>
+<div id="log"></div>
+
+<div id="emptyGrid" class="inline-grid"></div>
+<div id="grid" class="inline-grid">
+  <div id="item">GRID ITEM</div>
+</div>
+
+<script>
+setup({explicit_done: true});
+document.fonts.ready.then(()=> {
+  // Single values.
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "none", "none", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "none", "none", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto", "auto", "0px", "0px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "auto", "auto", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px", "300px", "500px", "300px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "500px", "300px", "500px", "300px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "40em", "20em", "400px", "200px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "40em", "20em", "400px", "200px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "25%", "50%", "200px", "300px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "25%", "50%", "200px", "300px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(200px + 10%)", "calc(25% + 50px)", "280px", "200px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "calc(200px + 10%)", "calc(25% + 50px)", "280px", "200px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr", "1fr", "800px", "600px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "1fr", "1fr", "800px", "600px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content", "max-content", "0px", "0px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "max-content", "max-content", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content", "min-content", "0px", "0px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "min-content", "min-content", "40px", "20px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(200px, 400px)", "minmax(50px, 100px)", "400px", "100px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "minmax(200px, 400px)", "minmax(50px, 100px)", "400px", "100px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(calc(10% + 200px), calc(800px - 20%))", "minmax(calc(20% + 50px), calc(600px - 10%))", "640px", "540px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "minmax(calc(10% + 200px), calc(800px - 20%))", "minmax(calc(20% + 50px), calc(600px - 10%))", "640px", "540px");
+
+  // Multiple values.
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px 200px 50px", "100px 300px", "500px 200px 50px", "100px 300px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "500px 200px 50px", "100px 300px", "500px 200px 50px", "100px 300px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "40em 100px 15%", "50px 20em 10%", "400px 100px 120px", "50px 200px 60px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "40em 100px 15%", "50px 20em 10%", "400px 100px 120px", "50px 200px 60px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "200px 1fr", "1fr 100px", "200px 600px", "500px 100px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "200px 1fr", "1fr 100px", "200px 600px", "500px 100px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr", "auto 1fr", "0px 800px", "0px 600px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr", "auto 1fr", "90px 710px", "10px 590px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 3fr", "2fr 1fr", "200px 600px", "400px 200px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "1fr 3fr", "2fr 1fr", "200px 600px", "400px 200px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(25px, 75px) 750px", "minmax(50px, 150px) 500px", "50px 750px", "100px 500px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "minmax(25px, 75px) 750px", "minmax(50px, 150px) 500px", "50px 750px", "100px 500px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content 1fr calc(20px + 10%) minmax(30em, 50em)", "min-content 1fr calc(10% + 40px) minmax(3em, 5em)", "0px 200px 100px 500px", "0px 450px 100px 50px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "min-content 1fr calc(20px + 10%) minmax(30em, 50em)", "min-content 1fr  calc(10% + 40px) minmax(3em, 5em)", "40px 160px 100px 500px", "20px 430px 100px 50px");
+
+  // Reset values.
+  document.getElementById("emptyGrid").style.gridTemplateColumns = "";
+  document.getElementById("emptyGrid").style.gridTemplateRows = "";
+  document.getElementById("grid").style.gridTemplateColumns = "";
+  document.getElementById("grid").style.gridTemplateRows = "";
+
+  // Wrong values.
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "foo", "bar", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "foo", "bar", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto none", "none auto", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "auto none", "none auto", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px, 200px", "300px, 400px", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "100px, 200px", "300px, 400px", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "90px", "10px");
+  done();
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-named-grid-lines-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-named-grid-lines-001.html
new file mode 100644
index 0000000000..fc4caf2823
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-named-grid-lines-001.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for named grid lines in 'grid-template-columns' and 'grid-template-rows' properties within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#named-lines" title="5.1.1. Named Grid Lines: the '(&lt;custom-ident\&gt;*)' syntax">
+<meta name="flags" content="ahem dom">
+<meta name="assert" content="This test checks that grid lines can be explicitly named in 'grid-template-columns' and 'grid-template-rows' properties within an inline grid.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/testing-utils.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .inline-grid {
+    display: inline-grid;
+    width: 800px;
+    height: 600px;
+    font: 10px/1 Ahem;
+    justify-content: start;
+    align-content: start;
+  }
+</style>
+<div id="log"></div>
+
+<div id="emptyGrid" class="inline-grid"></div>
+<div id="grid" class="inline-grid">
+  <div id="item">GRID ITEM</div>
+</div>
+
+<script>
+setup({explicit_done: true});
+document.fonts.ready.then(()=> {
+  // Valid values.
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first] auto [last]", "[first] auto [last]", "[first] 0px [last]", "[first] 0px [last]");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[first] auto [last]", "[first] auto [last]", "[first] 90px [last]", "[first] 10px [last]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] 0px [L4st-L1_n3]", "[F1rst-L1_n3] 0px [L4st-L1_n3]");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] 90px [L4st-L1_n3]", "[F1rst-L1_n3] 10px [L4st-L1_n3]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[] auto [ ]", "[ ] auto []", "0px", "0px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[] auto [ ]", "[ ] auto []", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first] auto", "[first] auto", "[first] 0px", "[first] 0px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[first] auto", "[first] auto", "[first] 90px", "[first] 10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [last]", "auto [last]", "0px [last]", "0px [last]");
+  TestingUtils.testGridTemplateColumnsRows("grid", "auto [last]", "auto [last]", "90px [last]", "10px [last]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[line] auto [line]", "[line] auto [line]", "[line] 0px [line]", "[line] 0px [line]");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[line] auto [line]", "[line] auto [line]", "[line] 90px [line]", "[line] 10px [line]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first line] auto [last line]", "[first line] auto [last line]", "[first line] 0px [last line]", "[first line] 0px [last line]");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[first line] auto [last line]", "[first line] auto [last line]", "[first line] 90px [last line]", "[first line] 10px [last line]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [b] auto [c]", "[a] auto [b] auto [c]", "[a] 0px [b] 0px [c]", "[a] 0px [b] 0px [c]");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [b] auto [c]", "[a] auto [b] auto [c]", "[a] 90px [b] 0px [c]", "[a] 10px [b] 0px [c]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [b] auto [c]", "auto [b] auto [c]", "0px [b] 0px [c]", "0px [b] 0px [c]");
+  TestingUtils.testGridTemplateColumnsRows("grid", "auto [b] auto [c]", "auto [b] auto [c]", "90px [b] 0px [c]", "10px [b] 0px [c]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto auto [c]", "[a] auto auto [c]", ["[a] 0px 0px [c]", "[a] repeat(2, 0px) [c]"], ["[a] 0px 0px [c]", "[a] repeat(2, 0px) [c]"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto auto [c]", "[a] auto auto [c]", "[a] 90px 0px [c]", "[a] 10px 0px [c]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [b] auto", "[a] auto [b] auto", "[a] 0px [b] 0px", "[a] 0px [b] 0px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [b] auto", "[a] auto [b] auto", "[a] 90px [b] 0px", "[a] 10px [b] 0px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto auto", "[a] auto auto", ["[a] 0px 0px", "[a] repeat(2, 0px)"], ["[a] 0px 0px", "[a] repeat(2, 0px)"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto auto", "[a] auto auto", "[a] 90px 0px", "[a] 10px 0px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [b] auto", "auto [b] auto", "0px [b] 0px", "0px [b] 0px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "auto [b] auto", "auto [b] auto", "90px [b] 0px", "10px [b] 0px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto auto [c]", "auto auto [c]", ["0px 0px [c]", "repeat(2, 0px) [c]"], ["0px 0px [c]", "repeat(2, 0px) [c]"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "auto auto [c]", "auto auto [c]", "90px 0px [c]", "10px 0px [c]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [a] auto [a]", "[a] auto [a] auto [a]", ["[a] 0px [a] 0px [a]", "repeat(2, [a] 0px) [a]"], ["[a] 0px [a] 0px [a]", "repeat(2, [a] 0px) [a]"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [a] auto [a]", "[a] auto [a] auto [a]", "[a] 90px [a] 0px [a]", "[a] 10px [a] 0px [a]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b c] auto [a b c] auto [a b c]", "[a b c] auto [a b c] auto [a b c]", ["[a b c] 0px [a b c] 0px [a b c]", "repeat(2, [a b c] 0px) [a b c]"], "[a b c] 0px [a b c] 0px [a b c]");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a b c] auto [a b c] auto [a b c]", "[a b c] auto [a b c] auto [a b c]", "[a b c] 90px [a b c] 0px [a b c]", "[a b c] 10px [a b c] 0px [a b c]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] 40em [b] 100px [c] 15% [d]", "[z] 50px [y] 20em [x] 10% [w]", "[a] 400px [b] 100px [c] 120px [d]", "[z] 50px [y] 200px [x] 60px [w]");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] 40em [b] 100px [c] 15% [d]", "[z] 50px [y] 20em [x] 10% [w]", "[a] 400px [b] 100px [c] 120px [d]", "[z] 50px [y] 200px [x] 60px [w]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] 200px [b] 1fr [c]", "[z] 1fr [y] 100px [x]", "[a] 200px [b] 600px [c]", "[z] 500px [y] 100px [x]");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] 200px [b] 1fr [c]", "[z] 1fr [y] 100px [x]", "[a] 200px [b] 600px [c]", "[z] 500px [y] 100px [x]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] min-content [b] 1fr [c] calc(20px + 10%) [d] minmax(30em, 50em) [e]", "[z] min-content [y] 1fr [x] calc(10% + 40px) [w] minmax(3em, 5em) [v]", "[a] 0px [b] 200px [c] 100px [d] 500px [e]", "[z] 0px [y] 450px [x] 100px [w] 50px [v]");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] min-content [b] 1fr [c] calc(20px + 10%) [d] minmax(30em, 50em) [e]", "[z] min-content [y] 1fr [x] calc(10% + 40px) [w] minmax(3em, 5em) [v]", "[a] 40px [b] 160px [c] 100px [d] 500px [e]", "[z] 20px [y] 430px [x] 100px [w] 50px [v]");
+
+  // Reset values.
+  document.getElementById("emptyGrid").style.gridTemplateColumns = "";
+  document.getElementById("emptyGrid").style.gridTemplateRows = "";
+  document.getElementById("grid").style.gridTemplateColumns = "";
+  document.getElementById("grid").style.gridTemplateRows = "";
+
+  // Wrong values.
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a]", "[a]", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a]", "[a]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b]", "[a b]", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a b]", "[a b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] none [b]", "[a] none [b]", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] none [b]", "[a] none [b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b]", "[a] [b]", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b]", "[a] [b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "a auto b", "a auto b", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "a auto b", "a auto b", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(a) auto (b)", "(a) auto (b)", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "(a) auto (b)", "(a) auto (b)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "'a' auto 'b'", "'a' auto 'b'", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "'a' auto 'b'", "'a' auto 'b'", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a [b]] auto [c]", "[a [b]] auto [c]", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a [b]] auto [c]", "[a [b]] auto [c]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [[b]]", "[a] auto [[b]]", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [[b]]", "[a] auto [[b]]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a auto [b]", "[a auto [b]", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a auto [b]", "[a auto [b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 100px] auto [b]", "[a 100px] auto [b]", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a 100px] auto [b]", "[a 100px] auto [b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 50%] auto [b]", "[a 50%] auto [b]", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a 50%] auto [b]", "[a 50%] auto [b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[5] auto [10]", "[5] auto [10]", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[5] auto [10]", "[5] auto [10]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a.] auto [b*]", "[a.] auto [b*]", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a.] auto [b*]", "[a.] auto [b*]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[#a] auto [$b]", "[#a] auto [$b]", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[#a] auto [$b]", "[#a] auto [$b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[initial] auto", "[initial] auto", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[initial] auto", "[initial] auto", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[inherit] auto", "[inherit] auto", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[inherit] auto", "[inherit] auto", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[default] auto", "[default] auto", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[default] auto", "[default] auto", "90px", "10px");
+  done();
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-repeat-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-repeat-001.html
new file mode 100644
index 0000000000..465e5e8cd8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-repeat-001.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support 'repeat()' notation for 'grid-template-columns' and 'grid-template-rows' properties within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#repeat-notation" title="5.1.2 Repeating Rows and Columns: the 'repeat()' notation">
+<meta name="flags" content="ahem dom">
+<meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties support 'repeat()' notation within an inline grid, so you can use it to represents a repeated fragment of the track list.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/testing-utils.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .inline-grid {
+    display: inline-grid;
+    width: 800px;
+    height: 600px;
+    font: 10px/1 Ahem;
+    justify-content: start;
+    align-content: start;
+  }
+</style>
+<div id="log"></div>
+
+<div id="emptyGrid" class="inline-grid"></div>
+<div id="grid" class="inline-grid">
+  <div id="item">GRID ITEM</div>
+</div>
+
+<script>
+setup({explicit_done: true});
+document.fonts.ready.then(()=> {
+  // Valid values.
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(1, auto)", "repeat(1, auto)", "0px", "0px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(1, auto)", "repeat(1, auto)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, auto)", "repeat(2, auto)", ["0px 0px", "repeat(2, 0px)"], ["0px 0px", "repeat(2, 0px)"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, auto)", "repeat(2, auto)", "90px 0px", "10px 0px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, minmax(50px, calc(50px + 50%)))", "repeat(2, minmax(50px, calc(50px + 50%)))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, minmax(50px, calc(50px + 50%)))", "repeat(2, minmax(50px, calc(50px + 50%)))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]);
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content repeat(2, 25%) 1fr", "100px repeat(2, 25%) 1fr", ["0px 200px 200px 400px", "0px repeat(2, 200px) 400px"], ["100px 150px 150px 200px", "100px repeat(2, 150px) 200px"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "max-content repeat(2, 25%) 1fr", "max-content repeat(2, 25%) 1fr", ["90px 200px 200px 310px", "90px repeat(2, 200px) 310px"], ["10px 150px 150px 290px", "10px repeat(2, 150px) 290px"]);
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, min-content 50px)", "repeat(2, min-content 50px)", ["0px 50px 0px 50px", "repeat(2, 0px 50px)"], ["0px 50px 0px 50px", "repeat(2, 0px 50px)"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, min-content 50px)", "repeat(2, min-content 50px)", "40px 50px 0px 50px", "20px 50px 0px 50px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "[a] 100px [b] 250px [c a] 100px [b] 250px [c]", "[a] 50px [b] 250px [c a] 50px [b] 250px [c]");
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "[a] 100px [b] 250px [c a] 100px [b] 250px [c]", "[a] 50px [b] 250px [c a] 50px [b] 250px [c]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, auto [b] 100px) [c]", "[a] repeat(2, auto [b] 100px) [c]", ["[a] 0px [b] 100px 0px [b] 100px [c]", "[a] repeat(2, 0px [b] 100px) [c]"], ["[a] 0px [b] 100px 0px [b] 100px [c]", "[a] repeat(2, 0px [b] 100px) [c]"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, auto [b] 100px) [c]", "[a] repeat(2, auto [b] 100px) [c]", "[a] 90px [b] 100px 0px [b] 100px [c]", "[a] 10px [b] 100px 0px [b] 100px [c]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto repeat(2, [b] 100px) [c]", "[a] auto repeat(2, [b] 100px) [c]", ["[a] 0px [b] 100px [b] 100px [c]", "[a] 0px repeat(2, [b] 100px) [c]"], ["[a] 0px [b] 100px [b] 100px [c]", "[a] 0px repeat(2, [b] 100px) [c]"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto repeat(2, [b] 100px) [c]", "[a] auto repeat(2, [b] 100px) [c]", ["[a] 90px [b] 100px [b] 100px [c]", "[a] 90px repeat(2, [b] 100px) [c]"], ["[a] 10px [b] 100px [b] 100px [c]", "[a] 10px repeat(2, [b] 100px) [c]"]);
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, auto [b]) 100px [c]", "[a] repeat(2, auto [b]) 100px [c]", "[a] 0px [b] 0px [b] 100px [c]", "[a] 0px [b] 0px [b] 100px [c]");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, auto [b]) 100px [c]", "[a] repeat(2, auto [b]) 100px [c]", "[a] 90px [b] 0px [b] 100px [c]", "[a] 10px [b] 0px [b] 100px [c]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, [b] 100px)", "[a] repeat(2, [b] 100px)", ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"], ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, [b] 100px)", "[a] repeat(2, [b] 100px)", ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"], ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"]);
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, [b] auto [c]) [d]", "[a] repeat(2, [b] auto [c]) [d]", ["[a b] 0px [c b] 0px [c d]", "[a] repeat(2, [b] 0px [c]) [d]"], ["[a b] 0px [c b] 0px [c d]", "[a] repeat(2, [b] 0px [c]) [d]"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, [b] auto [c]) [d]", "[a] repeat(2, [b] auto [c]) [d]", "[a b] 90px [c b] 0px [c d]", "[a b] 10px [c b] 0px [c d]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] min-content repeat(2, [b] 1fr [c] calc(20px + 10%)) [d] minmax(30em, 50em) [e]", "[z] min-content repeat(2, [y] 1fr [x] calc(10% + 40px)) [w] minmax(3em, 5em) [v]", ["[a] 0px [b] 50px [c] 100px [b] 50px [c] 100px [d] 500px [e]", "[a] 0px repeat(2, [b] 50px [c] 100px) [d] 500px [e]"], ["[z] 0px [y] 175px [x] 100px [y] 175px [x] 100px [w] 50px [v]", "[z] 0px repeat(2, [y] 175px [x] 100px) [w] 50px [v]"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] min-content repeat(2, [b] 1fr [c] calc(20px + 10%)) [d] minmax(30em, 50em) [e]", "[z] min-content repeat(2, [y] 1fr [x] calc(10% + 40px)) [w] minmax(3em, 5em) [v]", ["[a] 40px [b] 30px [c] 100px [b] 30px [c] 100px [d] 500px [e]", "[a] 40px repeat(2, [b] 30px [c] 100px) [d] 500px [e]"], ["[z] 20px [y] 165px [x] 100px [y] 165px [x] 100px [w] 50px [v]", "[z] 20px repeat(2, [y] 165px [x] 100px) [w] 50px [v]"]);
+
+  // Reset values.
+  document.getElementById("emptyGrid").style.gridTemplateColumns = "";
+  document.getElementById("emptyGrid").style.gridTemplateRows = "";
+  document.getElementById("grid").style.gridTemplateColumns = "";
+  document.getElementById("grid").style.gridTemplateRows = "";
+
+  // Wrong values.
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(-1, auto)", "repeat(-1, auto)", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(-1, auto)", "repeat(-1, auto)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(auto, 2)", "repeat(auto, 2)", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(auto, 2)", "repeat(auto, 2)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat 2, auto", "repeat 2, auto", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat 2, auto", "repeat 2, auto", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2 auto)", "repeat(2 auto)", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2 auto)", "repeat(2 auto)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px (repeat 2, auto)", "(repeat 2, auto)", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "100px (repeat 2, auto)", "(repeat 2, auto)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px repeat(2, [a])", "100px repeat(2, [a])", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "100px repeat(2, [a])", "100px repeat(2, [a])", "90px", "10px");
+  done();
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-template-columns-rows-resolved-values-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-template-columns-rows-resolved-values-001.html
new file mode 100644
index 0000000000..ff1f814309
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-template-columns-rows-resolved-values-001.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'grid-template-columns' and 'grid-template-rows' properties resolved values for implicit tracks in an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#resolved-track-list" title="5.1.5. Resolved Values">
+<meta name="flags" content="ahem dom">
+<meta name="assert" content="This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' list tracks implicitly created in an inline grid.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/testing-utils.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .inline-grid {
+    display: inline-grid;
+    width: 800px;
+    height: 600px;
+    font: 10px/1 Ahem;
+    justify-content: start;
+    align-content: start;
+  }
+
+  .fifthColumn {
+    grid-column: 5;
+  }
+
+  .fourthRow {
+    grid-row: 4;
+  }
+
+  .gridAutoFlowColumn {
+    grid-auto-flow: column;
+  }
+</style>
+<div id="log"></div>
+
+<div id="grid" class="inline-grid">
+  <div>FIRST ITEM</div>
+  <div>SECOND ITEM</div>
+  <div>THIRD<br />ITEM</div>
+</div>
+
+<div id="gridItemsPositions" class="inline-grid">
+  <div class="fifthColumn">FIRST ITEM</div>
+  <div class="fourthRow">SECOND ITEM</div>
+  <div>THIRD<br />ITEM</div>
+</div>
+
+<div id="gridAutoFlowColumn" class="inline-grid gridAutoFlowColumn">
+  <div>FIRST ITEM</div>
+  <div>SECOND ITEM</div>
+  <div>THIRD<br />ITEM</div>
+</div>
+
+<div id="gridAutoFlowColumnItemsPositions" class="inline-grid gridAutoFlowColumn">
+  <div class="fifthColumn">FIRST ITEM</div>
+  <div class="fourthRow">SECOND ITEM</div>
+  <div>THIRD<br />ITEM</div>
+</div>
+
+<script>
+setup({explicit_done: true});
+document.fonts.ready.then(()=> {
+  // Valid values.
+  TestingUtils.testGridTemplateColumnsRows("grid", "", "", "110px", ["10px 10px 20px", "repeat(2, 10px) 20px"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "auto auto", "", "100px 110px", "10px 20px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "60px", "", "60px", ["20px 20px 20px", "repeat(3, 20px)"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "", "100px 60px", ["20px 20px", "repeat(2, 20px)"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "", "50px", "110px", "50px 10px 20px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "", "50px 30px", "110px", "50px 30px 20px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px", "60px", ["50px 20px 20px", "50px repeat(2, 20px)"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px 30px", "60px", "50px 30px 20px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px", "100px 60px", "50px 20px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px 30px", "100px 60px", "50px 30px");
+
+  TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "10px 20px 0px 10px");
+  TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "10px 20px 0px 20px");
+  TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "10px 20px 0px 20px");
+  TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 20px 0px 10px");
+  TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px 50px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 50px 0px 10px");
+  TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 20px 0px 20px");
+  TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px 50px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 50px 0px 20px");
+  TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 20px 0px 20px");
+  TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px 50px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 50px 0px 20px");
+
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "", "100px 110px 50px", "20px");
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "auto auto", "110px 50px", "20px 10px");
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "", "60px 110px 50px", "20px");
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "", "100px 60px 50px", "20px");
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px", "100px 110px 50px", "50px");
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px 30px", "110px 50px", "50px 30px");
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px", "60px 110px 50px", "50px");
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px 30px", "60px 50px", "50px 30px");
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px", "100px 60px 50px", "50px");
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px 30px", "100px 60px", "50px 30px");
+
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 10px", "20px repeat(2, 0px) 10px"]);
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]);
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]);
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 10px", "60px repeat(2, 0px) 10px"]);
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px 70px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], "60px 70px 0px 10px");
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]);
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px 70px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 70px 0px 20px");
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]);
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px 70px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], "60px 70px 0px 20px");
+  done();
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-template-columns-rows-resolved-values-001.tentative.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-template-columns-rows-resolved-values-001.tentative.html
new file mode 100644
index 0000000000..44abd5ee8a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-template-columns-rows-resolved-values-001.tentative.html
@@ -0,0 +1,277 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'grid-template-columns' and 'grid-template-rows' properties resolved values for implicit tracks in an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#resolved-track-list" title="5.1.5. Resolved Values">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4475">
+<meta name="flags" content="ahem dom">
+<meta name="assert" content="This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' don't include implicitly created tracks in an inline grid.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/testing-utils.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .inline-grid {
+    display: inline-grid;
+    width: 800px;
+    height: 600px;
+    font: 10px/1 Ahem;
+    justify-content: start;
+    align-content: start;
+    position: relative;
+  }
+
+  .fifthColumn {
+    grid-column: 5;
+  }
+
+  .fourthRow {
+    grid-row: 4;
+  }
+
+  .gridAutoFlowColumn {
+    grid-auto-flow: column;
+  }
+</style>
+<div id="log"></div>
+
+<div id="grid" class="inline-grid">
+  <div>FIRST ITEM</div>
+  <div>SECOND ITEM</div>
+  <div>THIRD<br />ITEM</div>
+</div>
+
+<div id="gridItemsPositions" class="inline-grid">
+  <div class="fifthColumn">FIRST ITEM</div>
+  <div class="fourthRow">SECOND ITEM</div>
+  <div>THIRD<br />ITEM</div>
+</div>
+
+<div id="gridAutoFlowColumn" class="inline-grid gridAutoFlowColumn">
+  <div>FIRST ITEM</div>
+  <div>SECOND ITEM</div>
+  <div>THIRD<br />ITEM</div>
+</div>
+
+<div id="gridAutoFlowColumnItemsPositions" class="inline-grid gridAutoFlowColumn">
+  <div class="fifthColumn">FIRST ITEM</div>
+  <div class="fourthRow">SECOND ITEM</div>
+  <div>THIRD<br />ITEM</div>
+</div>
+
+<script>
+function testSizeAndPositionOfItems(gridId, expectedItemData) {
+  let grid = document.getElementById(gridId);
+  assert_equals(grid.childElementCount, expectedItemData.length, "childElementCount");
+  let props = ["offsetWidth", "offsetTop", "offsetHeight"];
+  for (let i = 0; i < expectedItemData.length; ++i)
+    for (let prop of props)
+      assert_equals(grid.children[i][prop], expectedItemData[i][prop], "children[" + i + "]." + prop);
+}
+
+function testGrid(gridId, columnsStyle, rowsStyle, columnsComputedValue, rowsComputedValue, expectedItemData) {
+  TestingUtils.testGridTemplateColumnsRows(gridId, columnsStyle, rowsStyle, columnsComputedValue, rowsComputedValue);
+  test(function() {
+    testSizeAndPositionOfItems(gridId, expectedItemData);
+  }, "Children of '" + gridId + "' with: grid-template-columns: " + columnsStyle  + "; and grid-template-rows: " + rowsStyle + ";");
+}
+
+setup({explicit_done: true});
+document.fonts.ready.then(()=> {
+  // Valid values.
+  testGrid("grid", "", "", "none", "none", [
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 10},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 10, offsetHeight: 10},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 20, offsetHeight: 20},
+  ]);
+  testGrid("grid", "auto auto", "", "100px 110px", "none", [
+    {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 10},
+    {offsetLeft: 100, offsetWidth: 110, offsetTop: 0, offsetHeight: 10},
+    {offsetLeft: 0, offsetWidth: 100, offsetTop: 10, offsetHeight: 20},
+  ]);
+  testGrid("grid", "60px", "", "60px", "none", [
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 20},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 20, offsetHeight: 20},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 40, offsetHeight: 20},
+  ]);
+  testGrid("grid", "100px 60px", "", "100px 60px", "none", [
+    {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
+    {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 20},
+    {offsetLeft: 0, offsetWidth: 100, offsetTop: 20, offsetHeight: 20},
+  ]);
+  testGrid("grid", "", "50px", "none", "50px", [
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 50, offsetHeight: 10},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 20},
+  ]);
+  testGrid("grid", "", "50px 30px", "none", "50px 30px", [
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 50, offsetHeight: 30},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 80, offsetHeight: 20},
+  ]);
+  testGrid("grid", "60px", "50px", "60px", "50px", [
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 50, offsetHeight: 20},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 70, offsetHeight: 20},
+  ]);
+  testGrid("grid", "60px", "50px 30px", "60px", "50px 30px", [
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 50, offsetHeight: 30},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 80, offsetHeight: 20},
+  ]);
+  testGrid("grid", "100px 60px", "50px", "100px 60px", "50px", [
+    {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 0, offsetWidth: 100, offsetTop: 50, offsetHeight: 20},
+  ]);
+  testGrid("grid", "100px 60px", "50px 30px", "100px 60px", "50px 30px", [
+    {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 0, offsetWidth: 100, offsetTop: 50, offsetHeight: 30},
+  ]);
+
+  testGrid("gridItemsPositions", "", "", "none", "none", [
+    {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 10},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 30, offsetHeight: 10},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 10, offsetHeight: 20},
+  ]);
+  testGrid("gridItemsPositions", "60px", "", "60px", "none", [
+    {offsetLeft: 60, offsetWidth: 100, offsetTop: 0, offsetHeight: 10},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 30, offsetHeight: 20},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 10, offsetHeight: 20},
+  ]);
+  testGrid("gridItemsPositions", "60px 50px", "", "60px 50px", "none", [
+    {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 10},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 30, offsetHeight: 20},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 10, offsetHeight: 20},
+  ]);
+  testGrid("gridItemsPositions", "", "60px", "none", "60px", [
+    {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 80, offsetHeight: 10},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 20},
+  ]);
+  testGrid("gridItemsPositions", "", "60px 50px", "none", "60px 50px", [
+    {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 110, offsetHeight: 10},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 50},
+  ]);
+  testGrid("gridItemsPositions", "60px", "60px", "60px", "60px", [
+    {offsetLeft: 60, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 80, offsetHeight: 20},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20},
+  ]);
+  testGrid("gridItemsPositions", "60px", "60px 50px", "60px", "60px 50px", [
+    {offsetLeft: 60, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 110, offsetHeight: 20},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 50},
+  ]);
+  testGrid("gridItemsPositions", "60px 50px", "60px", "60px 50px", "60px", [
+    {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 80, offsetHeight: 20},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20},
+  ]);
+  testGrid("gridItemsPositions", "60px 50px", "60px 50px", "60px 50px", "60px 50px", [
+    {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 110, offsetHeight: 20},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 50},
+  ]);
+
+  testGrid("gridAutoFlowColumn", "", "", "none", "none", [
+    {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
+    {offsetLeft: 100, offsetWidth: 110, offsetTop: 0, offsetHeight: 20},
+    {offsetLeft: 210, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
+  ]);
+  testGrid("gridAutoFlowColumn", "", "auto auto", "none", "20px 10px", [
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 20},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 20, offsetHeight: 10},
+    {offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
+  ]);
+  testGrid("gridAutoFlowColumn", "60px", "", "60px", "none", [
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 20},
+    {offsetLeft: 60, offsetWidth: 110, offsetTop: 0, offsetHeight: 20},
+    {offsetLeft: 170, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
+  ]);
+  testGrid("gridAutoFlowColumn", "100px 60px", "", "100px 60px", "none", [
+    {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
+    {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 20},
+    {offsetLeft: 160, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
+  ]);
+  testGrid("gridAutoFlowColumn", "", "50px", "none", "50px", [
+    {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 100, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 210, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
+  ]);
+  testGrid("gridAutoFlowColumn", "", "50px 30px", "none", "50px 30px", [
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 50, offsetHeight: 30},
+    {offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
+  ]);
+  testGrid("gridAutoFlowColumn", "60px", "50px", "60px", "50px", [
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 60, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 170, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
+  ]);
+  testGrid("gridAutoFlowColumn", "60px", "50px 30px", "60px", "50px 30px", [
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 50, offsetHeight: 30},
+    {offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
+  ]);
+  testGrid("gridAutoFlowColumn", "100px 60px", "50px", "100px 60px", "50px", [
+    {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 160, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
+  ]);
+  testGrid("gridAutoFlowColumn", "100px 60px", "50px 30px", "100px 60px", "50px 30px", [
+    {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 0, offsetWidth: 100, offsetTop: 50, offsetHeight: 30},
+    {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
+  ]);
+
+  testGrid("gridAutoFlowColumnItemsPositions", "", "", "none", "none", [
+    {offsetLeft: 160, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 20, offsetHeight: 10},
+    {offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
+  ]);
+  testGrid("gridAutoFlowColumnItemsPositions", "60px", "", "60px", "none", [
+    {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 20, offsetHeight: 20},
+    {offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
+  ]);
+  testGrid("gridAutoFlowColumnItemsPositions", "60px 70px", "", "60px 70px", "none", [
+    {offsetLeft: 130, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 20, offsetHeight: 20},
+    {offsetLeft: 60, offsetWidth: 70, offsetTop: 0, offsetHeight: 20},
+  ]);
+  testGrid("gridAutoFlowColumnItemsPositions", "", "60px", "none", "60px", [
+    {offsetLeft: 160, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 10},
+    {offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 60},
+  ]);
+  testGrid("gridAutoFlowColumnItemsPositions", "", "60px 70px", "none", "60px 70px", [
+    {offsetLeft: 160, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 130, offsetHeight: 10},
+    {offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 60},
+  ]);
+  testGrid("gridAutoFlowColumnItemsPositions", "60px", "60px", "60px", "60px", [
+    {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20},
+    {offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 60},
+  ]);
+  testGrid("gridAutoFlowColumnItemsPositions", "60px", "60px 70px", "60px", "60px 70px", [
+    {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 130, offsetHeight: 20},
+    {offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 60},
+  ]);
+  testGrid("gridAutoFlowColumnItemsPositions", "60px 70px", "60px", "60px 70px", "60px", [
+    {offsetLeft: 130, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20},
+    {offsetLeft: 60, offsetWidth: 70, offsetTop: 0, offsetHeight: 60},
+  ]);
+  testGrid("gridAutoFlowColumnItemsPositions", "60px 70px", "60px 70px", "60px 70px", "60px 70px", [
+    {offsetLeft: 130, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 130, offsetHeight: 20},
+    {offsetLeft: 60, offsetWidth: 70, offsetTop: 0, offsetHeight: 60},
+  ]);
+  done();
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-layout-auto-tracks.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-layout-auto-tracks.html
new file mode 100644
index 0000000000..2cc3614d9e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-layout-auto-tracks.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Grid Layout Test: auto tracks</title>
+    <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+    <link rel="help" href="http://www.w3.org/TR/css-grid-1/#track-sizing">
+    <link rel="match" href="../reference/grid-layout-auto-tracks-ref.html">
+    <meta name="assert" content="the layout should behave the same as reference.">
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+      #caseTitle {
+        margin: 10px;
+        height: 40px;
+      }
+      #grid {
+        height: auto;
+        width: 100px;
+        background: #eee;
+        display: grid;
+        grid-template-columns: 100px;
+        grid-template-rows: auto;
+      }
+      .a {
+        background: blue;
+        grid-column: 1;
+        grid-row: 1;
+      }
+      .b {
+        background: yellow;
+        grid-column: 2;
+        grid-row: 1;
+      }
+      .c {
+        background: pink;
+        grid-column: 1;
+        grid-row: 2;
+      }
+    </style>
+  </head>
+  <body>
+    <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+    <div id="grid">
+      <div class="a">&nbsp;</div>
+      <div class="b"><div style="width:50px">&nbsp;</div></div>
+      <div class="c">&nbsp;</div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-layout-basic.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-layout-basic.html
new file mode 100644
index 0000000000..578f70173b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-layout-basic.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Grid Layout Test: basic</title>
+    <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+    <link rel="help" href="http://www.w3.org/TR/css-grid-1/#track-sizing">
+    <link rel="match" href="../reference/grid-layout-basic-ref.html">
+    <meta name="assert" content="the layout should behave the same as reference.">
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+      #caseTitle {
+        margin: 10px;
+        height: 40px;
+      }
+      #grid {
+        width: 150px;
+        background: #eee;
+        display: grid;
+        grid-template-columns: 100px 50px;
+      }
+      .a {
+        background: blue;
+        grid-column: 1;
+        grid-row: 1;
+      }
+      .b {
+        background: yellow;
+        grid-column: 2;
+        grid-row: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+    <div id="grid">
+      <div class="a">&nbsp;</div>
+      <div class="b">&nbsp;</div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-layout-repeat-notation.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-layout-repeat-notation.html
new file mode 100644
index 0000000000..ac0273f83a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-layout-repeat-notation.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Grid Layout Test: repeat notation</title>
+    <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+    <link rel="help" href="http://www.w3.org/TR/css-grid-1/#repeat-notation">
+    <link rel="match" href="../reference/grid-layout-repeat-notation-ref.html">
+    <meta name="assert" content="the subgrid layout should behave the same as reference.">
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+      #caseTitle {
+        margin: 10px;
+        height: 40px;
+      }
+      #grid {
+        width: 450px;
+        background: #eee;
+        display: grid;
+        grid-template-columns: repeat(4, 100px) 50px;
+      }
+      .a {
+        background: blue;
+        grid-column: 1;
+      }
+      .b {
+        background: yellow;
+        grid-column: 2;
+      }
+      .c {
+        background: orange;
+        grid-column: 3;
+      }
+      .d {
+        background: cyan;
+        grid-column: 4;
+      }
+      .e {
+        background: pink;
+        grid-column: 5;
+      }
+    </style>
+  </head>
+  <body>
+    <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+    <div id="grid">
+      <div class="a">&nbsp;</div>
+      <div class="b">&nbsp;</div>
+      <div class="c">&nbsp;</div>
+      <div class="d">&nbsp;</div>
+      <div class="e">&nbsp;</div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-limits-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-limits-001.html
new file mode 100644
index 0000000000..fe0d01492b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-limits-001.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid/#overlarge-grids">
+<link rel="author" title="Tab Atkins-Bittner" href="https://xanthir.com/contact">
+<link rel="author" title="Elika J Etemad" href="http://inkedblade.net/contact">
+<meta name="flags" content="should">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../support/computed-testcommon.js"></script>
+<div id=target>
+    <div id=child1></div>
+    <div id=child2></div>
+</div>
+<style>
+    #target {
+        display: grid;
+        position: absolute;
+    }
+</style>
+<script>
+const target = document.querySelector("#target");
+const child1 = document.querySelector("#child1");
+const child2 = document.querySelector("#child2");
+
+test(()=>{
+    target.style.gridTemplateRows = "repeat(9999, 1px)";
+    target.style.gridTemplateColumns = "repeat(9999, 1px)";
+
+    const height = getComputedStyle(target).height;
+    const width = getComputedStyle(target).width;
+
+    assert_equals(height, "9999px", "repeat(9999, 1px) should make grid height 9999px");
+    assert_equals(width, "9999px", "repeat(9999, 1px) should make grid width 9999px");
+
+    target.removeAttribute('style');
+}, "repeat(9999) should be supported in both axises");
+
+test(()=>{
+    // Start from no explicit grid, so only implicit tracks happen
+    target.style.gridAutoRows = "1px";
+    target.style.gridAutoColumns = "1px";
+
+    child1.style.gridRowEnd = "10000";
+    child1.style.gridColumnEnd = "10000";
+
+    child2.style.gridRowStart = "-10000";
+    child2.style.gridColumnStart = "-10000";
+
+    const height = getComputedStyle(target).height;
+    const width = getComputedStyle(target).width;
+
+    assert_equals(height, "19998px", "Positioning children at lines -10k and 10k should generate 19998 implicit 1px tracks.");
+    assert_equals(width, "19998px", "Positioning children at lines -10k and 10k should generate 19998 implicit 1px tracks.");
+
+    target.removeAttribute('style');
+    child1.removeAttribute('style');
+    child2.removeAttribute('style');
+}, "Implicit grid should support lines [-10k, 10k].");
+</script>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-minimum-contribution-with-percentages.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-minimum-contribution-with-percentages.html
new file mode 100644
index 0000000000..146956c295
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-minimum-contribution-with-percentages.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: minimum contribution with percentages</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-grid/#minimum-contribution">
+<meta name="assert" content="Checks that the minimum contribution is the minimum size when the preferred size is 'auto' or contains a percentage.">
+<style>
+#grid {
+  display: grid;
+  height: 50px;
+  width: 50px;
+  grid: auto / auto;
+}
+#item {
+  background: cyan;
+}
+#content {
+  height: 100px;
+  width: 100px;
+}
+.min {
+  min-height: calc(100% + 50px);
+  min-width: calc(100% + 50px);
+}
+.max {
+  max-height: calc(100% - 50px);
+  max-width: calc(100% - 50px);
+}
+.size {
+  height: calc(100% + 10px);
+  width: calc(100% + 10px);
+}
+</style>
+<div id="log"></div>
+<div id="grid">
+  <div id="item">
+    <div id="content"></div>
+  </div>
+</div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+"use strict";
+const cs = getComputedStyle(document.getElementById("grid"));
+const item = document.getElementById("item");
+function check(name, size) {
+  item.className = name;
+  test(function() {
+    assert_equals(cs.gridTemplateColumns, size + "px", "grid-template-columns");
+  }, name + " - columns");
+  test(function() {
+    assert_equals(cs.gridTemplateRows, size + "px", "grid-template-rows");
+  }, name + " - rows");
+}
+
+// The minimum contribution is the automatic minimum size (100px)
+// because the preferred size is 'auto'.
+check("auto", 100);
+
+// The minimum contribution is the minimum size (50px)
+// because the preferred size is 'auto'.
+check("min", 50);
+
+// The minimum contribution is the automatic minimum size (100px)
+// because the preferred size is 'auto'.
+check("max", 100);
+
+// The minimum contribution is the automatic minimum size (100px)
+// because the preferred size depends on the containing block.
+check("size", 100);
+
+// The minimum contribution is the minimum size (50px)
+// because the preferred size is 'auto'.
+check("min max", 50);
+
+// The minimum contribution is the minimum size (50px)
+// because the preferred size depends on the containing block.
+check("min size", 50);
+
+// The minimum contribution is the automatic minimum size (100px)
+// because the preferred size depends on the containing block.
+check("max size", 100);
+
+// The minimum contribution is the minimum size (50px)
+// because the preferred size depends on the containing block.
+check("min max size", 50);
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-001.html
new file mode 100644
index 0000000000..c0be13ead8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-001.html
@@ -0,0 +1,576 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Percentage rows indefinite height</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing">
+<meta name="assert" content="This test checks that percentage rows on grid containers with indefinite height are treated as 'auto' to compute the intrinsic height, but are later resolved against the intrinsic height during layout.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  font: 25px/1 Ahem;
+  margin: 50px 0;
+}
+
+.border {
+  border: 10px solid;
+}
+
+.padding {
+  padding: 5px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<p>grid-template-rows: 60%;</p>
+
+<div class="grid" style="grid-template-rows: 60%;" data-expected-height="0">
+  <div class="firstRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 60%;" data-expected-height="25">
+  <div class="firstRowFirstColumn" data-expected-height="15">X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: 60%;" data-expected-height="50">
+  <div class="firstRowFirstColumn" data-expected-height="30">X<br>X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 60%;" data-expected-height="20">
+  <div class="firstRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 60%;" data-expected-height="45">
+  <div class="firstRowFirstColumn" data-expected-height="15">X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 60%;" data-expected-height="70">
+  <div class="firstRowFirstColumn" data-expected-height="30">X<br>X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 60%;" data-expected-height="10">
+  <div class="firstRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 60%;" data-expected-height="35">
+  <div class="firstRowFirstColumn" data-expected-height="15">X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 60%;" data-expected-height="60">
+  <div class="firstRowFirstColumn" data-expected-height="30">X<br>X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 60%;" data-expected-height="30">
+  <div class="firstRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 60%;" data-expected-height="55">
+  <div class="firstRowFirstColumn" data-expected-height="15">X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 60%;" data-expected-height="80">
+  <div class="firstRowFirstColumn" data-expected-height="30">X<br>X</div>
+</div>
+
+<p>grid-template-rows: 140%;</p>
+
+<div class="grid" style="grid-template-rows: 140%;" data-expected-height="0">
+  <div class="firstRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 140%;" data-expected-height="25">
+  <div class="firstRowFirstColumn" data-expected-height="35">X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: 140%;" data-expected-height="50">
+  <div class="firstRowFirstColumn" data-expected-height="70">X<br>X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 140%;" data-expected-height="20">
+  <div class="firstRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 140%;" data-expected-height="45">
+  <div class="firstRowFirstColumn" data-expected-height="35">X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 140%;" data-expected-height="70">
+  <div class="firstRowFirstColumn" data-expected-height="70">X<br>X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 140%;" data-expected-height="10">
+  <div class="firstRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 140%;" data-expected-height="35">
+  <div class="firstRowFirstColumn" data-expected-height="35">X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 140%;" data-expected-height="60">
+  <div class="firstRowFirstColumn" data-expected-height="70">X<br>X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 140%;" data-expected-height="30">
+  <div class="firstRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 140%;" data-expected-height="55">
+  <div class="firstRowFirstColumn" data-expected-height="35">X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 140%;" data-expected-height="80">
+  <div class="firstRowFirstColumn" data-expected-height="70">X<br>X</div>
+</div>
+
+<p>grid-template-rows: 100px 60%;</p>
+
+<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="100">
+  <div class="secondRowFirstColumn" data-expected-height="60"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="125">
+  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="150">
+  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="100">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="60"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="125">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="150">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="120">
+  <div class="secondRowFirstColumn" data-expected-height="60"></div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="145">
+  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="170">
+  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="120">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="60"></div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="145">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="170">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="110">
+  <div class="secondRowFirstColumn" data-expected-height="60"></div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="135">
+  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="160">
+  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="110">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="60"></div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="135">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="160">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="130">
+  <div class="secondRowFirstColumn" data-expected-height="60"></div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="155">
+  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="180">
+  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="130">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="60"></div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="155">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="180">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
+</div>
+
+<p>grid-template-rows: 100px 140%;</p>
+
+<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="100">
+  <div class="secondRowFirstColumn" data-expected-height="140"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="125">
+  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="150">
+  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="100">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="140"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="125">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="150">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="120">
+  <div class="secondRowFirstColumn" data-expected-height="140"></div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="145">
+  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="170">
+  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="120">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="140"></div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="145">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="170">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="110">
+  <div class="secondRowFirstColumn" data-expected-height="140"></div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="135">
+  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="160">
+  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="110">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="140"></div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="135">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="160">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="130">
+  <div class="secondRowFirstColumn" data-expected-height="140"></div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="155">
+  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="180">
+  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="130">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="140"></div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="155">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="180">
+  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
+</div>
+
+<p>grid-template-rows: auto 60%;</p>
+
+<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="0">
+  <div class="secondRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="25">
+  <div class="secondRowFirstColumn" data-expected-height="15">X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="50">
+  <div class="secondRowFirstColumn" data-expected-height="30">X<br>X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="25">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="15"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="50">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="30">X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="75">
+  <div class="firstRowFirstColumn" data-expected-height="30">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="45">X<br>X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="20">
+  <div class="secondRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="45">
+  <div class="secondRowFirstColumn" data-expected-height="15">X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="70">
+  <div class="secondRowFirstColumn" data-expected-height="30">X<br>X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="45">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="15"></div>
+</div>
+
+<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="70">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="30">X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="95">
+  <div class="firstRowFirstColumn" data-expected-height="30">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="45">X<br>X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="10">
+  <div class="secondRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="35">
+  <div class="secondRowFirstColumn" data-expected-height="15">X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="60">
+  <div class="secondRowFirstColumn" data-expected-height="30">X<br>X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="35">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="15"></div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="60">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="30">X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="85">
+  <div class="firstRowFirstColumn" data-expected-height="30">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="45">X<br>X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="30">
+  <div class="secondRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="55">
+  <div class="secondRowFirstColumn" data-expected-height="15">X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="80">
+  <div class="secondRowFirstColumn" data-expected-height="30">X<br>X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="55">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="15"></div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="80">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="30">X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="105">
+  <div class="firstRowFirstColumn" data-expected-height="30">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="45">X<br>X</div>
+</div>
+
+<p>grid-template-rows: auto 140%;</p>
+
+<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="0">
+  <div class="secondRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="25">
+  <div class="secondRowFirstColumn" data-expected-height="35">X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="50">
+  <div class="secondRowFirstColumn" data-expected-height="70">X<br>X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="25">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="35"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="50">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="70">X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="75">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="105">X<br>X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="20">
+  <div class="secondRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="45">
+  <div class="secondRowFirstColumn" data-expected-height="35">X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="70">
+  <div class="secondRowFirstColumn" data-expected-height="70">X<br>X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="45">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="35"></div>
+</div>
+
+<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="70">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="70">X</div>
+</div>
+
+<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="95">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="105">X<br>X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="10">
+  <div class="secondRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="35">
+  <div class="secondRowFirstColumn" data-expected-height="35">X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="60">
+  <div class="secondRowFirstColumn" data-expected-height="70">X<br>X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="35">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="35"></div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="60">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="70">X</div>
+</div>
+
+<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="85">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="105">X<br>X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="30">
+  <div class="secondRowFirstColumn" data-expected-height="0"></div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="55">
+  <div class="secondRowFirstColumn" data-expected-height="35">X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="80">
+  <div class="secondRowFirstColumn" data-expected-height="70">X<br>X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="55">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="35"></div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="80">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="70">X</div>
+</div>
+
+<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="105">
+  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
+  <div class="secondRowFirstColumn" data-expected-height="105">X<br>X</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002.html
new file mode 100644
index 0000000000..4b14f9c6ee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Percentage rows indefinite height 2nd pass</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing">
+<meta name="assert" content="This test checkds that when we have percentage rows in indefinite height grid containers, we need to do a second pass of the track sizing algorithm to get the expected results.">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  display: grid;
+  border: solid 5px;
+  position: relative;
+  font: 25px/1 Ahem;
+  margin: 50px 0;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<div class="grid" style="grid-template-rows: auto 60% auto;" data-expected-height="35">
+  <div style="grid-row: 1; grid-column: 1; background: cyan;" data-expected-height="5" data-offset-y="0"></div>
+  <div style="grid-row: 1 / 4; grid-column: 2; background: magenta;" data-expected-height="25" data-offset-y="0">X</div>
+  <div style="grid-row: 3; grid-column: 3; background: lime;" data-expected-height="5" data-offset-y="20"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto 20% auto;" data-expected-height="60">
+  <div style="grid-row: 1; grid-column: 1; background: cyan;" data-expected-height="25" data-offset-y="0">X</div>
+  <div style="grid-row: 1 / 4; grid-column: 2; background: magenta;" data-expected-height="60" data-offset-y="0">X</div>
+  <div style="grid-row: 3; grid-column: 3; background: lime;" data-expected-height="25" data-offset-y="35">X</div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto 10% auto; grid-template-columns: repeat(3, 50px);" data-expected-height="110">
+  <div style="grid-row: 1; grid-column: 1; background: cyan;" data-expected-height="45"></div>
+  <div style="grid-row: 1 / 4; grid-column: 2; background: magenta;" data-expected-height="100">X X X X</div>
+  <div style="grid-row: 3; grid-column: 3; background: lime;" data-expected-height="45"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto 10% auto; grid-template-columns: repeat(3, 50px);" data-expected-height="110">
+  <div style="grid-row: 1; grid-column: 1; background: cyan;" data-expected-height="45">X</div>
+  <div style="grid-row: 1 / 4; grid-column: 2; background: magenta;" data-expected-height="100">X X X X</div>
+  <div style="grid-row: 3; grid-column: 3; background: lime;" data-expected-height="45">X</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-repeat-max-width-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-repeat-max-width-001.html
new file mode 100644
index 0000000000..15a9f8a14c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-repeat-max-width-001.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<title>Grid repeat(auto) with max-width shouldn't pay attention only to that</title>
+<link rel=author title="Tab Atkins-Bittner" href="https://www.xanthir.com/contact/">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-repeat">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<!--
+    The auto-repeat section says to calculate how many repetitions fill the grid container's content area
+    when the grid has a definite width or max-width.
+    It does *not* say to *use* the grid container's width/max-width, necessarily;
+    it should still depend on normal layout.
+
+    This test will render correctly if the actual laid-out width of the grid container is used
+    to calculate the number of repetitions
+    (resulting in a single columns),
+    but will fail if the max-width is used
+    (resulting in the grid container assuming that there will be two columns while sizing itself,
+    but then only using one column when actually laying out its contents).
+-->
+<style>
+.wrapper {
+    width: 190px;
+    display: grid;
+    justify-content: start;
+}
+.grid {
+    max-width: 200px;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(0, 100px));
+    background: red;
+}
+.item {
+    background: green;
+    width: 100px;
+    height: 50px;
+}
+</style>
+<p>Test passes if there is a filled green square.</p>
+<div class=wrapper>
+    <div class=grid>
+        <div class=item></div>
+        <div class=item></div>
+    </div>
+</div>
+
+<script>
+    let grid = document.getElementsByClassName("grid")[0];
+    // Force a layout.
+    grid.offsetLeft = grid.offsetLeft;
+    if (window.getComputedStyle(grid).gridTemplateColumns === "100px") {
+        // Test passes - only one repeat of 100px was computed.
+        grid.style.width = "min-content";
+    }
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-shorthand-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-shorthand-001.html
new file mode 100644
index 0000000000..476415e8df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-shorthand-001.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'grid' shorthand does not reset gutter properties</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-shorthand">
+<meta name="flags" content="dom">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #grid {
+    display: grid;
+    grid-column-gap: 10px;
+    grid-row-gap: 20px;
+  }
+</style>
+<div id="grid"></div>
+<script>
+  var grid = document.getElementById("grid");
+
+  test(
+    () => {
+      assert_equals(window.getComputedStyle(grid)["grid-template-columns"], "none");
+      assert_equals(window.getComputedStyle(grid)["grid-template-rows"], "none");
+      assert_equals(window.getComputedStyle(grid)["grid-column-gap"], "10px");
+      assert_equals(window.getComputedStyle(grid)["grid-row-gap"], "20px");
+    }, "Check gutter properties initial values");
+
+  grid.style.grid = "100px / 200px";
+
+  test(
+    () => {
+      assert_equals(window.getComputedStyle(grid)["grid-template-columns"], "200px");
+      assert_equals(window.getComputedStyle(grid)["grid-template-rows"], "100px");
+      assert_equals(window.getComputedStyle(grid)["grid-column-gap"], "10px");
+      assert_equals(window.getComputedStyle(grid)["grid-row-gap"], "20px");
+    }, "Check gutter properties after setting 'grid' shorthand");
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-flexible-lengths-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-flexible-lengths-001.html
new file mode 100644
index 0000000000..0dae45b39d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-flexible-lengths-001.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support flexible lengths for 'grid-template-columns' and 'grid-template-rows' properties</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#fr-unit" title="5.1.3 Flexible Lengths: the fr unit">
+<meta name="flags" content="ahem dom">
+<meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties support flexible lengths (the 'fr' unit), so you can use it to represent a fraction of the free space in the grid container.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/testing-utils.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .grid {
+    display: grid;
+    width: 800px;
+    height: 600px;
+    font: 10px/1 Ahem;
+    justify-content: start;
+    align-content: start;
+  }
+</style>
+<div id="log"></div>
+
+<div id="emptyGrid" class="grid"></div>
+<div id="grid" class="grid">
+  <div>GRID ITEM</div>
+</div>
+
+<script>
+setup({explicit_done: true});
+document.fonts.ready.then(()=> {
+  // Valid values.
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr", "1fr", "800px", "600px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "1fr", "1fr", "800px", "600px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "2fr", "2fr", "800px", "600px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "2fr", "2fr", "800px", "600px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "10fr", "10fr", "800px", "600px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "10fr", "10fr", "800px", "600px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0.5fr", "0.5fr", "400px", "300px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "0.5fr", "0.5fr", "400px", "300px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", ".5fr", ".5fr", "400px", "300px");
+  TestingUtils.testGridTemplateColumnsRows("grid", ".5fr", ".5fr", "400px", "300px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 1fr)", "minmax(100px, 1fr)", "800px", "600px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 1fr)", "minmax(100px, 1fr)", "800px", "600px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1fr)", "minmax(1fr, 1fr)", "800px", "600px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1fr)", "minmax(1fr, 1fr)", "800px", "600px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 1fr", "1fr 1fr", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "1fr 1fr", "1fr 1fr", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0.25fr 0.75fr", "0.25fr 0.75fr", "200px 600px", "150px 450px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "0.25fr 0.75fr", "0.25fr 0.75fr", "200px 600px", "150px 450px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 2fr 1fr", "1fr 2fr 1fr", "200px 400px 200px", "150px 300px 150px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "1fr 2fr 1fr", "1fr 2fr 1fr", "200px 400px 200px", "150px 300px 150px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr 4fr 3fr 2fr", "auto 1fr 4fr 3fr 2fr", "0px 80px 320px 240px 160px", "0px 60px 240px 180px 120px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr 4fr 3fr 2fr", "auto 1fr 4fr 3fr 2fr", "90px 71px 284px 213px 142px", "10px 59px 236px 177px 118px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 4fr 100px 3fr 2fr", "1fr 4fr 100px 3fr 2fr", "70px 280px 100px 210px 140px", "50px 200px 100px 150px 100px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "1fr 4fr 100px 3fr 2fr", "1fr 4fr 100px 3fr 2fr", "70px 280px 100px 210px 140px", "50px 200px 100px 150px 100px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr", "auto 1fr", "0px 800px", "0px 600px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr", "auto 1fr", "90px 710px", "10px 590px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content 1fr", "max-content 1fr", "0px 800px", "0px 600px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "max-content 1fr", "max-content 1fr", "90px 710px", "10px 590px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content 1fr", "min-content 1fr", "0px 800px", "0px 600px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "min-content 1fr", "min-content 1fr", "40px 760px", "20px 580px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr auto", "1fr auto", "800px 0px", "600px 0px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "1fr auto", "1fr auto", "800px 0px", "600px 0px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "300px 1fr", "200px 1fr", "300px 500px", "200px 400px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "300px 1fr", "200px 1fr", "300px 500px", "200px 400px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "800px 1fr", "600px 1fr", "800px 0px", "600px 0px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "800px 1fr", "600px 1fr", "800px 0px", "600px 0px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1000px 1fr", "700px 1fr", "1000px 0px", "700px 0px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "1000px 1fr", "700px 1fr", "1000px 0px", "700px 0px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(50px + 50%) 1fr", "calc(50px + 50%) 1fr", "450px 350px", "350px 250px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "calc(50px + 50%) 1fr", "calc(50px + 50%) 1fr", "450px 350px", "350px 250px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 300px) 1fr", "minmax(100px, 200px) 1fr", "300px 500px", "200px 400px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 300px) 1fr", "minmax(100px, 200px) 1fr", "300px 500px", "200px 400px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(4, 1fr)", "repeat(4, 1fr)", ["200px 200px 200px 200px", "repeat(4, 200px)"], ["150px 150px 150px 150px", "repeat(4, 150px)"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(4, 1fr)", "repeat(4, 1fr)", ["200px 200px 200px 200px", "repeat(4, 200px)"], ["150px 150px 150px 150px", "repeat(4, 150px)"]);
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(4, [b] 1fr [c]) [d]", "[z] repeat(4, [y] 1fr) [x]", ["[a b] 200px [c b] 200px [c b] 200px [c b] 200px [c d]", "[a] repeat(4, [b] 200px [c]) [d]"], ["[z y] 150px [y] 150px [y] 150px [y] 150px [x]", "[z] repeat(4, [y] 150px) [x]"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(4, [b] 1fr [c]) [d]", "[z] repeat(4, [y] 1fr) [x]", ["[a b] 200px [c b] 200px [c b] 200px [c b] 200px [c d]", "[a] repeat(4, [b] 200px [c]) [d]"], ["[z y] 150px [y] 150px [y] 150px [y] 150px [x]", "[z] repeat(4, [y] 150px) [x]"]);
+
+  // Reset values.
+  document.getElementById("emptyGrid").style.gridTemplateColumns = "";
+  document.getElementById("emptyGrid").style.gridTemplateRows = "";
+  document.getElementById("grid").style.gridTemplateColumns = "";
+  document.getElementById("grid").style.gridTemplateRows = "";
+
+  // Wrong values.
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "fr", "fr", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "fr", "fr", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1 fr", "1 fr", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "1 fr", "1 fr", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1free-space", "1free-space", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "1free-space", "1free-space", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "-2fr", "-2fr", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "-2fr", "-2fr", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0,5fr", "0,5fr", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "0,5fr", "0,5fr", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(1fr + 100px)", "calc(1fr + 100px)", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "calc(1fr + 100px)", "calc(1fr + 100px)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(1fr) auto", "(1fr) auto", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "(1fr) auto", "(1fr) auto", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "90px", "10px");
+  done();
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-grid-template-areas-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-grid-template-areas-001.html
new file mode 100644
index 0000000000..ed4c500a19
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-grid-template-areas-001.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for 'grid-template-ares' property</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-template-areas-property" title="5.2 Named Areas: the 'grid-template-areas' property">
+<meta name="flags" content="ahem dom">
+<meta name="assert" content="This test checks that 'grid-template-areas' is supported in a grid. So you can define the grid structure.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/testing-utils.js"></script>
+<style>
+  #grid {
+    display: grid;
+  }
+</style>
+<div id="log"></div>
+
+<div id="grid"></div>
+
+<script>
+  // Single values.
+  TestingUtils.testGridTemplateAreas('grid', 'none', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"a"', '"a"');
+  TestingUtils.testGridTemplateAreas('grid', '"."', '"."');
+  TestingUtils.testGridTemplateAreas('grid', '"lower UPPER 10 -minus _low 1-st ©copy_right line¶"', '"lower UPPER 10 -minus _low 1-st ©copy_right line¶"');
+  TestingUtils.testGridTemplateAreas('grid', '"a b"', '"a b"');
+  TestingUtils.testGridTemplateAreas('grid', '"a b" "c d"', '"a b" "c d"');
+  TestingUtils.testGridTemplateAreas('grid', '"a   b"   "c   d"', '"a b" "c d"');
+  TestingUtils.testGridTemplateAreas('grid', '"a b""c d"', '"a b" "c d"');
+  TestingUtils.testGridTemplateAreas('grid', '"a b"\t"c d"', '"a b" "c d"');
+  TestingUtils.testGridTemplateAreas('grid', '"a b"\n"c d"', '"a b" "c d"');
+  TestingUtils.testGridTemplateAreas('grid', '"a b" "a b"', '"a b" "a b"');
+  TestingUtils.testGridTemplateAreas('grid', '"a a" "b b"', '"a a" "b b"');
+  TestingUtils.testGridTemplateAreas('grid', '". a ." "b a c"', '". a ." "b a c"');
+  TestingUtils.testGridTemplateAreas('grid', '".. a ..." "b a c"', '". a ." "b a c"');
+  TestingUtils.testGridTemplateAreas('grid', '".a..." "b a c"', '". a ." "b a c"');
+  TestingUtils.testGridTemplateAreas('grid', '"head head" "nav main" "foot ."', '"head head" "nav main" "foot ."');
+  TestingUtils.testGridTemplateAreas('grid', '"head head" "nav main" "foot ...."', '"head head" "nav main" "foot ."');
+  TestingUtils.testGridTemplateAreas('grid', '"head head" "nav main" "foot."', '"head head" "nav main" "foot ."');
+  TestingUtils.testGridTemplateAreas('grid', '". header header ." "nav main main main" "nav footer footer ."', '". header header ." "nav main main main" "nav footer footer ."');
+  TestingUtils.testGridTemplateAreas('grid', '"... header header ...." "nav main main main" "nav footer footer ...."', '". header header ." "nav main main main" "nav footer footer ."');
+  TestingUtils.testGridTemplateAreas('grid', '"...header header...." "nav main main main" "nav footer footer...."', '". header header ." "nav main main main" "nav footer footer ."');
+  TestingUtils.testGridTemplateAreas('grid', '"title stats" "score stats" "board board" "ctrls ctrls"', '"title stats" "score stats" "board board" "ctrls ctrls"');
+  TestingUtils.testGridTemplateAreas('grid', '"title board" "stats board" "score ctrls"', '"title board" "stats board" "score ctrls"');
+  TestingUtils.testGridTemplateAreas('grid', '". a" "b a" ". a"', '". a" "b a" ". a"');
+  TestingUtils.testGridTemplateAreas('grid', '".. a" "b a" "... a"', '". a" "b a" ". a"');
+  TestingUtils.testGridTemplateAreas('grid', '"..a" "b a" ".a"', '". a" "b a" ". a"');
+  TestingUtils.testGridTemplateAreas('grid', '"a a a" "b b b"', '"a a a" "b b b"');
+  TestingUtils.testGridTemplateAreas('grid', '". ." "a a"', '". ." "a a"');
+  TestingUtils.testGridTemplateAreas('grid', '"... ...." "a a"', '". ." "a a"');
+
+  // Reset values.
+  document.getElementById('grid').style.gridTemplateAreas = '';
+
+  // Wrong values.
+  TestingUtils.testGridTemplateAreas('grid', 'a', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"a" "b c"', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"a b" "c" "d e"', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"a b c" "d e"', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"a b"-"c d"', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"a b" - "c d"', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"a b" . "c d"', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"a b a"', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"a" "b" "a"', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"a b" "b b"', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"b a" "b b"', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"a b" "b a"', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"a ." ". a"', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '","', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"10%"', 'none');
+  TestingUtils.testGridTemplateAreas('grid', '"USD$"', 'none');
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-grid-template-columns-rows-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-grid-template-columns-rows-001.html
new file mode 100644
index 0000000000..bf818cd85e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-grid-template-columns-rows-001.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for 'grid-template-columns' and 'grid-template-rows' properties</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#track-sizing" title="5.1 Track Sizing: the 'grid-template-rows' and 'grid-template-columns' properties">
+<meta name="flags" content="ahem dom">
+<meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties are supported in a grid. So you can use the different syntax options to define the trak list.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/testing-utils.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .grid {
+    display: grid;
+    width: 800px;
+    height: 600px;
+    font: 10px/1 Ahem;
+    justify-content: start;
+    align-content: start;
+  }
+</style>
+<div id="log"></div>
+
+<div id="emptyGrid" class="grid"></div>
+<div id="grid" class="grid">
+  <div id="item">GRID ITEM</div>
+</div>
+
+<script>
+setup({explicit_done: true});
+document.fonts.ready.then(()=> {
+  // Single values.
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "none", "none", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "none", "none", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto", "auto", "0px", "0px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "auto", "auto", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px", "300px", "500px", "300px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "500px", "300px", "500px", "300px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "40em", "20em", "400px", "200px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "40em", "20em", "400px", "200px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "25%", "50%", "200px", "300px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "25%", "50%", "200px", "300px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(200px + 10%)", "calc(25% + 50px)", "280px", "200px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "calc(200px + 10%)", "calc(25% + 50px)", "280px", "200px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr", "1fr", "800px", "600px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "1fr", "1fr", "800px", "600px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content", "max-content", "0px", "0px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "max-content", "max-content", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content", "min-content", "0px", "0px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "min-content", "min-content", "40px", "20px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(200px, 400px)", "minmax(50px, 100px)", "400px", "100px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "minmax(200px, 400px)", "minmax(50px, 100px)", "400px", "100px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(calc(10% + 200px), calc(800px - 20%))", "minmax(calc(20% + 50px), calc(600px - 10%))", "640px", "540px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "minmax(calc(10% + 200px), calc(800px - 20%))", "minmax(calc(20% + 50px), calc(600px - 10%))", "640px", "540px");
+
+  // Multiple values.
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px 200px 50px", "100px 300px", "500px 200px 50px", "100px 300px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "500px 200px 50px", "100px 300px", "500px 200px 50px", "100px 300px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "40em 100px 15%", "50px 20em 10%", "400px 100px 120px", "50px 200px 60px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "40em 100px 15%", "50px 20em 10%", "400px 100px 120px", "50px 200px 60px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "200px 1fr", "1fr 100px", "200px 600px", "500px 100px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "200px 1fr", "1fr 100px", "200px 600px", "500px 100px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr", "auto 1fr", "0px 800px", "0px 600px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr", "auto 1fr", "90px 710px", "10px 590px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 3fr", "2fr 1fr", "200px 600px", "400px 200px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "1fr 3fr", "2fr 1fr", "200px 600px", "400px 200px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(25px, 75px) 750px", "minmax(50px, 150px) 500px", "50px 750px", "100px 500px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "minmax(25px, 75px) 750px", "minmax(50px, 150px) 500px", "50px 750px", "100px 500px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content 1fr calc(20px + 10%) minmax(30em, 50em)", "min-content 1fr calc(10% + 40px) minmax(3em, 5em)", "0px 200px 100px 500px", "0px 450px 100px 50px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "min-content 1fr calc(20px + 10%) minmax(30em, 50em)", "min-content 1fr  calc(10% + 40px) minmax(3em, 5em)", "40px 160px 100px 500px", "20px 430px 100px 50px");
+
+  // Reset values.
+  document.getElementById("emptyGrid").style.gridTemplateColumns = "";
+  document.getElementById("emptyGrid").style.gridTemplateRows = "";
+  document.getElementById("grid").style.gridTemplateColumns = "";
+  document.getElementById("grid").style.gridTemplateRows = "";
+
+  // Wrong values.
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "foo", "bar", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "foo", "bar", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto none", "none auto", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "auto none", "none auto", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px, 200px", "300px, 400px", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "100px, 200px", "300px, 400px", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "90px", "10px");
+  done();
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-001.html
new file mode 100644
index 0000000000..bff5e8151c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-001.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for named grid lines in 'grid-template-columns' and 'grid-template-rows' properties</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#named-lines" title="5.1.1. Named Grid Lines: the '(&lt;custom-ident\&gt;*)' syntax">
+<meta name="flags" content="ahem dom">
+<meta name="assert" content="This test checks that grid lines can be explicitly named in 'grid-template-columns' and 'grid-template-rows' properties.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/testing-utils.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .grid {
+    display: grid;
+    width: 800px;
+    height: 600px;
+    font: 10px/1 Ahem;
+    justify-content: start;
+    align-content: start;
+  }
+</style>
+<div id="log"></div>
+
+<div id="emptyGrid" class="grid"></div>
+<div id="grid" class="grid">
+  <div id="item">GRID ITEM</div>
+</div>
+
+<script>
+setup({explicit_done: true});
+document.fonts.ready.then(()=> {
+  // Valid values.
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first] auto [last]", "[first] auto [last]", "[first] 0px [last]", "[first] 0px [last]");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[first] auto [last]", "[first] auto [last]", "[first] 90px [last]", "[first] 10px [last]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] 0px [L4st-L1_n3]", "[F1rst-L1_n3] 0px [L4st-L1_n3]");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] 90px [L4st-L1_n3]", "[F1rst-L1_n3] 10px [L4st-L1_n3]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[] auto [ ]", "[ ] auto []", "0px", "0px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[] auto [ ]", "[ ] auto []", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first] auto", "[first] auto", "[first] 0px", "[first] 0px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[first] auto", "[first] auto", "[first] 90px", "[first] 10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [last]", "auto [last]", "0px [last]", "0px [last]");
+  TestingUtils.testGridTemplateColumnsRows("grid", "auto [last]", "auto [last]", "90px [last]", "10px [last]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[line] auto [line]", "[line] auto [line]", "[line] 0px [line]", "[line] 0px [line]");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[line] auto [line]", "[line] auto [line]", "[line] 90px [line]", "[line] 10px [line]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first line] auto [last line]", "[first line] auto [last line]", "[first line] 0px [last line]", "[first line] 0px [last line]");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[first line] auto [last line]", "[first line] auto [last line]", "[first line] 90px [last line]", "[first line] 10px [last line]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [b] auto [c]", "[a] auto [b] auto [c]", "[a] 0px [b] 0px [c]", "[a] 0px [b] 0px [c]");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [b] auto [c]", "[a] auto [b] auto [c]", "[a] 90px [b] 0px [c]", "[a] 10px [b] 0px [c]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [b] auto [c]", "auto [b] auto [c]", "0px [b] 0px [c]", "0px [b] 0px [c]");
+  TestingUtils.testGridTemplateColumnsRows("grid", "auto [b] auto [c]", "auto [b] auto [c]", "90px [b] 0px [c]", "10px [b] 0px [c]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto auto [c]", "[a] auto auto [c]", ["[a] 0px 0px [c]", "[a] repeat(2, 0px) [c]"], ["[a] 0px 0px [c]", "[a] repeat(2, 0px) [c]"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto auto [c]", "[a] auto auto [c]", "[a] 90px 0px [c]", "[a] 10px 0px [c]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [b] auto", "[a] auto [b] auto", "[a] 0px [b] 0px", "[a] 0px [b] 0px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [b] auto", "[a] auto [b] auto", "[a] 90px [b] 0px", "[a] 10px [b] 0px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto auto", "[a] auto auto", ["[a] 0px 0px", "[a] repeat(2, 0px)"], ["[a] 0px 0px", "[a] repeat(2, 0px)"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto auto", "[a] auto auto", "[a] 90px 0px", "[a] 10px 0px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [b] auto", "auto [b] auto", "0px [b] 0px", "0px [b] 0px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "auto [b] auto", "auto [b] auto", "90px [b] 0px", "10px [b] 0px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto auto [c]", "auto auto [c]", ["0px 0px [c]", "repeat(2, 0px) [c]"], ["0px 0px [c]", "repeat(2, 0px) [c]"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "auto auto [c]", "auto auto [c]", "90px 0px [c]", "10px 0px [c]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [a] auto [a]", "[a] auto [a] auto [a]", ["[a] 0px [a] 0px [a]", "repeat(2, [a] 0px) [a]"], ["[a] 0px [a] 0px [a]", "repeat(2, [a] 0px) [a]"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [a] auto [a]", "[a] auto [a] auto [a]", "[a] 90px [a] 0px [a]", "[a] 10px [a] 0px [a]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b c] auto [a b c] auto [a b c]", "[a b c] auto [a b c] auto [a b c]", ["[a b c] 0px [a b c] 0px [a b c]", "repeat(2, [a b c] 0px) [a b c]"], "[a b c] 0px [a b c] 0px [a b c]");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a b c] auto [a b c] auto [a b c]", "[a b c] auto [a b c] auto [a b c]", "[a b c] 90px [a b c] 0px [a b c]", "[a b c] 10px [a b c] 0px [a b c]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] 40em [b] 100px [c] 15% [d]", "[z] 50px [y] 20em [x] 10% [w]", "[a] 400px [b] 100px [c] 120px [d]", "[z] 50px [y] 200px [x] 60px [w]");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] 40em [b] 100px [c] 15% [d]", "[z] 50px [y] 20em [x] 10% [w]", "[a] 400px [b] 100px [c] 120px [d]", "[z] 50px [y] 200px [x] 60px [w]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] 200px [b] 1fr [c]", "[z] 1fr [y] 100px [x]", "[a] 200px [b] 600px [c]", "[z] 500px [y] 100px [x]");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] 200px [b] 1fr [c]", "[z] 1fr [y] 100px [x]", "[a] 200px [b] 600px [c]", "[z] 500px [y] 100px [x]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] min-content [b] 1fr [c] calc(20px + 10%) [d] minmax(30em, 50em) [e]", "[z] min-content [y] 1fr [x] calc(10% + 40px) [w] minmax(3em, 5em) [v]", "[a] 0px [b] 200px [c] 100px [d] 500px [e]", "[z] 0px [y] 450px [x] 100px [w] 50px [v]");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] min-content [b] 1fr [c] calc(20px + 10%) [d] minmax(30em, 50em) [e]", "[z] min-content [y] 1fr [x] calc(10% + 40px) [w] minmax(3em, 5em) [v]", "[a] 40px [b] 160px [c] 100px [d] 500px [e]", "[z] 20px [y] 430px [x] 100px [w] 50px [v]");
+
+  // Reset values.
+  document.getElementById("emptyGrid").style.gridTemplateColumns = "";
+  document.getElementById("emptyGrid").style.gridTemplateRows = "";
+  document.getElementById("grid").style.gridTemplateColumns = "";
+  document.getElementById("grid").style.gridTemplateRows = "";
+
+  // Wrong values.
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a]", "[a]", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a]", "[a]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b]", "[a b]", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a b]", "[a b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] none [b]", "[a] none [b]", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] none [b]", "[a] none [b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b]", "[a] [b]", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b]", "[a] [b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "a auto b", "a auto b", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "a auto b", "a auto b", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(a) auto (b)", "(a) auto (b)", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "(a) auto (b)", "(a) auto (b)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "'a' auto 'b'", "'a' auto 'b'", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "'a' auto 'b'", "'a' auto 'b'", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a [b]] auto [c]", "[a [b]] auto [c]", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a [b]] auto [c]", "[a [b]] auto [c]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [[b]]", "[a] auto [[b]]", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [[b]]", "[a] auto [[b]]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a auto [b]", "[a auto [b]", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a auto [b]", "[a auto [b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 100px] auto [b]", "[a 100px] auto [b]", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a 100px] auto [b]", "[a 100px] auto [b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 50%] auto [b]", "[a 50%] auto [b]", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a 50%] auto [b]", "[a 50%] auto [b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[5] auto [10]", "[5] auto [10]", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[5] auto [10]", "[5] auto [10]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a.] auto [b*]", "[a.] auto [b*]", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a.] auto [b*]", "[a.] auto [b*]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[#a] auto [$b]", "[#a] auto [$b]", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[#a] auto [$b]", "[#a] auto [$b]", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[initial] auto", "[initial] auto", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[initial] auto", "[initial] auto", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[inherit] auto", "[inherit] auto", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[inherit] auto", "[inherit] auto", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[default] auto", "[default] auto", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[default] auto", "[default] auto", "90px", "10px");
+  done();
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-002-ref.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-002-ref.html
new file mode 100644
index 0000000000..d65696428c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-002-ref.html
@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#named-lines" title="5.1.1. Named Grid Lines: the '(&lt;custom-ident\&gt;*)' syntax">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#valdef-repeat-auto-fill" title="7.2.2.2. Repeat-to-fill: 'auto-fill' and 'auto-fit' repetitions">
+<style>
+
+.holder {
+  width: 300px;
+  height: 20px;
+  border-bottom: 2px solid #cfbfcf;
+}
+
+.holder > :nth-child(2) {
+  clear: left; /* Forces the div to a new line to simulate a new grid row. */
+  padding-top: 2px; /* Simulates the grid row gap. */
+}
+
+.grid-container > * { float: left; height: 8px; }
+
+.grid-container > :nth-child(3n)   {  background: sienna; }
+.grid-container > :nth-child(3n+1) {  background: gold; }
+.grid-container > :nth-child(3n+2) {  background: orange; }
+
+.alt-color > :nth-child(2n) { background: sienna; }
+.alt-color > :nth-child(2n+1) { background: orange; }
+
+.invis { width: 0px; visibility: none; }
+
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="width:30px; margin-left:30px"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="width:50px; margin-left:170px"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="width:30px; margin-left:30px"></div>
+    <div style="width:30px; margin-left:40px"></div>
+    <div style="width:40px;"></div>
+    <div style="width:50px;"></div>
+    <div style="width:60px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="width:10px;"></div>
+    <div style="width:30px; margin-left:20px"></div>
+    <div style="width:30px; margin-left:40px"></div>
+    <div style="width:40px;"></div>
+    <div style="width:50px;"></div>
+    <div style="width:60px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="width:30px; margin-left:30px"></div>
+    <div style="width:50px; margin-left:110px"></div>
+    <div style="width:60px;"></div>
+  </div>
+  <div class="grid-container">
+    <div style="width:10px"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="width:10px;"></div>
+    <div style="width:30px; margin-left:20px"></div>
+    <div style="width:50px; margin-left:110px"></div>
+    <div style="width:60px;"></div>
+  </div>
+  <div class="grid-container">
+    <div class="invis"></div>
+    <div style="width:10px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="width:50px; margin-left:10px;"></div>
+    <div style="width:40px;"></div>
+    <div style="width:30px;"></div>
+    <div style="width:40px;"></div>
+    <div style="width:50px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="width:90px; margin-left:10px;"></div>
+    <div style="width:30px;"></div>
+    <div style="width:40px;"></div>
+    <div style="width:50px;"></div>
+    <div style="width:60px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div class="invis"></div>
+    <div style="width:10px;"></div>
+    <div class="invis"></div>
+    <div style="width:90px;"></div>
+    <div class="invis"></div>
+    <div style="width:30px;"></div>
+    <div style="width:40px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container alt-color">
+    <div class="invis"></div>
+    <div style="width:10px;"></div>
+    <div style="width:120px;"></div>
+    <div style="width:40px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="width:10px;"></div>
+    <div style="width:90px;"></div>
+    <div style="width:30px;"></div>
+    <div style="width:40px;"></div>
+    <div style="width:50px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div class="invis"></div>
+    <div style="width:10px;"></div>
+    <div class="invis"></div>
+    <div style="width:50px;"></div>
+    <div class="invis"></div>
+    <div style="width:40px;"></div>
+    <div style="width:30px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container alt-color">
+    <div class="invis"></div>
+    <div style="width:10px;"></div>
+    <div style="width:90px;"></div>
+    <div style="width:30px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="width:10px;"></div>
+    <div style="width:50px;"></div>
+    <div style="width:40px;"></div>
+    <div style="width:30px;"></div>
+    <div style="width:40px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="width:10px;"></div>
+    <div style="width:20px;"></div>
+    <div style="width:140px;"></div>
+    <div style="width:50px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="width:10px;"></div>
+    <div class="invis"></div>
+    <div style="width:20px;"></div>
+    <div class="invis"></div>
+    <div style="width:140px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container alt-color">
+    <div style="width:30px;"></div>
+    <div style="width:140px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div class="invis"></div>
+    <div style="width:10px;"></div>
+    <div class="invis"></div>
+    <div style="width:140px; margin-left:20px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div class="invis"></div>
+    <div style="width:10px;"></div>
+    <div class="invis"></div>
+    <div style="width:210px;"></div>
+  </div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-002.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-002.html
new file mode 100644
index 0000000000..6b3b19ef97
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-002.html
@@ -0,0 +1,219 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for named grid lines when 'grid-template-columns' and 'grid-template-rows' have multiple values inside of a repeat.</title>
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#named-lines" title="5.1.1. Named Grid Lines: the '(&lt;custom-ident\&gt;*)' syntax">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#valdef-repeat-auto-fill" title="7.2.2.2. Repeat-to-fill: 'auto-fill' and 'auto-fit' repetitions">
+<link rel="match" href="grid-support-named-grid-lines-002-ref.html">
+<style>
+
+.holder {
+  width: 300px;
+  height: 20px;
+  border-bottom: 2px solid #cfbfcf;
+}
+
+.grid-container {
+  display: grid;
+  /*
+    Defines the grid areas 'repeat', which covers the repeat only, and
+    'around-repeat' which covers the repeat and one track on either end.
+
+    Provides the line name 'all' in every track, the line names 'v' and 'u'
+    which alternate in every grid line.
+  */
+  grid-template-columns: [v] 10px [around-repeat-start a t-start w-start u all] 20px [repeat-start b] repeat(auto-fill, [all x v] 30px [all w-end y u] 40px [all t-end z]) [repeat-end c v] 50px [around-repeat-end all d u] 60px [e v];
+  grid-template-rows:
+    [w-start t-start around-repeat-start repeat-start]
+    repeat(auto-fill, 8px)
+    [w-end   t-end   around-repeat-end   repeat-end  ]
+    8px;
+  grid-row-gap: 2px;
+}
+
+.grid-container > :nth-child(3n)   {  background: sienna; }
+.grid-container > :nth-child(3n+1) {  background: gold; }
+.grid-container > :nth-child(3n+2) {  background: orange; }
+
+/* Alternate colors for some grid containers, where sometimes multiple grid
+ items would appear as one item or the actual ordering would be ambiguous
+ otherwise. */
+.alt-color > :nth-child(2n) { background: sienna; }
+.alt-color > :nth-child(2n+1) { background: orange; }
+
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+
+<!-- Use the line names just before and just after the repeat. -->
+<div class="holder">
+  <div class="grid-container">
+    <div style="grid-column:b / span 1"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="grid-column:c / span 1"></div>
+  </div>
+</div>
+
+<!-- Use line names that are inside a repeat. -->
+<div class="holder">
+  <div class="grid-container">
+    <div style="grid-column-start:x"></div>
+    <div style="grid-column-start:z"></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div></div>
+    <div style="grid-column-start:x"></div>
+    <div style="grid-column-start:z"></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="grid-column-start:x 1"></div>
+    <div style="grid-column-start:z 2"></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div></div>
+    <div style="grid-column-start:x 1"></div>
+    <div style="grid-column-start:z 2"></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+<!-- Using a span that goes from outside a repeat to inside the repeat. -->
+<div class="holder">
+  <div class="grid-container">
+    <div style="grid-column:u / y"></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="grid-column:u / z"></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+<!-- Using an area which has one end inside the repeat. -->
+<div class="holder">
+  <div class="grid-container">
+    <div style="grid-area: t;"></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container alt-color">
+    <div style="grid-area: t;"></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div></div>
+    <div style="grid-area: t;"></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="grid-area: w;"></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container alt-color">
+    <div style="grid-area: w;"></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div></div>
+    <div style="grid-area: w;"></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+<!-- Using an area which spans the entire repeat. -->
+<div class="holder">
+  <div class="grid-container">
+    <div></div>
+    <div></div>
+    <div style="grid-area: repeat;"></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div></div>
+    <div style="grid-area: repeat;"></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container alt-color">
+    <div></div>
+    <div style="grid-area: repeat;"></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="grid-area: repeat;"></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="grid-area: around-repeat;"></div>
+    <div></div>
+  </div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-003-ref.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-003-ref.html
new file mode 100644
index 0000000000..33f88bf374
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-003-ref.html
@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#named-lines" title="5.1.1. Named Grid Lines: the '(&lt;custom-ident\&gt;*)' syntax">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#valdef-repeat-auto-fill" title="7.2.2.2. Repeat-to-fill: 'auto-fill' and 'auto-fit' repetitions">
+<style>
+
+.holder {
+  width: 300px;
+  height: 20px;
+  border-bottom: 2px solid #cfbfcf;
+}
+
+.holder > :nth-child(2) {
+  clear: left; /* Forces the div to a new line to simulate a new grid row. */
+  padding-top: 2px; /* Simulates the grid row gap. */
+}
+
+.grid-container > * { float: left; height: 8px; }
+
+.grid-container > :nth-child(3n)   {  background: sienna; }
+.grid-container > :nth-child(3n+1) {  background: gold; }
+.grid-container > :nth-child(3n+2) {  background: orange; }
+
+.alt-color > :nth-child(2n) { background: sienna; }
+.alt-color > :nth-child(2n+1) { background: orange; }
+
+.invis { width: 0px; visibility: none; }
+
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="width:30px; margin-left:30px"></div>
+    <div style="width:30px;"></div>
+    <div style="width:40px;"></div>
+    <div style="width:50px;"></div>
+    <div style="width:60px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="width:10px;"></div>
+    <div style="width:30px; margin-left:20px"></div>
+    <div style="width:30px;"></div>
+    <div style="width:40px;"></div>
+    <div style="width:50px;"></div>
+    <div style="width:60px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="width:30px; margin-left:30px"></div>
+    <div style="width:50px;"></div>
+    <div style="width:60px;"></div>
+  </div>
+  <div class="grid-container">
+    <div style="width:10px"></div>
+    <div style="width:20px"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="width:10px;"></div>
+    <div style="width:30px; margin-left:20px;"></div>
+    <div style="width:50px;"></div>
+    <div style="width:60px;"></div>
+  </div>
+  <div class="grid-container">
+    <div class="invis"></div>
+    <div style="width:10px"></div>
+    <div style="width:20px"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="width:50px; margin-left:10px;"></div>
+    <div style="width:40px;"></div>
+    <div style="width:30px;"></div>
+    <div style="width:40px;"></div>
+    <div style="width:50px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="width:90px; margin-left:10px;"></div>
+    <div style="width:30px;"></div>
+    <div style="width:40px;"></div>
+    <div style="width:50px;"></div>
+    <div style="width:60px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div class="invis"></div>
+    <div style="width:10px;"></div>
+    <div class="invis"></div>
+    <div style="width:90px;"></div>
+    <div class="invis"></div>
+    <div style="width:30px;"></div>
+    <div style="width:40px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container alt-color">
+    <div class="invis"></div>
+    <div style="width:10px;"></div>
+    <div style="width:120px;"></div>
+    <div style="width:40px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="width:10px;"></div>
+    <div style="width:90px;"></div>
+    <div style="width:30px;"></div>
+    <div style="width:40px;"></div>
+    <div style="width:50px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div class="invis"></div>
+    <div style="width:10px;"></div>
+    <div class="invis"></div>
+    <div style="width:50px;"></div>
+    <div class="invis"></div>
+    <div style="width:40px;"></div>
+    <div style="width:30px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container alt-color">
+    <div class="invis"></div>
+    <div style="width:10px;"></div>
+    <div style="width:90px;"></div>
+    <div style="width:30px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="width:10px;"></div>
+    <div style="width:50px;"></div>
+    <div style="width:40px;"></div>
+    <div style="width:30px;"></div>
+    <div style="width:40px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="width:10px;"></div>
+    <div style="width:20px;"></div>
+    <div style="width:140px;"></div>
+    <div style="width:50px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="width:10px;"></div>
+    <div class="invis"></div>
+    <div style="width:20px;"></div>
+    <div class="invis"></div>
+    <div style="width:140px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container alt-color">
+    <div style="width:30px;"></div>
+    <div style="width:140px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div class="invis"></div>
+    <div style="width:10px;"></div>
+    <div class="invis"></div>
+    <div style="width:140px; margin-left:20px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="width:10px;"></div>
+    <div style="width:210px;"></div>
+    <div style="width:60px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container alt-color">
+    <div style="width:10px;"></div>
+    <div style="width:210px;"></div>
+    <div style="width:60px;"></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div class="invis"></div>
+    <div style="width:10px;"></div>
+    <div class="invis"></div>
+    <div style="width:210px;"></div>
+  </div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-003.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-003.html
new file mode 100644
index 0000000000..c2c722485f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-003.html
@@ -0,0 +1,224 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for named grid lines when 'grid-template-columns' and 'grid-template-rows' have multiple values inside of a repeat.</title>
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#named-lines" title="5.1.1. Named Grid Lines: the '(&lt;custom-ident\&gt;*)' syntax">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#valdef-repeat-auto-fill" title="7.2.2.2. Repeat-to-fill: 'auto-fill' and 'auto-fit' repetitions">
+<link rel="match" href="grid-support-named-grid-lines-003-ref.html">
+<style>
+
+.holder {
+  width: 300px;
+  height: 20px;
+  border-bottom: 2px solid #cfbfcf;
+}
+
+.grid-container {
+  display: grid;
+  /*
+    Defines the grid areas 'repeat', which covers the repeat only, and
+    'around-repeat' which covers the repeat and one track on either end.
+
+    Provides the line name 'all' in every track, the line names 'v' and 'u'
+    which alternates in every grid line.
+  */
+  grid-template-columns: [v] 10px [around-repeat-start a t-start w-start u all] 20px [repeat-start b] repeat(auto-fit, [all x v] 30px [all w-end y u] 40px [all t-end z]) [repeat-end c v] 50px [around-repeat-end all d u] 60px [e v];
+  grid-template-rows:
+    [w-start t-start around-repeat-start repeat-start]
+    repeat(auto-fit, 8px)
+    [w-end   t-end   around-repeat-end   repeat-end  ]
+    8px;
+  grid-row-gap: 2px;
+}
+
+.grid-container > :nth-child(3n)   {  background: sienna; }
+.grid-container > :nth-child(3n+1) {  background: gold; }
+.grid-container > :nth-child(3n+2) {  background: orange; }
+
+/* Alternate colors for some grid containers, where sometimes multiple grid
+ items would appear as one item or the actual ordering would be ambiguous
+ otherwise. */
+.alt-color > :nth-child(2n) { background: sienna; }
+.alt-color > :nth-child(2n+1) { background: orange; }
+
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+
+<!-- Use line names that are inside a repeat. -->
+<div class="holder">
+  <div class="grid-container">
+    <div style="grid-column-start:x"></div>
+    <div style="grid-column-start:z"></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div></div>
+    <div style="grid-column-start:x"></div>
+    <div style="grid-column-start:z"></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="grid-column-start:x 1"></div>
+    <div style="grid-column-start:z 2"></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div></div>
+    <div style="grid-column-start:x 1"></div>
+    <div style="grid-column-start:z 2"></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+<!-- Using a span that goes from outside a repeat to inside the repeat. -->
+<div class="holder">
+  <div class="grid-container">
+    <div style="grid-column:u / y"></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="grid-column:u / z"></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+<!-- Using an area which has one end inside the repeat. -->
+<div class="holder">
+  <div class="grid-container">
+    <div style="grid-area: t;"></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container alt-color">
+    <div style="grid-area: t;"></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div></div>
+    <div style="grid-area: t;"></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="grid-area: w;"></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container alt-color">
+    <div style="grid-area: w;"></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div></div>
+    <div style="grid-area: w;"></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+<!-- Using an area which spans the entire repeat. -->
+<div class="holder">
+  <div class="grid-container">
+    <div></div>
+    <div></div>
+    <div style="grid-area: repeat;"></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div></div>
+    <div style="grid-area: repeat;"></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container alt-color">
+    <div></div>
+    <div style="grid-area: repeat;"></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="grid-area: repeat;"></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div></div>
+    <div style="grid-area: around-repeat;"></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container alt-color">
+    <div></div>
+    <div style="grid-area: around-repeat;"></div>
+    <div></div>
+  </div>
+</div>
+
+<div class="holder">
+  <div class="grid-container">
+    <div style="grid-area: around-repeat;"></div>
+    <div></div>
+  </div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-repeat-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-repeat-001.html
new file mode 100644
index 0000000000..c2c8be0c59
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-repeat-001.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support 'repeat()' notation for 'grid-template-columns' and 'grid-template-rows' properties</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#repeat-notation" title="5.1.2 Repeating Rows and Columns: the 'repeat()' notation">
+<meta name="flags" content="ahem dom">
+<meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties support 'repeat()' notation, so you can use it to represents a repeated fragment of the track list.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/testing-utils.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .grid {
+    display: grid;
+    width: 800px;
+    height: 600px;
+    font: 10px/1 Ahem;
+    justify-content: start;
+    align-content: start;
+  }
+</style>
+<div id="log"></div>
+
+<div id="emptyGrid" class="grid"></div>
+<div id="grid" class="grid">
+  <div id="item">GRID ITEM</div>
+</div>
+
+<script>
+setup({explicit_done: true});
+document.fonts.ready.then(()=> {
+  // Valid values.
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(1, auto)", "repeat(1, auto)", "0px", "0px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(1, auto)", "repeat(1, auto)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, auto)", "repeat(2, auto)", ["0px 0px", "repeat(2, 0px)"], ["0px 0px", "repeat(2, 0px)"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, auto)", "repeat(2, auto)", "90px 0px", "10px 0px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, minmax(50px, calc(50px + 50%)))", "repeat(2, minmax(50px, calc(50px + 50%)))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, minmax(50px, calc(50px + 50%)))", "repeat(2, minmax(50px, calc(50px + 50%)))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]);
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content repeat(2, 25%) 1fr", "100px repeat(2, 25%) 1fr", ["0px 200px 200px 400px", "0px repeat(2, 200px) 400px"], ["100px 150px 150px 200px", "100px repeat(2, 150px) 200px"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "max-content repeat(2, 25%) 1fr", "max-content repeat(2, 25%) 1fr", ["90px 200px 200px 310px", "90px repeat(2, 200px) 310px"], ["10px 150px 150px 290px", "10px repeat(2, 150px) 290px"]);
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, min-content 50px)", "repeat(2, min-content 50px)", ["0px 50px 0px 50px", "repeat(2, 0px 50px)"], ["0px 50px 0px 50px", "repeat(2, 0px 50px)"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, min-content 50px)", "repeat(2, min-content 50px)", "40px 50px 0px 50px", "20px 50px 0px 50px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "[a] 100px [b] 250px [c a] 100px [b] 250px [c]", "[a] 50px [b] 250px [c a] 50px [b] 250px [c]");
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "[a] 100px [b] 250px [c a] 100px [b] 250px [c]", "[a] 50px [b] 250px [c a] 50px [b] 250px [c]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, auto [b] 100px) [c]", "[a] repeat(2, auto [b] 100px) [c]", ["[a] 0px [b] 100px 0px [b] 100px [c]", "[a] repeat(2, 0px [b] 100px) [c]"], ["[a] 0px [b] 100px 0px [b] 100px [c]", "[a] repeat(2, 0px [b] 100px) [c]"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, auto [b] 100px) [c]", "[a] repeat(2, auto [b] 100px) [c]", "[a] 90px [b] 100px 0px [b] 100px [c]", "[a] 10px [b] 100px 0px [b] 100px [c]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto repeat(2, [b] 100px) [c]", "[a] auto repeat(2, [b] 100px) [c]", ["[a] 0px [b] 100px [b] 100px [c]", "[a] 0px repeat(2, [b] 100px) [c]"], ["[a] 0px [b] 100px [b] 100px [c]", "[a] 0px repeat(2, [b] 100px) [c]"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto repeat(2, [b] 100px) [c]", "[a] auto repeat(2, [b] 100px) [c]", ["[a] 90px [b] 100px [b] 100px [c]", "[a] 90px repeat(2, [b] 100px) [c]"], ["[a] 10px [b] 100px [b] 100px [c]", "[a] 10px repeat(2, [b] 100px) [c]"]);
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, auto [b]) 100px [c]", "[a] repeat(2, auto [b]) 100px [c]", "[a] 0px [b] 0px [b] 100px [c]", "[a] 0px [b] 0px [b] 100px [c]");
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, auto [b]) 100px [c]", "[a] repeat(2, auto [b]) 100px [c]", "[a] 90px [b] 0px [b] 100px [c]", "[a] 10px [b] 0px [b] 100px [c]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, [b] 100px)", "[a] repeat(2, [b] 100px)", ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"], ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, [b] 100px)", "[a] repeat(2, [b] 100px)", ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"], ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"]);
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, [b] auto [c]) [d]", "[a] repeat(2, [b] auto [c]) [d]", ["[a b] 0px [c b] 0px [c d]", "[a] repeat(2, [b] 0px [c]) [d]"], ["[a b] 0px [c b] 0px [c d]", "[a] repeat(2, [b] 0px [c]) [d]"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, [b] auto [c]) [d]", "[a] repeat(2, [b] auto [c]) [d]", "[a b] 90px [c b] 0px [c d]", "[a b] 10px [c b] 0px [c d]");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] min-content repeat(2, [b] 1fr [c] calc(20px + 10%)) [d] minmax(30em, 50em) [e]", "[z] min-content repeat(2, [y] 1fr [x] calc(10% + 40px)) [w] minmax(3em, 5em) [v]", ["[a] 0px [b] 50px [c] 100px [b] 50px [c] 100px [d] 500px [e]", "[a] 0px repeat(2, [b] 50px [c] 100px) [d] 500px [e]"], ["[z] 0px [y] 175px [x] 100px [y] 175px [x] 100px [w] 50px [v]", "[z] 0px repeat(2, [y] 175px [x] 100px) [w] 50px [v]"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "[a] min-content repeat(2, [b] 1fr [c] calc(20px + 10%)) [d] minmax(30em, 50em) [e]", "[z] min-content repeat(2, [y] 1fr [x] calc(10% + 40px)) [w] minmax(3em, 5em) [v]", ["[a] 40px [b] 30px [c] 100px [b] 30px [c] 100px [d] 500px [e]", "[a] 40px repeat(2, [b] 30px [c] 100px) [d] 500px [e]"], ["[z] 20px [y] 165px [x] 100px [y] 165px [x] 100px [w] 50px [v]", "[z] 20px repeat(2, [y] 165px [x] 100px) [w] 50px [v]"]);
+
+  // Reset values.
+  document.getElementById("emptyGrid").style.gridTemplateColumns = "";
+  document.getElementById("emptyGrid").style.gridTemplateRows = "";
+  document.getElementById("grid").style.gridTemplateColumns = "";
+  document.getElementById("grid").style.gridTemplateRows = "";
+
+  // Wrong values.
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(-1, auto)", "repeat(-1, auto)", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(-1, auto)", "repeat(-1, auto)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(auto, 2)", "repeat(auto, 2)", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(auto, 2)", "repeat(auto, 2)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat 2, auto", "repeat 2, auto", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat 2, auto", "repeat 2, auto", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2 auto)", "repeat(2 auto)", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2 auto)", "repeat(2 auto)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px (repeat 2, auto)", "(repeat 2, auto)", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "100px (repeat 2, auto)", "(repeat 2, auto)", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "90px", "10px");
+  TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px repeat(2, [a])", "100px repeat(2, [a])", "none", "none");
+  TestingUtils.testGridTemplateColumnsRows("grid", "100px repeat(2, [a])", "100px repeat(2, [a])", "90px", "10px");
+  done();
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-repeat-002.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-repeat-002.html
new file mode 100644
index 0000000000..a5174fe6f3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-repeat-002.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support 'repeat()' notation for 'grid-template-columns' and 'grid-template-rows' properties</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#repeat-notation" title="5.1.2 Repeating Rows and Columns: the 'repeat()' notation">
+<meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties support 'repeat()' notation, and that their declared value serializes correctly.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+#grid {
+  display: grid;
+  width: 800px;
+  height: 600px;
+  font: 10px/1 Ahem;
+  justify-content: start;
+  align-content: start;
+}
+</style>
+
+<div id="log"></div>
+
+<div id="grid">
+  <div>GRID ITEM</div>
+</div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+setup({explicit_done: true});
+var {style} = document.getElementById("grid");
+
+function testGridTemplateColumnsRows(assignedValue, expectedValue = assignedValue) {
+  test(function() {
+      style.gridTemplateColumns = assignedValue;
+      style.gridTemplateRows = assignedValue;
+      assert_equals(style.gridTemplateColumns, expectedValue, "gridTemplateColumns");
+      assert_equals(style.gridTemplateRows, expectedValue, "gridTemplateRows");
+  }, `grid-template-columns: ${assignedValue}; and grid-template-rows: ${assignedValue};`);
+}
+
+document.fonts.ready.then(() => {
+  // Valid values.
+  testGridTemplateColumnsRows("repeat(1, auto)");
+  testGridTemplateColumnsRows("repeat(2, auto)");
+  testGridTemplateColumnsRows("repeat(2, minmax(50px, calc(50% + 50px)))");
+  testGridTemplateColumnsRows("repeat(5, 10%)");
+  testGridTemplateColumnsRows("max-content repeat(2, 25%) 1fr");
+  testGridTemplateColumnsRows("repeat(2, min-content 50px)");
+  testGridTemplateColumnsRows("repeat(2, [a] minmax(50px, 100px) [b] 25em [c])");
+  testGridTemplateColumnsRows("[a] repeat(2, auto [b] 100px) [c]");
+  testGridTemplateColumnsRows("[a] auto repeat(2, [b] 100px) [c]");
+  testGridTemplateColumnsRows("[a] repeat(2, auto [b]) 100px [c]");
+  testGridTemplateColumnsRows("[a] repeat(2, [b] 100px)");
+  testGridTemplateColumnsRows("[a] repeat(2, [b] auto [c]) [d]");
+  testGridTemplateColumnsRows("[a] min-content repeat(2, [b] 1fr [c] calc(10% + 20px)) [d] minmax(30em, 50em) [e]");
+
+  // Reset values.
+  style.gridTemplateColumns = "";
+  style.gridTemplateRows = "";
+
+  // Wrong values.
+  testGridTemplateColumnsRows("repeat(-1, auto)", "");
+  testGridTemplateColumnsRows("repeat(auto, 2)", "");
+  testGridTemplateColumnsRows("repeat 2, auto", "");
+  testGridTemplateColumnsRows("repeat(2 auto)", "");
+  testGridTemplateColumnsRows("100px (repeat 2, auto)", "");
+  testGridTemplateColumnsRows("repeat(2, 50px repeat(2, 100px))", "");
+  testGridTemplateColumnsRows("100px repeat(2, [a])", "");
+  done();
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-fit-content-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-fit-content-001-ref.html
new file mode 100644
index 0000000000..13002a7037
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-fit-content-001-ref.html
@@ -0,0 +1,334 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: grid-template-columns fit-content() reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  justify-content: start;
+  width: 100px;
+  position: relative;
+  padding-top: 10px;
+  margin-bottom: 5px;
+  grid-column-gap: 5px;
+}
+
+.item {
+  font: 10px/1 Ahem;
+  background: cyan;
+  padding-top: 2px;
+}
+
+.spanningItem {
+  font: 10px/1 Ahem;
+  grid-column: 1 / -1;
+  grid-row: 2;
+  background: salmon;
+  padding-top: 2px;
+}
+
+.test {
+  position: absolute;
+  left: 0; right: 0; top: 0;
+  height: 5px;
+  background: purple;
+}
+.test:nth-child(2n) { background: orange; }
+
+.floatLeft {
+  float: left;
+  width: 190px;
+}
+
+h3 { font-size: 1em; }
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div class="floatLeft">
+  <h3>Only fit-content() and with fixed size tracks.</h3>
+  <div class="grid">
+    <div class="item">XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 30px 0px;">
+    <div class="item">XXX</div>
+    <div class="spanningItem">XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 40px;">
+    <div class="item">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: auto auto;">
+    <div class="spanningItem">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 40px auto;">
+    <div class="item">XXX XXX</div>
+    <div class="spanningItem">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 80px;">
+    <div class="item">XXX XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: auto auto;">
+    <div class="spanningItem">XXX XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 25px 70px;">
+    <div class="item autoRowSecondColumn">XXX XXX XXX</div>
+    <div class="spanningItem">XXX XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 20px 50px;">
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 40px 40px;">
+    <div class="item">XXXXX</div>
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 15px 80px;">
+    <div class="item autoRowSecondColumn">XXXXX</div>
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+</div>
+
+<div class="floatLeft">
+  <h3>fit-content() with other content-sized tracks.</h3>
+  <div class="grid" style="grid-template-columns: 12.5px 82.5px;">
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 50px 45px;">
+    <div class="item">XXXXX</div>
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 0px 95px;">
+    <div class="item autoRowSecondColumn">XXXXX</div>
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 12.5px 40px;">
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 50px 40px;">
+    <div class="item">XXXXX</div>
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 0px 50px;">
+    <div class="item autoRowSecondColumn">XXXXX</div>
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: auto min-content max-content">
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+    <div class="test autoRowThirdColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: min-content auto max-content">
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+    <div class="test autoRowThirdColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: min-content max-content auto">
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+    <div class="test autoRowThirdColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 30px 0px 60px;">
+    <div class="item" style="grid-column: 1">XXX XX</div>
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+    <div class="test autoRowThirdColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 30px 0px 60px;">
+    <div class="item" style="grid-column: 1">XXX XX</div>
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+    <div class="test autoRowThirdColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 0px 90px 0px;">
+    <div class="item" style="grid-column: 2">XXX XX</div>
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+    <div class="test autoRowThirdColumn"></div>
+  </div>
+</div>
+
+<div class="floatLeft">
+  <h3>fit-content() with percentage arguments.</h3>
+  <div class="grid" style="grid-template-columns: 30px;">
+    <div class="item">XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 30px 0px;">
+    <div class="item">XXX</div>
+    <div class="spanningItem">XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 30px;">
+    <div class="item">XX XX</div>
+    <div class="test autoRowFirstColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 30px 30px;">
+    <div class="spanningItem">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 30px 30px;">
+    <div class="item autoRowSecondColumn">X X X</div>
+    <div class="spanningItem">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 90px;">
+    <div class="item">XXX XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 47.5px 47.5px;">
+    <div class="spanningItem">XXX XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 15px 80px;">
+    <div class="item autoRowSecondColumn">XXX XXX XXX</div>
+    <div class="spanningItem">XXX XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+</div>
+
+<div class="floatLeft">
+  <h3>max-content &lt; fit-content() argument.</h3>
+
+  <div class="grid" style="grid-template-columns: 70px;">
+    <div class="item">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 32.5px 32.5px;">
+    <div class="spanningItem">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 70px 0px;">
+    <div class="item">XXX XXX</div>
+    <div class="spanningItem">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 32.5px 32.5px;">
+    <div class="spanningItem">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 45px 20px;">
+    <div class="item autoRowSecondColumn">XX</div>
+    <div class="spanningItem">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 92.5px 12.5px;">
+    <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
+    <div class="spanningItem">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: 82.5px 12.5px;">
+    <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
+    <div class="spanningItem">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: max-content auto max-content;">
+    <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
+    <div class="spanningItem">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+    <div class="test autoRowThirdColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: min-content auto min-content;">
+    <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
+    <div class="spanningItem">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+    <div class="test autoRowThirdColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: auto auto auto;">
+    <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
+    <div class="spanningItem">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+    <div class="test autoRowThirdColumn"></div>
+  </div>
+
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-fit-content-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-fit-content-001.html
new file mode 100644
index 0000000000..cecc53f896
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-fit-content-001.html
@@ -0,0 +1,358 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: grid-template-columns fit-content()</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing">
+<link rel="match" href="grid-template-columns-fit-content-001-ref.html">
+<meta name="assert" content="This test checks that 'fit-content()' works as expected in grid-template-columns, i.e., it's similar to 'auto' ('minmax(auto, max-content)') except that the growth limit is clamped at the argument of 'fit-content' (if greater than the 'auto' minimum).">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  justify-content: start;
+  width: 100px;
+  position: relative;
+  padding-top: 10px;
+  margin-bottom: 5px;
+  grid-column-gap: 5px;
+}
+
+.fc0 { grid-template-columns: fit-content(0px);}
+.fc40 { grid-template-columns: fit-content(40px); }
+.fc80 { grid-template-columns: fit-content(80px); }
+.fc110 { grid-template-columns: fit-content(110px); }
+
+.fc0x2 { grid-template-columns: repeat(2, fit-content(0px));}
+.fc40x2 { grid-template-columns: repeat(2, fit-content(40px)); }
+.fc80x2 { grid-template-columns: repeat(2, fit-content(80px)); }
+.fc110x2 { grid-template-columns: repeat(2, fit-content(110px)); }
+
+.fc0p { grid-template-columns: fit-content(0%); }
+.fc30p { grid-template-columns: fit-content(30%); }
+.fc90p { grid-template-columns: fit-content(90%); }
+.fc110p { grid-template-columns: fit-content(110%); }
+
+.fc0px2 { grid-template-columns: repeat(2, fit-content(0%)); }
+.fc30px2 { grid-template-columns: repeat(2, fit-content(30%)); }
+.fc90px2 { grid-template-columns: repeat(2, fit-content(90%)); }
+.fc110px2 { grid-template-columns: repeat(2, fit-content(110%)); }
+
+.item {
+  font: 10px/1 Ahem;
+  background: cyan;
+  padding-top: 2px;
+}
+
+.spanningItem {
+  font: 10px/1 Ahem;
+  grid-column: 1 / -1;
+  grid-row: 2;
+  background: salmon;
+  padding-top: 2px;
+}
+
+.test {
+  position: absolute;
+  left: 0; right: 0; top: 0;
+  height: 5px;
+  background: purple;
+}
+.test:nth-child(2n) { background: orange; }
+
+.floatLeft {
+  float: left;
+  width: 190px;
+}
+
+h3 { font-size: 1em; }
+
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div class="floatLeft">
+  <h3>Only fit-content() and with fixed size tracks.</h3>
+  <div class="grid fc0">
+    <div class="item">XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+  </div>
+
+  <div class="grid fc0x2">
+    <div class="item">XXX</div>
+    <div class="spanningItem">XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid fc40">
+    <div class="item">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+  </div>
+
+  <div class="grid fc40x2">
+    <div class="spanningItem">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid fc40x2">
+    <div class="item">XXX XXX</div>
+    <div class="spanningItem">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid fc80">
+    <div class="item">XXX XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+  </div>
+
+  <div class="grid fc80x2">
+    <div class="spanningItem">XXX XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid fc80x2">
+    <div class="item autoRowSecondColumn">XXX XXX XXX</div>
+    <div class="spanningItem">XXX XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: fit-content(20px) 50%;">
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: minmax(10px, 40px) fit-content(40px);">
+    <div class="item">XXXXX</div>
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: fit-content(40px) minmax(10%, 200px);">
+    <div class="item autoRowSecondColumn">XXXXX</div>
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+</div>
+
+<div class="floatLeft">
+  <h3>fit-content() with other content-sized tracks.</h3>
+  <div class="grid" style="grid-template-columns: fit-content(40px) max-content;">
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: fit-content(40px) max-content;">
+    <div class="item">XXXXX</div>
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: fit-content(40px) max-content;">
+    <div class="item autoRowSecondColumn">XXXXX</div>
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: min-content fit-content(40px);">
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: min-content fit-content(40px);">
+    <div class="item">XXXXX</div>
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: min-content fit-content(40px);">
+    <div class="item autoRowSecondColumn">XXXXX</div>
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: fit-content(30px) min-content max-content">
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+    <div class="test autoRowThirdColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: min-content fit-content(30px) max-content">
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+    <div class="test autoRowThirdColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: min-content max-content fit-content(30px)">
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+    <div class="test autoRowThirdColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: fit-content(30px) min-content max-content">
+    <div class="item" style="grid-column: 1">XXX XX</div>
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+    <div class="test autoRowThirdColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: min-content fit-content(30px) max-content">
+    <div class="item" style="grid-column: 1">XXX XX</div>
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+    <div class="test autoRowThirdColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: min-content max-content fit-content(30px)">
+    <div class="item" style="grid-column: 2">XXX XX</div>
+    <div class="spanningItem">XXX XX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+    <div class="test autoRowThirdColumn"></div>
+  </div>
+</div>
+
+<div class="floatLeft">
+  <h3>fit-content() with percentage arguments.</h3>
+  <div class="grid fc0p">
+    <div class="item">XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+  </div>
+
+  <div class="grid fc0px2">
+    <div class="item">XXX</div>
+    <div class="spanningItem">XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid fc30p">
+    <div class="item">XX XX</div>
+    <div class="test autoRowFirstColumn"></div>
+  </div>
+
+  <div class="grid fc30px2">
+    <div class="spanningItem">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid fc30px2">
+    <div class="item autoRowSecondColumn">X X X</div>
+    <div class="spanningItem">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid fc90p">
+    <div class="item">XXX XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+  </div>
+
+  <div class="grid fc90px2">
+    <div class="spanningItem">XXX XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid fc90px2">
+    <div class="item autoRowSecondColumn">XXX XXX XXX</div>
+    <div class="spanningItem">XXX XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+</div>
+
+<div class="floatLeft">
+  <h3>max-content &lt; fit-content() argument.</h3>
+
+  <div class="grid fc110">
+    <div class="item">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+  </div>
+
+  <div class="grid fc110x2">
+    <div class="spanningItem">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid fc110x2">
+    <div class="item">XXX XXX</div>
+    <div class="spanningItem">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: fit-content(110px) fit-content(40px);">
+    <div class="spanningItem">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: fit-content(110px) fit-content(40px);">
+    <div class="item autoRowSecondColumn">XX</div>
+    <div class="spanningItem">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: max-content fit-content(110px);">
+    <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
+    <div class="spanningItem">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: fit-content(110px) min-content;">
+    <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
+    <div class="spanningItem">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: max-content fit-content(110px) max-content;">
+    <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
+    <div class="spanningItem">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+    <div class="test autoRowThirdColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: min-content fit-content(110px) min-content;">
+    <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
+    <div class="spanningItem">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+    <div class="test autoRowThirdColumn"></div>
+  </div>
+
+  <div class="grid" style="grid-template-columns: auto fit-content(110px) auto;">
+    <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div>
+    <div class="spanningItem">XXX XXX</div>
+    <div class="test autoRowFirstColumn"></div>
+    <div class="test autoRowSecondColumn"></div>
+    <div class="test autoRowThirdColumn"></div>
+  </div>
+
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-rows-changes-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-rows-changes-001.html
new file mode 100644
index 0000000000..b32d24859e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-rows-changes-001.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Grid: grid-tempalte-{rows|colums} dynamic updates</title>
+<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing">
+<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=112501">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/>
+<meta name="assert" content="This test checks that grid-tempalte-{rows|colums} dynamic updates properly relayout the grid items.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script>
+setup({ explicit_done: true });
+
+function testLayout(gridElementID, gridTracks, size, last = false)
+{
+    var gridElement = document.getElementById(gridElementID);
+    gridElement.style.gridTemplateColumns = gridTracks.columns;
+    gridElement.style.gridTemplateRows = gridTracks.rows;
+    var gridItem = gridElement.firstChild.nextSibling;
+    gridItem.setAttribute("data-expected-width", size.width);
+    gridItem.setAttribute("data-expected-height", size.height);
+    checkLayout("#" + gridElementID, last);
+}
+
+function updateRowsColumns()
+{
+    // In the constrained grid case, we will always end up sizing after the min width. This means we don't test max width changes as they would not be detectable.
+    testLayout("constrainedGrid", { 'rows': 'minmax(20px, 50px)', 'columns': 'minmax(30px, 50px)' }, { 'width': '30', 'height': '20' });
+    testLayout("constrainedGrid", { 'rows': 'minmax(40px, 50px)', 'columns': 'minmax(30px, 50px)' }, { 'width': '30', 'height': '40' });
+    testLayout("constrainedGrid", { 'rows': 'minmax(40px, 50px)', 'columns': 'minmax(50px, 50px)' }, { 'width': '50', 'height': '40' });
+    testLayout("constrainedGrid", { 'rows': 'auto', 'columns': 'minmax(50px, 50px)' }, { 'width': '50', 'height': '20' });
+    testLayout("constrainedGrid", { 'rows': 'auto', 'columns': 'minmax(max-content, 50px)' }, { 'width': '120', 'height': '10' });
+    testLayout("constrainedGrid", { 'rows': '70px', 'columns': 'minmax(max-content, 50px)' }, { 'width': '120', 'height': '70' });
+
+    testLayout("constrainedGridUndefinedHeight", { 'rows': 'minmax(20px, 50px)', 'columns': 'minmax(30px, 50px)' }, { 'width': '30', 'height': '50' });
+    testLayout("constrainedGridUndefinedHeight", { 'rows': 'minmax(40px, 50px)', 'columns': 'minmax(30px, 50px)' }, { 'width': '30', 'height': '50' });
+    testLayout("constrainedGridUndefinedHeight", { 'rows': 'minmax(40px, 50px)', 'columns': 'minmax(50px, 50px)' }, { 'width': '50', 'height': '50' });
+    testLayout("constrainedGridUndefinedHeight", { 'rows': 'auto', 'columns': 'minmax(50px, 50px)' }, { 'width': '50', 'height': '20' });
+    testLayout("constrainedGridUndefinedHeight", { 'rows': 'auto', 'columns': 'minmax(max-content, 50px)' }, { 'width': '120', 'height': '10' });
+    testLayout("constrainedGridUndefinedHeight", { 'rows': '70px', 'columns': 'minmax(max-content, 50px)' }, { 'width': '120', 'height': '70' });
+
+    testLayout("unconstrainedGrid", { 'rows': 'minmax(20px, 50px)', 'columns': 'minmax(20px, 60px)' }, { 'width': '60', 'height': '50' });
+    testLayout("unconstrainedGrid", { 'rows': 'minmax(20px, 50px)', 'columns': 'minmax(20px, 40px)' }, { 'width': '40', 'height': '50' });
+    testLayout("unconstrainedGrid", { 'rows': 'minmax(20px, 30px)', 'columns': 'minmax(20px, 40px)' }, { 'width': '40', 'height': '30' });
+    testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(20px, 40px)' }, { 'width': '40', 'height': '20' });
+    testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(20px, max-content)' }, { 'width': '120', 'height': '10' });
+    testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(150px, max-content)' }, { 'width': '150', 'height': '10' });
+    testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { 'width': '120', 'height': '10' });
+    testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(min-content, 1fr) 3fr' }, { 'width': '250', 'height': '10' });
+    testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(min-content, 3fr) 3fr' }, { 'width': '500', 'height': '10' }, true);
+}
+</script>
+<body onload="document.fonts.ready.then(() => { updateRowsColumns(); })">
+<div class="constrainedContainer">
+    <div class="grid" id="constrainedGrid" style="height: 100%">
+        <div class="sizedToGridArea">XXXXX XXXXXX</div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid" id="constrainedGridUndefinedHeight">
+        <div class="sizedToGridArea">XXXXX XXXXXX</div>
+    </div>
+</div>
+
+<div class="unconstrainedContainer">
+    <div class="grid justifyContentStart" id="unconstrainedGrid">
+        <div class="sizedToGridArea">XXXXX XXXXXX</div>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-rows-resolved-values-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-rows-resolved-values-001.html
new file mode 100644
index 0000000000..c992bf66d2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-rows-resolved-values-001.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'grid-template-columns' and 'grid-template-rows' properties resolved values for implicit tracks</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#resolved-track-list" title="5.1.5. Resolved Values">
+<meta name="flags" content="ahem dom">
+<meta name="assert" content="This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' list tracks implicitly created.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/testing-utils.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .grid {
+    display: grid;
+    width: 800px;
+    height: 600px;
+    font: 10px/1 Ahem;
+    justify-content: start;
+    align-content: start;
+  }
+
+  .fifthColumn {
+    grid-column: 5;
+  }
+
+  .fourthRow {
+    grid-row: 4;
+  }
+
+  .gridAutoFlowColumn {
+    grid-auto-flow: column;
+  }
+</style>
+<div id="log"></div>
+
+<div id="grid" class="grid">
+  <div>FIRST ITEM</div>
+  <div>SECOND ITEM</div>
+  <div>THIRD<br />ITEM</div>
+</div>
+
+<div id="gridItemsPositions" class="grid">
+  <div class="fifthColumn">FIRST ITEM</div>
+  <div class="fourthRow">SECOND ITEM</div>
+  <div>THIRD<br />ITEM</div>
+</div>
+
+<div id="gridAutoFlowColumn" class="grid gridAutoFlowColumn">
+  <div>FIRST ITEM</div>
+  <div>SECOND ITEM</div>
+  <div>THIRD<br />ITEM</div>
+</div>
+
+<div id="gridAutoFlowColumnItemsPositions" class="grid gridAutoFlowColumn">
+  <div class="fifthColumn">FIRST ITEM</div>
+  <div class="fourthRow">SECOND ITEM</div>
+  <div>THIRD<br />ITEM</div>
+</div>
+
+<script>
+setup({explicit_done: true});
+document.fonts.ready.then(()=> {
+  // Valid values.
+  TestingUtils.testGridTemplateColumnsRows("grid", "", "", "110px", ["10px 10px 20px", "repeat(2, 10px) 20px"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "auto auto", "", "100px 110px", "10px 20px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "60px", "", "60px", ["20px 20px 20px", "repeat(3, 20px)"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "", "100px 60px", ["20px 20px", "repeat(2, 20px)"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "", "50px", "110px", "50px 10px 20px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "", "50px 30px", "110px", "50px 30px 20px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px", "60px", ["50px 20px 20px", "50px repeat(2, 20px)"]);
+  TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px 30px", "60px", "50px 30px 20px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px", "100px 60px", "50px 20px");
+  TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px 30px", "100px 60px", "50px 30px");
+
+  TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "10px 20px 0px 10px");
+  TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "10px 20px 0px 20px");
+  TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "10px 20px 0px 20px");
+  TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 20px 0px 10px");
+  TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px 50px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 50px 0px 10px");
+  TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 20px 0px 20px");
+  TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px 50px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 50px 0px 20px");
+  TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 20px 0px 20px");
+  TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px 50px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 50px 0px 20px");
+
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "", "100px 110px 50px", "20px");
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "auto auto", "110px 50px", "20px 10px");
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "", "60px 110px 50px", "20px");
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "", "100px 60px 50px", "20px");
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px", "100px 110px 50px", "50px");
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px 30px", "110px 50px", "50px 30px");
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px", "60px 110px 50px", "50px");
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px 30px", "60px 50px", "50px 30px");
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px", "100px 60px 50px", "50px");
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px 30px", "100px 60px", "50px 30px");
+
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 10px", "20px repeat(2, 0px) 10px"]);
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]);
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]);
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 10px", "60px repeat(2, 0px) 10px"]);
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px 70px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], "60px 70px 0px 10px");
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]);
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px 70px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 70px 0px 20px");
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]);
+  TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px 70px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], "60px 70px 0px 20px");
+  done();
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-rows-resolved-values-001.tentative.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-rows-resolved-values-001.tentative.html
new file mode 100644
index 0000000000..d3ab109329
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-rows-resolved-values-001.tentative.html
@@ -0,0 +1,277 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'grid-template-columns' and 'grid-template-rows' properties resolved values for implicit tracks</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#resolved-track-list" title="5.1.5. Resolved Values">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4475">
+<meta name="flags" content="ahem dom">
+<meta name="assert" content="This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' don't include implicitly created tracks.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/testing-utils.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .grid {
+    display: grid;
+    width: 800px;
+    height: 600px;
+    font: 10px/1 Ahem;
+    justify-content: start;
+    align-content: start;
+    position: relative;
+  }
+
+  .fifthColumn {
+    grid-column: 5;
+  }
+
+  .fourthRow {
+    grid-row: 4;
+  }
+
+  .gridAutoFlowColumn {
+    grid-auto-flow: column;
+  }
+</style>
+<div id="log"></div>
+
+<div id="grid" class="grid">
+  <div>FIRST ITEM</div>
+  <div>SECOND ITEM</div>
+  <div>THIRD<br />ITEM</div>
+</div>
+
+<div id="gridItemsPositions" class="grid">
+  <div class="fifthColumn">FIRST ITEM</div>
+  <div class="fourthRow">SECOND ITEM</div>
+  <div>THIRD<br />ITEM</div>
+</div>
+
+<div id="gridAutoFlowColumn" class="grid gridAutoFlowColumn">
+  <div>FIRST ITEM</div>
+  <div>SECOND ITEM</div>
+  <div>THIRD<br />ITEM</div>
+</div>
+
+<div id="gridAutoFlowColumnItemsPositions" class="grid gridAutoFlowColumn">
+  <div class="fifthColumn">FIRST ITEM</div>
+  <div class="fourthRow">SECOND ITEM</div>
+  <div>THIRD<br />ITEM</div>
+</div>
+
+<script>
+function testSizeAndPositionOfItems(gridId, expectedItemData) {
+  let grid = document.getElementById(gridId);
+  assert_equals(grid.childElementCount, expectedItemData.length, "childElementCount");
+  let props = ["offsetWidth", "offsetTop", "offsetHeight"];
+  for (let i = 0; i < expectedItemData.length; ++i)
+    for (let prop of props)
+      assert_equals(grid.children[i][prop], expectedItemData[i][prop], "children[" + i + "]." + prop);
+}
+
+function testGrid(gridId, columnsStyle, rowsStyle, columnsComputedValue, rowsComputedValue, expectedItemData) {
+  TestingUtils.testGridTemplateColumnsRows(gridId, columnsStyle, rowsStyle, columnsComputedValue, rowsComputedValue);
+  test(function() {
+    testSizeAndPositionOfItems(gridId, expectedItemData);
+  }, "Children of '" + gridId + "' with: grid-template-columns: " + columnsStyle  + "; and grid-template-rows: " + rowsStyle + ";");
+}
+
+setup({explicit_done: true});
+document.fonts.ready.then(()=> {
+  // Valid values.
+  testGrid("grid", "", "", "none", "none", [
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 10},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 10, offsetHeight: 10},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 20, offsetHeight: 20},
+  ]);
+  testGrid("grid", "auto auto", "", "100px 110px", "none", [
+    {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 10},
+    {offsetLeft: 100, offsetWidth: 110, offsetTop: 0, offsetHeight: 10},
+    {offsetLeft: 0, offsetWidth: 100, offsetTop: 10, offsetHeight: 20},
+  ]);
+  testGrid("grid", "60px", "", "60px", "none", [
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 20},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 20, offsetHeight: 20},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 40, offsetHeight: 20},
+  ]);
+  testGrid("grid", "100px 60px", "", "100px 60px", "none", [
+    {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
+    {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 20},
+    {offsetLeft: 0, offsetWidth: 100, offsetTop: 20, offsetHeight: 20},
+  ]);
+  testGrid("grid", "", "50px", "none", "50px", [
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 50, offsetHeight: 10},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 20},
+  ]);
+  testGrid("grid", "", "50px 30px", "none", "50px 30px", [
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 50, offsetHeight: 30},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 80, offsetHeight: 20},
+  ]);
+  testGrid("grid", "60px", "50px", "60px", "50px", [
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 50, offsetHeight: 20},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 70, offsetHeight: 20},
+  ]);
+  testGrid("grid", "60px", "50px 30px", "60px", "50px 30px", [
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 50, offsetHeight: 30},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 80, offsetHeight: 20},
+  ]);
+  testGrid("grid", "100px 60px", "50px", "100px 60px", "50px", [
+    {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 0, offsetWidth: 100, offsetTop: 50, offsetHeight: 20},
+  ]);
+  testGrid("grid", "100px 60px", "50px 30px", "100px 60px", "50px 30px", [
+    {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 0, offsetWidth: 100, offsetTop: 50, offsetHeight: 30},
+  ]);
+
+  testGrid("gridItemsPositions", "", "", "none", "none", [
+    {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 10},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 30, offsetHeight: 10},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 10, offsetHeight: 20},
+  ]);
+  testGrid("gridItemsPositions", "60px", "", "60px", "none", [
+    {offsetLeft: 60, offsetWidth: 100, offsetTop: 0, offsetHeight: 10},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 30, offsetHeight: 20},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 10, offsetHeight: 20},
+  ]);
+  testGrid("gridItemsPositions", "60px 50px", "", "60px 50px", "none", [
+    {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 10},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 30, offsetHeight: 20},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 10, offsetHeight: 20},
+  ]);
+  testGrid("gridItemsPositions", "", "60px", "none", "60px", [
+    {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 80, offsetHeight: 10},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 20},
+  ]);
+  testGrid("gridItemsPositions", "", "60px 50px", "none", "60px 50px", [
+    {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 110, offsetHeight: 10},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 50},
+  ]);
+  testGrid("gridItemsPositions", "60px", "60px", "60px", "60px", [
+    {offsetLeft: 60, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 80, offsetHeight: 20},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20},
+  ]);
+  testGrid("gridItemsPositions", "60px", "60px 50px", "60px", "60px 50px", [
+    {offsetLeft: 60, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 110, offsetHeight: 20},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 50},
+  ]);
+  testGrid("gridItemsPositions", "60px 50px", "60px", "60px 50px", "60px", [
+    {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 80, offsetHeight: 20},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20},
+  ]);
+  testGrid("gridItemsPositions", "60px 50px", "60px 50px", "60px 50px", "60px 50px", [
+    {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 110, offsetHeight: 20},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 50},
+  ]);
+
+  testGrid("gridAutoFlowColumn", "", "", "none", "none", [
+    {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
+    {offsetLeft: 100, offsetWidth: 110, offsetTop: 0, offsetHeight: 20},
+    {offsetLeft: 210, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
+  ]);
+  testGrid("gridAutoFlowColumn", "", "auto auto", "none", "20px 10px", [
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 20},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 20, offsetHeight: 10},
+    {offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
+  ]);
+  testGrid("gridAutoFlowColumn", "60px", "", "60px", "none", [
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 20},
+    {offsetLeft: 60, offsetWidth: 110, offsetTop: 0, offsetHeight: 20},
+    {offsetLeft: 170, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
+  ]);
+  testGrid("gridAutoFlowColumn", "100px 60px", "", "100px 60px", "none", [
+    {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
+    {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 20},
+    {offsetLeft: 160, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
+  ]);
+  testGrid("gridAutoFlowColumn", "", "50px", "none", "50px", [
+    {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 100, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 210, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
+  ]);
+  testGrid("gridAutoFlowColumn", "", "50px 30px", "none", "50px 30px", [
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 50, offsetHeight: 30},
+    {offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
+  ]);
+  testGrid("gridAutoFlowColumn", "60px", "50px", "60px", "50px", [
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 60, offsetWidth: 110, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 170, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
+  ]);
+  testGrid("gridAutoFlowColumn", "60px", "50px 30px", "60px", "50px 30px", [
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 50, offsetHeight: 30},
+    {offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
+  ]);
+  testGrid("gridAutoFlowColumn", "100px 60px", "50px", "100px 60px", "50px", [
+    {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 160, offsetWidth: 50, offsetTop: 0, offsetHeight: 50},
+  ]);
+  testGrid("gridAutoFlowColumn", "100px 60px", "50px 30px", "100px 60px", "50px 30px", [
+    {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50},
+    {offsetLeft: 0, offsetWidth: 100, offsetTop: 50, offsetHeight: 30},
+    {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50},
+  ]);
+
+  testGrid("gridAutoFlowColumnItemsPositions", "", "", "none", "none", [
+    {offsetLeft: 160, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 20, offsetHeight: 10},
+    {offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
+  ]);
+  testGrid("gridAutoFlowColumnItemsPositions", "60px", "", "60px", "none", [
+    {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 20, offsetHeight: 20},
+    {offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 20},
+  ]);
+  testGrid("gridAutoFlowColumnItemsPositions", "60px 70px", "", "60px 70px", "none", [
+    {offsetLeft: 130, offsetWidth: 100, offsetTop: 0, offsetHeight: 20},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 20, offsetHeight: 20},
+    {offsetLeft: 60, offsetWidth: 70, offsetTop: 0, offsetHeight: 20},
+  ]);
+  testGrid("gridAutoFlowColumnItemsPositions", "", "60px", "none", "60px", [
+    {offsetLeft: 160, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 10},
+    {offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 60},
+  ]);
+  testGrid("gridAutoFlowColumnItemsPositions", "", "60px 70px", "none", "60px 70px", [
+    {offsetLeft: 160, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
+    {offsetLeft: 0, offsetWidth: 110, offsetTop: 130, offsetHeight: 10},
+    {offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 60},
+  ]);
+  testGrid("gridAutoFlowColumnItemsPositions", "60px", "60px", "60px", "60px", [
+    {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20},
+    {offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 60},
+  ]);
+  testGrid("gridAutoFlowColumnItemsPositions", "60px", "60px 70px", "60px", "60px 70px", [
+    {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 130, offsetHeight: 20},
+    {offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 60},
+  ]);
+  testGrid("gridAutoFlowColumnItemsPositions", "60px 70px", "60px", "60px 70px", "60px", [
+    {offsetLeft: 130, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20},
+    {offsetLeft: 60, offsetWidth: 70, offsetTop: 0, offsetHeight: 60},
+  ]);
+  testGrid("gridAutoFlowColumnItemsPositions", "60px 70px", "60px 70px", "60px 70px", "60px 70px", [
+    {offsetLeft: 130, offsetWidth: 100, offsetTop: 0, offsetHeight: 60},
+    {offsetLeft: 0, offsetWidth: 60, offsetTop: 130, offsetHeight: 20},
+    {offsetLeft: 60, offsetWidth: 70, offsetTop: 0, offsetHeight: 60},
+  ]);
+  done();
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-rows-fit-content-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-rows-fit-content-001-ref.html
new file mode 100644
index 0000000000..dc39cccc68
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-rows-fit-content-001-ref.html
@@ -0,0 +1,331 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: grid-template-rows fit-content() reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  justify-content: start;
+  align-content: start;
+  height: 100px;
+  width: 40px;
+  position: relative;
+  padding-left: 10px;
+  margin-right: 5px;
+  grid-row-gap: 5px;
+  float: left;
+}
+
+.item {
+  font: 10px/1 Ahem;
+  background: cyan;
+  padding-left: 2px;
+}
+
+.spanningItem {
+  font: 10px/1 Ahem;
+  grid-row: 1 / -1;
+  grid-column: 2;
+  background: salmon;
+  padding-left: 2px;
+}
+
+.test {
+  position: absolute;
+  left: 0; top: 0; bottom: 0;
+  width: 5px;
+  background: purple;
+}
+.test:nth-child(2n) { background: orange; }
+
+.firstRow { grid-row: 1 / 2; }
+.secondRow { grid-row: 2 / 3; }
+.thirdRow { grid-row: 3 / 4; }
+
+div.grid > div { writing-mode: vertical-lr; }
+
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div class="grid" style="grid-template-rows: 30px;">
+  <div class="item">XXX</div>
+  <div class="test firstRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 30px 0px;">
+  <div class="item">XXX</div>
+  <div class="spanningItem">XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 40px;">
+  <div class="item">XXX XXX</div>
+  <div class="test firstRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 32.5px 32.5px;">
+  <div class="spanningItem">XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 40px 25px;">
+  <div class="item">XXX XXX</div>
+  <div class="spanningItem">XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 80px;">
+  <div class="item">XXX XXX XXX</div>
+  <div class="test firstRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 47.5px 47.5px;">
+  <div class="spanningItem">XXX XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 25px 70px;">
+  <div class="item secondRow">XXX XXX XXX</div>
+  <div class="spanningItem">XXX XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 20px 50px;">
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 40px 40px;">
+  <div class="item">XXXXX</div>
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 15px 80px;">
+  <div class="item secondRow">XXXXX</div>
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid" style="grid-template-rows: 12.5px 82.5px;">
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 50px 45px;">
+  <div class="item">XXXXX</div>
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 0px 95px;">
+  <div class="item secondRow">XXXXX</div>
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 12.5px 40px;">
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 50px 40px;">
+  <div class="item">XXXXX</div>
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 0px 50px;">
+  <div class="item secondRow">XXXXX</div>
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto min-content max-content">
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+  <div class="test thirdRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: min-content auto max-content">
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+  <div class="test thirdRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: min-content max-content auto">
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+  <div class="test thirdRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 30px 0px 60px;">
+  <div class="item" style="grid-row: 1">XXX XX</div>
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+  <div class="test thirdRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 30px 0px 60px;">
+  <div class="item" style="grid-row: 1">XXX XX</div>
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+  <div class="test thirdRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 0px 90px 0px;">
+  <div class="item" style="grid-row: 2">XXX XX</div>
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+  <div class="test thirdRow"></div>
+</div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid" style="grid-template-rows: 30px;">
+  <div class="item">XXX</div>
+  <div class="test firstRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 30px 0px;">
+  <div class="item">XXX</div>
+  <div class="spanningItem">XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 30px;">
+  <div class="item">XX XX</div>
+  <div class="test firstRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 30px 30px;">
+  <div class="spanningItem">XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 30px 30px;">
+  <div class="item secondRow">X X X</div>
+  <div class="spanningItem">XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 90px;">
+  <div class="item">XXX XXX XXX</div>
+  <div class="test firstRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 47.5px 47.5px;">
+  <div class="spanningItem">XXX XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 15px 80px;">
+  <div class="item secondRow">XXX XXX XXX</div>
+  <div class="spanningItem">XXX XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid" style="grid-template-rows: 70px;">
+  <div class="item">XXX XXX</div>
+  <div class="test firstRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 32.5px 32.5px;">
+  <div class="spanningItem">XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 70px 0px;">
+  <div class="item">XXX XXX</div>
+  <div class="spanningItem">XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 32.5px 32.5px;">
+  <div class="spanningItem">XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 45px 20px;">
+  <div class="item secondRow">XX</div>
+  <div class="spanningItem">XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 92.5px 12.5px;">
+  <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
+  <div class="spanningItem">XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: 82.5px 12.5px;">
+  <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
+  <div class="spanningItem">XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: max-content auto max-content;">
+  <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
+  <div class="spanningItem">XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+  <div class="test thirdRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: min-content auto min-content;">
+  <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
+  <div class="spanningItem">XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+  <div class="test thirdRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto auto auto;">
+  <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
+  <div class="spanningItem">XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+  <div class="test thirdRow"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-rows-fit-content-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-rows-fit-content-001.html
new file mode 100644
index 0000000000..14ac0c9c39
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-rows-fit-content-001.html
@@ -0,0 +1,358 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: grid-template-rows fit-content()</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing">
+<link rel="match" href="grid-template-rows-fit-content-001-ref.html">
+<meta name="assert" content="This test checks that 'fit-content()' works as expected in grid-template-rows, i.e., it's similar to 'auto' ('minmax(auto, max-content)') except that the growth limit is clamped at the argument of 'fit-content' (if greater than the 'auto' minimum).">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  justify-content: start;
+  align-content: start;
+  height: 100px;
+  width: 40px;
+  position: relative;
+  padding-left: 10px;
+  margin-right: 5px;
+  grid-row-gap: 5px;
+  float: left;
+}
+
+.fc0 { grid-template-rows: fit-content(0px);}
+.fc40 { grid-template-rows: fit-content(40px); }
+.fc80 { grid-template-rows: fit-content(80px); }
+.fc110 { grid-template-rows: fit-content(110px); }
+
+.fc0x2 { grid-template-rows: repeat(2, fit-content(0px));}
+.fc40x2 { grid-template-rows: repeat(2, fit-content(40px)); }
+.fc80x2 { grid-template-rows: repeat(2, fit-content(80px)); }
+.fc110x2 { grid-template-rows: repeat(2, fit-content(110px)); }
+
+.fc0p { grid-template-rows: fit-content(0%); }
+.fc30p { grid-template-rows: fit-content(30%); }
+.fc90p { grid-template-rows: fit-content(90%); }
+.fc110p { grid-template-rows: fit-content(110%); }
+
+.fc0px2 { grid-template-rows: repeat(2, fit-content(0%)); }
+.fc30px2 { grid-template-rows: repeat(2, fit-content(30%)); }
+.fc90px2 { grid-template-rows: repeat(2, fit-content(90%)); }
+.fc110px2 { grid-template-rows: repeat(2, fit-content(110%)); }
+
+div.grid > div { writing-mode: vertical-lr; }
+
+.item {
+  font: 10px/1 Ahem;
+  background: cyan;
+  padding-left: 2px;
+}
+
+.spanningItem {
+  font: 10px/1 Ahem;
+  grid-row: 1 / -1;
+  grid-column: 2;
+  background: salmon;
+  padding-left: 2px;
+}
+
+.test {
+  position: absolute;
+  left: 0; bottom: 0; top: 0;
+  width: 5px;
+  background: purple;
+}
+.test:nth-child(2n) { background: orange; }
+
+.firstRow { grid-row: 1 / 2; }
+.secondRow { grid-row: 2 / 3; }
+.thirdRow { grid-row: 3 / 4; }
+
+h3 { font-size: 1em; }
+.container { float: left; height: 110px;}
+
+</style>
+
+<p>The test passes if it has the same output than the reference.</p>
+
+<div class="grid fc0">
+  <div class="item">XXX</div>
+  <div class="test firstRow"></div>
+</div>
+
+<div class="grid fc0x2">
+  <div class="item">XXX</div>
+  <div class="spanningItem">XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid fc40">
+  <div class="item">XXX XXX</div>
+  <div class="test firstRow"></div>
+</div>
+
+<div class="grid fc40x2">
+  <div class="spanningItem">XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid fc40x2">
+  <div class="item">XXX XXX</div>
+  <div class="spanningItem">XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid fc80">
+  <div class="item">XXX XXX XXX</div>
+  <div class="test firstRow"></div>
+</div>
+
+<div class="grid fc80x2">
+  <div class="spanningItem">XXX XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid fc80x2">
+  <div class="item secondRow">XXX XXX XXX</div>
+  <div class="spanningItem">XXX XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: fit-content(20px) 50%;">
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: minmax(10px, 40px) fit-content(40px);">
+  <div class="item">XXXXX</div>
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: fit-content(40px) minmax(10%, 200px);">
+  <div class="item secondRow">XXXXX</div>
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+</div>
+
+<br clear ="all">
+<br clear ="all">
+
+<div class="grid" style="grid-template-rows: fit-content(40px) max-content;">
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: fit-content(40px) max-content;">
+  <div class="item">XXXXX</div>
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: fit-content(40px) max-content;">
+  <div class="item secondRow">XXXXX</div>
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: min-content fit-content(40px);">
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: min-content fit-content(40px);">
+  <div class="item">XXXXX</div>
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: min-content fit-content(40px);">
+  <div class="item secondRow">XXXXX</div>
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: fit-content(30px) min-content max-content">
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+  <div class="test thirdRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: min-content fit-content(30px) max-content">
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+  <div class="test thirdRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: min-content max-content fit-content(30px)">
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+  <div class="test thirdRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: fit-content(30px) min-content max-content">
+  <div class="item" style="grid-row: 1">XXX XX</div>
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+  <div class="test thirdRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: min-content fit-content(30px) max-content">
+  <div class="item" style="grid-row: 1">XXX XX</div>
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+  <div class="test thirdRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: min-content max-content fit-content(30px)">
+  <div class="item" style="grid-row: 2">XXX XX</div>
+  <div class="spanningItem">XXX XX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+  <div class="test thirdRow"></div>
+</div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid fc0p">
+  <div class="item">XXX</div>
+  <div class="test firstRow"></div>
+</div>
+
+<div class="grid fc0px2">
+  <div class="item">XXX</div>
+  <div class="spanningItem">XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid fc30p">
+  <div class="item">XX XX</div>
+  <div class="test firstRow"></div>
+</div>
+
+<div class="grid fc30px2">
+  <div class="spanningItem">XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid fc30px2">
+  <div class="item secondRow">X X X</div>
+  <div class="spanningItem">XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid fc90p">
+  <div class="item">XXX XXX XXX</div>
+  <div class="test firstRow"></div>
+</div>
+
+<div class="grid fc90px2">
+  <div class="spanningItem">XXX XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid fc90px2">
+  <div class="item secondRow">XXX XXX XXX</div>
+  <div class="spanningItem">XXX XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<br clear="all">
+<br clear="all">
+
+<div class="grid fc110">
+  <div class="item">XXX XXX</div>
+  <div class="test firstRow"></div>
+</div>
+
+<div class="grid fc110x2">
+  <div class="spanningItem">XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid fc110x2">
+  <div class="item">XXX XXX</div>
+  <div class="spanningItem">XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: fit-content(110px) fit-content(40px);">
+  <div class="spanningItem">XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: fit-content(110px) fit-content(40px);">
+  <div class="item secondRow">XX</div>
+  <div class="spanningItem">XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: max-content fit-content(110px);">
+  <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
+  <div class="spanningItem">XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: fit-content(110px) min-content;">
+  <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
+  <div class="spanningItem">XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: max-content fit-content(110px) max-content;">
+  <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
+  <div class="spanningItem">XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+  <div class="test thirdRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: min-content fit-content(110px) min-content;">
+  <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
+  <div class="spanningItem">XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+  <div class="test thirdRow"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: auto fit-content(110px) auto;">
+  <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div>
+  <div class="spanningItem">XXX XXX</div>
+  <div class="test firstRow"></div>
+  <div class="test secondRow"></div>
+  <div class="test thirdRow"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/support/testing-utils.js b/testing/web-platform/tests/css/css-grid/grid-definition/support/testing-utils.js
new file mode 100644
index 0000000000..30b944265b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/support/testing-utils.js
@@ -0,0 +1,43 @@
+var TestingUtils = (function() {
+
+    function checkGridTemplateColumns(element, value) {
+        if (!Array.isArray(value))
+            value = new Array(value);
+        assert_in_array(getComputedStyle(element).gridTemplateColumns, value, "gridTemplateColumns");
+    }
+
+    function checkGridTemplateRows(element, value) {
+        if (!Array.isArray(value))
+            value = new Array(value);
+        assert_in_array(getComputedStyle(element).gridTemplateRows, value, "gridTemplateRows");
+    }
+
+    function testGridTemplateColumnsRows(gridId, columnsStyle, rowsStyle, columnsComputedValue, rowsComputedValue, label) {
+        test(function() {
+            var grid = document.getElementById(gridId);
+            grid.style.gridTemplateColumns = columnsStyle;
+            grid.style.gridTemplateRows = rowsStyle;
+            checkGridTemplateColumns(grid, columnsComputedValue);
+            checkGridTemplateRows(grid, rowsComputedValue);
+        }, (label ? label + " " : "") + "'" + gridId + "' with: grid-template-columns: " + columnsStyle  + "; and grid-template-rows: " + rowsStyle + ";");
+    }
+
+    function checkGridTemplateAreas(element, value) {
+        if (!Array.isArray(value))
+            value = new Array(value);
+        assert_in_array(getComputedStyle(element).gridTemplateAreas, value, "gridTemplateAreas");
+    }
+
+    function testGridTemplateAreas(gridId, style, value) {
+        test(function() {
+            var grid = document.getElementById(gridId);
+            grid.style.gridTemplateAreas = style;
+            checkGridTemplateAreas(grid, value);
+        }, "'" + gridId + "' with: grid-template-areas: " + style + ";");
+    }
+
+    return {
+        testGridTemplateColumnsRows: testGridTemplateColumnsRows,
+        testGridTemplateAreas: testGridTemplateAreas
+    }
+})();
diff --git a/testing/web-platform/tests/css/css-grid/grid-item-non-auto-height-stretch-001.html b/testing/web-platform/tests/css/css-grid/grid-item-non-auto-height-stretch-001.html
new file mode 100644
index 0000000000..458ed020e3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-item-non-auto-height-stretch-001.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<title>Grid items only stretch if block-size computes to auto</title>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4525">
+<link rel="help" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="help" href="https://mozilla.org" title="Mozilla">
+<link rel="match" href="grid-item-non-auto-height-stretch-ref.html">
+<style>
+#grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  grid-template: 100% / 100%;
+  background: green;
+}
+#item {
+  height: max-content;
+  background: red;
+}
+</style>
+<div id="grid">
+  <div id="item"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-item-non-auto-height-stretch-002.html b/testing/web-platform/tests/css/css-grid/grid-item-non-auto-height-stretch-002.html
new file mode 100644
index 0000000000..9b2757f4d8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-item-non-auto-height-stretch-002.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<title>Grid items only stretch if block-size computes to auto</title>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4525">
+<link rel="help" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="help" href="https://mozilla.org" title="Mozilla">
+<link rel="match" href="grid-item-non-auto-height-stretch-ref.html">
+<style>
+#grid {
+  writing-mode: vertical-lr;
+  display: grid;
+  width: 100px;
+  height: 100px;
+  grid-template: 100% / 100%;
+  background: green;
+}
+#item {
+  width: max-content;
+  background: red;
+}
+</style>
+<div id="grid">
+  <div id="item"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-item-non-auto-height-stretch-003.html b/testing/web-platform/tests/css/css-grid/grid-item-non-auto-height-stretch-003.html
new file mode 100644
index 0000000000..acd382b4f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-item-non-auto-height-stretch-003.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<title>Grid items only stretch if block-size computes to auto</title>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4525">
+<link rel="help" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="help" href="https://mozilla.org" title="Mozilla">
+<link rel="match" href="grid-item-non-auto-height-stretch-ref.html">
+<style>
+#grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  grid-template: 100% / 100%;
+  background: green;
+}
+#item {
+  height: min-content;
+  background: red;
+}
+</style>
+<div id="grid">
+  <div id="item"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-item-non-auto-height-stretch-004.html b/testing/web-platform/tests/css/css-grid/grid-item-non-auto-height-stretch-004.html
new file mode 100644
index 0000000000..b68cf7546d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-item-non-auto-height-stretch-004.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<title>Grid items only stretch if block-size computes to auto</title>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4525">
+<link rel="help" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="help" href="https://mozilla.org" title="Mozilla">
+<link rel="match" href="grid-item-non-auto-height-stretch-ref.html">
+<style>
+#grid {
+  writing-mode: vertical-lr;
+  display: grid;
+  width: 100px;
+  height: 100px;
+  grid-template: 100% / 100%;
+  background: green;
+}
+#item {
+  width: min-content;
+  background: red;
+}
+</style>
+<div id="grid">
+  <div id="item"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-item-non-auto-height-stretch-ref.html b/testing/web-platform/tests/css/css-grid/grid-item-non-auto-height-stretch-ref.html
new file mode 100644
index 0000000000..1249dbaa8c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-item-non-auto-height-stretch-ref.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<title>CSS test reference</title>
+<style>
+#ref {
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+</style>
+<div id="ref"></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-item-percentage-quirk-001.html b/testing/web-platform/tests/css/css-grid/grid-item-percentage-quirk-001.html
new file mode 100644
index 0000000000..0956b7a025
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-item-percentage-quirk-001.html
@@ -0,0 +1,9 @@
+<!-- quirks mode -->
+<link rel="match" href="../../quirks/reference/green-100px-square-no-red.html">
+<link rel="help" href="https://quirks.spec.whatwg.org/#the-percentage-height-calculation-quirk">
+<p>There should be a filled green square below, and no red.</p>
+<div style="width: 100px; height: 100px; overflow: hidden; background: green;">
+  <div style="display: grid; position: relative; left: -20px;">
+    <canvas width=10 height=10 style="height: 200%; background: red;"></canvas>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-item-percentage-quirk-002.html b/testing/web-platform/tests/css/css-grid/grid-item-percentage-quirk-002.html
new file mode 100644
index 0000000000..f795cd096d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-item-percentage-quirk-002.html
@@ -0,0 +1,9 @@
+<!-- quirks mode -->
+<link rel="match" href="../../quirks/reference/green-100px-square-no-red.html">
+<link rel="help" href="https://quirks.spec.whatwg.org/#the-percentage-height-calculation-quirk">
+<p>There should be a filled green square below, and no red.</p>
+<div style="width: 100px; height: 100px; overflow: hidden; background: green;">
+  <div style="display: grid; position: relative; left: -20px;">
+    <div width=10 height=10 style="height: 200%; width: 200px; background: red;"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/anonymous-grid-item-001.html b/testing/web-platform/tests/css/css-grid/grid-items/anonymous-grid-item-001.html
new file mode 100644
index 0000000000..db88ce54b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/anonymous-grid-item-001.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Test: Anonymous grid items - non-contiguous text runs - position:absolute</title>
+<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items">
+<link rel="match" href="/css/css-flexbox/anonymous-flex-item-split-ref.html">
+<p>The words "Two" and "lines" should not be on the same line.</p>
+<div style="display:grid">Two <span style="position:absolute"></span>lines</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-001.html b/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-001.html
new file mode 100644
index 0000000000..6271a37b63
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-001.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview">
+<meta name="assert" content="An element with an aspect-ratio resolves its percentage against the definite row.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div style="display: inline-grid; grid-template-rows: 100px; background: green;">
+  <div style="aspect-ratio: 1/1; height: 100%;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-002.html b/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-002.html
new file mode 100644
index 0000000000..988814dc67
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-002.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview">
+<meta name="assert" content="An element with an aspect-ratio resolves its percentage against the definite row.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div style="display: inline-grid; grid-template-rows: 50px 50px; background: green;">
+  <div style="aspect-ratio: 1/1; height: 100%; grid-row-start: 1; grid-row-end: 3;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-003.html b/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-003.html
new file mode 100644
index 0000000000..45e7cce4d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-003.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview">
+<meta name="assert" content="An element with an aspect-ratio resolves its percentage against the definite row.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div style="display: inline-grid; grid-template-rows: 100px; background: green;">
+  <div style="aspect-ratio: 2/1; height: 50%;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-004.html b/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-004.html
new file mode 100644
index 0000000000..a7a6336c24
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-004.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview">
+<meta name="assert" content="An element with an aspect-ratio and stretch alignment stretches to the definite row, and transfers its size.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div style="display: inline-grid; grid-template-rows: 100px; background: green;">
+  <img src="support/50x50-green.png" style="align-self: stretch; opacity: 0;">
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-005.html b/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-005.html
new file mode 100644
index 0000000000..70f554ba37
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/aspect-ratio-005.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview">
+<meta name="assert" content="An element with an aspect-ratio resolves its percentage against the definite row and the track sizes get updated.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<style>
+    body { overflow: hidden; }
+</style>
+<p>Test passes if there is a filled green square.</p>
+<div style="display: inline-grid; grid-template-rows: 50px 50px; background: red; height: 100px;">
+  <div style="grid-row: 1; background: green; aspect-ratio: 2/1; height: 100%;"></div>
+  <div style="grid-row: 2; background: green;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/explicitly-sized-grid-item-as-table.html b/testing/web-platform/tests/css/css-grid/grid-items/explicitly-sized-grid-item-as-table.html
new file mode 100644
index 0000000000..53a0979622
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/explicitly-sized-grid-item-as-table.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>CSS Grid Layout Test: Explicitly sized grid item as table with narrow contents</title>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#grid-track-concept" title="3.2. Grid Tracks and Cells">
+<meta name="assert" content="A grid item as a table uses the sizing algorithm of the grid">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div style="display:grid; grid-template-columns:50% 50%; width:200px;">
+  <div style="display:table; background:green;">
+    <div style="width:10px; height:100px;"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001-ref.html
new file mode 100644
index 0000000000..3e08fdfbde
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Reference: 100x100 green square image in the middle</title>
+<link rel="author" title="Hyunjune Kim" href="mailto:hyunjune.kim@samsung.com">
+<style>
+  img {
+    display: block;
+    margin: auto;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div>
+  <img src="./support/100x100-green.png">
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001.html
new file mode 100644
index 0000000000..ccf87024bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-auto-margin-and-replaced-item-001.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Margin auto and replaced grid item</title>
+<link rel="author" title="Hyunjune Kim" href="mailto:hyunjune.kim@samsung.com">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#alignment">
+<meta name="assert" content="Checks width of the nested grid container applied 'margin:auto' with a replaced item which has a property called max-height.">
+<link rel="match" href="grid-auto-margin-and-replaced-item-001-ref.html">
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    left:0;
+    right:0;
+    margin: auto;
+    z-index: -1;
+  }
+  .grid {
+    display: grid;
+  }
+  .nested-grid {
+    display: grid;
+    margin: auto;
+  }
+  img {
+    max-height: 100%;
+  }
+</style>
+
+<body onload="loadImage()">
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div class="grid">
+  <div id="reference-overlapped-red"></div>
+  <div class="nested-grid">
+    <img id="replaced">
+  </div>
+</div>
+
+<script>
+function loadImage() {
+  // Use svg for a 100x100 green square so we don't have to wait for replaced.onload.
+  replaced.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='100' height='100'%3E%3Crect width='100%25' height='100%25' fill='green'/%3E%3C/svg%3E";
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-automatic-minimum-intrinsic-aspect-ratio-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-automatic-minimum-intrinsic-aspect-ratio-001.html
new file mode 100644
index 0000000000..7d472716fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-automatic-minimum-intrinsic-aspect-ratio-001.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<title>CSS Grid: automatic minimum for items with instrinsic aspect ratios</title>
+<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
+<meta name="assert" content="Check how min-width|height:auto is computed for items with intrinsic aspect ratios.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+
+<style>
+.container {
+    border: 5px solid orange;
+    display: grid;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.container')">
+<div id="log"></div>
+
+<div class="container min-content" data-expected-width="60"
+    data-expected-height="35">
+  <img src="/images/green-100x50.png" style="height: 25px;"
+      data-expected-width="50" data-expected-height="25"/>
+</div>
+
+<div class="container min-content" data-expected-width="150"
+    data-expected-height="80">
+  <img src="/images/green-100x50.png" style="min-height: 70px;"
+      data-expected-width="140" data-expected-height="70"/>
+</div>
+
+<div class="container min-content" data-expected-width="90"
+    data-expected-height="50">
+  <img src="/images/green-100x50.png" style="max-height: 40px;"
+      data-expected-width="80" data-expected-height="40"/>
+</div>
+
+<div class="container min-content" data-expected-width="70"
+    data-expected-height="40">
+  <img src="/images/green-100x50.png" style="height: 25px; min-height: 30px;"
+      data-expected-width="60" data-expected-height="30"/>
+</div>
+
+<div class="container min-content" data-expected-width="30"
+    data-expected-height="20">
+  <img src="/images/green-100x50.png" style="height: 25px; max-height: 10px;"
+      data-expected-width="20" data-expected-height="10"/>
+</div>
+
+<div class="container min-content" data-expected-width="50"
+    data-expected-height="35">
+  <img src="/images/green-100x50.png" style="height: 25px; max-width: 40px;"
+      data-expected-width="40" data-expected-height="25"/>
+</div>
+
+<div class="container min-content" data-expected-width="60"
+    data-expected-height="40">
+  <img src="/images/green-100x50.png"
+      style="height: 25px; min-height: 30px; max-width: 50px;"
+      data-expected-width="50" data-expected-height="30"/>
+</div>
+
+<div class="container min-content" data-expected-width="60"
+    data-expected-height="35">
+  <img src="/images/green-100x50.png" style="width: 50px;"
+      data-expected-width="50" data-expected-height="25"/>
+</div>
+
+<div class="container min-content" data-expected-width="70"
+    data-expected-height="40">
+  <img src="/images/green-100x50.png" style="max-width: 60px;"
+      data-expected-width="60" data-expected-height="30"/>
+</div>
+
+<div class="container min-content" data-expected-width="130"
+    data-expected-height="70">
+  <img src="/images/green-100x50.png" style="min-width: 120px;"
+      data-expected-width="120" data-expected-height="60"/>
+</div>
+
+<div class="container min-content" data-expected-width="90"
+    data-expected-height="50">
+  <img src="/images/green-100x50.png" style="width: 60px; min-width: 80px;"
+      data-expected-width="80" data-expected-height="40"/>
+</div>
+
+<div class="container min-content" data-expected-width="34"
+    data-expected-height="22">
+  <img src="/images/green-100x50.png" style="width: 24px; max-width: 40px;"
+      data-expected-width="24" data-expected-height="12"/>
+</div>
+
+<div class="container min-content" data-expected-width="130"
+    data-expected-height="35">
+  <img src="/images/green-100x50.png" style="width: 120px; max-height: 25px;"
+      data-expected-width="120" data-expected-height="25"/>
+</div>
+
+<div class="container min-content" data-expected-width="35"
+    data-expected-height="110">
+  <img src="/images/green-100x50.png" style="width: 25px; min-height: 100px;"
+      data-expected-width="25" data-expected-height="100"/>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-img-item-percent-max-height-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-img-item-percent-max-height-001.html
new file mode 100644
index 0000000000..d0d6d04dc7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-img-item-percent-max-height-001.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: % max height of grid items</title>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="% max-height of replaced grid items is respected">
+
+<p>Test passes if there is a filled green square.</p>
+
+<div style="display: grid; grid-template-rows: 200px;">
+  <img src="support/200x200-green.png" style="max-height: 50%;">
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-items-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-items-001.html
new file mode 100644
index 0000000000..09703be7f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-items-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Regular and anonymous grid items within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<meta name="assert" content="Checks that inline grid container children become grid items, and text that is directly contained inside the inline grid is wrapped in an anonymous grid item.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  .test-inline-grid-overlapping-green {
+    display: inline-grid;
+    font: 25px/1 Ahem;
+    color: green;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div class="test-inline-grid-overlapping-green">
+  <div>it</div>
+  em
+  <div>it</div>
+  em
+</div><div class="test-inline-grid-overlapping-green">
+  it
+  <span>em</span>
+  it
+  <span>em</span>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-items-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-items-002.html
new file mode 100644
index 0000000000..f95c441d7a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-items-002.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Children of grid items do not create new items within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<meta name="assert" content="Checks that the grid items do not split around blocks creating extra items within an inline grid.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  .test-inline-grid-overlapping-green {
+    display: inline-grid;
+    font: 25px/1 Ahem;
+    color: green;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div class="test-inline-grid-overlapping-green">
+  <div>
+    <div>it</div>
+    em
+  </div>
+  <div>
+    it
+    <div>em</div>
+  </div>
+</div><div class="test-inline-grid-overlapping-green">
+  <span>
+    <span>i</span>t
+  </span>
+  <span>
+    e<span>m</span>
+  </span>
+  <span>
+    <span>i</span>t
+  </span>
+  <span>
+    e<span>m</span>
+  </span>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-items-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-items-003.html
new file mode 100644
index 0000000000..8758a6a2d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-items-003.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with 'display:none' are not rendered within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  .test-inline-grid-overlapping-green {
+    display: inline-grid;
+    font: 50px/1 Ahem;
+    color: green;
+  }
+
+  .display-none-red {
+    display: none;
+    color: red;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div class="test-inline-grid-overlapping-green two-columns">
+  <span>it</span>
+  <span class="display-none-red">hidden</span>
+  <span>em</span>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-items-inline-blocks-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-items-inline-blocks-001.html
new file mode 100644
index 0000000000..7a7ac5cba9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-items-inline-blocks-001.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Paint order of grid items within an inline grid is the same as inline blocks</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="9.5 Z-axis Ordering: the z-index property">
+<link rel="help" href="http://www.w3.org/TR/CSS2/zindex.html#painting-order" title="E.2 Painting order">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #inline-grid {
+    display: inline-grid;
+  }
+
+  #reference-overlapped-red {
+    color: red;
+    font: 100px/1 Ahem;
+    grid-row: 1;
+    grid-column: 1;
+  }
+
+  #test-overlapping-green {
+    background-color: green;
+    width: 100px;
+    height: 100px;
+    grid-row: 1;
+    grid-column: 1;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="inline-grid">
+  <div id="reference-overlapped-red">R</div>
+  <div id="test-overlapping-green"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-001.html
new file mode 100644
index 0000000000..5367ada129
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-001.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  #inline-grid {
+    display: inline-grid;
+    font: 50px/1 Ahem;
+    grid-template-columns: auto auto;
+  }
+
+  #blue {
+    color: blue;
+  }
+
+  #yellow {
+    color: yellow;
+    order: 1;
+  }
+
+  #lime {
+    color: lime;
+    order: 5;
+  }
+
+  #magenta {
+    color: magenta;
+    order: 10;
+  }
+</style>
+<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="inline-grid">
+  <div id="magenta">M</div>
+  <div id="lime">L</div>
+  <div id="yellow">Y</div>
+  <div id="blue">B</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-002.html
new file mode 100644
index 0000000000..13f7c340fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-002.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  #inline-grid {
+    display: inline-grid;
+    font: 50px/1 Ahem;
+    grid-template-columns: auto auto;
+  }
+
+  #blue {
+    color: blue;
+    order: -10;
+  }
+
+  #yellow {
+    color: yellow;
+    order: -5;
+  }
+
+  #lime {
+    color: lime;
+    order: -1;
+  }
+
+  #magenta {
+    color: magenta;
+  }
+</style>
+<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="inline-grid">
+  <div id="magenta">M</div>
+  <div id="lime">L</div>
+  <div id="yellow">Y</div>
+  <div id="blue">B</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-003.html
new file mode 100644
index 0000000000..1cf446cf10
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-003.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  #inline-grid {
+    display: inline-grid;
+    font: 50px/1 Ahem;
+    grid-template-columns: auto auto;
+  }
+
+  #blue {
+    color: blue;
+    order: -5;
+  }
+
+  #yellow {
+    color: yellow;
+    order: -5;
+  }
+
+  #lime {
+    color: lime;
+  }
+
+  #magenta {
+    color: magenta;
+    order: 1;
+  }
+</style>
+<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="inline-grid">
+  <div id="lime">L</div>
+  <div id="magenta">M</div>
+  <div id="blue">B</div>
+  <div id="yellow">Y</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-004.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-004.html
new file mode 100644
index 0000000000..3e9d6aba87
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-004.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  #inline-grid {
+    display: inline-grid;
+    font: 50px/1 Ahem;
+    grid-template-columns: auto auto;
+  }
+
+  #blue {
+    color: blue;
+    order: 1;
+  }
+
+  #yellow {
+    color: yellow;
+    order: 1;
+  }
+
+  #lime {
+    color: lime;
+    order: 5;
+  }
+
+  #magenta {
+    color: magenta;
+    order: 5;
+  }
+</style>
+<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="inline-grid">
+  <div id="blue">B</div>
+  <div id="lime">L</div>
+  <div id="magenta">M</div>
+  <div id="yellow">Y</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-005.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-005.html
new file mode 100644
index 0000000000..2dd1b379e8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-auto-placement-005.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  #inline-grid {
+    display: inline-grid;
+    font: 50px/1 Ahem;
+    grid-template-columns: auto auto;
+  }
+
+  #blue {
+    color: blue;
+    order: -5;
+  }
+
+  #yellow {
+    color: yellow;
+    order: -1;
+  }
+
+  #lime {
+    color: lime;
+    order: 1;
+  }
+
+  #magenta {
+    color: magenta;
+    order: 5;
+  }
+</style>
+<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="inline-grid">
+  <div id="yellow">Y</div>
+  <div id="magenta">M</div>
+  <div id="blue">B</div>
+  <div id="lime">L</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-001.html
new file mode 100644
index 0000000000..00236a4c5c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-001.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #inline-grid {
+    display: inline-grid;
+    font: 100px/1 Ahem;
+  }
+
+  #test-item-overlapping-green {
+    color: green;
+    order: 1;
+  }
+
+  #reference-item-overlapped-red {
+    color: red;
+  }
+
+  .first-row-first-column {
+    grid-area: 1 / 1;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="inline-grid">
+  <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+  <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-002.html
new file mode 100644
index 0000000000..ffcb8c7134
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-002.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #inline-grid {
+    display: inline-grid;
+    font: 100px/1 Ahem;
+  }
+
+  #test-item-overlapping-green {
+    color: green;
+  }
+
+  #reference-item-overlapped-red {
+    color: red;
+    order: -1;
+  }
+
+  .first-row-first-column {
+    grid-area: 1 / 1;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="inline-grid">
+  <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+  <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-003.html
new file mode 100644
index 0000000000..e24cde00d6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-003.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #inline-grid {
+    display: inline-grid;
+    font: 100px/1 Ahem;
+  }
+
+  #test-item-overlapping-green {
+    color: green;
+    order: 10;
+  }
+
+  #reference-item-overlapped-red {
+    color: red;
+    order: 5;
+  }
+
+  .first-row-first-column {
+    grid-area: 1 / 1;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="inline-grid">
+  <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+  <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-004.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-004.html
new file mode 100644
index 0000000000..34cbce8fb1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-004.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #inline-grid {
+    display: inline-grid;
+    font: 100px/1 Ahem;
+  }
+
+  #test-item-overlapping-green {
+    color: green;
+    order: -5;
+  }
+
+  #reference-item-overlapped-red {
+    color: red;
+    order: -10;
+  }
+
+  .first-row-first-column {
+    grid-area: 1 / 1;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="inline-grid">
+  <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+  <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-005.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-005.html
new file mode 100644
index 0000000000..4ab1c4a465
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-order-property-painting-005.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'order' property affects grid items painting order within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #inline-grid {
+    display: inline-grid;
+    font: 100px/1 Ahem;
+  }
+
+  #test-item-overlapping-green {
+    color: green;
+    order: 1;
+  }
+
+  #reference-item-overlapped-red {
+    color: red;
+    order: -1;
+  }
+
+  .first-row-first-column {
+    grid-area: 1 / 1;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="inline-grid">
+  <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+  <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-001.html
new file mode 100644
index 0000000000..5fa16a50f7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-001.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #inline-grid {
+    display: inline-grid;
+    font: 100px/1 Ahem;
+  }
+
+  #test-item-overlapping-green {
+    color: green;
+    z-index: 1;
+  }
+
+  #reference-item-overlapped-red {
+    color: red;
+  }
+
+  .first-row-first-column {
+    grid-area: 1 / 1;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="inline-grid">
+  <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+  <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-002.html
new file mode 100644
index 0000000000..b6a59c0b22
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-002.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #inline-grid {
+    display: inline-grid;
+    font: 100px/1 Ahem;
+  }
+
+  #test-item-overlapping-green {
+    color: green;
+  }
+
+  #reference-item-overlapped-red {
+    color: red;
+    z-index: -1;
+  }
+
+  .first-row-first-column {
+    grid-area: 1 / 1;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="inline-grid">
+  <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+  <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-003.html
new file mode 100644
index 0000000000..85d8425e31
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-003.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #inline-grid {
+    display: inline-grid;
+    font: 100px/1 Ahem;
+  }
+
+  #test-item-overlapping-green {
+    color: green;
+    z-index: 10;
+  }
+
+  #reference-item-overlapped-red {
+    color: red;
+    z-index: 5;
+  }
+
+  .first-row-first-column {
+    grid-area: 1 / 1;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="inline-grid">
+  <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+  <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-004.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-004.html
new file mode 100644
index 0000000000..a1c84150a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-004.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #inline-grid {
+    display: inline-grid;
+    font: 100px/1 Ahem;
+  }
+
+  #test-item-overlapping-green {
+    color: green;
+    z-index: -5;
+  }
+
+  #reference-item-overlapped-red {
+    color: red;
+    z-index: -10;
+  }
+
+  .first-row-first-column {
+    grid-area: 1 / 1;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="inline-grid">
+  <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+  <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-005.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-005.html
new file mode 100644
index 0000000000..c7ac09bfd1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-005.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #inline-grid {
+    display: inline-grid;
+    font: 100px/1 Ahem;
+  }
+
+  #test-item-overlapping-green {
+    color: green;
+    z-index: 1;
+  }
+
+  #reference-item-overlapped-red {
+    color: red;
+    z-index: -1;
+  }
+
+  .first-row-first-column {
+    grid-area: 1 / 1;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="inline-grid">
+  <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+  <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-001.html
new file mode 100644
index 0000000000..dcea53174f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-001.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #inline-grid {
+    display: inline-grid;
+    font: 100px/1 Ahem;
+    grid-template-columns: 25px 25px 25px 25px;
+    grid-template-rows: 25px 25px 25px 25px;
+  }
+
+  #blue {
+    color: blue;
+    z-index: -1;
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  #yellow {
+    color: yellow;
+    grid-column: 2;
+    grid-row: 2;
+  }
+
+  #green {
+    color: green;
+    z-index: 1;
+    grid-column: 3;
+    grid-row: 3;
+  }
+</style>
+<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+<div id="inline-grid">
+  <div id="green">G</div>
+  <div id="yellow">Y</div>
+  <div id="blue">B</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-002.html
new file mode 100644
index 0000000000..6f360e8a6a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-002.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #inline-grid {
+    display: inline-grid;
+    font: 100px/1 Ahem;
+    grid-template-columns: 25px 25px 25px 25px;
+    grid-template-rows: 25px 25px 25px 25px;
+  }
+
+  #blue {
+    color: blue;
+    z-index: 1;
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  #yellow {
+    color: yellow;
+    z-index: 5;
+    grid-column: 2;
+    grid-row: 2;
+  }
+
+  #green {
+    color: green;
+    z-index: 10;
+    grid-column: 3;
+    grid-row: 3;
+  }
+</style>
+<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+<div id="inline-grid">
+  <div id="green">G</div>
+  <div id="yellow">Y</div>
+  <div id="blue">B</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-003.html
new file mode 100644
index 0000000000..10ace57ce4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-003.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #inline-grid {
+    display: inline-grid;
+    font: 100px/1 Ahem;
+    grid-template-columns: 25px 25px 25px 25px;
+    grid-template-rows: 25px 25px 25px 25px;
+  }
+
+  #blue {
+    color: blue;
+    z-index: -10;
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  #yellow {
+    color: yellow;
+    z-index: -5;
+    grid-column: 2;
+    grid-row: 2;
+  }
+
+  #green {
+    color: green;
+    z-index: -1;
+    grid-column: 3;
+    grid-row: 3;
+  }
+</style>
+<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+<div id="inline-grid">
+  <div id="green">G</div>
+  <div id="yellow">Y</div>
+  <div id="blue">B</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-004.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-004.html
new file mode 100644
index 0000000000..5c61954895
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-004.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #inline-grid {
+    display: inline-grid;
+    font: 100px/1 Ahem;
+    grid-template-columns: 25px 25px 25px 25px;
+    grid-template-rows: 25px 25px 25px 25px;
+  }
+
+  #blue {
+    color: blue;
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  #yellow {
+    color: yellow;
+    z-index: 1;
+    grid-column: 2;
+    grid-row: 2;
+  }
+
+  #green {
+    color: green;
+    z-index: 5;
+    grid-column: 3;
+    grid-row: 3;
+  }
+</style>
+<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+<div id="inline-grid">
+  <div id="green">G</div>
+  <div id="yellow">Y</div>
+  <div id="blue">B</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-005.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-005.html
new file mode 100644
index 0000000000..271f4c01b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-005.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #inline-grid {
+    display: inline-grid;
+    font: 100px/1 Ahem;
+    grid-template-columns: 25px 25px 25px 25px;
+    grid-template-rows: 25px 25px 25px 25px;
+  }
+
+  #blue {
+    color: blue;
+    z-index: -5;
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  #yellow {
+    color: yellow;
+    z-index: -1;
+    grid-column: 2;
+    grid-row: 2;
+  }
+
+  #green {
+    color: green;
+    grid-column: 3;
+    grid-row: 3;
+  }
+</style>
+<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+<div id="inline-grid">
+  <div id="green">G</div>
+  <div id="yellow">Y</div>
+  <div id="blue">B</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-006.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-006.html
new file mode 100644
index 0000000000..87ed91cd79
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-inline-z-axis-ordering-overlapped-items-006.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #inline-grid {
+    display: inline-grid;
+    font: 100px/1 Ahem;
+    grid-template-columns: 25px 25px 25px 25px;
+    grid-template-rows: 25px 25px 25px 25px;
+  }
+
+  #blue {
+    color: blue;
+    z-index: -1;
+    grid-column: 2;
+    grid-row: 2;
+    margin-top: -25px;
+    margin-left: -25px;
+  }
+
+  #yellow {
+    color: yellow;
+    grid-column: 4;
+    grid-row: 4;
+    margin-top: -50px;
+    margin-left: -50px;
+  }
+
+  #green {
+    color: green;
+    z-index: 1;
+    grid-column: 1;
+    grid-row: 1;
+    margin-top: 50px;
+    margin-left: 50px;
+  }
+</style>
+<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+<div id="inline-grid">
+  <div id="green">G</div>
+  <div id="yellow">Y</div>
+  <div id="blue">B</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-intrinsic-maximums-ref.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-intrinsic-maximums-ref.html
new file mode 100644
index 0000000000..b90f15b597
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-intrinsic-maximums-ref.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Grid: Grid item intrinsic maximum sizes</title>
+<link rel="author" title="Serio Villar" href="mailto:svillar@igalia.com">
+<link href="/css/support/grid.css" rel="stylesheet">
+<link href="/css/support/width-keyword-classes.css" rel="stylesheet">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+
+.item {
+    font: 10px/1 Ahem;
+    background: cyan;
+    grid-column: 1 / -1;
+}
+
+.abs {
+    width: 100%;
+    height: 5px;
+    position: absolute;
+}
+
+.grid {
+    border: 2px solid black;
+    display: grid;
+    position: relative;
+    padding-top: 10px;
+    margin-bottom: 10px;
+    width: 100px;
+    justify-items: start;
+}
+
+.float {
+    float: left;
+    width: 200px;
+}
+
+.col1 { grid-column: 1 / 2; background: orange; }
+.col2 { grid-column: 2 / 3; background: indigo; }
+.col3 { grid-column: 3 / 4; background: green; }
+
+</style>
+
+<div class="float">
+
+<div class="grid" style="grid-template: 20px / 35px 5px;">
+    <div class="item" style="min-width: 15px;">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+</div>
+
+<div class="grid" style="grid-template: 20px / 50px 5px;">
+    <div class="item" style="min-width: 55px;">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+</div>
+
+<div class="grid" style="grid-template: 20px / 85px 5px;">
+    <div class="item min-width-max-content">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+</div>
+
+<div class="grid" style="grid-template: 20px / 5px 85px;">
+    <div class="item" style="min-width: 15px;">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+</div>
+
+<div class="grid" style="grid-template: 20px / 5px 85px;">
+    <div class="item" style="min-width: 55px;">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+</div>
+
+<div class="grid" style="grid-template: 20px / 5px 85px;">
+    <div class="item min-width-max-content">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+</div>
+
+</div>
+
+<div class="float">
+
+<div class="grid" style="grid-template: 20px / 17.5px 5px 67.5px;">
+    <div class="item" style="min-width: 15px;">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+    <div class="abs col3"></div>
+</div>
+
+<div class="grid" style="grid-template: 20px / 25px 5px 60px;">
+    <div class="item" style="min-width: 55px;">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+    <div class="abs col3"></div>
+</div>
+
+<div class="grid" style="grid-template: 20px / calc(85px / 2) 5px calc(85px / 2);">
+    <div class="item min-width-max-content">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+    <div class="abs col3"></div>
+</div>
+
+<div class="grid" style="grid-template: 20px / 77.5px 5px 17.5px;">
+    <div class="item" style="min-width: 15px;">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+    <div class="abs col3"></div>
+</div>
+
+<div class="grid" style="grid-template: 20px / 70px 5px 25px;">
+    <div class="item" style="min-width: 55px;">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+    <div class="abs col3"></div>
+</div>
+
+<div class="grid" style="grid-template: 20px / calc(105px/2) 5px calc(85px/2);" style="justify-items: start">
+    <div class="item min-width-max-content">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+    <div class="abs col3"></div>
+</div>
+
+</div>
+
+<div class="float">
+
+<div class="grid" style="grid-template: 20px / calc(10px + (90px - 15px)/2) 5px calc((90px - 15px)/2 + 10px);">
+    <div class="item" style="min-width: 15px;">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+    <div class="abs col3"></div>
+</div>
+
+<div class="grid" style="grid-template: 20px / calc(50px + (90px - 55px)/2) 5px calc((90px - 55px)/2 + 10px);">
+    <div class="item" style="min-width: 55px;">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+    <div class="abs col3"></div>
+</div>
+
+<div class="grid" style="grid-template: 20px / 85px 5px 10px;">
+    <div class="item min-width-max-content">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+    <div class="abs col3"></div>
+</div>
+
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-intrinsic-maximums.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-intrinsic-maximums.html
new file mode 100644
index 0000000000..5b244d3c11
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-intrinsic-maximums.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Grid: Grid item intrinsic maximum sizes</title>
+<link rel="author" title="Serio Villar" href="mailto:svillar@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items">
+<link href="/css/support/grid.css" rel="stylesheet">
+<link href="/css/support/width-keyword-classes.css" rel="stylesheet">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link rel="match" href="grid-intrinsic-maximums-ref.html">
+
+<style>
+
+.item {
+    font: 10px/1 Ahem;
+    background: cyan;
+    grid-column: 1 / -1;
+}
+
+.abs {
+    width: 100%;
+    height: 5px;
+    position: absolute;
+}
+
+.grid {
+    border: 2px solid black;
+    display: grid;
+    position: relative;
+    padding-top: 10px;
+    margin-bottom: 10px;
+    width: 100px;
+    justify-items: start;
+}
+
+.float {
+    float: left;
+    width: 200px;
+}
+
+.col1 { grid-column: 1 / 2; background: orange; }
+.col2 { grid-column: 2 / 3; background: indigo; }
+.col3 { grid-column: 3 / 4; background: green; }
+
+.gridMinContent { grid-template: 20px / minmax(0px, min-content) 5px; }
+.gridMaxContent { grid-template: 20px / 5px minmax(0px, max-content); }
+.gridMinMaxContent { grid-template: 20px / minmax(0px, min-content) 5% minmax(0px, max-content); }
+.gridAutoMinContent { grid-template: 20px / minmax(0px, auto) 5px minmax(0px, min-content); }
+.gridFitContentAuto { grid-template: 20px / fit-content(100px) 5px minmax(0px, auto); }
+
+</style>
+
+<div class="float">
+
+<div class="grid gridMinContent">
+    <div class="item" style="min-width: 15px;">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+</div>
+
+<div class="grid gridMinContent">
+    <div class="item" style="min-width: 55px;">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+</div>
+
+<div class="grid gridMinContent">
+    <div class="item min-width-max-content">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+</div>
+
+<div class="grid gridMaxContent">
+    <div class="item" style="min-width: 15px;">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+</div>
+
+<div class="grid gridMaxContent">
+    <div class="item" style="min-width: 55px;">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+</div>
+
+<div class="grid gridMaxContent">
+    <div class="item min-width-max-content">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+</div>
+
+</div>
+
+<div class="float">
+
+<div class="grid gridMinMaxContent">
+    <div class="item" style="min-width: 15px;">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+    <div class="abs col3"></div>
+</div>
+
+<div class="grid gridMinMaxContent">
+    <div class="item" style="min-width: 55px;">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+    <div class="abs col3"></div>
+</div>
+
+<div class="grid gridMinMaxContent">
+    <div class="item min-width-max-content">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+    <div class="abs col3"></div>
+</div>
+
+<div class="grid gridAutoMinContent">
+    <div class="item" style="min-width: 15px;">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+    <div class="abs col3"></div>
+</div>
+
+<div class="grid gridAutoMinContent">
+    <div class="item" style="min-width: 55px;">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+    <div class="abs col3"></div>
+</div>
+
+<div class="grid gridAutoMinContent" style="justify-items: start">
+    <div class="item min-width-max-content">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+    <div class="abs col3"></div>
+</div>
+
+</div>
+
+<div class="float">
+
+<div class="grid gridFitContentAuto">
+    <div class="item" style="min-width: 15px;">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+    <div class="abs col3"></div>
+</div>
+
+<div class="grid gridFitContentAuto">
+    <div class="item" style="min-width: 55px;">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+    <div class="abs col3"></div>
+</div>
+
+<div class="grid gridFitContentAuto">
+    <div class="item min-width-max-content">XXXX XXXX</div>
+    <div class="abs col1"></div>
+    <div class="abs col2"></div>
+    <div class="abs col3"></div>
+</div>
+
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-containing-block-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-containing-block-001.html
new file mode 100644
index 0000000000..1dca0dcaa1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-containing-block-001.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid item sizing</title>
+<link rel="author" title="Tomek Wytrebowicz" href="mailto:tomalecpub@gmail.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4. Grid Items">
+<meta name="assert" content="A grid item is sized within the containing block defined by its grid area">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+    #grid {
+        display: grid;
+        width: 200px;
+        height: 200px;
+        grid-template-rows: 100px;
+        grid-template-columns: 100px;
+    }
+
+    #test-overlapped-red {
+        background-color: red;
+        width: 100%;
+        height: 100%;
+    }
+
+    #test-overlapping-green {
+        background-color: green;
+        width: 100px;
+        height: 100px;
+    }
+</style>
+<body>
+    <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+    <div id="grid">
+        <div id="test-overlapped-red">
+            <div id="test-overlapping-green"></div>
+        </div>
+    </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-containing-block-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-containing-block-002.html
new file mode 100644
index 0000000000..664e069103
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-containing-block-002.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid item sizing</title>
+<link rel="author" title="Tomek Wytrebowicz" href="mailto:tomalecpub@gmail.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4. Grid Items">
+<meta name="assert" content="A grid item is sized within the containing block defined by its grid area">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+    #grid {
+        display: grid;
+        width: 200px;
+        height: 200px;
+        grid-template-rows: 50%;
+        grid-template-columns: 50%;
+    }
+
+    #test-overlapped-red {
+        background-color: red;
+        width: 100%;
+        height: 100%;
+    }
+
+    #test-overlapping-green {
+        background-color: green;
+        width: 100px;
+        height: 100px;
+    }
+</style>
+<body>
+    <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+    <div id="grid">
+        <div id="test-overlapped-red">
+            <div id="test-overlapping-green"></div>
+        </div>
+    </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-containing-block-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-containing-block-003.html
new file mode 100644
index 0000000000..0194f3cf6e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-containing-block-003.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid item sizing</title>
+<link rel="author" title="Tomek Wytrebowicz" href="mailto:tomalecpub@gmail.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4. Grid Items">
+<meta name="assert" content="A grid item is sized within the containing block defined by its grid area">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+    #grid {
+        display: grid;
+        width: 200px;
+        height: 200px;
+        grid-template-rows: 1fr 1fr;
+        grid-template-columns: 1fr 1fr;
+    }
+
+    #test-overlapped-red {
+        background-color: red;
+        width: 100%;
+        height: 100%;
+    }
+
+    #test-overlapping-green {
+        background-color: green;
+        width: 100px;
+        height: 100px;
+    }
+</style>
+<body>
+    <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+    <div id="grid">
+        <div id="test-overlapped-red">
+            <div id="test-overlapping-green"></div>
+        </div>
+    </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-containing-block-004.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-containing-block-004.html
new file mode 100644
index 0000000000..b36fbb2bbc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-containing-block-004.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid item sizing in a positioned grid container</title>
+<link rel="author" title="Tomek Wytrebowicz" href="mailto:tomalecpub@gmail.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4. Grid Items">
+<meta name="assert" content="A grid item is sized within the containing block defined by its grid area that intersects flexible tracks">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+    #grid {
+        display: grid;
+        position: absolute;
+        height: 200px;
+        width: 200px;
+        grid-template-rows: 1fr 1fr;
+        grid-template-columns: 1fr 1fr;
+    }
+
+    #test-item-overlapped-red {
+        background-color: red;
+        width: 100%;
+        height: 100%;
+    }
+    #reference-overlapping-green{
+        background-color: green;
+        width: 100px;
+        height: 100px;
+    }
+</style>
+<body>
+    <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+    <div id="grid">
+        <div id="test-item-overlapped-red">
+            <div id="reference-overlapping-green">
+            </div>
+        </div>
+    </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-dynamic-min-contribution-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-dynamic-min-contribution-001.html
new file mode 100644
index 0000000000..c4ced6b2a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-dynamic-min-contribution-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Grid Layout Test: dynamic minimum contribution</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-contribution">
+<meta name="assert" content="This test checks that grid items are sized correctly when their minimum contribution is dynamically changed with JavaScript." />
+<style>
+#grid {
+  display: grid;
+  height: 100px;
+  width: 100px;
+}
+</style>
+<div id="log"></div>
+<div id="grid">
+  <div id="item"></div>
+</div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+const tests = [
+  ["auto", "100px"],
+  ["0%", "100px"],
+  ["100%", "100px"],
+  ["200%", "200px"],
+  ["300%", "300px"],
+  ["400px", "400px"],
+  ["500px", "500px"],
+];
+const item = document.getElementById("item");
+for (let [minSize, expectedSize] of tests) {
+  test(() => {
+    item.style.minHeight = item.style.minWidth = minSize;
+    let cs = getComputedStyle(item);
+    assert_equals(cs.height, expectedSize, "height");
+    assert_equals(cs.width, expectedSize, "width");
+  }, `Minimum size: ${minSize}`);
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-flex-container-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-flex-container-001.html
new file mode 100644
index 0000000000..56c999c558
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-flex-container-001.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid item which is also a flex container</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1">
+<meta name="assert" content="Checks that the grid is updated when the contents of the grid item flex container change their size dynamically.">
+<style>
+.grid {
+  display: grid;
+  width: 100px;
+  background: cyan;
+}
+.flex {
+  display: flex;
+  min-height: 0;
+  height: 100%;
+}
+.height200 {
+  height: 200px;
+}
+.height100 {
+  height: 100px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<div id="log"></div>
+
+<pre>grid-template-rows: minmax(auto, auto);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, auto);" data-expected-height="100" >
+  <div class="flex">
+    <div>
+      <div class="height200"></div>
+    </div>
+  </div>
+</div>
+
+<pre>grid-template-rows: minmax(min-content, auto);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(min-content, auto);" data-expected-height="100">
+  <div class="flex">
+    <div>
+      <div class="height200"></div>
+    </div>
+  </div>
+</div>
+
+<pre>grid-template-rows: minmax(max-content, auto);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(max-content, auto);" data-expected-height="100">
+  <div class="flex">
+    <div>
+      <div class="height200"></div>
+    </div>
+  </div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, min-content);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, min-content);" data-expected-height="100">
+  <div class="flex">
+    <div>
+      <div class="height200"></div>
+    </div>
+  </div>
+</div>
+
+<pre>grid-template-rows: minmax(min-content, min-content);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(min-content, min-content);" data-expected-height="100">
+  <div class="flex">
+    <div>
+      <div class="height200"></div>
+    </div>
+  </div>
+</div>
+
+<pre>grid-template-rows: minmax(max-content, min-content);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(max-content, min-content);" data-expected-height="100">
+  <div class="flex">
+    <div>
+      <div class="height200"></div>
+    </div>
+  </div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, max-content);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, max-content);" data-expected-height="100">
+  <div class="flex">
+    <div>
+      <div class="height200"></div>
+    </div>
+  </div>
+</div>
+
+<pre>grid-template-rows: minmax(min-content, max-content);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(min-content, max-content);" data-expected-height="100">
+  <div class="flex">
+    <div>
+      <div class="height200"></div>
+    </div>
+  </div>
+</div>
+
+<pre>grid-template-rows: minmax(max-content, max-content);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(max-content, max-content);" data-expected-height="100">
+  <div class="flex">
+    <div>
+      <div class="height200"></div>
+    </div>
+  </div>
+</div>
+
+<script>
+// Force layout
+document.body.offsetLeft;
+
+// Change content sizes
+for (let el of document.querySelectorAll(".height200")) {
+  el.className = "height100";
+}
+
+// Check final layout
+checkLayout('.grid');
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-inline-contribution-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-inline-contribution-001.html
new file mode 100644
index 0000000000..ebed26b332
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-inline-contribution-001.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-overview">
+<meta name="assert" content="Tests the min-content contribution is using the correct block-size.">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="display: inline-grid; background: green; height: 100px; grid-template-rows: 50px;">
+  <div style="height: 100%;"> <!-- This height should resolve against 50px - not 100px -->
+    <canvas width="20" height="10" style="height: 100%;">
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-inline-contribution-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-inline-contribution-002.html
new file mode 100644
index 0000000000..bcf4f5f867
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-inline-contribution-002.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-overview">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6356#issuecomment-862800005">
+<meta name="assert" content="Tests the min-content contribution is re-resolved during a 2nd pass.">
+<!--
+
+"
+ Then, if the min-content contribution of any grid item has changed based on
+ the row sizes and alignment calculated in step 2, re-resolve the sizes of the
+ grid columns with the new min-content and max-content contributions (once
+ only).
+"
+
+In this testcase initially the row size is indefinite, then resolves to 100px.
+Using this information we re-resolve the columns, resulting in 100px for the
+first column.
+
+-->
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="display: grid; width: 0; grid-template: auto / auto auto;">
+  <div style="background: green; height: 100%;">
+    <canvas width="10" height="10" style="height: 100%;">
+  </div>
+  <div>
+    <div style="height: 100px;"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-inline-contribution-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-inline-contribution-003.html
new file mode 100644
index 0000000000..8432c1d5e4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-inline-contribution-003.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-overview">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6356#issuecomment-862800005">
+<meta name="assert" content="Tests the min-content contribution is re-resolved during a 2nd pass.">
+<!--
+
+"
+ Then, if the min-content contribution of any grid item has changed based on
+ the row sizes and alignment calculated in step 2, re-resolve the sizes of the
+ grid columns with the new min-content and max-content contributions (once
+ only).
+"
+
+In this testcase initially the row size is indefinite, then resolves to 100px.
+Using this information we re-resolve the columns, resulting in 100px for the
+first column.
+
+-->
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="display: grid; width: 0; grid-template: auto / auto auto;">
+  <div style="background: green;"> <!-- Has stretch alignment which the child should resolve against. -->
+    <canvas width="10" height="10" style="height: 100%;">
+  </div>
+  <div>
+    <div style="height: 100px;"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-margins-and-writing-modes-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-margins-and-writing-modes-001-ref.html
new file mode 100644
index 0000000000..86553ef6f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-margins-and-writing-modes-001-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<link href="/css/support/grid.css" rel="stylesheet">
+<link href="/fonts/ahem.css"  rel="stylesheet"/>
+<style>
+.block {
+    background-color: grey;
+    width: 80px;
+    height: 80px;
+    position: relative;
+    margin-bottom: 5px;
+    border: 1px solid;
+}
+
+.item {
+    font: 15px/1 Ahem;
+    background-color: green;
+    width: 40px;
+    height: 20px;
+    margin: 4px 8px 12px 16px;
+}
+</style>
+
+<body>
+    <div class="block">
+        <div class="item">X</div>
+    </div>
+    <div class="block verticalRL">
+        <div class="item">X</div>
+    </div>
+    <div class="block verticalLR">
+        <div class="item">X</div>
+    </div>
+    <div class="block directionRTL">
+        <div class="item">X</div>
+    </div>
+    <div class="block directionRTL verticalRL">
+        <div class="item">X</div>
+    </div>
+    <div class="block directionRTL verticalLR">
+        <div class="item">X</div>
+    </div>
+</body>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-margins-and-writing-modes-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-margins-and-writing-modes-001.html
new file mode 100644
index 0000000000..5209940a96
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-margins-and-writing-modes-001.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Grid: Grid items and logical margins</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-column">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-row">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
+<link rel="match" href="grid-item-margins-and-writing-modes-001-ref.html">
+<meta name="assert" content="This test ensures that the border, margin, and padding
+combining with RTL direction and different writing-modes generate the proper layout."/>
+<link href="/css/support/grid.css" rel="stylesheet">
+<link href="/fonts/ahem.css"  rel="stylesheet"/>
+<style>
+.grid {
+    grid-template-columns: 80px;
+}
+
+.block {
+    background-color: grey;
+    width: 80px;
+    height: 80px;
+    position: relative;
+    margin-bottom: 5px;
+    border: 1px solid;
+}
+
+.item {
+    font: 15px/1 Ahem;
+    background-color: green;
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+    width: 40px;
+    height: 20px;
+    margin: 4px 8px 12px 16px;
+}
+</style>
+
+<body>
+    <div class="grid block">
+        <div class="item">X</div>
+    </div>
+    <div class="grid block verticalRL">
+        <div class="item">X</div>
+    </div>
+    <div class="grid block verticalLR">
+        <div class="item">X</div>
+    </div>
+    <div class="grid block directionRTL">
+        <div class="item">X</div>
+    </div>
+    <div class="grid block directionRTL verticalRL">
+        <div class="item">X</div>
+    </div>
+    <div class="grid block directionRTL verticalLR">
+        <div class="item">X</div>
+    </div>
+</body>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-min-auto-size-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-min-auto-size-001.html
new file mode 100644
index 0000000000..f50e9ef312
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-min-auto-size-001.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<title>CSS Grid Test: computed style for auto minimum size</title>
+<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org" />
+<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  .grid { display: grid }
+  .none { display: none }
+  .min-wh {
+    min-width: auto;
+    min-height: auto;
+  }
+  .contents { display: contents }
+</style>
+<div class="grid">
+  <div class="min-wh"></div>
+</div>
+<div class="none">
+  <div class="grid">
+    <div class="min-wh"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="contents">
+    <div class="min-wh"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="min-wh none"></div>
+</div>
+<script>
+  const tests = [
+    { description: "Computed min-width/min-height of specified auto for grid item.", computed: "auto" },
+    { description: "Computed min-width/min-height of specified auto inside display:none which would otherwise have been a grid item.", computed: "0px" },
+    { description: "Computed min-width/min-height of specified auto for grid item inside display:contents.", computed: "auto" },
+    { description: "Computed min-width/min-height of specified auto with display:none which would otherwise have been a grid item.", computed: "0px" }
+  ];
+
+  const testElements = document.querySelectorAll(".min-wh");
+  let testNo = 0;
+  for (let testElement of testElements) {
+    test(() => {
+      assert_equals(getComputedStyle(testElement).minWidth, tests[testNo].computed);
+      assert_equals(getComputedStyle(testElement).minHeight, tests[testNo].computed);
+    }, tests[testNo].description);
+    testNo++;
+  }
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-overflow-auto-max-height-percentage-ref.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-overflow-auto-max-height-percentage-ref.html
new file mode 100644
index 0000000000..96a3ca1d50
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-overflow-auto-max-height-percentage-ref.html
@@ -0,0 +1,62 @@
+<!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: Testcase for bug 1526567</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;
+}
+
+.webconsole-app {
+  display: grid;
+}
+
+.sidebar {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  background: blue;
+}
+
+.controlled {
+  display: flex;
+  overflow: auto;
+}
+
+.sidebar-wrapper {
+  display: grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 50px 1fr;
+  overflow: hidden;
+}
+
+.sidebar-contents {
+  grid-row: 2 / 3;
+  overflow: auto;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="webconsole-app">
+  <div class="sidebar">
+    <div class="controlled">
+      <div class="sidebar-wrapper">
+        <div></div>
+        <div class="sidebar-contents">
+          <div style="height:400px; background: grey"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-overflow-auto-max-height-percentage.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-overflow-auto-max-height-percentage.html
new file mode 100644
index 0000000000..62273b87e4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-overflow-auto-max-height-percentage.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>Testcase for bug 1526567</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#behave-auto">
+  <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1526567">
+  <link rel="match" href="grid-item-overflow-auto-max-height-percentage-ref.html">
+  <meta name="assert" content="Check that max-height:100% has no effect on a grid item's max-content contribution, since the percentage basis is indefinite in this case.">
+  <style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.webconsole-app {
+  display: grid;
+  height: 200px;
+}
+
+.sidebar {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  height: 100%;
+  background: blue;
+}
+
+.controlled {
+  display: flex;
+  overflow: auto;
+}
+
+.sidebar-wrapper {
+  display: grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 50px 1fr;
+  overflow: hidden;
+}
+
+.sidebar-contents {
+  grid-row: 2 / 3;
+  overflow: auto;
+  max-height: 100%;
+}
+
+  </style>
+</head>
+<body>
+
+<div class="webconsole-app">
+  <div class="sidebar">
+    <div class="controlled">
+      <div class="sidebar-wrapper">
+        <div></div>
+        <div class="sidebar-contents">
+          <div style="height:400px; background: grey"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-001-ref.html
new file mode 100644
index 0000000000..1090871575
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-001-ref.html
@@ -0,0 +1,312 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Reference: item [min-|max-]*[width|height] percentages</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  height: 10px;
+  width: 10px;
+  grid: 1px auto 2px / 3px auto 4px;
+  border: solid 1px;
+  margin: 0 20px 20px 0;
+  place-items: start;
+}
+.item {
+  background: cyan;
+  grid-area: 2/2;
+  height: 30px;
+  width: 30px;
+}
+.content {
+  height: 30px;
+  width: 30px;
+}
+.min {
+  height: 7px;
+  width: 3px;
+}
+.min:not(.max):not(.size) {
+  height: 30px;
+  width: 30px;
+}
+
+.hl  .item { writing-mode: horizontal-tb; direction:ltr; }
+.hr  .item { writing-mode: horizontal-tb; direction:rtl; }
+.vrl .item { writing-mode: vertical-rl; direction:ltr; }
+.vrr .item { writing-mode: vertical-rl; direction:rtl; }
+.vll .item { writing-mode: vertical-lr; direction:ltr; }
+.vlr .item { writing-mode: vertical-lr; direction:rtl; }
+.sll .item { writing-mode: sideways-lr; direction:ltr; }
+.slr .item { writing-mode: sideways-lr; direction:rtl; }
+
+</style>
+<div class="hl">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="vrl">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="vrr">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="vll">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="vlr">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="slr">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="srl">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-001.html
new file mode 100644
index 0000000000..97532e495c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-001.html
@@ -0,0 +1,318 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: item [min-|max-]*[width|height] percentages</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1526567">
+<link rel="match" href="grid-item-percentage-sizes-001-ref.html">
+<meta name="assert" content="Checks that item [min-|max-]*[width|height] percentages are resolved correctly in span=1 auto tracks.">
+<style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  height: 10px;
+  width: 10px;
+  grid: 1px auto 2px / 3px auto 4px;
+  border: solid 1px;
+  margin: 0 20px 20px 0;
+  place-items: start;
+}
+.item {
+  background: cyan;
+  grid-area: 2/2;
+}
+.content {
+  height: 30px;
+  width: 30px;
+}
+.min {
+  min-height: 100%;
+  min-width: 100%;
+}
+.max {
+  max-height: 100%;
+  max-width: 100%;
+}
+.size {
+  height: 100%;
+  width: 100%;
+}
+
+.hl  .item { writing-mode: horizontal-tb; direction:ltr; }
+.hr  .item { writing-mode: horizontal-tb; direction:rtl; }
+.vrl .item { writing-mode: vertical-rl; direction:ltr; }
+.vrr .item { writing-mode: vertical-rl; direction:rtl; }
+.vll .item { writing-mode: vertical-lr; direction:ltr; }
+.vlr .item { writing-mode: vertical-lr; direction:rtl; }
+.sll .item { writing-mode: sideways-lr; direction:ltr; }
+.slr .item { writing-mode: sideways-lr; direction:rtl; }
+
+</style>
+<div class="hl">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="vrl">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="vrr">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="vll">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="vlr">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="slr">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="srl">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-002-ref.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-002-ref.html
new file mode 100644
index 0000000000..568642631b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-002-ref.html
@@ -0,0 +1,312 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Reference: item [min-|max-]*[width|height] percentages</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  height: 10px;
+  width: 10px;
+  grid: 1px auto 2px 3px / 3px auto 4px 2px;
+  border: solid 1px;
+  margin: 0 20px 20px 0;
+  place-items: start;
+}
+.item {
+  background: cyan;
+  grid-area: 2/2/span 2/span 2;
+  height: 30px;
+  width: 30px;
+}
+.content {
+  height: 30px;
+  width: 30px;
+}
+.min {
+  height: 6px;
+  width: 5px;
+}
+.min:not(.max):not(.size) {
+  height: 30px;
+  width: 30px;
+}
+
+.hl  .item { writing-mode: horizontal-tb; direction:ltr; }
+.hr  .item { writing-mode: horizontal-tb; direction:rtl; }
+.vrl .item { writing-mode: vertical-rl; direction:ltr; }
+.vrr .item { writing-mode: vertical-rl; direction:rtl; }
+.vll .item { writing-mode: vertical-lr; direction:ltr; }
+.vlr .item { writing-mode: vertical-lr; direction:rtl; }
+.sll .item { writing-mode: sideways-lr; direction:ltr; }
+.slr .item { writing-mode: sideways-lr; direction:rtl; }
+
+</style>
+<div class="hl">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="vrl">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="vrr">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="vll">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="vlr">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="slr">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="srl">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-002.html
new file mode 100644
index 0000000000..2ceba537f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-002.html
@@ -0,0 +1,318 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: item [min-|max-]*[width|height] percentages</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1526567">
+<link rel="match" href="grid-item-percentage-sizes-002-ref.html">
+<meta name="assert" content="Checks that item [min-|max-]*[width|height] percentages are resolved correctly in span=2 auto tracks.">
+<style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  height: 10px;
+  width: 10px;
+  grid: 1px auto 2px 3px / 3px auto 4px 2px;
+  border: solid 1px;
+  margin: 0 20px 20px 0;
+  place-items: start;
+}
+.item {
+  background: cyan;
+  grid-area: 2/2/span 2/span 2;
+}
+.content {
+  height: 30px;
+  width: 30px;
+}
+.min {
+  min-height: 100%;
+  min-width: 100%;
+}
+.max {
+  max-height: 100%;
+  max-width: 100%;
+}
+.size {
+  height: 100%;
+  width: 100%;
+}
+
+.hl  .item { writing-mode: horizontal-tb; direction:ltr; }
+.hr  .item { writing-mode: horizontal-tb; direction:rtl; }
+.vrl .item { writing-mode: vertical-rl; direction:ltr; }
+.vrr .item { writing-mode: vertical-rl; direction:rtl; }
+.vll .item { writing-mode: vertical-lr; direction:ltr; }
+.vlr .item { writing-mode: vertical-lr; direction:rtl; }
+.sll .item { writing-mode: sideways-lr; direction:ltr; }
+.slr .item { writing-mode: sideways-lr; direction:rtl; }
+
+</style>
+<div class="hl">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="vrl">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="vrr">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="vll">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="vlr">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="slr">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="srl">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-003-ref.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-003-ref.html
new file mode 100644
index 0000000000..41070a8f01
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-003-ref.html
@@ -0,0 +1,316 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Reference: item [min-|max-]*[width|height] calc() percentages</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  height: 10px;
+  width: 10px;
+  grid: 1px auto 2px / 3px auto 4px;
+  border: solid 1px;
+  margin: 0 20px 20px 0;
+  place-items: start;
+}
+.item {
+  background: cyan;
+  grid-area: 2/2;
+  height: 30px;
+  width: 30px;
+}
+.content {
+  height: 30px;
+  width: 30px;
+}
+.min {
+  height: 9px;
+  width: 5px;
+}
+.min:not(.max):not(.size) {
+  height: 30px;
+  width: 30px;
+}
+.size:not(.min) {
+  height: 32px;
+  width: 32px;
+}
+
+.hl  .item { writing-mode: horizontal-tb; direction:ltr; }
+.hr  .item { writing-mode: horizontal-tb; direction:rtl; }
+.vrl .item { writing-mode: vertical-rl; direction:ltr; }
+.vrr .item { writing-mode: vertical-rl; direction:rtl; }
+.vll .item { writing-mode: vertical-lr; direction:ltr; }
+.vlr .item { writing-mode: vertical-lr; direction:rtl; }
+.sll .item { writing-mode: sideways-lr; direction:ltr; }
+.slr .item { writing-mode: sideways-lr; direction:rtl; }
+
+</style>
+<div class="hl">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="vrl">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="vrr">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="vll">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="vlr">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="slr">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="srl">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-003.html
new file mode 100644
index 0000000000..fccf4fe0a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-percentage-sizes-003.html
@@ -0,0 +1,318 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: item [min-|max-]*[width|height] calc() percentages</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1526567">
+<link rel="match" href="grid-item-percentage-sizes-003-ref.html">
+<meta name="assert" content="Checks that item [min-|max-]*[width|height] percentages are resolved correctly in span=1 auto tracks.">
+<style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.grid {
+  display: inline-grid;
+  height: 10px;
+  width: 10px;
+  grid: 1px auto 2px / 3px auto 4px;
+  border: solid 1px;
+  margin: 0 20px 20px 0;
+  place-items: start;
+}
+.item {
+  background: cyan;
+  grid-area: 2/2;
+}
+.content {
+  height: 30px;
+  width: 30px;
+}
+.min {
+  min-height: calc(2px + 100%);
+  min-width: calc(2px + 100%);
+}
+.max {
+  max-height: calc(2px + 100%);
+  max-width: calc(2px + 100%);
+}
+.size {
+  height: calc(2px + 100%);
+  width: calc(2px + 100%);
+}
+
+.hl  .item { writing-mode: horizontal-tb; direction:ltr; }
+.hr  .item { writing-mode: horizontal-tb; direction:rtl; }
+.vrl .item { writing-mode: vertical-rl; direction:ltr; }
+.vrr .item { writing-mode: vertical-rl; direction:rtl; }
+.vll .item { writing-mode: vertical-lr; direction:ltr; }
+.vlr .item { writing-mode: vertical-lr; direction:rtl; }
+.sll .item { writing-mode: sideways-lr; direction:ltr; }
+.slr .item { writing-mode: sideways-lr; direction:rtl; }
+
+</style>
+<div class="hl">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="vrl">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="vrr">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="vll">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="vlr">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="slr">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
+
+<div class="srl">
+<div class="grid">
+  <div class="item max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item max size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min size">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max">
+    <div class="content"></div>
+  </div>
+</div>
+<div class="grid">
+  <div class="item min max size">
+    <div class="content"></div>
+  </div>
+</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-rel-pos-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-rel-pos-001-ref.html
new file mode 100644
index 0000000000..a6305e560e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-rel-pos-001-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>Reference: Rel.pos. grid item with style change.</title>
+<link rel="author" title="James0x57" href="mailto:James0x57@gmail.com">
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+.grid {
+  margin: 40px;
+  display: grid;
+  grid: auto / repeat(3,100px);
+  grid-gap: 20px;
+}
+span, even {
+  position: relative;
+  min-height: 20px;
+  background: grey;
+  left: 0px;
+}
+.offset even {
+  left: 50%;
+}
+
+</style>
+
+
+<div class="grid offset">
+  <span></span><span></span><span></span>
+  <even></even><even></even><even></even>
+  <span></span><span></span><span></span>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-rel-pos-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-rel-pos-001.html
new file mode 100644
index 0000000000..d72df4126d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-rel-pos-001.html
@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Rel.pos. grid item with style change.</title>
+<link rel="author" title="James0x57" href="mailto:James0x57@gmail.com">
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="Grid Items">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1576355">
+<link rel="match" href="grid-item-rel-pos-001-ref.html">
+<meta name="assert" content="Checks that the rel.pos. grid items are positioned correctly after a 'left' style change.">
+<style>
+.grid {
+  margin: 40px;
+  display: grid;
+  grid: auto / repeat(3,100px);
+  grid-gap: 20px;
+}
+span, even {
+  position: relative;
+  min-height: 20px;
+  background: grey;
+  left: 0px;
+}
+.offset even {
+  left: 50%;
+}
+
+</style>
+
+
+<div class="grid offset">
+  <span></span><span></span><span></span>
+  <even></even><even></even><even></even>
+  <span></span><span></span><span></span>
+</div>
+
+<script>
+  document.body.offsetHeight;
+  let grid = document.querySelector('.grid');
+  grid.classList.remove('offset')
+  document.body.offsetHeight;
+  grid.classList.add('offset')
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-rel-pos-002-ref.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-rel-pos-002-ref.html
new file mode 100644
index 0000000000..643b80e1ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-rel-pos-002-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>Reference: Rel.pos. centered grid item with style change.</title>
+<link rel="author" title="James0x57" href="mailto:James0x57@gmail.com">
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<style>
+.grid {
+  margin: 40px;
+  display: grid;
+  grid: auto / repeat(3,100px);
+  grid-gap: 20px;
+}
+span, even {
+  position: relative;
+  min-height: 20px;
+  background: grey;
+  left: 0px;
+  width: 30px;
+  justify-self: center;
+}
+.offset even {
+  left: 20%;
+}
+
+</style>
+
+<div class="grid offset">
+  <span></span><span></span><span></span>
+  <even></even><even></even><even></even>
+  <span></span><span></span><span></span>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-rel-pos-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-rel-pos-002.html
new file mode 100644
index 0000000000..4a4d6c843a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-rel-pos-002.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Rel.pos. centered grid item with style change.</title>
+<link rel="author" title="James0x57" href="mailto:James0x57@gmail.com">
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="Grid Items">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1576355">
+<link rel="match" href="grid-item-rel-pos-002-ref.html">
+<meta name="assert" content="Checks that the rel.pos. grid items are positioned correctly after a 'left' style change.">
+<style>
+.grid {
+  margin: 40px;
+  display: grid;
+  grid: auto / repeat(3,100px);
+  grid-gap: 20px;
+}
+span, even {
+  position: relative;
+  min-height: 20px;
+  background: grey;
+  left: 0px;
+  width: 30px;
+  justify-self: center;
+}
+.offset even {
+  left: 20%;
+}
+
+</style>
+
+<div class="grid offset">
+  <span></span><span></span><span></span>
+  <even></even><even></even><even></even>
+  <span></span><span></span><span></span>
+</div>
+
+<script>
+  document.body.offsetHeight;
+  let grid = document.querySelector('.grid');
+  grid.classList.remove('offset')
+  document.body.offsetHeight;
+  grid.classList.add('offset')
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-item-script-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-script-001.html
new file mode 100644
index 0000000000..323e9ba3c4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-item-script-001.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<title>CSS Grid Layout Test: Insert script as grid item</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item">
+<link rel="stylesheet" href="/css/support/grid.css"/>
+<link rel="match" href="../reference/grid-item-script-001-ref.html">
+<meta name="assert" content="This test ensures that inserting a script element as grid item doesn't crash.">
+<div class="grid">
+<script>
+  var grid = document.getElementsByClassName("grid")[0];
+  grid.offsetTop;
+  grid.innerHTML = "Test passes if it doesn't crash.";
+</script>
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-001.html
new file mode 100644
index 0000000000..fc9b27be4d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-001.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Regular and anonymous grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<meta name="assert" content="Checks that grid container children become grid items, and text that is directly contained inside the grid is wrapped in an anonymous grid item.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  .test-grid-overlapping-green {
+    display: grid;
+    font: 25px/1 Ahem;
+    color: green;
+    grid-template-columns: auto auto;
+    justify-content: start;
+    align-content: start;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div class="test-grid-overlapping-green">
+  <div>it</div>
+  em
+  <div>it</div>
+  em
+</div>
+<div class="test-grid-overlapping-green">
+  it
+  <span>em</span>
+  it
+  <span>em</span>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-002.html
new file mode 100644
index 0000000000..dbb67db859
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-002.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Children of grid items do not create new items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<meta name="assert" content="Checks that the grid items do not split around blocks creating extra items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  .test-grid-overlapping-green {
+    display: grid;
+    font: 25px/1 Ahem;
+    color: green;
+    justify-content: start;
+    align-content: start;
+  }
+
+  .two-columns {
+    grid-template-columns: auto auto;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div class="test-grid-overlapping-green two-columns">
+  <div>
+    <div>it</div>
+    em
+  </div>
+  <div>
+    it
+    <div>em</div>
+  </div>
+</div>
+<div class="test-grid-overlapping-green">
+  <span>
+    <span>it</span>em
+  </span>
+  <span>
+    it<span>em</span>
+  </span>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-003.html
new file mode 100644
index 0000000000..1cfcbc563d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-003.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with 'display:none' are not rendered</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  .test-grid-overlapping-green {
+    display: grid;
+    font: 50px/1 Ahem;
+    color: green;
+  }
+
+  .display-none-red {
+    display: none;
+    color: red;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div class="test-grid-overlapping-green two-columns">
+  <span>it</span>
+  <span class="display-none-red">hidden</span>
+  <span>em</span>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-contribution-negative-margins.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-contribution-negative-margins.html
new file mode 100644
index 0000000000..7f55bea748
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-contribution-negative-margins.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items contribution with negative margin</title>
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items">
+<meta name="assert" content="This test checks that grid items are properly placed with negative margin.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+  #grid {
+    background: red;
+    display: grid;
+    grid-auto-flow: column;
+    width: 100px;
+    height: 100px;
+    overflow: hidden;
+  }
+
+  #grid > div {
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="grid">
+    <div style="background: blue; margin-left: -100px;"></div>
+    <div style="background: green;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-inline-blocks-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-inline-blocks-001.html
new file mode 100644
index 0000000000..2824bc5935
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-inline-blocks-001.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Paint order of grid items is the same as inline blocks</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="9.5 Z-axis Ordering: the z-index property">
+<link rel="help" href="http://www.w3.org/TR/CSS2/zindex.html#painting-order" title="E.2 Painting order">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+    display: grid;
+  }
+
+  #reference-overlapped-red {
+    color: red;
+    font: 100px/1 Ahem;
+    grid-row: 1;
+    grid-column: 1;
+  }
+
+  #test-overlapping-green {
+    background-color: green;
+    width: 100px;
+    height: 100px;
+    grid-row: 1;
+    grid-column: 1;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="grid">
+  <div id="reference-overlapped-red">R</div>
+  <div id="test-overlapping-green"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-height-orthogonal-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-height-orthogonal-001.html
new file mode 100644
index 0000000000..c8f4633671
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-height-orthogonal-001.html
@@ -0,0 +1,365 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Mininum height of grid items orthogonal</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
+<meta name="assert" content="Checks that orthogonal grid items minimum height take into account borders, padding and margins for grid containers with definite height.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+.grid {
+  display: inline-grid;
+  height: 100px;
+  border: solid thick;
+  grid: minmax(auto, 0px) / 10px 10px;
+}
+
+.grid > div:nth-child(1) { background: cyan; writing-mode: vertical-lr; }
+.grid > div:nth-child(2) { background: magenta; }
+
+.height60 { height: 60px; }
+.minHeight60 { min-height: 60px; }
+
+.marginTop5 { margin-top: 5px; }
+.marginBottom10 { margin-bottom: 10px; }
+.marginLeftAuto { margin-left: auto }
+
+.paddingTop6 { padding-top: 6px; }
+.paddingBottom3 { padding-bottom: 3px; }
+
+.borderTop2, .borderBottom4 { border: solid yellow 0px; }
+.borderTop2 { border-top-width: 2px; }
+.borderBottom4 { border-bottom-width: 4px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item height: 60px;</pre>
+
+<div class="grid">
+  <div class="height60" data-expected-height="60"></div>
+  <div data-expected-height="60"></div>
+</div>
+
+<pre>Item min-height: 60px;</pre>
+
+<div class="grid">
+  <div class="minHeight60" data-expected-height="60"></div>
+  <div data-expected-height="60"></div>
+</div>
+
+<pre>Item height: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid">
+  <div class="height60 marginTop5" data-expected-height="60"></div>
+  <div data-expected-height="65"></div>
+</div>
+
+<pre>Item min-height: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid">
+  <div class="minHeight60 marginTop5" data-expected-height="60"></div>
+  <div data-expected-height="65"></div>
+</div>
+
+<pre>Item min-height: 60px; &amp; margin-top: 5px; &amp; margin-left: auto</pre>
+
+<div class="grid">
+  <div class="minHeight60 marginTop5 marginLeftAuto" data-expected-height="60"></div>
+  <div data-expected-height="65"></div>
+</div>
+
+<pre>Item height: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="height60 marginBottom10" data-expected-height="60"></div>
+  <div data-expected-height="70"></div>
+</div>
+
+<pre>Item min-height: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="minHeight60 marginBottom10" data-expected-height="60"></div>
+  <div data-expected-height="70"></div>
+</div>
+
+<pre>Item height: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="height60 marginTop5 marginBottom10" data-expected-height="60"></div>
+  <div data-expected-height="75"></div>
+</div>
+
+<pre>Item min-height: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="minHeight60 marginTop5 marginBottom10" data-expected-height="60"></div>
+  <div data-expected-height="75"></div>
+</div>
+
+<pre>Item height: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid">
+  <div class="height60 paddingTop6" data-expected-height="66"></div>
+  <div data-expected-height="66"></div>
+</div>
+
+<pre>Item min-height: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid">
+  <div class="minHeight60 paddingTop6" data-expected-height="66"></div>
+  <div data-expected-height="66"></div>
+</div>
+
+<pre>Item height: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="height60 paddingBottom3" data-expected-height="63"></div>
+  <div data-expected-height="63"></div>
+</div>
+
+<pre>Item min-height: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="minHeight60 paddingBottom3" data-expected-height="63"></div>
+  <div data-expected-height="63"></div>
+</div>
+
+<pre>Item height: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="height60 paddingTop6 paddingBottom3" data-expected-height="69"></div>
+  <div data-expected-height="69"></div>
+</div>
+
+<pre>Item min-height: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="minHeight60 paddingTop6 paddingBottom3" data-expected-height="69"></div>
+  <div data-expected-height="69"></div>
+</div>
+
+<pre>Item height: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid">
+  <div class="height60 borderTop2" data-expected-height="62"></div>
+  <div data-expected-height="62"></div>
+</div>
+
+<pre>Item min-height: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid">
+  <div class="minHeight60 borderTop2" data-expected-height="62"></div>
+  <div data-expected-height="62"></div>
+</div>
+
+<pre>Item height: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="height60 borderBottom4" data-expected-height="64"></div>
+  <div data-expected-height="64"></div>
+</div>
+
+<pre>Item min-height: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="minHeight60 borderBottom4" data-expected-height="64"></div>
+  <div data-expected-height="64"></div>
+</div>
+
+<pre>Item height: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="height60 borderTop2 borderBottom4" data-expected-height="66"></div>
+  <div data-expected-height="66"></div>
+</div>
+
+<pre>Item min-height: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="minHeight60 borderTop2 borderBottom4" data-expected-height="66"></div>
+  <div data-expected-height="66"></div>
+</div>
+
+<pre>Item height: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="height60 marginTop5 marginBottom10 paddingTop6 paddingBottom3 borderTop2 borderBottom4" data-expected-height="75"></div>
+  <div data-expected-height="90"></div>
+</div>
+
+<pre>Item min-height: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="minHeight60 marginTop5 marginBottom10 paddingTop6 paddingBottom3 borderTop2 borderBottom4" data-expected-height="75"></div>
+  <div data-expected-height="90"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item height: 60px;</pre>
+
+<div class="grid directionRTL">
+  <div class="height60" data-expected-height="60"></div>
+  <div data-expected-height="60"></div>
+</div>
+
+<pre>Item min-height: 60px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minHeight60" data-expected-height="60"></div>
+  <div data-expected-height="60"></div>
+</div>
+
+<pre>Item height: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL">
+  <div class="height60 marginTop5" data-expected-height="60"></div>
+  <div data-expected-height="65"></div>
+</div>
+
+<pre>Item min-height: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minHeight60 marginTop5" data-expected-height="60"></div>
+  <div data-expected-height="65"></div>
+</div>
+
+<pre>Item min-height: 60px; &amp; margin-top: 5px; &amp; margin-left: auto</pre>
+
+<div class="grid directionRTL">
+  <div class="minHeight60 marginTop5 marginLeftAuto" data-expected-height="60"></div>
+  <div data-expected-height="65"></div>
+</div>
+
+<pre>Item height: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="height60 marginBottom10" data-expected-height="60"></div>
+  <div data-expected-height="70"></div>
+</div>
+
+<pre>Item min-height: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minHeight60 marginBottom10" data-expected-height="60"></div>
+  <div data-expected-height="70"></div>
+</div>
+
+<pre>Item height: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="height60 marginTop5 marginBottom10" data-expected-height="60"></div>
+  <div data-expected-height="75"></div>
+</div>
+
+<pre>Item min-height: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minHeight60 marginTop5 marginBottom10" data-expected-height="60"></div>
+  <div data-expected-height="75"></div>
+</div>
+
+<pre>Item height: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL">
+  <div class="height60 paddingTop6" data-expected-height="66"></div>
+  <div data-expected-height="66"></div>
+</div>
+
+<pre>Item min-height: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minHeight60 paddingTop6" data-expected-height="66"></div>
+  <div data-expected-height="66"></div>
+</div>
+
+<pre>Item height: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="height60 paddingBottom3" data-expected-height="63"></div>
+  <div data-expected-height="63"></div>
+</div>
+
+<pre>Item min-height: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minHeight60 paddingBottom3" data-expected-height="63"></div>
+  <div data-expected-height="63"></div>
+</div>
+
+<pre>Item height: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="height60 paddingTop6 paddingBottom3" data-expected-height="69"></div>
+  <div data-expected-height="69"></div>
+</div>
+
+<pre>Item min-height: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minHeight60 paddingTop6 paddingBottom3" data-expected-height="69"></div>
+  <div data-expected-height="69"></div>
+</div>
+
+<pre>Item height: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL">
+  <div class="height60 borderTop2" data-expected-height="62"></div>
+  <div data-expected-height="62"></div>
+</div>
+
+<pre>Item min-height: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minHeight60 borderTop2" data-expected-height="62"></div>
+  <div data-expected-height="62"></div>
+</div>
+
+<pre>Item height: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="height60 borderBottom4" data-expected-height="64"></div>
+  <div data-expected-height="64"></div>
+</div>
+
+<pre>Item min-height: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minHeight60 borderBottom4" data-expected-height="64"></div>
+  <div data-expected-height="64"></div>
+</div>
+
+<pre>Item height: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="height60 borderTop2 borderBottom4" data-expected-height="66"></div>
+  <div data-expected-height="66"></div>
+</div>
+
+<pre>Item min-height: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minHeight60 borderTop2 borderBottom4" data-expected-height="66"></div>
+  <div data-expected-height="66"></div>
+</div>
+
+<pre>Item height: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="height60 marginTop5 marginBottom10 paddingTop6 paddingBottom3 borderTop2 borderBottom4" data-expected-height="75"></div>
+  <div data-expected-height="90"></div>
+</div>
+
+<pre>Item min-height: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minHeight60 marginTop5 marginBottom10 paddingTop6 paddingBottom3 borderTop2 borderBottom4" data-expected-height="75"></div>
+  <div data-expected-height="90"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-001.html
new file mode 100644
index 0000000000..78bbfcbd2f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-001.html
@@ -0,0 +1,349 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Mininum width of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
+<meta name="assert" content="Checks that grid items minimum width takes into account borders, padding and margins for grid containers with definite width.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+.grid {
+  width: 100px;
+  border: solid thick;
+  grid: 10px 10px / minmax(auto, 0px);
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) { background: magenta; }
+
+.width60 { width: 60px; }
+.minWidth60 { min-width: 60px; }
+
+.marginLeft5 { margin-left: 5px; }
+.marginRight10 { margin-right: 10px; }
+
+.paddingLeft6 { padding-left: 6px; }
+.paddingRight3 { padding-right: 3px; }
+
+.borderLeft2, .borderRight4 { border: solid yellow 0px; }
+.borderLeft2 { border-left-width: 2px; }
+.borderRight4 { border-right-width: 4px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-002.html
new file mode 100644
index 0000000000..8458e8e078
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-002.html
@@ -0,0 +1,349 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Mininum width of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
+<meta name="assert" content="Checks that grid items minimum width takes into account borders, padding and margins for grid containers with indefinite width.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+.grid {
+  display: inline-grid;
+  border: solid 5px;
+  grid: 10px 10px / minmax(auto, 0px);
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) { background: magenta; }
+
+.width60 { width: 60px; }
+.minWidth60 { min-width: 60px; }
+
+.marginLeft5 { margin-left: 5px; }
+.marginRight10 { margin-right: 10px; }
+
+.paddingLeft6 { padding-left: 6px; }
+.paddingRight3 { padding-right: 3px; }
+
+.borderLeft2, .borderRight4 { border: solid yellow 0px; }
+.borderLeft2 { border-left-width: 2px; }
+.borderRight4 { border-right-width: 4px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid" data-expected-width="70">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid" data-expected-width="70">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid" data-expected-width="75">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid" data-expected-width="75">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="80">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="80">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="85">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="85">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="73">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="73">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="79">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="79">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid" data-expected-width="72">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid" data-expected-width="72">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="74">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="74">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="100">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="100">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid directionRTL" data-expected-width="70">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid directionRTL" data-expected-width="70">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL" data-expected-width="75">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL" data-expected-width="75">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="80">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="80">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="85">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="85">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="73">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="73">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="79">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="79">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL" data-expected-width="72">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL" data-expected-width="72">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="74">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="74">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="100">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="100">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-orthogonal-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-orthogonal-001.html
new file mode 100644
index 0000000000..4f8e689113
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-orthogonal-001.html
@@ -0,0 +1,364 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Mininum width of grid items orthogonal</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
+<meta name="assert" content="Checks that orthogonal grid items minimum width takes into account borders, padding and margins for grid containers with definite width.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+.grid {
+  width: 100px;
+  border: solid thick;
+  grid: 10px 10px / minmax(auto, 0px);
+}
+
+.grid > div:nth-child(1) { background: cyan; writing-mode: vertical-lr; }
+.grid > div:nth-child(2) { background: magenta; }
+
+.width60 { width: 60px; }
+.minWidth60 { min-width: 60px; }
+
+.marginLeft5 { margin-left: 5px; }
+.marginRight10 { margin-right: 10px; }
+.marginTopAuto { margin-top: auto }
+
+.paddingLeft6 { padding-left: 6px; }
+.paddingRight3 { padding-right: 3px; }
+
+.borderLeft2, .borderRight4 { border: solid yellow 0px; }
+.borderLeft2 { border-left-width: 2px; }
+.borderRight4 { border-right-width: 4px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-top: auto</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginLeft5 marginTopAuto" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-top: auto</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginLeft5 marginTopAuto" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-orthogonal-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-orthogonal-002.html
new file mode 100644
index 0000000000..ef22232567
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-orthogonal-002.html
@@ -0,0 +1,349 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Mininum width of grid items orthogonal</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
+<meta name="assert" content="Checks that orthogonal grid items minimum width takes into account borders, padding and margins for grid containers with indefinite width.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+.grid {
+  display: inline-grid;
+  border: solid 5px;
+  grid: 10px 10px / minmax(auto, 0px);
+}
+
+.grid > div:nth-child(1) { background: cyan; writing-mode: vertical-lr; }
+.grid > div:nth-child(2) { background: magenta; }
+
+.width60 { width: 60px; }
+.minWidth60 { min-width: 60px; }
+
+.marginLeft5 { margin-left: 5px; }
+.marginRight10 { margin-right: 10px; }
+
+.paddingLeft6 { padding-left: 6px; }
+.paddingRight3 { padding-right: 3px; }
+
+.borderLeft2, .borderRight4 { border: solid yellow 0px; }
+.borderLeft2 { border-left-width: 2px; }
+.borderRight4 { border-right-width: 4px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid" data-expected-width="70">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid" data-expected-width="70">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid" data-expected-width="75">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid" data-expected-width="75">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="80">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="80">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="85">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="85">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="73">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="73">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="79">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="79">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid" data-expected-width="72">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid" data-expected-width="72">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="74">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="74">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="100">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="100">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid directionRTL" data-expected-width="70">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid directionRTL" data-expected-width="70">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL" data-expected-width="75">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL" data-expected-width="75">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="80">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="80">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="85">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="85">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="73">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="73">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="79">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="79">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL" data-expected-width="72">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL" data-expected-width="72">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="74">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="74">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="100">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="100">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-lr-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-lr-001.html
new file mode 100644
index 0000000000..f137a7e475
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-lr-001.html
@@ -0,0 +1,350 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Mininum width of grid items vertical-lr</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
+<meta name="assert" content="Checks that grid items minimum width takes into account borders, padding and margins for grid containers with definite width in vertical-lr.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+.grid {
+  width: 100px;
+  border: solid thick;
+  grid: minmax(auto, 0px) / 10px 10px;
+  writing-mode: vertical-lr;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) { background: magenta; }
+
+.width60 { width: 60px; }
+.minWidth60 { min-width: 60px; }
+
+.marginLeft5 { margin-left: 5px; }
+.marginRight10 { margin-right: 10px; }
+
+.paddingLeft6 { padding-left: 6px; }
+.paddingRight3 { padding-right: 3px; }
+
+.borderLeft2, .borderRight4 { border: solid yellow 0px; }
+.borderLeft2 { border-left-width: 2px; }
+.borderRight4 { border-right-width: 4px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-lr-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-lr-002.html
new file mode 100644
index 0000000000..9f2a5a2dae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-lr-002.html
@@ -0,0 +1,350 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Mininum width of grid items vertical-lr</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
+<meta name="assert" content="Checks that grid items minimum width takes into account borders, padding and margins for grid containers with indefinite width in vertical-lr.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+.grid {
+  display: inline-grid;
+  border: solid 5px;
+  grid: minmax(auto, 0px) / 10px 10px;
+  writing-mode: vertical-lr;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) { background: magenta; }
+
+.width60 { width: 60px; }
+.minWidth60 { min-width: 60px; }
+
+.marginLeft5 { margin-left: 5px; }
+.marginRight10 { margin-right: 10px; }
+
+.paddingLeft6 { padding-left: 6px; }
+.paddingRight3 { padding-right: 3px; }
+
+.borderLeft2, .borderRight4 { border: solid yellow 0px; }
+.borderLeft2 { border-left-width: 2px; }
+.borderRight4 { border-right-width: 4px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid" data-expected-width="70">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid" data-expected-width="70">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid" data-expected-width="75">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid" data-expected-width="75">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="80">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="80">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="85">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="85">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="73">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="73">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="79">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="79">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid" data-expected-width="72">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid" data-expected-width="72">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="74">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="74">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="100">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="100">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid directionRTL" data-expected-width="70">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid directionRTL" data-expected-width="70">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL" data-expected-width="75">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL" data-expected-width="75">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="80">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="80">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="85">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="85">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="73">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="73">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="79">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="79">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL" data-expected-width="72">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL" data-expected-width="72">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="74">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="74">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="100">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="100">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-rl-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-rl-001.html
new file mode 100644
index 0000000000..54a5a9187b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-rl-001.html
@@ -0,0 +1,350 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Mininum width of grid items vertical-rl</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
+<meta name="assert" content="Checks that grid items minimum width takes into account borders, padding and margins for grid containers with definite width in vertical-rl.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+.grid {
+  width: 100px;
+  border: solid thick;
+  grid: minmax(auto, 0px) / 10px 10px;
+  writing-mode: vertical-rl;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) { background: magenta; }
+
+.width60 { width: 60px; }
+.minWidth60 { min-width: 60px; }
+
+.marginLeft5 { margin-left: 5px; }
+.marginRight10 { margin-right: 10px; }
+
+.paddingLeft6 { padding-left: 6px; }
+.paddingRight3 { padding-right: 3px; }
+
+.borderLeft2, .borderRight4 { border: solid yellow 0px; }
+.borderLeft2 { border-left-width: 2px; }
+.borderRight4 { border-right-width: 4px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-rl-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-rl-002.html
new file mode 100644
index 0000000000..0640dbfaee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-vertical-rl-002.html
@@ -0,0 +1,350 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Mininum width of grid items vertical-rl</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
+<meta name="assert" content="Checks that grid items minimum width takes into account borders, padding and margins for grid containers with indefinite width in vertical-rl.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+.grid {
+  display: inline-grid;
+  border: solid 5px;
+  grid: minmax(auto, 0px) / 10px 10px;
+  writing-mode: vertical-rl;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) { background: magenta; }
+
+.width60 { width: 60px; }
+.minWidth60 { min-width: 60px; }
+
+.marginLeft5 { margin-left: 5px; }
+.marginRight10 { margin-right: 10px; }
+
+.paddingLeft6 { padding-left: 6px; }
+.paddingRight3 { padding-right: 3px; }
+
+.borderLeft2, .borderRight4 { border: solid yellow 0px; }
+.borderLeft2 { border-left-width: 2px; }
+.borderRight4 { border-right-width: 4px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid" data-expected-width="70">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid" data-expected-width="70">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid" data-expected-width="75">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid" data-expected-width="75">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="80">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="80">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="85">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid" data-expected-width="85">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="73">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="73">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="79">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid" data-expected-width="79">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid" data-expected-width="72">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid" data-expected-width="72">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="74">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="74">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="76">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="100">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid" data-expected-width="100">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item width: 60px;</pre>
+
+<div class="grid directionRTL" data-expected-width="70">
+  <div class="width60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item min-width: 60px;</pre>
+
+<div class="grid directionRTL" data-expected-width="70">
+  <div class="minWidth60" data-expected-width="60"></div>
+  <div data-expected-width="60"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL" data-expected-width="75">
+  <div class="width60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px;</pre>
+
+<div class="grid directionRTL" data-expected-width="75">
+  <div class="minWidth60 marginLeft5" data-expected-width="60"></div>
+  <div data-expected-width="65"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="80">
+  <div class="width60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="80">
+  <div class="minWidth60 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="70"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="85">
+  <div class="width60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
+
+<div class="grid directionRTL" data-expected-width="85">
+  <div class="minWidth60 marginLeft5 marginRight10" data-expected-width="60"></div>
+  <div data-expected-width="75"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="width60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="minWidth60 paddingLeft6" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="73">
+  <div class="width60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="73">
+  <div class="minWidth60 paddingRight3" data-expected-width="63"></div>
+  <div data-expected-width="63"></div>
+</div>
+
+<pre>Item width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="79">
+  <div class="width60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
+
+<div class="grid directionRTL" data-expected-width="79">
+  <div class="minWidth60 paddingLeft6 paddingRight3" data-expected-width="69"></div>
+  <div data-expected-width="69"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL" data-expected-width="72">
+  <div class="width60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px;</pre>
+
+<div class="grid directionRTL" data-expected-width="72">
+  <div class="minWidth60 borderLeft2" data-expected-width="62"></div>
+  <div data-expected-width="62"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="74">
+  <div class="width60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="74">
+  <div class="minWidth60 borderRight4" data-expected-width="64"></div>
+  <div data-expected-width="64"></div>
+</div>
+
+<pre>Item width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="width60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="76">
+  <div class="minWidth60 borderLeft2 borderRight4" data-expected-width="66"></div>
+  <div data-expected-width="66"></div>
+</div>
+
+<pre>Item width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="100">
+  <div class="width60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
+
+<pre>Item min-width: 60px; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
+
+<div class="grid directionRTL" data-expected-width="100">
+  <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
+  <div data-expected-width="90"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-001.html
new file mode 100644
index 0000000000..dc1602ab17
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-001.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage margins</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage margins are resolved against the inline size of their grid area (in a fixed size track).">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  font: 10px/1 Ahem;
+  grid-template-columns: 100px;
+  width: 500px;
+  justify-items: start;
+  position: relative;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) {
+  background: magenta;
+  width: 100%;
+  height: 10px;
+}
+
+.marginLeft50Percent { margin-left: 50%; }
+.marginRight50Percent { margin-right: 50%; }
+.marginTop50Percent { margin-top: 50%; }
+.marginBottom50Percent { margin-bottom: 50%; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item margin-left: 50%;</pre>
+
+<div class="grid">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item margin-left: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="490" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="440" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-002.html
new file mode 100644
index 0000000000..6ff78b4bb1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-002.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage margins</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage margins are resolved against the inline size of their grid area (in a track with fixed max sizing function and intrinsic min).">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  font: 10px/1 Ahem;
+  grid-template-columns: minmax(auto, 100px);
+  width: 500px;
+  justify-items: start;
+  position: relative;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) {
+  background: magenta;
+  width: 100%;
+  height: 10px;
+}
+
+.marginLeft50Percent { margin-left: 50%; }
+.marginRight50Percent { margin-right: 50%; }
+.marginTop50Percent { margin-top: 50%; }
+.marginBottom50Percent { margin-bottom: 50%; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item margin-left: 50%;</pre>
+
+<div class="grid">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item margin-left: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="490" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="440" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-003.html
new file mode 100644
index 0000000000..d6805b7b35
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-003.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage margins</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+    font: 25px/1 Ahem;
+    width: 100px;
+}
+.child {
+    margin: 50px;
+    color: red;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    background: green;
+    height: 100px;
+}
+.grid {
+    background: none;
+}
+#item {
+    margin: 50%;
+    color: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container ref"><div class="child">X</div></div>
+<div class="container grid"><div class="child" id="item">X</div></div>
+<script>
+    item.offsetLeft;
+    item.style.width = "0px";
+    item.offsetLeft;
+    item.style.width = "auto";
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-004.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-004.html
new file mode 100644
index 0000000000..009d655832
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-004.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage margins</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+    width: 100px;
+}
+.child {
+    width: 25px;
+    height: 25px;
+    margin: 50px;
+    background: red;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    background: green;
+    height: 100px;
+}
+.grid {
+    background: none;
+}
+#item {
+    margin: 50%;
+    background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container ref"><div class="child"></div></div>
+<div class="container grid"><div class="child" id="item"></div></div>
+<script>
+    item.offsetLeft;
+    item.style.width = "0px";
+    item.offsetLeft;
+    item.style.width = "25px";
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-005.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-005.html
new file mode 100644
index 0000000000..4b86153e1b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-005.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage margins</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+    width: 100px;
+}
+.child {
+    width: 25px;
+    height: 25px;
+    margin: 50px;
+    background: red;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    background: green;
+    height: 100px;
+}
+.grid {
+    background: none;
+}
+#item {
+    margin: 50%;
+    background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container ref"><div class="child"></div></div>
+<div class="container grid"><div class="child" id="item"></div></div>
+<script>
+    item.offsetLeft;
+    item.style.margin = "100%";
+    item.offsetLeft;
+    item.style.margin = "50%";
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-006.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-006.html
new file mode 100644
index 0000000000..290f3fd781
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-006.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage margins</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+    width: 100px;
+}
+.child {
+    min-width: 25px;
+    min-height: 25px;
+    margin: 50px;
+    background: red;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    background: green;
+    height: 100px;
+}
+.grid {
+    background: none;
+}
+#item {
+    margin: 50%;
+    background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container ref"><div class="child"></div></div>
+<div class="container grid"><div class="child" id="item"></div></div>
+<script>
+    item.offsetLeft;
+    item.style.margin = "100%";
+    item.offsetLeft;
+    item.style.margin = "50%";
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-007.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-007.html
new file mode 100644
index 0000000000..78958e0170
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-007.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage margins</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+    font: 25px/1 Ahem;
+    width: 100px;
+}
+.child {
+    margin: 0px 50px;
+    color: red;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    background: green;
+    height: 100px;
+}
+.grid {
+    background: none;
+    grid-template-rows: 100px;
+}
+#item {
+    margin: 0px 50%;
+    color: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container ref"><div class="child">X</div></div>
+<div class="container grid"><div class="child" id="item">X</div></div>
+<script>
+    item.offsetLeft;
+    item.style.width = "0px";
+    item.offsetLeft;
+    item.style.width = "auto";
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-008.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-008.html
new file mode 100644
index 0000000000..49a42722c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-008.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage margins</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+    width: 100px;
+}
+.child {
+    width: 25px;
+    height: 25px;
+    margin: 0px 50px;
+    background: red;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    background: green;
+    height: 100px;
+}
+.grid {
+    background: none;
+    grid-template-rows: 100px;
+}
+#item {
+    margin: 0px 50%;
+    background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container ref"><div class="child"></div></div>
+<div class="container grid"><div class="child" id="item"></div></div>
+<script>
+    item.offsetLeft;
+    item.style.width = "0px";
+    item.offsetLeft;
+    item.style.width = "25px";
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-009.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-009.html
new file mode 100644
index 0000000000..5fed639ef9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-009.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage margins</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+    width: 100px;
+}
+.child {
+    width: 25px;
+    height: 25px;
+    margin: 0px 50px;
+    background: red;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    background: green;
+    height: 100px;
+}
+.grid {
+    background: none;
+    grid-template-rows: 100px;
+}
+#item {
+    margin: 0px 50%;
+    background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container ref"><div class="child"></div></div>
+<div class="container grid"><div class="child" id="item"></div></div>
+<script>
+    item.offsetLeft;
+    item.style.margin = "0px 100%";
+    item.offsetLeft;
+    item.style.margin = "0px 50%";
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-010.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-010.html
new file mode 100644
index 0000000000..5d6995f690
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-010.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage margins</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+    width: 100px;
+}
+.child {
+    min-width: 25px;
+    min-height: 25px;
+    margin: 0px 50px;
+    background: red;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    background: green;
+    height: 100px;
+}
+.grid {
+    background: none;
+    grid-template-rows: 100px;
+}
+#item {
+    margin: 0px 50%;
+    background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container ref"><div class="child"></div></div>
+<div class="container grid"><div class="child" id="item"></div></div>
+<script>
+    item.offsetLeft;
+    item.style.margin = "0px 100%";
+    item.offsetLeft;
+    item.style.margin = "0px 50%";
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-011.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-011.html
new file mode 100644
index 0000000000..f2a87e1fb8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-011.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage margins</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+    font: 25px/1 Ahem;
+    width: 100px;
+}
+.child {
+    margin: 50px 0px;
+    color: red;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    background: green;
+    height: 100px;
+}
+.grid {
+    background: none;
+}
+#item {
+    margin: 50% 0px;
+    color: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container ref"><div class="child">X</div></div>
+<div class="container grid"><div class="child" id="item">X</div></div>
+<script>
+    item.offsetLeft;
+    item.style.width = "0px";
+    item.offsetLeft;
+    item.style.width = "auto";
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-012.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-012.html
new file mode 100644
index 0000000000..1071cdce5f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-012.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage margins</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+    width: 100px;
+}
+.child {
+    width: 25px;
+    height: 25px;
+    margin: 50px 0px;
+    background: red;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    background: green;
+    height: 100px;
+}
+.grid {
+    background: none;
+}
+#item {
+    margin: 50% 0px;
+    background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container ref"><div class="child"></div></div>
+<div class="container grid"><div class="child" id="item"></div></div>
+<script>
+    item.offsetLeft;
+    item.style.width = "0px";
+    item.offsetLeft;
+    item.style.width = "25px";
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-013.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-013.html
new file mode 100644
index 0000000000..cb3b56725b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-013.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage margins</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+    width: 100px;
+}
+.child {
+    width: 25px;
+    height: 25px;
+    margin: 50px 0px;
+    background: red;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    background: green;
+    height: 100px;
+}
+.grid {
+    background: none;
+}
+#item {
+    margin: 50% 0px;
+    background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container ref"><div class="child"></div></div>
+<div class="container grid"><div class="child" id="item"></div></div>
+<script>
+    item.offsetLeft;
+    item.style.margin = "100% 0px";
+    item.offsetLeft;
+    item.style.margin = "50% 0px";
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-014.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-014.html
new file mode 100644
index 0000000000..32a171dc9e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-014.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage margins</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage margins are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+    width: 100px;
+}
+.child {
+    min-width: 25px;
+    min-height: 25px;
+    margin: 50px 0px;
+    background: red;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    background: green;
+    height: 100px;
+}
+.grid {
+    background: none;
+    grid-template-columns: 100px;
+}
+#item {
+    margin: 50% 0px;
+    background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container ref"><div class="child"></div></div>
+<div class="container grid"><div class="child" id="item"></div></div>
+<script>
+    item.offsetLeft;
+    item.style.margin = "100% 0px";
+    item.offsetLeft;
+    item.style.margin = "50% 0px";
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-001.html
new file mode 100644
index 0000000000..05d77f3d2c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-001.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage margins vertical-lr</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage margins are resolved against the inline size of their grid area (in a fixed size track) in a vertical-lr grid container.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  font: 10px/1 Ahem;
+  grid-template-columns: 100px;
+  height: 500px;
+  justify-items: start;
+  position: relative;
+  writing-mode: vertical-lr;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) {
+  background: magenta;
+  width: 10px;
+  height: 100%;
+}
+
+.marginLeft50Percent { margin-left: 50%; }
+.marginRight50Percent { margin-right: 50%; }
+.marginTop50Percent { margin-top: 50%; }
+.marginBottom50Percent { margin-bottom: 50%; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item margin-left: 50%;</pre>
+
+<div class="grid">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item margin-left: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="490" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="440" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-002.html
new file mode 100644
index 0000000000..168a719a51
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-002.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage margins vertical-lr</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage margins are resolved against the inline size of their grid area (in a track with fixed max sizing function and intrinsic min) in a vertical-lr grid container.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  font: 10px/1 Ahem;
+  grid-template-columns: minmax(auto, 100px);
+  height: 500px;
+  justify-items: start;
+  position: relative;
+  writing-mode: vertical-lr;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) {
+  background: magenta;
+  width: 10px;
+  height: 100%;
+}
+
+.marginLeft50Percent { margin-left: 50%; }
+.marginRight50Percent { margin-right: 50%; }
+.marginTop50Percent { margin-top: 50%; }
+.marginBottom50Percent { margin-bottom: 50%; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item margin-left: 50%;</pre>
+
+<div class="grid">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item margin-left: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="490" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="440" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-001.html
new file mode 100644
index 0000000000..a1f380d051
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-001.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage margins vertical-rl</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage margins are resolved against the inline size of their grid area (in a fixed size track) in a vertical-rl grid container.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  font: 10px/1 Ahem;
+  grid-template-columns: 100px;
+  height: 500px;
+  justify-items: start;
+  position: relative;
+  writing-mode: vertical-rl;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) {
+  background: magenta;
+  width: 10px;
+  height: 100%;
+}
+
+.marginLeft50Percent { margin-left: 50%; }
+.marginRight50Percent { margin-right: 50%; }
+.marginTop50Percent { margin-top: 50%; }
+.marginBottom50Percent { margin-bottom: 50%; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item margin-left: 50%;</pre>
+
+<div class="grid">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="60" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="10" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item margin-left: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="60" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="10" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="490" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="440" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002.html
new file mode 100644
index 0000000000..7309daa236
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage margins vertical-rl</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage margins are resolved against the inline size of their grid area (in a track with fixed max sizing function and intrinsic min) in a vertical-rl grid container.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  font: 10px/1 Ahem;
+  grid-template-columns: minmax(auto, 100px);
+  height: 500px;
+  justify-items: start;
+  position: relative;
+  writing-mode: vertical-rl;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) {
+  background: magenta;
+  width: 10px;
+  height: 100%;
+}
+
+.marginLeft50Percent { margin-left: 50%; }
+.marginRight50Percent { margin-right: 50%; }
+.marginTop50Percent { margin-top: 50%; }
+.marginBottom50Percent { margin-bottom: 50%; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item margin-left: 50%;</pre>
+
+<div class="grid">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="60" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="10" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="50" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item margin-left: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginLeft50Percent" data-expected-margin-left="50" data-offset-x="60" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-right: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginRight50Percent" data-expected-margin-right="50" data-offset-x="10" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-top: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginTop50Percent" data-expected-margin-top="50" data-offset-y="490" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item margin-bottom: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="marginBottom50Percent" data-expected-margin-bottom="50" data-offset-y="440" data-expected-width="10" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-001.html
new file mode 100644
index 0000000000..7c99eb9068
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-001.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage paddings are resolved against the inline size of their grid area (in a fixed size track).">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  font: 10px/1 Ahem;
+  grid-template-columns: 100px;
+  width: 500px;
+  justify-items: start;
+  position: relative;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) {
+  background: magenta;
+  width: 100%;
+  height: 10px;
+}
+
+.paddingLeft50Percent { padding-left: 50%; }
+.paddingRight50Percent { padding-right: 50%; }
+.paddingTop50Percent { padding-top: 50%; }
+.paddingBottom50Percent { padding-bottom: 50%; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item padding-left: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item padding-right: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item padding-top: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item padding-bottom: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item padding-left: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item padding-right: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item padding-top: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item padding-bottom: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-002.html
new file mode 100644
index 0000000000..447b5201d6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-002.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage paddings are resolved against the inline size of their grid area (in a track with fixed max sizing function and intrinsic min).">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  font: 10px/1 Ahem;
+  grid-template-columns: minmax(auto, 100px);
+  width: 500px;
+  justify-items: start;
+  position: relative;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) {
+  background: magenta;
+  width: 100%;
+  height: 10px;
+}
+
+.paddingLeft50Percent { padding-left: 50%; }
+.paddingRight50Percent { padding-right: 50%; }
+.paddingTop50Percent { padding-top: 50%; }
+.paddingBottom50Percent { padding-bottom: 50%; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item padding-left: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item padding-right: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item padding-top: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item padding-bottom: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item padding-left: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item padding-right: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="400" data-offset-y="10" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item padding-top: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
+
+<pre>Item padding-bottom: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="400" data-offset-y="60" data-expected-width="100" data-expected-height="10"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-003.html
new file mode 100644
index 0000000000..970f83c1ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-003.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+    font: 80px/1 Ahem;
+    width: 100px;
+}
+.child {
+    padding: 10px;
+    color: red;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    background: red;
+    height: 100px;
+}
+.grid {
+    background: green;
+}
+#item {
+    padding: 10%;
+    color: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container ref"><div class="child">X</div></div>
+<div class="container grid"><div class="child" id="item">X</div></div>
+<script>
+    item.offsetLeft;
+    item.style.width = "0px";
+    item.offsetLeft;
+    item.style.width = "auto";
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-004.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-004.html
new file mode 100644
index 0000000000..60b08630df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-004.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+    width: 100px;
+}
+.child {
+    width: 80px;
+    height: 80px;
+    padding: 10px;
+    background: red;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    background: none;
+    height: 100px;
+}
+.grid {
+    background: none;
+}
+#item {
+    padding: 10%;
+    background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container ref"><div class="child"></div></div>
+<div class="container grid"><div class="child" id="item"></div></div>
+<script>
+    item.offsetLeft;
+    item.style.width = "0px";
+    item.offsetLeft;
+    item.style.width = "80px";
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-005.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-005.html
new file mode 100644
index 0000000000..6c67080f7a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-005.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+    width: 100px;
+}
+.child {
+    width: 80px;
+    height: 80px;
+    padding: 10px;
+    background: red;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    height: 100px;
+}
+.grid {
+    background: none;
+}
+#item {
+    padding: 10%;
+    background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container ref"><div class="child"></div></div>
+<div class="container grid"><div class="child" id="item"></div></div>
+<script>
+    item.offsetLeft;
+    item.style.padding = "50%";
+    item.offsetLeft;
+    item.style.padding = "10%";
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-006.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-006.html
new file mode 100644
index 0000000000..b17a569024
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-006.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+    width: 100px;
+}
+.child {
+    min-width: 80px;
+    min-height: 80px;
+    padding: 10px;
+    background: red;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    height: 100px;
+}
+.grid {
+    background: none;
+}
+#item {
+    padding: 10%;
+    background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container ref"><div class="child"></div></div>
+<div class="container grid"><div class="child" id="item"></div></div>
+<script>
+    item.offsetLeft;
+    item.style.padding = "50%";
+    item.offsetLeft;
+    item.style.padding = "10%";
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-007.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-007.html
new file mode 100644
index 0000000000..a49956390d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-007.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+    font: 80px/1 Ahem;
+    width: 100px;
+}
+.child {
+    padding: 0px 10px;
+    color: red;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    background: red;
+    height: 100px;
+}
+.grid {
+    background: green;
+    grid-template-rows: 100px;
+}
+#item {
+    padding: 0px 10%;
+    color: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container ref"><div class="child">X</div></div>
+<div class="container grid"><div class="child" id="item">X</div></div>
+<script>
+    item.offsetLeft;
+    item.style.width = "0px";
+    item.offsetLeft;
+    item.style.width = "auto";
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-008.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-008.html
new file mode 100644
index 0000000000..da9328bebc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-008.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+    width: 100px;
+}
+.child {
+    width: 80px;
+    height: 100px;
+    padding: 0px 10px;
+    background: red;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    background: none;
+    height: 100px;
+}
+.grid {
+    background: none;
+    grid-template-rows: 100px;
+}
+#item {
+    padding: 0px 10%;
+    background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container ref"><div class="child"></div></div>
+<div class="container grid"><div class="child" id="item"></div></div>
+<script>
+    item.offsetLeft;
+    item.style.width = "0px";
+    item.offsetLeft;
+    item.style.width = "80px";
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-009.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-009.html
new file mode 100644
index 0000000000..5d86919be2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-009.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+    width: 100px;
+}
+.child {
+    width: 80px;
+    height: 100px;
+    padding: 0px 10px;
+    background: red;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    height: 100px;
+    grid-template-rows: 100px;
+}
+.grid {
+    background: none;
+    grid-template-rows: 100px;
+}
+#item {
+    padding: 0px 10%;
+    background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container ref"><div class="child"></div></div>
+<div class="container grid"><div class="child" id="item"></div></div>
+<script>
+    item.offsetLeft;
+    item.style.padding = "0px 50%";
+    item.offsetLeft;
+    item.style.padding = "0px 10%";
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-010.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-010.html
new file mode 100644
index 0000000000..18c8a9b7c8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-010.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+    width: 100px;
+}
+.child {
+    min-width: 80px;
+    min-height: 100px;
+    padding: 0px 10px;
+    background: red;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    height: 100px;
+}
+.grid {
+    background: none;
+    grid-template-rows: 100px;
+}
+#item {
+    padding: 0px 10%;
+    background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container ref"><div class="child"></div></div>
+<div class="container grid"><div class="child" id="item"></div></div>
+<script>
+    item.offsetLeft;
+    item.style.padding = "0px 50%";
+    item.offsetLeft;
+    item.style.padding = "0px 10%";
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-011.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-011.html
new file mode 100644
index 0000000000..a6aaed5ddf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-011.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+    font: 80px/1 Ahem;
+    width: 100px;
+}
+.child {
+    padding: 10px 0px;
+    color: red;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    background: red;
+    height: 100px;
+}
+.grid {
+    background: green;
+}
+#item {
+    padding: 10px 0px;
+    color: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container ref"><div class="child">X</div></div>
+<div class="container grid"><div class="child" id="item">X</div></div>
+<script>
+    item.offsetLeft;
+    item.style.width = "0px";
+    item.offsetLeft;
+    item.style.width = "auto";
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-012.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-012.html
new file mode 100644
index 0000000000..771a1c8fef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-012.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+    width: 100px;
+}
+.child {
+    width: 100px;
+    height: 80px;
+    padding: 10px 0px;
+    background: red;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    background: none;
+    height: 100px;
+}
+.grid {
+    background: none;
+}
+#item {
+    padding: 10% 0px;
+    background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container ref"><div class="child"></div></div>
+<div class="container grid"><div class="child" id="item"></div></div>
+<script>
+    item.offsetLeft;
+    item.style.height = "0px";
+    item.offsetLeft;
+    item.style.height = "80px";
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-013.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-013.html
new file mode 100644
index 0000000000..5e6ff09646
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-013.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+    width: 100px;
+}
+.child {
+    width: 100px;
+    height: 80px;
+    padding: 10px 0px;
+    background: red;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    height: 100px;
+}
+.grid {
+    background: none;
+}
+#item {
+    padding: 10% 0px;
+    background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container ref"><div class="child"></div></div>
+<div class="container grid"><div class="child" id="item"></div></div>
+<script>
+    item.offsetLeft;
+    item.style.padding = "50% 0px";
+    item.offsetLeft;
+    item.style.padding = "10% 0px";
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-014.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-014.html
new file mode 100644
index 0000000000..2a9bd67ec4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-014.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage paddings</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage paddings are resolved correctly in a 'auto' sized grid area after changing the item's width and forcing a new layout.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.container {
+    width: 100px;
+}
+.child {
+    min-width: 100px;
+    min-height: 80px;
+    padding: 10px 0px;
+    background: red;
+}
+.ref {
+    position: absolute;
+    z-index: -1;
+    height: 100px;
+}
+.grid {
+    background: none;
+}
+#item {
+    padding: 10% 0px;
+    background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container ref"><div class="child"></div></div>
+<div class="container grid"><div class="child" id="item"></div></div>
+<script>
+    item.offsetLeft;
+    item.style.padding = "50% 0px";
+    item.offsetLeft;
+    item.style.padding = "10% 0px";
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-015.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-015.html
new file mode 100644
index 0000000000..d6e8b7a4e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-015.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<meta name="assert" content="Checks that the %-padding accessed from script, for an OOF descendant resolves correctly.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('#target')">
+  <div style="display: inline-grid; position: relative; grid-template: 50px 20px / 50px 20px;">
+    <div style="grid-area: 2/2/2/2;">
+      <div id="target" style="position: absolute; top: 0; left: 0; grid-area: 1/1/1/1; padding: 100%; background: green;" data-expected-padding-left="50" data-expected-padding-top="50"></div>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-001.html
new file mode 100644
index 0000000000..a21ab29de9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-001.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage paddings vertical-lr</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage paddings are resolved against the inline size of their grid area (in a fixed size track) in a vertical-lr grid container.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  font: 10px/1 Ahem;
+  grid-template-columns: 100px;
+  height: 500px;
+  justify-items: start;
+  position: relative;
+  writing-mode: vertical-lr;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) {
+  background: magenta;
+  width: 10px;
+  height: 100%;
+}
+
+.paddingLeft50Percent { padding-left: 50%; }
+.paddingRight50Percent { padding-right: 50%; }
+.paddingTop50Percent { padding-top: 50%; }
+.paddingBottom50Percent { padding-bottom: 50%; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item padding-left: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-right: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-top: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-bottom: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item padding-left: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-right: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-top: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-bottom: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-002.html
new file mode 100644
index 0000000000..786efe8203
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-002.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage paddings vertical-lr</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage paddings are resolved against the inline size of their grid area (in a track with fixed max sizing function and intrinsic min) in a vertical-lr grid container.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  font: 10px/1 Ahem;
+  grid-template-columns: minmax(auto, 100px);
+  height: 500px;
+  justify-items: start;
+  position: relative;
+  writing-mode: vertical-lr;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) {
+  background: magenta;
+  width: 10px;
+  height: 100%;
+}
+
+.paddingLeft50Percent { padding-left: 50%; }
+.paddingRight50Percent { padding-right: 50%; }
+.paddingTop50Percent { padding-top: 50%; }
+.paddingBottom50Percent { padding-bottom: 50%; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item padding-left: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-right: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-top: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-bottom: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item padding-left: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-right: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="60" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-top: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-bottom: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="10" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-001.html
new file mode 100644
index 0000000000..5bb2566286
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-001.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage paddings vertical-rl</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage paddings are resolved against the inline size of their grid area (in a fixed size track) in a vertical-rl grid container.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  font: 10px/1 Ahem;
+  grid-template-columns: 100px;
+  height: 500px;
+  justify-items: start;
+  position: relative;
+  writing-mode: vertical-rl;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) {
+  background: magenta;
+  width: 10px;
+  height: 100%;
+}
+
+.paddingLeft50Percent { padding-left: 50%; }
+.paddingRight50Percent { padding-right: 50%; }
+.paddingTop50Percent { padding-top: 50%; }
+.paddingBottom50Percent { padding-bottom: 50%; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item padding-left: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-right: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-top: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-bottom: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item padding-left: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-right: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-top: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-bottom: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-002.html
new file mode 100644
index 0000000000..5502aecd68
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-002.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with percentage paddings vertical-rl</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#item-margins">
+<meta name="assert" content="Checks grid items percentage paddings are resolved against the inline size of their grid area (in a track with fixed max sizing function and intrinsic min) in a vertical-rl grid container.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  font: 10px/1 Ahem;
+  grid-template-columns: minmax(auto, 100px);
+  height: 500px;
+  justify-items: start;
+  position: relative;
+  writing-mode: vertical-rl;
+}
+
+.grid > div:nth-child(1) { background: cyan; }
+.grid > div:nth-child(2) {
+  background: magenta;
+  width: 10px;
+  height: 100%;
+}
+
+.paddingLeft50Percent { padding-left: 50%; }
+.paddingRight50Percent { padding-right: 50%; }
+.paddingTop50Percent { padding-top: 50%; }
+.paddingBottom50Percent { padding-bottom: 50%; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<pre>Item padding-left: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-right: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-top: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-bottom: 50%;</pre>
+
+<div class="grid">
+  <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<pre>Item padding-left: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingLeft50Percent" data-expected-padding-left="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-right: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingRight50Percent" data-expected-padding-right="50" data-expected-width="60" data-expected-height="10">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-top: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingTop50Percent" data-expected-padding-top="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
+
+<pre>Item padding-bottom: 50%;</pre>
+
+<div class="grid directionRTL">
+  <div class="paddingBottom50Percent" data-expected-padding-bottom="50" data-expected-width="10" data-expected-height="60">X</div>
+  <div data-offset-x="0" data-offset-y="400" data-expected-width="10" data-expected-height="100"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-relative-offsets-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-relative-offsets-001.html
new file mode 100644
index 0000000000..8d2b7e08a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-relative-offsets-001.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with relative offsets</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing">
+<meta name="assert" content="Checks that relative offests work for grid items.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+.grid {
+  position: relative;
+  grid: 90px 60px 30px / 200px 150px 100px;
+  inline-size: 600px;
+  block-size: 300px;
+}
+
+.grid > div { position: relative; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<div class="grid">
+  <div class="firstRowFirstColumn" style="left: 10px; top: 9px;"
+    data-offset-x="10" data-offset-y="9" data-expected-width="200" data-expected-height="90"></div>
+  <div class="secondRowSecondColumn" style="left: -15px; top: -12px;"
+    data-offset-x="185" data-offset-y="78" data-expected-width="150" data-expected-height="60"></div>
+  <div class="thirdRowThirdColumn" style="right: 30px; bottom: 21px;"
+    data-offset-x="320" data-offset-y="129" data-expected-width="100" data-expected-height="30"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<div class="grid directionRTL">
+  <div class="firstRowFirstColumn" style="left: 10px; top: 9px;"
+    data-offset-x="410" data-offset-y="9" data-expected-width="200" data-expected-height="90"></div>
+  <div class="secondRowSecondColumn" style="left: -15px; top: -12px;"
+    data-offset-x="235" data-offset-y="78" data-expected-width="150" data-expected-height="60"></div>
+  <div class="thirdRowThirdColumn" style="right: 30px; bottom: 21px;"
+    data-offset-x="120" data-offset-y="129" data-expected-width="100" data-expected-height="30"></div>
+</div>
+
+<h2>Writing Mode vertical-lr</h2>
+
+<h3>Direction LTR</h3>
+
+<div class="grid verticalLR">
+  <div class="firstRowFirstColumn" style="left: 9px; top: 10px;"
+    data-offset-x="9" data-offset-y="10" data-expected-width="90" data-expected-height="200"></div>
+  <div class="secondRowSecondColumn" style="left: -12px; top: -15px;"
+    data-offset-x="78" data-offset-y="185" data-expected-width="60" data-expected-height="150"></div>
+  <div class="thirdRowThirdColumn" style="right: 21px; bottom: 30px;"
+    data-offset-x="129" data-offset-y="320" data-expected-width="30" data-expected-height="100"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<div class="grid verticalLR directionRTL">
+  <div class="firstRowFirstColumn" style="left: 9px; top: 10px;"
+    data-offset-x="9" data-offset-y="410" data-expected-width="90" data-expected-height="200"></div>
+  <div class="secondRowSecondColumn" style="left: -12px; top: -15px;"
+    data-offset-x="78" data-offset-y="235" data-expected-width="60" data-expected-height="150"></div>
+  <div class="thirdRowThirdColumn" style="right: 21px; bottom: 30px;"
+    data-offset-x="129" data-offset-y="120" data-expected-width="30" data-expected-height="100"></div>
+</div>
+
+<h2>Writing Mode vertical-rl</h2>
+
+<h3>Direction LTR</h3>
+
+<div class="grid verticalRL">
+  <div class="firstRowFirstColumn" style="left: 9px; top: 10px;"
+    data-offset-x="219" data-offset-y="10" data-expected-width="90" data-expected-height="200"></div>
+  <div class="secondRowSecondColumn" style="left: -12px; top: -15px;"
+    data-offset-x="138" data-offset-y="185" data-expected-width="60" data-expected-height="150"></div>
+  <div class="thirdRowThirdColumn" style="right: 21px; bottom: 30px;"
+    data-offset-x="99" data-offset-y="320" data-expected-width="30" data-expected-height="100"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<div class="grid verticalRL directionRTL">
+  <div class="firstRowFirstColumn" style="left: 9px; top: 10px;"
+    data-offset-x="219" data-offset-y="410" data-expected-width="90" data-expected-height="200"></div>
+  <div class="secondRowSecondColumn" style="left: -12px; top: -15px;"
+    data-offset-x="138" data-offset-y="235" data-expected-width="60" data-expected-height="150"></div>
+  <div class="thirdRowThirdColumn" style="right: 21px; bottom: 30px;"
+    data-offset-x="99" data-offset-y="120" data-expected-width="30" data-expected-height="100"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-relative-offsets-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-relative-offsets-002.html
new file mode 100644
index 0000000000..fb0cfd7549
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-relative-offsets-002.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items with relative offsets</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing">
+<meta name="assert" content="Checks that relative percentage offests work for grid items.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+.grid {
+  position: relative;
+  grid: 90px 60px 30px / 200px 150px 100px;
+  inline-size: 600px;
+  block-size: 300px;
+}
+
+.grid > div { position: relative; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<h3>Direction LTR</h3>
+
+<div class="grid">
+  <div class="firstRowFirstColumn" style="left: 5%; top: 10%;"
+    data-offset-x="10" data-offset-y="9" data-expected-width="200" data-expected-height="90"></div>
+  <div class="secondRowSecondColumn" style="left: -10%; top: -20%;"
+    data-offset-x="185" data-offset-y="78" data-expected-width="150" data-expected-height="60"></div>
+  <div class="thirdRowThirdColumn" style="right: 30%; bottom: 70%;"
+    data-offset-x="320" data-offset-y="129" data-expected-width="100" data-expected-height="30"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<div class="grid directionRTL">
+  <div class="firstRowFirstColumn" style="left: 5%; top: 10%;"
+    data-offset-x="410" data-offset-y="9" data-expected-width="200" data-expected-height="90"></div>
+  <div class="secondRowSecondColumn" style="left: -10%; top: -20%;"
+    data-offset-x="235" data-offset-y="78" data-expected-width="150" data-expected-height="60"></div>
+  <div class="thirdRowThirdColumn" style="right: 30%; bottom: 70%;"
+    data-offset-x="120" data-offset-y="129" data-expected-width="100" data-expected-height="30"></div>
+</div>
+
+<h2>Writing Mode vertical-lr</h2>
+
+<h3>Direction LTR</h3>
+
+<div class="grid verticalLR">
+  <div class="firstRowFirstColumn" style="left: 10%; top: 5%;"
+    data-offset-x="9" data-offset-y="10" data-expected-width="90" data-expected-height="200"></div>
+  <div class="secondRowSecondColumn" style="left: -20%; top: -10%;"
+    data-offset-x="78" data-offset-y="185" data-expected-width="60" data-expected-height="150"></div>
+  <div class="thirdRowThirdColumn" style="right: 70%; bottom: 30%;"
+    data-offset-x="129" data-offset-y="320" data-expected-width="30" data-expected-height="100"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<div class="grid verticalLR directionRTL">
+  <div class="firstRowFirstColumn" style="left: 10%; top: 5%;"
+    data-offset-x="9" data-offset-y="410" data-expected-width="90" data-expected-height="200"></div>
+  <div class="secondRowSecondColumn" style="left: -20%; top: -10%;"
+    data-offset-x="78" data-offset-y="235" data-expected-width="60" data-expected-height="150"></div>
+  <div class="thirdRowThirdColumn" style="right: 70%; bottom: 30%;"
+    data-offset-x="129" data-offset-y="120" data-expected-width="30" data-expected-height="100"></div>
+</div>
+
+<h2>Writing Mode vertical-rl</h2>
+
+<h3>Direction LTR</h3>
+
+<div class="grid verticalRL">
+  <div class="firstRowFirstColumn" style="left: 10%; top: 5%;"
+    data-offset-x="219" data-offset-y="10" data-expected-width="90" data-expected-height="200"></div>
+  <div class="secondRowSecondColumn" style="left: -20%; top: -10%;"
+    data-offset-x="138" data-offset-y="185" data-expected-width="60" data-expected-height="150"></div>
+  <div class="thirdRowThirdColumn" style="right: 70%; bottom: 30%;"
+    data-offset-x="99" data-offset-y="320" data-expected-width="30" data-expected-height="100"></div>
+</div>
+
+<h3>Direction RTL</h3>
+
+<div class="grid verticalRL directionRTL">
+  <div class="firstRowFirstColumn" style="left: 10%; top: 5%;"
+    data-offset-x="219" data-offset-y="410" data-expected-width="90" data-expected-height="200"></div>
+  <div class="secondRowSecondColumn" style="left: -20%; top: -10%;"
+    data-offset-x="138" data-offset-y="235" data-expected-width="60" data-expected-height="150"></div>
+  <div class="thirdRowThirdColumn" style="right: 70%; bottom: 30%;"
+    data-offset-x="99" data-offset-y="120" data-expected-width="30" data-expected-height="100"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-sizing-alignment-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-sizing-alignment-001-ref.html
new file mode 100644
index 0000000000..c3eccf48eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-sizing-alignment-001-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: Grid Item Sizing</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+  button {
+    margin: 0; /* Prevent WebKit from adding some margin */
+  }
+</style>
+
+<p>Test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <button style="width: 200px; height: 200px;">Stretched button (200x200)</button><button style="width: 200px; height: 200px;">Stretched button (200x200)</button><button style="vertical-align: top;">Regular button</button>
+  <br>
+  <img style="vertical-align: top; margin-right: 150px;" src="support/50x50-green.png" alt="Image download support must be enabled" /><img src="support/200x200-green.png" alt="Image download support must be enabled" /><img style="vertical-align: top;" src="support/50x50-green.png" alt="Image download support must be enabled" />
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-sizing-alignment-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-sizing-alignment-001.html
new file mode 100644
index 0000000000..033d292ce6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-sizing-alignment-001.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid Item Sizing</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#grid-item-sizing">
+<link rel="match" href="grid-items-sizing-alignment-001-ref.html" />
+<meta name="assert" content="Checks how alignment properties affect the size of the non-replaced vs replaced grid items.">
+<style>
+  #grid {
+    display: grid;
+    grid-auto-rows: 200px;
+    grid-template-columns: repeat(3, 200px);
+  }
+  button {
+    margin: 0; /* Prevent WebKit from adding some margin */
+  }
+</style>
+
+<p>Test passes if it has the same output than the reference.</p>
+
+<div id="grid">
+  <button style="align-self: normal; justify-self: normal;">Stretched button (200x200)</button>
+  <button style="align-self: stretch; justify-self: stretch;">Stretched button (200x200)</button>
+  <button style="align-self: start; justify-self: start;">Regular button</button>
+  <img src="support/50x50-green.png" alt="Image download support must be enabled"
+    style="align-self: normal; justify-self: normal;" />
+  <img src="support/50x50-green.png" alt="Image download support must be enabled"
+    style="align-self: stretch; justify-self: stretch;" />
+  <img src="support/50x50-green.png" alt="Image download support must be enabled"
+    style="align-self: start; justify-self: start;" />
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-layout-grid-in-grid.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-layout-grid-in-grid.html
new file mode 100644
index 0000000000..605494dd27
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-layout-grid-in-grid.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Grid Layout Test: grid in grid</title>
+    <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+    <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items">
+    <link rel="match" href="../reference/grid-layout-grid-in-grid-ref.html">
+    <meta name="assert" content="the nested grid should behave the same as reference.">
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+      #caseTitle {
+        margin: 10px;
+        height: 40px;
+      }
+      #grid {
+        height: 150px;
+        width: 150px;
+        background: #eee;
+        display: grid;
+        grid-template-columns: 50px 100px;
+        grid-template-rows: 100px 50px;
+      }
+      .a {
+        background: blue;
+        grid-column: 1;
+        grid-row: 1;
+      }
+      .b {
+        background: yellow;
+        grid-column: 2;
+        grid-row: 1;
+        display: grid;
+        grid-template-columns: 50px 50px;
+        grid-template-rows: 50px 50px;
+      }
+      .b1 {
+        background: orange;
+        grid-column: 1;
+        grid-row: 1;
+      }
+      .b2 {
+        background: cyan;
+        grid-column: 2;
+        grid-row: 2;
+      }
+      .c {
+        background: pink;
+        grid-column: 2;
+        grid-row: 2;
+      }
+    </style>
+  </head>
+  <body>
+    <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+    <div id="grid">
+      <div class="a"><div style="height:100px;">&nbsp;</div></div>
+      <div class="b">
+        <div class="b1"><div style="height:50px;">&nbsp;</div></div>
+        <div class="b2"><div style="height:50px;">&nbsp;</div></div>
+      </div>
+      <div class="c"><div style="height:50px;">&nbsp;</div></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-layout-z-order-a.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-layout-z-order-a.html
new file mode 100644
index 0000000000..b5e1dec6d5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-layout-z-order-a.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Grid Layout Test: z order</title>
+    <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+    <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order">
+    <link rel="match" href="../reference/grid-layout-z-order-ref.html">
+    <meta name="assert" content="the layout should behave the same as reference.">
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+      #caseTitle {
+        margin: 10px;
+        height: 40px;
+      }
+      #grid {
+        width: 150px;
+        background: #eee;
+        display: grid;
+        grid-template-columns: 50px 50px 50px;
+        color:white;
+      }
+      .a {
+        background: blue;
+        grid-row: 1;
+        grid-column: 1 / span 2;
+        z-index:10
+      }
+      .b {
+        background: yellow;
+        grid-row: 1;
+        grid-column: 2 / span 2;
+        z-index:1
+      }
+    </style>
+  </head>
+  <body>
+    <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+    <div id="grid">
+      <div class="b">down</div>
+      <div class="a">up</div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-layout-z-order-b.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-layout-z-order-b.html
new file mode 100644
index 0000000000..e4fdc89e5f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-layout-z-order-b.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Grid Layout Test: z order</title>
+    <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+    <link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order">
+    <link rel="match" href="../reference/grid-layout-z-order-ref.html">
+    <meta name="assert" content="the layout should behave the same as reference.">
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+      #caseTitle {
+        margin: 10px;
+        height: 40px;
+      }
+      #grid {
+        width: 150px;
+        background: #eee;
+        display: grid;
+        grid-template-columns: 50px 50px 50px;
+        color:white;
+      }
+      .a {
+        background: blue;
+        grid-row: 1;
+        grid-column: 1 / 3;
+        z-index:10
+      }
+      .b {
+        background: yellow;
+        grid-row: 1;
+        grid-column: 2 / 4;
+        z-index:1
+      }
+    </style>
+  </head>
+  <body>
+    <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+    <div id="grid">
+      <div class="b">down</div>
+      <div class="a">up</div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-001.html
new file mode 100644
index 0000000000..2965fd8fb1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-001.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Minimum size of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<meta name="assert" content="Checks that minimum size for grid items is the content size.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  #constrained-grid {
+    display: grid;
+    width: 10px;
+    height: 10px;
+  }
+
+  #test-grid-item-overlapping-green {
+    color: green;
+    background-color: green;
+    font: 50px/1 Ahem;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="constrained-grid">
+  <div id="test-grid-item-overlapping-green">IT E</div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-002.html
new file mode 100644
index 0000000000..39b9d033a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-002.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Minimum size of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Checks that minimum size for grid items is the content size.">
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  #constrained-grid {
+    display: grid;
+    width: 10px;
+    height: 10px;
+  }
+
+  #test-grid-item-overlapping-green {
+    background-color: green;
+  }
+
+  #content-100x100 {
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="constrained-grid">
+  <div id="test-grid-item-overlapping-green">
+    <div id="content-100x100"></div>
+  </div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-003.html
new file mode 100644
index 0000000000..19ea84c549
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-003.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Minimum size of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Checks that minimum size for grid items is the specified size regardless of the content size.">
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  #constrained-grid {
+    display: grid;
+    width: 10px;
+    height: 10px;
+  }
+
+  #test-grid-item-overlapping-green {
+    background-color: green;
+    width: 100px;
+    height: 100px;
+  }
+
+  #content-500x500 {
+    width: 500px;
+    height: 500px;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="constrained-grid">
+  <div id="test-grid-item-overlapping-green">
+    <div id="content-500x500"></div>
+  </div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-004.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-004.html
new file mode 100644
index 0000000000..34764652a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-004.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Minimum size of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Checks that minimum size for grid items is the specified size regardless of the content size.">
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  #constrained-grid {
+    display: grid;
+    width: 10px;
+    height: 10px;
+  }
+
+  #test-grid-item-overlapping-green {
+    background-color: green;
+    width: 100px;
+    height: 100px;
+  }
+
+  #content-50x50 {
+    width: 50px;
+    height: 50px;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="constrained-grid">
+  <div id="test-grid-item-overlapping-green">
+    <div id="content-50x50"></div>
+  </div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-005.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-005.html
new file mode 100644
index 0000000000..d7ac67af4d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-005.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Minimum size of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items">
+<link rel="match" href="ref-filled-green-100px-square-image.html">
+<meta name="flags" content="image">
+<meta name="assert" content="Checks that minimum size for grid items is the content size.">
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  #constrained-grid {
+    display: grid;
+    width: 10px;
+    height: 10px;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="constrained-grid">
+  <img src="support/100x100-green.png" alt="Image download support must be enabled" />
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-006.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-006.html
new file mode 100644
index 0000000000..69bbc7c098
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-006.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Minimum size of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items">
+<link rel="match" href="ref-filled-green-100px-square-image.html">
+<meta name="flags" content="image">
+<meta name="assert" content="Checks that minimum size for grid items is the specified size for width (regardless the content size) and the transferred size of the image for height (even when content size is bigger).">
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  #constrained-grid {
+    display: grid;
+    width: 10px;
+    height: 10px;
+  }
+
+  #test-grid-item-overlapping-green {
+    width: 100px;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="constrained-grid">
+  <img id="test-grid-item-overlapping-green" src="support/200x200-green.png" alt="Image download support must be enabled" />
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-007.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-007.html
new file mode 100644
index 0000000000..8899ca1c7a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-007.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Minimum size of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items">
+<link rel="match" href="ref-filled-green-100px-square-image.html">
+<meta name="flags" content="image">
+<meta name="assert" content="Checks that minimum size for grid items is the specified size for width (regardless the content size) and the transferred size of the image for height (even when content size is smaller).">
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  #constrained-grid {
+    display: grid;
+    grid-template-columns: auto auto;
+    width: 10px;
+    height: 10px;
+  }
+
+  .test-grid-item-overlapping-green {
+    width: 50px;
+    justify-self: stretch;
+    align-self: stretch;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="constrained-grid">
+  <img class="test-grid-item-overlapping-green" src="support/25x50-green.png" alt="Image download support must be enabled" />
+  <img class="test-grid-item-overlapping-green" src="support/25x50-green.png" alt="Image download support must be enabled" />
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-008.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-008.html
new file mode 100644
index 0000000000..c945490c48
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-008.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Minimum size of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items">
+<link rel="match" href="ref-filled-green-100px-square-image.html">
+<meta name="flags" content="image">
+<meta name="assert" content="Checks that minimum size for grid items is the specified size for height (regardless the content size) and the transferred size of the image for width (even when content size is bigger).">
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  #constrained-grid {
+    display: grid;
+    width: 10px;
+    height: 10px;
+  }
+
+  #test-grid-item-overlapping-green {
+    height: 100px;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="constrained-grid">
+  <img id="test-grid-item-overlapping-green" src="support/200x200-green.png" alt="Image download support must be enabled" />
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-009.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-009.html
new file mode 100644
index 0000000000..77d8979cbd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-009.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Minimum size of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items">
+<link rel="match" href="ref-filled-green-100px-square-image.html">
+<meta name="flags" content="image">
+<meta name="assert" content="Checks that minimum size for grid items is the specified size for height (regardless the content size) and the transferred size for width of the image (even when content size is smaller).">
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  #constrained-grid {
+    display: grid;
+    width: 10px;
+    height: 10px;
+  }
+
+  .test-grid-item-overlapping-green {
+    height: 50px;
+    justify-self: stretch;
+    align-self: stretch;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="constrained-grid">
+  <img class="test-grid-item-overlapping-green" src="support/50x25-green.png" alt="Image download support must be enabled" />
+  <img class="test-grid-item-overlapping-green" src="support/50x25-green.png" alt="Image download support must be enabled" />
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-010.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-010.html
new file mode 100644
index 0000000000..a2406a5355
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-010.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Minimum size of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Checks that automatic minimum size gets clamped, so the grid item doesn't overflow the fixed size area.">
+<style>
+#reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+}
+
+#constrained-grid {
+    display: grid;
+    grid: 100px / 100px;
+}
+
+#test-grid-item-overlapping-green {
+    background-color: green;
+}
+
+#content-200x200 {
+    width: 200px;
+    height: 200px;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="constrained-grid">
+    <div id="test-grid-item-overlapping-green">
+        <div id="content-200x200"></div>
+    </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-011.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-011.html
new file mode 100644
index 0000000000..d769cdee52
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-011.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Minimum size of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Checks that automatic minimum size gets clamped, so the grid item doesn't overflow the fixed size area.">
+<style>
+#reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+}
+
+#constrained-grid {
+    display: grid;
+    width: 100px;
+    height: 100px;
+    grid: minmax(0px, 500px) / minmax(0px, 500px);
+}
+
+#test-grid-item-overlapping-green {
+    background-color: green;
+}
+
+#content-200x200 {
+    width: 200px;
+    height: 200px;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="constrained-grid">
+    <div id="test-grid-item-overlapping-green">
+        <div id="content-200x200"></div>
+    </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-012.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-012.html
new file mode 100644
index 0000000000..2a39c9bda1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-012.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Minimum size of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Checks that automatic minimum size gets clamped, so the grid item doesn't overflow the fixed size area.">
+<style>
+#reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+}
+
+#constrained-grid {
+    display: grid;
+    width: 100px;
+    height: 100px;
+    grid: minmax(0px, auto) / minmax(0px, auto);
+}
+
+#test-grid-item-overlapping-green {
+    background-color: green;
+}
+
+#content-200x200 {
+    width: 200px;
+    height: 200px;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="constrained-grid">
+    <div id="test-grid-item-overlapping-green">
+        <div id="content-200x200"></div>
+    </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-013.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-013.html
new file mode 100644
index 0000000000..813f4a15a8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-013.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Minimum size of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<meta name="assert" content="Checks that automatic minimum size is not clamped if the grid item has not stretch alignment.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+#reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+}
+
+#constrained-grid {
+    display: grid;
+    grid: 10px / 10px;
+}
+
+#test-grid-item-overlapping-green {
+    color: green;
+    background-color: green;
+    font: 50px/1 Ahem;
+    justify-self: start;
+    align-self: start;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="constrained-grid">
+    <div id="test-grid-item-overlapping-green">IT E</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-014.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-014.html
new file mode 100644
index 0000000000..09e3fd5818
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-014.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Minimum size of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Checks that automatic minimum size is not clamped if the grid item has not stretch alignment.">
+<style>
+#reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+}
+
+#constrained-grid {
+    display: grid;
+    grid: 10px / 10px;
+}
+
+#test-grid-item-overlapping-green {
+    background-color: green;
+    justify-self: start;
+    align-self: start;
+}
+
+#content-100x100 {
+    width: 100px;
+    height: 100px;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="constrained-grid">
+    <div id="test-grid-item-overlapping-green">
+        <div id="content-100x100"></div>
+    </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-015.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-015.html
new file mode 100644
index 0000000000..0d36aaa822
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-015.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Minimum size of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Checks that automatic minimum size is not clamped if the grid item if it spans some not fixed grid tracks.">
+<style>
+#reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+}
+
+#constrained-grid {
+    display: grid;
+    grid: 10px auto 10px / 10px auto 10px;
+    justify-content: start;
+}
+
+#test-grid-item-overlapping-green {
+    background-color: green;
+    grid-row: span 3;
+    grid-column: span 3;
+}
+
+#content-100x100 {
+    width: 100px;
+    height: 100px;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="constrained-grid">
+    <div id="test-grid-item-overlapping-green">
+        <div id="content-100x100"></div>
+    </div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-016.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-016.html
new file mode 100644
index 0000000000..26a3572738
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-016.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Minimum size of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Checks that automatic minimum size is clamped if the grid item only spans fixed grid tracks.">
+<style>
+#reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+}
+
+#constrained-grid {
+    display: grid;
+    grid: 50px 30px 20px / 50px 30px 20px;
+}
+
+#test-grid-item-overlapping-green {
+    background-color: green;
+    grid-row: span 3;
+    grid-column: span 3;
+}
+
+#content-200x200 {
+    width: 200px;
+    height: 200px;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="constrained-grid">
+    <div id="test-grid-item-overlapping-green">
+        <div id="content-200x200"></div>
+    </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-017.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-017.html
new file mode 100644
index 0000000000..4cb74022aa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-017.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Minimum size of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Checks that automatic minimum size is clamped even if the track has an 'auto' min track sizing function as the max track sizing function is fixed.">
+<style>
+#reference-overlapped-green {
+    position: absolute;
+    background-color: green;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+}
+
+#constrained-grid {
+    display: grid;
+    width: 10px;
+    height: 10px;
+    grid: minmax(auto, 0px) / minmax(auto, 0px);
+}
+
+#test-grid-item-overlapping-red {
+    background-color: red;
+}
+
+#content-100x100 {
+    width: 100px;
+    height: 100px;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-green"></div>
+<div id="constrained-grid">
+    <div id="test-grid-item-overlapping-red">
+        <div id="content-100x100"></div>
+    </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-018.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-018.html
new file mode 100644
index 0000000000..4e944295ab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-018.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Minimum size of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Checks that automatic minimum size is clamped even if the track has an 'auto' min track sizing function as the max track sizing function is fixed.">
+<style>
+#reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+}
+
+#constrained-grid {
+    display: grid;
+    width: 10px;
+    height: 10px;
+    grid: minmax(auto, 500px) / minmax(auto, 500px);
+}
+
+#test-grid-item-overlapping-green {
+    background-color: green;
+}
+
+#content-100x100 {
+    width: 100px;
+    height: 100px;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="constrained-grid">
+    <div id="test-grid-item-overlapping-green">
+        <div id="content-100x100"></div>
+    </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-019.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-019.html
new file mode 100644
index 0000000000..ae18e61399
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-019.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Minimum size of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Checks that automatic minimum size gets clamped, so the grid item doesn't overflow the fixed size area.">
+<style>
+#reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+}
+
+#constrained-grid {
+    display: grid;
+    width: 500px;
+    height: 200px;
+    grid: 50% / 20%;
+}
+
+#test-grid-item-overlapping-green {
+    background-color: green;
+}
+
+#content-200x200 {
+    width: 200px;
+    height: 200px;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="constrained-grid">
+    <div id="test-grid-item-overlapping-green">
+        <div id="content-200x200"></div>
+    </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-020.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-020.html
new file mode 100644
index 0000000000..2e8b47377d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-020.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Minimum size of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Checks that automatic minimum size is clamped if the grid item only spans fixed grid tracks.">
+<style>
+#reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+}
+
+#constrained-grid {
+    display: grid;
+    width: 200px;
+    height: 500px;
+    grid: 10% 30px 20px / 50px 30px 10%;
+}
+
+#test-grid-item-overlapping-green {
+    background-color: green;
+    grid-row: span 3;
+    grid-column: span 3;
+}
+
+#content-200x200 {
+    width: 200px;
+    height: 200px;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="constrained-grid">
+    <div id="test-grid-item-overlapping-green">
+        <div id="content-200x200"></div>
+    </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-021.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-021.html
new file mode 100644
index 0000000000..114f90a292
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-021.html
@@ -0,0 +1,228 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Minimum size of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#algo-track-sizing" title="12.3. Track Sizing Algorithm">
+<meta name="assert" content="Checks how automatic minimum size of images affect to the calculation of the grid container size and the grid tracks. Verifies the sizing of the image in the different cases too.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .grid {
+    display: inline-grid;
+    grid-template-rows: auto;
+    grid-template-columns: auto;
+    font: 25px/1 Ahem;
+  }
+
+  .grid2rows {
+    grid-template-rows: auto auto;
+  }
+
+  .constrainedGrid {
+    width: 10px;
+    height: 10px;
+  }
+
+  .item {
+    background: black;
+    width: 100px;
+    height: 25px;
+  }
+
+  .justifyContentStart {
+    justify-content: start;
+  }
+
+  .width200px {
+    width: 200px;
+  }
+
+  .width100percent {
+    width: 100%;
+  }
+</style>
+
+<script>
+  function checkGridSizeTracksAndImageSize(gridId, imgId, gridWidth, gridHeight, gridColumns, gridRows, imgWidth, imgHeight) {
+    const gridStyle = getComputedStyle(document.getElementById(gridId));
+    const imgStyle = getComputedStyle(document.getElementById(imgId));
+
+    test(
+      function() {
+        assert_equals(gridStyle.width, gridWidth);
+      }, gridId + ".width");
+    test(
+      function() {
+        assert_equals(gridStyle.height, gridHeight);
+      }, gridId + ".height");
+    test(
+      function() {
+        assert_equals(gridStyle.gridTemplateColumns, gridColumns);
+      }, gridId + ".gridTemplateColumns");
+    test(
+      function() {
+        assert_equals(gridStyle.gridTemplateRows, gridRows);
+      }, gridId + ".gridTemplateRows");
+    test(
+      function() {
+        assert_equals(imgStyle.width, imgWidth);
+      }, imgId + ".width");
+    test(
+      function() {
+        assert_equals(imgStyle.height, imgHeight);
+      }, imgId + ".height");
+  }
+
+  setup({ explicit_done: true });
+
+  function runTests() {
+    checkGridSizeTracksAndImageSize("grid-1", "img-1", "200px", "200px", "200px", "200px", "200px", "200px");
+    checkGridSizeTracksAndImageSize("grid-2", "img-2", "10px", "10px", "200px", "200px", "200px", "200px");
+    checkGridSizeTracksAndImageSize("grid-3", "img-3", "200px", "200px", "200px", "200px", "200px", "200px");
+    checkGridSizeTracksAndImageSize("grid-4", "img-4", "200px", "10px", "200px", "200px", "200px", "200px");
+    checkGridSizeTracksAndImageSize("grid-5", "img-5", "200px", "50px", "50px", "50px", "50px", "50px");
+    checkGridSizeTracksAndImageSize("grid-6", "img-6", "200px", "10px", "50px", "50px", "50px", "50px");
+    checkGridSizeTracksAndImageSize("grid-7", "img-7", "200px", "225px", "200px", "200px 25px", "200px", "200px");
+    checkGridSizeTracksAndImageSize("grid-8", "img-8", "10px", "10px", "200px", "200px 25px", "200px", "200px");
+    checkGridSizeTracksAndImageSize("grid-9", "img-9", "200px", "225px", "200px", "200px 25px", "200px", "200px");
+    checkGridSizeTracksAndImageSize("grid-10", "img-10", "200px", "10px", "200px", "200px 25px", "200px", "200px");
+    checkGridSizeTracksAndImageSize("grid-11", "img-11", "200px", "125px", "100px", "100px 25px", "100px", "100px");
+    checkGridSizeTracksAndImageSize("grid-12", "img-12", "200px", "10px", "100px", "100px 25px", "100px", "100px");
+    checkGridSizeTracksAndImageSize("grid-13", "img-13", "200px", "200px", "200px", "200px", "200px", "200px");
+    checkGridSizeTracksAndImageSize("grid-14", "img-14", "10px", "10px", "200px", "200px", "200px", "200px");
+    checkGridSizeTracksAndImageSize("grid-15", "img-15", "200px", "200px", "200px", "200px", "200px", "200px");
+    checkGridSizeTracksAndImageSize("grid-16", "img-16", "200px", "10px", "200px", "200px", "200px", "200px");
+    checkGridSizeTracksAndImageSize("grid-17", "img-17", "200px", "200px", "200px", "200px", "200px", "200px");
+    checkGridSizeTracksAndImageSize("grid-18", "img-18", "200px", "10px", "200px", "200px", "200px", "200px");
+    checkGridSizeTracksAndImageSize("grid-19", "img-19", "200px", "225px", "200px", "200px 25px", "200px", "200px");
+    checkGridSizeTracksAndImageSize("grid-20", "img-20", "10px", "10px", "200px", "200px 25px", "200px", "200px");
+    checkGridSizeTracksAndImageSize("grid-21", "img-21", "200px", "225px", "200px", "200px 25px", "200px", "200px");
+    checkGridSizeTracksAndImageSize("grid-22", "img-22", "200px", "10px", "200px", "200px 25px", "200px", "200px");
+    checkGridSizeTracksAndImageSize("grid-23", "img-23", "200px", "225px", "200px", "200px 25px", "200px", "200px");
+    checkGridSizeTracksAndImageSize("grid-24", "img-24", "200px", "10px", "200px", "200px 25px", "200px", "200px");
+
+    done();
+  }
+</script>
+
+<body onload="document.fonts.ready.then(() => { runTests(); })">
+<div id=log></div>
+
+<!-- Grids with only a 50x50 image as grid item. -->
+
+<div id="grid-1" class="grid">
+  <img id="img-1" class="width200px" src="support/50x50-green.png">
+</div>
+
+<div id="grid-2" class="grid constrainedGrid">
+  <img id="img-2" class="width200px" src="support/50x50-green.png">
+</div>
+
+<div id="grid-3" class="grid width200px">
+  <img id="img-3" class="width100percent" src="support/50x50-green.png">
+</div>
+
+<div id="grid-4" class="grid width200px constrainedGrid">
+  <img id="img-4" class="width100percent" src="support/50x50-green.png">
+</div>
+
+<div id="grid-5" class="grid width200px justifyContentStart">
+  <img id="img-5" class="width100percent" src="support/50x50-green.png">
+</div>
+
+<div id="grid-6" class="grid width200px constrainedGrid justifyContentStart">
+  <img id="img-6" class="width100percent" src="support/50x50-green.png">
+</div>
+
+<!-- Grids with a 50x50 image as grid item and a 100x25 text grid item. -->
+
+<div id="grid-7" class="grid grid2rows">
+  <img id="img-7" class="width200px" src="support/50x50-green.png">
+  <span class="item"></span>
+</div>
+
+<div id="grid-8" class="grid grid2rows constrainedGrid">
+  <img id="img-8" class="width200px" src="support/50x50-green.png">
+  <span class="item"></span>
+</div>
+
+<div id="grid-9" class="grid grid2rows width200px">
+  <img id="img-9" class="width100percent" src="support/50x50-green.png">
+  <span class="item"></span>
+</div>
+
+<div id="grid-10" class="grid grid2rows width200px constrainedGrid">
+  <img id="img-10" class="width100percent" src="support/50x50-green.png">
+  <span class="item"></span>
+</div>
+
+<div id="grid-11" class="grid grid2rows width200px justifyContentStart">
+  <img id="img-11" class="width100percent" src="support/50x50-green.png">
+  <span class="item"></span>
+</div>
+
+<div id="grid-12" class="grid grid2rows width200px constrainedGrid justifyContentStart">
+  <img id="img-12" class="width100percent" src="support/50x50-green.png">
+  <span class="item"></span>
+</div>
+
+<!-- Grids with only a 500x500 image as grid item. -->
+
+<div id="grid-13" class="grid">
+  <img id="img-13" class="width200px" src="support/500x500-green.png">
+</div>
+
+<div id="grid-14" class="grid constrainedGrid">
+  <img id="img-14" class="width200px" src="support/500x500-green.png">
+</div>
+
+<div id="grid-15" class="grid width200px">
+  <img id="img-15" class="width100percent" src="support/500x500-green.png">
+</div>
+
+<div id="grid-16" class="grid width200px constrainedGrid">
+  <img id="img-16" class="width100percent" src="support/500x500-green.png">
+</div>
+
+<div id="grid-17" class="grid width200px justifyContentStart">
+  <img id="img-17" class="width100percent" src="support/500x500-green.png">
+</div>
+
+<div id="grid-18" class="grid width200px constrainedGrid justifyContentStart">
+  <img id="img-18" class="width100percent" src="support/500x500-green.png">
+</div>
+
+<!-- Grids with a 500x500 image as grid item and a 100x25 text grid item. -->
+
+<div id="grid-19" class="grid grid2rows">
+  <img id="img-19" class="width200px" src="support/500x500-green.png">
+  <span class="item"></span>
+</div>
+
+<div id="grid-20" class="grid grid2rows constrainedGrid">
+  <img id="img-20" class="width200px" src="support/500x500-green.png">
+  <span class="item"></span>
+</div>
+
+<div id="grid-21" class="grid grid2rows width200px">
+  <img id="img-21" class="width100percent" src="support/500x500-green.png">
+  <span class="item"></span>
+</div>
+
+<div id="grid-22" class="grid grid2rows width200px constrainedGrid">
+  <img id="img-22" class="width100percent" src="support/500x500-green.png">
+  <span class="item"></span>
+</div>
+
+<div id="grid-23" class="grid grid2rows width200px justifyContentStart">
+  <img id="img-23" class="width100percent" src="support/500x500-green.png">
+  <span class="item"></span>
+</div>
+
+<div id="grid-24" class="grid grid2rows width200px constrainedGrid justifyContentStart">
+  <img id="img-24" class="width100percent" src="support/500x500-green.png">
+  <span class="item"></span>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-022.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-022.html
new file mode 100644
index 0000000000..38e1a1bb26
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-022.html
@@ -0,0 +1,355 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Minimum size of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
+<meta name="assert" content="Checks that automatic minimum size is clamped with different column sizes.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  border: solid thick;
+  font: 10px/1 Ahem;
+  width: 50px;
+  height: 50px;
+  grid-template-rows: 25px 25px;
+}
+
+.grid > div:nth-child(1) {
+  color: blue;
+  background: cyan;
+}
+
+.grid > div:nth-child(2) {
+  background: magenta;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<pre>grid-template-columns: auto;</pre>
+
+<div class="grid" style="grid-template-columns: auto;">
+  <div data-expected-width="100">XXXXXXXXXX</div>
+  <div data-expected-width="100"></div>
+</div>
+
+<pre>grid-template-columns: 0px;</pre>
+
+<div class="grid" style="grid-template-columns: 0px;">
+  <div data-expected-width="0">XXXXXXXXXX</div>
+  <div data-expected-width="0"></div>
+</div>
+
+<pre>grid-template-columns: 25px;</pre>
+
+<div class="grid" style="grid-template-columns: 25px;">
+  <div data-expected-width="25">XXXXXXXXXX</div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px);</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-width="0">XXXXXXXXXX</div>
+  <div data-expected-width="0"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px);</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-width="25">XXXXXXXXXX</div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item width: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item width: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item margin width: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-width="0" style="margin: 0px 5px;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item margin width: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-width="15" style="margin: 0px 5px;"></div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item padding width: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-width="10" style="padding: 0px 5px;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item padding width: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-width="25" style="padding: 0px 5px;"></div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item border width: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-width="10" style="border: solid 5px blue;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item border width: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-width="25" style="border: solid 5px blue;"></div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item width + margin + border + padding: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item width + margin + border + padding: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-width="25"></div>
+</div>
+
+<h3>grid content writing-mode: vertical-lr;</h3>
+
+<pre>grid-template-columns: auto;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: auto;">
+  <div data-expected-height="100">XXXXXXXXXX</div>
+  <div data-expected-height="100"></div>
+</div>
+
+<pre>grid-template-columns: 0px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: 0px;">
+  <div data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-columns: 25px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: 25px;">
+  <div data-expected-height="25">XXXXXXXXXX</div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px);</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px);</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="25">XXXXXXXXXX</div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item margin height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="0" style="margin: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item margin height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="15" style="margin: 5px 0px;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item padding height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="10" style="padding: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item padding height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="25" style="padding: 5px 0px;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item border height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="10" style="border: solid 5px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item border height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="25" style="border: solid 5px blue;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<h3>grid content writing-mode: vertical-rl;</h3>
+
+<pre>grid-template-columns: auto;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: auto;">
+  <div data-expected-height="100">XXXXXXXXXX</div>
+  <div data-expected-height="100"></div>
+</div>
+
+<pre>grid-template-columns: 0px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: 0px;">
+  <div data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-columns: 25px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: 25px;">
+  <div data-expected-height="25">XXXXXXXXXX</div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px);</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px);</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="25">XXXXXXXXXX</div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item margin height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="0" style="margin: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item margin height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="15" style="margin: 5px 0px;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item padding height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="10" style="padding: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item padding height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="25" style="padding: 5px 0px;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item border height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="10" style="border: solid 5px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item border height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="25" style="border: solid 5px blue;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px);">
+  <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 25px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 25px);">
+  <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="25"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-023.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-023.html
new file mode 100644
index 0000000000..8993e2fb1b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-023.html
@@ -0,0 +1,465 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Minimum size of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
+<meta name="assert" content="Checks that automatic minimum size is clamped with different row sizes.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  border: solid thick;
+  font: 10px/1 Ahem;
+  width: 50px;
+  height: 50px;
+  grid-template-columns: 25px 25px;
+  margin: 50px 0px;
+}
+
+.grid > div:nth-child(1) {
+  color: blue;
+  background: cyan;
+}
+
+.grid > div:nth-child(2) {
+  background: magenta;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<h3>item writing-mode: vertical-lr;</h3>
+
+<pre>grid-template-rows: auto;</pre>
+
+<div class="grid" style="grid-template-rows: auto;">
+  <div class="verticalLR" data-expected-height="100">XXXXXXXXXX</div>
+  <div data-expected-height="100"></div>
+</div>
+
+<pre>grid-template-rows: 0px;</pre>
+
+<div class="grid" style="grid-template-rows: 0px;">
+  <div class="verticalLR" data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-rows: 25px;</pre>
+
+<div class="grid" style="grid-template-rows: 25px;">
+  <div class="verticalLR" data-expected-height="25">XXXXXXXXXX</div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="verticalLR" data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="verticalLR" data-expected-height="25">XXXXXXXXXX</div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="verticalLR" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="verticalLR" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item margin height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="verticalLR" data-expected-height="0" style="margin: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item margin height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="verticalLR" data-expected-height="15" style="margin: 5px 0px;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item padding height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="verticalLR" data-expected-height="10" style="padding: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item padding height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="verticalLR" data-expected-height="25" style="padding: 5px 0px;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item border height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="verticalLR" data-expected-height="10" style="border: solid 5px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item border height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="verticalLR" data-expected-height="25" style="border: solid 5px blue;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="verticalLR" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="verticalLR" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<h3>item writing-mode: vertical-rl;</h3>
+
+<pre>grid-template-rows: auto;</pre>
+
+<div class="grid" style="grid-template-rows: auto;">
+  <div class="verticalRL" data-expected-height="100">XXXXXXXXXX</div>
+  <div data-expected-height="100"></div>
+</div>
+
+<pre>grid-template-rows: 0px;</pre>
+
+<div class="grid" style="grid-template-rows: 0px;">
+  <div class="verticalRL" data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-rows: 25px;</pre>
+
+<div class="grid" style="grid-template-rows: 25px;">
+  <div class="verticalRL" data-expected-height="25">XXXXXXXXXX</div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="verticalRL" data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="verticalRL" data-expected-height="25">XXXXXXXXXX</div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="verticalRL" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="verticalRL" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item margin height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="verticalRL" data-expected-height="0" style="margin: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item margin height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="verticalRL" data-expected-height="15" style="margin: 5px 0px;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item padding height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="verticalRL" data-expected-height="10" style="padding: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item padding height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="verticalRL" data-expected-height="25" style="padding: 5px 0px;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item border height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="verticalRL" data-expected-height="10" style="border: solid 5px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item border height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="verticalRL" data-expected-height="25" style="border: solid 5px blue;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="verticalRL" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="verticalRL" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="25"></div>
+</div>
+
+<h3>grid container writing-mode: vertical-lr; &amp; item writing-mode: horizontal-tb;</h3>
+
+<pre>grid-template-rows: auto;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: auto;">
+  <div class="horizontalTB" data-expected-width="100">XXXXXXXXXX</div>
+  <div data-expected-width="100"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px);</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div>
+  <div data-expected-width="0"></div>
+</div>
+
+<pre>grid-template-rows: 25px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: 25px;">
+  <div class="horizontalTB" data-expected-width="25">XXXXXXXXXX</div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px);</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div>
+  <div data-expected-width="0"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px);</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="horizontalTB" data-expected-width="25">XXXXXXXXXX</div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item margin width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="0" style="margin: 0px 5px;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item margin width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="horizontalTB" data-expected-width="15" style="margin: 0px 5px;"></div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item padding width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="10" style="padding: 0px 5px;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item padding width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="horizontalTB" data-expected-width="25" style="padding: 0px 5px;"></div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item border width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="10" style="border: solid 5px blue;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item border width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="horizontalTB" data-expected-width="25" style="border: solid 5px blue;"></div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item width + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item width + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-width="25"></div>
+</div>
+
+<h3>grid container writing-mode: vertical-rl; &amp; item writing-mode: horizontal-tb;</h3>
+
+<pre>grid-template-rows: auto;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: auto;">
+  <div class="horizontalTB" data-expected-width="100">XXXXXXXXXX</div>
+  <div data-expected-width="100"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px);</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div>
+  <div data-expected-width="0"></div>
+</div>
+
+<pre>grid-template-rows: 25px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: 25px;">
+  <div class="horizontalTB" data-expected-width="25">XXXXXXXXXX</div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px);</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div>
+  <div data-expected-width="0"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px);</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="horizontalTB" data-expected-width="25">XXXXXXXXXX</div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item margin width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="0" style="margin: 0px 5px;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item margin width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="horizontalTB" data-expected-width="15" style="margin: 0px 5px;"></div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item padding width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="10" style="padding: 0px 5px;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item padding width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="horizontalTB" data-expected-width="25" style="padding: 0px 5px;"></div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item border width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="10" style="border: solid 5px blue;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item border width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="horizontalTB" data-expected-width="25" style="border: solid 5px blue;"></div>
+  <div data-expected-width="25"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px); item width + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 25px); item width + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 25px);">
+  <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-width="25"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-024.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-024.html
new file mode 100644
index 0000000000..fc7c91dbf1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-024.html
@@ -0,0 +1,359 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Minimum size of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
+<meta name="assert" content="Checks that automatic minimum size is clamped with different column sizes and spaning items.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  border: solid thick;
+  font: 10px/1 Ahem;
+  width: 50px;
+  height: 50px;
+  grid-template-rows: 25px 25px;
+}
+
+.grid > div {
+  grid-column: span 2;
+}
+
+.grid > div:nth-child(1) {
+  color: blue;
+  background: cyan;
+}
+
+.grid > div:nth-child(2) {
+  background: magenta;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<pre>grid-template-columns: auto auto;</pre>
+
+<div class="grid" style="grid-template-columns: auto auto;">
+  <div data-expected-width="100">XXXXXXXXXX</div>
+  <div data-expected-width="100"></div>
+</div>
+
+<pre>grid-template-columns: 0px 0px;</pre>
+
+<div class="grid" style="grid-template-columns: 0px 0px;">
+  <div data-expected-width="0">XXXXXXXXXX</div>
+  <div data-expected-width="0"></div>
+</div>
+
+<pre>grid-template-columns: 20px 20px;</pre>
+
+<div class="grid" style="grid-template-columns: 20px 20px;">
+  <div data-expected-width="40">XXXXXXXXXX</div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-width="0">XXXXXXXXXX</div>
+  <div data-expected-width="0"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-width="40">XXXXXXXXXX</div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item width: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item width: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item margin width: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-width="0" style="margin: 0px 5px;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item margin width: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-width="30" style="margin: 0px 5px;"></div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item padding width: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-width="10" style="padding: 0px 5px;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item padding width: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-width="40" style="padding: 0px 5px;"></div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item border width: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-width="10" style="border: solid 5px blue;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item border width: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-width="40" style="border: solid 5px blue;"></div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item width + margin + border + padding: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item width + margin + border + padding: 10px;</pre>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-width="40"></div>
+</div>
+
+<h3>grid content writing-mode: vertical-lr;</h3>
+
+<pre>grid-template-columns: auto auto;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: auto auto;">
+  <div data-expected-height="100">XXXXXXXXXX</div>
+  <div data-expected-height="100"></div>
+</div>
+
+<pre>grid-template-columns: 0px 0px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: 0px 0px;">
+  <div data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-columns: 20px 20px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: 20px 20px;">
+  <div data-expected-height="40">XXXXXXXXXX</div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-height="40">XXXXXXXXXX</div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item margin height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-height="0" style="margin: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item margin height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-height="30" style="margin: 5px 0px;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item padding height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-height="10" style="padding: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item padding height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-height="40" style="padding: 5px 0px;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item border height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-height="10" style="border: solid 5px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item border height: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-height="40" style="border: solid 5px blue;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<h3>grid content writing-mode: vertical-rl;</h3>
+
+<pre>grid-template-columns: auto auto;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: auto auto;">
+  <div data-expected-height="100">XXXXXXXXXX</div>
+  <div data-expected-height="100"></div>
+</div>
+
+<pre>grid-template-columns: 0px 0px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: 0px 0px;">
+  <div data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-columns: 20px 20px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: 20px 20px;">
+  <div data-expected-height="40">XXXXXXXXXX</div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-height="40">XXXXXXXXXX</div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item margin height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-height="0" style="margin: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item margin height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-height="30" style="margin: 5px 0px;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item padding height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-height="10" style="padding: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item padding height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-height="40" style="padding: 5px 0px;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item border height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-height="10" style="border: solid 5px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item border height: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-height="40" style="border: solid 5px blue;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 0px) minmax(auto, 0px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 0px) minmax(auto, 0px);">
+  <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-columns: minmax(auto, 20px) minmax(auto, 20px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-columns: minmax(auto, 20px) minmax(auto, 20px);">
+  <div data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="40"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-025.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-025.html
new file mode 100644
index 0000000000..544e71c5e0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-025.html
@@ -0,0 +1,469 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Minimum size of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.5. Implied Minimum Size of Grid Items">
+<meta name="assert" content="Checks that automatic minimum size is clamped with different row sizes and spaning items.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  border: solid thick;
+  font: 10px/1 Ahem;
+  width: 50px;
+  height: 50px;
+  grid-template-columns: 25px 25px;
+  margin: 50px 0px;
+}
+
+.grid > div {
+  grid-row: span 2;
+}
+
+.grid > div:nth-child(1) {
+  color: blue;
+  background: cyan;
+}
+
+.grid > div:nth-child(2) {
+  background: magenta;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<h3>item writing-mode: vertical-lr;</h3>
+
+<pre>grid-template-rows: auto auto;</pre>
+
+<div class="grid" style="grid-template-rows: auto auto;">
+  <div class="verticalLR" data-expected-height="100">XXXXXXXXXX</div>
+  <div data-expected-height="100"></div>
+</div>
+
+<pre>grid-template-rows: 0px 0px;</pre>
+
+<div class="grid" style="grid-template-rows: 0px 0px;">
+  <div class="verticalLR" data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-rows: 20px 20px;</pre>
+
+<div class="grid" style="grid-template-rows: 20px 20px;">
+  <div class="verticalLR" data-expected-height="40">XXXXXXXXXX</div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="verticalLR" data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="verticalLR" data-expected-height="40">XXXXXXXXXX</div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="verticalLR" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="verticalLR" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item margin height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="verticalLR" data-expected-height="0" style="margin: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item margin height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="verticalLR" data-expected-height="30" style="margin: 5px 0px;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item padding height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="verticalLR" data-expected-height="10" style="padding: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item padding height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="verticalLR" data-expected-height="40" style="padding: 5px 0px;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item border height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="verticalLR" data-expected-height="10" style="border: solid 5px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item border height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="verticalLR" data-expected-height="40" style="border: solid 5px blue;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="verticalLR" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="verticalLR" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<h3>item writing-mode: vertical-rl;</h3>
+
+<pre>grid-template-rows: auto auto;</pre>
+
+<div class="grid" style="grid-template-rows: auto auto;">
+  <div class="verticalRL" data-expected-height="100">XXXXXXXXXX</div>
+  <div data-expected-height="100"></div>
+</div>
+
+<pre>grid-template-rows: 0px 0px;</pre>
+
+<div class="grid" style="grid-template-rows: 0px 0px;">
+  <div class="verticalRL" data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-rows: 20px 20px;</pre>
+
+<div class="grid" style="grid-template-rows: 20px 20px;">
+  <div class="verticalRL" data-expected-height="40">XXXXXXXXXX</div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="verticalRL" data-expected-height="0">XXXXXXXXXX</div>
+  <div data-expected-height="0"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="verticalRL" data-expected-height="40">XXXXXXXXXX</div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="verticalRL" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="verticalRL" data-expected-height="10" style="height: 10px;">XXXXXXXXXX</div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item margin height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="verticalRL" data-expected-height="0" style="margin: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item margin height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="verticalRL" data-expected-height="30" style="margin: 5px 0px;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item padding height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="verticalRL" data-expected-height="10" style="padding: 5px 0px;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item padding height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="verticalRL" data-expected-height="40" style="padding: 5px 0px;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item border height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="verticalRL" data-expected-height="10" style="border: solid 5px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item border height: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="verticalRL" data-expected-height="40" style="border: solid 5px blue;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="verticalRL" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item height + margin + border + padding: 10px;</pre>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="verticalRL" data-expected-height="8" style="height: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-height="40"></div>
+</div>
+
+<h3>grid container writing-mode: vertical-lr; &amp; item writing-mode: horizontal-tb;</h3>
+
+<pre>grid-template-rows: auto auto;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: auto auto;">
+  <div class="horizontalTB" data-expected-width="100">XXXXXXXXXX</div>
+  <div data-expected-width="100"></div>
+</div>
+
+<pre>grid-template-rows: 0px 0px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: 0px 0px;">
+  <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div>
+  <div data-expected-width="0"></div>
+</div>
+
+<pre>grid-template-rows: 20px 20px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: 20px 20px;">
+  <div class="horizontalTB" data-expected-width="40">XXXXXXXXXX</div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div>
+  <div data-expected-width="0"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="horizontalTB" data-expected-width="40">XXXXXXXXXX</div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item margin width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="0" style="margin: 0px 5px;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item margin width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="horizontalTB" data-expected-width="30" style="margin: 0px 5px;"></div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item padding width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="10" style="padding: 0px 5px;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item padding width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="horizontalTB" data-expected-width="40" style="padding: 0px 5px;"></div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item border width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="10" style="border: solid 5px blue;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item border width: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="horizontalTB" data-expected-width="40" style="border: solid 5px blue;"></div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item width + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item width + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalLR" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-width="40"></div>
+</div>
+
+<h3>grid container writing-mode: vertical-rl; &amp; item writing-mode: horizontal-tb;</h3>
+
+<pre>grid-template-rows: auto auto;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: auto auto;">
+  <div class="horizontalTB" data-expected-width="100">XXXXXXXXXX</div>
+  <div data-expected-width="100"></div>
+</div>
+
+<pre>grid-template-rows: 0px 0px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: 0px 0px;">
+  <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div>
+  <div data-expected-width="0"></div>
+</div>
+
+<pre>grid-template-rows: 20px 20px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: 20px 20px;">
+  <div class="horizontalTB" data-expected-width="40">XXXXXXXXXX</div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="0">XXXXXXXXXX</div>
+  <div data-expected-width="0"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="horizontalTB" data-expected-width="40">XXXXXXXXXX</div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="horizontalTB" data-expected-width="10" style="width: 10px;">XXXXXXXXXX</div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item margin width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="0" style="margin: 0px 5px;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item margin width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="horizontalTB" data-expected-width="30" style="margin: 0px 5px;"></div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item padding width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="10" style="padding: 0px 5px;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item padding width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="horizontalTB" data-expected-width="40" style="padding: 0px 5px;"></div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item border width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="10" style="border: solid 5px blue;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item border width: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="horizontalTB" data-expected-width="40" style="border: solid 5px blue;"></div>
+  <div data-expected-width="40"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 0px) minmax(auto, 0px); item width + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 0px) minmax(auto, 0px);">
+  <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-width="10"></div>
+</div>
+
+<pre>grid-template-rows: minmax(auto, 20px) minmax(auto, 20px); item width + margin + border + padding: 10px;</pre>
+
+<div class="grid verticalRL" style="grid-template-rows: minmax(auto, 20px) minmax(auto, 20px);">
+  <div class="horizontalTB" data-expected-width="8" style="width: 4px; margin: 1px; padding: 1px; border: solid 1px blue;"></div>
+  <div data-expected-width="40"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-001.html
new file mode 100644
index 0000000000..22ed4957f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-001.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  #grid {
+    display: grid;
+    font: 50px/1 Ahem;
+    grid-template-columns: auto auto;
+    justify-content: start;
+    align-content: start;
+  }
+
+  #blue {
+    color: blue;
+  }
+
+  #yellow {
+    color: yellow;
+    order: 1;
+  }
+
+  #lime {
+    color: lime;
+    order: 5;
+  }
+
+  #magenta {
+    color: magenta;
+    order: 10;
+  }
+</style>
+<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="grid">
+  <div id="magenta">M</div>
+  <div id="lime">L</div>
+  <div id="yellow">Y</div>
+  <div id="blue">B</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-002.html
new file mode 100644
index 0000000000..9ec9809ccd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-002.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  #grid {
+    display: grid;
+    font: 50px/1 Ahem;
+    grid-template-columns: auto auto;
+    justify-content: start;
+    align-content: start;
+  }
+
+  #blue {
+    color: blue;
+    order: -10;
+  }
+
+  #yellow {
+    color: yellow;
+    order: -5;
+  }
+
+  #lime {
+    color: lime;
+    order: -1;
+  }
+
+  #magenta {
+    color: magenta;
+  }
+</style>
+<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="grid">
+  <div id="magenta">M</div>
+  <div id="lime">L</div>
+  <div id="yellow">Y</div>
+  <div id="blue">B</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-003.html
new file mode 100644
index 0000000000..b40f3101d0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-003.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  #grid {
+    display: grid;
+    font: 50px/1 Ahem;
+    grid-template-columns: auto auto;
+    justify-content: start;
+    align-content: start;
+  }
+
+  #blue {
+    color: blue;
+    order: -5;
+  }
+
+  #yellow {
+    color: yellow;
+    order: -5;
+  }
+
+  #lime {
+    color: lime;
+  }
+
+  #magenta {
+    color: magenta;
+    order: 1;
+  }
+</style>
+<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="grid">
+  <div id="lime">L</div>
+  <div id="magenta">M</div>
+  <div id="blue">B</div>
+  <div id="yellow">Y</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-004.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-004.html
new file mode 100644
index 0000000000..f606c69673
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-004.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  #grid {
+    display: grid;
+    font: 50px/1 Ahem;
+    grid-template-columns: auto auto;
+    justify-content: start;
+    align-content: start;
+  }
+
+  #blue {
+    color: blue;
+    order: 1;
+  }
+
+  #yellow {
+    color: yellow;
+    order: 1;
+  }
+
+  #lime {
+    color: lime;
+    order: 5;
+  }
+
+  #magenta {
+    color: magenta;
+    order: 5;
+  }
+</style>
+<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="grid">
+  <div id="blue">B</div>
+  <div id="lime">L</div>
+  <div id="magenta">M</div>
+  <div id="yellow">Y</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-005.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-005.html
new file mode 100644
index 0000000000..f787f0e770
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-auto-placement-005.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'order' property affects grid items auto-placement position</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+<link rel="match" href="../reference/grid-2x2-blue-yellow-lime-magenta.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  #grid {
+    display: grid;
+    font: 50px/1 Ahem;
+    grid-template-columns: auto auto;
+    justify-content: start;
+    align-content: start;
+  }
+
+  #blue {
+    color: blue;
+    order: -5;
+  }
+
+  #yellow {
+    color: yellow;
+    order: -1;
+  }
+
+  #lime {
+    color: lime;
+    order: 1;
+  }
+
+  #magenta {
+    color: magenta;
+    order: 5;
+  }
+</style>
+<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="grid">
+  <div id="yellow">Y</div>
+  <div id="magenta">M</div>
+  <div id="blue">B</div>
+  <div id="lime">L</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-001.html
new file mode 100644
index 0000000000..9f9267a796
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-001.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+    display: grid;
+    font: 100px/1 Ahem;
+  }
+
+  #test-item-overlapping-green {
+    color: green;
+    order: 1;
+  }
+
+  #reference-item-overlapped-red {
+    color: red;
+  }
+
+  .first-row-first-column {
+    grid-area: 1 / 1;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="grid">
+  <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+  <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-002.html
new file mode 100644
index 0000000000..91093e83a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-002.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+    display: grid;
+    font: 100px/1 Ahem;
+  }
+
+  #test-item-overlapping-green {
+    color: green;
+  }
+
+  #reference-item-overlapped-red {
+    color: red;
+    order: -1;
+  }
+
+  .first-row-first-column {
+    grid-area: 1 / 1;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="grid">
+  <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+  <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-003.html
new file mode 100644
index 0000000000..5c3e68e805
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-003.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+    display: grid;
+    font: 100px/1 Ahem;
+  }
+
+  #test-item-overlapping-green {
+    color: green;
+    order: 10;
+  }
+
+  #reference-item-overlapped-red {
+    color: red;
+    order: 5;
+  }
+
+  .first-row-first-column {
+    grid-area: 1 / 1;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="grid">
+  <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+  <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-004.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-004.html
new file mode 100644
index 0000000000..7b2849b0e0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-004.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+    display: grid;
+    font: 100px/1 Ahem;
+  }
+
+  #test-item-overlapping-green {
+    color: green;
+    order: -5;
+  }
+
+  #reference-item-overlapped-red {
+    color: red;
+    order: -10;
+  }
+
+  .first-row-first-column {
+    grid-area: 1 / 1;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="grid">
+  <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+  <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-005.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-005.html
new file mode 100644
index 0000000000..be09be68a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-order-property-painting-005.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'order' property affects grid items painting order</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#order-property" title="4.2 Reordered Grid Items: the order property">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#order-property" title="5.4. Display Order: the order property">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+    display: grid;
+    font: 100px/1 Ahem;
+  }
+
+  #test-item-overlapping-green {
+    color: green;
+    order: 1;
+  }
+
+  #reference-item-overlapped-red {
+    color: red;
+    order: -1;
+  }
+
+  .first-row-first-column {
+    grid-area: 1 / 1;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="grid">
+  <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+  <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-size-with-orthogonal-child-dynamic.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-size-with-orthogonal-child-dynamic.html
new file mode 100644
index 0000000000..d1223b9fa0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-size-with-orthogonal-child-dynamic.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=650273">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div id="target" style="display: inline-grid; background: green;">
+  <div style="writing-mode: vertical-lr; line-height: 0;">
+    <span style="display: inline-block; height: 100px; width: 50px;"></span>
+    <span style="display: inline-block; height: 50px; width: 50px;"></span>
+  </div>
+</div>
+<script>
+document.body.offsetTop;
+document.getElementById('target').style.height = '100px';
+</script>
+
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-001.html
new file mode 100644
index 0000000000..52ad190afd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-001.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+    display: grid;
+    font: 100px/1 Ahem;
+  }
+
+  #test-item-overlapping-green {
+    color: green;
+    z-index: 1;
+  }
+
+  #reference-item-overlapped-red {
+    color: red;
+  }
+
+  .first-row-first-column {
+    grid-area: 1 / 1;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="grid">
+  <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+  <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-002.html
new file mode 100644
index 0000000000..551137965d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-002.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+    display: grid;
+    font: 100px/1 Ahem;
+  }
+
+  #test-item-overlapping-green {
+    color: green;
+  }
+
+  #reference-item-overlapped-red {
+    color: red;
+    z-index: -1;
+  }
+
+  .first-row-first-column {
+    grid-area: 1 / 1;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="grid">
+  <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+  <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-003.html
new file mode 100644
index 0000000000..1934144660
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-003.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+    display: grid;
+    font: 100px/1 Ahem;
+  }
+
+  #test-item-overlapping-green {
+    color: green;
+    z-index: 10;
+  }
+
+  #reference-item-overlapped-red {
+    color: red;
+    z-index: 5;
+  }
+
+  .first-row-first-column {
+    grid-area: 1 / 1;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="grid">
+  <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+  <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-004.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-004.html
new file mode 100644
index 0000000000..2defd235d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-004.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+    display: grid;
+    font: 100px/1 Ahem;
+  }
+
+  #test-item-overlapping-green {
+    color: green;
+    z-index: -5;
+  }
+
+  #reference-item-overlapped-red {
+    color: red;
+    z-index: -10;
+  }
+
+  .first-row-first-column {
+    grid-area: 1 / 1;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="grid">
+  <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+  <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-005.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-005.html
new file mode 100644
index 0000000000..4bc7e116d8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-005.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'z-index' property controls the z-axis order of grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+    display: grid;
+    font: 100px/1 Ahem;
+  }
+
+  #test-item-overlapping-green {
+    color: green;
+    z-index: 1;
+  }
+
+  #reference-item-overlapped-red {
+    color: red;
+    z-index: -1;
+  }
+
+  .first-row-first-column {
+    grid-area: 1 / 1;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="grid">
+  <div id="test-item-overlapping-green" class="first-row-first-column">G</div>
+  <div id="reference-item-overlapped-red" class="first-row-first-column">R</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-001.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-001.html
new file mode 100644
index 0000000000..76e379cb53
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-001.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+    display: grid;
+    font: 100px/1 Ahem;
+    grid-template-columns: 25px 25px 25px 25px;
+    grid-template-rows: 25px 25px 25px 25px;
+  }
+
+  #blue {
+    color: blue;
+    z-index: -1;
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  #yellow {
+    color: yellow;
+    grid-column: 2;
+    grid-row: 2;
+  }
+
+  #green {
+    color: green;
+    z-index: 1;
+    grid-column: 3;
+    grid-row: 3;
+  }
+</style>
+<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+<div id="grid">
+  <div id="green">G</div>
+  <div id="yellow">Y</div>
+  <div id="blue">B</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-002.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-002.html
new file mode 100644
index 0000000000..16a4821364
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-002.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+    display: grid;
+    font: 100px/1 Ahem;
+    grid-template-columns: 25px 25px 25px 25px;
+    grid-template-rows: 25px 25px 25px 25px;
+  }
+
+  #blue {
+    color: blue;
+    z-index: 1;
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  #yellow {
+    color: yellow;
+    z-index: 5;
+    grid-column: 2;
+    grid-row: 2;
+  }
+
+  #green {
+    color: green;
+    z-index: 10;
+    grid-column: 3;
+    grid-row: 3;
+  }
+</style>
+<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+<div id="grid">
+  <div id="green">G</div>
+  <div id="yellow">Y</div>
+  <div id="blue">B</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-003.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-003.html
new file mode 100644
index 0000000000..46317b1987
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-003.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+    display: grid;
+    font: 100px/1 Ahem;
+    grid-template-columns: 25px 25px 25px 25px;
+    grid-template-rows: 25px 25px 25px 25px;
+  }
+
+  #blue {
+    color: blue;
+    z-index: -10;
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  #yellow {
+    color: yellow;
+    z-index: -5;
+    grid-column: 2;
+    grid-row: 2;
+  }
+
+  #green {
+    color: green;
+    z-index: -1;
+    grid-column: 3;
+    grid-row: 3;
+  }
+</style>
+<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+<div id="grid">
+  <div id="green">G</div>
+  <div id="yellow">Y</div>
+  <div id="blue">B</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-004.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-004.html
new file mode 100644
index 0000000000..74b8ec0209
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-004.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+    display: grid;
+    font: 100px/1 Ahem;
+    grid-template-columns: 25px 25px 25px 25px;
+    grid-template-rows: 25px 25px 25px 25px;
+  }
+
+  #blue {
+    color: blue;
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  #yellow {
+    color: yellow;
+    z-index: 1;
+    grid-column: 2;
+    grid-row: 2;
+  }
+
+  #green {
+    color: green;
+    z-index: 5;
+    grid-column: 3;
+    grid-row: 3;
+  }
+</style>
+<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+<div id="grid">
+  <div id="green">G</div>
+  <div id="yellow">Y</div>
+  <div id="blue">B</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-005.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-005.html
new file mode 100644
index 0000000000..bae5b238c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-005.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+    display: grid;
+    font: 100px/1 Ahem;
+    grid-template-columns: 25px 25px 25px 25px;
+    grid-template-rows: 25px 25px 25px 25px;
+  }
+
+  #blue {
+    color: blue;
+    z-index: -5;
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  #yellow {
+    color: yellow;
+    z-index: -1;
+    grid-column: 2;
+    grid-row: 2;
+  }
+
+  #green {
+    color: green;
+    grid-column: 3;
+    grid-row: 3;
+  }
+</style>
+<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+<div id="grid">
+  <div id="green">G</div>
+  <div id="yellow">Y</div>
+  <div id="blue">B</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-006.html b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-006.html
new file mode 100644
index 0000000000..3424d0c86b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-z-axis-ordering-overlapped-items-006.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'z-index' property controls the grid items stacking order</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#z-order" title="4.4. Z-axis Ordering: the z-index property">
+<link rel="match" href="../reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+    display: grid;
+    font: 100px/1 Ahem;
+    grid-template-columns: 25px 25px 25px 25px;
+    grid-template-rows: 25px 25px 25px 25px;
+  }
+
+  #blue {
+    color: blue;
+    z-index: -1;
+    grid-column: 2;
+    grid-row: 2;
+    margin-top: -25px;
+    margin-left: -25px;
+  }
+
+  #yellow {
+    color: yellow;
+    grid-column: 4;
+    grid-row: 4;
+    margin-top: -50px;
+    margin-left: -50px;
+  }
+
+  #green {
+    color: green;
+    z-index: 1;
+    grid-column: 1;
+    grid-row: 1;
+    margin-top: 50px;
+    margin-left: 50px;
+  }
+</style>
+<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+<div id="grid">
+  <div id="green">G</div>
+  <div id="yellow">Y</div>
+  <div id="blue">B</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/item-with-table-with-infinite-max-intrinsic-width.html b/testing/web-platform/tests/css/css-grid/grid-items/item-with-table-with-infinite-max-intrinsic-width.html
new file mode 100644
index 0000000000..3bf98c4a58
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/item-with-table-with-infinite-max-intrinsic-width.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>Grid item with table with infinite max intrinsic inline size</title>
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing" title="6.2. Grid Item Sizing">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div style="display:grid; grid-template-columns:max-content; width:100px; height:100px; background:green;">
+  <div>
+    <table style="height:50px; background:green;" cellpadding="0" cellspacing="0">
+      <tr>
+        <td style="width:100%; background:green;">&nbsp;</td>
+        <td style="background:green;">&nbsp;</td>
+      </tr>
+    </table>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/percentage-margin-dynamic.html b/testing/web-platform/tests/css/css-grid/grid-items/percentage-margin-dynamic.html
new file mode 100644
index 0000000000..ed1edc4ba6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/percentage-margin-dynamic.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1126609">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div id="target" style="display: grid; width: 100px; height: 200px; background: green;">
+  <div style="margin: 50%; color: green;">FAIL</div>
+</div>
+<script>
+document.body.offsetTop;
+document.getElementById('target').style.height = '100px';
+</script>
+
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-indefinite-replaced.html b/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-indefinite-replaced.html
new file mode 100644
index 0000000000..3610f2e2c9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-indefinite-replaced.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1153028">
+<meta name="assert" content="When determining a auto row, an indefinite percentage block-size should be considered auto, and use the inline-size + aspect-ratio.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div style="display: grid; width: 50px;">
+  <canvas width=200 height=200 style="background: green; height: 100%; width: 200%;"></canvas>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-replaced-subitems-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-replaced-subitems-001-ref.html
new file mode 100644
index 0000000000..2c21c8c13d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-replaced-subitems-001-ref.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Refttest Reference: Percentage size on child of a grid item with margin, border, padding and scrollbar</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+.grid {
+  display: inline-block;
+  border: solid 5px black;
+  width: 150px;
+  height: 100px;
+  margin: 10px;
+  vertical-align: top;
+}
+
+.item {
+  overflow: scroll;
+  border: solid magenta;
+  border-width: 12px 9px 6px 3px;
+  margin: 1px 2px 3px 4px;
+  padding: 5px 15px 10px 20px;
+  background: cyan;
+  width: calc(100% - 6px);
+  height: calc(100% - 4px);
+  box-sizing: border-box;
+}
+
+img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.horizontalTB { writing-mode: horizontal-tb; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL {  writing-mode: vertical-rl; }
+</style>
+
+<p>The test passes if in the different examples you see scrollbars but there's no overflow, so you cannot actually scroll.</p>
+
+<div class="grid">
+  <div class="item horizontalTB">
+    <img src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item horizontalTB">
+    <img class="verticalLR" src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item horizontalTB">
+    <img class="verticalRL" src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalLR">
+    <img src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalLR">
+    <img class="horizontalTB" src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalLR">
+    <img class="verticalRL" src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalRL">
+    <img src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalRL">
+    <img class="horizontalTB" src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalRL">
+    <img class="verticalRL" src="support/100x100-green.png" />
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-replaced-subitems-001.html b/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-replaced-subitems-001.html
new file mode 100644
index 0000000000..190277a1ed
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-replaced-subitems-001.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Test: Percentage size on replaced child of a grid item with margin, border, padding and scrollbar</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
+<link rel="match" href="percentage-size-replaced-subitems-001-ref.html">
+<meta name="assert" content="Checks that grid items replaced children resolve properly their percentage sizes, even when the grid item has margin, border, padding and scrollbar.">
+<style>
+.grid {
+  display: inline-grid;
+  border: solid 5px black;
+  grid: 100px / 150px;
+  margin: 10px;
+  vertical-align: top;
+}
+
+.item {
+  overflow: scroll;
+  border: solid magenta;
+  border-width: 12px 9px 6px 3px;
+  margin: 1px 2px 3px 4px;
+  padding: 5px 15px 10px 20px;
+  background: cyan;
+}
+
+img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.horizontalTB { writing-mode: horizontal-tb; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL {  writing-mode: vertical-rl; }
+</style>
+
+<p>The test passes if in the different examples you see scrollbars but there's no overflow, so you cannot actually scroll.</p>
+
+<div class="grid">
+  <div class="item horizontalTB">
+    <img src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item horizontalTB">
+    <img class="verticalLR" src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item horizontalTB">
+    <img class="verticalRL" src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalLR">
+    <img src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalLR">
+    <img class="horizontalTB" src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalLR">
+    <img class="verticalRL" src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalRL">
+    <img src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalRL">
+    <img class="horizontalTB" src="support/100x100-green.png" />
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalRL">
+    <img class="verticalRL" src="support/100x100-green.png" />
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-subitems-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-subitems-001-ref.html
new file mode 100644
index 0000000000..bba5f7d282
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-subitems-001-ref.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Refttest Reference: Percentage size on child of a grid item with margin, border, padding and scrollbar</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  display: inline-block;
+  border: solid 5px black;
+  width: 150px;
+  height: 100px;
+  margin: 10px;
+  vertical-align: top;
+}
+
+.item {
+  overflow: scroll;
+  border: solid magenta;
+  border-width: 12px 9px 6px 3px;
+  margin: 1px 2px 3px 4px;
+  padding: 5px 15px 10px 20px;
+  background: cyan;
+  width: calc(100% - 6px);
+  height: calc(100% - 4px);
+  box-sizing: border-box;
+}
+
+.subitem {
+  width: 100%;
+  height: 100%;
+  background: yellow;
+  font: 20px/1 Ahem;
+}
+
+.horizontalTB { writing-mode: horizontal-tb; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL {  writing-mode: vertical-rl; }
+</style>
+
+<p>The test passes if in the different examples you see scrollbars but there's no overflow, so you cannot actually scroll.</p>
+
+<div class="grid">
+  <div class="item horizontalTB">
+    <div class="subitem"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item horizontalTB">
+    <div class="subitem verticalLR"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item horizontalTB">
+    <div class="subitem verticalRL"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalLR">
+    <div class="subitem"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalLR">
+    <div class="subitem horizontalTB"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalLR">
+    <div class="subitem verticalRL"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalRL">
+    <div class="subitem"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalRL">
+    <div class="subitem horizontalTB"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalRL">
+    <div class="subitem verticalLR"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-subitems-001.html b/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-subitems-001.html
new file mode 100644
index 0000000000..ad00990619
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-subitems-001.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Test: Percentage size on child of a grid item with margin, border, padding and scrollbar</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items">
+<link rel="match" href="percentage-size-subitems-001-ref.html">
+<meta name="assert" content="Checks that grid items children resolve properly their percentage sizes, even when the grid item has margin, border, padding and scrollbar.">
+<style>
+.grid {
+  display: inline-grid;
+  border: solid 5px black;
+  grid: 100px / 150px;
+  margin: 10px;
+  vertical-align: top;
+}
+
+.item {
+  overflow: scroll;
+  border: solid magenta;
+  border-width: 12px 9px 6px 3px;
+  margin: 1px 2px 3px 4px;
+  padding: 5px 15px 10px 20px;
+  background: cyan;
+}
+
+.subitem {
+  width: 100%;
+  height: 100%;
+  background: yellow;
+}
+
+.horizontalTB { writing-mode: horizontal-tb; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL {  writing-mode: vertical-rl; }
+</style>
+
+<p>The test passes if in the different examples you see scrollbars but there's no overflow, so you cannot actually scroll.</p>
+
+<div class="grid">
+  <div class="item horizontalTB">
+    <div class="subitem"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item horizontalTB">
+    <div class="subitem verticalLR"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item horizontalTB">
+    <div class="subitem verticalRL"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalLR">
+    <div class="subitem"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalLR">
+    <div class="subitem horizontalTB"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalLR">
+    <div class="subitem verticalRL"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalRL">
+    <div class="subitem"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalRL">
+    <div class="subitem horizontalTB"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="item verticalRL">
+    <div class="subitem verticalLR"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-subitems-002.html b/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-subitems-002.html
new file mode 100644
index 0000000000..17f57bf39d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/percentage-size-subitems-002.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1138504">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div style="display: grid; grid-template-columns: 100px 100px;">
+  <div style="min-height: 100px;">
+    <div style="height: 100%; background: green;"></div>
+  </div>
+  <div style="height: 100px;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/ref-filled-green-100px-square-image.html b/testing/web-platform/tests/css/css-grid/grid-items/ref-filled-green-100px-square-image.html
new file mode 100644
index 0000000000..5906160218
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/ref-filled-green-100px-square-image.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reftest Reference: 100x100 green square image</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<img src="support/100x100-green.png" alt="Image download support must be enabled" />
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/remove-svg-grid-item-001.html b/testing/web-platform/tests/css/css-grid/grid-items/remove-svg-grid-item-001.html
new file mode 100644
index 0000000000..5e196c82c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/remove-svg-grid-item-001.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<title>CSS Grid Layout Test: Remove a first child in grid items</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item">
+<link rel="stylesheet" href="/css/support/grid.css"/>
+<link rel="match" href="../reference/grid-item-script-001-ref.html">
+<meta name="assert" content="This test ensures that removing a first child element in grid items doesn't crash.">
+<link rel="stylesheet" href="/css/support/grid.css"/>
+<div class="grid">
+  <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='190'>
+    <polygon points='100,10 40,180 190,60 10,60 160,180' style='fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;'>
+  </svg>
+</div>
+
+<script>
+  var grid = document.getElementsByClassName("grid")[0];
+  grid.offsetTop;
+  while (grid.firstChild)
+    grid.removeChild(grid.firstChild);
+  grid.offsetTop;
+  grid.innerHTML = "Test passes if it doesn't crash.";
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-001.html b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-001.html
new file mode 100644
index 0000000000..b29b67a01a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-001.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>CSS aspect-ratio: grid item (ratio-dependent: inline)</title>
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div style="display: grid;">
+  <svg style="background: green; height: 100px;" viewBox="0 0 1 1"></svg>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-002.html b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-002.html
new file mode 100644
index 0000000000..b8101c4399
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-002.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>CSS aspect-ratio: grid item (ratio-dependent: block)</title>
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div style="display: grid;">
+  <svg style="background: green; width: 100px;" viewBox="0 0 1 1"></svg>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-007.html b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-007.html
new file mode 100644
index 0000000000..61284df758
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-007.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>CSS aspect-ratio: grid item (ratio-dependent: block) with larger row track size</title>
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div style="display: grid; grid-template-rows: 200px;">
+  <svg style="background: green; height: 100px;" viewBox="0 0 1 1"></svg>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-010.html b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-010.html
new file mode 100644
index 0000000000..83672297f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-010.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>CSS aspect-ratio: grid item (ratio-dependent: block) with larger row track size</title>
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-item-sizing">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div style="display: grid; grid-template-columns: 200px;">
+  <svg style="background: green; height: 100px;" viewBox="0 0 1 1"></svg>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-011.html b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-011.html
new file mode 100644
index 0000000000..c5f5c301a2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-011.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview">
+<meta name="assert" content="A replaced element resolves its percentage against the definite row.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div style="display: inline-grid; grid-template-rows: 100px; background: green;">
+  <canvas width=10 height=10 style="height: 100%;"></canvas>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-012.html b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-012.html
new file mode 100644
index 0000000000..c26ce03378
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-012.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview">
+<meta name="assert" content="A replaced element resolves its percentage against the definite row.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div style="display: inline-grid; grid-template-rows: 50px 50px; background: green;">
+  <canvas width=10 height=10 style="height: 100%; grid-row-start: 1; grid-row-end: 3;"></canvas>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-013.html b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-013.html
new file mode 100644
index 0000000000..c6c3ef66c3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-013.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview">
+<meta name="assert" content="A replaced element resolves its percentage against the definite row.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div style="display: inline-grid; grid-template-rows: 100px; background: green;">
+  <canvas width=20 height=10 style="height: 50%;"></canvas>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-014.html b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-014.html
new file mode 100644
index 0000000000..4aa10414d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-014.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1241154">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div style="width: 100px; display: grid; grid-template-column: 1fr;">
+  <img src="support/500x500-green.png" style="background: green; height: auto; width: 200px; max-width: 100%;">
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-015.html b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-015.html
new file mode 100644
index 0000000000..adb9af5654
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/replaced-element-015.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1055095">
+<link rel="match" href="../reference/replaced-element-015-ref.html">
+<p>Test passes if it matches the reference.</p>
+<div style="display: inline-grid; width: 100px;">
+  <div id="target" style="height: 100%; margin-bottom: 50px;">
+    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='green'/></svg>"
+         style="height: 100%">
+  </div>
+</div>
+<script>
+const target = document.getElementById('target');
+document.body.offsetTop;
+target.style.marginBottom = '';
+document.body.offsetTop;
+target.style.marginBottom = '50px';
+document.body.offsetTop;
+target.style.marginBottom = '';
+</script>
+
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/support/100x100-green.png b/testing/web-platform/tests/css/css-grid/grid-items/support/100x100-green.png
new file mode 100644
index 0000000000..25b76c3c6f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/support/100x100-green.png
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/support/200x200-green.png b/testing/web-platform/tests/css/css-grid/grid-items/support/200x200-green.png
new file mode 100644
index 0000000000..e8b591f05b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/support/200x200-green.png
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/support/25x50-green.png b/testing/web-platform/tests/css/css-grid/grid-items/support/25x50-green.png
new file mode 100644
index 0000000000..6ab02fce0f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/support/25x50-green.png
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/support/500x500-green.png b/testing/web-platform/tests/css/css-grid/grid-items/support/500x500-green.png
new file mode 100644
index 0000000000..cdd928e6be
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/support/500x500-green.png
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/support/50x25-green.png b/testing/web-platform/tests/css/css-grid/grid-items/support/50x25-green.png
new file mode 100644
index 0000000000..2bd68e7421
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/support/50x25-green.png
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/support/50x50-green.png b/testing/web-platform/tests/css/css-grid/grid-items/support/50x50-green.png
new file mode 100644
index 0000000000..f709bf09e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/support/50x50-green.png
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/table-with-infinite-max-intrinsic-width.html b/testing/web-platform/tests/css/css-grid/grid-items/table-with-infinite-max-intrinsic-width.html
new file mode 100644
index 0000000000..877e982cd4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/table-with-infinite-max-intrinsic-width.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<title>Table grid item with infinite max intrinsic inline size</title>
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing" title="6.2. Grid Item Sizing">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div style="display:grid; grid-template-columns:max-content; width:100px; height:100px; background:green;">
+  <table style="height:50px; background:green;" cellpadding="0" cellspacing="0">
+    <tr>
+      <td style="width:100%; background:green;">&nbsp;</td>
+      <td style="background:green;">&nbsp;</td>
+    </tr>
+  </table>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/whitespace-in-grid-item-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-items/whitespace-in-grid-item-001-ref.html
new file mode 100644
index 0000000000..1531d98a64
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/whitespace-in-grid-item-001-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+  .item {
+    height: 100%;
+    width: 30px;
+    background: salmon;
+  }
+</style>
+<body>
+  <p>This test passes if it has the same output than the reference. As spec states that child text runs containing only white space should not rendered (just as if its text nodes were display:none).</p>
+  <div class="grid">
+    <div class="item"></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-items/whitespace-in-grid-item-001.html b/testing/web-platform/tests/css/css-grid/grid-items/whitespace-in-grid-item-001.html
new file mode 100644
index 0000000000..f79baab6f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-items/whitespace-in-grid-item-001.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Grid : Whitespace in grid item</title>
+<link rel="author" title="Christian Biesinger" href="mailto:cbiesinger@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items">
+<link rel="match" href="whitespace-in-grid-item-001-ref.html">
+<link rel="help" href="https://codereview.chromium.org/16888008">
+<meta name="assert" content="Grid items shouldn't be created for white spaces."/>
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+  .grid {
+    white-space: pre;
+  }
+  .item {
+    height: 100%;
+    width: 30px;
+    background: salmon;
+  }
+</style>
+<body>
+  <p>This test passes if it has the same output than the reference. As spec states that child text runs containing only white space should not rendered (just as if its text nodes were display:none).</p>
+  <div class="grid">
+
+    <div class="item"></div> &#9;
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-layout-properties.html b/testing/web-platform/tests/css/css-grid/grid-layout-properties.html
new file mode 100644
index 0000000000..8452334b6a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-layout-properties.html
@@ -0,0 +1,238 @@
+<!DOCTYPE HTML>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: Grid Layout - Properties exist</title>
+  <link rel="author" title="贺师俊" href="mailto:johnhax@gmail.com">
+  <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com" />
+  <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-30 -->
+  <link rel="help" href="http://www.w3.org/TR/css-grid-1/#property-index">
+  <meta name="flags" content="ahem dom">
+  <meta name="assert" content="Test checks that css properties of grid layout exist.">
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+  <style>
+    #container {
+        width: 800px;
+        height: 600px;
+    }
+    #myDiv {
+        font: 50px/1 Ahem;
+        justify-content: start;
+        align-content: start;
+    }
+  </style>
+</head>
+<body>
+  <div id="log"></div>
+  <div id="container">
+    <div id="myDiv">
+      <div>I T</div>
+      <div>IT</div>
+      <div>I</div>
+    </div>
+  </div>
+
+  <script>
+  setup({explicit_done: true});
+  document.fonts.ready.then(()=> {
+    var myDiv = document.getElementById('myDiv')
+
+    test(function(){
+      myDiv.style.display = 'grid'
+      assert_equals(myDiv.style.display, 'grid',
+        'display should be "grid"')
+    }, 'display: grid')
+
+    test(function(){
+      myDiv.style.display = 'inline-grid'
+      assert_equals(myDiv.style.display, 'inline-grid',
+        'display should be "inline-grid"')
+    }, 'display: inline-grid')
+
+    void function(data){
+
+      myDiv.style.display = 'grid'
+
+      Object.keys(data).forEach(function(prop){
+        test(function(){
+          assert_true(prop in myDiv.style)
+        }, prop)
+
+        if ('initial' in data[prop]) test(function(){
+          var initial = data[prop].initial
+          delete data[prop].initial
+          assert_equals(getComputedStyle(myDiv)[prop], initial, 'initial value of ' + prop + ' should be ' + initial)
+        }, prop + '.initial')
+
+        var syntaxTests = data[prop]
+        Object.keys(syntaxTests).forEach(function(testcase){
+          test(function(){
+            assert_true(prop in myDiv.style)
+            myDiv.style[prop] = syntaxTests[testcase][0]
+            assert_equals(myDiv.style[prop], syntaxTests[testcase][0], testcase)
+            assert_equals(getComputedStyle(myDiv)[prop], syntaxTests[testcase][1], testcase)
+          }, prop + '.' + testcase)
+        })
+      })
+
+    }({
+      'grid-template-columns': { // named 'grid-definition-columns' in last draft
+        initial: '150px',
+        'none': ['none', '150px'],
+        '<line-names>': ['[a] auto [b] auto [c]', '[a] 150px [b] 100px [c]'],
+        '<track-size>.auto': ['auto', '150px'],
+        '<track-size>.<track-breadth>.<length>': ['100px', '100px'],
+        '<track-size>.<track-breadth>.<percentage>': ['100%', '800px'],
+        '<track-size>.<track-breadth>.<flex>': ['1fr', '800px'],
+        '<track-size>.<track-breadth>.min-content': ['min-content', '100px'],
+        '<track-size>.<track-breadth>.max-content': ['max-content', '150px'],
+        '<track-size>.<track-breadth>.minmax()': ['minmax(100px, 200px)', '200px'],
+        'reset': ['none', '150px'],
+      },
+      'grid-template-rows': { // named 'grid-definition-rows' in last draft
+        initial: '50px 50px 50px',
+        'none': ['none', '50px 50px 50px'],
+        '<line-names>': ['[a] auto [b] auto [c]', '[a] 50px [b] 50px [c] 50px'],
+        '<track-size>.auto': ['auto', '50px 50px 50px'],
+        '<track-size>.<track-breadth>.<length>': ['100px', '100px 50px 50px'],
+        '<track-size>.<track-breadth>.<percentage>': ['100%', '150px 50px 50px'],
+        '<track-size>.<track-breadth>.<flex>': ['1fr', '50px 50px 50px'],
+        '<track-size>.<track-breadth>.min-content': ['min-content', '50px 50px 50px'],
+        '<track-size>.<track-breadth>.max-content': ['max-content', '50px 50px 50px'],
+        '<track-size>.<track-breadth>.minmax()': ['minmax(100px, 200px)', '200px 50px 50px'],
+        'reset': ['none', '50px 50px 50px'],
+      },
+      'grid-template-areas': {
+        initial: 'none',
+        'none': ['none', 'none'],
+        '<string>+': ['"a"', '"a"'],
+        'reset': ['none', 'none'],
+      },
+      'grid-template': {
+        initial: '50px 50px 50px / 150px',
+        'none': ['', '50px 50px 50px / 150px'],
+        '<grid-template-rows> / <grid-template-columns>': ['100px 100px / 200px 200px', '100px 100px / 200px 200px'],
+        '<line-names>': ['[a] auto [b] auto [c] / [d] auto [e] auto [f]', '[a] auto [b] auto [c] / [d] auto [e] auto [f]'],
+        '<string>+': ['"a b" "a b" / 50px 50px', '"a b" "a b" / 50px 50px'],
+        '<string><track-size>+': ['"a b" 100px / 50px', '"a b" 100px / 50px'],
+        'reset': ['', '50px 50px 50px / 150px'],
+      },
+      'grid-auto-columns': {
+        initial: 'auto',
+        '<track-size>.auto': ['auto', 'auto'],
+        '<track-size>.<track-breadth>.<length>': ['100px', '100px'],
+        '<track-size>.<track-breadth>.<percentage>': ['100%', '100%'],
+        '<track-size>.<track-breadth>.<flex>': ['1fr', '1fr'],
+        '<track-size>.<track-breadth>.min-content': ['min-content', 'min-content'],
+        '<track-size>.<track-breadth>.max-content': ['max-content', 'max-content'],
+        '<track-size>.<track-breadth>.minmax()': ['minmax(100px, 200px)', 'minmax(100px, 200px)'],
+        'reset': ['auto', 'auto'],
+      },
+      'grid-auto-rows': {
+        initial: 'auto',
+        '<track-size>.auto': ['auto', 'auto'],
+        '<track-size>.<track-breadth>.<length>': ['100px', '100px'],
+        '<track-size>.<track-breadth>.<percentage>': ['100%', '100%'],
+        '<track-size>.<track-breadth>.<flex>': ['1fr', '1fr'],
+        '<track-size>.<track-breadth>.min-content': ['min-content', 'min-content'],
+        '<track-size>.<track-breadth>.max-content': ['max-content', 'max-content'],
+        '<track-size>.<track-breadth>.minmax()': ['minmax(100px, 200px)', 'minmax(100px, 200px)'],
+        'reset': ['auto', 'auto'],
+      },
+      'grid-auto-flow': {
+        initial: 'row',
+        'row': ['row', 'row'],
+        'column': ['column', 'column'],
+        'dense': ['dense', 'dense'],
+        'row dense': ['dense', 'dense'],
+        'column dense': ['column dense', 'column dense'],
+        'reset': ['row', 'row'],
+      },
+      'grid-row-start': {
+        initial: 'auto',
+        'auto': ['auto', 'auto'],
+        '<custom-ident>': ['a', 'a'],
+        '<integer>': ['1', '1'],
+        '<integer> <ident>': ['1 a', '1 a'],
+        'span <integer>': ['span 1', 'span 1'],
+        'span <custom-ident>': ['span a', 'span a'],
+        'span <integer> <custom-ident>': ['span 2 a', 'span 2 a'],
+        'reset': ['auto', 'auto'],
+      },
+      'grid-column-start': {
+        initial: 'auto',
+        'auto': ['auto', 'auto'],
+        '<custom-ident>': ['a', 'a'],
+        '<integer>': ['1', '1'],
+        '<integer> <ident>': ['1 a', '1 a'],
+        'span <integer>': ['span 1', 'span 1'],
+        'span <custom-ident>': ['span a', 'span a'],
+        'span <integer> <custom-ident>': ['span 2 a', 'span 2 a'],
+        'reset': ['auto', 'auto'],
+      },
+      'grid-row-end': {
+        initial: 'auto',
+        'auto': ['auto', 'auto'],
+        '<custom-ident>': ['a', 'a'],
+        '<integer>': ['1', '1'],
+        '<integer> <ident>': ['1 a', '1 a'],
+        'span <integer>': ['span 1', 'span 1'],
+        'span <custom-ident>': ['span a', 'span a'],
+        'span <integer> <custom-ident>': ['span 2 a', 'span 2 a'],
+        'reset': ['auto', 'auto'],
+      },
+      'grid-column-end': {
+        initial: 'auto',
+        'auto': ['auto', 'auto'],
+        '<custom-ident>': ['a', 'a'],
+        '<integer>': ['1', '1'],
+        '<integer> <ident>': ['1 a', '1 a'],
+        'span <integer>': ['span 1', 'span 1'],
+        'span <custom-ident>': ['span a', 'span a'],
+        'span <integer> <custom-ident>': ['span 2 a', 'span 2 a'],
+        'reset': ['auto', 'auto'],
+      },
+      'grid-column': {
+        initial: 'auto',
+        'auto': ['auto', 'auto'],
+        '<custom-ident>': ['a / b', 'a / b'],
+        '<integer> start': ['1', '1'],
+        '<integer>': ['1 / 3', '1 / 3'],
+        '<integer> <ident>': ['1 a / 2 b', '1 a / 2 b'],
+        'span <integer>': ['span 1 / span 2', 'span 1 / span 2'],
+        'span <custom-ident>': ['span a / span b', 'span a / span b'],
+        'span <integer> <custom-ident>': ['span 2 a / span 3 b', 'span 2 a / span 3 b'],
+        'reset': ['auto', 'auto'],
+      },
+      'grid-row': {
+        initial: 'auto',
+        'auto': ['auto', 'auto'],
+        '<custom-ident>': ['a / b', 'a / b'],
+        '<integer> start': ['1', '1'],
+        '<integer>': ['1 / 3', '1 / 3'],
+        '<integer> <ident>': ['1 a / 2 b', '1 a / 2 b'],
+        'span <integer>': ['span 1 / span 2', 'span 1 / span 2'],
+        'span <custom-ident>': ['span a / span b', 'span a / span b'],
+        'span <integer> <custom-ident>': ['span 2 a / span 3 b', 'span 2 a / span 3 b'],
+        'reset': ['auto', 'auto'],
+      },
+      'grid-area': {
+        initial: 'auto',
+        'auto': ['auto', 'auto'],
+        '<custom-ident>': ['a / b / c / d', 'a / b / c / d'],
+        '<integer> start': ['1 / 2', '1 / 2'],
+        '<integer>': ['1 / 2 / 3 / 4', '1 / 2 / 3 / 4'],
+        '<integer> <ident>': ['1 a / 2 b / 3 c / 4 d', '1 a / 2 b / 3 c / 4 d'],
+        'span <integer>': ['span 1 / span 2 / span 3 / span 4', 'span 1 / span 2 / span 3 / span 4'],
+        'span <custom-ident>': ['span a / span b / span c / span d', 'span a / span b / span c / span d'],
+        'span <integer> <custom-ident>': ['span 2 a / span 3 b / span 4 c / span 5 d', 'span 2 a / span 3 b / span 4 c / span 5 d'],
+        'reset': ['auto', 'auto'],
+      },
+    })
+    done();
+  });
+  </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/column-property-should-not-apply-on-grid-container-001.html b/testing/web-platform/tests/css/css-grid/grid-model/column-property-should-not-apply-on-grid-container-001.html
new file mode 100644
index 0000000000..a795362586
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/column-property-should-not-apply-on-grid-container-001.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Grid: column-* properties are ignored.</title>
+<link rel="author" title="Sunil Ratnu" href="mailto:sunil.ratnu@samsung.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-model">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/1364">
+<link rel="match" href="reference/column-property-should-not-apply-on-grid-container-001-ref.html">
+<meta name="assert" content="This test ensures the column-* properties (in the Multicol module) have no effect on a grid container."/>
+<link href="/css/support/grid.css" rel="stylesheet"/>
+<style>
+.grid, .inline-grid
+{
+  width: 20em;
+  column-count: 2;
+  column-gap: 100px;
+  font-kerning: none;
+}
+</style>
+
+<body>
+
+<div class='grid'>
+AAAAAAAAAA BBBBBBBBBB CCCCCCCCCC DDDDDDDDDD
+</div>
+
+<div class='inline-grid'>
+AAAAAAAAAA BBBBBBBBBB CCCCCCCCCC DDDDDDDDDD
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/compute-intrinsic-widths-scrollbar-001.html b/testing/web-platform/tests/css/css-grid/grid-model/compute-intrinsic-widths-scrollbar-001.html
new file mode 100644
index 0000000000..d61f7ad14e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/compute-intrinsic-widths-scrollbar-001.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>CSS Grid: width of grid container with scrollbar.</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#overflow">
+<meta name="assert" content="This test ensures that a grid container scrollbar is computed properly during intrinsic width calculation."/>
+
+<link href="/css/support/grid.css" rel="stylesheet"/>
+<link href="/css/support/width-keyword-classes.css" rel="stylesheet"/>
+<style>
+  .grid {
+    overflow-y: scroll;
+    grid-template-columns: repeat(4, 50px);
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+  <div class="grid min-content" data-expected-client-width="200">
+    item
+  </div>
+  <div class="grid max-content" data-expected-client-width="200">
+    item
+  </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/display-grid.html b/testing/web-platform/tests/css/css-grid/grid-model/display-grid.html
new file mode 100644
index 0000000000..7c6b743327
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/display-grid.html
@@ -0,0 +1,107 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Grid Layout: display: grid</title>
+  <link rel="author" title="swain" href="mailto:swainet@126.com"/>
+  <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-17 -->
+  <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers"/>
+  <link rel="match" href="../reference/display-grid-ref.html">
+  <meta name="assert" content="'display: grid' causes an element to generate a block-level grid container box."/>
+  <style type="text/css">
+    #container {
+      position:relative;
+      width:400px;
+      height:100px;
+    }
+
+    #grid {
+      display:grid;
+      grid-template-columns:100px 300px;
+      grid-template-rows:70px 30px;
+      height:100%;
+    }
+
+    #cell1 {
+      grid-column:1;
+      grid-row:1;
+      background-color:green;
+      height:70px;
+    }
+
+    #cell2 {
+      grid-column:2;
+      grid-row:1;
+      background-color:limegreen;
+      height:70px;
+    }
+
+    #cell3 {
+      grid-column:1;
+      grid-row:2;
+      background-color:limegreen;
+      height:30px;
+    }
+
+    #cell4 {
+      grid-column:2;
+      grid-row:2;
+      background-color:green;
+      height:30px;
+    }
+
+    .error {
+      position:absolute;
+      top:0;
+      left:0;
+      height:100%;
+      width:100%;
+      z-index:-1;
+    }
+
+    #table {
+      width:100%;
+      height:100%;
+      border-collapse:collapse;
+    }
+
+    #table td {
+      padding:0;
+      vertical-align:top;
+    }
+
+    #table td:first-child {
+      width:100px;
+    }
+
+    #table tr:last-child td {
+      height:30px;
+    }
+  </style>
+</head>
+<body>
+<p>Test passes if there are 4 green rectangles and no red.</p>
+
+<div id="container">
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+    <div id="cell3">cell3</div>
+    <div id="cell4">cell4</div>
+  </div>
+  <div class="error">
+    <table id="table">
+      <tbody>
+      <tr>
+        <td style="background-color:#f00">cell1</td>
+        <td style="background-color:#e00">cell2</td>
+      </tr>
+      <tr>
+        <td style="background-color:#e00">cell3</td>
+        <td style="background-color:#f00">cell4</td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/display-inline-grid.html b/testing/web-platform/tests/css/css-grid/grid-model/display-inline-grid.html
new file mode 100644
index 0000000000..e080ed8c95
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/display-inline-grid.html
@@ -0,0 +1,111 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Grid Layout: display: inline-grid</title>
+  <link rel="author" title="swain" href="mailto:swainet@126.com"/>
+  <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-17 -->
+  <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers"/>
+  <link rel="match" href="../reference/display-inline-grid-ref.html">
+  <meta name="assert" content="'display: inline-grid' causes an element to generate an inline-level grid container box." />
+  <style type="text/css">
+    #container {
+      position:relative;
+    }
+
+    #grid {
+      display:inline-grid;
+      grid-template-columns:100px 300px;
+      grid-template-rows:70px 30px;
+      width:400px;
+      height:100px;
+    }
+
+    #cell1 {
+      grid-column:1;
+      grid-row:1;
+      background-color:green;
+      height:70px;
+    }
+
+    #cell2 {
+      grid-column:2;
+      grid-row:1;
+      background-color:limegreen;
+      height:70px;
+    }
+
+    #cell3 {
+      grid-column:1;
+      grid-row:2;
+      background-color:limegreen;
+      height:30px;
+    }
+
+    #cell4 {
+      grid-column:2;
+      grid-row:2;
+      background-color:green;
+      height:30px;
+    }
+
+    .error {
+      position:absolute;
+      top:0;
+      left:0;
+      height:100px;
+      width:400px;
+      z-index:-1;
+    }
+
+    #table {
+      width:100%;
+      height:100%;
+      border-collapse:collapse;
+    }
+
+    #table td {
+      padding:0;
+      vertical-align:top;
+    }
+
+    #table td:first-child {
+      width:100px;
+    }
+
+    #table tr:last-child td {
+      height:30px;
+    }
+
+    span {
+      vertical-align:top;
+    }
+  </style>
+</head>
+<body>
+<p>Test passes if there are 4 green rectangles and no red.</p>
+
+<div id="container">
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+    <div id="cell3">cell3</div>
+    <div id="cell4">cell4</div>
+  </div>
+  <span>Inline</span>
+  <div class="error">
+    <table id="table">
+      <tbody>
+      <tr>
+        <td style="background-color:#f00">cell1</td>
+        <td style="background-color:#e00">cell2</td>
+      </tr>
+      <tr>
+        <td style="background-color:#e00">cell3</td>
+        <td style="background-color:#f00">cell4</td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/fixed-width-intrinsic-width-should-exclude-scrollbar-001.html b/testing/web-platform/tests/css/css-grid/grid-model/fixed-width-intrinsic-width-should-exclude-scrollbar-001.html
new file mode 100644
index 0000000000..26b8f5e01d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/fixed-width-intrinsic-width-should-exclude-scrollbar-001.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Grid: intrinsic width of fixed-width grid items.</title>
+<link rel="author" title="Sunil Ratnu" href="mailto:sunil.ratnu@samsung.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#overflow"/>
+<meta name="assert" content="This test ensures that scrollbar width is not accounted for fixed-width grid items' intrinsic width."/>
+<link href="/css/support/grid.css" rel="stylesheet"/>
+<style>
+.grid {
+    grid-template-columns: 400px 500px;
+    grid-template-rows: 200px 300px;
+}
+
+.gridItemScrollOverflow {
+    width: 50px;
+    height: 50px;
+    overflow: scroll;
+}
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+
+<div class="grid">
+    <div class="firstRowFirstColumn gridItemScrollOverflow" data-expected-width="50" data-expected-height="50"></div>
+    <div class="firstRowSecondColumn gridItemScrollOverflow" data-expected-width="50" data-expected-height="50"></div>
+    <div class="secondRowFirstColumn gridItemScrollOverflow" data-expected-width="50" data-expected-height="50"></div>
+    <!-- Grid item itself being a grid container-->
+    <div class="grid secondRowSecondColumn gridItemScrollOverflow" data-expected-width="50" data-expected-height="50"></div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-001.html
new file mode 100644
index 0000000000..6ee8231c93
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-001.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box-with-scrollbars.html">
+<meta name="assert" content="This test verifies that the scrollbars are shown on an empty grid if there are grid areas which exceed the grid container size, since the grid itself can cause overflow.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 150px / 150px;
+       width: 100px;
+       height: 100px;
+       overflow: auto;
+    }
+</style>
+<p>The test passes if you see a grey square below and both scrollbars are visible.</p>
+<div class="grid"></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-002.html
new file mode 100644
index 0000000000..1abc446e22
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-002.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box-with-scrollbars.html">
+<meta name="assert" content="This test verifies that the scrollbars are shown on a grid with an item placed inside the boundaries of the grid container, if there are grid areas which exceed the grid container size.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 150px / 150px;
+       width: 100px;
+       height: 100px;
+       overflow: auto;
+    }
+    .item {
+       width: 100px;
+       height: 100px;
+    }
+</style>
+<p>The test passes if you see a grey square below and both scrollbars are visible.</p>
+<div class="grid"><div class="item"></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-003.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-003.html
new file mode 100644
index 0000000000..aaba4f9244
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-003.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box-with-scrollbars.html">
+<meta name="assert" content="This test verifies that the scrollbars are shown on a grid with an item placed inside the boundaries of the grid container, if there are grid areas which exceed the grid container size.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 100px 50px / 100px 50px;
+       width: 100px;
+       height: 100px;
+       overflow: auto;
+    }
+    .item {
+       grid-column: 1;
+       grid-row: 1;
+       width: 100px;
+       height: 100px;
+    }
+</style>
+<p>The test passes if you see a grey square below and both scrollbars are visible.</p>
+<div class="grid"><div class="item"></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-004.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-004.html
new file mode 100644
index 0000000000..707056feb3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-004.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box-with-vertical-scrollbar.html">
+<meta name="assert" content="This test verifies that the vertical scrollbar is shown on a grid with an item placed below the bottom of the grid container.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 100px / 100%;
+       width: 100px;
+       height: 100px;
+       overflow: auto;
+    }
+    .item {
+       grid-column: 1;
+       grid-row: 1;
+       margin-top: 100px;
+       width: 50px;
+       height: 50px;
+    }
+</style>
+<p>The test passes if you see a grey square below and only the vertical scrollbar is visible.</p>
+<div class="grid"><div class="item"></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-005.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-005.html
new file mode 100644
index 0000000000..0184b399b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-005.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box-with-horizontal-scrollbar.html">
+<meta name="assert" content="This test verifies that the horizontal scrollbar is shown on a grid with an item placed behind the right edge of the grid container.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 100% / 100px;
+       width: 100px;
+       height: 100px;
+       overflow: auto;
+    }
+    .item {
+       grid-column: 1;
+       grid-row: 1;
+       margin-left: 100px;
+       width: 50px;
+       height: 50px;
+    }
+</style>
+<p>The test passes if you see a grey square below and only the horizontal scrollbar is visible.</p>
+<div class="grid"><div class="item"></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-006.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-006.html
new file mode 100644
index 0000000000..248fc425fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-006.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box-with-scrollbars.html">
+<meta name="assert" content="This test verifies that the scrollbars are shown on a grid with an item placed outside the boundaries of the grid container.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 100px / 100px;
+       width: 100px;
+       height: 100px;
+       overflow: auto;
+    }
+    .item {
+       grid-column: 1;
+       grid-row: 1;
+       margin: 100px 0 0 100px;
+       width: 50px;
+       height: 50px;
+    }
+</style>
+<p>The test passes if you see a grey square below and both scrollbars are visible.</p>
+<div class="grid"><div class="item"></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-007.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-007.html
new file mode 100644
index 0000000000..0a7d3aa28a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-007.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box.html">
+<meta name="assert" content="This test verifies that the scrollbars are not shown on a grid with an item with 0px width even when it's placed in a grid area outside the boundaries of the grid container.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 100px 100px / 100px 100px;
+       width: 100px;
+       height: 100px;
+    }
+    .item {
+       grid-column: 2;
+       grid-row: 2;
+       width: 0px;
+       height: 50px;
+    }
+</style>
+<p>The test passes if you see a grey square below without any scrollbar.</p>
+<div class="grid"><div class="item"></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-008.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-008.html
new file mode 100644
index 0000000000..df39ed8262
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-008.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box.html">
+<meta name="assert" content="This test verifies that the scrollbars are not shown on a grid with an item with 0px height even when it's placed in a grid area outside the boundaries of the grid container.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 100px 100px / 100px 100px;
+       width: 100px;
+       height: 100px;
+    }
+    .item {
+       grid-column: 2;
+       grid-row: 2;
+       width: 50px;
+       height: 0px;
+    }
+</style>
+<p>The test passes if you see a grey square below without any scrollbar.</p>
+<div class="grid"><div class="item"></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-009.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-009.html
new file mode 100644
index 0000000000..367820eaea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-areas-overflowing-grid-container-009.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas 'overflowing' the grid container size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box-with-scrollbars.html">
+<meta name="assert" content="This test verifies that the scrollbars are shown on a grid with an item that has large margins placed inside the boundaries of the grid container, if there are grid areas which exceed the grid container size.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 150px / 150px;
+       width: 100px;
+       height: 100px;
+       overflow: auto;
+    }
+    .item {
+       width: 100px;
+       height: 100px;
+       margin-right: 50px;
+       margin-bottom: 50px;
+    }
+</style>
+<p>The test passes if you see a grey square below and both scrollbars are visible.</p>
+<div class="grid"><div class="item"></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-box-sizing-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-box-sizing-001.html
new file mode 100644
index 0000000000..b990292934
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-box-sizing-001.html
@@ -0,0 +1,188 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid container and tracks sizes with box-sizing property</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#intrinsic-sizes">
+<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing">
+<meta name="assert" content="The test checks the sizes of a grid container and its track depending on min-size constraints and the box-sizing property.">
+<style>
+.wrapper {
+  position: relative;
+  width: 200px;
+  height: 100px;
+}
+
+.grid {
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: grid;
+  border-style: solid;
+  border-width: 5px 10px 15px 20px;
+  padding: 17px 13px 7px 3px;
+}
+
+.wholeWidth {
+  right: 0;
+}
+
+.wholeHeight {
+  bottom: 0;
+}
+.item {
+  background: cyan;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<div id="log"></div>
+
+<div class="wrapper">
+  <div class="grid wholeWidth" style="height: 100px;" data-expected-width="200" data-expected-height="144">
+    <div class="item" data-expected-width="154" data-expected-height="100"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeWidth" style="min-height: 100px;" data-expected-width="200" data-expected-height="144">
+    <div class="item" data-expected-width="154" data-expected-height="100"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeWidth" style="height: 100px; box-sizing: border-box;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeWidth" style="min-height: 100px; box-sizing: border-box;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeWidth" style="bottom: 0;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeWidth" style="bottom: 0;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeWidth" style="bottom: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeWidth" style="bottom: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeWidth" style="height: 100px; bottom: 0;" data-expected-width="200" data-expected-height="144">
+    <div class="item" data-expected-width="154" data-expected-height="100"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeWidth" style="min-height: 100px; bottom: 0;" data-expected-width="200" data-expected-height="144">
+    <div class="item" data-expected-width="154" data-expected-height="100"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeWidth" style="height: 100px; bottom: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeWidth" style="min-height: 100px; bottom: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeHeight" style="width: 200px;" data-expected-width="246" data-expected-height="100">
+    <div class="item" data-expected-width="200" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeHeight" style="min-width: 200px;" data-expected-width="246" data-expected-height="100">
+    <div class="item" data-expected-width="200" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeHeight" style="width: 200px; box-sizing: border-box;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeHeight" style="min-width: 200px; box-sizing: border-box;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeHeight" style="right: 0;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeHeight" style="right: 0;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeHeight" style="right: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeHeight" style="right: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeHeight" style="width: 200px; right: 0;" data-expected-width="246" data-expected-height="100">
+    <div class="item" data-expected-width="200" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeHeight" style="min-width: 200px; right: 0;" data-expected-width="246" data-expected-height="100">
+    <div class="item" data-expected-width="200" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeHeight" style="width: 200px; right: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+<div class="wrapper">
+  <div class="grid wholeHeight" style="min-width: 200px; right: 0; box-sizing: border-box;" data-expected-width="200" data-expected-height="100">
+    <div class="item" data-expected-width="154" data-expected-height="56"></div>
+  </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-button-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-button-001.html
new file mode 100644
index 0000000000..b84c10fcab
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-button-001.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>Grid items work inside a button</title>
+<meta name="assert" content="When a button is set to display: grid, its children should flow into its grid cells">
+<link rel="author" title="Bryan Robinson" href="bryanlrobinson@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-containers">
+<style>
+  .grid { display: grid; grid-template-columns: 100px 200px; border: 2px solid purple; box-sizing: border-box; }
+  span { border: 1px dashed green; box-sizing: border-box; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<button class="grid" ><span class="item1" data-expected-width="100">item 1</span> <span class="item2" data-expected-width="200">item 2</span></button>
+
+<script>
+  checkLayout("[data-expected-width]")
+</script>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-computed-value-display-floated-items-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-computed-value-display-floated-items-001.html
new file mode 100644
index 0000000000..17c0fbd1b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-computed-value-display-floated-items-001.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'float' affects to the computed value of 'display' on grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+<link rel="help" href="http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo" title="9.7 Relationships between 'display', 'position', and 'float'">
+<meta name="flags" content="dom">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #grid {
+    display: grid;
+  }
+
+  #inline-grid {
+    display: inline-grid;
+  }
+
+  .inline-table {
+    display: inline-table;
+  }
+
+  .inline {
+    display: inline;
+  }
+
+  .flex {
+    display: flex;
+  }
+
+  .float {
+    float: left;
+  }
+</style>
+<div id="log"></div>
+
+<div id="grid">
+  <div id="grid-inline-table" class="float inline-table"></div>
+  <div id="grid-inline" class="float inline"></div>
+  <div id="grid-flex" class="float flex"></div>
+</div>
+<div id="inline-grid">
+  <div id="inline-grid-inline-table" class="float inline-table"></div>
+  <div id="inline-grid-inline" class="float inline"></div>
+  <div id="inline-grid-flex" class="float flex"></div>
+</div>
+
+<script>
+  function testComputedStyleDisplay(element, value) {
+    assert_equals(getComputedStyle(element).getPropertyValue("display"), value, "getComputedStyle() display should be '" + value + "'");
+  }
+
+  var gridInlineTable = document.getElementById("grid-inline-table");
+  test(function() {
+      testComputedStyleDisplay(gridInlineTable, "table");
+    }, "Test display floated 'inline-table' grid item");
+
+  var gridInline = document.getElementById("grid-inline");
+  test(function() {
+      testComputedStyleDisplay(gridInline, "block");
+    }, "Test display floated 'inline' grid item");
+
+  var gridFlex = document.getElementById("grid-flex");
+  test(function() {
+      testComputedStyleDisplay(gridFlex, "flex");
+    }, "Test display floated 'flex' grid item");
+
+  var inlineGridInlineTable = document.getElementById("inline-grid-inline-table");
+  test(function() {
+      testComputedStyleDisplay(inlineGridInlineTable, "table");
+    }, "Test display floated 'inline-table' grid item within an inline grid");
+
+  var inlineGridInline = document.getElementById("inline-grid-inline");
+  test(function() {
+      testComputedStyleDisplay(inlineGridInline, "block");
+    }, "Test display floated 'inline' grid item within an inline grid");
+
+  var inlineGridFlex = document.getElementById("inline-grid-flex");
+  test(function() {
+      testComputedStyleDisplay(inlineGridFlex, "flex");
+    }, "Test display floated 'flex' grid item within an inline grid");
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-001.html
new file mode 100644
index 0000000000..8e322fe38e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-001.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: '::first-letter' is ignored in grid containers</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers">
+<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter">
+<meta name="assert" content="The test checks that grid item should ignore grid container's first-letter pseudo-element.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+  body { line-height: 20px; }
+  .grid-first-letter::first-letter { line-height: 100px; color: red; }
+  .container-first-letter::first-letter { line-height: 200px; color: green; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.container');">
+
+<div id="log"></div>
+
+<div class="container">
+  <div class="grid grid-first-letter">
+    <div class="item" data-expected-height=20>The first item.</div>
+    <div class="item" data-expected-height=20>The second item.</div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="inline-grid grid-first-letter">
+    <div class="item" data-expected-height=20>The first item.</div>
+    <div class="item" data-expected-height=20>The second item.</div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="grid grid-first-letter" data-expected-height=20>
+    Anonymous item.
+  </div>
+</div>
+
+<div class="container">
+  <div class="inline-grid grid-first-letter" data-expected-height=20>
+    Anonymous item.
+  </div>
+</div>
+
+<div class="container container-first-letter">
+  <div class="grid grid-first-letter">
+    <div class="item" data-expected-height=20>The first item.</div>
+    <div class="item" data-expected-height=20>The second item.</div>
+  </div>
+  <div data-expected-height=200>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+  <div class="inline-grid grid-first-letter">
+    <div class="item" data-expected-height=20>The first item.</div>
+    <div class="item" data-expected-height=20>The second item.</div>
+  </div>
+  <div data-expected-height=20>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+  <div class="grid grid-first-letter" data-expected-height=20>
+    Anonymous item.
+  </div>
+  <div data-expected-height=200>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+  <div class="inline-grid grid-first-letter" data-expected-height=20>
+    Anonymous item.
+  </div>
+  <div data-expected-height=20>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+  <div class="grid">
+    <div class="item" data-expected-height=20>The first item.</div>
+    <div class="item" data-expected-height=20>The second item.</div>
+  </div>
+  <div data-expected-height=200>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+  <div class="inline-grid">
+    <div class="item" data-expected-height=20>The first item.</div>
+    <div class="item" data-expected-height=20>The second item.</div>
+  </div>
+  <div data-expected-height=20>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+  <div class="grid" data-expected-height=20>
+    Anonymous item.
+  </div>
+  <div data-expected-height=200>Out of grid.</div>
+</div>
+
+<div class="container container-first-letter">
+  <div class="inline-grid" data-expected-height=20>
+    Anonymous item.
+  </div>
+  <div data-expected-height=20>Out of grid.</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-002-ref.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-002-ref.html
new file mode 100644
index 0000000000..1d89a21278
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-002-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test Reference</title>
+<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org">
+<button style="display:grid">
+  First letter should not be red
+</button>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-002.html
new file mode 100644
index 0000000000..42014addf0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-letter-002.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: '::first-letter' is ignored in button grid containers</title>
+<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers">
+<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter">
+<link rel="match" href="grid-container-ignores-first-letter-002-ref.html">
+<style>
+  /* The combination of button, grid, nested inlines, and ::first-letter crashes Blink */
+  button { display: grid }
+  button::first-letter { color: red }
+</style>
+<button>
+  <span>
+    <span>First letter should not be red</span>
+  </span>
+</button>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-line-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-line-001.html
new file mode 100644
index 0000000000..b19eee76a9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-ignores-first-line-001.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: '::first-line' is ignored in grid containers</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers">
+<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line">
+<meta name="assert" content="The test checks that grid item should ignore grid container's first-line pseudo-element.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+  body { line-height: 20px; }
+  .grid-first-line::first-line { line-height: 100px; }
+  .container::first-line { line-height: 200px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid,.inline-grid');">
+
+<div id="log"></div>
+
+<div class="grid grid-first-line">
+  <div class="item" data-expected-height=20>The first item.</div>
+  <div class="item" data-expected-height=20>The second item.</div>
+</div>
+
+<div class="inline-grid grid-first-line">
+  <div class="item" data-expected-height=20>The first item.</div>
+  <div class="item" data-expected-height=20>The second item.</div>
+</div>
+
+<div class="grid grid-first-line" data-expected-height=20>
+  Anonymous item.
+</div>
+
+<div class="inline-grid grid-first-line" data-expected-height=20>
+  Anonymous item.
+</div>
+
+<div class="container">
+  <div class="grid grid-first-line">
+    <div class="item" data-expected-height=20>The first item.</div>
+    <div class="item" data-expected-height=20>The second item.</div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="inline-grid grid-first-line">
+    <div class="item" data-expected-height=20>The first item.</div>
+    <div class="item" data-expected-height=20>The second item.</div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="grid grid-first-line" data-expected-height=20>
+    Anonymous item.
+  </div>
+</div>
+
+<div class="container">
+  <div class="inline-grid grid-first-line" data-expected-height=20>
+    Anonymous item.
+  </div>
+</div>
+
+<div class="container">
+  <div class="grid">
+    <div class="item" data-expected-height=20>The first item.</div>
+    <div class="item" data-expected-height=20>The second item.</div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="inline-grid">
+    <div class="item" data-expected-height=20>The first item.</div>
+    <div class="item" data-expected-height=20>The second item.</div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="grid" data-expected-height=20>
+    Anonymous item.
+  </div>
+</div>
+
+<div class="container">
+  <div class="inline-grid" data-expected-height=20>
+    Anonymous item.
+  </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-margin-border-padding-scrollbar-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-margin-border-padding-scrollbar-001.html
new file mode 100644
index 0000000000..bad3f89b53
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-margin-border-padding-scrollbar-001.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Grid: grid container's size includes border, padding and scrollbar.</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid/#intrinsic-sizes"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#overflow"/>
+<meta name="assert" content="This test checks that grid container size includes border, padding and scrollbar; ignoring margin as expected."/>
+<link rel="issue" href="https://crbug.com/532032"/>
+<link href="/css/support/grid.css" rel="stylesheet"/>
+<link href="/css/support/width-keyword-classes.css" rel="stylesheet">
+<link href="/css/support/height-keyword-classes.css" rel="stylesheet">
+<style>
+.margin {
+    margin: 10px;
+}
+
+.border {
+    border: 5px solid black;
+}
+
+.padding {
+    padding: 20px;
+}
+
+.scroll {
+    overflow: scroll;
+}
+
+.item {
+    width: 100px;
+    height: 100px;
+    background: lime;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+</head>
+<body>
+    <div class="grid min-content" data-expected-width="100" data-expected-height="100">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content margin" data-expected-width="100" data-expected-height="100">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content border" data-expected-width="110" data-expected-height="110">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content padding" data-expected-width="140" data-expected-height="140">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content scroll" data-test-width-without-scrollbar="100" data-test-height-without-scrollbar="100">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content margin border" data-expected-width="110" data-expected-height="110">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content margin padding" data-expected-width="140" data-expected-height="140">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content margin scroll" data-test-width-without-scrollbar="100" data-test-height-without-scrollbar="100">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content border padding" data-expected-width="150" data-expected-height="150">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content border scroll" data-test-width-without-scrollbar="110" data-test-height-without-scrollbar="110">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content padding scroll" data-test-width-without-scrollbar="140" data-test-height-without-scrollbar="140">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content margin border padding" data-expected-width="150" data-expected-height="150">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content margin border scroll" data-test-width-without-scrollbar="110" data-test-height-without-scrollbar="110">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content margin padding scroll" data-test-width-without-scrollbar="140" data-test-height-without-scrollbar="140">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content border padding scroll" data-test-width-without-scrollbar="150" data-test-height-without-scrollbar="150">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="grid min-content margin border padding scroll" data-test-width-without-scrollbar="150" data-test-height-without-scrollbar="150">
+        <div class="item" data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <!-- This div is only for measuring scrollbar size -->
+    <div id="measure" style="overflow: scroll;">
+        <div style="min-height: 300px;"></div>
+    </div>
+
+<script>
+    var measure = document.getElementById('measure');
+    var scrollbarWidth = measure.offsetWidth - measure.clientWidth;
+    var scrollbarHeight = measure.offsetHeight - measure.clientHeight;
+
+    // Here are the data-test-width-without-scrollbar (and height) attributes of all
+    // elements that have the "scroll" class. Things that contribute to the expected
+    // sizes are:
+    //
+    // - width:
+    //  padding{Left,Right}, border{Left,Right}, element width and its scrollbarWidth.
+    //
+    // - height:
+    //  padding{Top,Bottom}, border{Top, Bottom}, element width and its scrollbarHeight.
+    //
+    // The data-expected-width (and height) attributes are dynamically set to the elements
+    // so that we can ensure the scrollbar sizes are calculated in an engine-agnostic way.
+    var elements = document.getElementsByClassName("scroll");
+    for (var i = 0; i < elements.length; i++) {
+      const expectedWidth = parseInt(elements[i].getAttribute("data-test-width-without-scrollbar"));
+      const expectedHeight = parseInt(elements[i].getAttribute("data-test-height-without-scrollbar"));
+      elements[i].setAttribute("data-expected-width", expectedWidth + scrollbarWidth);
+      elements[i].setAttribute("data-expected-height", expectedHeight + scrollbarHeight);
+    }
+
+    checkLayout('.grid');
+</script>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-001-ref.html
new file mode 100644
index 0000000000..a40a1ea25c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-001-ref.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS container Layout Test Reference</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .container {
+    font: 10px/1 Ahem;
+    margin: 10px;
+    background: grey;
+  }
+
+  .scrollX {
+    overflow-x: scroll;
+  }
+
+  .scrollY {
+    overflow-y: scroll;
+  }
+
+  .fixedSize {
+    width: 200px;
+    height: 50px;
+  }
+
+  .container > div {
+    background: cyan;
+    width: 100%;
+    height: 100%;
+  }
+
+  .directionRTL {
+    direction: rtl;
+  }
+</style>
+
+<p>The test passes if it has the same output as the reference.</p>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: ltr;</h2>
+
+  <div class="container scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="container scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="container scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="container fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="container fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="container fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: rtl;</h2>
+
+  <div class="directionRTL container scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-001.html
new file mode 100644
index 0000000000..848ed7d909
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-001.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid container with scrollbars</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="match" href="grid-container-scrollbar-001-ref.html">
+<meta name="assert" content="This test verifies that scrollbars are properly painted on grid containers, and are shown in the expected position depending on the direction.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .grid {
+    font: 10px/1 Ahem;
+    margin: 10px;
+  }
+
+  .scrollX {
+    overflow-x: scroll;
+  }
+
+  .scrollY {
+    overflow-y: scroll;
+  }
+
+  .fixedSize {
+    width: 200px;
+    height: 50px;
+  }
+
+  .grid > div {
+    background: cyan;
+  }
+</style>
+
+<p>The test passes if it has the same output as the reference.</p>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: ltr;</h2>
+
+  <div class="grid scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="grid scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="grid scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="grid fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="grid fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="grid fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: rtl;</h2>
+
+  <div class="directionRTL grid scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001-ref.html
new file mode 100644
index 0000000000..778c97be1f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001-ref.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS container Layout Test Reference</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .container {
+    font: 10px/1 Ahem;
+    margin: 10px;
+    background: grey;
+    writing-mode: vertical-lr;
+  }
+
+  .scrollX {
+    overflow-x: scroll;
+  }
+
+  .scrollY {
+    overflow-y: scroll;
+  }
+
+  .fixedSize {
+    width: 200px;
+    height: 50px;
+  }
+
+  .container > div {
+    background: cyan;
+    width: 100%;
+    height: 100%;
+  }
+
+  .directionRTL {
+    direction: rtl;
+  }
+</style>
+
+<p>The test passes if it has the same output as the reference.</p>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: ltr;</h2>
+
+  <div class="container scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="container scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="container scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="container fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="container fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="container fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: rtl;</h2>
+
+  <div class="directionRTL container scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001.html
new file mode 100644
index 0000000000..aed5d0cf49
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-lr-001.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid container with scrollbars</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="match" href="grid-container-scrollbar-vertical-lr-001-ref.html">
+<meta name="assert" content="This test verifies that scrollbars are properly painted on grid containers, and are shown in the expected position depending on the direction.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .grid {
+    font: 10px/1 Ahem;
+    margin: 10px;
+    writing-mode: vertical-lr;
+  }
+
+  .scrollX {
+    overflow-x: scroll;
+  }
+
+  .scrollY {
+    overflow-y: scroll;
+  }
+
+  .fixedSize {
+    width: 200px;
+    height: 50px;
+  }
+
+  .grid > div {
+    background: cyan;
+  }
+</style>
+
+<p>The test passes if it has the same output as the reference.</p>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: ltr;</h2>
+
+  <div class="grid scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="grid scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="grid scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="grid fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="grid fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="grid fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: rtl;</h2>
+
+  <div class="directionRTL grid scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001-ref.html
new file mode 100644
index 0000000000..a511347516
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001-ref.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS container Layout Test Reference</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .container {
+    font: 10px/1 Ahem;
+    margin: 10px;
+    background: grey;
+    writing-mode: vertical-rl;
+  }
+
+  .scrollX {
+    overflow-x: scroll;
+  }
+
+  .scrollY {
+    overflow-y: scroll;
+  }
+
+  .fixedSize {
+    width: 200px;
+    height: 50px;
+  }
+
+  .container > div {
+    background: cyan;
+    width: 100%;
+    height: 100%;
+  }
+
+  .directionRTL {
+    direction: rtl;
+  }
+</style>
+
+<p>The test passes if it has the same output as the reference.</p>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: ltr;</h2>
+
+  <div class="container scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="container scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="container scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="container fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="container fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="container fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: rtl;</h2>
+
+  <div class="directionRTL container scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL container fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001.html
new file mode 100644
index 0000000000..e07223df2a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbar-vertical-rl-001.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid container with scrollbars</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="match" href="grid-container-scrollbar-vertical-rl-001-ref.html">
+<meta name="assert" content="This test verifies that scrollbars are properly painted on grid containers, and are shown in the expected position depending on the direction.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  .grid {
+    font: 10px/1 Ahem;
+    margin: 10px;
+    writing-mode: vertical-rl;
+  }
+
+  .scrollX {
+    overflow-x: scroll;
+  }
+
+  .scrollY {
+    overflow-y: scroll;
+  }
+
+  .fixedSize {
+    width: 200px;
+    height: 50px;
+  }
+
+  .grid > div {
+    background: cyan;
+  }
+</style>
+
+<p>The test passes if it has the same output as the reference.</p>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: ltr;</h2>
+
+  <div class="grid scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="grid scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="grid scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="grid fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="grid fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="grid fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
+
+<div style="float: left; width: 350px;">
+
+  <h2>direction: rtl;</h2>
+
+  <div class="directionRTL grid scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid scrollX scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid fixedSize scrollX">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid fixedSize scrollY">
+    <div>item</div>
+  </div>
+
+  <div class="directionRTL grid fixedSize scrollX scrollY">
+    <div>item</div>
+  </div>
+
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbars-sizing-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbars-sizing-001.html
new file mode 100644
index 0000000000..43b62a9316
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbars-sizing-001.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>CSS Grid Layout Test: Grid container's height with scrollbars</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#overflow"/>
+<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=583743"/>
+<link rel="match" href="../reference/grid-container-scrollbars-sizing-001-ref.html">
+<meta name="assert" content="This test ensures that the grid container considers the scrollbar when computing the logical height."/>
+<style>
+html {
+  overflow-x: scroll;
+}
+.grid {
+  display: grid;
+  float: left;
+  overflow-y: scroll;
+  overflow-x: scroll;
+}
+.item {
+  background: lime;
+  width: 100px;
+  height: 100px;
+}
+</style>
+<p>This test passes if you see a 100x100px green box and scrollbars are disabled.</p>
+<div class="grid">
+    <div class="item">item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbars-sizing-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbars-sizing-002.html
new file mode 100644
index 0000000000..99cc5ee771
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-scrollbars-sizing-002.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>CSS Grid Layout Test: Intrinsic logical width with scrollbars</title>
+<link rel="author" title="Sunil Ratnu" href="mailto:sunil.ratnu@samsung.com">
+<link rel="issue" href="https://codereview.chromium.org/535913002"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid/#overflow"/>
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="match" href="../reference/grid-container-scrollbars-sizing-002-ref.html">
+<meta name="assert" content="This test ensures that the grid container considers the scrollbars when computing the intrinsic logical widths."/>
+
+<style>
+.grid, .inline-grid {
+  overflow: scroll;
+}
+.gridItem {
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+</style>
+<body>
+<div class='grid fit-content'>
+  <span class='gridItem'></span>
+</div>
+<div class='grid fit-content' style='overflow-y: hidden'>
+  <span class='gridItem'></span>
+</div>
+<div class='inline-grid fit-content'>
+  <span class='gridItem'></span>
+</div>
+<div class='inline-grid fit-content' style='overflow-y: hidden'>
+  <span class='gridItem'></span>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-container-sizing-constraints-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-sizing-constraints-001.html
new file mode 100644
index 0000000000..38759c2c61
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-container-sizing-constraints-001.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: min|max-content sizing constraints on grid containers</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#intrinsic-sizes">
+<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#sizing-values">
+<meta name="assert" content="The test checks the intrinsic size of a grid container when sized under different constraints. In inline axis min|max-content have some effect, however in block axis they behave as auto.">
+<style>
+  .grid {
+    display: grid;
+    float: left;
+    background: lime;
+  }
+
+  .grid-columns-minmax-50-100 {
+    grid-template-columns: minmax(50px, 100px);
+  }
+
+  .grid-columns-minmax-100-200 {
+    grid-template-columns: minmax(100px, 200px);
+  }
+
+  .grid-rows-minmax-50-100 {
+    grid-template-rows: minmax(50px, 100px);
+  }
+
+  .min-content {
+    width: min-content;
+    height: min-content;
+  }
+
+  .max-content {
+    width: max-content;
+    height: max-content;
+  }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid');">
+
+  <div id="log"></div>
+
+  <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+    data-expected-width="100" data-expected-height="100"></div>
+
+  <div class="grid min-content grid-columns-minmax-100-200 grid-rows-minmax-50-100"
+    data-expected-width="100" data-expected-height="100"></div>
+
+  <div class="grid max-content grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+    data-expected-width="100" data-expected-height="100"></div>
+
+  <div class="min-content">
+    <div class="grid grid-columns-minmax-100-200 grid-rows-minmax-50-100"
+      data-expected-width="100" data-expected-height="100"></div>
+  </div>
+
+  <div class="max-content">
+    <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+      data-expected-width="100" data-expected-height="100"></div>
+  </div>
+
+  <div style="writing-mode: vertical-lr;">
+
+    <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+      data-expected-width="100" data-expected-height="100"></div>
+
+    <div class="grid min-content grid-columns-minmax-100-200 grid-rows-minmax-50-100"
+      data-expected-width="100" data-expected-height="100"></div>
+
+    <div class="grid max-content grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+      data-expected-width="100" data-expected-height="100"></div>
+
+    <div class="min-content">
+      <div class="grid grid-columns-minmax-100-200 grid-rows-minmax-50-100"
+        data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="max-content">
+      <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+        data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+  </div>
+
+  <div style="writing-mode: vertical-rl;">
+
+    <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+      data-expected-width="100" data-expected-height="100"></div>
+
+    <div class="grid min-content grid-columns-minmax-100-200 grid-rows-minmax-50-100"
+      data-expected-width="100" data-expected-height="100"></div>
+
+    <div class="grid max-content grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+      data-expected-width="100" data-expected-height="100"></div>
+
+    <div class="min-content">
+      <div class="grid grid-columns-minmax-100-200 grid-rows-minmax-50-100"
+        data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+    <div class="max-content">
+      <div class="grid grid-columns-minmax-50-100 grid-rows-minmax-50-100"
+        data-expected-width="100" data-expected-height="100"></div>
+    </div>
+
+  </div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-display-grid-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-display-grid-001.html
new file mode 100644
index 0000000000..3599aa9604
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-display-grid-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'grid' value for 'display' property</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2014-11-18 -->
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<meta name="assert" content="This test checks that 'grid' value for 'display' property generates a block level containing box.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  .test-grid-overlapping-green {
+    display: grid;
+    font: 25px/1 Ahem;
+    color: green;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div class="test-grid-overlapping-green">
+  <span>firs</span>
+  <span>seco</span>
+</div>
+<div class="test-grid-overlapping-green">
+  <span>firs</span>
+  <span>seco</span>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-display-inline-grid-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-display-inline-grid-001.html
new file mode 100644
index 0000000000..30104e4220
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-display-inline-grid-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'inline-grid' value for 'display' property</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2014-11-18 -->
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="This test checks that 'inline-grid' value for 'display' property generates an inline level containing box.">
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  .test-inline-grid-overlapping-green {
+    display: inline-grid;
+    background-color: green;
+    width: 50px;
+    height: 100px;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div class="test-inline-grid-overlapping-green"></div><div class="test-inline-grid-overlapping-green"></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-first-letter-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-letter-001.html
new file mode 100644
index 0000000000..66eb427cfb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-letter-001.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: '::first-letter' from grid container does not apply to grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element">
+<link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.html">
+<meta name="assert" content="This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to a grid container.">
+<style>
+  .grid {
+    display: grid;
+    color: green;
+  }
+
+  .grid::first-letter {
+    color: red;
+  }
+</style>
+<div class="grid">
+  <div>
+    <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-first-letter-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-letter-002.html
new file mode 100644
index 0000000000..27aa0256da
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-letter-002.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: '::first-letter' from grid container ancestors does not apply to grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element">
+<link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.html">
+<meta name="assert" content="This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to a grid container ancestors.">
+<style>
+  .grid {
+    display: grid;
+    color: green;
+  }
+
+  body::first-letter {
+    color: red;
+  }
+</style>
+<div class="grid">
+  <div>
+    <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-first-letter-003.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-letter-003.html
new file mode 100644
index 0000000000..12b88c3115
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-letter-003.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: '::first-letter' works on grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element">
+<link rel="match" href="../reference/grid-first-letter-green-margin-no-collapse-ref.html">
+<meta name="assert" content="This test checks that '::first-letter' pseudo-element works as expected if it is applied directly to a grid item.">
+<style>
+  .grid {
+    display: grid;
+  }
+
+  .item::first-letter {
+    color: green;
+  }
+</style>
+<div class="grid">
+  <p class="item">
+    The <strong>first letter</strong> of this paragraph, and only that one, should be <strong>green</strong>.
+    In addition, body and paragraph margins should <strong>not collapse</strong>.
+  </p>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-first-line-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-line-001.html
new file mode 100644
index 0000000000..9f154eee27
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-line-001.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: '::first-line' from grid container does not apply to grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS">
+<link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.html">
+<meta name="assert" content="This test checks that '::first-line' pseudo-element is ignored in grid items when applied to a grid container.">
+<style>
+  .grid {
+    display: grid;
+    color: green;
+  }
+
+  .grid::first-line {
+    color: red;
+  }
+</style>
+<div class="grid">
+  <div>
+    <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-first-line-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-line-002.html
new file mode 100644
index 0000000000..ea87c875fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-line-002.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: '::first-line' from grid container ancestors does not apply to grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS">
+<link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.html">
+<meta name="assert" content="This test checks that '::first-line' pseudo-element is ignored in grid items when applied to a grid container ancestors.">
+<style>
+  .grid {
+    display: grid;
+    color: green;
+  }
+
+  body::first-line {
+    color: red;
+  }
+</style>
+<div class="grid">
+  <div>
+    <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-first-line-003.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-line-003.html
new file mode 100644
index 0000000000..47f727de15
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-first-line-003.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: '::first-line' works on grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS">
+<link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.html">
+<meta name="assert" content="This test checks that '::first-line' pseudo-element works as expected if it is applied directly to a grid item.">
+<style>
+  .grid {
+    display: grid;
+    color: red;
+  }
+
+  .item::first-line {
+    color: green;
+  }
+</style>
+<div class="grid">
+  <p class="item">
+    This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.
+  </p>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-float-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-float-001.html
new file mode 100644
index 0000000000..521a3bd6cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-float-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'float' has no effect on grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-01-03 -->
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  .grid {
+    display: grid;
+  }
+
+  .test-overlapping-green {
+    background-color: green;
+    width: 100px;
+    height: 50px;
+  }
+
+  .float-left {
+    float: left;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+
+<div class="grid">
+  <div class="test-overlapping-green float-left"></div>
+  <div class="test-overlapping-green"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-float-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-float-002.html
new file mode 100644
index 0000000000..2a849df25c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-float-002.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Grid Layout Test: 'float' and 'clear' have no effect on a grid item.</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-containers"/>
+<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=79180"/>
+<link href="/css/support/grid.css" rel="stylesheet"/>
+<link href="/css/support/alignment.css" rel="stylesheet"/>
+<meta name="assert" content="This test ensures that the grid's items are not affected by the 'float' and 'clear' properties."/>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<style>
+.container {
+  background-color:grey;
+}
+
+.gridItem {
+  width: 50px;
+  height: 50px;
+}
+</style>
+<body onload="checkLayout('.container')">
+
+<div style="position: relative">
+  <div class="container grid justifyContentStart">
+    <div style="float: right;" class="gridItem firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+    <div class="gridItem firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+    <div style="float: left;" class="gridItem firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+    <div style="float: left;" class="gridItem secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
+    <div style="clear: both;" class="gridItem secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
+    <div style="float: left;" class="gridItem secondRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-floats-no-intrude-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-floats-no-intrude-001.html
new file mode 100644
index 0000000000..31eab4ba69
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-floats-no-intrude-001.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: floats do not intrude into a grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  .test-overlapping-green {
+    background-color: green;
+    width: 50px;
+    height: 100px;
+  }
+
+  .float {
+    float: left;
+  }
+
+  .grid {
+    display: grid;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+
+<div class="float test-overlapping-green"></div>
+<div class="grid test-overlapping-green"></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-floats-no-intrude-002-ref.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-floats-no-intrude-002-ref.html
new file mode 100644
index 0000000000..070980ed27
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-floats-no-intrude-002-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="stylesheet" href="/css/support/grid.css">
+<style>
+.cell {
+  width: 50px;
+  height: auto;
+  min-height: 50px
+}
+
+.invisibleFont {
+  color: lime;
+}
+
+.floatLeft {
+  float: left;
+}
+
+.clearLeft {
+  clear: left;
+}
+
+.relative {
+  position: relative;
+}
+</style>
+</head>
+
+<body>
+
+<div>This test checks that grid item sets a new formatting context for its content, preventing any 'float' protruding content on the adjoining grid item ('Float' text shouldn't overflow the first row).</div>
+
+<div>
+  <div class="cell relative floatLeft firstRowFirstColumn">
+    <div>Float</div>
+    <div>Float</div>
+    <div>Float</div>
+    <div>Float</div>
+  </div>
+  <div class="cell floatLeft firstRowSecondColumn">
+    <div class="invisibleFont">Float</div>
+    <div class="invisibleFont">Float</div>
+    <div class="invisibleFont">Float</div>
+    <div class="invisibleFont">Float</div>
+  </div>
+  <div class="cell floatLeft clearLeft secondRowFirstColumn"></div>
+  <div class="cell floatLeft secondRowSecondColumn"></div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-floats-no-intrude-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-floats-no-intrude-002.html
new file mode 100644
index 0000000000..9c26e02105
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-floats-no-intrude-002.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Grid Layout Test: floats do not protrude content onto grid items</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-containers">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=430100">
+<link rel="match" href="grid-floats-no-intrude-002-ref.html">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<meta name="assert" content="Test that a grid item sets a new formatting context for its content, preventing any 'float' protruding content on the adjoining grid item." />
+
+<style>
+.grid {
+  grid-auto-columns: minmax(50px, max-content);
+  grid-auto-rows: minmax(50px, max-content);
+}
+
+.floatChild {
+  float: left;
+  clear: both;
+}
+</style>
+</head>
+
+<body>
+
+<div>This test checks that grid item sets a new formatting context for its content, preventing any 'float' protruding content on the adjoining grid item ('Float' text shouldn't overflow the first row).</div>
+
+<div class="grid fit-content">
+  <div class="firstRowFirstColumn">
+    <div class="floatChild">Float</div>
+    <div class="floatChild">Float</div>
+    <div class="floatChild">Float</div>
+    <div class="floatChild">Float</div>
+  </div>
+  <div class="firstRowSecondColumn"></div>
+  <div class="secondRowFirstColumn"></div>
+  <div class="secondRowSecondColumn"></div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-gutters-and-flex-content-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-gutters-and-flex-content-001.html
new file mode 100644
index 0000000000..99b04e062f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-gutters-and-flex-content-001.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<title>CSS Grid: grid gutters and flex content.</title>
+<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#gutters"/>
+<meta name="assert" content="Check that gutters do not interfere with flex content resolution for columns or with content sized tracks."/>
+<link rel="stylesheet" href="/css/support/grid.css"/>
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css"/>
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/fonts/ahem.css" type="text/css"/>
+<style>
+.gridPercentAndFlexContent { grid-template: 50px / 50% minmax(30px, 2fr); }
+.gridTwoDoubleMaxFlexContent { grid-template: 50px / minmax(10px, 0.5fr) minmax(10px, 2fr); }
+.gridIgnoreSecondGridItem { grid-template: 50px / minmax(300px, 3fr) minmax(150px, 1fr); }
+
+.gridRowsPercentAndFlexContent { grid-template: minmax(30px, 2fr) 50% / 50px; }
+.gridRowsTwoMaxFlexContent { grid-template: minmax(10px, 1fr) minmax(10px, 2fr) / 50px; }
+.gridRowsTwoDoubleMaxFlexContent { grid-template: minmax(10px, 0.5fr) minmax(10px, 2fr) / 50px; }
+
+.gridMinContentAndMinMaxFixedMinContentAndFlex { grid-template-columns: min-content minmax(20px, min-content) 2fr; }
+.gridMaxContentAndMinMaxFixedMaxContentAndFlex { grid-template-columns: max-content minmax(20px, max-content) 1fr; }
+
+div.grid > div { font: 10px/1 Ahem; }
+
+.gridRowColumnGaps {
+    grid-row-gap: 33px;
+    grid-column-gap: 19px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+    setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<!-- Check that gutters do not interfere with flex content resolution for columns -->
+
+<div style="width: 120px; height: 10px;">
+    <div class="grid gridTwoDoubleMaxFlexContent gridRowColumnGaps" data-expected-width="120" data-expected-height="50">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="20" data-expected-height="50"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="81" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="width: 570px; height: 10px;">
+    <div class="grid gridIgnoreSecondGridItem gridRowColumnGaps" data-expected-width="570" data-expected-height="50">
+        <div class="firstRowFirstColumn" data-expected-width="401" data-expected-height="50"></div>
+        <div class="firstRowSecondColumn" data-expected-width="150" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div style="width: 120px; height: 10px;">
+    <div class="grid gridPercentAndFlexContent gridRowColumnGaps" data-expected-width="120" data-expected-height="50">
+        <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="60" data-expected-height="50"></div>
+        <div class="firstRowSecondColumn" data-expected-width="41" data-expected-height="50"></div>
+    </div>
+</div>
+
+<!-- Check that gutters do not interfere with flex content resolution for rows -->
+
+<div style="width: 10px; height: 60px">
+    <div class="grid gridRowsTwoMaxFlexContent gridRowColumnGaps" style="height: 100%" data-expected-width="10" data-expected-height="60">
+        <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+        <div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="17"></div>
+    </div>
+</div>
+
+<div style="width: 10px; height: 60px">
+    <div class="grid gridRowsTwoDoubleMaxFlexContent gridRowColumnGaps" data-expected-width="10" data-expected-height="63">
+        <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
+        <div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="width: 10px;">
+    <div class="grid gridRowsPercentAndFlexContent gridRowColumnGaps" style="height: 150px" data-expected-width="10" data-expected-height="150">
+        <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="42"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="75"></div>
+    </div>
+</div>
+
+<!-- Check that gutters do not interfere with flex content resolution with content sized tracks -->
+
+<div style="position: relative; width: 100px;">
+    <div class="grid gridMinContentAndMinMaxFixedMinContentAndFlex gridRowColumnGaps" data-expected-width="100" data-expected-height="149">
+    <div style="grid-column: 2 / span 2;" data-expected-width="80">XXXXX</div>
+    <div style="grid-column: 1 / -1; grid-row: 2;" data-expected-width="100">XXX XXX XXX</div>
+    <div style="grid-column: 1 / span 2; grid-row: 3;" data-expected-width="40">XXXX XXXX</div>
+        <div style="grid-column: 1; grid-row: 4;" data-expected-width="1" data-expected-height="0"></div>
+    </div>
+</div>
+
+<div style="position: relative; width: 100px;">
+    <div class="grid gridMaxContentAndMinMaxFixedMaxContentAndFlex gridRowColumnGaps" data-expected-width="100" data-expected-height="139">
+    <div style="grid-column: 2 / span 2;" data-expected-width="39">XX</div>
+    <div style="grid-column: 1 / -1; grid-row: 2;" data-expected-width="109">XXX XXX XXX</div>
+    <div style="grid-column: 1 / span 2; grid-row: 3;" data-expected-width="90">XXXX XXXX</div>
+        <div style="grid-column: 1; grid-row: 4;" data-expected-width="51" data-expected-height="0"></div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-gutters-and-tracks-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-gutters-and-tracks-001.html
new file mode 100644
index 0000000000..caa83e1d8f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-gutters-and-tracks-001.html
@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<title>CSS Grid: grid gutters and tracks.</title>
+<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#gutters"/>
+<meta name="assert" content="Check that gutters contribute to the size of the grid containers and spanning items, and do not alter grid items positioning, margin computation and track sizing."/>
+<link rel="stylesheet" href="/css/support/grid.css"/>
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css"/>
+<link rel="stylesheet" href="/fonts/ahem.css" type="text/css"/>
+<style>
+body { margin: 0px; }
+
+.grid { padding: 3px 7px 5px 1px; border: solid yellow 1px; }
+
+.normalGap { grid-gap: normal; }
+
+.gridGap { grid-gap: 16px; }
+
+.gridRowColumnGaps {
+    grid-row-gap: 12px;
+    grid-column-gap: 23px;
+}
+
+.gridMultipleCols { grid-template-columns: 30px minmax(10px, 50px) 80px; }
+.gridMultipleRows { grid-template-rows: 90px 70px min-content; }
+.gridAutoAuto { grid-template: auto auto / auto auto; }
+.gridMultipleFixed { grid-template: [first] 37px [foo] 57px [bar] 77px [last] / [first] 15px [foo] 25px [bar] 35px [last]; }
+.gridFixed100 { grid-template: repeat(2, 100px) / repeat(2, 100px); }
+.gridWithPercent { grid-template-columns: 10px 20% repeat(2, 30px); }
+.gridWithDoublePercent { grid-template-columns: 60% 40%; }
+.gridWithRowPercent { grid-template: 10px 20% 30px / 20px; }
+.gridWithRowDoublePercent { grid-template: 60% 40% / 20px; }
+
+.width220 { width: 220px; }
+.height100 { height: 100px; }
+.gridAutoRows20 { grid-auto-rows: 20px; }
+
+.thirdRowThirdColumn { grid-area: 3 / 3; }
+.firstRowThirdColumn { grid-area: 1 / 3; }
+
+div.grid > div { font: 10px/1 Ahem; }
+
+.gridItemMargins {
+    margin: 20px 30px 40px 50px;
+    width: 20px;
+    height: 40px;
+}
+
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+    setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<!-- Check that gutters contribute to the size of the grid containers. -->
+
+<div style="position: relative;">
+    <div class="grid normalGap gridMultipleCols fit-content" data-expected-width="170" data-expected-height="10"></div>
+    <div class="grid normalGap gridMultipleRows" style="width: 400px" data-expected-width="410" data-expected-height="170"></div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridRowColumnGaps fit-content" data-expected-width="103" data-expected-height="62">
+        <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="20" data-expected-height="10">XX</div>
+        <div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="26" data-expected-width="50" data-expected-height="30">XX<br>X<br>XX XX</div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridMultipleCols gridRowColumnGaps fit-content" data-expected-width="216" data-expected-height="94">
+        <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="30" data-expected-height="10">XX</div>
+        <div class="secondRowSecondColumn" data-offset-x="55" data-offset-y="26" data-expected-width="50" data-expected-height="20">XX<br>XX XX</div>
+        <div class="thirdRowThirdColumn" data-offset-x="128" data-offset-y="58" data-expected-width="80" data-expected-height="30">XXXX XX<br>X<br>XX XX</div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridMultipleRows gridRowColumnGaps fit-content" data-expected-width="196" data-expected-height="224">
+        <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="20" data-expected-height="90">XX</div>
+        <div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="106" data-expected-width="50" data-expected-height="70">XX<br>XX XX</div>
+        <div class="thirdRowThirdColumn" data-offset-x="118" data-offset-y="188" data-expected-width="70" data-expected-height="30">XXXX XX<br>X<br>XX XX</div>
+    </div>
+</div>
+
+<!-- Check that gutters do not alter grid items positioning. -->
+<div style="position: relative">
+    <div class="grid gridMultipleFixed gridRowColumnGaps">
+        <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="15" data-expected-height="37">X X X</div>
+        <div class="secondRowSecondColumn" data-offset-x="40" data-offset-y="53" data-expected-width="25" data-expected-height="57">X X</div>
+        <div class="thirdRowThirdColumn" data-offset-x="88" data-offset-y="122" data-expected-width="35" data-expected-height="77">XXX XX X XX XX</div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridMultipleFixed gridRowColumnGaps">
+        <div style="grid-row: 2; grid-column: -2 / -1;" data-offset-x="88" data-offset-y="53" data-expected-width="35" data-expected-height="57">X X X</div>
+        <div style="grid-row: 1 / bar; grid-column: bar" data-offset-x="88" data-offset-y="4" data-expected-width="35" data-expected-height="106">X XX X XX XX XX X</div>
+        <div style="grid-row: -2; grid-column-end: foo" data-offset-x="2" data-offset-y="122" data-expected-width="15" data-expected-height="77">X X</div>
+    </div>
+</div>
+
+<!-- Check that gutters do not alter track sizing. -->
+<div style="position: relative">
+    <div class="grid gridRowColumnGaps fit-content" data-expected-width="166" data-expected-height="94">
+        <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="20" data-expected-height="10">XX</div>
+        <div class="secondRowSecondColumn" data-offset-x="45" data-offset-y="26" data-expected-width="30" data-expected-height="20">X X<br>X X</div>
+        <div class="thirdRowThirdColumn" data-offset-x="98" data-offset-y="58" data-expected-width="60" data-expected-height="30">XXX XX<br>X<br>XX XX</div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridRowColumnGaps gridMultipleCols gridMultipleRows fit-content" data-expected-width="216" data-expected-height="224">
+        <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="30" data-expected-height="90">XX</div>
+        <div class="secondRowSecondColumn" data-offset-x="55" data-offset-y="106" data-expected-width="50" data-expected-height="70">X X<br>X X</div>
+        <div class="thirdRowThirdColumn" data-offset-x="128" data-offset-y="188" data-expected-width="80" data-expected-height="30">XXX XX<br>X<br>XX XX</div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridWithPercent width220 gridRowColumnGaps gridAutoRows20" data-expected-width="230" data-expected-height="94">
+        <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="10" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn" data-offset-x="35" data-offset-y="36" data-expected-width="44" data-expected-height="20"></div>
+        <div class="thirdRowThirdColumn" data-offset-x="102" data-offset-y="68" data-expected-width="30" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridWithRowPercent gridRowColumnGaps width220 height100" data-expected-width="230" data-expected-height="110">
+        <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="20" data-expected-height="10"></div>
+        <div class="secondRowFirstColumn" data-offset-x="2" data-offset-y="26" data-expected-width="20" data-expected-height="20"></div>
+        <div class="thirdRowAutoColumn" data-offset-x="2" data-offset-y="58" data-expected-width="20" data-expected-height="30"></div>
+    </div>
+</div>
+
+<!-- Check that gutters contribute to the size of spanning items. -->
+<div style="position: relative">
+    <div class="grid gridGap gridAutoAuto constrainedContainer">
+        <div class="secondRowBothColumn" data-offset-x="2" data-offset-y="30" data-expected-width="50" data-expected-height="10">XXXXX</div>
+        <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="17" data-expected-height="10">X</div>
+        <div class="firstRowSecondColumn" data-offset-x="35" data-offset-y="4" data-expected-width="17" data-expected-height="10">X</div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridMultipleFixed gridRowColumnGaps">
+        <div style="grid-row: 2; grid-column: 1 / -1;" data-offset-x="2" data-offset-y="53" data-expected-width="121" data-expected-height="57">XXXX X XXXX</div>
+        <div style="grid-row: first / last; grid-column-start: 2" data-offset-x="40" data-offset-y="4" data-expected-width="25" data-expected-height="195">X XX X XX X</div>
+        <div style="grid-row: 1 / 3; grid-column: first / bar" data-offset-x="2" data-offset-y="4" data-expected-width="63" data-expected-height="106">XXX XX<br>XX<br>XXXXX</div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridWithDoublePercent width220 gridRowColumnGaps gridAutoRows20" data-expected-width="230" data-expected-height="62">
+        <div class="firstRowFirstColumn sizedToGridArea" data-offset-x="2" data-offset-y="4" data-expected-width="132" data-expected-height="20"></div>
+        <div class="secondRowSecondColumn sizedToGridArea" data-offset-x="157" data-offset-y="36" data-expected-width="88" data-expected-height="20"></div>
+        <div class="secondRowBothColumn sizedToGridArea" data-offset-x="2" data-offset-y="36" data-expected-width="243" data-expected-height="20"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridWithRowDoublePercent gridRowColumnGaps width220 height100" data-expected-width="230" data-expected-height="110">
+        <div class="firstRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="20" data-expected-height="60"></div>
+        <div class="secondRowFirstColumn" data-offset-x="2" data-offset-y="76" data-expected-width="20" data-expected-height="40"></div>
+        <div class="bothRowFirstColumn" data-offset-x="2" data-offset-y="4" data-expected-width="20" data-expected-height="112"></div>
+    </div>
+</div>
+
+<!-- Check that gutters do not interfere with margins computation. -->
+<div style="position: relative">
+    <div class="grid gridFixed100 gridGap">
+        <div class="gridItemMargins firstRowFirstColumn" data-offset-x="52" data-offset-y="24" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItemMargins firstRowSecondColumn" data-offset-x="168" data-offset-y="24" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItemMargins secondRowFirstColumn" data-offset-x="52" data-offset-y="140" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItemMargins secondRowSecondColumn" data-offset-x="168" data-offset-y="140" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid gridFixed100 verticalRL directionRTL gridGap">
+        <div class="gridItemMargins firstRowFirstColumn" data-offset-x="168" data-offset-y="140" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItemMargins firstRowSecondColumn" data-offset-x="168" data-offset-y="24" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItemMargins secondRowFirstColumn" data-offset-x="52" data-offset-y="140" data-expected-width="20" data-expected-height="40"></div>
+        <div class="gridItemMargins secondRowSecondColumn" data-offset-x="52" data-offset-y="24" data-expected-width="20" data-expected-height="40"></div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-gutters-as-percentage-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-gutters-as-percentage-001.html
new file mode 100644
index 0000000000..651f4278f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-gutters-as-percentage-001.html
@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<title>CSS Grid: grid gutters as percentage.</title>
+<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#gutters"/>
+<meta name="assert" content="Check that when 'height' is indefinite, row gaps should be based on grid's 'auto' height."/>
+<link rel="stylesheet" href="/css/support/grid.css"/>
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css"/>
+<link rel="stylesheet" href="/css/support/height-keyword-classes.css"/>
+<link rel="stylesheet" href="/fonts/ahem.css" type="text/css"/>
+<style>
+body { margin: 0; }
+.grid { font: 10px/1 Ahem; position: relative; }
+.widthAuto { width: auto; }
+.heightAuto { height: auto; }
+.width400 { width: 400px; }
+.width200 { width: 200px; }
+.height200 { height: 200px; }
+.height100 { height: 100px; }
+.columns100-100 { grid-template-columns: 100px 100px; }
+.rows50-50 { grid-template-rows: 50px 50px; }
+.autoRepeat { grid-template: repeat(auto-fill, 50px) / repeat(auto-fill, 100px); }
+.columnGap10Percent { grid-column-gap: 10% }
+.rowGap20Percent { grid-row-gap: 20% }
+.positioned { position: absolute; width: 100%; height: 100%; }
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+    setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div id="log"></div>
+
+<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which will reduce the available space for tracks; however, they can grow exceeding their content's max-width.</p>
+<div class="width400">
+    <div class="grid columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="20">
+        <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="180" data-expected-height="10">XXX X XX X</div>
+        <div class="firstRowSecondColumn"  data-offset-x="220" data-offset-y="0"  data-expected-width="180" data-expected-height="10">XX XXX X X</div>
+        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="14" data-expected-width="180" data-expected-height="10">X XX XXX X</div>
+        <div class="secondRowSecondColumn" data-offset-x="220" data-offset-y="14" data-expected-width="180" data-expected-height="10">XXXXX X XX</div>
+    </div>
+</div>
+
+<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'instrinsic' width, which reduce the available space for tracks; however, since we use 'fit-content' intrinsic size, first column's width is reduced and height increased to let its content to fit.</p>
+<div class="width400">
+    <div class="grid fit-content heightAuto columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="40">
+        <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="80"  data-expected-height="20">XXX X XX X</div>
+        <div class="firstRowSecondColumn"  data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="20">XX XXX X X</div>
+        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="28" data-expected-width="80"  data-expected-height="20">X XX XXX X</div>
+        <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="28" data-expected-width="100" data-expected-height="20">XXXXX X XX</div>
+    </div>
+</div>
+
+<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which will reduce the available space for tracks; however, they can grow exceeding their content's max-width.</p>
+<div class="width400">
+    <div class="grid fit-content widthAuto columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="20">
+        <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="180" data-expected-height="10">XXX X XX X</div>
+        <div class="firstRowSecondColumn"  data-offset-x="220" data-offset-y="0"  data-expected-width="180" data-expected-height="10">XX XXX X X</div>
+        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="14" data-expected-width="180" data-expected-height="10">X XX XXX X</div>
+        <div class="secondRowSecondColumn" data-offset-x="220" data-offset-y="14" data-expected-width="180" data-expected-height="10">XXXXX X XX</div>
+    </div>
+</div>
+
+<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'instrinsic' width, which reduce the available space for tracks; however, since we use 'fit-content' intrinsic size, first column's width is reduced and height increased to let its content to fit.</p>
+<div class="width400">
+    <div class="grid fit-content columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="40">
+        <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="80"  data-expected-height="20">XXX X XX X</div>
+        <div class="firstRowSecondColumn"  data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="20">XX XXX X X</div>
+        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="28" data-expected-width="80"  data-expected-height="20">X XX XXX X</div>
+        <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="28" data-expected-width="100" data-expected-height="20">XXXXX X XX</div>
+    </div>
+</div>
+
+<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which reduce the available space for tracks; however, they are fixed sized and fit.</p>
+<div class="width400">
+     <div class="grid columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="100">
+         <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50">XXX X XX X</div>
+         <div class="firstRowSecondColumn"  data-offset-x="140" data-offset-y="0"  data-expected-width="100" data-expected-height="50">XX XXX X X</div>
+         <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
+         <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
+     </div>
+</div>
+
+<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'intrinsic' width, which reduce the available space for tracks; however, they are fixed sized and don't fit so they overflow the grid container.</p>
+<div class="width400">
+     <div class="grid fit-content heightAuto columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="100">
+         <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50">XXX X XX X</div>
+         <div class="firstRowSecondColumn"  data-offset-x="120" data-offset-y="0"  data-expected-width="100" data-expected-height="50">XX XXX X X</div>
+         <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
+         <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
+     </div>
+</div>
+
+<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which reduce the available space for tracks; however, they are fixed sized and fit.</p>
+<div class="width400">
+     <div class="grid fit-content widthAuto columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="100">
+         <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50">XXX X XX X</div>
+         <div class="firstRowSecondColumn"  data-offset-x="140" data-offset-y="0"  data-expected-width="100" data-expected-height="50">XX XXX X X</div>
+         <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
+         <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
+     </div>
+</div>
+
+<p>Both row and column gaps are based on definite sizes, but they will reduce the available space for tracks; however, since the container's specified inline size is not enough, first column's width is reduced and height increased to let its content to fit.</p>
+<div class="width400">
+    <div class="grid width200 height100 columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="100">
+        <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="80"  data-expected-height="40">XXX X XX X</div>
+        <div class="firstRowSecondColumn"  data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="40">XX XXX X X</div>
+        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="60" data-expected-width="80"  data-expected-height="40">X XX XXX X</div>
+        <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="60" data-expected-width="100" data-expected-height="40">XXXXX X XX</div>
+    </div>
+</div>
+
+<p>Both row and column gaps are based on definite sizes, but they will reduce the available space for tracks; however, they can grow exceeding their content's max-width.</p>
+<div class="width400">
+    <div class="grid width400 height200 columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="200">
+        <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"   data-expected-width="180" data-expected-height="80">XXX X XX X</div>
+        <div class="firstRowSecondColumn"  data-offset-x="220" data-offset-y="0"   data-expected-width="180" data-expected-height="80">XX XXX X X</div>
+        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="120" data-expected-width="180" data-expected-height="80">X XX XXX X</div>
+        <div class="secondRowSecondColumn" data-offset-x="220" data-offset-y="120" data-expected-width="180" data-expected-height="80">XXXXX X XX</div>
+    </div>
+</div>
+
+<p>Both row and column gaps are based on definite sizes, they will reduce the available space for tracks; however, they are fixed sized and don't fit so they overflow the grid container.</p>
+<div class="width400">
+    <div class="grid width200 height100 columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="100">
+        <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50">XXX X XX X</div>
+        <div class="firstRowSecondColumn"  data-offset-x="120" data-offset-y="0"  data-expected-width="100" data-expected-height="50">XX XXX X X</div>
+        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
+        <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
+    </div>
+</div>
+
+<p>Both row and column gaps are based on definite sizes, they will reduce the available space for tracks; however, they are fixed sized and fit.</p>
+<div class="width400">
+    <div class="grid width400 height200 columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="200">
+        <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50">XXX X XX X</div>
+        <div class="firstRowSecondColumn"  data-offset-x="140" data-offset-y="0"  data-expected-width="100" data-expected-height="50">XX XXX X X</div>
+        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="90" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
+        <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="90" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
+    </div>
+</div>
+
+<p>Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'instrinsic' width, which reduce the available space for tracks; however, since we use 'fit-content' intrinsic size, only 1 repeteation is allowed, so tracks are adjusted to fit in the intrinsic size reduced by the gaps.</p>
+<div class="width400">
+    <div class="grid fit-content autoRepeat columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="70">
+        <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50">XXX X XX X</div>
+        <div class="firstRowSecondColumn"  data-offset-x="120" data-offset-y="0"  data-expected-width="80" data-expected-height="50">XX XXX X X</div>
+        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="64" data-expected-width="100" data-expected-height="20">X XX XXX X</div>
+        <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="64" data-expected-width="80" data-expected-height="20">XXXXX X XX</div>
+    </div>
+</div>
+
+<p>Both row and column gaps are based on definite sizes, they will reduce the available space for tracks; however, repeat auto-fill allows all of them to fit.</p>
+<div class="">
+    <div class="grid width400 height200 autoRepeat columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="200">
+        <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50">XXX X XX X</div>
+        <div class="firstRowSecondColumn"  data-offset-x="140" data-offset-y="0"  data-expected-width="100" data-expected-height="50">XX XXX X X</div>
+        <div class="firstRowThirdColumn"  data-offset-x="280" data-offset-y="0"  data-expected-width="100" data-expected-height="50">XX XXX X X</div>
+        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="90" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
+        <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="90" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
+        <div class="secondRowThirdColumn" data-offset-x="280" data-offset-y="90" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
+    </div>
+</div>
+
+<p>Both row and column gaps are based on definite sizes, they will reduce the available space for tracks; however, repeat auto-fill allows only 1 repetition.</p>
+<div class="">
+    <div class="grid width200 height100 autoRepeat columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="100">
+        <div class="firstRowFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50">XXX X XX X</div>
+        <div class="firstRowSecondColumn"  data-offset-x="120" data-offset-y="0"  data-expected-width="80" data-expected-height="50">XX XXX X X</div>
+        <div class="secondRowFirstColumn"  data-offset-x="0"   data-offset-y="70" data-expected-width="100" data-expected-height="30">X XX XXX X</div>
+        <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="70" data-expected-width="80" data-expected-height="30">XXXXX X XX</div>
+    </div>
+</div>
+
+<p>Grid with positioned items. Height is indefinite, so row gaps should be based on grid's 'auto' height. Column gaps based on a grid's 'auto' width, which reduce the available space for tracks; however, they are fixed sized and fit.</p>
+<div class="width400">
+    <div class="grid columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="400" data-expected-height="100">
+        <div class="positioned onlyFirstRowOnlyFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50">XXX X XX X</div>
+        <div class="positioned onlyFirstRowOnlySecondColumn"  data-offset-x="140" data-offset-y="0"  data-expected-width="100" data-expected-height="50">XX XXX X X</div>
+        <div class="positioned onlySecondRowOnlyFirstColumn"  data-offset-x="0"   data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
+        <div class="positioned onlySecondRowOnlySecondColumn" data-offset-x="140" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
+    </div>
+</div>
+
+<p>Grid with positioned items. Both row and column gaps are based on definite sizes, they will reduce the available space for tracks; however, they are fixed sized and don't fit so they overflow the grid container.</p>
+<div class="">
+    <div class="grid width200 height100 columns100-100 rows50-50 columnGap10Percent rowGap20Percent" data-expected-width="200" data-expected-height="100">
+        <div class="positioned onlyFirstRowOnlyFirstColumn"   data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50">XXX X XX X</div>
+        <div class="positioned onlyFirstRowOnlySecondColumn"  data-offset-x="120" data-offset-y="0"  data-expected-width="100" data-expected-height="50">XX XXX X X</div>
+        <div class="positioned onlySecondRowOnlyFirstColumn"  data-offset-x="0"   data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XXX X</div>
+        <div class="positioned onlySecondRowOnlySecondColumn" data-offset-x="120" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X XX</div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-letter-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-letter-001.html
new file mode 100644
index 0000000000..bc62c1770d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-letter-001.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: '::first-letter' from inline grid container does not apply to grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element">
+<link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.html">
+<meta name="assert" content="This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to an inline grid container.">
+<style>
+  .inline-grid {
+    display: inline-grid;
+    color: green;
+  }
+
+  .grid::first-letter {
+    color: red;
+  }
+</style>
+<div class="inline-grid">
+  <div>
+    <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-letter-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-letter-002.html
new file mode 100644
index 0000000000..afdc0de9a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-letter-002.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: '::first-letter' from inline grid container ancestors does not apply to grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element">
+<link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.html">
+<meta name="assert" content="This test checks that '::first-letter' pseudo-element is ignored in grid items when applied to an inline grid container ancestors.">
+<style>
+  .inline-grid {
+    display: inline-grid;
+    color: green;
+  }
+
+  body::first-letter {
+    color: red;
+  }
+</style>
+<div class="inline-grid">
+  <div>
+    <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-letter-003.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-letter-003.html
new file mode 100644
index 0000000000..eea15ab585
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-letter-003.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: '::first-letter' works on grid items within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter" title="7.2. The ::first-letter pseudo-element">
+<link rel="match" href="../reference/grid-first-letter-green-margin-no-collapse-ref.html">
+<meta name="assert" content="This test checks that '::first-letter' pseudo-element works as expected if it is applied directly to a grid item within an inline grid.">
+<style>
+  .inline-grid {
+    display: inline-grid;
+  }
+
+  .item::first-letter {
+    color: green;
+  }
+</style>
+<div class="inline-grid">
+  <p class="item">
+    The <strong>first letter</strong> of this paragraph, and only that one, should be <strong>green</strong>.
+    In addition, body and paragraph margins should <strong>not collapse</strong>.
+  </p>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-line-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-line-001.html
new file mode 100644
index 0000000000..2df3d559c9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-line-001.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: '::first-line' from inline grid container does not apply to grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS">
+<link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.html">
+<meta name="assert" content="This test checks that '::first-line' pseudo-element is ignored in grid items when applied to an inline grid container.">
+<style>
+  .inline-grid {
+    display: inline-grid;
+    color: green;
+  }
+
+  .inline-grid::first-line {
+    color: red;
+  }
+</style>
+<div class="inline-grid">
+  <div>
+    <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-line-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-line-002.html
new file mode 100644
index 0000000000..efdee52d3c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-line-002.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: '::first-line' from inline grid container ancestors does not apply to grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS">
+<link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.html">
+<meta name="assert" content="This test checks that '::first-line' pseudo-element is ignored in anonymous grid items when applied to an inline grid container ancestors.">
+<style>
+  .inline-grid {
+    display: inline-grid;
+    color: green;
+  }
+
+  body::first-line {
+    color: red;
+  }
+</style>
+<div class="inline-grid">
+  <div>
+    <p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-line-003.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-line-003.html
new file mode 100644
index 0000000000..c76a7f430f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-first-line-003.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: '::first-line' works on grid items within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line" title="7.1.1. First formatted line definition in CSS">
+<link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.html">
+<meta name="assert" content="This test checks that '::first-line' pseudo-element works as expected if it is applied directly to a grid item within an inline grid.">
+<style>
+  .inline-grid {
+    display: inline-grid;
+    color: red;
+  }
+
+  .item::first-line {
+    color: green;
+  }
+</style>
+<div class="inline-grid">
+  <p class="item">
+    This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.
+  </p>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-float-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-float-001.html
new file mode 100644
index 0000000000..8222897e4f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-float-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'float' has no effect on grid items within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-01-03 -->
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  .inline-grid {
+    display: inline-grid;
+  }
+
+  .test-overlapping-green {
+    background-color: green;
+    width: 100px;
+    height: 50px;
+  }
+
+  .float-left {
+    float: left;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+
+<div class="inline-grid">
+  <div class="test-overlapping-green float-left"></div>
+  <div class="test-overlapping-green"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-floats-no-intrude-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-floats-no-intrude-001.html
new file mode 100644
index 0000000000..b15aabab06
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-floats-no-intrude-001.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: floats do not intrude into an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  .test-overlapping-green {
+    background-color: green;
+    width: 50px;
+    height: 100px;
+  }
+
+  .float {
+    float: left;
+  }
+
+  .inline-grid {
+    display: inline-grid;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+
+<div class="float test-overlapping-green"></div>
+<div class="inline-grid test-overlapping-green"></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-margins-no-collapse-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-margins-no-collapse-001.html
new file mode 100644
index 0000000000..4260fe89f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-margins-no-collapse-001.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: inline grid's margins do not collapse</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+<link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.html">
+<meta name="assert" content="This test checks that inline grid's margin (body) do not collapse with the marings of the grid item (a paragraph).">
+<style>
+  body {
+    display: inline-grid;
+  }
+
+  p {
+    color: green;
+  }
+</style>
+<p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-multicol-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-multicol-001.html
new file mode 100644
index 0000000000..3e51b16f5c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-multicol-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'column-*' properties from inline grid container does not apply to grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="This test checks that 'column-*' properties in the Multicol module are ignored in grid items when applied to an inline grid container.">
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  .test-overlapping-green {
+    background-color: green;
+    width: 100px;
+    height: 50px;
+  }
+
+  .inline-grid {
+    display: inline-grid;
+    column-width: 50px;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+
+<div class="inline-grid">
+  <div class="test-overlapping-green"></div>
+  <div class="test-overlapping-green"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-vertical-align-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-vertical-align-001.html
new file mode 100644
index 0000000000..7dbf11c7ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-inline-vertical-align-001.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'vertical-align' has no effect on grid items within an inline grid</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2014-12-10 -->
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" title="10.8.1 Leading and half-leading">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  #test-inline-grid-overlapping-green {
+    display: inline-grid;
+    font: 50px/1 Ahem;
+    color: green;
+  }
+
+  #vertical-align {
+    vertical-align: 125px;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+
+<div id="test-inline-grid-overlapping-green">
+  <span>1s</span>
+  <span id="vertical-align">2n</span>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-item-accepts-first-letter-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-item-accepts-first-letter-001.html
new file mode 100644
index 0000000000..32206794c3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-item-accepts-first-letter-001.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: '::first-letter' is valid in grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers">
+<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-letter">
+<meta name="assert" content="The test checks that grid items accept first-letter pseudo-element.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+  .item::first-letter { line-height: 100px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid,.inline-grid');">
+
+<div id="log"></div>
+
+<div class="grid">
+  <div class="item" data-expected-height=100>The first item.</div>
+  <div class="item" data-expected-height=100>The second item.</div>
+</div>
+
+<div class="inline-grid">
+  <div class="item" data-expected-height=100>The first item.</div>
+  <div class="item" data-expected-height=100>The second item.</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-item-accepts-first-line-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-item-accepts-first-line-001.html
new file mode 100644
index 0000000000..a6c8d2df45
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-item-accepts-first-line-001.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: '::first-line' is valid in grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers">
+<link rel="help" href="http://www.w3.org/TR/css3-selectors/#first-formatted-line">
+<meta name="assert" content="The test checks that grid items accept first-line pseudo-element.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+  .item::first-line { line-height: 100px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid,.inline-grid');">
+
+<div id="log"></div>
+
+<div class="grid">
+  <div class="item" data-expected-height=100>The first item.</div>
+  <div class="item" data-expected-height=100>The second item.</div>
+</div>
+
+<div class="inline-grid">
+  <div class="item" data-expected-height=100>The first item.</div>
+  <div class="item" data-expected-height=100>The second item.</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-item-hit-test.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-item-hit-test.html
new file mode 100644
index 0000000000..6d1ae5bf0e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-item-hit-test.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1029371">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div style="display: grid;">
+  <div style="height: 100px;">
+    <div style="float: left; width: 50%; height: 400px; background: hotpink;"></div>
+  </div>
+  <div id="target" style="height: 100px; background: cyan;"></div>
+</div>
+<script>
+test(() => {
+  assert_equals(document.elementFromPoint(150, 150), document.getElementById('target'));
+});
+</script>
+
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-layout-stale-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-layout-stale-001.html
new file mode 100644
index 0000000000..bb81546678
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-layout-stale-001.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<title>CSS Grid: Do not add non-children of the grid into the grid container</title>
+<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid">
+<link rel="help" href="https://crbug.com/313293">
+<link rel="match" href="reference/grid-layout-stale-001-ref.html">
+<meta name="assert" content="Check that we do not add non-children of the grid into the grid representation."/>
+
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<style>
+  embed { position: absolute; }
+  .c1 { animation-delay: 45762s; }
+</style>
+
+<p>This test passes if it doesn't crash and it matches the reference.</p>
+<div style="display: grid;">
+    <embed type="something-not-js">
+</div>
+
+<script>
+function keyPress(key) {
+  let actions = new test_driver.Actions()
+    .keyDown(key)
+    .keyUp(key);
+
+  return actions.send();
+}
+function crash() {
+  var highlight = document.createElementNS("http://www.w3.org/1999/xhtml", "highlight");
+  highlight.setAttribute("class", "c1");
+  document.body.appendChild(highlight);
+
+  for (i=0; i != 8; i++)
+    keyPress("\t");
+  keyPress("X");
+}
+
+document.addEventListener("DOMContentLoaded", crash, false);
+</script>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-layout-stale-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-layout-stale-002.html
new file mode 100644
index 0000000000..ea11cd5c5c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-layout-stale-002.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>CSS Grid: Do not leave stale pointers into the grid container</title>
+<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid">
+<link rel="help" href="https://crbug.com/313293">
+<link rel="match" href="reference/grid-layout-stale-002-ref.html">
+<meta name="assert" content="Check that we don't leave stale pointers into the internal grid representation."/>
+
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<p>This test passes if it doesn't crash and it matches the reference.</p>
+<span style="display: grid" contenteditable=plaintext-only></span>
+<script>
+function keyPress(key) {
+  let actions = new test_driver.Actions()
+    .keyDown(key)
+    .keyUp(key);
+
+  return actions.send();
+}
+function crash() {
+    keyPress("\t");
+    keyPress("X");
+    document.designMode = 'on';
+    document.execCommand("InsertHTML", false, "<div>");
+}
+document.addEventListener("DOMContentLoaded", crash, false);
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-margins-no-collapse-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-margins-no-collapse-001.html
new file mode 100644
index 0000000000..764cca9ced
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-margins-no-collapse-001.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: grid's margins do not collapse</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+<link rel="match" href="../reference/grid-text-green-margin-no-collapse-ref.html">
+<meta name="assert" content="This test checks that grid's margin (body) do not collapse with the marings of the grid item (a paragraph).">
+<style>
+  body {
+    display: grid;
+  }
+
+  p {
+    color: green;
+  }
+</style>
+<p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-margins-no-collapse-002-ref.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-margins-no-collapse-002-ref.html
new file mode 100644
index 0000000000..ce56a56645
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-margins-no-collapse-002-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="/css/support/grid.css">
+
+<div>This test checks that grid item's margins do not collapse with its content's margins (single margin in the first row and double between subsequent).</div>
+
+<div style="float: left">
+  <div><p>XXXXX</p></div>
+  <div style="float:left; margin:20px 0px;">XXXXX</div>
+  <div><p style="float:left; clear:both;">XXXXX</p></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-margins-no-collapse-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-margins-no-collapse-002.html
new file mode 100644
index 0000000000..f644a6fb53
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-margins-no-collapse-002.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>CSS Grid Layout Test: grid items not collapsing</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-containers">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=430100">
+<link rel="match" href="grid-margins-no-collapse-002-ref.html">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="Test that grid item's margins do not collapse with its content's margins." />
+
+<div>This test checks that grid item's margins do not collapse with its content's margins (single margin in the first row and double between subsequent).</div>
+
+<div style="display: grid;">
+  <div><p>XXXXX</p></div>
+  <div style="margin:20px 0px;">XXXXX</div>
+  <div><p>XXXXX</p></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-min-max-height-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-min-max-height-001.html
new file mode 100644
index 0000000000..28950e4973
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-min-max-height-001.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Grid: min-height and max-height</title>
+<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#intrinsic-sizes">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="This test checks that min-height and max-height are accounted for when computing the grid container's height.">
+<style>
+.minHeightGrid {
+    min-height: 100px;
+    grid-template-columns: 40px;
+    grid-template-rows: 50px;
+}
+.maxHeightGrid {
+    max-height: 100px;
+    grid-template-columns: 40px;
+    grid-template-rows: 150px 50px;
+}
+
+.minHeightAutoGrid {
+    min-height: 100px;
+}
+
+.maxHeightAutoGrid {
+    max-height: 100px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+
+<div class="constrainedContainer">
+    <div class="grid minHeightGrid" data-expected-height="100" data-expected-width="10"></div>
+    <div class="grid maxHeightGrid" data-expected-height="100" data-expected-width="10"></div>
+    <div class="grid minHeightAutoGrid" data-expected-height="100" data-expected-width="10"></div>
+    <div class="grid maxHeightAutoGrid" data-expected-height="0" data-expected-width="10"></div>
+
+    <div class="grid minHeightAutoGrid" data-expected-height="150" data-expected-width="10">
+        <div style="height: 150px"></div>
+    </div>
+    <div class="grid maxHeightAutoGrid" data-expected-height="100" data-expected-width="10">
+        <div style="height: 300px"></div>
+    </div>
+</div>
+
+<div class="unconstrainedContainer">
+    <div class="grid minHeightGrid" data-expected-height="100" data-expected-width="1000"></div>
+    <div class="grid maxHeightGrid" data-expected-height="100" data-expected-width="1000"></div>
+    <div class="grid minHeightAutoGrid" data-expected-height="100" data-expected-width="1000"></div>
+    <div class="grid maxHeightAutoGrid" data-expected-height="0" data-expected-width="1000"></div>
+
+    <div class="grid minHeightAutoGrid" data-expected-height="150" data-expected-width="1000">
+        <div style="height: 150px"></div>
+    </div>
+    <div class="grid maxHeightAutoGrid" data-expected-height="100" data-expected-width="1000">
+        <div style="height: 300px"></div>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-multicol-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-multicol-001.html
new file mode 100644
index 0000000000..553a33e6a3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-multicol-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'column-*' properties from grid container does not apply to grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+<link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-number-and-width-of-columns" title="3. The number and width of columns">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="This test checks that 'column-*' properties in the Multicol module are ignored in grid items when applied to a grid container.">
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  .test-overlapping-green {
+    background-color: green;
+    width: 100px;
+    height: 50px;
+  }
+
+  .grid {
+    display: grid;
+    column-width: 50px;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+
+<div class="grid">
+  <div class="test-overlapping-green"></div>
+  <div class="test-overlapping-green"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-overflow-padding-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-overflow-padding-001.html
new file mode 100644
index 0000000000..6c4a71031f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-overflow-padding-001.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid padding 'overflowing' the grid container size</title>
+<link rel="author" title="Tab Atkins-Bittner" href="https://xanthir.com/contact">
+<link rel="author" title="Elika J Etemad" href="http://inkedblade.org/contact">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box-with-scrollbars.html">
+<meta name="assert" content="This test verifies that scrollbars are shown when end-edge padding overflows the grid container.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 100px / 100px;
+       width: 100px;
+       height: 100px;
+       box-sizing: border-box;
+       padding: 0 50px 50px 0;
+       overflow: auto;
+    }
+</style>
+<p>The test passes if you see a grey square below and both scrollbars are visible.</p>
+<div class="grid"></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-overflow-padding-002.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-overflow-padding-002.html
new file mode 100644
index 0000000000..88bce26a98
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-overflow-padding-002.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid areas and padding 'overflowing' the grid container size</title>
+<link rel="author" title="Tab Atkins-Bittner" href="https://xanthir.com/contact">
+<link rel="author" title="Elika J Etemad" href="http://inkedblade.org/contact">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-model">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">
+<link rel="match" href="reference/100x100-grey-box-with-scrollbars.html">
+<meta name="assert" content="This test verifies that scrollbars are shown when a combination of padding and the grid overflows the grid container, and that the padding is not applied to abspos positioning.">
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+    .grid {
+       grid: 120px / 120px;
+       width: 100px;
+       height: 100px;
+       box-sizing: border-box;
+       padding: 10px 20px 20px 10px;
+       overflow: auto;
+    }
+    .abspos {
+    	position: absolute;
+    	width: 10px;
+    	height: 10px;
+    	top: 140px;
+    	left: 140px;
+    }
+</style>
+<p>The test passes if you see a grey square below and both scrollbars are visible.</p>
+<div class="grid"><div class=abspos></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-size-shrink-to-fit-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-size-shrink-to-fit-001.html
new file mode 100644
index 0000000000..4209af55fe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-size-shrink-to-fit-001.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Grid: shrink-to-fit behavior on grid containers</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#intrinsic-sizes">
+<link rel="help" href="https://crbug.com/234204">
+<meta name="assert" content="This test checks that the shrink-to-fit behavior is applied to the float and out-of-flow positioned grid containers.">
+<style>
+.grid {
+    display: grid;
+    grid-template-columns: 200px 200px;
+    grid-template-rows: 200px 200px;
+}
+.container {
+    width: 600px;
+    height: 600px;
+}
+
+#absolutePos {
+   position: absolute;
+}
+
+#fixedPos {
+   position: fixed;
+}
+
+#floatPos {
+   float: left;
+}
+
+#one {
+    color: blue;
+    background: red;
+    grid-column: 1;
+    grid-row: 1;
+}
+
+#two {
+    color: yellow;
+    background: green;
+    grid-column: 2;
+    grid-row: 1;
+}
+#three {
+    color: gray;
+    background: pink;
+    grid-column: 1;
+    grid-row: 2;
+}
+#four {
+    color: orange;
+    background: brown;
+    grid-column: 2;
+    grid-row: 2;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+
+<p>The following grids should be 400px * 400px, except the first one which uses 'relative' positioning.</p>
+
+<div class="container">
+    <div class="grid" id="regularGrid" data-expected-height="400" data-expected-width="600">
+        <div id="one"></div>
+        <div id="two"></div>
+        <div id="three"></div>
+        <div id="four"></div>
+    </div>
+</div>
+
+<div class="container">
+    <div class="grid" id="absolutePos" data-expected-height="400" data-expected-width="400">
+        <div id="one"></div>
+        <div id="two"></div>
+        <div id="three"></div>
+        <div id="four"></div>
+    </div>
+</div>
+
+<div class="container">
+    <div class="grid" id="fixedPos" data-expected-height="400" data-expected-width="400">
+        <div id="one"></div>
+        <div id="two"></div>
+        <div id="three"></div>
+        <div id="four"></div>
+    </div>
+</div>
+
+<div class="container">
+    <div class="grid" id="floatPos" data-expected-height="400" data-expected-width="400">
+        <div id="one"></div>
+        <div id="two"></div>
+        <div id="three"></div>
+        <div id="four"></div>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-support-display-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-support-display-001.html
new file mode 100644
index 0000000000..c69d0e31b0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-support-display-001.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: DOM support for 'grid' and 'inline-grid' 'display' values</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2014-11-18 -->
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+<meta name="flags" content="dom">
+<meta name="assert" content="This test checks that 'grid' and 'inline-grid' values for 'display' property are supported so that DOM methods, specifically getComputedValue(), and its associated CSS2Properties interface, can fetch such 'display' values.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  .grid {
+    display: grid;
+  }
+
+  .inline-grid {
+    display: inline-grid;
+  }
+</style>
+<div id="log"></div>
+
+<div id="style-grid" style="display: grid;"></div>
+<div id="style-inline-grid" style="display: inline-grid;"></div>
+
+<div id="css-grid" class="grid"></div>
+<div id="css-inline-grid" class="inline-grid"></div>
+
+<div id="js-grid"></div>
+<div id="js-inline-grid"></div>
+
+<script>
+  function testStyleDisplay(element, value) {
+    assert_equals(element.style.display, value, "Style display should be '" + value + "'");
+  }
+
+  function testComputedStyleDisplay(element, value) {
+    assert_equals(getComputedStyle(element).getPropertyValue("display"), value, "getComputedStyle() display should be '" + value + "'");
+  }
+
+  var styleGrid = document.getElementById("style-grid");
+  test(function() {
+      testStyleDisplay(styleGrid, "grid");
+      testComputedStyleDisplay(styleGrid, "grid");
+    }, "Test style display 'grid'");
+
+  var styleInlineGrid = document.getElementById("style-inline-grid");
+  test(function() {
+      testStyleDisplay(styleInlineGrid, "inline-grid");
+      testComputedStyleDisplay(styleInlineGrid, "inline-grid");
+    }, "Test style display 'inline-grid'");
+
+  var cssGrid = document.getElementById("css-grid");
+  test(function() {
+      testComputedStyleDisplay(cssGrid, "grid");
+    }, "Test CSS display 'grid'");
+
+  var cssInlineGrid = document.getElementById("css-inline-grid");
+  test(function() {
+      testComputedStyleDisplay(cssInlineGrid, "inline-grid");
+    }, "Test CSS display 'inline-grid'");
+
+  var jsGrid = document.getElementById("js-grid");
+  jsGrid.style.display = "grid";
+  test(function() {
+      testStyleDisplay(jsGrid, "grid");
+      testComputedStyleDisplay(jsGrid, "grid");
+    }, "Test JavaScript display 'grid'");
+
+  var jsInlineGrid = document.getElementById("js-inline-grid");
+  jsInlineGrid.style.display = "inline-grid";
+  test(function() {
+      testStyleDisplay(jsInlineGrid, "inline-grid");
+      testComputedStyleDisplay(jsInlineGrid, "inline-grid");
+    }, "Test JavaScript display 'inline-grid'");
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/grid-vertical-align-001.html b/testing/web-platform/tests/css/css-grid/grid-model/grid-vertical-align-001.html
new file mode 100644
index 0000000000..3536b3a8a0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/grid-vertical-align-001.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: 'vertical-align' has no effect on grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2014-12-10 -->
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-containers" title="3.1 Establishing Grid Containers">
+<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align" title="10.8.1 Leading and half-leading">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  #test-grid-overlapping-green {
+    display: grid;
+    font: 50px/1 Ahem;
+    color: green;
+  }
+
+  #vertical-align {
+    vertical-align: 125px;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+
+<div id="test-grid-overlapping-green">
+  <span>1s</span>
+  <span id="vertical-align">2n</span>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-horizontal-scrollbar.html b/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-horizontal-scrollbar.html
new file mode 100644
index 0000000000..ba8335873d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-horizontal-scrollbar.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>Reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<style>
+    .box {
+       width: 100px;
+       height: 100px;
+       background-color: grey;
+       overflow: auto;
+    }
+    .item {
+       width: 150px;
+       height: 50px;
+    }
+</style>
+<p>The test passes if you see a grey square below and only the horizontal scrollbar is visible.</p>
+<div class="box"><div class="item"></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-scrollbars.html b/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-scrollbars.html
new file mode 100644
index 0000000000..61a346fe36
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-scrollbars.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>Reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<style>
+    .box {
+       width: 100px;
+       height: 100px;
+       background-color: grey;
+       overflow: auto;
+    }
+    .item {
+       width: 150px;
+       height: 150px;
+    }
+</style>
+<p>The test passes if you see a grey square below and both scrollbars are visible.</p>
+<div class="box"><div class="item"></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-vertical-scrollbar.html b/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-vertical-scrollbar.html
new file mode 100644
index 0000000000..59fff1b955
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box-with-vertical-scrollbar.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>Reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<style>
+    .box {
+       width: 100px;
+       height: 100px;
+       background-color: grey;
+       overflow: auto;
+    }
+    .item {
+       width: 50px;
+       height: 150px;
+    }
+</style>
+<p>The test passes if you see a grey square below and only the vertical scrollbar is visible.</p>
+<div class="box"><div class="item"></div></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box.html b/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box.html
new file mode 100644
index 0000000000..0592f6d2ce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/reference/100x100-grey-box.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>Reference</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<style>
+    .box {
+       width: 100px;
+       height: 100px;
+       background-color: grey;
+    }
+</style>
+<p>The test passes if you see a grey square below without any scrollbar.</p>
+<div class="box"></div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/reference/column-property-should-not-apply-on-grid-container-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-model/reference/column-property-should-not-apply-on-grid-container-001-ref.html
new file mode 100644
index 0000000000..154cf02290
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/reference/column-property-should-not-apply-on-grid-container-001-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<link href="/css/support/grid.css" rel="stylesheet">
+<style>
+.grid, .inline-grid
+{
+  width: 20em;
+  font-kerning: none;
+}
+</style>
+
+<body>
+
+<div class='grid'>
+AAAAAAAAAA BBBBBBBBBB CCCCCCCCCC DDDDDDDDDD
+</div>
+
+<div class='inline-grid'>
+AAAAAAAAAA BBBBBBBBBB CCCCCCCCCC DDDDDDDDDD
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/reference/grid-layout-stale-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-model/reference/grid-layout-stale-001-ref.html
new file mode 100644
index 0000000000..3ade075c99
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/reference/grid-layout-stale-001-ref.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<title>CSS Grid: Do not add non-children of the grid into the grid container</title>
+
+<style>
+  embed { position: absolute; }
+  .c1 { animation-delay: 45762s; }
+</style>
+
+<p>This test passes if it doesn't crash and it matches the reference.</p>
+<div style="display: grid;">
+  <embed type="something-not-js">
+</div>
+<highlight class="c1"></highlight>
diff --git a/testing/web-platform/tests/css/css-grid/grid-model/reference/grid-layout-stale-002-ref.html b/testing/web-platform/tests/css/css-grid/grid-model/reference/grid-layout-stale-002-ref.html
new file mode 100644
index 0000000000..5d4d996106
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-model/reference/grid-layout-stale-002-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<title>CSS Grid: Do not leave stale pointers into the grid container</title>
+<p>This test passes if it doesn't crash and it matches the reference.</p>
+<span style="display: grid" contenteditable=plaintext-only></span>
diff --git a/testing/web-platform/tests/css/css-grid/grid-table-cell-001-crash.html b/testing/web-platform/tests/css/css-grid/grid-table-cell-001-crash.html
new file mode 100644
index 0000000000..7b9c09e3af
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-table-cell-001-crash.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1232875">
+<script>
+
+function boom()
+{
+    document.documentElement.offsetHeight;
+    document.getElementsByTagName("table")[0].style.inlineSize = "1px";
+    document.documentElement.offsetHeight;
+    document.getElementsByTagName("td")[0].style.display = "inline-grid";
+    document.documentElement.offsetHeight;
+}
+
+</script>
+</head>
+
+<body onload="boom();">
+
+<table style="writing-mode: vertical-rl; table-layout: fixed;">
+    <caption style="float: inline-end;">A B</caption>
+    <tbody><tr><td></td></tr></tbody>
+</table>
+
+<div style="height: 3000px;"></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-tracks-fractional-fr.html b/testing/web-platform/tests/css/css-grid/grid-tracks-fractional-fr.html
new file mode 100644
index 0000000000..6600cef65c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-tracks-fractional-fr.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>Tests fractional fr-units which should multiply to whole numbers.</title>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1515685">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="target" style="display: grid; grid-template-columns: 1.01fr 0.99fr 1fr; width: 600px;">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+<script>
+test(() => {
+  const [a, b, c] = document.getElementById('target').children;
+  assert_equals(a.getBoundingClientRect().width, 202);
+  assert_equals(b.getBoundingClientRect().width, 198);
+  assert_equals(c.getBoundingClientRect().width, 200);
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-tracks-stretched-with-different-flex-factors-sum.html b/testing/web-platform/tests/css/css-grid/grid-tracks-stretched-with-different-flex-factors-sum.html
new file mode 100644
index 0000000000..f2c1d5e95a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-tracks-stretched-with-different-flex-factors-sum.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<title>CSS Grid: 'stretch' content alignment on flex tracks.</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch">
+<meta name="assert" content="This test ensures that using flex tracks and 'stretch' value for the content alignment css properties work properly."/>
+<link href="/css/support/grid.css" rel="stylesheet"/>
+<link href="/css/support/alignment.css" rel="stylesheet"/>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<style>
+body {
+  margin: 0;
+}
+
+.grid {
+  position: relative;
+  width: 200px;
+  height: 300px;
+}
+
+.fractionFlexTracks {
+  grid-template-columns: auto 0.25fr;
+  grid-template-rows: 0.2fr auto;
+}
+
+.flexTracks {
+  grid-template-columns: auto 1fr;
+  grid-template-rows: 1.5fr auto;
+}
+
+</style>
+</head>
+<body onload="checkLayout('.grid')">
+
+<div style="position: relative">
+  <p>When the sum of all track's flex factor is < 1, they don't exhaust the available space, which is used to stretch the 'auto' sized tracks.</p>
+  <div class="grid fractionFlexTracks contentStretch" data-expected-width="200" data-expected-height="300">
+    <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="60"></div>
+    <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="60"></div>
+    <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="60" data-expected-width="150" data-expected-height="240"></div>
+    <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="60" data-expected-width="50" data-expected-height="240"></div>
+  </div>
+</div>
+
+<div style="position: relative">
+  <p>When the sum of all track's flex factor is >= 1, they exhaust the available space, hence the 'stretch' alignment is not applied to the 'auto' sized tracks.</p>
+  <div class="grid flexTracks contentStretch" data-expected-width="200" data-expected-height="300">
+    <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="0" data-expected-height="300"></div>
+    <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="300"></div>
+    <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="300" data-expected-width="0" data-expected-height="0"></div>
+    <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="300" data-expected-width="200" data-expected-height="0"></div>
+  </div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/grid-with-aspect-ratio-uses-content-box-height-for-track-sizing.html b/testing/web-platform/tests/css/css-grid/grid-with-aspect-ratio-uses-content-box-height-for-track-sizing.html
new file mode 100644
index 0000000000..45e527dd44
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-with-aspect-ratio-uses-content-box-height-for-track-sizing.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Sammy Gill" href="sammy.gill@apple.com">
+<meta name="assert" content="Grid's definite free space for row track sizing should be the content box logical height when computed from the aspect ratio">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#free-space">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#definite">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<style>
+.grid {
+  display: grid;
+  width: 100px;
+  border-block: 10px solid green;
+  padding-block: 20px;
+  background: green;
+  aspect-ratio: 5 / 2;
+}
+</style>
+</head>
+<body>
+  <p>Test passes if there is a filled green square.</p>
+  <div class="grid">
+    <div></div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-with-content-dynamic-display-001.html b/testing/web-platform/tests/css/css-grid/grid-with-content-dynamic-display-001.html
new file mode 100644
index 0000000000..e9f121b000
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-with-content-dynamic-display-001.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1740702">
+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
+<style>
+  #grid {
+    display: grid;
+    width: 100px;
+    height: 100px;
+    background: red;
+  }
+
+  #initiallyHidden {
+    display: none;
+    width: 100px;
+    height: 100px;
+    background: green;
+  }
+</style>
+</head>
+<body>
+  <p>Test passes if there is a filled green square.</p>
+  <div id="grid">
+    <div>
+      <div>
+        <div>
+          <div id="initiallyHidden">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+  "use strict";
+
+  const grid = document.getElementById("grid");
+  const initiallyHidden = document.getElementById("initiallyHidden");
+  document.documentElement.offsetHeight; // Flush layout
+
+  // Fails in buggy Firefox build because it prevents reflows from happening
+  getComputedStyle(grid).getPropertyValue("grid-template-columns");
+
+  document.documentElement.offsetHeight; // Flush layout again
+
+  initiallyHidden.style.display = "block"; // This should trigger a reflow.
+  </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-with-content-dynamic-display-002.html b/testing/web-platform/tests/css/css-grid/grid-with-content-dynamic-display-002.html
new file mode 100644
index 0000000000..02f536344d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-with-content-dynamic-display-002.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1740702">
+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
+<style>
+  #grid {
+    display: grid;
+    width: 100px;
+    height: 90px;
+    background: red;
+  }
+
+  #initiallyHidden {
+    display: none;
+    width: 100px;
+    height: 100px;
+    background: green;
+  }
+</style>
+</head>
+<body>
+  <p>Test passes if there is a filled green square.</p>
+  <div id="grid">
+    <div>
+      <div>
+        <div>
+          <div id="initiallyHidden">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+  "use strict";
+
+  const grid = document.getElementById("grid");
+  const initiallyHidden = document.getElementById("initiallyHidden");
+  document.documentElement.offsetHeight; // Flush layout
+
+  // Fails in buggy Firefox build because it prevents reflows from happening
+  grid.style.paddingBottom = "10px";
+
+  document.documentElement.offsetHeight; // Flush layout again
+
+  initiallyHidden.style.display = "block"; // This should trigger a reflow.
+  </script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/grid-with-dynamic-img.html b/testing/web-platform/tests/css/css-grid/grid-with-dynamic-img.html
new file mode 100644
index 0000000000..ff7d2b8069
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-with-dynamic-img.html
@@ -0,0 +1,13 @@
+<!DOCTYPE HTML>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1127715">
+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div style="display: grid; width: 100px;">
+  <div style="display: grid; margin: auto;">
+    <img id="target" style="max-width: 100%; max-height: 100%;">
+  </div>
+</div>
+<script>
+document.body.offsetTop;
+document.getElementById('target').src = 'data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="green"></rect></svg>';
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/grid-with-orthogonal-child-within-flexbox.html b/testing/web-platform/tests/css/css-grid/grid-with-orthogonal-child-within-flexbox.html
new file mode 100644
index 0000000000..a0fc9155f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-with-orthogonal-child-within-flexbox.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1111799">
+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div style="display: flex; width: 100px; overflow: hidden;">
+  <div style="display: grid; height: 100px;"> <!-- min-content is 100px -->
+    <div style="writing-mode: vertical-rl; line-height: 0;">
+      <span style="display: inline-block; width: 50px; height: 100px; background: green;"></span>
+      <span style="display: inline-block; width: 50px; height: 100px; background: green;"></span>
+    </div>
+  </div>
+  <div style="background: red;">text</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-within-flexbox-definite-change.html b/testing/web-platform/tests/css/css-grid/grid-within-flexbox-definite-change.html
new file mode 100644
index 0000000000..03b3e67b24
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-within-flexbox-definite-change.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/">
+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div style="display: flex; width: 100px; height: 110px; flex-direction: column;">
+  <div style="display: grid; height: 100px;">
+    <div style="background: green;"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/grid-within-flexbox-indefinite.html b/testing/web-platform/tests/css/css-grid/grid-within-flexbox-indefinite.html
new file mode 100644
index 0000000000..2724355f0b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/grid-within-flexbox-indefinite.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4852">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1055258">
+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div style="display: flex; flex-direction: column; min-height: 100px; width: 100px;">
+  <div style="display: grid; flex: 1; background: red;">
+    <div style="background: green;"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/implicit-grids/grid-support-grid-auto-columns-rows-001.html b/testing/web-platform/tests/css/css-grid/implicit-grids/grid-support-grid-auto-columns-rows-001.html
new file mode 100644
index 0000000000..e61ced340c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/implicit-grids/grid-support-grid-auto-columns-rows-001.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>CSS Grid Layout Test: Support for 'grid-auto-columns' and 'grid-auto-rows' properties</title>
+        <link rel="help" href="http://www.w3.org/TR/css-grid-1/#auto-tracks">
+        <link rel="match" href="../reference/grid-support-grid-auto-columns-rows-001-ref.html">
+        <link rel="author" title="Joao Oliveira" href="mailto:hello@jxs.pt"/>
+        <style>
+         #grid {
+             display: grid;
+             grid-auto-columns: 30px;
+             grid-auto-rows: 30px;
+         }
+         #first-column-first-row {
+             grid-column: 1;
+             grid-row: 1;
+             background-color: purple;
+         }
+         #third-column-first-and-second-rows {
+             grid-column: 3;
+             grid-row: 1 / span 2;
+             background-color: orange
+         }
+         #first-and-second-columns-second-row {
+             grid-column: 1 / span 2;
+             grid-row: 2;
+             background-color: blue;
+         }
+        </style>
+    </head>
+    <body>
+      <p>The test passes if it has the same visual effect as reference.</p>
+        <div id="grid">
+            <div id="first-column-first-row"></div>
+            <div id="third-column-first-and-second-rows"></div>
+            <div id="first-and-second-columns-second-row"></div>
+        </div>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/implicit-grids/grid-support-grid-auto-columns-rows-002.html b/testing/web-platform/tests/css/css-grid/implicit-grids/grid-support-grid-auto-columns-rows-002.html
new file mode 100644
index 0000000000..2e90b46019
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/implicit-grids/grid-support-grid-auto-columns-rows-002.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for 'grid-auto-columns' and 'grid-auto-rows' accepting track listing as value</title>
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#auto-tracks">
+<link rel="match" href="../reference/grid-support-grid-auto-columns-rows-002-ref.html">
+<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk" />
+<style>
+    #grid {
+        display: grid;
+        grid-auto-columns: 25px 50px;
+        grid-auto-rows: 40px 30px;
+    }
+
+    #first-column-first-row {
+        grid-column: 1;
+        grid-row: 1;
+        background-color: purple;
+    }
+
+    #second-column-first-row {
+        grid-column: 2;
+        grid-row: 1;
+        background-color: orange;
+    }
+
+    #first-column-second-row {
+        grid-column: 1;
+        grid-row: 2;
+        background-color: green;
+    }
+
+    #second-column-second-row {
+        grid-column: 2;
+        grid-row: 2;
+        background-color: pink;
+    }
+
+    #first-and-second-column-third-row {
+        grid-column: 1 / span 2;
+        grid-row: 3;
+        background-color: silver;
+    }
+
+    #third-column-all-rows {
+        grid-column: 3;
+        grid-row: 1 / span 3;
+        background-color: blue;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div id="first-column-first-row"></div>
+    <div id="second-column-first-row"></div>
+    <div id="first-column-second-row"></div>
+    <div id="second-column-second-row"></div>
+    <div id="first-and-second-column-third-row"></div>
+    <div id="third-column-all-rows"></div>
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/implicit-grids/grid-support-grid-auto-columns-rows-003.html b/testing/web-platform/tests/css/css-grid/implicit-grids/grid-support-grid-auto-columns-rows-003.html
new file mode 100644
index 0000000000..452eb494b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/implicit-grids/grid-support-grid-auto-columns-rows-003.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Grid Layout Test: Support for 'grid-auto-columns' and
+      'grid-auto-rows' properties with implicit tracks after and before the
+      explicit grid</title>
+    <link rel="help" href="https://drafts.csswg.org/css-grid/#auto-tracks">
+    <link rel="match" href="../reference/grid-support-grid-auto-columns-rows-003-ref.html">
+    <style>
+    #wrapper {
+      display: grid;
+      grid-template-columns: 50px 50px 50px 50px;
+    }
+
+    /* Implicit and explicit grid track sizes */
+    .grid {
+      display: grid;
+      grid-auto-rows: 2px 3px;
+      grid-auto-columns: 2px 3px;
+    }
+    #one   .grid { grid-template: 5px / 5px; }
+    #two   .grid { grid-template: 5px 5px / 5px 5px; }
+    #three .grid { grid-template: 5px 5px 5px / 5px 5px 5px; }
+
+    /* Grid item positions. */
+    .item-left1    { grid-area: auto / auto / 1 / 1; }
+    .item-explicit { grid-area: 1 / 1 / -1 / -1; }
+    .item-right1   { grid-area: -1 / -1; }
+
+    #zero  .item-left3  { grid-area: auto / auto / -3 / -3; }
+    #zero  .item-left2  { grid-area: auto / auto / -2 / -2; }
+    #zero  .item-right2 { grid-area: 2 / 2; }
+    #zero  .item-right3 { grid-area: 3 / 3; }
+    #one   .item-left3  { grid-area: auto / auto / -4 / -4; }
+    #one   .item-left2  { grid-area: auto / auto / -3 / -3; }
+    #one   .item-right2 { grid-area: 3 / 3; }
+    #one   .item-right3 { grid-area: 4 / 4; }
+    #two   .item-left3  { grid-area: auto / auto / -5 / -5; }
+    #two   .item-left2  { grid-area: auto / auto / -4 / -4; }
+    #two   .item-right2 { grid-area: 4 / 4; }
+    #two   .item-right3 { grid-area: 5 / 5; }
+    #three .item-left3  { grid-area: auto / auto / -6 / -6; }
+    #three .item-left2  { grid-area: auto / auto / -5 / -5; }
+    #three .item-right2 { grid-area: 5 / 5; }
+    #three .item-right3 { grid-area: 6 / 6; }
+
+    /* Colors */
+    .item-left3    { background: #ff0; }
+    .item-left2    { background: #ff0; }
+    .item-left1    { background: #ff0; }
+    .item-explicit { background: #f0f; }
+    .item-right1   { background: #0ff; }
+    .item-right2   { background: #0ff; }
+    .item-right3   { background: #0ff; }
+    </style>
+    <script>
+      function createDivWithClass(className, parent) {
+        let element = document.createElement('div');
+        element.className = className || '';
+        if (!parent) {
+          parent = document.body;
+        }
+        parent.appendChild(element);
+        return element;
+      }
+
+      function generate(parentId) {
+        let parent = document.getElementById(parentId);
+
+        for (let leftNum = 0; leftNum <= 3; ++leftNum) {
+          for (let rightNum = 0; rightNum <= 3; ++rightNum) {
+            let grid = leftNum + rightNum > 0
+              ? createDivWithClass("grid", parent)
+              : null;
+
+            for (let i = 1; i <= leftNum; ++i) {
+              createDivWithClass("item-left" + i, grid);
+            }
+
+            if (leftNum + rightNum > 0) {
+              createDivWithClass("item-explicit", grid);
+            }
+
+            for (let i = 1; i <= rightNum; ++i) {
+              createDivWithClass("item-right" + i, grid);
+            }
+          }
+        }
+      }
+
+      function run() {
+        // This is equal to something like this:
+        // <div class="grid">
+        //   <div class="item-left3"></div>
+        //   <div class="item-left2"></div>
+        //   <div class="item-left1"></div>
+        //   <div class="item-explicit"></div>
+        //   <div class="item-right1"></div>
+        //   <div class="item-right2"></div>
+        //   <div class="item-right3"></div>
+        // </div>
+        // Generate the grid examples with 0~3 left items and 0~3 right items.
+        // The item-explicit is placed inside the 0x0 ~ 3x3 explicit tracks.
+        generate("zero");
+        generate("one");
+        generate("two");
+        generate("three");
+
+        document.documentElement.offsetHeight;
+        document.documentElement.classList.remove('reftest-wait');
+      }
+    </script>
+  </head>
+  <body onload="run()">
+    <div id="wrapper">
+      <!-- Zero explicit track -->
+      <div id="zero"></div>
+
+      <!-- One explicit track -->
+      <div id="one"></div>
+
+      <!-- Two explicit tracks -->
+      <div id="two"></div>
+
+      <!-- Three explicit tracks -->
+      <div id="three"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/inheritance.html b/testing/web-platform/tests/css/css-grid/inheritance.html
new file mode 100644
index 0000000000..eee86f7030
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/inheritance.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Inheritance of CSS Grid Layout properties</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid/#property-index">
+<meta name="assert" content="Properties inherit or not according to the spec.">
+<meta name="assert" content="Properties have initial values according to the spec.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/inheritance-testcommon.js"></script>
+</head>
+<body>
+<div id="container">
+<div id="target"></div>
+</div>
+<script>
+assert_not_inherited('grid-auto-columns', 'auto', '10px');
+assert_not_inherited('grid-auto-flow', 'row', 'column dense');
+assert_not_inherited('grid-auto-rows', 'auto', '10px');
+assert_not_inherited('grid-column-end', 'auto', 'span 2');
+assert_not_inherited('grid-column-start', 'auto', 'span 2');
+assert_not_inherited('grid-row-end', 'auto', 'span 2');
+assert_not_inherited('grid-row-start', 'auto', 'span 2');
+assert_not_inherited('grid-template-areas', 'none', '"one two" "three four"');
+assert_not_inherited('grid-template-columns', 'none', '10px');
+assert_not_inherited('grid-template-rows', 'none', '10px');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/auto-margins-ignored-during-track-sizing-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/auto-margins-ignored-during-track-sizing-001.html
new file mode 100644
index 0000000000..2a23b1bd20
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/auto-margins-ignored-during-track-sizing-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<title>CSS Grid: grid items using 'auto' margins.</title>
+<link rel="author" title="Javier Fernendez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm">
+<link rel="match" href="references/auto-margins-ignored-during-track-sizing-001-ref.html">
+<meta name="assert" content="This test ensures that 'auto' margin is treated as 0px during the tracks sizing algorithm."/>
+<style>
+body { overflow: hidden; }
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+.margin-center {
+  margin-top: 10px;
+  margin-left: auto;
+  margin-right: auto;
+}
+.i1 { background: magenta;  }
+.i2 { background: cyan; }
+.i3 { background: yellow; }
+.i4 { background: lime; }
+</style>
+<p>This test pass if the 3 items in the first row have the same size filling the whole viewport's width and the item in the second row is centered in the first column.<p>
+<div class="grid">
+  <div class="i1">
+    In a few questions, you will get an expert-designed investment portfolio to fit your financial needs.
+  </div>
+  <div class="i2">
+    Open and fund your account with 10,000 or more and we will put your money to work.
+  </div>
+  <div class="i3">
+    We will take it from here, monitoring your portfolio daily to help keep it on track.
+  </div>
+  <div class="i4 margin-center">Learn More</a>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-001.html
new file mode 100644
index 0000000000..f6ec2bb997
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-001.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: evaluate how the baseline affects the grid intrinsic size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="The grid intrinsic size is comptuted correctly, considering the effect of baseline alignment in the size of the column tracks"/>
+<style>
+.grid {
+   position: relative;
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   font-family: Ahem;
+   line-height: 1;
+   grid-auto-flow: row;
+}
+.grid > :nth-child(1) { font-size:20px; }
+.grid > :nth-child(2) { font-size:30px; }
+.grid > :nth-child(3) { font-size:50px; }
+.grid > :nth-child(4) { font-size:60px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 50px; }
+.extraRightPadding { padding-right: 50px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { runTests(); })">
+
+<p>Horizontal 4x1 grid with parallel and orthogonal items.</p>
+<div id="grid1" class="grid contentStart itemsBaseline" data-expected-width="112">
+    <div class="item"                             data-offset-x="36" data-offset-y="10"  data-expected-width="40" data-expected-height="38">É</div>
+    <div class="item verticalLR"                  data-offset-x="18" data-offset-y="62"  data-expected-width="50" data-expected-height="48">É</div>
+    <div class="item"                             data-offset-x="36" data-offset-y="124" data-expected-width="70" data-expected-height="68">É</div>
+    <div class="item verticalLR"                  data-offset-x="12" data-offset-y="206" data-expected-width="80" data-expected-height="78">É</div>
+</div>
+<div id="grid2" class="grid contentStart itemsBaseline" data-expected-width="165">
+    <div class="item extraRightPadding"           data-offset-x="72" data-offset-y="10"  data-expected-width="87" data-expected-height="38">É</div>
+    <div class="item verticalLR extraLeftPadding" data-offset-x="12" data-offset-y="62"  data-expected-width="92" data-expected-height="48">É</div>
+    <div class="item"                             data-offset-x="72" data-offset-y="124" data-expected-width="70" data-expected-height="68">É</div>
+    <div class="item verticalLR"                  data-offset-x="48" data-offset-y="206" data-expected-width="80" data-expected-height="78">É</div>
+</div>
+<div id="grid3" class="grid contentStart itemsBaseline" data-expected-width="98">
+    <div class="item"                             data-offset-x="12" data-offset-y="10"  data-expected-width="40" data-expected-height="38">É</div>
+    <div class="item verticalRL"                  data-offset-x="18" data-offset-y="62"  data-expected-width="50" data-expected-height="48">É</div>
+    <div class="item"                             data-offset-x="12" data-offset-y="124" data-expected-width="70" data-expected-height="68">É</div>
+    <div class="item verticalRL"                  data-offset-x="12" data-offset-y="206" data-expected-width="80" data-expected-height="78">É</div>
+</div>
+<div id="grid4" class="grid contentStart itemsBaseline" data-expected-width="134">
+    <div class="item extraRightPadding"           data-offset-x="12" data-offset-y="10"  data-expected-width="87" data-expected-height="38">É</div>
+    <div class="item verticalRL extraLeftPadding" data-offset-x="12" data-offset-y="62"  data-expected-width="92" data-expected-height="48">É</div>
+    <div class="item"                             data-offset-x="12" data-offset-y="124" data-expected-width="70" data-expected-height="68">É</div>
+    <div class="item verticalRL"                  data-offset-x="48" data-offset-y="206" data-expected-width="80" data-expected-height="78">É</div>
+</div>
+
+<br clear="all">
+
+<script>
+    "use strict";
+    function runTests() {
+
+        let values = [ "auto", "min-content", "max-content" ];
+        let minValues = values.concat([ "0px" ]);
+
+        var grid1 = document.getElementById("grid1");
+        var grid2 = document.getElementById("grid2");
+        var grid3 = document.getElementById("grid3");
+        var grid4 = document.getElementById("grid4");
+
+        minValues.forEach(function (minValue) {
+            values.forEach(function (maxValue) {
+
+                grid1.id = "grid1-" + minValue + "-" + maxValue
+                grid2.id = "grid2-" + minValue + "-" + maxValue
+                grid3.id = "grid3-" + minValue + "-" + maxValue
+                grid4.id = "grid4-" + minValue + "-" + maxValue
+
+                grid1.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")";
+                grid2.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")";
+                grid3.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")";
+                grid4.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")";
+
+                checkLayout("#" + grid1.id, false);
+                checkLayout("#" + grid2.id, false);
+                checkLayout("#" + grid3.id, false);
+                checkLayout("#" + grid4.id, false);
+            });
+        });
+
+        done();
+    }
+</script>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-002.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-002.html
new file mode 100644
index 0000000000..c48bedccd5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-002.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: evaluate how the baseline affects the grid intrinsic size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="The grid intrinsic size is comptuted correctly, considering the effect of baseline alignment in the size of the column tracks" />
+<style>
+.grid {
+   position: relative;
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   height: 350px;
+   font-family: Ahem;
+   line-height: 1;
+   grid-auto-flow: row;
+}
+.grid > :nth-child(1) { font-size:20px; }
+.grid > :nth-child(2) { font-size:30px; }
+.grid > :nth-child(3) { font-size:50px; }
+.grid > :nth-child(4) { font-size:60px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraLeftPadding { padding-left: 50px; }
+.extraRightPadding { padding-right: 50px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { runTests(); })">
+
+<p>4x1 with orthogonal items.</p>
+<div id="grid1" class="grid contentStart itemsBaseline" data-expected-width="98">
+    <div class="item verticalLR"                   data-offset-x="20" data-offset-y="10"  data-expected-width="40" data-expected-height="38">É</div>
+    <div class="item verticalLR"                   data-offset-x="18" data-offset-y="62"  data-expected-width="50" data-expected-height="48">É</div>
+    <div class="item verticalLR"                   data-offset-x="14" data-offset-y="124" data-expected-width="70" data-expected-height="68">É</div>
+    <div class="item verticalLR"                   data-offset-x="12" data-offset-y="206" data-expected-width="80" data-expected-height="78">É</div>
+</div>
+<div id="grid2" class="grid contentStart itemsBaseline" data-expected-width="149">
+    <div class="item verticalLR extraRightPadding" data-offset-x="56" data-offset-y="10"  data-expected-width="87" data-expected-height="38">É</div>
+    <div class="item verticalLR extraLeftPadding"  data-offset-x="12" data-offset-y="62"  data-expected-width="92" data-expected-height="48">É</div>
+    <div class="item verticalLR"                   data-offset-x="50" data-offset-y="124" data-expected-width="70" data-expected-height="68">É</div>
+    <div class="item verticalLR"                   data-offset-x="48" data-offset-y="206" data-expected-width="80" data-expected-height="78">É</div>
+</div>
+<div id="grid3" class="grid contentStart itemsBaseline" data-expected-width="98">
+    <div class="item verticalRL"                   data-offset-x="20" data-offset-y="10"  data-expected-width="40" data-expected-height="38">É</div>
+    <div class="item verticalRL"                   data-offset-x="18" data-offset-y="62"  data-expected-width="50" data-expected-height="48">É</div>
+    <div class="item verticalRL"                   data-offset-x="14" data-offset-y="124" data-expected-width="70" data-expected-height="68">É</div>
+    <div class="item verticalRL"                   data-offset-x="12" data-offset-y="206" data-expected-width="80" data-expected-height="78">É</div>
+</div>
+<div id="grid4" class="grid contentStart itemsBaseline" data-expected-width="149">
+    <div class="item verticalRL extraRightPadding" data-offset-x="56" data-offset-y="10"  data-expected-width="87" data-expected-height="38">É</div>
+    <div class="item verticalRL extraLeftPadding"  data-offset-x="12" data-offset-y="62"  data-expected-width="92" data-expected-height="48">É</div>
+    <div class="item verticalRL"                   data-offset-x="50" data-offset-y="124" data-expected-width="70" data-expected-height="68">É</div>
+    <div class="item verticalRL"                   data-offset-x="48" data-offset-y="206" data-expected-width="80" data-expected-height="78">É</div>
+</div>
+
+<br clear="all">
+
+<script>
+    "use strict";
+    function runTests() {
+
+        let values = [ "auto", "min-content", "max-content" ];
+        let minValues = values.concat([ "0px" ]);
+
+        var grid1 = document.getElementById("grid1");
+        var grid2 = document.getElementById("grid2");
+        var grid3 = document.getElementById("grid3");
+        var grid4 = document.getElementById("grid4");
+
+        minValues.forEach(function (minValue) {
+            values.forEach(function (maxValue) {
+
+                grid1.id = "grid1-" + minValue + "-" + maxValue
+                grid2.id = "grid2-" + minValue + "-" + maxValue
+                grid3.id = "grid3-" + minValue + "-" + maxValue
+                grid4.id = "grid4-" + minValue + "-" + maxValue
+
+                grid1.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")";
+                grid2.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")";
+                grid3.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")";
+                grid4.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")";
+
+                checkLayout("#" + grid1.id, false);
+                checkLayout("#" + grid2.id, false);
+                checkLayout("#" + grid3.id, false);
+                checkLayout("#" + grid4.id, false);
+            });
+        });
+
+        done();
+    }
+</script>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-003.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-003.html
new file mode 100644
index 0000000000..3024534785
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-003.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: evaluate how the baseline affects the grid intrinsic size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="The grid intrinsic size is comptuted correctly, considering the effect of baseline alignment in the size of the column tracks"/>
+<style>
+body { margin: 0; }
+.grid {
+   position: relative;
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+   line-height: 1;
+   grid-auto-flow: row;
+}
+.grid > :nth-child(1) { font-size:20px; }
+.grid > :nth-child(2) { font-size:30px; }
+.grid > :nth-child(3) { font-size:50px; }
+.grid > :nth-child(4) { font-size:60px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 50px; }
+.extraBottomPadding { padding-bottom: 50px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { runTests(); })">
+
+<p>Vertical LR 4x1 grid with parallel and orthogonal items.</p>
+<div id="grid1" class="grid verticalLR contentStart itemsBaseline" data-expected-height="104">
+    <div class="item"                                 data-offset-x="12"  data-offset-y="40"  data-expected-width="40" data-expected-height="38">É</div>
+    <div class="item horizontalTB"                    data-offset-x="70"  data-offset-y="46"  data-expected-width="50" data-expected-height="48">É</div>
+    <div class="item"                                 data-offset-x="138" data-offset-y="10"  data-expected-width="70" data-expected-height="68">É</div>
+    <div class="item horizontalTB"                    data-offset-x="226" data-offset-y="22"  data-expected-width="80" data-expected-height="78">É</div>
+</div>
+<div id="grid2" class="grid verticalLR contentStart itemsBaseline" data-expected-height="155">
+    <div class="item extraTopPadding"                 data-offset-x="12"  data-offset-y="10"  data-expected-width="40" data-expected-height="82">É</div>
+    <div class="item horizontalTB extraBottomPadding" data-offset-x="70"  data-offset-y="60"  data-expected-width="50" data-expected-height="91">É</div>
+    <div class="item"                                 data-offset-x="138" data-offset-y="24"  data-expected-width="70" data-expected-height="68">É</div>
+    <div class="item horizontalTB"                    data-offset-x="226" data-offset-y="36"  data-expected-width="80" data-expected-height="78">É</div>
+</div>
+
+<br clear="all">
+
+<script>
+    "use strict";
+    function runTests() {
+
+        let values = [ "auto", "min-content", "max-content" ];
+        let minValues = values.concat([ "0px" ]);
+
+        var grid1 = document.getElementById("grid1");
+        var grid2 = document.getElementById("grid2");
+
+        minValues.forEach(function (minValue) {
+            values.forEach(function (maxValue) {
+
+                grid1.id = "grid1-" + minValue + "-" + maxValue
+                grid2.id = "grid2-" + minValue + "-" + maxValue
+
+                grid1.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")";
+                grid2.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")";
+
+                checkLayout("#" + grid1.id, false);
+                checkLayout("#" + grid2.id, false);
+            });
+        });
+
+        done();
+    }
+</script>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-004.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-004.html
new file mode 100644
index 0000000000..3fb71ab90d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-004.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: evaluate how the baseline affects the grid intrinsic size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="The grid intrinsic size is comptuted correctly, considering the effect of baseline alignment in the size of the column tracks"/>
+<style>
+.grid {
+   position: relative;
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+   line-height: 1;
+   grid-auto-flow: row;
+}
+.grid > :nth-child(1) { font-size:20px; }
+.grid > :nth-child(2) { font-size:30px; }
+.grid > :nth-child(3) { font-size:50px; }
+.grid > :nth-child(4) { font-size:60px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 50px; }
+.extraBottomPadding { padding-bottom: 50px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { runTests(); })">
+
+<p>Vertical RL 4x1 grid with parallel and orthogonal items.</p>
+<div id="grid1" class="grid verticalRL contentStart itemsBaseline" data-expected-height="104">
+    <div class="item"                                 data-offset-x="304" data-offset-y="40"  data-expected-width="40" data-expected-height="38">É</div>
+    <div class="item horizontalTB"                    data-offset-x="236" data-offset-y="46"  data-expected-width="50" data-expected-height="48">É</div>
+    <div class="item"                                 data-offset-x="148" data-offset-y="10"  data-expected-width="70" data-expected-height="68">É</div>
+    <div class="item horizontalTB"                    data-offset-x="50"  data-offset-y="22"  data-expected-width="80" data-expected-height="78">É</div>
+</div>
+<div id="grid2" class="grid verticalRL contentStart itemsBaseline" data-expected-height="155">
+    <div class="item extraTopPadding"                 data-offset-x="304" data-offset-y="10"  data-expected-width="40" data-expected-height="82">É</div>
+    <div class="item horizontalTB extraBottomPadding" data-offset-x="236" data-offset-y="60"  data-expected-width="50" data-expected-height="91">É</div>
+    <div class="item"                                 data-offset-x="148" data-offset-y="24"  data-expected-width="70" data-expected-height="68">É</div>
+    <div class="item horizontalTB"                    data-offset-x="50"  data-offset-y="36"  data-expected-width="80" data-expected-height="78">É</div>
+</div>
+
+<br clear="all">
+
+<script>
+    "use strict";
+    function runTests() {
+
+        let values = [ "auto", "min-content", "max-content" ];
+        let minValues = values.concat([ "0px" ]);
+
+        var grid1 = document.getElementById("grid1");
+        var grid2 = document.getElementById("grid2");
+
+        minValues.forEach(function (minValue) {
+            values.forEach(function (maxValue) {
+
+                grid1.id = "grid1-" + minValue + "-" + maxValue
+                grid2.id = "grid2-" + minValue + "-" + maxValue
+
+                grid1.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")";
+                grid2.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")";
+
+                checkLayout("#" + grid1.id, false);
+                checkLayout("#" + grid2.id, false);
+            });
+        });
+
+        done();
+    }
+</script>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-005.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-005.html
new file mode 100644
index 0000000000..19404aa022
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-005.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: evaluate how the baseline affects the grid intrinsic size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="The grid intrinsic size is comptuted correctly, considering the effect of baseline alignment in the size of the column tracks"/>
+<style>
+.grid {
+   position: relative;
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+   line-height: 1;
+   grid-auto-flow: row;
+}
+.grid > :nth-child(1) { font-size:20px; }
+.grid > :nth-child(2) { font-size:30px; }
+.grid > :nth-child(3) { font-size:50px; }
+.grid > :nth-child(4) { font-size:60px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 50px; }
+.extraBottomPadding { padding-bottom: 50px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { runTests(); })">
+
+<p>Vertical LR 4x1 grid with orthogonal items.</p>
+<div id="grid1" class="grid verticalLR contentStart itemsBaseline" data-expected-height="92">
+    <div class="item horizontalTB"                    data-offset-x="12"  data-offset-y="42" data-expected-width="40" data-expected-height="38">É</div>
+    <div class="item horizontalTB"                    data-offset-x="70"  data-offset-y="34" data-expected-width="50" data-expected-height="48">É</div>
+    <div class="item horizontalTB"                    data-offset-x="138" data-offset-y="18" data-expected-width="70" data-expected-height="68">É</div>
+    <div class="item horizontalTB"                    data-offset-x="226" data-offset-y="10" data-expected-width="80" data-expected-height="78">É</div>
+</div>
+<div id="grid2" class="grid verticalLR contentStart itemsBaseline" data-expected-height="141">
+    <div class="item horizontalTB extraTopPadding"    data-offset-x="12"  data-offset-y="10" data-expected-width="40" data-expected-height="82">É</div>
+    <div class="item horizontalTB extraBottomPadding" data-offset-x="70"  data-offset-y="46" data-expected-width="50" data-expected-height="91">É</div>
+    <div class="item horizontalTB"                    data-offset-x="138" data-offset-y="30" data-expected-width="70" data-expected-height="68">É</div>
+    <div class="item horizontalTB"                    data-offset-x="226" data-offset-y="22" data-expected-width="80" data-expected-height="78">É</div>
+</div>
+
+<br clear="all">
+
+<script>
+    "use strict";
+    function runTests() {
+
+        let values = [ "auto", "min-content", "max-content" ];
+        let minValues = values.concat([ "0px" ]);
+
+        var grid1 = document.getElementById("grid1");
+        var grid2 = document.getElementById("grid2");
+
+        minValues.forEach(function (minValue) {
+            values.forEach(function (maxValue) {
+
+                grid1.id = "grid1-" + minValue + "-" + maxValue
+                grid2.id = "grid2-" + minValue + "-" + maxValue
+
+                grid1.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")";
+                grid2.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")";
+
+                checkLayout("#" + grid1.id, false);
+                checkLayout("#" + grid2.id, false);
+            });
+        });
+
+        done();
+    }
+</script>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-006.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-006.html
new file mode 100644
index 0000000000..3e05ed758c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-006.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: evaluate how the baseline affects the grid intrinsic size</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/grid.css">
+<meta name="assert" content="The grid intrinsic size is comptuted correctly, considering the effect of baseline alignment in the size of the column tracks"/>
+<style>
+.grid {
+   position: relative;
+   background: grey;
+   float: left;
+   margin: 5px;
+   text-orientation: sideways;
+   width: 350px;
+   font-family: Ahem;
+   line-height: 1;
+   grid-auto-flow: row;
+}
+.grid > :nth-child(1) { font-size:20px; }
+.grid > :nth-child(2) { font-size:30px; }
+.grid > :nth-child(3) { font-size:50px; }
+.grid > :nth-child(4) { font-size:60px; }
+.item {
+   border-width: 2px 5px 3px 4px;
+   border-style: solid;
+   padding: 6px 3px 7px 8px;
+   margin: 10px 6px 4px 12px;
+}
+.extraTopPadding { padding-top: 50px; }
+.extraBottomPadding { padding-bottom: 50px; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { runTests(); })">
+
+<p>Vertical RL 4x1 grid with orthogonal items.</p>
+<div id="grid1" class="grid verticalRL contentStart itemsBaseline" data-expected-height="92">
+    <div class="item horizontalTB"                    data-offset-x="304" data-offset-y="42"  data-expected-width="40" data-expected-height="38">É</div>
+    <div class="item horizontalTB"                    data-offset-x="236" data-offset-y="34"  data-expected-width="50" data-expected-height="48">É</div>
+    <div class="item horizontalTB"                    data-offset-x="148" data-offset-y="18"  data-expected-width="70" data-expected-height="68">É</div>
+    <div class="item horizontalTB"                    data-offset-x="50"  data-offset-y="10"  data-expected-width="80" data-expected-height="78">É</div>
+</div>
+<div id="grid2" class="grid verticalRL contentStart itemsBaseline" data-expected-height="141">
+    <div class="item horizontalTB extraTopPadding"    data-offset-x="304" data-offset-y="10"  data-expected-width="40" data-expected-height="82">É</div>
+    <div class="item horizontalTB extraBottomPadding" data-offset-x="236" data-offset-y="46"  data-expected-width="50" data-expected-height="91">É</div>
+    <div class="item horizontalTB"                    data-offset-x="148" data-offset-y="30"  data-expected-width="70" data-expected-height="68">É</div>
+    <div class="item horizontalTB"                    data-offset-x="50"  data-offset-y="22"  data-expected-width="80" data-expected-height="78">É</div>
+</div>
+
+<br clear="all">
+
+<script>
+    "use strict";
+    function runTests() {
+
+        let values = [ "auto", "min-content", "max-content" ];
+        let minValues = values.concat([ "0px" ]);
+
+        var grid1 = document.getElementById("grid1");
+        var grid2 = document.getElementById("grid2");
+
+        minValues.forEach(function (minValue) {
+            values.forEach(function (maxValue) {
+
+                grid1.id = "grid1-" + minValue + "-" + maxValue
+                grid2.id = "grid2-" + minValue + "-" + maxValue
+
+                grid1.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")";
+                grid2.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")";
+
+                checkLayout("#" + grid1.id, false);
+                checkLayout("#" + grid2.id, false);
+            });
+        });
+
+        done();
+    }
+</script>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-and-intrinsic-sizes-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-and-intrinsic-sizes-001.html
new file mode 100644
index 0000000000..dd6f602ce7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-and-intrinsic-sizes-001.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<title>CSS Grid: track sizing algo with size restrictions and intrinsic sizes.</title>
+<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#layout-algorithm"/>
+<meta name="assert" content="This test ensures that fr tracks are properly sized whenever grid has intrinsic sizes."/>
+<link rel="issue" href="https://crbug.com/423743"/>
+<link href="/css/support/width-keyword-classes.css" rel="stylesheet"/>
+<link href="/css/support/height-keyword-classes.css" rel="stylesheet"/>
+<link href="/css/support/grid.css" rel="stylesheet"/>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+.container {
+    width: 100px;
+    height: 100px;
+}
+
+.grid {
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+}
+
+div { font: 10px/1 Ahem; }
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div class="container">
+  <div class="grid" data-expected-width="100" data-expected-height="10">
+    <div>XXX XXX</div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="grid min-content" data-expected-width="30" data-expected-height="20">
+    <div>XXX XXX</div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="grid min-content" data-expected-width="0" data-expected-height="20" style="grid-template-columns:minmax(0, 1fr);">
+    <div>XXX XXX</div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="grid max-content" data-expected-width="70" data-expected-height="10">
+    <div>XXX XXX</div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="grid fit-content" data-expected-width="70" data-expected-height="10">
+    <div>XXX XXX</div>
+  </div>
+</div>
+
+<div class="min-content">
+    <div class="grid" data-expected-width="40" data-expected-height="50">
+        <div>XXX XXXX XX X XX XXX</div>
+    </div>
+</div>
+
+<div class="grid container" data-expected-width="100" data-expected-height="100">
+    <div style="display: grid; grid-template-columns: 3fr; grid-template-rows: 2fr;" data-expected-width="100" data-expected-height="100">
+        <div>XXX XXXX XX X XX XXX</div>
+    </div>
+</div>
+
+<div class="grid" style="grid; grid: 1fr 2fr / 2fr 1fr; width: 300px; height: 300px;" data-expected-width="300" data-expected-height="300">
+    <div class="firstRowFirstColumn" style="display: grid; grid: 1fr 3fr / 3fr 1fr;" data-expected-width="200" data-expected-height="100">
+        <div style="border: 2px solid magenta;" data-expected-width="150" data-expected-height="25">XXXX</div>
+        <div class="secondRowSecondColumn" style="border: 2px solid cyan;" data-expected-width="50" data-expected-height="75">XXXX XX XX</div>
+    </div>
+    <div class="secondRowSecondColumn" style="display: grid; grid: 3fr 4fr / 4fr 3fr;" data-expected-width="100" data-expected-height="200">
+        <div style="border: 2px solid lime;" data-expected-width="56" data-expected-height="86">XXX XX X</div>
+        <div class="secondRowSecondColumn" style="border: 2px solid navy;" data-expected-width="44" data-expected-height="114">XXXX XXX XXXX XXX XXXX</div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-and-intrinsic-sizes-002.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-and-intrinsic-sizes-002.html
new file mode 100644
index 0000000000..6b2df4e572
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-and-intrinsic-sizes-002.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<title>Auto Min Size is Zeroed When Spanning Flexible Tracks</title>
+<link rel="author" title="Tab Atkins-Bittner" href="https://xanthir.com/contact/">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="An item spanning >1 track, at least one of which is flexible, must have a zero automatic minimum size (and thus, not grow to accommodate its children).">
+
+<style>
+.grid { display: grid; grid-template-columns: repeat(12, 1fr); height: 100px; width: 100px; }
+.test { grid-column: 1 / span 8; grid-row: 1; background: red; }
+.over { grid-column: 1 / span 8; grid-row: 1; background: green; }
+.under { grid-column: 9 / span 4; grid-row: 1; background: green; }
+.big-child { width: 500px; height: 100px; }
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div class="grid">
+  <div class="under"></div>
+  <div class="test">
+    <div class=big-child></div>
+  </div>
+  <div class="over"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-sizing-columns-min-max-width-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-sizing-columns-min-max-width-001.html
new file mode 100644
index 0000000000..097468b7c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-sizing-columns-min-max-width-001.html
@@ -0,0 +1,94 @@
+<!DOCTYPE HTML>
+<title>CSS Grid Layout Test: min and max width when computing the flex column</title>
+<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-flex-tracks"/>
+<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=660690"/>
+<link href="/css/support/grid.css" rel="stylesheet"/>
+<link href="/css/support/width-keyword-classes.css" rel="stylesheet">
+<meta name="assert" content="This test ensures that minimum and maximum widths are used to compute the flex fraction for grid columns."/>
+<style>
+.grid {
+   margin: 3px;
+   grid: 50px / minmax(10px, 1fr) minmax(10px, 4fr);
+   grid-column-gap: 33px;
+   border: 5px dashed;
+   padding: 2px;
+}
+
+.float { float: left; }
+
+.item:nth-child(1) { background-color: purple; }
+.item:nth-child(2) { background-color: blue; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+
+<p>This test PASS if all the grids in the same row look the same.</p>
+
+<div class="grid float" style="max-width: 70px" data-expected-height="64" data-expected-width="84">
+    <div class="item" data-expected-height="50" data-expected-width="10"></div>
+    <div class="item" data-expected-height="50" data-expected-width="27"></div>
+</div>
+<div class="grid float" style="min-width: 70px; max-width: 60px" data-expected-height="64" data-expected-width="84">
+    <div class="item" data-expected-height="50" data-expected-width="10"></div>
+    <div class="item" data-expected-height="50" data-expected-width="27"></div>
+</div>
+<div class="grid float" style="width: 70px" data-expected-height="64" data-expected-width="84">
+    <div class="item" data-expected-height="50" data-expected-width="10"></div>
+    <div class="item" data-expected-height="50" data-expected-width="27"></div>
+</div>
+
+<br clear="all">
+
+<div class="grid float" style="min-width: 108px" data-expected-height="64" data-expected-width="122">
+    <div class="item" data-expected-height="50" data-expected-width="15"></div>
+    <div class="item" data-expected-height="50" data-expected-width="60"></div>
+</div>
+<div class="grid float" style="min-width: 108px; max-width: 60px" data-expected-height="64" data-expected-width="122">
+    <div class="item" data-expected-height="50" data-expected-width="15"></div>
+    <div class="item" data-expected-height="50" data-expected-width="60"></div>
+</div>
+<div class="grid float" style="width: 108px" data-expected-height="64" data-expected-width="122">
+    <div class="item" data-expected-height="50" data-expected-width="15"></div>
+    <div class="item" data-expected-height="50" data-expected-width="60"></div>
+</div>
+
+<br clear="all">
+
+<div class="grid float min-width-max-content" data-expected-height="64" data-expected-width="97">
+    <div class="item" data-expected-height="50" data-expected-width="10"></div>
+    <div class="item" data-expected-height="50" data-expected-width="40"></div>
+</div>
+<div class="grid float min-width-max-content max-width-min-content" data-expected-height="64" data-expected-width="97">
+    <div class="item" data-expected-height="50" data-expected-width="10"></div>
+    <div class="item" data-expected-height="50" data-expected-width="40"></div>
+</div>
+<div class="grid float max-content" data-expected-height="64" data-expected-width="97">
+    <div class="item" data-expected-height="50" data-expected-width="10"></div>
+    <div class="item" data-expected-height="50" data-expected-width="40"></div>
+</div>
+
+<br clear="all">
+
+<div class="float min-content">
+    <div class="grid min-width-max-content" data-expected-height="64" data-expected-width="97">
+        <div class="item" data-expected-height="50" data-expected-width="10"></div>
+        <div class="item" data-expected-height="50" data-expected-width="40"></div>
+    </div>
+</div>
+<div class="float max-content">
+    <div class="grid min-width-max-content max-width-min-content" data-expected-height="64" data-expected-width="97">
+        <div class="item" data-expected-height="50" data-expected-width="10"></div>
+        <div class="item" data-expected-height="50" data-expected-width="40"></div>
+    </div>
+</div>
+<div class="float fit-content">
+    <div class="grid max-content" data-expected-height="64" data-expected-width="97">
+        <div class="item" data-expected-height="50" data-expected-width="10"></div>
+        <div class="item" data-expected-height="50" data-expected-width="40"></div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-sizing-rows-indefinite-height.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-sizing-rows-indefinite-height.html
new file mode 100644
index 0000000000..6625a321d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-sizing-rows-indefinite-height.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1149627">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-flex-tracks">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4309" />
+<style>
+.grid {
+  display: inline-grid;
+  position: relative;
+  grid-template-columns: minmax(0, .5fr);
+  grid-template-rows: minmax(0, .5fr);
+}
+.item {
+  width: 200px;
+  height: 200px;
+  background: linear-gradient(green, green) no-repeat;
+  background-size: 100px 100px;
+}
+.abspos {
+  grid-area: 1 / 1 / 2 / 2;
+  position: absolute;
+  width: 200%;
+  height: 200%;
+  background: red;
+  z-index: -1;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="grid">
+  <div class="item"></div>
+  <div class="abspos"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-sizing-rows-min-max-height-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-sizing-rows-min-max-height-001.html
new file mode 100644
index 0000000000..0789e40530
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-sizing-rows-min-max-height-001.html
@@ -0,0 +1,96 @@
+<!DOCTYPE HTML>
+<title>CSS Grid Layout Test: min and max height when computing the flex row</title>
+<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-flex-tracks"/>
+<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=660690"/>
+<link href="/css/support/grid.css" rel="stylesheet"/>
+<link href="/css/support/height-keyword-classes.css" rel="stylesheet">
+<meta name="assert" content="This test ensures that minimum and maximum heights are used to compute the flex fraction for grid rows."/>
+<style>
+.grid {
+   margin: 3px;
+   grid: minmax(10px, 1fr) minmax(10px, 4fr) / 50px;
+   grid-row-gap: 33px;
+   border: 5px dashed;
+   padding: 2px;
+}
+
+.float { float: left; }
+
+.item:nth-child(1) { background-color: purple; }
+.item:nth-child(2) { background-color: blue; }
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.grid')">
+<div id="log"></div>
+
+<p>This test PASS if all the grids in the same row look the same.</p>
+
+<div class="grid float" style="max-height: 70px" data-expected-width="64" data-expected-height="84">
+    <div class="item" data-expected-width="50" data-expected-height="10"></div>
+    <div class="item" data-expected-width="50" data-expected-height="27"></div>
+</div>
+<div class="grid float" style="min-height: 70px; max-height: 60px" data-expected-width="64" data-expected-height="84">
+    <div class="item" data-expected-width="50" data-expected-height="10"></div>
+    <div class="item" data-expected-width="50" data-expected-height="27"></div>
+</div>
+<div class="grid float" style="height: 70px" data-expected-width="64" data-expected-height="84">
+    <div class="item" data-expected-width="50" data-expected-height="10"></div>
+    <div class="item" data-expected-width="50" data-expected-height="27"></div>
+</div>
+
+<br clear="all">
+
+<div class="grid float" style="min-height: 108px" data-expected-width="64" data-expected-height="122">
+    <div class="item" data-expected-width="50" data-expected-height="15"></div>
+    <div class="item" data-expected-width="50" data-expected-height="60"></div>
+</div>
+<div class="grid float" style="min-height: 108px; max-height: 60px" data-expected-width="64" data-expected-height="122">
+    <div class="item" data-expected-width="50" data-expected-height="15"></div>
+    <div class="item" data-expected-width="50" data-expected-height="60"></div>
+</div>
+<div class="grid float" style="height: 108px" data-expected-width="64" data-expected-height="122">
+    <div class="item" data-expected-width="50" data-expected-height="15"></div>
+    <div class="item" data-expected-width="50" data-expected-height="60"></div>
+</div>
+
+<br clear="all">
+
+<div class="grid float min-height-max-content" data-expected-width="64" data-expected-height="97">
+    <div class="item" data-expected-width="50" data-expected-height="10"></div>
+    <div class="item" data-expected-width="50" data-expected-height="40"></div>
+</div>
+<div class="grid float min-height-max-content max-height-min-content" data-expected-width="64" data-expected-height="97">
+    <div class="item" data-expected-width="50" data-expected-height="10"></div>
+    <div class="item" data-expected-width="50" data-expected-height="40"></div>
+</div>
+<div class="grid float max-content" data-expected-width="64" data-expected-height="97">
+    <div class="item" data-expected-width="50" data-expected-height="10"></div>
+    <div class="item" data-expected-width="50" data-expected-height="40"></div>
+</div>
+
+<br clear="all">
+
+<div class="float min-content">
+    <div class="grid min-height-max-content" data-expected-width="64" data-expected-height="97">
+        <div class="item" data-expected-width="50" data-expected-height="10"></div>
+        <div class="item" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+<div class="float max-content">
+    <div class="grid min-height-max-content max-height-min-content" data-expected-width="64" data-expected-height="97">
+        <div class="item" data-expected-width="50" data-expected-height="10"></div>
+        <div class="item" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+<div class="float fit-content">
+    <div class="grid max-content" data-expected-width="64" data-expected-height="97">
+        <div class="item" data-expected-width="50" data-expected-height="10"></div>
+        <div class="item" data-expected-width="50" data-expected-height="40"></div>
+    </div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-tracks-with-fractional-size.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-tracks-with-fractional-size.html
new file mode 100644
index 0000000000..994149faa6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-tracks-with-fractional-size.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang=en class="reftest-wait">
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Expand flexible tracks with a fractional size</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-flex-tracks" title="12.7. Expand Flexible Tracks">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1249750">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Checks that flexible tracks correctly distribute fractional shares of a grid's available size">
+<style>
+.grid {
+  width: 100px;
+  height: 50px;
+  display: grid;
+  background: red;
+}
+.grid > div {
+  background: green;
+}
+#cols {
+  grid-template-rows: auto 0px;
+  grid-template-columns: repeat(973, 1fr);
+}
+#rows {
+  grid-auto-flow: column;
+  grid-template-columns: auto 0px;
+  grid-template-rows: repeat(973, 1fr);
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="cols" class="grid">
+  <div style="grid-column: 1 / -1"></div>
+</div>
+<div id="rows" class="grid">
+  <div style="grid-row: 1 / -1"></div>
+</div>
+<script>
+var cols_grid = document.getElementById("cols");
+var rows_grid = document.getElementById("rows");
+for (var i = 0; i < 973; ++i) {
+  cols_grid.appendChild(document.createElement("div"));
+  rows_grid.appendChild(document.createElement("div"));
+}
+document.documentElement.classList.remove('reftest-wait');
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-001.html
new file mode 100644
index 0000000000..e0665d56a1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-001.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Evaluate the behavior of a grid container as Flexbox item</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-lines">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex-wrap">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-content">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-flex">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-grid">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="A single-line column flexbox shouldn't shrink-to-fit since its flex item is stretching in the main-axis, honoring the 'align-self: normal (behaves as 'stretch')'. The grid item's inline-size should be stretched as well, honoring its justify-self: 'normal' (behaves as 'stretch')">
+<style>
+    body { overflow: hidden; }
+    .flexbox {
+        display: flex;
+        flex-flow: column nowrap;
+        align-content: flex-start;
+        width: 100px;
+        height: 100px;
+        background: red;
+    }
+    .grid {
+        display: grid;
+        align-items: baseline;
+    }
+    .gridItem {
+        background: green;
+        height: 100px;
+    }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="flexbox">
+    <div class="grid">
+        <div class="gridItem"></div>
+    </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-002.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-002.html
new file mode 100644
index 0000000000..4ddafecb84
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-002.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Evaluate the behavior of a grid container as Flexbox item</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-lines">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex-wrap">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-content">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-flex">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-grid">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="The align-content: 'stretch' prevents the multi-line column flexbox to shrink-to-fit (default behavior), hence the grid container will be stretched, honoring its align-self: 'normal (behaves as 'stretch'), as well as its grid item, honoring its justify-self: 'normal' (behaves as 'stretch') ">
+<style>
+    body { overflow: hidden; }
+    .flexbox {
+        display: flex;
+        flex-flow: column wrap;
+        align-content: stretch;
+        width: 100px;
+        height: 100px;
+        background: red;
+    }
+    .grid {
+        display: grid;
+        align-items: baseline;
+    }
+    .gridItem {
+        background: green;
+        height: 100px;
+    }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="flexbox">
+    <div class="grid">
+        <div class="gridItem"></div>
+    </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-003.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-003.html
new file mode 100644
index 0000000000..73d204490a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-003.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Evaluate the behavior of a grid container as Flexbox item</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-lines">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex-wrap">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-content">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-flex">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-grid">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="A single-line column flexbox shouldn't shrink-to-fit since its flex item is stretching in the main-axis, honoring the 'align-self: normal (behaves as 'stretch')'. The vertical grid item's inline-size should be stretched as well, honoring its justify-self: 'normal' (behaves as 'stretch')">
+<style>
+    body { overflow: hidden; }
+    .flexbox {
+        display: flex;
+        flex-flow: column nowrap;
+        align-content: flex-start;
+        width: 100px;
+        height: 100px;
+        background: red;
+    }
+    .grid {
+        display: grid;
+        align-items: baseline;
+    }
+    .gridItem {
+        background: green;
+        height: 100px;
+        writing-mode: vertical-lr;
+    }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="flexbox">
+    <div class="grid">
+        <div class="gridItem"></div>
+    </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-004.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-004.html
new file mode 100644
index 0000000000..c3f9d9c0d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-004.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Evaluate the behavior of a grid container as Flexbox item</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-lines">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex-wrap">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-content">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-flex">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-grid">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="The align-content: 'stretch' prevents the multi-line column flexbox to shrink-to-fit (default behavior), hence the grid container will be stretched, honoring its align-self: 'normal (behaves as 'stretch'), as well as its vertical grid item, honoring its justify-self: 'normal' (behaves as 'stretch') ">
+<style>
+    body { overflow: hidden; }
+    .flexbox {
+        display: flex;
+        flex-flow: column wrap;
+        align-content: stretch;
+        width: 100px;
+        height: 100px;
+        background: red;
+    }
+    .grid {
+        display: grid;
+    }
+    .gridItem {
+        background: green;
+        height: 100px;
+        writing-mode: vertical-lr;
+    }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="flexbox">
+    <div class="grid">
+        <div class="gridItem"></div>
+    </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-005.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-005.html
new file mode 100644
index 0000000000..4443314950
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-005.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Evaluate the behavior of a grid container as Flexbox item</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-lines">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex-wrap">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-content">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-flex">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-grid">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="A single-line column flexbox shouldn't shrink-to-fit since its flex item is stretching in the main-axis, honoring the 'align-self: normal (behaves as 'stretch')'. The grid item's inline-size should be stretched as well, honoring its justify-self: 'normal' (behaves as 'stretch')">
+<style>
+    body { overflow: hidden; }
+    .flexbox {
+        display: flex;
+        flex-flow: column nowrap;
+        align-content: flex-start;
+        width: 100px;
+        height: 100px;
+        background: red;
+    }
+    .grid {
+        display: grid;
+        align-items: start;
+    }
+    .gridItem {
+        background: green;
+        height: 100px;
+    }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="flexbox">
+    <div class="grid">
+        <div class="gridItem"></div>
+    </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-006.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-006.html
new file mode 100644
index 0000000000..7be46cd3b6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-006.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Evaluate the behavior of a grid container as Flexbox item</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-lines">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex-wrap">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-justify-content">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-flex">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-grid">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="The align-content: 'stretch' prevents the multi-line column flexbox to shrink-to-fit (default behavior), hence the grid container will be stretched, honoring its align-self: 'normal (behaves as 'stretch'), as well as grid item, honoring its justify-self: 'normal' (behaves as 'stretch') ">
+<style>
+    body { overflow: hidden; }
+    .flexbox {
+        display: flex;
+        flex-flow: column wrap;
+        justify-content: stretch;
+        width: 100px;
+        height: 100px;
+        background: red;
+    }
+    .grid {
+        display: grid;
+        align-items: start;
+    }
+    .gridItem {
+        background: green;
+        height: 100px;
+    }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="flexbox">
+    <div class="grid">
+        <div class="gridItem"></div>
+    </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-007.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-007.html
new file mode 100644
index 0000000000..ab0e591b8f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-007.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Evaluate the behavior of a grid container as Flexbox item</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-lines">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex-wrap">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-content">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-flex">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-grid">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="A single-line column flexbox shouldn't shrink-to-fit since its flex item is stretching in the main-axis, honoring the 'align-self: normal (behaves as 'stretch')'. The grid item's relative block size will be resolved againts the grid's row size, while its inline-size should be stretched as well, honoring its justify-self: 'normal' (behaves as 'stretch')">
+<style>
+    body { overflow: hidden; }
+    .flexbox {
+        display: flex;
+        flex-flow: column nowrap;
+        align-content: flex-start;
+        width: 100px;
+        height: 100px;
+        background: red;
+    }
+    .grid {
+        display: grid;
+        align-items: baseline;
+        grid-template-rows: 100px;
+    }
+    .gridItem {
+        background: green;
+        height: 100%;
+    }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="flexbox">
+    <div class="grid">
+        <div class="gridItem"></div>
+    </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-008.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-008.html
new file mode 100644
index 0000000000..183a607f53
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-008.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Evaluate the behavior of a grid container as Flexbox item</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-lines">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex-wrap">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-content">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-flex">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-grid">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="A single-line column flexbox shouldn't shrink-to-fit since its flex item is stretching in the main-axis, honoring the 'align-self: normal (behaves as 'stretch')'. The grid item has a relative inline-size, which should be resolved against the stretched grid's inline-size.">
+<style>
+    body { overflow: hidden; }
+    .flexbox {
+        display: flex;
+        flex-flow: column nowrap;
+        width: 100px;
+        height: 100px;
+        background: red;
+    }
+    .grid {
+        display: grid;
+        justify-self: start;
+        align-items: baseline;
+    }
+    .gridItem {
+        background: green;
+        width: 100%;
+        height: 100px;
+    }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="flexbox">
+    <div class="grid">
+        <div class="gridItem"></div>
+    </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-columns-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-columns-001.html
new file mode 100644
index 0000000000..0bac13960b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-columns-001.html
@@ -0,0 +1,294 @@
+<!DOCTYPE html>
+<title>CSS Grid: automatic minimum in 'auto' columns</title>
+<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#automatic-minimum-size">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=464287">
+<meta name="assert" content="Check that grid item's 'min-width' is honored when sizing 'auto' columns.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/fonts/ahem.css">
+
+<style>
+.grid { font: 10px/1 Ahem; }
+
+.minWidth10 { min-width: 10px; }
+.minWidth20 { min-width: 20px; }
+.minWidth30 { min-width: 30px; }
+.minWidth40 { min-width: 40px; }
+.minWidth50 { min-width: 50px; }
+.minWidth60 { min-width: 60px; }
+.minWidth70 { min-width: 70px; }
+.minWidth90 { min-width: 90px; }
+.minWidthMaxContent { min-width: max-content; }
+
+.width50 { width: 50px; }
+.width60 { width: 60px; }
+.width200 { width: 200px; }
+
+.border5 { border: 5px solid #abc; }
+.padding8 { padding: 0px 8px 0px; }
+
+/* All these 4 cases are equivalent. We use them interchangeably. */
+.gridAuto { grid-template-columns: auto; }
+.gridMinMaxAutoAuto { grid-template-columns: minmax(auto, auto); }
+.gridMinMaxAutoMaxContent { grid-template-columns: minmax(auto, max-content); }
+.gridMinMaxMinContentAuto { grid-template-columns: minmax(min-content, auto); }
+
+/* All these 3 cases are equivalent. We use them interchangeably. */
+.gridAutoAndAuto { grid-template-columns: auto auto; }
+.gridAutoAndMinMaxAutoAuto { grid-template-columns: auto minmax(auto, auto); }
+.gridMinMaxAutoMaxContentAndAuto { grid-template-columns: minmax(auto, max-content) auto; }
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAuto">
+    <div class="firstRowFirstColumn minWidth40">XXXXXX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoItemSmallerThanMinSize">
+    <div class="firstRowFirstColumn minWidth40">XX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridMinMaxAutoAuto" id="gridMinMaxAutoAuto">
+    <div class="firstRowFirstColumn minWidth40">XX XX XX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridMinMaxAutoMaxContent" id="gridMinMaxAutoMaxContent">
+    <div class="firstRowFirstColumn minWidth40">XXX XX X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridMinMaxMinContentAuto" id="gridMinMaxMinContentAuto">
+    <div class="firstRowFirstColumn minWidth40">X X X X X X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoMultipleItems">
+    <div class="firstRowFirstColumn minWidth30">XX</div>
+    <div class="secondRowFirstColumn minWidth20"">XXXX XXXX</div>
+    <div class="thirdRowAutoColumn minWidth10">XX XXXXX X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridMinMaxAutoAuto" id="gridMinMaxAutoAutoMultipleItemsOneWithoutMinWidth">
+    <div class="firstRowFirstColumn minWidth30">XX</div>
+    <div class="secondRowFirstColumn">XXXXXX</div>
+    <div class="thirdRowAutoColumn minWidth20">XXXX XXXX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridMinMaxAutoMaxContent" id="gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinWidth">
+    <div class="firstRowFirstColumn minWidth30">XX</div>
+    <div class="secondRowFirstColumn">XX XXXXXXXX</div>
+    <div class="thirdRowAutoColumn minWidth20">XXXX XXXX</div>
+  </div>
+</div>
+
+
+<div class="constrainedContainer">
+  <div class="grid gridAutoAndAuto" id="gridAutoAndAutoFixedWidthChildren">
+    <div class="firstRowFirstColumn width200 minWidth50"></div>
+    <div class="firstRowSecondColumn width50"></div>
+  </div>
+</div>
+
+
+<div class="constrainedContainer">
+  <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningOneNonSpannig">
+    <div class="firstRowFirstColumn">XX XX</div>
+    <div class="secondRowBothColumn minWidth50">XXXXXX X XXX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningMultipleNonSpanning">
+    <div class="secondRowBothColumn minWidth60">XX XX XX</div>
+    <div class="firstRowSecondColumn">X X</div>
+    <div class="firstRowSecondColumn">XXXX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning">
+    <div class="firstRowSecondColumn">X XXX XX</div>
+    <div class="secondRowBothColumn minWidth70">XXX XXXX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoMultipleSpanning">
+    <div class="secondRowBothColumn minWidth70">XX XX XX</div>
+    <div class="firstRowBothColumn">XXXXX X XXXXX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridMinMaxAutoMaxContentAndAuto" id="gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning">
+    <div class="firstRowSecondColumn minWidth60">X XXX XX</div>
+    <div class="secondRowBothColumn minWidth90">XXXXX XXXXX</div>
+    <div class="firstRowFirstColumn">XX XX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridMinMaxAutoMaxContentAndAuto" id="gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning">
+    <div class="secondRowBothColumn">XX XX XX XX</div>
+    <div class="firstRowFirstColumn minWidth40">XXX</div>
+    <div class="firstRowBothColumn minWidth90">X XX XXX</div>
+    <div class="firstRowSecondColumn">X XX X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoWithFixedWidthChild">
+    <div class="firstRowFirstColumn width60">XXX X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoWithFixedWidthChildAndMinWidth">
+    <div class="firstRowFirstColumn width60 minWidth40">XXX X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoWithFixedWidthChildAndHigherMinWidth">
+    <div class="firstRowFirstColumn width60 minWidth90">XXX X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedWidth">
+    <div class="firstRowBothColumn width50">XX XXX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedWidthAndMinWidth">
+    <div class="firstRowBothColumn width60 minWidth50">XX XXX XX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedWidthAndHigherMinWidth">
+    <div class="firstRowBothColumn width60 minWidth70">XX XXX XX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoFixedMinWidthWithBorder">
+    <div class="firstRowFirstColumn minWidth40 border5">XXXXXX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoFixedMinWidthWithPadding">
+    <div class="firstRowFirstColumn minWidth40 padding8">XXXXXX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoFixedMinWidthWithBorderAndPadding">
+    <div class="firstRowFirstColumn minWidth40 border5 padding8">XXXXXX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoAutoMinWidthWithBorder">
+    <div class="firstRowFirstColumn border5">XX XXX X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoAutoMinWidthWithPadding">
+    <div class="firstRowFirstColumn padding8">XX XXX X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoAutoMinWidthWithBorderAndPadding">
+    <div class="firstRowFirstColumn border5 padding8">XX XXX X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoMaxContentMinWidthWithBorder">
+    <div class="firstRowFirstColumn minWidthMaxContent border5">X XXXX X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoMaxContentMinWidthWithPadding">
+    <div class="firstRowFirstColumn minWidthMaxContent padding8">X XXXX X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoMaxContentMinWidthWithBorderAndPadding">
+    <div class="firstRowFirstColumn border5 padding8 minWidthMaxContent">X XXXX X</div>
+  </div>
+</div>
+
+<script>
+function testGridColumnsValues(id, computedColumnValue)
+{
+  assert_equals(window.getComputedStyle(document.getElementById(id))
+      .getPropertyValue('grid-template-columns'), computedColumnValue);
+}
+
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+  test(() => {
+    testGridColumnsValues('gridAuto', '40px');
+    testGridColumnsValues('gridAutoItemSmallerThanMinSize', '40px');
+    testGridColumnsValues('gridMinMaxAutoAuto', '40px');
+    testGridColumnsValues('gridMinMaxAutoMaxContent', '40px');
+    testGridColumnsValues('gridMinMaxMinContentAuto', '40px');
+    testGridColumnsValues('gridAutoMultipleItems', '30px');
+    testGridColumnsValues('gridMinMaxAutoAutoMultipleItemsOneWithoutMinWidth', '60px');
+    testGridColumnsValues('gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinWidth', '80px');
+    testGridColumnsValues('gridAutoAndAutoFixedWidthChildren', '200px 50px');
+  }, 'Check that min-width is honored when sizing auto columns.');
+  test(() => {
+    testGridColumnsValues('gridAutoAndAutoOneSpanningOneNonSpannig', '35px 15px');
+    testGridColumnsValues('gridAutoAndAutoOneSpanningMultipleNonSpanning', '20px 40px');
+    testGridColumnsValues('gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning', '20px 50px');
+    testGridColumnsValues('gridAutoAndMinMaxAutoAutoMultipleSpanning', '35px 35px');
+    testGridColumnsValues('gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning', '25px 65px');
+    testGridColumnsValues('gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning', '40px 50px');
+  }, 'Check that min-width is honored when sizing auto columns and spanning grid items.');
+  test(() => {
+    testGridColumnsValues('gridAutoWithFixedWidthChild', '60px');
+    testGridColumnsValues('gridAutoWithFixedWidthChildAndMinWidth', '60px');
+    testGridColumnsValues('gridAutoWithFixedWidthChildAndHigherMinWidth', '90px');
+    testGridColumnsValues('gridAutoAndAutoOneSpanningFixedWidth', '25px 25px');
+    testGridColumnsValues('gridAutoAndAutoOneSpanningFixedWidthAndMinWidth', '30px 30px');
+    testGridColumnsValues('gridAutoAndAutoOneSpanningFixedWidthAndHigherMinWidth', '35px 35px');
+  }, 'Check the interactions between width and min-width and auto tracks.');
+  test(() => {
+    testGridColumnsValues('gridAutoFixedMinWidthWithBorder', '50px');
+    testGridColumnsValues('gridAutoFixedMinWidthWithPadding', '56px');
+    testGridColumnsValues('gridAutoFixedMinWidthWithBorderAndPadding', '66px');
+    testGridColumnsValues('gridAutoAutoMinWidthWithBorder', '40px');
+    testGridColumnsValues('gridAutoAutoMinWidthWithPadding', '46px');
+    testGridColumnsValues('gridAutoAutoMinWidthWithBorderAndPadding', '56px');
+    testGridColumnsValues('gridAutoMaxContentMinWidthWithBorder', '90px');
+    testGridColumnsValues('gridAutoMaxContentMinWidthWithPadding', '96px');
+    testGridColumnsValues('gridAutoMaxContentMinWidthWithBorderAndPadding', '106px');
+  }, 'Check that borders and paddings are considering when computing min sizes.');
+  done();
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-rows-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-rows-001.html
new file mode 100644
index 0000000000..77e9c22294
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-rows-001.html
@@ -0,0 +1,278 @@
+<!DOCTYPE html>
+<title>CSS Grid: automatic minimum in 'auto' rows</title>
+<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm">
+<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#automatic-minimum-size">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=464287">
+<meta name="assert" content="Check that grid item's 'min-width' is honored when sizing 'auto' rows.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/fonts/ahem.css">
+
+<style>
+.grid { font: 10px/1 Ahem; }
+
+.minHeight10 { min-height: 10px; }
+.minHeight20 { min-height: 20px; }
+.minHeight30 { min-height: 30px; }
+.minHeight40 { min-height: 40px; }
+.minHeight50 { min-height: 50px; }
+.minHeight60 { min-height: 60px; }
+.minHeight70 { min-height: 70px; }
+.minHeight90 { min-height: 90px; }
+.minHeightMaxContent { min-height: max-content; }
+
+.height30 { height: 30px; }
+.height50 { height: 50px; }
+.height60 { height: 60px; }
+.height200 { height: 200px; }
+
+.border5 { border: 5px solid #abc; }
+.padding8 { padding: 8px 0px; }
+
+/* All these 4 cases are equivalent. We use them interchangeably. */
+.gridAuto { grid-template-rows: auto; }
+.gridMinMaxAutoAuto { grid-template-rows: minmax(auto, auto); }
+.gridMinMaxAutoMaxContent { grid-template-rows: minmax(auto, max-content); }
+.gridMinMaxMinContentAuto { grid-template-rows: minmax(min-content, auto); }
+
+/* All these 3 cases are equivalent. We use them interchangeably. */
+.gridAutoAndAuto { grid-template-rows: auto auto; }
+.gridAutoAndMinMaxAutoAuto { grid-template-rows: auto minmax(auto, auto); }
+.gridMinMaxAutoMaxContentAndAuto { grid-template-rows: minmax(auto, max-content) auto; }
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div class="grid gridAuto constrainedContainer" id="gridAuto">
+  <div class="firstRowFirstColumn minHeight40">XX<br>XXX<br>XX<br>XXX<br>XXXX</div>
+</div>
+
+<div class="grid gridAuto constrainedContainer" id="gridAutoItemSmallerThanMinSize">
+  <div class="firstRowFirstColumn minHeight40">XX</div>
+</div>
+
+<div class="grid gridMinMaxAutoAuto constrainedContainer" id="gridMinMaxAutoAuto">
+  <div class="firstRowFirstColumn minHeight40">XX<br>XX</div>
+</div>
+
+<div class="grid gridMinMaxAutoMaxContent constrainedContainer" id="gridMinMaxAutoMaxContent">
+  <div class="firstRowFirstColumn minHeight20 height30"></div>
+</div>
+
+<div class="grid gridMinMaxMinContentAuto constrainedContainer" id="gridMinMaxMinContentAuto">
+  <div class="firstRowFirstColumn minHeight60">X</div>
+</div>
+
+<div class="grid gridAuto constrainedContainer" id="gridAutoMultipleItems">
+  <div class="firstRowFirstColumn minHeight60">X<br>X</div>
+  <div class="firstRowSecondColumn minHeight20"">XXX<br>X<br>XX<br>XX</div>
+  <div class="firstRowAutoColumn minConstrainedContainer height50"></div>
+</div>
+
+<div class="grid gridMinMaxAutoAuto constrainedContainer" id="gridMinMaxAutoAutoMultipleItemsOneWithoutMinHeight">
+  <div class="firstRowFirstColumn height30">X<br>X</div>
+  <div class="firstRowSecondColumn minHeight50"></div>
+  <div class="firstRowAutoColumn minHeight20">XXXX<br>X<br>XX<br>XXX</div>
+</div>
+
+<div class="grid gridMinMaxAutoMaxContent constrainedContainer" id="gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinHeight">
+  <div class="firstRowFirstColumn minHeight30">X<br>X</div>
+  <div class="firstRowSecondColumn height60">XX</div>
+  <div class="firstRowAutoColumn minHeight20">XXX<br>XX<br>XXX<br>XX</div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAutoAndAuto" id="gridAutoAndAutoFixedHeightChildren">
+     <div class="firstRowFirstColumn height200"></div>
+     <div class="secondRowFirstColumn height50"></div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningOneNonSpannig">
+    <div class="firstRowFirstColumn">XX XX</div>
+    <div class="bothRowFirstColumn minHeight50">XXXXXX X XXX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningMultipleNonSpanning">
+    <div class="bothRowSecondColumn minHeight60">XX XX XX</div>
+    <div class="firstRowFirstColumn">X X X X</div>
+    <div class="firstRowFirstColumn">XX XX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning">
+    <div class="secondRowFirstColumn">X XXX XX</div>
+    <div class="bothRowSecondColumn minHeight70">XXX XXXX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoMultipleSpanning">
+    <div class="bothRowSecondColumn minHeight70">XX XX XX</div>
+    <div class="bothRowFirstColumn">XXXXX X XXXXX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridMinMaxAutoMaxContentAndAuto"
+      id="gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning">
+    <div class="secondRowFirstColumn minHeight60">X XXX XX</div>
+    <div class="bothRowSecondColumn minHeight90">XXXXX XXXXX</div>
+    <div class="firstRowFirstColumn">XX XX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridMinMaxAutoMaxContentAndAuto"
+      id="gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning">
+    <div class="bothRowSecondColumn">XX XX XX XX</div>
+    <div class="firstRowFirstColumn minHeight40">XXX</div>
+    <div class="bothRowFirstColumn minHeight90">X XX XXX</div>
+    <div class="secondRowFirstColumn">X XX X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoWithFixedHeightChild">
+    <div class="firstRowFirstColumn height60">XXX X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto height30" id="gridAutoWithFixedHeightChildAndMinHeight">
+    <div class="firstRowFirstColumn height60 minHeight40">XXX X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoWithFixedHeightChildAndHigherMinHeight">
+    <div class="firstRowFirstColumn height60 minHeight90">XXX X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedHeight">
+    <div class="bothRowFirstColumn height50">XX XXX XX XXX XX XXX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAutoAndAuto height30" id="gridAutoAndAutoOneSpanningFixedHeightAndMinHeight">
+    <div class="bothRowFirstColumn height60 minHeight50">XX XXX XX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedHeightAndHigherMinHeight">
+    <div class="bothRowFirstColumn height60 minHeight70">XX XXX XX X XX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoFixedMinHeightWithBorder">
+    <div class="firstRowFirstColumn minHeight40 border5">XXXXXX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoFixedMinHeightWithPadding">
+    <div class="firstRowFirstColumn minHeight40 padding8">XXXXXX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoFixedMinHeightWithBorderAndPadding">
+    <div class="firstRowFirstColumn minHeight40 border5 padding8">XXXXXX</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoAutoMinHeightWithBorder">
+    <div class="firstRowFirstColumn border5">XX<br>XXX X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoAutoMinHeightWithPadding">
+    <div class="firstRowFirstColumn padding8">XX<br>XXX X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoAutoMinHeightWithBorderAndPadding">
+    <div class="firstRowFirstColumn border5 padding8">XX<br>XXX X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoMaxContentMinHeightWithBorder">
+    <div class="firstRowFirstColumn minHeightMaxContent border5">XXX X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoMaxContentMinHeightWithPadding">
+    <div class="firstRowFirstColumn minHeightMaxContent padding8">XXX X</div>
+  </div>
+</div>
+
+<div class="constrainedContainer">
+  <div class="grid gridAuto" id="gridAutoMaxContentMinHeightWithBorderAndPadding">
+    <div class="firstRowFirstColumn border5 padding8 minHeightMaxContent">XXX X</div>
+  </div>
+</div>
+
+<script>
+function testGridRowsValues(id, computedRowValue)
+{
+  assert_equals(window.getComputedStyle(document.getElementById(id))
+      .getPropertyValue('grid-template-rows')", computedRowValue);
+}
+
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+  test(() => {
+    testGridRowsValues('gridAuto', '40px');
+    testGridRowsValues('gridAutoItemSmallerThanMinSize', '40px');
+    testGridRowsValues('gridMinMaxAutoAuto', '40px');
+    testGridRowsValues('gridMinMaxAutoMaxContent', '30px');
+    testGridRowsValues('gridMinMaxMinContentAuto', '60px');
+    testGridRowsValues('gridAutoMultipleItems', '60px');
+    testGridRowsValues('gridMinMaxAutoAutoMultipleItemsOneWithoutMinHeight', '50px');
+    testGridRowsValues('gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinHeight', '60px');
+    testGridRowsValues('gridAutoAndAutoFixedHeightChildren', '200px 50px');
+  }, 'Check that min-height is honored when sizing auto rows.');
+  test(() => {
+    testGridRowsValues('gridAutoAndAutoOneSpanningOneNonSpannig', '10px 40px');
+    testGridRowsValues('gridAutoAndAutoOneSpanningMultipleNonSpanning', '40px 20px');
+    testGridRowsValues('gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning', '40px 30px');
+    testGridRowsValues('gridAutoAndMinMaxAutoAutoMultipleSpanning', '35px 35px');
+    testGridRowsValues('gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning', '25px 65px');
+    testGridRowsValues('gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning', '50px 40px');
+  }, 'Check that min-height is honored when sizing auto rows and spanning grid items.');
+  test(() => {
+    testGridRowsValues('gridAutoWithFixedHeightChild', '60px');
+    testGridRowsValues('gridAutoWithFixedHeightChildAndMinHeight', '60px');
+    testGridRowsValues('gridAutoWithFixedHeightChildAndHigherMinHeight', '90px');
+    testGridRowsValues('gridAutoAndAutoOneSpanningFixedHeight', '25px 25px');
+    testGridRowsValues('gridAutoAndAutoOneSpanningFixedHeightAndMinHeight', '30px 30px');
+    testGridRowsValues('gridAutoAndAutoOneSpanningFixedHeightAndHigherMinHeight', '35px 35px');
+  }, 'Check the interactions between height and min-height and auto tracks.');
+  test(() => {
+    testGridRowsValues('gridAutoFixedMinHeightWithBorder', '50px');
+    testGridRowsValues('gridAutoFixedMinHeightWithPadding', '56px');
+    testGridRowsValues('gridAutoFixedMinHeightWithBorderAndPadding', '66px');
+    testGridRowsValues('gridAutoAutoMinHeightWithBorder', '40px');
+    testGridRowsValues('gridAutoAutoMinHeightWithPadding', '46px');
+    testGridRowsValues('gridAutoAutoMinHeightWithBorderAndPadding', '56px');
+    testGridRowsValues('gridAutoMaxContentMinHeightWithBorder', '30px');
+    testGridRowsValues('gridAutoMaxContentMinHeightWithPadding', '36px');
+    testGridRowsValues('gridAutoMaxContentMinHeightWithBorderAndPadding', '46px');
+  }, 'Check that borders and paddings are considering when computing min sizes.');
+  done();
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-container-percentage-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-container-percentage-001.html
new file mode 100644
index 0000000000..511e0cd99e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-container-percentage-001.html
@@ -0,0 +1,262 @@
+<!DOCTYPE html>
+<title>CSS Grid: indefinite grid container and percentage columns.</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-grid-template-columns-length-percentage"/>
+<meta name="assert" content="Checks that percentage columns are only indefinite during intrinsic size computation. Aftewards, they are properly resolved against the grid container intrinsic sizes."/>
+<link rel="issue" href="https://crbug.com/616716"/>
+<link rel="stylesheet" href="/css/support/grid.css"/>
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css"/>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/>
+<style>
+.wrapper {
+    position: relative;
+    clear: both;
+}
+
+.grid {
+    font: 10px/1 Ahem;
+}
+
+.float {
+    float: left;
+}
+
+.abspos {
+    position: absolute;
+}
+
+.fixedSize {
+    width: 200px;
+    height: 200px;
+}
+
+.oneColumn100 {
+    grid-template-columns: 100%;
+}
+
+.oneColumn50 {
+    grid-template-columns: 50%;
+}
+
+.twoColumns {
+    grid-template-columns: 50% 100px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+    setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div id="log"></div>
+<div class="wrapper">
+    <div class="grid float oneColumn100" data-expected-width="40" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid abspos oneColumn100" data-expected-width="40" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid max-content oneColumn100" data-expected-width="40" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid fit-content oneColumn100" data-expected-width="40" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid min-content oneColumn100" data-expected-width="20" data-expected-height="20">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid float oneColumn50" data-expected-width="40" data-expected-height="20">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid abspos oneColumn50" data-expected-width="40" data-expected-height="20">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid max-content oneColumn50" data-expected-width="40" data-expected-height="20">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid fit-content oneColumn50" data-expected-width="40" data-expected-height="20">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid min-content oneColumn50" data-expected-width="20" data-expected-height="20">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="20">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid float twoColumns" data-expected-width="140" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="10">
+            XX X
+        </div>
+        <div class="firstRowSecondColumn"
+            data-offset-x="70" data-offset-y="0" data-expected-width="100" data-expected-height="10">
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid abspos twoColumns" data-expected-width="140" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="10">
+            XX X
+        </div>
+        <div class="firstRowSecondColumn"
+            data-offset-x="70" data-offset-y="0" data-expected-width="100" data-expected-height="10">
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid max-content twoColumns" data-expected-width="140" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="10">
+            XX X
+        </div>
+        <div class="firstRowSecondColumn"
+            data-offset-x="70" data-offset-y="0" data-expected-width="100" data-expected-height="10">
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid fit-content twoColumns" data-expected-width="140" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="10">
+            XX X
+        </div>
+        <div class="firstRowSecondColumn"
+            data-offset-x="70" data-offset-y="0" data-expected-width="100" data-expected-height="10">
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid min-content twoColumns" data-expected-width="120" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10">
+            XX X
+        </div>
+        <div class="firstRowSecondColumn"
+            data-offset-x="60" data-offset-y="0" data-expected-width="100" data-expected-height="10">
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid float twoColumns" data-expected-width="100" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10">
+        </div>
+        <div class="firstRowSecondColumn"
+            data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid abspos twoColumns" data-expected-width="100" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10">
+        </div>
+        <div class="firstRowSecondColumn"
+            data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid max-content twoColumns" data-expected-width="100" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10">
+        </div>
+        <div class="firstRowSecondColumn"
+            data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid min-content twoColumns" data-expected-width="100" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10">
+        </div>
+        <div class="firstRowSecondColumn"
+            data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid fit-content twoColumns" data-expected-width="100" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10">
+        </div>
+        <div class="firstRowSecondColumn"
+            data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10">
+            XX X
+        </div>
+    </div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-container-percentage-002.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-container-percentage-002.html
new file mode 100644
index 0000000000..34a52937a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-container-percentage-002.html
@@ -0,0 +1,305 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Grid: indefinite grid container and percentage rows.</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-length-percentage"/>
+<meta name="assert" content="This test checks that percentage rows behave as 'auto' if the height of the grid container is indefinite to compute the grid container intrinsic height, but are afterwards resolved against that size."/>
+<link rel="issue" href="https://crbug.com/616716"/>
+<link rel="stylesheet" href="/css/support/grid.css"/>
+<link rel="stylesheet" href="/css/support/height-keyword-classes.css"/>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/>
+<style>
+.wrapper {
+    position: relative;
+    clear: both;
+}
+
+.grid {
+    font: 10px/1 Ahem;
+    width: fit-content;
+}
+
+.abspos {
+    position: absolute;
+}
+
+.fixedSize {
+    width: 200px;
+    height: 200px;
+}
+
+.oneRow100 {
+    grid-template-rows: 100%;
+}
+
+.oneRow50 {
+    grid-template-rows: 50%;
+}
+
+.twoRows {
+    grid-template-rows: 100px 50%;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+    setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div id="log"></div>
+<div class="wrapper">
+    <div class="grid oneRow100" data-expected-width="40" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid fixedSize oneRow100" data-expected-width="200" data-expected-height="200">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="200">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid abspos oneRow100" data-expected-width="40" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid max-content oneRow100" data-expected-width="40" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid fit-content oneRow100" data-expected-width="40" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid min-content oneRow100" data-expected-width="40" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid oneRow50" data-expected-width="40" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid fixedSize oneRow50" data-expected-width="200" data-expected-height="200">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid abspos oneRow50" data-expected-width="40" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid max-content oneRow50" data-expected-width="40" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid fit-content oneRow50" data-expected-width="40" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid min-content oneRow50" data-expected-width="40" data-expected-height="10">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid twoRows" data-expected-width="40" data-expected-height="110">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
+        </div>
+        <div class="secondRowFirstColumn"
+            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid fixedSize twoRows" data-expected-width="200" data-expected-height="200">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
+        </div>
+        <div class="secondRowFirstColumn"
+            data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid abspos twoRows" data-expected-width="40" data-expected-height="110">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
+        </div>
+        <div class="secondRowFirstColumn"
+            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid max-content twoRows" data-expected-width="40" data-expected-height="110">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
+        </div>
+        <div class="secondRowFirstColumn"
+            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid fit-content twoRows" data-expected-width="40" data-expected-height="110">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
+        </div>
+        <div class="secondRowFirstColumn"
+            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid min-content twoRows" data-expected-width="40" data-expected-height="110">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
+        </div>
+        <div class="secondRowFirstColumn"
+            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55">
+            XX X
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid twoRows" data-expected-width="40" data-expected-height="100">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
+            XX X
+        </div>
+        <div class="secondRowFirstColumn"
+            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50">
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid fixedSize twoRows" data-expected-width="200" data-expected-height="200">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
+            XX X
+        </div>
+        <div class="secondRowFirstColumn"
+            data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100">
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid abspos twoRows" data-expected-width="40" data-expected-height="100">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
+            XX X
+        </div>
+        <div class="secondRowFirstColumn"
+            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50">
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid max-content twoRows" data-expected-width="40" data-expected-height="100">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
+            XX X
+        </div>
+        <div class="secondRowFirstColumn"
+            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50">
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid fit-content twoRows" data-expected-width="40" data-expected-height="100">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
+            XX X
+        </div>
+        <div class="secondRowFirstColumn"
+            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50">
+        </div>
+    </div>
+</div>
+
+<div class="wrapper">
+    <div class="grid min-content twoRows" data-expected-width="40" data-expected-height="100">
+        <div class="firstRowFirstColumn"
+            data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
+            XX X
+        </div>
+        <div class="secondRowFirstColumn"
+            data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50">
+        </div>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-001.html
new file mode 100644
index 0000000000..907ef68668
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-001.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution and the track sizing algorithm</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-content-space-between">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="flags" content="ahem">
+<meta name="assert" content="Content Distribution on the inline-axis may affect to the row track's size.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  display: inline-grid;
+  background: grey;
+  grid-template-columns: 50px 50px;
+  font: 20px/1 Ahem;
+  width: 200px;
+}
+
+.item {
+  grid-column: span 2;
+  background: green;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+    <div class="grid justifyContentSpaceBetween" data-expected-width="200" data-expected-height="40">
+        <div class="item" data-expected-width="200" data-expected-height="40">XXX XX X XX X XXX</div>
+    </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-002.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-002.html
new file mode 100644
index 0000000000..a88d0a5025
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-002.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution and the track sizing algorithm</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-content-space-between">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="flags" content="ahem">
+<meta name="assert" content="Content Distribution on the block-axis may affect to the column track's size.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  display: inline-grid;
+  background: grey;
+  grid-template-rows: 50px 50px;
+  font: 20px/1 Ahem;
+  height: 200px;
+}
+
+.item {
+  grid-row: span 2;
+  background: green;
+  writing-mode: vertical-lr;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<!-- Heuristic for estimating row-size for orthogonal items should
+also consider Content Alignment, so that grid container width is 40px.
+https://github.com/w3c/csswg-drafts/issues/2697 -->
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+    <div class="grid justifyContentStart alignContentSpaceBetween" data-expected-width="40" data-expected-height="200">
+        <div class="item" data-expected-width="40" data-expected-height="200">XXX XX X XX X XXX</div>
+    </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-003.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-003.html
new file mode 100644
index 0000000000..b3c692c852
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-003.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution and the track sizing algorithm</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-content-space-around">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="flags" content="ahem">
+<meta name="assert" content="Content Distribution offset doesn't account for tracks with non-spanning items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  display: inline-grid;
+  background: grey;
+  grid-template-columns: 100px;
+  font: 20px/1 Ahem;
+  width: 200px;
+}
+.item1 {
+  background: green;
+  grid-column: 1;
+  grid-row: 1;
+}
+.item2 {
+  background: blue;
+  grid-column: 1;
+  grid-row: 2;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+    <div class="grid justifyContentSpaceAround" data-expected-width="200" data-expected-height="60">
+        <div class="item1" data-expected-width="100" data-expected-height="40">XXXX XXX</div>
+        <div class="item2" data-expected-width="100" data-expected-height="20">XXX</div>
+    </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-004.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-004.html
new file mode 100644
index 0000000000..045e080a4e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-004.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Content Distribution and the track sizing algorithm</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align/#content-distribution">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-content-space-between">
+<link rel="stylesheet" href="../../support/alignment.css">
+<meta name="flags" content="ahem">
+<meta name="assert" content="Content Distribution offset doesn't account for relative sized tracks with non-spanning items.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  display: inline-grid;
+  background: grey;
+  grid-template-columns: 50%;
+  font: 20px/1 Ahem;
+}
+
+.item1 {
+  background: green;
+  grid-column: 1;
+  grid-row: 1;
+}
+.item2 {
+  background: blue;
+  grid-column: 2;
+  grid-row: 1;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+    <div class="grid justifyContentSpaceBetween" data-expected-width="220" data-expected-height="40">
+        <div class="item1" data-expected-width="110" data-expected-height="40">XXXX XXX</div>
+        <div class="item2" data-expected-width="60" data-expected-height="40">XXX</div>
+    </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-find-fr-size-gutters-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-find-fr-size-gutters-001.html
new file mode 100644
index 0000000000..150878b80a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-find-fr-size-gutters-001.html
@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid Track Sizing Algorithm Flexible Tracks and Gutters</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#gutters">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-find-fr-size">
+<meta name="assert" content="This test checks that the size of flexible tracks is properly computed when you have gaps (with and without spanning items).">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: grid;
+  grid-gap: 10px 20px;
+  font: 10px/1 Ahem;
+  margin: 50px;
+}
+
+.fixedSize {
+  width: 200px;
+  height: 100px;
+}
+
+.contentBasedSize {
+  float: left;
+  height: auto;
+}
+
+.grid div:nth-child(1) { background: magenta; }
+.grid div:nth-child(2) { background: cyan; }
+.grid div:nth-child(3) { background: yellow; }
+.grid div:nth-child(4) { background: lime; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<div class="grid fixedSize" style="grid: 50px 1fr / 100px 1fr;">
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+  <div data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50"></div>
+  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="40"></div>
+  <div data-offset-x="120" data-offset-y="60" data-expected-width="80" data-expected-height="40"></div>
+</div>
+
+<div class="grid fixedSize" style="grid: 50px 1fr / 100px 1fr;">
+  <div style="grid-column: span 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
+  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="40"></div>
+  <div data-offset-x="120" data-offset-y="60" data-expected-width="80" data-expected-height="40"></div>
+</div>
+
+<div class="grid fixedSize" style="grid: 50px 1fr / 100px 1fr;">
+  <div style="grid-column: 1; grid-row: 1;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+  <div style="grid-column: 2; grid-row: 1;"
+    data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50"></div>
+  <div style="grid-column: span 2;"
+    data-offset-x="0" data-offset-y="60" data-expected-width="200" data-expected-height="40"></div>
+</div>
+
+<div class="grid fixedSize" style="grid: 50px 1fr / 100px 1fr;">
+  <div style="grid-row: span 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
+  <div data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50"></div>
+  <div data-offset-x="120" data-offset-y="60" data-expected-width="80" data-expected-height="40"></div>
+</div>
+
+<div class="grid fixedSize" style="grid: 50px 1fr / 100px 1fr;">
+  <div style="grid-column: 1; grid-row: 1;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+  <div style="grid-column: 1; grid-row: 2;"
+    data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="40"></div>
+  <div style="grid-row: span 2;"
+    data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="100"></div>
+</div>
+
+<div class="grid fixedSize" style="grid: 50px 1fr / 100px 1fr;">
+  <div style="grid-row: span 2; grid-column: span 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+</div>
+
+<div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;">
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+  <div data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50">XXXXXXXX</div>
+  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="40">X<br>X<br>X<br>X</div>
+  <div data-offset-x="120" data-offset-y="60" data-expected-width="80" data-expected-height="40"></div>
+</div>
+
+<div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;">
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+  <div data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50"></div>
+  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="40"></div>
+  <div data-offset-x="120" data-offset-y="60" data-expected-width="80" data-expected-height="40">XXXXXXXX<br>X<br>X<br>X</div>
+</div>
+
+<div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;">
+  <div style="grid-column: span 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
+  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="40">X<br>X<br>X<br>X</div>
+  <div data-offset-x="120" data-offset-y="60" data-expected-width="80" data-expected-height="40">XXXXXXXX</div>
+</div>
+
+<div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;">
+  <div style="grid-column: span 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50">XXXXXXXXXXXXXXXXXXXX</div>
+  <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="40">X<br>X<br>X<br>X</div>
+  <div data-offset-x="120" data-offset-y="60" data-expected-width="80" data-expected-height="40"></div>
+</div>
+
+<div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;">
+  <div style="grid-column: 1; grid-row: 1;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+  <div style="grid-column: 2; grid-row: 1;"
+    data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50">XXXXXXXX</div>
+  <div style="grid-column: span 2;"
+    data-offset-x="0" data-offset-y="60" data-expected-width="200" data-expected-height="40">X<br>X<br>X<br>X</div>
+</div>
+
+<div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;">
+  <div style="grid-column: 1; grid-row: 1;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+  <div style="grid-column: 2; grid-row: 1;"
+    data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50"></div>
+  <div style="grid-column: span 2;"
+    data-offset-x="0" data-offset-y="60" data-expected-width="200" data-expected-height="40">XXXXXXXXXXXXXXXXXXXX<br>X<br>X<br>X</div>
+</div>
+
+<div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;">
+  <div style="grid-row: span 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
+  <div data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50">XXXXXXXX</div>
+  <div data-offset-x="120" data-offset-y="60" data-expected-width="80" data-expected-height="40">X<br>X<br>X<br>X</div>
+</div>
+
+<div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;">
+  <div style="grid-row: span 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100">X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X</div>
+  <div data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50">XXXXXXXX</div>
+  <div data-offset-x="120" data-offset-y="60" data-expected-width="80" data-expected-height="40"></div>
+</div>
+
+<div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;">
+  <div style="grid-column: 1; grid-row: 1;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+  <div style="grid-column: 1; grid-row: 2;"
+    data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="40">X<br>X<br>X<br>X</div>
+  <div style="grid-row: span 2;"
+    data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="100">XXXXXXXX</div>
+</div>
+
+<div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;">
+  <div style="grid-column: 1; grid-row: 1;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+  <div style="grid-column: 1; grid-row: 2;"
+    data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="40"></div>
+  <div style="grid-row: span 2;"
+    data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="100">XXXXXXXX<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X</div>
+</div>
+
+<div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;">
+  <div style="grid-row: span 2; grid-column: span 2;"
+       data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
+XXXXXXXXXXXXXXXXXXXX<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-find-fr-size-gutters-002.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-find-fr-size-gutters-002.html
new file mode 100644
index 0000000000..f3c2087e27
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-find-fr-size-gutters-002.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid Track Sizing Algorithm Flexible Tracks and Gutters</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#gutters">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-find-fr-size">
+<meta name="assert" content="This test checks that the size of flexible tracks is properly computed when the grid container is content based and you have items spanning flexbile tracks that are smaller than the gutter sizes.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-gap: 50px 100px;
+  font: 10px/1 Ahem;
+  margin: 50px;
+}
+
+.grid div:nth-child(1) { background: magenta; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<div id="log"></div>
+
+<div class="grid" style="grid: 50px 1fr / 100px 1fr;">
+  <div style="grid-column: span 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50">X</div>
+</div>
+
+<div class="grid" style="grid: 50px 1fr / 100px 1fr;">
+  <div style="grid-row: span 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100">X</div>
+</div>
+
+<div class="grid" style="grid: 50px 1fr / 100px 1fr;">
+  <div style="grid-column: span 2; grid-row: span 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">X</div>
+</div>
+
+<div class="grid" style="grid: 0px 1fr / 0px 1fr;">
+  <div style="grid-column: span 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0">X</div>
+</div>
+
+<div class="grid" style="grid: 0px 1fr / 0px 1fr;">
+  <div style="grid-row: span 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="0" data-expected-height="50">X</div>
+</div>
+
+<div class="grid" style="grid: 0px 1fr / 0px 1fr;">
+  <div style="grid-column: span 2; grid-row: span 2;"
+    data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-find-fr-size-restart-algorithm.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-find-fr-size-restart-algorithm.html
new file mode 100644
index 0000000000..fc2ebeb103
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-find-fr-size-restart-algorithm.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Restart the algorithm to find the size of an 'fr'</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-find-fr-size" title="12.7.1. Find the Size of an 'fr'">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="If the product of the hypothetical fr size and a flexible track’s flex factor is less than the track’s base size, restart this algorithm treating all such tracks as inflexible.">
+<style>
+.grid {
+  width: 100px;
+  height: 100px;
+  background: red;
+
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: repeat(2, 0fr 1fr);
+}
+
+div > div { background: green }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="grid">
+  <div></div>
+  <div style="width: 30px"></div>
+  <div style="width: 50px"></div>
+  <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-fit-content-percentage.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-fit-content-percentage.html
new file mode 100644
index 0000000000..ab55502487
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-fit-content-percentage.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: indefinite percentage in fit-content()</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizes" title="7.2.1. Track Sizes">
+<meta name="assert" content="Checks that an indefinite percentage in fit-content lets the grid container grow enough to contain the max-content contribution of its grid items.">
+<style>
+.container {
+  width: 200px;
+  margin-top: 10px;
+}
+.grid {
+  display: inline-grid;
+  background: blue;
+}
+.item {
+  background: orange;
+}
+.item::before, .item::after {
+  content: '';
+  float: left;
+  width: 50px;
+  height: 50px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id="log"></div>
+
+<script>
+"use strict";
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+const minContent = 50;
+const maxContent = 100;
+for (const percentage of [0, 50, 75, 100, 150]) {
+  const container = document.createElement("div");
+  container.className = "container";
+  document.body.appendChild(container);
+  const grid = document.createElement("div");
+  grid.className = "grid";
+  grid.style.gridTemplateColumns = `fit-content(${percentage}%)`;
+  container.appendChild(grid);
+  const item = document.createElement("div");
+  item.className = "item";
+  grid.appendChild(item);
+  test(function() {
+    const colSize = clamp(percentage * maxContent / 100, minContent, maxContent);
+    const height = colSize < maxContent ? maxContent : minContent;
+    assert_equals(item.offsetWidth, colSize, "Grid item width");
+    assert_equals(item.offsetHeight, height, "Grid item height");
+    assert_equals(grid.offsetWidth, maxContent, "Grid container width");
+    assert_equals(grid.offsetHeight, height, "Grid container height");
+    assert_equals(getComputedStyle(grid).gridTemplateColumns, colSize + "px",
+                  "Grid column size");
+  }, `fit-content(${percentage}%)`);
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-flex-track-intrinsic-sizes-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-flex-track-intrinsic-sizes-001.html
new file mode 100644
index 0000000000..f983a4b2c4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-flex-track-intrinsic-sizes-001.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Intrinsic contribution of an item with flex tracks</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-spanning-items" title="11.5.3 Increase sizes to accommodate spanning items crossing content-sized tracks">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-spanning-flex-items" title="11.5.4 Increase sizes to accommodate spanning items crossing flexible tracks">
+<meta name="assert" content="This test checks that the intrinsic contribution of a single grid item is distributed correctly among the tracks it spans when flexible tracks are involved.">
+<style>
+#grid {
+  display: grid;
+  width: 50px;
+  height: 50px;
+  border: solid;
+}
+#item {
+  width: 100px;
+  height: 100px;
+  background: blue;
+}
+</style>
+
+<div id="log"></div>
+
+<div id="grid">
+  <div id="item"></div>
+</div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../grid-definition/support/testing-utils.js"></script>
+<script>
+const item = document.getElementById("item");
+function checkTrackSizes(span, trackList, expected) {
+  item.style.gridColumn = item.style.gridRow = `span ${span}`;
+  TestingUtils.testGridTemplateColumnsRows("grid", trackList, trackList, expected, expected);
+}
+
+// Item spanning an intrinsic flexible track
+checkTrackSizes(1, "0fr", "100px");
+checkTrackSizes(1, "1fr", "100px");
+checkTrackSizes(1, "2fr", "100px");
+
+// Item spanning a fixed flexible track
+checkTrackSizes(1, "minmax(0, 0fr)", "0px");
+checkTrackSizes(1, "minmax(0, .5fr)", "25px");
+checkTrackSizes(1, "minmax(0, 1fr)", "50px");
+checkTrackSizes(1, "minmax(0, 2fr)", "50px");
+checkTrackSizes(1, "minmax(75px, 1fr)", "75px");
+
+// Item spanning 2 intrinsic flexible tracks
+checkTrackSizes(2, "0fr 0fr", "50px 50px");
+checkTrackSizes(2, "0fr 1fr", "0px 100px");
+checkTrackSizes(2, "1fr 0fr", "100px 0px");
+checkTrackSizes(2, "1fr 1fr", "50px 50px");
+checkTrackSizes(2, "1fr 3fr", "25px 75px");
+checkTrackSizes(2, "0fr 0fr 1fr", "50px 50px 0px");
+
+// Item spanning 2 fixed flexible tracks
+checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 0fr)", "0px 0px");
+checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 1fr)", "0px 50px");
+checkTrackSizes(2, "minmax(15px, 0fr) minmax(0, 1fr)", "15px 35px");
+checkTrackSizes(2, "minmax(20px, 1fr) minmax(0, 1fr)", "25px 25px");
+checkTrackSizes(2, "minmax(30px, 1fr) minmax(0, 1fr)", "30px 20px");
+
+// Item spanning an intrinsic flexible track and a fixed flexible track
+checkTrackSizes(2, "0fr minmax(0, 0fr)", "100px 0px");
+checkTrackSizes(2, "0fr minmax(0, 1fr)", "100px 0px");
+checkTrackSizes(2, "1fr minmax(0, 1fr)", "100px 0px");
+checkTrackSizes(2, "1fr minmax(25px, 1fr)", "75px 25px");
+
+// Item spanning an intrinsic flexible track and an intrinsic non-flexible track
+checkTrackSizes(2, "0fr auto", "100px 0px");
+checkTrackSizes(2, "1fr auto", "100px 0px");
+checkTrackSizes(2, "1fr max-content", "100px 0px");
+
+// Item spanning a fixed flexible track and an intrinsic non-flexible track
+checkTrackSizes(2, "minmax(0, 0fr) auto", "0px 50px");
+checkTrackSizes(2, "minmax(0, 1fr) auto", "50px 0px");
+checkTrackSizes(2, "minmax(25px, 0fr) auto", "25px 25px");
+checkTrackSizes(2, "minmax(25px, 1fr) auto", "50px 0px");
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-flex-track-intrinsic-sizes-002.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-flex-track-intrinsic-sizes-002.html
new file mode 100644
index 0000000000..a8506e67ef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-flex-track-intrinsic-sizes-002.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Intrinsic contributions of 2 items with flex tracks</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-spanning-items" title="11.5.3 Increase sizes to accommodate spanning items crossing content-sized tracks">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-spanning-flex-items" title="11.5.4 Increase sizes to accommodate spanning items crossing flexible tracks">
+<meta name="assert" content="This test checks that the intrinsic contributions of 2 items are distributed in the right order when flexible tracks are involved.">
+<style>
+#grid {
+  display: grid;
+  grid-template-areas: ". . . ."
+                       ". a . ."
+                       ". . . ."
+                       ". . . b";
+  width: 50px;
+  height: 50px;
+  border: solid;
+}
+#item1 {
+  grid-column: 1 / a;
+  grid-row: 1 / a;
+  width: 60px;
+  height: 60px;
+  background: blue;
+}
+#item2 {
+  grid-column: a / b;
+  grid-row: a / b;
+  width: 150px;
+  height: 150px;
+  background: yellow;
+}
+</style>
+
+<div id="log"></div>
+
+<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+</div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../grid-definition/support/testing-utils.js"></script>
+<script>
+function checkTrackSizes(trackList, expected) {
+  TestingUtils.testGridTemplateColumnsRows("grid", trackList, trackList, expected, expected);
+}
+
+// We have a symmetric grid with 2 items and 4 tracks, as follows:
+// ╔═╤═╗─┬─┐
+// ╟─╔═╬═╪═╗
+// ╚═╬═╝─┼─╢
+// ├─╫─┼─┼─╢
+// └─╚═╧═╧═╝
+
+// The 1st item spans a flexible track, therefore its contribution (60px) is distributed last.
+// The 2nd item distributes its contribution (150px) among the 2nd, 3rd and 4th tracks.
+// Then the 1st item only needs to distribute 60px-50px=10px to the 1st track.
+checkTrackSizes("1fr auto auto auto", "10px 50px 50px 50px");
+
+// Now the 1st item still spans a flexible track, but it's not intrinsic.
+// Therefore, no track receives its intrinsic contribution.
+checkTrackSizes("minmax(0, 1fr) auto auto auto", "0px 50px 50px 50px");
+
+// Now both items span a flexible track, so their contributions are handled simultaneously,
+// even if the 1st item still spans less tracks than the 2nd one.
+// Therefore the distribution is as follows:
+//  - 1st track: 60px/2 = 30px
+//  - 2nd track: max(60px/2, 150px/3) = 50px
+//  - 3rd track: 150px/3 = 50px
+//  - 4th track: 150px/3 = 50px
+checkTrackSizes("1fr 1fr 1fr 1fr", "30px 50px 50px 50px");
+
+// Like the previous case, but with different flex ratios:
+//  - 1st track: 60px/2 = 30px
+//  - 2nd track: max(60px/2, 150px/6) = 30px
+//  - 3rd track: 150px/6 = 25px
+//  - 4th track: 150px*4/6 = 100px
+checkTrackSizes("1fr 1fr 1fr 4fr", "30px 30px 25px 100px");
+
+// Change the grid as follows:
+// ╔═╦═╤═╗
+// ╠═╝─┼─╢
+// ╟─┼─┼─╢
+// ╚═╧═╧═╝
+document.getElementById("grid").style.gridTemplateAreas = `
+  "a . ."
+  ". . ."
+  ". . b"`;
+
+// Now the 1st item has a span of 1, so usually we would handle its contribution
+// at the very beginning, before items that span multiple tracks.
+// But not if its track is flexible, then it's still handled at the end,
+// simultaneously with other items that span some flexible track.
+//  - 1nd track: max(60px, 150px/3) = 60px
+//  - 2nd track: 150px/3 = 50px
+//  - 3rd track: 150px/3 = 50px
+checkTrackSizes("1fr 1fr 1fr", "60px 50px 50px");
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-flex-track-intrinsic-sizes-003.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-flex-track-intrinsic-sizes-003.html
new file mode 100644
index 0000000000..13c968e915
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-flex-track-intrinsic-sizes-003.html
@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Intrinsic contribution of an item with flex tracks</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="author" title="Tab Atkins-Bittner" href="mailto:jackalmage@gmail.com">
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-spanning-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-spanning-flex-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#min-size-auto">
+<meta name="assert" content="This test checks that the intrinsic contribution of a single grid item is distributed correctly among the tracks it spans when flexible tracks are involved, and the item's size is determined by its children rather than explicitly.">
+<style>
+#grid {
+  display: grid;
+  width: 60px;
+  height: 60px;
+  border: solid;
+}
+#item {
+  background: blue;
+}
+#item::before {
+  content: "";
+  display: block;
+  width: 100px;
+  height: 100px;
+}
+</style>
+
+<div id="log"></div>
+
+<div id="grid">
+  <div id="item"></div>
+</div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../grid-definition/support/testing-utils.js"></script>
+<script>
+const item = document.getElementById("item");
+let testset = "unlabeled";
+function checkTrackSizes(span, trackList, expected) {
+  item.style.gridColumn = item.style.gridRow = `span ${span}`;
+  TestingUtils.testGridTemplateColumnsRows("grid", trackList, trackList, expected, expected, testset);
+}
+
+// First check for distributing auto minimum ///////////////////////////////////
+testset = "auto min item";
+
+// Item spanning an auto flexible track
+checkTrackSizes(1, "0fr", "100px");
+checkTrackSizes(1, "1fr", "100px");
+checkTrackSizes(1, "2fr", "100px");
+
+// Item spanning a fixed flexible track
+checkTrackSizes(1, "minmax(0, 0fr)", "0px");
+checkTrackSizes(1, "minmax(0, .5fr)", "30px");
+checkTrackSizes(1, "minmax(0, 1fr)", "60px");
+checkTrackSizes(1, "minmax(0, 2fr)", "60px");
+checkTrackSizes(1, "minmax(75px, 1fr)", "75px");
+
+// Item spanning 2 auto flexible tracks
+checkTrackSizes(2, "0fr 0fr", "0px 0px");
+checkTrackSizes(2, "0fr 1fr", "0px 60px");
+checkTrackSizes(2, "1fr 0fr", "60px 0px");
+checkTrackSizes(2, "1fr 1fr", "30px 30px");
+checkTrackSizes(2, "1fr 3fr", "15px 45px");
+checkTrackSizes(2, "0fr 0fr 1fr", "0px 0px 60px");
+
+// Item spanning 2 fixed flexible tracks
+checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 0fr)", "0px 0px");
+checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 1fr)", "0px 60px");
+checkTrackSizes(2, "minmax(15px, 0fr) minmax(0, 1fr)", "15px 45px");
+checkTrackSizes(2, "minmax(20px, 1fr) minmax(0, 1fr)", "30px 30px");
+checkTrackSizes(2, "minmax(40px, 1fr) minmax(0, 1fr)", "40px 20px");
+
+// Item spanning an auto flexible track and a fixed flexible track
+checkTrackSizes(2, "0fr minmax(0, 0fr)", "0px 0px");
+checkTrackSizes(2, "0fr minmax(0, 1fr)", "0px 60px");
+checkTrackSizes(2, "1fr minmax(0, 1fr)", "30px 30px");
+checkTrackSizes(2, "1fr minmax(25px, 1fr)", "30px 30px");
+
+// Item spanning an auto flexible track and an intrinsic non-flexible track
+checkTrackSizes(2, "0fr min-content", "0px 0px");
+checkTrackSizes(2, "0fr auto", "0px 60px");
+checkTrackSizes(2, "0.5fr auto", "30px 30px");
+checkTrackSizes(2, "1fr auto", "60px 0px");
+checkTrackSizes(2, "1fr max-content", "60px 0px");
+checkTrackSizes(2, "1fr min-content", "60px 0px");
+
+// Item spanning a fixed flexible track and an intrinsic non-flexible track
+checkTrackSizes(2, "minmax(0, 0fr) min-content", "0px 0px");
+checkTrackSizes(2, "minmax(0, 0fr) auto", "0px 60px");
+checkTrackSizes(2, "minmax(0, 1fr) auto", "60px 0px");
+checkTrackSizes(2, "minmax(25px, 0fr) auto", "25px 35px");
+checkTrackSizes(2, "minmax(25px, 1fr) auto", "60px 0px");
+
+// Now check for distributing min content //////////////////////////////////////
+item.style.minWidth  = "min-content"; // min-content = 100px > grid
+item.style.minHeight = "100px"; // min-content doesn't resolve in block axis (yet?)
+testset = "min-content min item";
+
+// Item spanning an auto flexible track
+checkTrackSizes(1, "0fr", "100px");
+checkTrackSizes(1, "1fr", "100px");
+checkTrackSizes(1, "2fr", "100px");
+
+// Item spanning a fixed flexible track
+checkTrackSizes(1, "minmax(0, 0fr)", "0px");
+checkTrackSizes(1, "minmax(0, .5fr)", "30px");
+checkTrackSizes(1, "minmax(0, 1fr)", "60px");
+checkTrackSizes(1, "minmax(0, 2fr)", "60px");
+checkTrackSizes(1, "minmax(75px, 1fr)", "75px");
+
+// Item spanning 2 auto flexible tracks
+checkTrackSizes(2, "0fr 0fr", "50px 50px");
+checkTrackSizes(2, "0fr 1fr", "0px 100px");
+checkTrackSizes(2, "1fr 0fr", "100px 0px");
+checkTrackSizes(2, "1fr 1fr", "50px 50px");
+checkTrackSizes(2, "1fr 3fr", "25px 75px");
+checkTrackSizes(2, "0fr 0fr 1fr", "50px 50px 0px");
+
+// Item spanning 2 fixed flexible tracks
+checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 0fr)", "0px 0px");
+checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 1fr)", "0px 60px");
+checkTrackSizes(2, "minmax(15px, 0fr) minmax(0, 1fr)", "15px 45px");
+checkTrackSizes(2, "minmax(20px, 1fr) minmax(0, 1fr)", "30px 30px");
+checkTrackSizes(2, "minmax(40px, 1fr) minmax(0, 1fr)", "40px 20px");
+
+// Item spanning an auto flexible track and a fixed flexible track
+checkTrackSizes(2, "0fr minmax(0, 0fr)", "100px 0px");
+checkTrackSizes(2, "0fr minmax(0, 1fr)", "100px 0px");
+checkTrackSizes(2, "1fr minmax(0, 1fr)", "100px 0px");
+checkTrackSizes(2, "1fr minmax(25px, 1fr)", "75px 25px");
+
+// Item spanning an auto flexible track and an intrinsic non-flexible track
+checkTrackSizes(2, "0fr min-content", "100px 0px");
+checkTrackSizes(2, "0fr auto", "100px 0px");
+checkTrackSizes(2, "0.5fr auto", "100px 0px");
+checkTrackSizes(2, "1fr auto", "100px 0px");
+checkTrackSizes(2, "1fr max-content", "100px 0px");
+checkTrackSizes(2, "1fr min-content", "100px 0px");
+
+// Item spanning a fixed flexible track and an intrinsic non-flexible track
+checkTrackSizes(2, "minmax(0, 0fr) min-content", "0px 0px");
+checkTrackSizes(2, "minmax(0, 0fr) auto", "0px 60px");
+checkTrackSizes(2, "minmax(0, 1fr) auto", "60px 0px");
+checkTrackSizes(2, "minmax(25px, 0fr) auto", "25px 35px");
+checkTrackSizes(2, "minmax(25px, 1fr) auto", "60px 0px");
+
+// Now check for distributing fixed min ////////////////////////////////////////
+item.style.minWidth = "50px"; // minimum < grid < min-content
+item.style.minHeight = "50px"; // minimum < grid < min-content
+testset = "50px min item";
+
+// Item spanning an auto flexible track
+checkTrackSizes(1, "0fr", "50px");
+checkTrackSizes(1, "1fr", "60px");
+checkTrackSizes(1, "2fr", "60px");
+
+// Item spanning a fixed flexible track
+checkTrackSizes(1, "minmax(0, 0fr)", "0px");
+checkTrackSizes(1, "minmax(0, .5fr)", "30px");
+checkTrackSizes(1, "minmax(0, 1fr)", "60px");
+checkTrackSizes(1, "minmax(0, 2fr)", "60px");
+checkTrackSizes(1, "minmax(75px, 1fr)", "75px");
+
+// Item spanning 2 auto flexible tracks
+checkTrackSizes(2, "0fr 0fr", "25px 25px");
+checkTrackSizes(2, "0fr 1fr", "0px 60px");
+checkTrackSizes(2, "1fr 0fr", "60px 0px");
+checkTrackSizes(2, "1fr 1fr", "30px 30px");
+checkTrackSizes(2, "1fr 3fr", "15px 45px");
+checkTrackSizes(2, "0fr 0fr 1fr", "25px 25px 10px");
+
+// Item spanning 2 fixed flexible tracks
+checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 0fr)", "0px 0px");
+checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 1fr)", "0px 60px");
+checkTrackSizes(2, "minmax(15px, 0fr) minmax(0, 1fr)", "15px 45px");
+checkTrackSizes(2, "minmax(20px, 1fr) minmax(0, 1fr)", "30px 30px");
+checkTrackSizes(2, "minmax(40px, 1fr) minmax(0, 1fr)", "40px 20px");
+
+// Item spanning an auto flexible track and a fixed flexible track
+checkTrackSizes(2, "0fr minmax(0, 0fr)", "50px 0px");
+checkTrackSizes(2, "0fr minmax(0, 1fr)", "50px 10px");
+checkTrackSizes(2, "1fr minmax(0, 1fr)", "50px 10px");
+checkTrackSizes(2, "1fr minmax(25px, 1fr)", "30px 30px");
+
+// Item spanning an auto flexible track and an intrinsic non-flexible track
+checkTrackSizes(2, "0fr min-content", "50px 0px");
+checkTrackSizes(2, "0fr auto", "50px 10px");
+checkTrackSizes(2, "0.5fr auto", "50px 10px");
+checkTrackSizes(2, "1fr auto", "60px 0px");
+checkTrackSizes(2, "1fr max-content", "60px 0px");
+checkTrackSizes(2, "1fr min-content", "60px 0px");
+
+// Item spanning a fixed flexible track and an intrinsic non-flexible track
+checkTrackSizes(2, "minmax(0, 0fr) min-content", "0px 0px");
+checkTrackSizes(2, "minmax(0, 0fr) auto", "0px 60px");
+checkTrackSizes(2, "minmax(0, 1fr) auto", "60px 0px");
+checkTrackSizes(2, "minmax(25px, 0fr) auto", "25px 35px");
+checkTrackSizes(2, "minmax(25px, 1fr) auto", "60px 0px");
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-intrinsic-size-dynamic-block-size.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-intrinsic-size-dynamic-block-size.html
new file mode 100644
index 0000000000..4db5080f93
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-intrinsic-size-dynamic-block-size.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=719441">
+<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div id="target">
+  <div style="display: inline-grid; height: 100%; background: green;">
+    <canvas width=60 height=60 style="height: 100%; min-width: 0;"></canvas>
+  </div>
+</div>
+<script>
+document.body.offsetTop;
+document.getElementById('target').style.height = '100px';
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-intrinsic-size-with-orthogonal-items.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-intrinsic-size-with-orthogonal-items.html
new file mode 100644
index 0000000000..63d6844cb7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-intrinsic-size-with-orthogonal-items.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Compute the grid's intrinsic size when there are orthogonal items</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#establish-an-orthogonal-flow">
+<meta name="assert" content="The test checks that using track's max sizing function to estimate orthogonal items' block-axis size to compute the grid's intrinsic size may lead to content overflow.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.grid {
+    display: inline-grid;
+    font: 25px/1 Ahem;
+    background: green;
+    height: 150px;
+}
+
+.item { writing-mode: vertical-lr; }
+
+.minmax-100-200 { grid: minmax(100px, 200px) / auto; }
+.minmax-auto-200 { grid: minmax(100px, 200px) / auto; }
+.minmax-auto-100 { grid: minmax(auto, 100px) / auto; }
+.minmax-100-auto { grid: minmax(100px, auto) / auto; }
+.minmax-100-fitcontent { grid: minmax(100px, fit-content) / auto; }
+.minmax-100-1fr { grid: minmax(100px, 1fr) / auto; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+
+<pre>rows: auto</pre>
+
+<div class="grid" data-expected-width="75" data-expected-height="150">
+    <div class="item" data-expected-width="75" data-expected-height="150">XXX XX X XXX XX X</div>
+</div>
+
+<pre>rows: minmax(100px, 200px)</pre>
+
+<div class="grid minmax-100-200" data-expected-width="75" data-expected-height="150">
+    <div class="item" data-expected-width="75" data-expected-height="150">XXX XX X XXX XX X</div>
+</div>
+
+<pre>rows: minmax(auto, 200px)</pre>
+
+<div class="grid minmax-auto-200" data-expected-width="75" data-expected-height="150">
+    <div class="item" data-expected-width="75" data-expected-height="150">XXX XX X XXX XX X</div>
+</div>
+
+<pre>rows: minmax(100px, auto)</pre>
+
+<div class="grid minmax-100-auto" data-expected-width="75" data-expected-height="150">
+    <div class="item" data-expected-width="75" data-expected-height="150">XXX XX X XXX XX X</div>
+</div>
+
+<pre>rows: minmax(auto, 100px)</pre>
+
+<div class="grid minmax-auto-100" data-expected-width="100" data-expected-height="150">
+    <div class="item" data-expected-width="100" data-expected-height="100">XXX XX X XXX XX X</div>
+</div>
+
+<pre>rows: minmax(100px, fit-content)</pre>
+
+<div class="grid minmax-auto-fitcontent" data-expected-width="75" data-expected-height="150">
+    <div class="item" data-expected-width="75" data-expected-height="150">XXX XX X XXX XX X</div>
+</div>
+
+<pre>rows: minmax(100px, 1fr)</pre>
+
+<div class="grid minmax-auto-1fr" data-expected-width="75" data-expected-height="150">
+    <div class="item" data-expected-width="75" data-expected-height="150">XXX XX X XXX XX X</div>
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-intrinsic-track-sizes-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-intrinsic-track-sizes-001.html
new file mode 100644
index 0000000000..5c740681f8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-intrinsic-track-sizes-001.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Intrinsic contribution of a small item to intrinsic tracks</title>
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-content">
+<meta name="assert" content="This test checks that the intrinsic contribution of a single grid item smaller than its container is distributed correctly among the tracks it spans when intrinsic tracks are involved.">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+#grid {
+  display: grid;
+  width: 120px;
+  height: 120px;
+  border: solid;
+  font: 10px/1 Ahem;
+}
+#item {
+  background: blue;
+  /* make min-content contribution differ from minimum contribution */
+  min-width: 12px;
+  min-height: 12px;
+}
+</style>
+
+<div id="grid">
+  <div id="item">XXX XX<br>XX<br>XX</div>
+</div>
+
+<div id="log"></div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../grid-definition/support/testing-utils.js"></script>
+<script>
+const item = document.getElementById("item");
+function checkTrackSizes(span, trackList, expectedCols, expectedRows) {
+  item.style.gridColumn = item.style.gridRow = `span ${span}`;
+  if (!expectedRows) {
+    expectedRows = expectedCols;
+  }
+  TestingUtils.testGridTemplateColumnsRows("grid", trackList, trackList, expectedCols, expectedRows);
+}
+
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+  // Item spanning a single track
+  checkTrackSizes(1, "auto", "120px");
+  checkTrackSizes(1, "min-content", "30px", "40px");
+  checkTrackSizes(1, "max-content", "60px", "30px");
+
+  checkTrackSizes(1, "minmax(0, auto)", "120px");
+  checkTrackSizes(1, "minmax(0, min-content)", "30px", "40px");
+  checkTrackSizes(1, "minmax(0, max-content)", "60px", "30px");
+
+  checkTrackSizes(1, "minmax(auto, 10px)", "12px");
+  checkTrackSizes(1, "minmax(min-content, 10px)", "30px", "40px");
+  checkTrackSizes(1, "minmax(max-content, 10px)", "60px", "30px");
+
+  // Item spanning two identical tracks
+
+  checkTrackSizes(2, "auto auto", "60px 60px");
+  checkTrackSizes(2, "min-content min-content", "15px 15px", "20px 20px");
+  checkTrackSizes(2, "max-content max-content", "30px 30px", "15px 15px");
+
+  checkTrackSizes(2, "minmax(0, auto) minmax(0, auto)", "60px 60px");
+  checkTrackSizes(2, "minmax(0, min-content) minmax(0, min-content)", "15px 15px", "20px 20px");
+  checkTrackSizes(2, "minmax(0, max-content) minmax(0, max-content)", "30px 30px", "15px 15px");
+
+  checkTrackSizes(2, "minmax(auto, 4px) minmax(auto, 4px)", "6px 6px");
+  checkTrackSizes(2, "minmax(auto, 10px) minmax(auto, 10px)", "10px 10px");
+  checkTrackSizes(2, "minmax(min-content, 10px) minmax(min-content, 10px)", "15px 15px", "20px 20px");
+  checkTrackSizes(2, "minmax(max-content, 10px) minmax(max-content, 10px)", "30px 30px", "15px 15px");
+
+  // Item spanning a fixed track also
+  checkTrackSizes(2, "20px auto", "20px 100px");
+  checkTrackSizes(2, "20px min-content", "20px 10px", "20px 20px");
+  checkTrackSizes(2, "20px max-content", "20px 40px", "20px 10px");
+
+  checkTrackSizes(2, "20px minmax(0, auto)", "20px 100px");
+  checkTrackSizes(2, "20px minmax(0, min-content)", "20px 10px", "20px 20px");
+  checkTrackSizes(2, "20px minmax(0, max-content)", "20px 40px", "20px 10px");
+
+  checkTrackSizes(2, "20px minmax(auto, 30px)", "20px 30px");
+  checkTrackSizes(2, "20px minmax(min-content, 6px)", "20px 10px", "20px 20px");
+  checkTrackSizes(2, "20px minmax(min-content, 40px)", "20px 40px", "20px 40px");
+  checkTrackSizes(2, "20px minmax(max-content, 6px)", "20px 40px", "20px 10px");
+  checkTrackSizes(2, "20px minmax(max-content, 30px)", "20px 40px", "20px 30px");
+
+  // Item spanning two mismatched intrinsic tracks
+  checkTrackSizes(2, "max-content min-content", "45px 15px", "15px 15px");
+
+  done();
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-item-margin-auto-columns-rows-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-item-margin-auto-columns-rows-001.html
new file mode 100644
index 0000000000..6ae1c50c22
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-item-margin-auto-columns-rows-001.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<title>CSS Grid: 'auto' sizes with item's margins</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=357419">
+<meta name="assert" content="Check that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins."/>
+<link href="/css/support/grid.css" rel="stylesheet">
+<link href="/css/support/width-keyword-classes.css" rel="stylesheet">
+
+<style>
+.grid {
+    grid-template-rows: auto auto;
+    grid-template-columns: auto auto;
+}
+
+.gridItem {
+    width: 20px;
+    height: 40px;
+}
+
+.marginTop {
+    margin-top: 20px;
+}
+
+.marginBottom {
+    margin-bottom: 20px;
+}
+
+.borderTop {
+    border-top: 5px solid;
+}
+
+.borderBottom {
+    border-bottom: 5px solid;
+}
+
+.paddingTop {
+    padding-top: 10px;
+}
+
+.paddingBottom {
+    padding-bottom: 10px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+<div>
+    <div class="grid fit-content" data-expected-width="40" data-expected-height="120">
+        <div class="gridItem marginTop firstRowFirstColumn"></div>
+        <div class="gridItem firstRowSecondColumn"></div>
+        <div class="gridItem marginBottom secondRowFirstColumn"></div>
+        <div class="gridItem secondRowSecondColumn"></div>
+    </div>
+</div>
+
+<div>
+    <div class="grid fit-content" data-expected-width="40" data-expected-height="120">
+        <div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
+        <div class="gridItem firstRowSecondColumn"></div>
+        <div class="gridItem borderTop borderBottom secondRowFirstColumn"></div>
+        <div class="gridItem secondRowSecondColumn"></div>
+    </div>
+</div>
+
+<div>
+    <div class="grid fit-content" data-expected-width="40" data-expected-height="120">
+        <div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
+        <div class="gridItem firstRowSecondColumn"></div>
+        <div class="gridItem borderTop borderBottom secondRowFirstColumn"></div>
+        <div class="gridItem secondRowSecondColumn"></div>
+    </div>
+</div>
+
+<div>
+    <div class="grid fit-content" data-expected-width="40" data-expected-height="120">
+        <div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
+        <div class="gridItem firstRowSecondColumn"></div>
+        <div class="gridItem paddingBottom secondRowFirstColumn"></div>
+        <div class="gridItem secondRowSecondColumn"></div>
+    </div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-item-margin-auto-columns-rows-vertical-lr-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-item-margin-auto-columns-rows-vertical-lr-001.html
new file mode 100644
index 0000000000..63bf55f293
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-item-margin-auto-columns-rows-vertical-lr-001.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<title>CSS Grid: 'auto' sizes with item's margins with vertical-lr</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=357419">
+<meta name="assert" content="Check that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins when using vertical-lr writing mode."/>
+<link href="/css/support/grid.css" rel="stylesheet">
+<link href="/css/support/width-keyword-classes.css" rel="stylesheet">
+
+<style>
+.grid {
+    grid-template-rows: auto auto;
+    grid-template-columns: auto auto;
+}
+
+.gridItem {
+    width: 20px;
+    height: 40px;
+}
+
+.marginTop {
+    margin-top: 20px;
+}
+
+.marginBottom {
+    margin-bottom: 20px;
+}
+
+.borderTop {
+    border-top: 5px solid;
+}
+
+.borderBottom {
+    border-bottom: 5px solid;
+}
+
+.paddingTop {
+    padding-top: 10px;
+}
+
+.paddingBottom {
+    padding-bottom: 10px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+<div>
+    <div class="grid fit-content verticalLR" data-expected-width="40" data-expected-height="120">
+        <div class="gridItem marginTop firstRowFirstColumn"></div>
+        <div class="gridItem marginBottom firstRowSecondColumn"></div>
+        <div class="gridItem secondRowFirstColumn"></div>
+        <div class="gridItem secondRowSecondColumn"></div>
+    </div>
+</div>
+
+<div>
+    <div class="grid fit-content verticalLR" data-expected-width="40" data-expected-height="120">
+        <div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
+        <div class="gridItem borderTop borderBottom firstRowSecondColumn"></div>
+        <div class="gridItem secondRowFirstColumn"></div>
+        <div class="gridItem secondRowSecondColumn"></div>
+    </div>
+</div>
+
+<div>
+    <div class="grid fit-content verticalLR" data-expected-width="40" data-expected-height="120">
+        <div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
+        <div class="gridItem borderTop borderBottom firstRowSecondColumn"></div>
+        <div class="gridItem secondRowFirstColumn"></div>
+        <div class="gridItem secondRowSecondColumn"></div>
+    </div>
+</div>
+
+<div>
+    <div class="grid fit-content verticalLR" data-expected-width="40" data-expected-height="120">
+        <div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
+        <div class="gridItem paddingBottom firstRowSecondColumn"></div>
+        <div class="gridItem secondRowFirstColumn"></div>
+        <div class="gridItem secondRowSecondColumn"></div>
+    </div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-item-margin-auto-columns-rows-vertical-rl-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-item-margin-auto-columns-rows-vertical-rl-001.html
new file mode 100644
index 0000000000..d6767e3f4a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-item-margin-auto-columns-rows-vertical-rl-001.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<title>CSS Grid: 'auto' sizes with item's margins with vertical-rl</title>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=357419">
+<meta name="assert" content="Check that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins when using vertical-rl writing mode."/>
+<link href="/css/support/grid.css" rel="stylesheet">
+<link href="/css/support/width-keyword-classes.css" rel="stylesheet">
+
+<style>
+.grid {
+    grid-template-rows: auto auto;
+    grid-template-columns: auto auto;
+}
+
+.gridItem {
+    width: 20px;
+    height: 40px;
+}
+
+.marginTop {
+    margin-top: 20px;
+}
+
+.marginBottom {
+    margin-bottom: 20px;
+}
+
+.borderTop {
+    border-top: 5px solid;
+}
+
+.borderBottom {
+    border-bottom: 5px solid;
+}
+
+.paddingTop {
+    padding-top: 10px;
+}
+
+.paddingBottom {
+    padding-bottom: 10px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+<div style="position: relative">
+    <div class="grid fit-content verticalRL" data-expected-width="40" data-expected-height="120">
+        <div class="gridItem marginTop firstRowFirstColumn"></div>
+        <div class="gridItem marginBottom firstRowSecondColumn"></div>
+        <div class="gridItem secondRowFirstColumn"></div>
+        <div class="gridItem secondRowSecondColumn"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content verticalRL" data-expected-width="40" data-expected-height="120">
+        <div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
+        <div class="gridItem borderTop borderBottom firstRowSecondColumn"></div>
+        <div class="gridItem secondRowFirstColumn"></div>
+        <div class="gridItem secondRowSecondColumn"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content verticalRL" data-expected-width="40" data-expected-height="120">
+        <div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
+        <div class="gridItem borderTop borderBottom firstRowSecondColumn"></div>
+        <div class="gridItem secondRowFirstColumn"></div>
+        <div class="gridItem secondRowSecondColumn"></div>
+    </div>
+</div>
+
+<div style="position: relative">
+    <div class="grid fit-content verticalRL" data-expected-width="40" data-expected-height="120">
+        <div class="gridItem marginTop paddingTop firstRowFirstColumn"></div>
+        <div class="gridItem paddingBottom firstRowSecondColumn"></div>
+        <div class="gridItem secondRowFirstColumn"></div>
+        <div class="gridItem secondRowSecondColumn"></div>
+    </div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-layout-free-space-unit.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-layout-free-space-unit.html
new file mode 100644
index 0000000000..10649a9639
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-layout-free-space-unit.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Grid Layout Test: free space unit</title>
+    <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+    <link rel="help" href="http://www.w3.org/TR/css-grid-1/#free-space">
+    <link rel="match" href="../reference/grid-layout-basic-ref.html">
+    <meta name="assert" content="the layout should behave the same as reference.">
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+      #caseTitle {
+        margin: 10px;
+        height: 40px;
+      }
+      #grid {
+        width: 150px;
+        background: #eee;
+        display: grid;
+        grid-template-columns: 1fr 50px;
+      }
+      .a {
+        background: blue;
+        grid-column: 1;
+        grid-row: 1;
+      }
+      .b {
+        background: yellow;
+        grid-column: 2;
+        grid-row: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+    <div id="grid">
+      <div class="a">&nbsp;</div>
+      <div class="b">&nbsp;</div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-lr.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-lr.html
new file mode 100644
index 0000000000..3d1949fc3f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-lr.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: minimum contribution with baseline-alignment shim</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content" title="11.5. Resolve Intrinsic Track Sizes">
+<meta name="assert" content="Checks that the minimum contribution takes the baseline-alignment shim into account when calculating the outer size that grid items would have if their preferred size were their minimum size. Also checks that the shim is used again when clamping the automatic minimum size to less than or equal to the stretch fit into the grid area.">
+<style>
+.grid {
+  display: grid;
+  position: relative;
+  font-size: 0;
+  height: 0;
+  width: 0;
+  margin-bottom: 125px;
+  grid-template-rows: 50px 50px;
+  justify-items: baseline;
+}
+.item1, .item2 {
+  writing-mode: vertical-lr;
+}
+.item1 {
+  padding-left: 25px;
+  background: yellow;
+}
+.item2 {
+  padding-right: 25px;
+  background: magenta;
+}
+.item1::before, .item2::before {
+  content: '';
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  vertical-align: top;
+}
+.item2::before {
+  vertical-align: bottom;
+}
+.area {
+  position: absolute;
+  z-index: -1;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  grid-column: 1 / 2;
+  grid-row: 1 / 3;
+  background: cyan;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<div id="log"></div>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 0px);">
+  <div class="item1" data-offset-x="0" data-offset-y="0"></div>
+  <div class="item2" data-offset-x="50" data-offset-y="50"></div>
+  <div class="area" data-expected-width="75" data-expected-height="100"></div>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 75px);">
+  <div class="item1" data-offset-x="0" data-offset-y="0"></div>
+  <div class="item2" data-offset-x="50" data-offset-y="50"></div>
+  <div class="area" data-expected-width="75" data-expected-height="100"></div>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 88px);">
+  <div class="item1" data-offset-x="0" data-offset-y="0"></div>
+  <div class="item2" data-offset-x="50" data-offset-y="50"></div>
+  <div class="area" data-expected-width="88" data-expected-height="100"></div>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 100px);">
+  <div class="item1" data-offset-x="0" data-offset-y="0"></div>
+  <div class="item2" data-offset-x="50" data-offset-y="50"></div>
+  <div class="area" data-expected-width="100" data-expected-height="100"></div>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 150px);">
+  <div class="item1" data-offset-x="0" data-offset-y="0"></div>
+  <div class="item2" data-offset-x="50" data-offset-y="50"></div>
+  <div class="area" data-expected-width="100" data-expected-height="100"></div>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(auto, auto);">
+  <div class="item1" data-offset-x="0" data-offset-y="0"></div>
+  <div class="item2" data-offset-x="50" data-offset-y="50"></div>
+  <div class="area" data-expected-width="100" data-expected-height="100"></div>
+</div>
+
+<script>
+checkLayout(".grid");
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-rl.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-rl.html
new file mode 100644
index 0000000000..cd80fd3873
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-rl.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: minimum contribution with baseline-alignment shim</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content" title="11.5. Resolve Intrinsic Track Sizes">
+<meta name="assert" content="Checks that the minimum contribution takes the baseline-alignment shim into account when calculating the outer size that grid items would have if their preferred size were their minimum size. Also checks that the shim is used again when clamping the automatic minimum size to less than or equal to the stretch fit into the grid area.">
+<style>
+.grid {
+  display: grid;
+  position: relative;
+  font-size: 0;
+  height: 0;
+  width: 0;
+  margin-bottom: 125px;
+  grid-template-rows: 50px 50px;
+  justify-items: baseline;
+}
+.item1, .item2 {
+  writing-mode: vertical-rl;
+}
+.item1 {
+  padding-left: 25px;
+  background: yellow;
+}
+.item2 {
+  padding-right: 25px;
+  background: magenta;
+}
+.item1::before, .item2::before {
+  content: '';
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  vertical-align: top;
+}
+.item2::before {
+  vertical-align: bottom;
+}
+.area {
+  position: absolute;
+  z-index: -1;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  grid-column: 1 / 2;
+  grid-row: 1 / 3;
+  background: cyan;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<div id="log"></div>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 0px);">
+  <div class="item1" data-offset-x="-25" data-offset-y="0"></div>
+  <div class="item2" data-offset-x="25" data-offset-y="50"></div>
+  <div class="area" data-expected-width="75" data-expected-height="100"></div>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 75px);">
+  <div class="item1" data-offset-x="-25" data-offset-y="0"></div>
+  <div class="item2" data-offset-x="25" data-offset-y="50"></div>
+  <div class="area" data-expected-width="75" data-expected-height="100"></div>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 88px);">
+  <div class="item1" data-offset-x="-12" data-offset-y="0"></div>
+  <div class="item2" data-offset-x="38" data-offset-y="50"></div>
+  <div class="area" data-expected-width="88" data-expected-height="100"></div>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 100px);">
+  <div class="item1" data-offset-x="0" data-offset-y="0"></div>
+  <div class="item2" data-offset-x="50" data-offset-y="50"></div>
+  <div class="area" data-expected-width="100" data-expected-height="100"></div>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(auto, 150px);">
+  <div class="item1" data-offset-x="0" data-offset-y="0"></div>
+  <div class="item2" data-offset-x="50" data-offset-y="50"></div>
+  <div class="area" data-expected-width="100" data-expected-height="100"></div>
+</div>
+
+<div class="grid" style="grid-template-columns: minmax(auto, auto);">
+  <div class="item1" data-offset-x="0" data-offset-y="0"></div>
+  <div class="item2" data-offset-x="50" data-offset-y="50"></div>
+  <div class="area" data-expected-width="100" data-expected-height="100"></div>
+</div>
+
+<script>
+checkLayout(".grid");
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim.html
new file mode 100644
index 0000000000..2bd37eb0f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: minimum contribution with baseline-alignment shim</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content" title="11.5. Resolve Intrinsic Track Sizes">
+<meta name="assert" content="Checks that the minimum contribution takes the baseline-alignment shim into account when calculating the outer size that grid items would have if their preferred size were their minimum size. Also checks that the shim is used again when clamping the automatic minimum size to less than or equal to the stretch fit into the grid area.">
+<style>
+.grid {
+  display: grid;
+  position: relative;
+  font-size: 0;
+  height: 0;
+  width: 0;
+  margin-bottom: 125px;
+  grid-template-columns: 50px 50px;
+  align-items: baseline;
+}
+.item1 {
+  padding-top: 25px;
+  background: yellow;
+}
+.item2 {
+  padding-bottom: 25px;
+  background: magenta;
+}
+.item1::before, .item2::before {
+  content: '';
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  vertical-align: bottom;
+}
+.item2::before {
+  vertical-align: top;
+}
+.area {
+  position: absolute;
+  z-index: -1;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  grid-column: 1 / 3;
+  grid-row: 1 / 2;
+  background: cyan;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<div id="log"></div>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 0px);">
+  <div class="item1" data-offset-x="0" data-offset-y="0"></div>
+  <div class="item2" data-offset-x="50" data-offset-y="50"></div>
+  <div class="area" data-expected-width="100" data-expected-height="75"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 75px);">
+  <div class="item1" data-offset-x="0" data-offset-y="0"></div>
+  <div class="item2" data-offset-x="50" data-offset-y="50"></div>
+  <div class="area" data-expected-width="100" data-expected-height="75"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 88px);">
+  <div class="item1" data-offset-x="0" data-offset-y="0"></div>
+  <div class="item2" data-offset-x="50" data-offset-y="50"></div>
+  <div class="area" data-expected-width="100" data-expected-height="88"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 100px);">
+  <div class="item1" data-offset-x="0" data-offset-y="0"></div>
+  <div class="item2" data-offset-x="50" data-offset-y="50"></div>
+  <div class="area" data-expected-width="100" data-expected-height="100"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: minmax(auto, 150px);">
+  <div class="item1" data-offset-x="0" data-offset-y="0"></div>
+  <div class="item2" data-offset-x="50" data-offset-y="50"></div>
+  <div class="area" data-expected-width="100" data-expected-height="100"></div>
+</div>
+
+<div class="grid" style="grid-template-rows: minmax(auto, auto);">
+  <div class="item1" data-offset-x="0" data-offset-y="0"></div>
+  <div class="item2" data-offset-x="50" data-offset-y="50"></div>
+  <div class="area" data-expected-width="100" data-expected-height="100"></div>
+</div>
+
+<script>
+checkLayout(".grid");
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-percent-cols-filled-shrinkwrap-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-percent-cols-filled-shrinkwrap-001.html
new file mode 100644
index 0000000000..8402238f2b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-percent-cols-filled-shrinkwrap-001.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Filled Percentage Column, Shrinkwrap Width (via float)</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-overview">
+<link rel="match" href="references/grid-percent-cols-filled-shrinkwrap-001-ref.html">
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+    .grid {
+        display: grid;
+        float: left;
+        margin: 1em;
+        grid-template-columns: auto 20% auto;
+        border: solid silver;
+        font: 20px/1 Ahem;
+        color: transparent;
+    }
+    .grid > div {
+        background: blue;
+    }
+    .b {
+        grid-column: 3;
+    }
+    .c {
+        grid-column: 2;
+    }
+
+    .ref {
+        grid-template-columns: 40px 20px 40px;
+    }
+</style>
+
+<p>Test passes if the two shapes below are identical
+
+<div class="grid">
+    <div class="a">X</div>
+    <div class="b">X</div>
+    <div class="c">XXX</div>
+</div>
+
+<div class="grid ref">
+    <div class="a">X</div>
+    <div class="b">X</div>
+    <div class="c">XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-percent-cols-spanned-shrinkwrap-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-percent-cols-spanned-shrinkwrap-001.html
new file mode 100644
index 0000000000..ec84108cf1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-percent-cols-spanned-shrinkwrap-001.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Spanned Percentage Column, Shrinkwrap Width (via float)</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-overview">
+<link rel="match" href="references/grid-percent-cols-spanned-shrinkwrap-001-ref.html">
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+    .grid {
+        display: grid;
+        float: left;
+        margin: 1em;
+        grid-template-columns: auto 20% auto;
+        border: solid silver;
+        font: 20px/1 Ahem;
+        color: transparent;
+    }
+    .grid > div {
+        background: blue;
+    }
+    .b {
+        grid-column: 3;
+    }
+    .c {
+        grid-column: span 3;
+    }
+
+    .ref {
+        grid-template-columns: 40px 20px 40px;
+    }
+</style>
+
+<p>Test passes if the two shapes below are identical
+
+<div class="grid">
+    <div class="a">X</div>
+    <div class="b">X</div>
+    <div class="c">XXXXX</div>
+</div>
+
+<div class="grid ref">
+    <div class="a">X</div>
+    <div class="b">X</div>
+    <div class="c">XXXXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-percent-rows-filled-shrinkwrap-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-percent-rows-filled-shrinkwrap-001.html
new file mode 100644
index 0000000000..a55c24f77d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-percent-rows-filled-shrinkwrap-001.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Filled Percentage Row, Shrinkwrap Height</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-overview">
+<link rel="match" href="references/grid-percent-rows-filled-shrinkwrap-001-ref.html">
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+    .grid {
+        display: grid;
+        float: left;
+        margin: 1em;
+        grid-template-rows: auto 20% auto;
+        grid-auto-flow: column;
+        border: solid silver;
+        font: 20px/1 Ahem;
+        color: transparent;
+    }
+    .grid > div {
+        background: blue;
+    }
+    .b {
+        grid-row: 3;
+    }
+    .c {
+        grid-row: 2;
+    }
+
+    .ref {
+        grid-template-rows: 40px 20px 40px;
+    }
+</style>
+
+<p>Test passes if the two shapes below are identical
+
+<div class="grid">
+    <div class="a">X</div>
+    <div class="b">X</div>
+    <div class="c">X<br>X<br>X</div>
+</div>
+
+<div class="grid ref">
+    <div class="a">X</div>
+    <div class="b">X</div>
+    <div class="c">X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-percent-rows-spanned-shrinkwrap-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-percent-rows-spanned-shrinkwrap-001.html
new file mode 100644
index 0000000000..0c51f08f82
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-percent-rows-spanned-shrinkwrap-001.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Spanned Percentage Row, Shrinkwrap Height</title>
+<link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-overview">
+<link rel="match" href="references/grid-percent-rows-spanned-shrinkwrap-001-ref.html">
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+    .grid {
+        display: grid;
+        float: left;
+        margin: 1em;
+        grid-template-rows: auto 20% auto;
+        grid-auto-flow: column;
+        justify-content: center;
+        border: solid silver;
+        font: 20px/1 Ahem;
+        color: transparent;
+    }
+    .grid > div {
+        background: blue;
+    }
+    .b {
+        grid-row: 3;
+    }
+    .c {
+        grid-row: span 3;
+    }
+
+    .ref {
+        grid-template-rows: 40px 20px 40px;
+    }
+</style>
+
+<p>Test passes if the two shapes below are identical
+
+<div class="grid">
+    <div class="a">X</div>
+    <div class="b">X</div>
+    <div class="c">X<br>X<br>X<br>X<br>X</div>
+</div>
+
+<div class="grid ref">
+    <div class="a">X</div>
+    <div class="b">X</div>
+    <div class="c">X<br>X<br>X<br>X<br>X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-stretch-respects-min-size-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-stretch-respects-min-size-001.html
new file mode 100644
index 0000000000..29eca9dbc6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-stretch-respects-min-size-001.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: stretch alignment respects min size constraints of the grid container</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="The test checks that during the last step of the track sizing algorithm (stretch auto tracks), the min-width/height constraints of the grid container are respected.">
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  #constrained-wrapper {
+    width: 50px;
+    height: 50px;
+  }
+
+  #grid {
+    display: grid;
+    min-width: 100px;
+    min-height: 100px;
+  }
+
+  #test-item-overlapping-green {
+    background: green;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+<div id="constrained-wrapper">
+  <div id="grid">
+    <div id="test-item-overlapping-green"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-template-flexible-rerun-track-sizing.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-template-flexible-rerun-track-sizing.html
new file mode 100644
index 0000000000..2db9d64347
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-template-flexible-rerun-track-sizing.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1149627">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4309" />
+<style>
+.grid {
+  display: inline-grid;
+  position: relative;
+  grid-template-columns: minmax(0, .5fr);
+  grid-template-rows: minmax(0, .5fr);
+}
+.item {
+  width: 200px;
+  height: 200px;
+  background: linear-gradient(green, green) no-repeat;
+  background-size: 100px 100px;
+}
+.abspos {
+  grid-area: 1 / 1 / 2 / 2;
+  position: absolute;
+  width: 200%;
+  height: 200%;
+  background: red;
+  z-index: -1;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="grid">
+  <span class="item"></span>
+  <span class="abspos"></span>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/references/auto-margins-ignored-during-track-sizing-001-ref.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/references/auto-margins-ignored-during-track-sizing-001-ref.html
new file mode 100644
index 0000000000..b06d891151
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/references/auto-margins-ignored-during-track-sizing-001-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<style>
+body { overflow: hidden; }
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+.margin { margin-top: 10px; }
+.center { justify-self: center; }
+.i1 { background: magenta;  }
+.i2 { background: cyan; }
+.i3 { background: yellow; }
+.i4 { background: lime; }
+</style>
+<p>This test pass if the 3 items in the first row have the same size filling the whole viewport's width and the item in the second row is centered in the first column.<p>
+<div class="grid">
+  <div class="i1">
+    In a few questions, you will get an expert-designed investment portfolio to fit your financial needs.
+  </div>
+  <div class="i2">
+    Open and fund your account with 10,000 or more and we will put your money to work.
+  </div>
+  <div class="i3">
+    We will take it from here, monitoring your portfolio daily to help keep it on track.
+  </div>
+  <div class="i4 margin center">Learn More</a>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/references/grid-percent-cols-filled-shrinkwrap-001-ref.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/references/grid-percent-cols-filled-shrinkwrap-001-ref.html
new file mode 100644
index 0000000000..97bc5da725
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/references/grid-percent-cols-filled-shrinkwrap-001-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<title>Reference</title>
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+    .grid {
+        display: grid;
+        float: left;
+        margin: 1em;
+        grid-template-columns: 40px 20px 40px;
+        align-content: center;
+        border: solid silver;
+        font: 20px/1 Ahem;
+        color: transparent;
+    }
+    .grid > div {
+        background: blue;
+    }
+    .b {
+        grid-column: 3;
+    }
+    .c {
+        grid-column: 2;
+    }
+</style>
+
+<p>Test passes if the two shapes below are identical
+
+<div class="grid">
+    <div class="a">X</div>
+    <div class="b">X</div>
+    <div class="c">XXX</div>
+</div>
+
+<div class="grid ref">
+    <div class="a">X</div>
+    <div class="b">X</div>
+    <div class="c">XXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/references/grid-percent-cols-spanned-shrinkwrap-001-ref.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/references/grid-percent-cols-spanned-shrinkwrap-001-ref.html
new file mode 100644
index 0000000000..37d516ee28
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/references/grid-percent-cols-spanned-shrinkwrap-001-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<title>Reference</title>
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+    .grid {
+        display: grid;
+        float: left;
+        margin: 1em;
+        grid-template-columns: 40px 20px 40px;
+        align-content: center;
+        border: solid silver;
+        font: 20px/1 Ahem;
+        color: transparent;
+    }
+    .grid > div {
+        background: blue;
+    }
+    .b {
+        grid-column: 3;
+    }
+    .c {
+        grid-column: span 3;
+    }
+</style>
+
+<p>Test passes if the two shapes below are identical
+
+<div class="grid">
+    <div class="a">X</div>
+    <div class="b">X</div>
+    <div class="c">XXXXX</div>
+</div>
+
+<div class="grid ref">
+    <div class="a">X</div>
+    <div class="b">X</div>
+    <div class="c">XXXXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/references/grid-percent-rows-filled-shrinkwrap-001-ref.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/references/grid-percent-rows-filled-shrinkwrap-001-ref.html
new file mode 100644
index 0000000000..2c756ba8bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/references/grid-percent-rows-filled-shrinkwrap-001-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<title>Reference</title>
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+    .grid {
+        display: grid;
+        float: left;
+        margin: 1em;
+        grid-template-rows: 40px 20px 40px;
+        grid-auto-flow: column;
+        justify-content: center;
+        border: solid silver;
+        font: 20px/1 Ahem;
+        color: transparent;
+    }
+    .grid > div {
+        background: blue;
+    }
+    .b {
+        grid-row: 3;
+    }
+    .c {
+        grid-row: 2;
+    }
+</style>
+
+<p>Test passes if the two shapes below are identical
+
+<div class="grid">
+    <div class="a">X</div>
+    <div class="b">X</div>
+    <div class="c">X<br>X<br>X</div>
+</div>
+
+<div class="grid ref">
+    <div class="a">X</div>
+    <div class="b">X</div>
+    <div class="c">X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/references/grid-percent-rows-spanned-shrinkwrap-001-ref.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/references/grid-percent-rows-spanned-shrinkwrap-001-ref.html
new file mode 100644
index 0000000000..8d09dc1a69
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/references/grid-percent-rows-spanned-shrinkwrap-001-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<title>Reference</title>
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+    .grid {
+        display: grid;
+        float: left;
+        margin: 1em;
+        grid-template-rows: 40px 20px 40px;
+        grid-auto-flow: column;
+        justify-content: center;
+        border: solid silver;
+        font: 20px/1 Ahem;
+        color: transparent;
+    }
+    .grid > div {
+        background: blue;
+    }
+    .b {
+        grid-row: 3;
+    }
+    .c {
+        grid-row: span 3;
+    }
+</style>
+
+<p>Test passes if the two shapes below are identical
+
+<div class="grid">
+    <div class="a">X</div>
+    <div class="b">X</div>
+    <div class="c">X<br>X<br>X<br>X<br>X</div>
+</div>
+
+<div class="grid ref">
+    <div class="a">X</div>
+    <div class="b">X</div>
+    <div class="c">X<br>X<br>X<br>X<br>X</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-grid/masonry/WEB_FEATURES.yml
new file mode 100644
index 0000000000..30261400ce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/WEB_FEATURES.yml
@@ -0,0 +1,3 @@
+features:
+- name: masonry
+  files: "**"
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-001-ref.html
new file mode 100644
index 0000000000..fff6cf2138
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-001-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: Masonry layout with `align-content` in masonry axis</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: 1em auto;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+  height: 100px;
+  align-items: start;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+.tall { padding-top:30px; grid-row:span 2; }
+</style>
+</head>
+<body>
+
+<grid style="align-content:start">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:start">
+  <item style="grid-column:1/2">1</item>
+  <item style="grid-column:2/3" class="tall">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item style="grid-column:1/2">1</item>
+  <item style="grid-column:2/3" class="tall">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item style="grid-column:1/2">1</item>
+  <item style="grid-column:2/3" class="tall">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:stretch">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:start">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-001.html
new file mode 100644
index 0000000000..dfefd998c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-001.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>CSS Grid Test: Masonry layout with `align-content` in masonry axis</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="masonry-align-content-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+  height: 100px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+</style>
+</head>
+<body>
+
+<grid style="align-content:start">
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:start">
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:stretch">
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:space-between">
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:space-around">
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:space-evenly">
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-002-ref.html
new file mode 100644
index 0000000000..67318b323a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-002-ref.html
@@ -0,0 +1,126 @@
+<!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: Masonry layout with `align-content` in masonry axis</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: 1em auto;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+  width: 100px;
+  align-items: start;
+  writing-mode: vertical-lr;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+.tall { padding-right:30px; grid-row:span 2; }
+</style>
+</head>
+<body>
+
+<grid style="align-content:start">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:start">
+  <item style="grid-column:1/2">1</item>
+  <item style="grid-column:2/3" class="tall">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item style="grid-column:1/2">1</item>
+  <item style="grid-column:2/3" class="tall">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item style="grid-column:1/2">1</item>
+  <item style="grid-column:2/3" class="tall">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:stretch">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:start">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-002.html
new file mode 100644
index 0000000000..75b82654fe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-002.html
@@ -0,0 +1,126 @@
+<!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: Masonry layout with `align-content` in masonry axis</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="masonry-align-content-002-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+  width: 100px;
+  writing-mode: vertical-lr;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+</style>
+</head>
+<body>
+
+<grid style="align-content:start">
+  <item style="padding-right:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:start">
+  <item>1</item>
+  <item style="padding-right:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item style="padding-right:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item>1</item>
+  <item style="padding-right:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item style="padding-right:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item>1</item>
+  <item style="padding-right:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:stretch">
+  <item style="padding-right:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:space-between">
+  <item style="padding-right:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:space-around">
+  <item style="padding-right:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:space-evenly">
+  <item style="padding-right:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-003-ref.html
new file mode 100644
index 0000000000..9780d5f5dc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-003-ref.html
@@ -0,0 +1,127 @@
+<!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: Masonry layout with `align-content` in grid axis</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: 1ch auto;
+  grid-template-rows: repeat(4,auto);
+  background: content-box silver;
+  border: 1px solid;
+  padding: 0 3px 2px 0;
+  width: 100px;
+  height: 120px;
+  align-content: center;
+  justify-items: start;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+.tall { grid-row: span 2; padding: 3px 11px 1px 13px; }
+</style>
+</head>
+<body>
+
+<grid style="align-content:start">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:start">
+  <item style="grid-row:1/2">1</item>
+  <item class="tall" style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:1/2">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item style="grid-row:1/2">1</item>
+  <item class="tall" style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:1/2">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item style="grid-row:1/2">1</item>
+  <item class="tall" style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:1/2">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:stretch">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:space-between">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:space-around">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:space-evenly">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-003.html
new file mode 100644
index 0000000000..ae58e79cb2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-003.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: Masonry layout with `align-content` in grid axis</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="masonry-align-content-003-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: masonry;
+  grid-template-rows: repeat(4,auto);
+  background: content-box silver;
+  border: 1px solid;
+  padding: 0 3px 2px 0;
+  width: 100px;
+  height: 120px;
+  align-content: center;
+  justify-items: start;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+.tall { padding: 3px 11px 1px 13px; }
+</style>
+</head>
+<body>
+
+<grid style="align-content:start">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:start">
+  <item>1</item>
+  <item class="tall">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item>1</item>
+  <item class="tall">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item>1</item>
+  <item class="tall">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:stretch">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:space-between">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:space-around">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:space-evenly">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-004-ref.html
new file mode 100644
index 0000000000..de11c836b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-004-ref.html
@@ -0,0 +1,126 @@
+<!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: Masonry layout with `align-content` in grid axis</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: 1ch auto;
+  grid-template-rows: repeat(4,20px);
+  background: content-box silver;
+  border: 1px solid;
+  padding: 2px;
+  width: 100px;
+  justify-items: start;
+  writing-mode: vertical-rl;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+.tall { grid-column: span 2; padding-top: 30px; }
+</style>
+</head>
+<body>
+
+<grid style="align-content:start">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:start">
+  <item style="grid-row:1/2">1</item>
+  <item class="tall" style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:1/2">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item style="grid-row:1/2">1</item>
+  <item class="tall" style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:1/2">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item style="grid-row:1/2">1</item>
+  <item class="tall" style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:1/2">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:stretch">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:space-between">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:space-around">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="align-content:space-evenly">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-004.html
new file mode 100644
index 0000000000..3f07aa1fe7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/align-content/masonry-align-content-004.html
@@ -0,0 +1,127 @@
+<!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: Masonry layout with `align-content` in grid axis</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="masonry-align-content-004-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: masonry;
+  grid-template-rows: repeat(4,20px);
+  background: content-box silver;
+  border: 1px solid;
+  padding: 2px;
+  width: 100px;
+  writing-mode: vertical-rl;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+.tall { padding-top: 30px; }
+</style>
+</head>
+<body>
+
+<grid style="align-content:start">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:start">
+  <item>1</item>
+  <item class="tall">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:end">
+  <item>1</item>
+  <item class="tall">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:center">
+  <item>1</item>
+  <item class="tall">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:stretch">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:space-between">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:space-around">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="align-content:space-evenly">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-content-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-content-baseline-001-ref.html
new file mode 100644
index 0000000000..cdb6d4fdf8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-content-baseline-001-ref.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>Reference: align-content:baseline/last baseline</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:15px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: auto / repeat(4, auto);
+  border: 2px solid;
+  padding: 1px;
+  margin: 1px;
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+
+span {
+  background: lime;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:15px; }
+span:nth-child(2) { font-size:30px; }
+span:nth-child(3) { font-size:10px; }
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; align-self:self-start; justify-self:self-start; }
+.lb { align-content:last baseline; align-self:self-end; justify-self:self-end; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
+<div class="grid hl"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
+<div class="grid vl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
+<div class="grid vl"><span class="fb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
+<div class="grid vr"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
+<div class="grid vr"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="fb" style="padding-top:27px">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="fb pbe" style="padding-top:27px">A<br>B</span><span class="lb" style="margin-bottom:7px">M<br>N</span></div>
+<div class="grid vl"><span class="fb" style="padding-left:18px">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="fb pbs">A<br>B</span><span class="lb" style="padding-left:2px">M<br>N</span></div>
+<div class="grid vr"><span class="fb" style="padding-right:27px">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="fb pbe" style="padding-right:27px">A<br>B</span><span class="lb" style="margin-left:7px">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="fb vl">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb vl">X<br>Z</span></div>
+<div class="grid c hl"><span class="fb vl pbe">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb vl">X<br>Z</span></div>
+<div class="grid c vl"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div>
+<div class="grid c vl" style="inline-size:100px"><span class="fb hl pbs">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div>
+<div class="grid c vr"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div>
+<div class="grid c vr"><span class="fb hl pbe">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="fb vl" style="padding-left:18px">A<br>B</span><span class="vl">M<br>N</span></div>
+<div class="grid c hl"><span class="fb vl pbe" style="padding-left:18px">A<br>B</span><span class="vl">M<br>N</span></div>
+<div class="grid c vl"><span class="fb hl" style="padding-top:27px">A<br>B</span><span class="hl">M<br>N</span></div>
+<div class="grid c vl"><span class="fb hl pbs" style="padding-top:22px">A<br>B</span><span class="hl">M<br>N</span></div>
+<div class="grid c vr"><span class="fb hl" style="padding-top:27px">A<br>B</span><span class="hl">M<br>N</span></div>
+<div class="grid c vr" style="inline-size:100px"><span class="hl pbe" style="justify-self:start; padding-top:27px">A<br>B</span><span class="fb hl">M<br>N</span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-content-baseline-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-content-baseline-001.html
new file mode 100644
index 0000000000..60d11653b3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-content-baseline-001.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>CSS Grid Test: align-content:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-content">
+  <link rel="match" href="masonry-grid-item-content-baseline-001-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+    color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
+}
+
+.grid {
+  float: left;
+  display: grid;
+  grid: masonry / repeat(4, auto);
+  border: 2px solid;
+  padding: 1px;
+  margin: 1px;
+}
+.c {
+  grid: repeat(4, auto) / masonry;
+}
+
+span {
+  background: lime;
+  border: 1px solid black;
+}
+
+span:nth-child(1) { font-size:15px; }
+span:nth-child(2) { font-size:30px; }
+span:nth-child(3) { font-size:10px; }
+.pbs { padding-block-start: 15px; margin-block-start: 5px; }
+.pbe { padding-block-end: 7px; margin-block-end: 3px; }
+
+.fb { align-content:baseline; }
+.lb { align-content:last baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vl { writing-mode: vertical-lr; text-orientation: sideways; }
+.vr { writing-mode: vertical-rl; text-orientation: sideways; }
+.vlr { writing-mode: vertical-lr; direction:rtl; text-orientation: sideways; }
+.vrl { writing-mode: vertical-rl; direction:ltr; text-orientation: sideways; }
+
+</style>
+</head>
+<body>
+
+<div class="grid hl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
+<div class="grid hl"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
+<div class="grid vl"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
+<div class="grid vl"><span class="fb pbs">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
+<div class="grid vr"><span class="fb">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
+<div class="grid vr"><span class="fb pbe">A<br>B</span><span class="fb">M<br>N</span><span class="fb">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid hl"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid hl"><span class="lb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vl"><span class="lb pbs">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="lb">A<br>B</span><span class="lb">M<br>N</span></div>
+<div class="grid vr"><span class="lb pbe">A<br>B</span><span class="lb">M<br>N</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="fb vl">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb vl">X<br>Z</span></div>
+<div class="grid c hl"><span class="fb vl pbe">A<br>B</span><span class="fb vl">M<br>N</span><span class="fb vl">X<br>Z</span></div>
+<div class="grid c vl"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div>
+<div class="grid c vl" style="inline-size:100px"><span class="fb hl pbs">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div>
+<div class="grid c vr"><span class="fb hl">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div>
+<div class="grid c vr"><span class="fb hl pbe">A<br>B</span><span class="fb hl">M<br>N</span><span class="fb hl">X<br>Z</span></div>
+
+<br clear="all">
+
+<div class="grid c hl"><span class="lb vl">A<br>B</span><span class="lb vl">M<br>N</span></div>
+<div class="grid c hl"><span class="lb vl pbe">A<br>B</span><span class="lb vl">M<br>N</span></div>
+<div class="grid c vl"><span class="lb hl">A<br>B</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vl"><span class="lb hl pbs">A<br>B</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vr"><span class="lb hl">A<br>B</span><span class="lb hl">M<br>N</span></div>
+<div class="grid c vr" style="inline-size:100px"><span class="lb hl pbe">A<br>B</span><span class="lb hl">M<br>N</span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-001-ref.html
new file mode 100644
index 0000000000..817f19ff84
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-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: align-self/justify-self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+    color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+body { width:600px; height:600px; border:1px solid; box-sizing:border-box; }
+
+.grid {
+  float: left;
+  display: grid;
+  grid: auto / repeat(4, auto);
+  place-items: start;
+  padding-block-start: 1px;
+  margin-left: 1px;
+  border:1px solid;
+}
+.c {
+  grid: repeat(4, auto) / auto;
+}
+
+span {
+  text-decoration: underline lime;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0;
+  text-decoration-skip-ink: none;
+  background: grey;
+}
+.central > span { text-decoration-line: line-through; }
+x { display:block; visibility:hidden; }
+span:nth-child(1) { font-size:10px; }
+span:nth-child(2) { font-size:15px; }
+span:nth-child(3) { font-size:25px; }
+span:nth-child(4) { font-size:30px; }
+.pbe { padding-block-end:20px; }
+.pbs { padding-block-start:20px; }
+
+.fb { align-self:baseline; }
+.lb { align-self:last baseline; }
+
+.jfb { justify-self:baseline; }
+.jlb { justify-self:last baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vll { writing-mode: vertical-lr; direction:ltr; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+.vrr { writing-mode: vertical-rl; direction:rtl; }
+.swl { writing-mode: sideways-lr; }
+.swr { writing-mode: sideways-rl; }
+
+</style>
+</head>
+<body>
+
+<div class="grid"><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div>
+<div class="grid"><span class="fb hl pbe">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div>
+<div class="grid vll central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid vll central"><span class="fb pbs">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid vlr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid vrr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid vrr central"><span class="fb pbe">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid vrl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid swl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid swr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+
+<br clear="all">
+
+<div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+
+<br clear="all">
+
+<div class="grid c central"><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div>
+<div class="grid c central"><span class="jfb vll pbe">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div>
+<div class="grid c vll"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<!-- TODO: baseline alignment affects intrinsic inline size
+<div class="grid c vll"><span class="jfb hl pbs">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+-->
+<div class="grid c vll" style="height:80px"><span class="jfb hl pbs">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<!-- TODO
+<div class="grid c vrr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<div class="grid c vrr"><span class="jfb hl pbe">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<div class="grid c swl"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+-->
+<div class="grid c swr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+
+<br clear="all">
+
+<div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vll central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrr central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+
+<br clear="all">
+
+<div class="grid vlr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrl central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-001.html
new file mode 100644
index 0000000000..bb486d983d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-001.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>CSS Grid Test: align-self/justify-self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+  <link rel="match" href="masonry-grid-item-self-baseline-001-ref.html">
+  <style>
+html,body {
+    color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+body { width:600px; height:600px; border:1px solid; box-sizing:border-box; }
+
+.grid {
+  float: left;
+  display: grid;
+  grid: masonry / repeat(4, auto);
+  place-items: start;
+  padding-block-start: 1px;
+  margin-left: 1px;
+  border:1px solid;
+}
+.c {
+  grid: repeat(4, auto) / masonry;
+}
+
+span {
+  text-decoration: underline lime;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0;
+  text-decoration-skip-ink: none;
+  background: grey;
+}
+.central > span { text-decoration-line: line-through; }
+x { display:block; visibility:hidden; }
+span:nth-child(1) { font-size:10px; }
+span:nth-child(2) { font-size:15px; }
+span:nth-child(3) { font-size:25px; }
+span:nth-child(4) { font-size:30px; }
+.pbe { padding-block-end:20px; }
+.pbs { padding-block-start:20px; }
+
+.fb { align-self:baseline; }
+.lb { align-self:last baseline; }
+
+.jfb { justify-self:baseline; }
+.jlb { justify-self:last baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vll { writing-mode: vertical-lr; direction:ltr; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+.vrr { writing-mode: vertical-rl; direction:rtl; }
+.swl { writing-mode: sideways-lr; }
+.swr { writing-mode: sideways-rl; }
+
+</style>
+</head>
+<body>
+
+<div class="grid"><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div>
+<div class="grid"><span class="fb hl pbe">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div>
+<div class="grid vll central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid vll central"><span class="fb pbs">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid vlr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid vrr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid vrr central"><span class="fb pbe">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid vrl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid swl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid swr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+
+<br clear="all">
+
+<div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+
+<br clear="all">
+
+<div class="grid c central"><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div>
+<div class="grid c central"><span class="jfb vll pbe">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div>
+<div class="grid c vll"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<!-- TODO: baseline alignment affects intrinsic inline size
+<div class="grid c vll"><span class="jfb hl pbs">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+-->
+<div class="grid c vll" style="height:80px"><span class="jfb hl pbs">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<!-- TODO
+<div class="grid c vrr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<div class="grid c vrr"><span class="jfb hl pbe">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<div class="grid c swl"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+-->
+<div class="grid c swr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+
+<br clear="all">
+
+<div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vll central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrr central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+
+<br clear="all">
+
+<div class="grid vlr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrl central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002a-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002a-ref.html
new file mode 100644
index 0000000000..ddce4e34a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002a-ref.html
@@ -0,0 +1,102 @@
+<!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: align-self/justify-self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+    color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+body { width:600px; height:600px; border:1px solid; box-sizing:border-box; }
+
+.grid {
+  float: left;
+  display: grid;
+  grid: auto / repeat(4, auto);
+  place-items: start;
+  padding-block-start: 1px;
+  margin-left: 1px;
+  border:1px solid;
+  height: 100px;
+  width: 100px;
+}
+.c { grid: repeat(4, auto) / auto; }
+.ae { align-content: end; }
+.je { justify-content: end; }
+
+span {
+  text-decoration: underline lime;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0;
+  text-decoration-skip-ink: none;
+  background: grey;
+}
+.central > span { text-decoration-line: line-through; }
+x { display:block; visibility:hidden; }
+span:nth-child(1) { font-size:10px; }
+span:nth-child(2) { font-size:15px; }
+span:nth-child(3) { font-size:25px; }
+span:nth-child(4) { font-size:30px; }
+.pbe { padding-block-end:20px; }
+.pbs { padding-block-start:20px; }
+
+.fb { align-self:baseline; }
+.lb { align-self:last baseline; }
+
+.jfb { justify-self:baseline; }
+.jlb { justify-self:last baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vll { writing-mode: vertical-lr; direction:ltr; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+.vrr { writing-mode: vertical-rl; direction:rtl; }
+.swl { writing-mode: sideways-lr; }
+.swr { writing-mode: sideways-rl; }
+
+</style>
+</head>
+<body>
+
+<div class="grid ae"><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div>
+<div class="grid ae"><span class="fb hl pbe">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div>
+<div class="grid ae vll central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid ae vll central"><span class="fb pbs">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid ae vlr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+
+<br clear="all">
+
+<div class="grid ae vrr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid ae vrr central"><span class="fb pbe">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid ae vrl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid ae swl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid ae swr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+
+<br clear="all">
+
+<div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+
+<br clear="all">
+
+<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid je c central"><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div>
+<div class="grid je c central"><span class="jfb vll pbe">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div>
+
+<br clear="all">
+
+<div class="grid je c vll"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<div class="grid je c vll"><span class="jfb hl pbs">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002a.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002a.html
new file mode 100644
index 0000000000..6708e58332
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002a.html
@@ -0,0 +1,105 @@
+<!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: align-self/justify-self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+  <link rel="match" href="masonry-grid-item-self-baseline-002a-ref.html">
+  <style>
+html,body {
+    color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+body { width:600px; height:600px; border:1px solid; box-sizing:border-box; }
+
+.grid {
+  float: left;
+  display: grid;
+  grid: masonry / repeat(4, auto);
+  place-items: start;
+  padding-block-start: 1px;
+  margin-left: 1px;
+  border:1px solid;
+  masonry-auto-flow: next;
+  height: 100px;
+  width: 100px;
+}
+.c { grid: repeat(4, auto) / masonry; }
+.ae { align-content: end; }
+.je { justify-content: end; }
+
+span {
+  text-decoration: underline lime;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0;
+  text-decoration-skip-ink: none;
+  background: grey;
+}
+.central > span { text-decoration-line: line-through; }
+x { display:block; background:yellow; visibility:hidden; }
+span:nth-child(1) { font-size:10px; }
+span:nth-child(2) { font-size:15px; }
+span:nth-child(3) { font-size:25px; }
+span:nth-child(4) { font-size:30px; }
+.pbe { padding-block-end:20px; }
+.pbs { padding-block-start:20px; }
+
+.fb { align-self:baseline; }
+.lb { align-self:last baseline; }
+
+.jfb { justify-self:baseline; }
+.jlb { justify-self:last baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vll { writing-mode: vertical-lr; direction:ltr; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+.vrr { writing-mode: vertical-rl; direction:rtl; }
+.swl { writing-mode: sideways-lr; }
+.swr { writing-mode: sideways-rl; }
+
+</style>
+</head>
+<body>
+
+<div class="grid ae"><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div>
+<div class="grid ae"><span class="fb hl pbe">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span><span class="fb hl">F<br><x>x</x></span></div>
+<div class="grid ae vll central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid ae vll central"><span class="fb pbs">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid ae vlr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+
+<br clear="all">
+
+<div class="grid ae vrr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid ae vrr central"><span class="fb pbe">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid ae vrl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid ae swl central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+<div class="grid ae swr central"><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span><span class="fb">F<br><x>x</x></span></div>
+
+<br clear="all">
+
+<div class="grid"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+
+<br clear="all">
+
+<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid je c central"><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div>
+<div class="grid je c central"><span class="jfb vll pbe">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span><span class="jfb vll">F<br><x>x</x></span></div>
+
+<br clear="all">
+
+<div class="grid je c vll"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<div class="grid je c vll"><span class="jfb hl pbs">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002b-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002b-ref.html
new file mode 100644
index 0000000000..44d8266436
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002b-ref.html
@@ -0,0 +1,97 @@
+<!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: align-self/justify-self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+    color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+body { width:600px; height:600px; border:1px solid; box-sizing:border-box; }
+
+.grid {
+  float: left;
+  display: grid;
+  grid: auto / repeat(4, auto);
+  place-items: start;
+  padding-block-start: 1px;
+  margin-left: 1px;
+  border:1px solid;
+  height: 100px;
+  width: 100px;
+}
+.c { grid: repeat(4, auto) / auto; }
+.ae { align-content: end; }
+.je { justify-content: end; }
+
+span {
+  text-decoration: underline lime;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0;
+  text-decoration-skip-ink: none;
+  background: grey;
+}
+.central > span { text-decoration-line: line-through; }
+x { display:block; visibility:hidden; }
+span:nth-child(1) { font-size:10px; }
+span:nth-child(2) { font-size:15px; }
+span:nth-child(3) { font-size:25px; }
+span:nth-child(4) { font-size:30px; }
+.pbe { padding-block-end:20px; }
+.pbs { padding-block-start:20px; }
+
+.fb { align-self:baseline; }
+.lb { align-self:last baseline; }
+
+.jfb { justify-self:baseline; }
+.jlb { justify-self:last baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vll { writing-mode: vertical-lr; direction:ltr; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+.vrr { writing-mode: vertical-rl; direction:rtl; }
+.swl { writing-mode: sideways-lr; }
+.swr { writing-mode: sideways-rl; }
+
+</style>
+</head>
+<body>
+
+<!-- TODO: baseline alignment is wrong (bug 1633610)
+<div class="grid je c vrr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<div class="grid je c vrr"><span class="jfb hl pbe">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<div class="grid je c swl"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+-->
+<div class="grid je c swr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<div class="grid ae"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+
+<br clear="all">
+
+<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vll central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrr central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+
+<br clear="all">
+
+<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vlr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrl central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+
+<br clear="all">
+
+<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002b.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002b.html
new file mode 100644
index 0000000000..34911b7c9f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/baseline/masonry-grid-item-self-baseline-002b.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>CSS Grid Test: align-self/justify-self:baseline/last baseline</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self">
+  <link rel="match" href="masonry-grid-item-self-baseline-002b-ref.html">
+  <style>
+html,body {
+    color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+body { width:600px; height:600px; border:1px solid; box-sizing:border-box; }
+
+.grid {
+  float: left;
+  display: grid;
+  grid: masonry / repeat(4, auto);
+  place-items: start;
+  padding-block-start: 1px;
+  margin-left: 1px;
+  border:1px solid;
+  masonry-auto-flow: next;
+  height: 100px;
+  width: 100px;
+}
+.c { grid: repeat(4, auto) / masonry; }
+.ae { align-content: end; }
+.je { justify-content: end; }
+
+span {
+  text-decoration: underline lime;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0;
+  text-decoration-skip-ink: none;
+  background: grey;
+}
+.central > span { text-decoration-line: line-through; }
+x { display:block; background:yellow; visibility:hidden; }
+span:nth-child(1) { font-size:10px; }
+span:nth-child(2) { font-size:15px; }
+span:nth-child(3) { font-size:25px; }
+span:nth-child(4) { font-size:30px; }
+.pbe { padding-block-end:20px; }
+.pbs { padding-block-start:20px; }
+
+.fb { align-self:baseline; }
+.lb { align-self:last baseline; }
+
+.jfb { justify-self:baseline; }
+.jlb { justify-self:last baseline; }
+
+.hl { writing-mode: horizontal-tb; direction:ltr; }
+.hr { writing-mode: horizontal-tb; direction:rtl; }
+.vll { writing-mode: vertical-lr; direction:ltr; }
+.vlr { writing-mode: vertical-lr; direction:rtl; }
+.vrl { writing-mode: vertical-rl; direction:ltr; }
+.vrr { writing-mode: vertical-rl; direction:rtl; }
+.swl { writing-mode: sideways-lr; }
+.swr { writing-mode: sideways-rl; }
+
+</style>
+</head>
+<body>
+
+<!-- TODO: baseline alignment is wrong (bug 1633610)
+<div class="grid je c vrr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<div class="grid je c vrr"><span class="jfb hl pbe">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+<div class="grid je c swl"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+-->
+<div class="grid je c swr"><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span><span class="jfb hl">F<br><x>x</x></span></div>
+
+<div class="grid ae"><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+
+<br clear="all">
+
+<div class="grid"><span class="lb hl pbe"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span><span class="lb hl"><x>x</x><br>L</span></div>
+<div class="grid vll central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vll central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrr central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+
+<br clear="all">
+
+<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vlr central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vlr central"><span class="lb pbs"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid vrl central"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+
+<br clear="all">
+
+<div class="grid vrl central"><span class="lb pbe"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swl"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+<div class="grid swr"><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span><span class="lb"><x>x</x><br>L</span></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-001-ref.html
new file mode 100644
index 0000000000..c9318ae0bb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-001-ref.html
@@ -0,0 +1,333 @@
+<!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: Masonry layout fragmentation</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;
+}
+wrapper {
+  display: block;
+  width: 600px;
+  height: 600px;
+  overflow: hidden;
+}
+.columns {
+  width: 330px;
+  columns: 6;
+  column-fill: auto;
+  column-gap: 1px;
+  background-color: rgba(80,80,80,.2);
+  margin-bottom: 10px;
+}
+.columns:nth-child(2n) {
+  background-color: rgba(10,100,10,.5);
+}
+.grid {
+  display: flow-root;
+  border: 1px solid;
+  gap: 2px;
+}
+.first { border-bottom-width:0; height:calc(100% - 1px); }
+.middle { border-top-width:0; border-bottom-width:0; height:100%; }
+.last { border-top-width:0; }
+x {
+  background: cyan;
+  height: 5px;
+}
+y {
+  background: blue;
+  height: 10px;
+}
+z {
+  background: pink;
+  height: 12px;
+}
+masonry-track {
+  float: left;
+  height: 100%;
+  gap: 2px;
+}
+x,y,z,masonry-track { display: block; }
+masonry-track > * { margin-bottom:2px; }
+.last > masonry-track > :last-child { margin-bottom:0; }
+masonry-track:nth-child(1) { width: 10px; }
+masonry-track:nth-child(2) { width: 15px; margin-left:2px; }
+masonry-track:nth-child(3) { width: 20px; margin-left:2px; }
+</style></head>
+<body>
+<wrapper>
+<div class="columns">
+  <div class="grid first">
+    <masonry-track><x></x><y></y><y></y><y></y><x></x><x></x><x></x><x></x></masonry-track>
+    <masonry-track><x></x><z></z><x></x><x></x><x></x><z></z><z></z></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z><x></x><y></y><x></x><x></x><y style="height:9px"></y></masonry-track>
+  </div>
+  <div class="grid last" style="height:1px">
+    <masonry-track></masonry-track>
+    <masonry-track></masonry-track>
+    <masonry-track><y style="height:1px"></y></masonry-track>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="grid first">
+    <masonry-track><x></x><y></y><y></y><y></y><x></x><x></x><x></x></masonry-track>
+    <masonry-track><x></x><z></z><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z><x></x><y></y><x></x><x></x></masonry-track>
+  </div>
+  <div class="grid last" style="height:12px">
+    <masonry-track><z></z></masonry-track>
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><y></y></masonry-track>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="grid first">
+    <masonry-track><x></x><y></y><y></y><y></y><x></x><x></x></masonry-track>
+    <masonry-track><x></x><z></z><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z><x></x><y></y></masonry-track>
+  </div>
+  <div class="grid last" style="height:24px">
+    <masonry-track><x></x><x></x><y></y></masonry-track>
+    <masonry-track><z></z></masonry-track>
+    <masonry-track><x></x><x></x></masonry-track>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="grid first">
+    <masonry-track><x></x><y></y><y></y><y></y></masonry-track>
+    <masonry-track><x></x><z></z><x></x><x></x><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z><x></x><y style="height:5px;"></y></masonry-track>
+  </div>
+  <div class="grid last" style="height:31px">
+    <masonry-track><z></z><z></z></masonry-track>
+    <masonry-track><x></x><x></x><x></x><x></x></masonry-track>
+    <masonry-track><y style="height:5px"></y><x></x><x></x><y></y></masonry-track>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="grid first">
+    <masonry-track><x></x><y></y><y></y><y style="height:6px;"></y></masonry-track>
+    <masonry-track><x></x><z></z><x></x><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><y style="height:4px;"></y><z></z><z></z></masonry-track>
+    <masonry-track><x></x><y></y><x></x><x></x><y style="height:5px;"></y></masonry-track>
+    <masonry-track><x></x><x></x><x></x><x></x><x></x></masonry-track>
+  </div>
+  <div class="grid last" style="height:5px">
+    <masonry-track></masonry-track>
+    <masonry-track><y style="height:5px;"></y></masonry-track>
+    <masonry-track></masonry-track>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="grid first">
+    <masonry-track><x></x><y></y><y style="height:8px;"></y></masonry-track>
+    <masonry-track><x></x><z></z><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><y style="height:2px;"></y><y></y><y></y></masonry-track>
+    <masonry-track><z></z><x></x><x></x></masonry-track>
+    <masonry-track><x></x><x></x><z></z></masonry-track>
+  </div>
+  <div class="grid last" style="height:24px">
+    <masonry-track><x></x><x></x><x></x></masonry-track>
+    <masonry-track><x></x><x></x><y></y></masonry-track>
+    <masonry-track><z></z></masonry-track>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="grid first">
+    <masonry-track><x></x><y></y></masonry-track>
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><x></x><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z></z></masonry-track>
+    <masonry-track><x></x><x></x><y style="height:4px;"></y></masonry-track>
+    <masonry-track><y></y></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z></z></masonry-track>
+    <masonry-track><y style="height:6px;"></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><y style="height:4px;"></y></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z></z></masonry-track>
+    <masonry-track><x></x><x></x></masonry-track>
+    <masonry-track><y style="height:6px;"></y><x></x></masonry-track>
+  </div>
+  <div class="grid last">
+    <masonry-track><z></z></masonry-track>
+    <masonry-track><x></x><x></x></masonry-track>
+    <masonry-track><x></x><y></y></masonry-track>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="grid first">
+    <masonry-track><x></x><y style="height:4px;"></masonry-track>
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><y style="height:6px;"></y><y style="height:4px;"></y></masonry-track>
+    <masonry-track><z style="height:12px;"></z></masonry-track>
+    <masonry-track><x></x><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><y style="height:6px;"></y><y style="height:4px;"></y></masonry-track>
+    <masonry-track><x></x><x></x></masonry-track>
+    <masonry-track><z style="height:12px;"></z></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><y style="height:6px;"></y></masonry-track>
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><x></x><y style="height:5px;"></y></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z style="height:12px;"></z></masonry-track>
+    <masonry-track><x></x><x></x></masonry-track>
+    <masonry-track><y style="height:5px;"></y><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z style="height:12px;"></z></masonry-track>
+    <masonry-track><x></x><x></x></masonry-track>
+    <masonry-track><x></x><y style="height:5px;"></y></masonry-track>
+  </div>
+  <div class="grid last" style="height:5px;">
+    <masonry-track></masonry-track>
+    <masonry-track></masonry-track>
+    <masonry-track><y style="height:5px;"></y></masonry-track>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="grid first">
+    <masonry-track><x></x><y style="height:3px;"></masonry-track>
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><y style="height:7px;"></y><y style="height:3px;"></y></masonry-track>
+    <masonry-track><z style="height:11px;"></z></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><y style="height:8px;"></y></masonry-track>
+    <masonry-track><z style="height:1px;"></z><x></x><y style="height:1px;"></y></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z style="height:11px;"></z></masonry-track>
+    <masonry-track><y style="height:9px;"></y></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z style="height:1px;"></z></masonry-track>
+    <masonry-track><x></x><y style="height:4px;"></y></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z style="height:11px;"></z></masonry-track>
+    <masonry-track><y style="height:6px;"></y></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z style="height:1px;"></z></masonry-track>
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z style="height:11px;"></z></masonry-track>
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><x></x><y style="height:4px;"></y></masonry-track>
+  </div>
+  <div class="grid last" style="height:6px;">
+    <masonry-track><z style="height:1px;"></z></masonry-track>
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><y style="height:6px;"></y></masonry-track>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="grid first">
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><y style="height:8px;"></y></masonry-track>
+    <masonry-track><z style="height:8px;"></z></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><y style="height:2px;"></y><y style="height:4px;"></y></masonry-track>
+    <masonry-track><z style="height:4px;"></z></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><y style="height:6px;"></y></masonry-track>
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><z style="height:8px;"></z></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><y style="height:8px;"></y></masonry-track>
+    <masonry-track><z style="height:4px;"></z></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><x></x><y style="height:1px;"></y></masonry-track>
+    <masonry-track><y style="height:2px;"></y></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><y style="height:8px;"></y></masonry-track>
+    <masonry-track><z style="height:8px;"></z></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><y style="height:1px;"></y><x></x></masonry-track>
+    <masonry-track><z style="height:4px;"></z></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z style="height:8px;"></z></masonry-track>
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><x></x><y style="height:1px;"></y></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z style="height:4px;"></z></masonry-track>
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><y style="height:8px;"></y></masonry-track>
+  </div>
+  <div class="grid last" style="height:1px;">
+    <masonry-track></masonry-track>
+    <masonry-track></masonry-track>
+    <masonry-track><y style="height:1px;"></y></masonry-track>
+  </div>
+</div>
+<script>
+let elts = document.querySelectorAll(".columns");
+let heights = [ 78, 68, 58, 48, 38, 28, 18, 12, 11, 8 ];
+for (let i = 0; i < heights.length; ++i) {
+  elts[i].style.height = heights[i] + "px";
+}
+</script>
+</wrapper>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-001.html
new file mode 100644
index 0000000000..69182c5425
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-001.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: Masonry layout fragmentation</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="masonry-fragmentation-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+wrapper {
+  display: block;
+  width: 600px;
+  height: 600px;
+  overflow: hidden;
+}
+.columns {
+  width: 330px;
+  columns: 6;
+  column-fill: auto;
+  column-gap: 1px;
+  background-color: rgba(80,80,80,.2);
+  margin-bottom: 10px;
+}
+.columns:nth-child(2n) {
+  background-color: rgba(10,100,10,.5);
+}
+.grid {
+  display: grid;
+  grid-template-columns: 10px 15px 20px;
+  grid-template-rows: masonry;
+  border: 1px solid;
+  gap: 2px;
+}
+x {
+  background: cyan;
+  height: 5px;
+  break-inside: avoid;
+}
+x:nth-child(4n) {
+  background: blue;
+  height: 10px;
+  break-inside: auto;
+}
+x:nth-child(5n) {
+  background: pink;
+  height: 12px;
+  break-inside: avoid;
+}
+</style></head>
+<body>
+<wrapper style="display:none">
+<div style="display:none">
+<div class="columns">
+  <div class="grid">
+    <x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
+    <x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
+  </div>
+</div>
+</div>
+<script>
+let wrapper = document.querySelectorAll("wrapper")[0];
+let tmplt = document.querySelectorAll(".columns")[0];
+let heights = [ 78, 68, 58, 48, 38, 28, 18, 12, 11, 8 ];
+for (let h of heights) {
+  let e = tmplt.cloneNode(true);
+  e.style.height = h + "px";
+  wrapper.appendChild(e);
+}
+wrapper.style.display="";
+</script>
+</wrapper>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-002-ref.html
new file mode 100644
index 0000000000..ea21350f43
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-002-ref.html
@@ -0,0 +1,132 @@
+<!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: Masonry layout fragmentation</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;
+}
+wrapper {
+  display: block;
+  width: 600px;
+  height: 600px;
+  overflow: hidden;
+}
+.columns {
+  width: 330px;
+  columns: 6;
+  column-fill: auto;
+  column-gap: 1px;
+  background-color: rgba(80,80,80,.2);
+  margin-bottom: 10px;
+}
+.columns:nth-child(2n) {
+  background-color: rgba(10,100,10,.5);
+}
+.grid {
+  display: flow-root;
+  border: 1px solid;
+  gap: 2px;
+}
+.first { border-bottom-width:0; height:calc(100% - 1px); }
+.middle { border-top-width:0; border-bottom-width:0; height:100%; }
+.last { border-top-width:0; }
+x {
+  background: cyan;
+  height: 5px;
+}
+y {
+  background: blue;
+  height: 10px;
+}
+.c1 { width: 27px; }
+.c2 { width: 37px; }
+s { height: 10px; }
+z {
+  background: pink;
+  height: 12px;
+}
+masonry-track {
+  float: left;
+  height: 100%;
+  gap: 2px;
+}
+x,y,s,z,masonry-track { display: block; }
+masonry-track > * { margin-bottom:2px; }
+masonry-track.last > :last-child { margin-bottom:0; }
+masonry-track:nth-child(1) { width: 10px; }
+masonry-track:nth-child(2) { width: 15px; margin-left:2px; }
+masonry-track:nth-child(3) { width: 20px; margin-left:2px; }
+</style></head>
+<body>
+<wrapper>
+<div class="columns">
+  <div class="grid first">
+    <masonry-track><x></x><y class="c1"></y><x></x><y class="c1"></y><x></x></masonry-track>
+    <masonry-track><x></x><s></s><x></x><s style="margin-bottom:6px"></s><y class="c2" style="height:5px"></y></masonry-track>
+    <masonry-track><x></x><z></z><x></x><z></z></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><x></x><x></x><s style="height:5px"></s><y class="c1"></y><z class="c1"></z><y class="c1" style="height:1px"></y></masonry-track>
+    <masonry-track><y class="c2" style="height:5px"></y><z></z></masonry-track>
+    <masonry-track><s style="height:5px"></s><x></x><x></x><x></x><x></x><x></x><x></x></masonry-track>
+  </div>
+  <div class="grid last" style="height:9px">
+    <masonry-track><y style="height:9px" class="c1"></y></masonry-track>
+    <masonry-track></masonry-track>
+    <masonry-track></masonry-track>
+  </div>
+</div>
+
+<div class="columns">
+  <div class="grid first">
+    <masonry-track><x></x><y class="c1"></masonry-track>
+    <masonry-track><x></x></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z></z></masonry-track>
+    <masonry-track><x></x><y class="c2"></y></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><x></x><s style="height:5px"></s><y style="height:4px" class="c1"></y></masonry-track>
+    <masonry-track><z></z></masonry-track>
+    <masonry-track><x></x><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><y style="height:6px" class="c1"></y><y class="c1"></y></masonry-track>
+    <masonry-track></masonry-track>
+    <masonry-track><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z></z></masonry-track>
+    <masonry-track><x></x><x></x></masonry-track>
+    <masonry-track><x></x><x></x></masonry-track>
+  </div>
+  <div class="grid middle">
+    <masonry-track><z class="c1"></z><y style="height:4px" class="c1"></y></masonry-track>
+    <masonry-track></masonry-track>
+    <masonry-track><x></x><x></x></masonry-track>
+  </div>
+  <div class="grid last" style="height:6px;">
+    <masonry-track><y style="height:6px" class="c1"></y></masonry-track>
+    <masonry-track></masonry-track>
+    <masonry-track></masonry-track>
+  </div>
+</div>
+<script>
+let elts = document.querySelectorAll(".columns");
+let heights = [ 48, 18 ];
+for (let i = 0; i < heights.length; ++i) {
+  elts[i].style.height = heights[i] + "px";
+}
+</script>
+</wrapper>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-002.html
new file mode 100644
index 0000000000..01c4de00b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-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>CSS Grid Test: Masonry layout fragmentation</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="masonry-fragmentation-002-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+wrapper {
+  display: block;
+  width: 600px;
+  height: 600px;
+  overflow: hidden;
+}
+.columns {
+  width: 330px;
+  columns: 6;
+  column-fill: auto;
+  column-gap: 1px;
+  background-color: rgba(80,80,80,.2);
+  margin-bottom: 10px;
+}
+.columns:nth-child(2n) {
+  background-color: rgba(10,100,10,.5);
+}
+.grid {
+  display: grid;
+  grid-template-columns: 10px 15px 20px;
+  grid-template-rows: masonry;
+  border: 1px solid;
+  gap: 2px;
+}
+x {
+  background: cyan;
+  height: 5px;
+  break-inside: avoid;
+}
+x:nth-child(4n) {
+  grid-column: span 2;
+  background: blue;
+  height: 10px;
+  break-inside: auto;
+}
+x:nth-child(5n) {
+  background: pink;
+  height: 12px;
+  break-inside: avoid;
+}
+</style></head>
+<body>
+<wrapper style="display:none">
+<div style="display:none">
+<div class="columns">
+  <div class="grid">
+    <x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
+    <x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
+  </div>
+</div>
+</div>
+<script>
+let wrapper = document.querySelectorAll("wrapper")[0];
+let tmplt = document.querySelectorAll(".columns")[0];
+let heights = [ 48, 18 ];
+for (let h of heights) {
+  let e = tmplt.cloneNode(true);
+  e.style.height = h + "px";
+  wrapper.appendChild(e);
+}
+wrapper.style.display="";
+</script>
+</wrapper>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-003-ref.html
new file mode 100644
index 0000000000..9d1036dfeb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-003-ref.html
@@ -0,0 +1,114 @@
+<!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 axis fragmentation with column masonry layout</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;
+}
+wrapper {
+  display: block;
+  width: 600px;
+  height: 600px;
+  overflow: hidden;
+}
+
+.columns {
+  columns: 3;
+  column-fill: auto;
+  background: lightgrey;
+  margin-bottom: 15px;
+}
+
+.grid {
+  display: grid;
+  grid: 20px auto 30px / auto;
+  border: solid;
+  border-width: 3px 1px 7px 5px;
+  padding: 1px 3px 5px 7px;
+  gap: 1px 5px;
+}
+
+x {
+  background: cyan;
+  min-width: 20px;
+  min-height: 10px;
+}
+y {
+  background: blue;
+  width: 35px;
+}
+z {
+  background: gray;
+  width: 40px;
+}
+masonry-track {
+  display: grid;
+  justify-content: start;
+  column-gap: 5px;
+}
+</style>
+</head>
+<body>
+<wrapper style="display:none">
+<div class="columns" style="height:90px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+<div class="columns" style="height:68px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+<div class="columns" style="height:48px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+<div class="columns" style="height:38px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+<div class="columns" style="height:28px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+<div class="columns" style="height:18px">
+  <div class="grid">
+    <masonry-track><x></x><y></y><y></y><x></x></masonry-track>
+    <masonry-track><x></x><x></x><x></x><z></z></masonry-track>
+    <masonry-track><z></z><z></z><x></x><z></z></masonry-track>
+  </div>
+</div>
+</wrapper>
+
+<script>
+let wrapper = document.querySelectorAll("wrapper")[0];
+let grids = document.querySelectorAll(".grid");
+for (let e of grids) {
+  for (let track of e.children) {
+    track.style.gridTemplateColumns = "repeat(" + track.children.length + ",auto)";
+  }
+}
+wrapper.style.display="";
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-003.html
new file mode 100644
index 0000000000..fe150e7f83
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/fragmentation/masonry-fragmentation-003.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: Grid axis fragmentation with column masonry layout</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="masonry-fragmentation-003-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+wrapper {
+  display: block;
+  width: 600px;
+  height: 600px;
+  overflow: hidden;
+}
+
+.columns {
+  columns: 3;
+  column-fill: auto;
+  background: lightgrey;
+  margin-bottom: 15px;
+}
+
+.grid {
+  display: grid;
+  grid: 20px auto 30px / masonry;
+  border: solid;
+  border-width: 3px 1px 7px 5px;
+  padding: 1px 3px 5px 7px;
+  gap: 1px 5px;
+}
+
+.grid > * {
+  background: cyan;
+  min-width: 20px;
+  min-height: 10px;
+}
+.grid > :nth-child(4n) {
+  background: blue;
+  width: 35px;
+}
+.grid > :nth-child(3n) {
+  background: gray;
+  width: 40px;
+}
+</style>
+</head>
+<body>
+<wrapper style="display:none">
+<div style="display:none">
+<div class="columns">
+  <div class="grid">
+    <x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x><x></x>
+  </div>
+</div>
+</div>
+<script>
+let wrapper = document.querySelectorAll("wrapper")[0];
+let tmplt = document.querySelectorAll(".columns")[0];
+let heights = [ 90, 68, 48, 38, 28, 18 ];
+for (let h of heights) {
+  let e = tmplt.cloneNode(true);
+  e.style.height = h + "px";
+  wrapper.appendChild(e);
+}
+wrapper.style.display="";
+</script>
+</wrapper>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/masonry-gap-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/masonry-gap-001-ref.html
new file mode 100644
index 0000000000..031629e926
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/masonry-gap-001-ref.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>Reference: Masonry layout with definite `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:25px/1 "Courier New", monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 10px 20px;
+  grid-template-columns:  auto min-content repeat(2,auto);
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  padding: 20px;
+  margin: 3px;
+  border: 5px solid blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item>1</item>
+  <item style="padding:0; place-self:start; min-width:0">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="order:1; width:0; margin-right:-23px; margin-top:-37px; align-self:start">5</item>
+  <item>6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/masonry-gap-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/masonry-gap-001.html
new file mode 100644
index 0000000000..673bbe40e4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/gap/masonry-gap-001.html
@@ -0,0 +1,45 @@
+<!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: Masonry layout with definite `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="masonry-gap-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:25px/1 "Courier New", monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 10px 20px;
+  grid-template-columns:  repeat(4,auto);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  padding: 20px;
+  margin: 3px;
+  border: 5px solid blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item>1</item>
+  <item style="padding:0">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-001-ref.html
new file mode 100644
index 0000000000..c99b117f2e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-001-ref.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>Reference: Placement involving named lines</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+body,html { color:black; background:white; font-size:15px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  position: relative;
+  border: 1px solid;
+  grid-gap: 1px;
+  grid-auto-flow: dense;
+}
+.t1 {
+  grid-template-columns: 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px;
+
+}
+.t2 {
+  grid-template-columns: 40px 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px;
+}
+
+x {
+  background: grey;
+  border: 1px solid;
+}
+y {
+  position: absolute;
+  border-top: 1px solid blue;
+  bottom:0;height:0;left:0;right:0;
+}
+
+  </style>
+</head>
+<body>
+
+<pre>grid-column-start:</pre>
+<div class="grid t1" style="padding-right:13px; border-right-width:5px">
+<x style="grid-column-start:4; background:grey"></x>
+<x style="grid-column-start:7">-1</x>
+<x style="grid-column-start:7">4</x>
+<x style="grid-column-start:6">-2</x>
+<x style="grid-column-start:5">-3</x>
+<x style="grid-column-start:4">-4</x>
+<x style="grid-column-start:3">-5</x>
+<x style="grid-column-start:5">A -1</x>
+<x style="grid-column-start:3">B -1</x>
+<x style="grid-column-start:4">A -2</x>
+<x style="grid-column-start:3">A -3</x>
+<x style="grid-column-start:2">A -4</x>
+<x style="grid-column-start:1">A -5</x>
+<x style="grid-column-start:4">A</x>
+<x style="grid-column-start:4">B</x>
+<x style="grid-column-start:4">A 1</x>
+<x style="grid-column-start:5">A 2</x>
+<x style="grid-column-start:8">A 3</x>
+<x style="grid-column-start:9">A 4</x>
+<x style="grid-column-start:10">A 5</x>
+<y style="grid-column-start:7; top:0"></y>
+<y style="grid-column-start:7; top:2px"></y>
+<y style="grid-column-start:6; top:4px"></y>
+<y style="grid-column-start:5; top:6px"></y>
+<y style="grid-column-start:4; top:8px"></y>
+<y style="grid-column-start:3; top:10px"></y>
+<y style="grid-column-start:5; top:12px"></y>
+<y style="grid-column-start:3; top:14px"></y>
+<y style="grid-column-start:4; top:16px"></y>
+<y style="grid-column-start:3; top:18px"></y>
+<y style="grid-column-start:2; top:20px"></y>
+<y style="grid-column-start:1; top:22px"></y>
+<y style="grid-column-start:4; top:24px"></y>
+<y style="grid-column-start:4; top:26px"></y>
+<y style="grid-column-start:4; top:28px"></y>
+<y style="grid-column-start:5; top:30px"></y>
+<y style="grid-column-start:8; top:32px"></y>
+<y style="grid-column-start:9; top:34px"></y>
+<y style="grid-column-start:10; top:36px"></y>
+</div>
+
+<pre>grid-column-end:</pre>
+<div class="grid t2" style="padding-left:13px;">
+<x style="grid-column-start:5; background:grey"></x>
+<x style="grid-column-start:7">-1</x>
+<x style="grid-column-start:7">4</x>
+<x style="grid-column-start:6">-2</x>
+<x style="grid-column-start:5">-3</x>
+<x style="grid-column-start:4">-4</x>
+<x style="grid-column-start:3">-5</x>
+<x style="grid-column-start:5">A -1</x>
+<x style="grid-column-start:3">B -1</x>
+<x style="grid-column-start:4">A -2</x>
+<x style="grid-column-start:3">A -3</x>
+<x style="grid-column-start:2">A -4</x>
+<x style="grid-column-start:1">A -5</x>
+<x style="grid-column-start:4">A</x>
+<x style="grid-column-start:5">B</x>
+<x style="grid-column-start:4">A 1</x>
+<x style="grid-column-start:5">A 2</x>
+<x style="grid-column-start:8">A 3</x>
+<x style="grid-column-start:9">A 4</x>
+<x style="grid-column-start:10">A 5</x>
+<y style="grid-column-end:8; top:0px"></y>
+<y style="grid-column-end:8; top:2px"></y>
+<y style="grid-column-end:4; top:4px"></y>
+<y style="grid-column-end:5; top:6px"></y>
+<y style="grid-column-end:6; top:8px"></y>
+<y style="grid-column-end:7; top:10px"></y>
+<y style="grid-column-end:6; top:12px"></y>
+<y style="grid-column-end:4; top:14px"></y>
+<y style="grid-column-end:5; top:16px"></y>
+<y style="grid-column-end:4; top:18px"></y>
+<y style="grid-column-end:3; top:20px"></y>
+<y style="grid-column-end:2; top:22px"></y>
+<y style="grid-column-end:5; top:24px"></y>
+<y style="grid-column-end:6; top:26px"></y>
+<y style="grid-column-end:5; top:28px"></y>
+<y style="grid-column-end:6; top:30px"></y>
+<y style="grid-column-end:9; top:32px"></y>
+<y style="grid-column-end:10; top:34px"></y>
+<y style="grid-column-end:11; top:36px"></y>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-001.html
new file mode 100644
index 0000000000..b6745f6973
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-001.html
@@ -0,0 +1,127 @@
+<!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: Placement involving named lines</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-placement-int">
+  <link rel="match" href="masonry-grid-placement-named-lines-001-ref.html">
+  <style>
+body,html { color:black; background:white; font-size:15px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  position: relative;
+  border: 1px solid;
+  grid-template-columns: [A-start] 60px 60px 60px;
+  grid-template-rows: masonry;
+  grid-template-areas: "B A";
+  grid-auto-columns: 40px;
+  grid-gap: 1px;
+}
+
+x {
+  background: grey;
+  border: 1px solid;
+}
+y {
+  position: absolute;
+  border-top: 1px solid blue;
+  height:0;left:0;right:0;
+}
+
+  </style>
+</head>
+<body>
+
+<pre>grid-column-start:</pre>
+<div class="grid" style="padding-right:13px; border-right-width:5px">
+<x style="grid-column:1; background:grey">&nbsp;</x>
+<x style="grid-column-start:-1">-1</x>
+<x style="grid-column-start:4">4</x>
+<x style="grid-column-start:-2">-2</x>
+<x style="grid-column-start:-3">-3</x>
+<x style="grid-column-start:-4">-4</x>
+<x style="grid-column-start:-5">-5</x>
+<x style="grid-column-start:A-start -1">A -1</x>
+<x style="grid-column-start:B -1">B -1</x>
+<x style="grid-column-start:A-start -2">A -2</x>
+<x style="grid-column-start:A-start -3">A -3</x>
+<x style="grid-column-start:A-start -4">A -4</x>
+<x style="grid-column-start:A-start -5">A -5</x>
+<x style="grid-column-start:A-start">A</x>
+<x style="grid-column-start:B">B</x>
+<x style="grid-column-start:A-start 1">A 1</x>
+<x style="grid-column-start:A-start 2">A 2</x>
+<x style="grid-column-start:A-start 3">A 3</x>
+<x style="grid-column-start:A-start 4">A 4</x>
+<x style="grid-column-start:A-start 5">A 5</x>
+<y style="grid-column-start:-1; top:0"></y>
+<y style="grid-column-start:4; top:2px"></y>
+<y style="grid-column-start:-2; top:4px"></y>
+<y style="grid-column-start:-3; top:6px"></y>
+<y style="grid-column-start:-4; top:8px"></y>
+<y style="grid-column-start:-5; top:10px"></y>
+<y style="grid-column-start:A-start -1; top:12px"></y>
+<y style="grid-column-start:B -1; top:14px"></y>
+<y style="grid-column-start:A-start -2; top:16px"></y>
+<y style="grid-column-start:A-start -3; top:18px"></y>
+<y style="grid-column-start:A-start -4; top:20px"></y>
+<y style="grid-column-start:A-start -5; top:22px"></y>
+<y style="grid-column-start:A-start; top:24px"></y>
+<y style="grid-column-start:B; top:26px"></y>
+<y style="grid-column-start:A-start 1; top:28px"></y>
+<y style="grid-column-start:A-start 2; top:30px"></y>
+<y style="grid-column-start:A-start 3; top:32px"></y>
+<y style="grid-column-start:A-start 4; top:34px"></y>
+<y style="grid-column-start:A-start 5; top:36px"></y>
+</div>
+
+<pre>grid-column-end:</pre>
+<div class="grid" style="padding-left:13px;">
+<x style="grid-column:1; background:grey">&nbsp;</x>
+<x style="grid-column-end:-1">-1</x>
+<x style="grid-column-end:4">4</x>
+<x style="grid-column-end:-5">-5</x>
+<x style="grid-column-end:-4">-4</x>
+<x style="grid-column-end:-3">-3</x>
+<x style="grid-column-end:-2">-2</x>
+<x style="grid-column-end:A-start -1">A -1</x>
+<x style="grid-column-end:B -1">B -1</x>
+<x style="grid-column-end:A-start -2">A -2</x>
+<x style="grid-column-end:A-start -3">A -3</x>
+<x style="grid-column-end:A-start -4">A -4</x>
+<x style="grid-column-end:A-start -5">A -5</x>
+<x style="grid-column-end:A-start">A</x>
+<x style="grid-column-end:B">B</x>
+<x style="grid-column-end:A-start 1">A 1</x>
+<x style="grid-column-end:A-start 2">A 2</x>
+<x style="grid-column-end:A-start 3">A 3</x>
+<x style="grid-column-end:A-start 4">A 4</x>
+<x style="grid-column-end:A-start 5">A 5</x>
+<y style="grid-column-end:-1; top:0"></y>
+<y style="grid-column-end:4; top:2px"></y>
+<y style="grid-column-end:-5; top:4px"></y>
+<y style="grid-column-end:-4; top:6px"></y>
+<y style="grid-column-end:-3; top:8px"></y>
+<y style="grid-column-end:-2; top:10px"></y>
+<y style="grid-column-end:A-start -1; top:12px"></y>
+<y style="grid-column-end:B -1; top:14px"></y>
+<y style="grid-column-end:A-start -2; top:16px"></y>
+<y style="grid-column-end:A-start -3; top:18px"></y>
+<y style="grid-column-end:A-start -4; top:20px"></y>
+<y style="grid-column-end:A-start -5; top:22px"></y>
+<y style="grid-column-end:A-start; top:24px"></y>
+<y style="grid-column-end:B; top:26px"></y>
+<y style="grid-column-end:A-start 1; top:28px"></y>
+<y style="grid-column-end:A-start 2; top:30px"></y>
+<y style="grid-column-end:A-start 3; top:32px"></y>
+<y style="grid-column-end:A-start 4; top:34px"></y>
+<y style="grid-column-end:A-start 5; top:36px"></y>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-002-ref.html
new file mode 100644
index 0000000000..dd589f90c5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-002-ref.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>Reference: Placement involving named lines</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+body,html { color:black; background:white; font:15px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  grid-template-columns: 40px 40px 40px 60px 60px 60px 40px 40px 40px 40px 40px 40px 40px;
+  position: relative;
+  border: 1px solid;
+  grid-auto-flow: dense;
+  column-gap: 1px;
+}
+
+x {
+  background: grey;
+}
+y {
+  position: absolute;
+  border: 1px solid blue;
+  top:0;height:0;left:0;right:0;
+  grid-row-end:span 1!important;
+}
+
+  </style>
+</head>
+<body>
+
+<pre>grid-column: / span A-start 2</pre>
+<div class="grid">
+<x style="grid-row:1;  grid-column:4">&nbsp;</x>
+<x style="grid-row:1;  grid-column:7/span 2;">-1</x>
+<x style="grid-row:2;  grid-column:7/span 2;">4</x>
+<x style="grid-row:4;  grid-column:6/span 3;">-2</x>
+<x style="grid-row:5;  grid-column:5/span 4;">-3</x>
+<x style="grid-row:6;  grid-column:4/span 4;">-4</x>
+<x style="grid-row:7;  grid-column:3/span 2;">-5</x>
+<x style="grid-row:7;  grid-column:5/span 4;">A -1</x>
+<x style="grid-row:9;  grid-column:3/span 2;">B -1</x>
+<x style="grid-row:10; grid-column:4/span 4;">A -2</x>
+<x style="grid-row:11; grid-column:3/span 2;">A -3</x>
+<x style="grid-row:12; grid-column:2/span 3;">A -4</x>
+<x style="grid-row:13; grid-column:1/span 4;">A -5</x>
+<x style="grid-row:14; grid-column:4/span 4;">A</x>
+<x style="grid-row:15; grid-column:4/span 4;">B</x>
+<x style="grid-row:16; grid-column:4/span 4;">A 1</x>
+<x style="grid-row:17; grid-column:5/span 4;">A 2</x>
+<x style="grid-row:18; grid-column:8/span 2;">A 3</x>
+<x style="grid-row:1;  grid-column:9/span 2;">A 4</x>
+<x style="grid-row:2;  grid-column:10/span 2;">A 5</x>
+<y style="grid-row:1;  grid-column:7/span 2;"></y>
+<y style="grid-row:2;  grid-column:7/span 2;"></y>
+<y style="grid-row:4;  grid-column:6/span 3;"></y>
+<y style="grid-row:5;  grid-column:5/span 4;"></y>
+<y style="grid-row:6;  grid-column:4/span 4;"></y>
+<y style="grid-row:7;  grid-column:3/span 2;"></y>
+<y style="grid-row:7;  grid-column:5/span 4;"></y>
+<y style="grid-row:9;  grid-column:3/span 2;"></y>
+<y style="grid-row:10; grid-column:4/span 4;"></y>
+<y style="grid-row:11; grid-column:3/span 2;"></y>
+<y style="grid-row:12; grid-column:2/span 3;"></y>
+<y style="grid-row:13; grid-column:1/span 4;"></y>
+<y style="grid-row:14; grid-column:4/span 4;"></y>
+<y style="grid-row:15; grid-column:4/span 4;"></y>
+<y style="grid-row:16; grid-column:4/span 4;"></y>
+<y style="grid-row:17; grid-column:5/span 4;"></y>
+<y style="grid-row:18; grid-column:8/span 2;"></y>
+<y style="grid-row:1;  grid-column:9/span 2;"></y>
+<y style="grid-row:2;  grid-column:10/span 2;"></y>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-002.html
new file mode 100644
index 0000000000..0ad0dfcea3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/grid-placement/masonry-grid-placement-named-lines-002.html
@@ -0,0 +1,85 @@
+<!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: Placement involving named lines</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#grid-placement-int">
+  <link rel="match" href="masonry-grid-placement-named-lines-002-ref.html">
+  <style>
+body,html { color:black; background:white; font:15px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: grid;
+  position: relative;
+  border: 1px solid;
+  grid-template-columns: [A-start] 60px 60px 60px;
+  grid-template-rows: masonry;
+  grid-template-areas: "B A";
+  grid-auto-columns: 40px;
+  grid-auto-flow: dense;
+  gap: 0 1px;
+}
+
+x {
+  background: grey;
+}
+y {
+  position: absolute;
+  border: 1px solid blue;
+  bottom:0;height:0;left:0;right:0;
+  grid-row-end:span 1!important;
+}
+
+  </style>
+</head>
+<body>
+
+<pre>grid-column: / span A-start 2</pre>
+<div class="grid">
+<x style="grid-column:1">&nbsp;</x>
+<x style="grid-column:-1/span A-start 2">-1</x>
+<x style="grid-column:4/span A-start 2">4</x>
+<x style="grid-column:-2/span A-start 2">-2</x>
+<x style="grid-column:-3/span A-start 2">-3</x>
+<x style="grid-column:-4/span A-start 2">-4</x>
+<x style="grid-column:-5/span A-start 2">-5</x>
+<x style="grid-column:A-start -1/span A-start 2">A -1</x>
+<x style="grid-column:B -1/span A-start 2">B -1</x>
+<x style="grid-column:A-start -2/span A-start 2">A -2</x>
+<x style="grid-column:A-start -3/span A-start 2">A -3</x>
+<x style="grid-column:A-start -4/span A-start 2">A -4</x>
+<x style="grid-column:A-start -5/span A-start 2">A -5</x>
+<x style="grid-column:A-start/span A-start 2">A</x>
+<x style="grid-column:B/span B">B</x>
+<x style="grid-column:A-start 1/span A-start 2">A 1</x>
+<x style="grid-column:A-start 2/span A-start 2">A 2</x>
+<x style="grid-column:A-start 3/span A-start 2">A 3</x>
+<x style="grid-column:A-start 4/span A-start 2">A 4</x>
+<x style="grid-column:A-start 5/span A-start 2">A 5</x>
+<y style="grid-column:-1/span A-start 2; top:0em"></y>
+<y style="grid-column:4/span A-start 2; top:1em"></y>
+<y style="grid-column:-2/span A-start 2; top:2em"></y>
+<y style="grid-column:-3/span A-start 2; top:3em"></y>
+<y style="grid-column:-4/span A-start 2; top:4em"></y>
+<y style="grid-column:-5/span A-start 2; top:5em"></y>
+<y style="grid-column:A-start -1/span A-start 2; top:5em"></y>
+<y style="grid-column:B -1/span A-start 2; top:6em"></y>
+<y style="grid-column:A-start -2/span A-start 2; top:7em"></y>
+<y style="grid-column:A-start -3/span A-start 2; top:8em"></y>
+<y style="grid-column:A-start -4/span A-start 2; top:9em"></y>
+<y style="grid-column:A-start -5/span A-start 2; top:10em"></y>
+<y style="grid-column:A-start/span A-start 2; top:11em"></y>
+<y style="grid-column:B/span B; top:12em"></y>
+<y style="grid-column:A-start 1/span A-start 2; top:13em"></y>
+<y style="grid-column:A-start 2/span A-start 2; top:14em"></y>
+<y style="grid-column:A-start 3/span A-start 2; top:15em"></y>
+<y style="grid-column:A-start 4/span A-start 2; top:0em"></y>
+<y style="grid-column:A-start 5/span A-start 2; top:1em"></y>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-001-ref.html
new file mode 100644
index 0000000000..898bff16d8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-001-ref.html
@@ -0,0 +1,271 @@
+<!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: Masonry layout intrinsic sizing</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:15px/1 Ahem; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,auto);
+  grid-auto-rows: 1em;
+  border: 1px solid;
+  padding: 0 1px 0 2px;
+  vertical-align: top;
+}
+.fr {
+  grid-template-columns: 1fr 2fr 1fr 1fr;
+}
+.mixed {
+  grid-template-columns: 1fr 2fr min-content max-content;
+}
+
+item {
+  background-color: #444;
+  color: blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="width:2ch">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+</grid>
+
+<grid style="grid-template-columns: 1ch repeat(3,auto)">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5</item>
+</grid>
+
+<grid style="grid-template-columns: repeat(4,1ch)">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5</item>
+</grid>
+
+<!-- ditto with 'fr' sizing -->
+
+<grid class="fr">
+  <item style="width:2ch">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+</grid>
+
+<grid class="fr" style="grid-template-columns: 1ch 2fr 1fr 1fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5</item>
+</grid>
+
+<grid class="fr" style="grid-template-columns: 1ch 2ch 1ch 1ch">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5</item>
+</grid>
+
+
+<!-- ditto with mixed sizing -->
+
+<grid class="mixed" style="grid-template-columns: 2ch 4ch 1ch 1ch">
+  <item style="width:2ch">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+</grid>
+
+<grid class="mixed" style="grid-template-columns: 1ch 2ch 1ch 1ch">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5</item>
+</grid>
+
+<grid class="mixed" style="grid-template-columns: 1ch 2ch 1ch 1ch">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-001.html
new file mode 100644
index 0000000000..0f6cdb1495
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-001.html
@@ -0,0 +1,273 @@
+<!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: Masonry layout intrinsic sizing</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="masonry-intrinsic-sizing-001-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,auto);
+  grid-template-rows: masonry;
+  border: 1px solid;
+  padding: 0 1px 0 2px;
+  vertical-align: top;
+}
+.fr {
+  grid-template-columns: 1fr 2fr 1fr 1fr;
+}
+.mixed {
+  grid-template-columns: 1fr 2fr min-content max-content;
+}
+
+item {
+  background-color: #444;
+  color: blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="width:2ch">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5</item>
+</grid>
+
+<!-- ditto with 'fr' sizing -->
+
+<grid class="fr">
+  <item style="width:2ch">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5</item>
+</grid>
+
+
+<!-- ditto with mixed sizing -->
+
+<grid class="mixed">
+  <item style="width:2ch">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-002-ref.html
new file mode 100644
index 0000000000..4f6519db94
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-002-ref.html
@@ -0,0 +1,272 @@
+<!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: Masonry layout intrinsic sizing</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:15px/1 Ahem; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,auto);
+  grid-auto-rows: 1em;
+  border: 1px solid;
+  padding: 0 1px 0 2px;
+  vertical-align: top;
+  width: min-content;
+}
+.fr {
+  grid-template-columns: 1fr 2fr 1fr 1fr;
+}
+.mixed {
+  grid-template-columns: 1fr 2fr min-content max-content;
+}
+
+item {
+  background-color: #444;
+  color: blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="width:2ch">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+</grid>
+
+<grid style="grid-template-columns: 1ch repeat(3,auto)">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5</item>
+</grid>
+
+<grid style="grid-template-columns: repeat(4,1ch)">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5</item>
+</grid>
+
+<!-- ditto with 'fr' sizing -->
+
+<grid class="fr">
+  <item style="width:2ch">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+</grid>
+
+<grid class="fr" style="grid-template-columns: 1ch 2fr 1fr 1fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5</item>
+</grid>
+
+<grid class="fr" style="grid-template-columns: 1ch 1ch 1ch 1ch">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5</item>
+</grid>
+
+
+<!-- ditto with mixed sizing -->
+
+<grid class="mixed" style="grid-template-columns: 2ch 1ch 1ch 1ch">
+  <item style="width:2ch">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+</grid>
+
+<grid class="mixed" style="grid-template-columns: 1ch 1ch 1ch 1ch">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5</item>
+</grid>
+
+<grid class="mixed" style="grid-template-columns: 1ch 1ch 1ch 1ch">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-002.html
new file mode 100644
index 0000000000..db83299bf5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-002.html
@@ -0,0 +1,274 @@
+<!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: Masonry layout intrinsic sizing</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="masonry-intrinsic-sizing-002-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,auto);
+  grid-template-rows: masonry;
+  border: 1px solid;
+  padding: 0 1px 0 2px;
+  vertical-align: top;
+  width: min-content;
+}
+.fr {
+  grid-template-columns: 1fr 2fr 1fr 1fr;
+}
+.mixed {
+  grid-template-columns: 1fr 2fr min-content max-content;
+}
+
+item {
+  background-color: #444;
+  color: blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="width:2ch">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5</item>
+</grid>
+
+<!-- ditto with 'fr' sizing -->
+
+<grid class="fr">
+  <item style="width:2ch">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5</item>
+</grid>
+
+
+<!-- ditto with mixed sizing -->
+
+<grid class="mixed">
+  <item style="width:2ch">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-003-ref.html
new file mode 100644
index 0000000000..61eb21570d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-003-ref.html
@@ -0,0 +1,269 @@
+<!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: Masonry layout min-content sizing</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:15px/1 Ahem; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,auto);
+  grid-auto-rows: 1em;
+  border: 1px solid;
+  padding: 0 1px 0 2px;
+  vertical-align: top;
+  width: min-content;
+}
+.fr {
+  grid-template-columns: 1fr 2fr 1fr 1fr;
+}
+.mixed {
+  grid-template-columns: 1fr 2fr min-content max-content;
+}
+
+item {
+  background-color: #444;
+  color: blue;
+}
+item.start { align-self: start; }
+</style>
+</head>
+<body>
+
+<grid style="grid-template-rows: 1em 2em">
+  <item style="width:2ch">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item>5 5</item>
+</grid>
+
+<grid style="grid: 1em 2em / 1ch repeat(3,auto); ">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:2ch">5 5</item>
+</grid>
+
+<grid style="grid-template-rows: 2em 2em">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
+</grid>
+
+<grid style="grid-template-rows: 2em 1em">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
+</grid>
+
+<grid style="grid-template-rows: 2em 1em">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid style="grid-template-rows: 2em 1em">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:3ch; grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid style="grid-template-rows: 2em 1em">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="grid-column:span 4">5 5</item>
+</grid>
+
+<grid style="grid-template-rows: 2em 1em">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:6ch; grid-column:span 4">5 5</item>
+</grid>
+
+<grid style="grid: 2em 1em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:6ch; grid-column:span 3">5 5</item>
+</grid>
+
+<!-- ditto with 'fr' sizing -->
+
+<grid class="fr" style="grid: 1em 2em / 2ch 2fr 1fr 1fr">
+  <item style="width:2ch" class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item>5 5</item>
+</grid>
+
+<grid class="fr" style="grid: 1em 2em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:2ch">5 5</item>
+</grid>
+
+<grid class="fr" style="grid: 2em 2em / 1ch 2ch repeat(2,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
+</grid>
+
+<grid class="fr" style="grid: 2em 1em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
+</grid>
+
+<grid class="fr" style="grid: 2em 2em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="fr" style="grid: 2em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:3ch; grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="fr" style="grid: 2em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="fr" style="grid: 2em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:6ch; grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="fr" style="grid: 2em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:6ch; grid-column:span 3">5 5</item>
+</grid>
+
+<!-- ditto with mixed sizing -->
+
+<grid class="mixed" style="grid: 1em 2em / 2ch repeat(3,1ch)">
+  <item style="width:2ch" class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item>5 5</item>
+</grid>
+
+<grid class="mixed" style="grid: 1em 2em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:2ch">5 5</item>
+</grid>
+
+<grid class="mixed" style="grid: 2em 2em / 1ch 2ch repeat(2,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
+</grid>
+
+<grid class="mixed" style="grid: 2em 1em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
+</grid>
+
+<grid class="mixed" style="grid: 2em 2em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="mixed" style="grid: 2em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:3ch; grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="mixed" style="grid: 2em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="mixed" style="grid: 2em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:6ch; grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="mixed" style="grid: 2em / repeat(4,1ch)">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:6ch; grid-column:span 3">5 5</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-003.html
new file mode 100644
index 0000000000..e43bc86c9b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-003.html
@@ -0,0 +1,270 @@
+<!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: Masonry layout min-content sizing</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="masonry-intrinsic-sizing-003-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,auto);
+  grid-template-rows: masonry;
+  border: 1px solid;
+  padding: 0 1px 0 2px;
+  vertical-align: top;
+  width: min-content;
+}
+.fr {
+  grid-template-columns: 1fr 2fr 1fr 1fr;
+}
+.mixed {
+  grid-template-columns: 1fr 2fr min-content max-content;
+}
+
+item {
+  background-color: #444;
+  color: blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="width:2ch">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item>5 5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:2ch">5 5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5 5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5 5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5 5</item>
+</grid>
+
+<!-- ditto with 'fr' sizing -->
+
+<grid class="fr">
+  <item style="width:2ch">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item>5 5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:2ch">5 5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5 5</item>
+</grid>
+
+<!-- ditto with mixed sizing -->
+
+<grid class="mixed">
+  <item style="width:2ch">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item>5 5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:2ch">5 5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5 5</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-004-ref.html
new file mode 100644
index 0000000000..6a5d81fedb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-004-ref.html
@@ -0,0 +1,270 @@
+<!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: Masonry layout max-content sizing</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:15px/1 Ahem; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: 1ch 3ch 3ch 1ch;
+  grid-auto-rows: 1em;
+  border: 1px solid;
+  padding: 0 1px 0 2px;
+  vertical-align: top;
+  align-items: start;
+  width: max-content;
+}
+.fr {
+  grid-template-columns: 1fr 2fr 1fr 1fr;
+}
+.mixed {
+  grid-template-columns: 1fr 2fr min-content max-content;
+}
+
+item {
+  background-color: #444;
+  color: blue;
+}
+item.start { align-self: start; }
+</style>
+</head>
+<body>
+
+<grid style="grid: 1em 2em / 2ch 3ch 3ch 1ch">
+  <item style="width:2ch">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item>5 5</item>
+</grid>
+
+<grid style="grid: 1em 2em / 1ch 3ch 3ch 1ch; ">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:2ch">5 5</item>
+</grid>
+
+<grid style="grid-template-rows: 1em 2em">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
+</grid>
+
+<grid>
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
+</grid>
+
+<grid>
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid>
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:3ch; grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid>
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="grid-column:span 4">5 5</item>
+</grid>
+
+<grid>
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:6ch; grid-column:span 4">5 5</item>
+</grid>
+
+<grid>
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:6ch; grid-column:span 3">5 5</item>
+</grid>
+
+<!-- ditto with 'fr' sizing -->
+
+<grid class="fr">
+  <item style="width:2ch" class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item>5 5</item>
+</grid>
+
+<grid class="fr" style="grid: 1em 2em / 3ch 6ch 3ch 3ch">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:2ch">5 5</item>
+</grid>
+
+<grid class="fr" style="grid: 1em 2em / 3ch 6ch 3ch 3ch">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
+</grid>
+
+<grid class="fr">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
+</grid>
+
+<grid class="fr">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="fr">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:3ch; grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="fr">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="fr">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:6ch; grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="fr">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:6ch; grid-column:span 3">5 5</item>
+</grid>
+
+<!-- ditto with mixed sizing -->
+
+<grid class="mixed" style="grid: 1em 2em / 2ch 4ch 1ch 1ch">
+  <item style="width:2ch" class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item>5 5</item>
+</grid>
+
+<grid class="mixed" style="grid: 1em 2em / calc(3ch/2) 3ch 1ch 1ch">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:2ch">5 5</item>
+</grid>
+
+<grid class="mixed" style="grid: 1em 2em / calc(3ch/2) 3ch 1ch 1ch">
+  <item class="start">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item class="start">4</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
+</grid>
+
+<grid class="mixed" style="grid: 2em 1em / calc(3ch/2) 3ch 1ch 1ch">
+  <item class="start">1</item>
+  <item class="start">2 2</item>
+  <item class="start">3 3</item>
+  <item class="start">4</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
+</grid>
+
+<grid class="mixed" style="grid: 2em 1em 1em / calc(3ch/2) 3ch 1ch 1ch">
+  <item class="start">1</item>
+  <item class="start">2 2</item>
+  <item class="start">3 3</item>
+  <item class="start">4</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="mixed" style="grid: 2em 1em / calc(3ch/2) 3ch 1ch 1ch">
+  <item class="start">1</item>
+  <item class="start">2 2</item>
+  <item class="start">3 3</item>
+  <item class="start">4</item>
+  <item style="width:3ch; grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="mixed" style="grid: 2em 1em / calc(3ch/2) 3ch 1ch 1ch">
+  <item class="start">1</item>
+  <item class="start">2 2</item>
+  <item class="start">3 3</item>
+  <item class="start">4</item>
+  <item style="grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="mixed" style="grid: 2em 1em / calc(3ch/2) 3ch 1ch 1ch">
+  <item class="start">1</item>
+  <item class="start">2 2</item>
+  <item class="start">3 3</item>
+  <item class="start">4</item>
+  <item style="width:6ch; grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="mixed" style="grid: 2em 1em / calc(3ch/2) 3ch 1ch 1ch">
+  <item class="start">1</item>
+  <item class="start">2 2</item>
+  <item class="start">3 3</item>
+  <item class="start">4</item>
+  <item style="width:6ch; grid-column:span 3">5 5</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-004.html
new file mode 100644
index 0000000000..5365208c00
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-004.html
@@ -0,0 +1,270 @@
+<!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: Masonry layout max-content sizing</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="masonry-intrinsic-sizing-004-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,auto);
+  grid-template-rows: masonry;
+  border: 1px solid;
+  padding: 0 1px 0 2px;
+  vertical-align: top;
+  width: max-content;
+}
+.fr {
+  grid-template-columns: 1fr 2fr 1fr 1fr;
+}
+.mixed {
+  grid-template-columns: 1fr 2fr min-content max-content;
+}
+
+item {
+  background-color: #444;
+  color: blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="width:2ch">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item>5 5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:2ch">5 5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5 5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5 5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5 5</item>
+</grid>
+
+<!-- ditto with 'fr' sizing -->
+
+<grid class="fr">
+  <item style="width:2ch">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item>5 5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:2ch">5 5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="fr">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5 5</item>
+</grid>
+
+<!-- ditto with mixed sizing -->
+
+<grid class="mixed">
+  <item style="width:2ch">1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item>5 5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:2ch">5 5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:2ch; grid-column:2">5 5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:4ch; grid-column:2/span 2">5 5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:3ch; grid-column:2/span 2">5 5</item>
+  <item style="width:5ch; grid-column:1/span 3">6</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 4">5 5</item>
+</grid>
+
+<grid class="mixed">
+  <item>1</item>
+  <item>2 2</item>
+  <item>3 3</item>
+  <item>4</item>
+  <item style="width:6ch; grid-column:span 3">5 5</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-005-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-005-ref.html
new file mode 100644
index 0000000000..e564fb1b3e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-005-ref.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>Reference: Masonry layout intrinsic sizing</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:15px/1 Ahem; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-auto-flow: column;
+  border: 1px solid;
+  padding: 0 1px 0 2px;
+  vertical-align: top;
+}
+
+item {
+  background-color: #444;
+  color: blue;
+  writing-mode: vertical-lr;
+}
+</style>
+</head>
+<body>
+
+<grid style="grid-template-rows: 3ch repeat(3,1ch)">
+  <item style="height:3ch">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5 5</item>
+  <item>6</item>
+  <item>7</item>
+  <item>8</item>
+  <item>9 9</item>
+</grid>
+
+<grid style="grid-template-rows: repeat(4,1ch)">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="height:3ch">5 5</item>
+  <item>6</item>
+  <item>7</item>
+  <item>8</item>
+  <item>9 9</item>
+</grid>
+
+<grid style="grid-template-rows: 3ch repeat(3,1ch)">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="height:3ch; grid-row:1">5 5</item>
+  <item>6</item>
+  <item>7</item>
+  <item>8</item>
+  <item>9 9</item>
+</grid>
+
+<grid style="grid-template-rows: 3ch repeat(3,1ch)">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="height:3ch; grid-column:1">5 5</item>
+  <item>6</item>
+  <item>7</item>
+  <item>8</item>
+  <item>9 9</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-005.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-005.html
new file mode 100644
index 0000000000..cf9b680869
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-005.html
@@ -0,0 +1,86 @@
+<!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: Masonry layout intrinsic sizing</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="masonry-intrinsic-sizing-005-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: masonry;
+  grid-template-rows: repeat(4,auto);
+  border: 1px solid;
+  padding: 0 1px 0 2px;
+  vertical-align: top;
+}
+
+item {
+  background-color: #444;
+  color: blue;
+  writing-mode: vertical-lr;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="height:3ch">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5 5</item>
+  <item>6</item>
+  <item>7</item>
+  <item>8</item>
+  <item>9 9</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="height:3ch">5 5</item>
+  <item>6</item>
+  <item>7</item>
+  <item>8</item>
+  <item>9 9</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="height:3ch; grid-row:1">5 5</item>
+  <item>6</item>
+  <item>7</item>
+  <item>8</item>
+  <item>9 9</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="height:3ch; grid-column:1">5 5</item>
+  <item>6</item>
+  <item>7</item>
+  <item>8</item>
+  <item>9 9</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-006-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-006-ref.html
new file mode 100644
index 0000000000..e1cb015cfe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-006-ref.html
@@ -0,0 +1,60 @@
+<!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: Masonry layout intrinsic sizing</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:15px/1 Ahem; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-auto-flow: column;
+  grid-template-columns: 1ch;
+  grid-template-rows: repeat(4,1em);
+  border: 1px solid;
+  padding: 0 1px 0 2px;
+  vertical-align: top;
+}
+
+item {
+  background-color: #444;
+  color: blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="width:3ch">1 1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-row:2">5 5</item>
+</grid>
+
+<grid>
+  <item style="width:3ch">1 1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-row:2">5 5</item>
+</grid>
+
+<grid style="height:5em">
+  <item style="width:3ch">1 1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item style="grid-row:2">5 5</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-006.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-006.html
new file mode 100644
index 0000000000..49fd53bb79
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/intrinsic-sizing/masonry-intrinsic-sizing-006.html
@@ -0,0 +1,61 @@
+<!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: Masonry layout intrinsic sizing</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="masonry-intrinsic-sizing-006-ref.html">
+  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 Ahem; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: masonry;
+  grid-template-rows: repeat(4,auto);
+  border: 1px solid;
+  padding: 0 1px 0 2px;
+  vertical-align: top;
+}
+
+item {
+  background-color: #444;
+  color: blue;
+}
+</style>
+</head>
+<body>
+
+<grid style="max-height:5em; grid-template-rows: repeat(auto-fill,1em);">
+  <item>1 1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5 5</item>
+</grid>
+
+<grid style="min-height:4em; grid-template-rows: repeat(auto-fill,1em);">
+  <item>1 1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5 5</item>
+</grid>
+
+<grid style="height:5em; grid-template-rows: repeat(auto-fill,1em);">
+  <item>1 1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5 5</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-columns-item-placement-auto-flow-next-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-columns-item-placement-auto-flow-next-001-ref.html
new file mode 100644
index 0000000000..b6373f8d2d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-columns-item-placement-auto-flow-next-001-ref.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 masonry columns masonry-auto-flow next</title>
+  <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-auto-flow">
+  <meta name="assert" content="Placing item that would span outside the grid using masonry-auto-flow-next should place the item at the first grid axis track" />
+  <style>
+html,body {
+  color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 10px 20px;
+  grid-template-rows: repeat(4,80px);
+  grid-template-columns: auto;
+  grid-auto-flow: column;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  padding: 20px;
+  margin: 3px;
+  border: 5px solid blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item>1</item>
+  <item style="grid-row: span 3">2</item>
+  <item>3</item>
+  <item style="grid-row: span 4">4</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-columns-item-placement-auto-flow-next-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-columns-item-placement-auto-flow-next-001.html
new file mode 100644
index 0000000000..eacc943bf7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-columns-item-placement-auto-flow-next-001.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 masonry columns masonry-auto-flow next</title>
+  <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-auto-flow">
+  <link rel="match" href="masonry-columns-item-placement-auto-flow-next-001-ref.html">
+  <meta name="assert" content="Placing item that would span outside the grid using masonry-auto-flow-next should place the item at the first grid axis track" />
+  <style>
+html,body {
+  color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 10px 20px;
+  grid-template-rows: repeat(4,80px);
+  grid-template-columns: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+  masonry-auto-flow: next;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  padding: 20px;
+  margin: 3px;
+  border: 5px solid blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item>1</item>
+  <item style="grid-row: span 3">2</item>
+  <item>3</item>
+  <item style="grid-row: span 4">4</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-001-ref.html
new file mode 100644
index 0000000000..2e100c3be6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-001-ref.html
@@ -0,0 +1,46 @@
+<!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: Masonry layout using `grid-column/row`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+    html,body {
+      color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
+    }
+
+    grid {
+      display: inline-grid;
+      gap: 10px 20px;
+      grid-template-columns: repeat(4,80px);
+      grid-template-rows: masonry;
+      color: #444;
+      border: 1px solid;
+      padding: 2px;
+    }
+
+    item {
+      background-color: #444;
+      color: #fff;
+      padding: 20px;
+      margin: 3px;
+      border: 5px solid blue;
+    }
+  </style>
+</head>
+<body>
+
+<grid>
+  <item style="grid-column:1">6</item>
+  <item style="grid-column:2">5</item>
+  <item style="grid-column:span 2">4</item>
+  <item style="margin-top:10px">3</item>
+  <item style="grid-column:span 2">1</item>
+  <item>2</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-001.html
new file mode 100644
index 0000000000..649e1edb7c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-001.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: Masonry layout using `grid-column/row`</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="masonry-item-placement-001-ref.html">
+  <style>
+    html,body {
+      color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
+    }
+
+    grid {
+      display: inline-grid;
+      gap: 10px 20px;
+      grid-template-columns: repeat(4,80px);
+      grid-template-rows: masonry;
+      color: #444;
+      border: 1px solid;
+      padding: 2px;
+    }
+
+    item {
+      background-color: #444;
+      color: #fff;
+      padding: 20px;
+      margin: 3px;
+      border: 5px solid blue;
+    }
+  </style>
+</head>
+<body>
+
+<grid>
+  <item style="grid-column:1">6</item>
+  <item>5</item>
+  <item style="margin-top:10px">3</item>
+  <item style="grid-column:span 2">1</item>
+  <item>2</item>
+  <item style="grid-column:3/span 2">4</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-002-ref.html
new file mode 100644
index 0000000000..a02009ec30
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-002-ref.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>Reference: Masonry layout using `grid-column/row`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 10px 20px;
+  grid-template-columns: repeat(4,80px);
+  grid-template-rows: auto;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  padding: 20px;
+  margin: 3px;
+  border: 5px solid blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="grid-column:1/-1">1</item>
+  <item>3</item>
+  <x></x>
+  <item>2</item>
+  <item>5</item>
+  <item style="grid-column:1/-2">4</item>
+  <item>6</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-002.html
new file mode 100644
index 0000000000..7d321bf731
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-002.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: Masonry layout using `grid-column/row`</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="masonry-item-placement-002-ref.html">
+  <style>
+    html,body {
+      color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
+    }
+
+    grid {
+      display: inline-grid;
+      gap: 10px 20px;
+      grid-auto-columns: 80px;
+      grid-template-rows: masonry;
+      color: #444;
+      border: 1px solid;
+      padding: 2px;
+    }
+
+    item {
+      background-color: #444;
+      color: #fff;
+      padding: 20px;
+      margin: 3px;
+      border: 5px solid blue;
+    }
+  </style>
+</head>
+<body>
+
+<grid>
+  <item style="grid-column:1/span 4;">1</item>
+  <item>3</item>
+  <item style="grid-column:foo 2; grid-row:span 2">2</item>
+  <item style="grid-column:span 3">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-003-ref.html
new file mode 100644
index 0000000000..5cbd8db9ef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-003-ref.html
@@ -0,0 +1,46 @@
+<!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: Masonry layout using `grid-column/row` and `dense`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 10px 20px;
+  grid-auto-columns: 80px;
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  padding: 20px;
+  margin: 3px;
+  border: 5px solid blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item>1</item>
+  <item>3</item>
+  <item>2</item>
+  <item style="grid-column:span 3">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-003.html
new file mode 100644
index 0000000000..8a183cffc6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-003.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: Masonry layout using `grid-column/row` and `dense`</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="masonry-item-placement-003-ref.html">
+  <style>
+    html,body {
+      color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
+    }
+
+    grid {
+      display: inline-grid;
+      gap: 10px 20px;
+      grid-auto-flow: dense;
+      grid-auto-columns: 80px;
+      grid-template-rows: masonry;
+      color: #444;
+      border: 1px solid;
+      padding: 2px;
+    }
+
+    item {
+      background-color: #444;
+      color: #fff;
+      padding: 20px;
+      margin: 3px;
+      border: 5px solid blue;
+    }
+  </style>
+</head>
+<body>
+
+<grid>
+  <item style="grid-row:-100">1</item>
+  <item>3</item>
+  <item style="grid-column:foo 2; grid-row:span 2">2</item>
+  <item style="grid-column:span 3">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-004-ref.html
new file mode 100644
index 0000000000..75d6b741c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-004-ref.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>Reference: Masonry layout using `grid-column/row`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: auto;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="grid-column:1/2">3</item>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:2/1">5</item>
+  <item style="grid-column:2/3">6</item>
+  <item style="grid-column:3/span 2">4</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">3</item>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/span 2">4</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">3</item>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:2/1">5</item>
+  <item style="grid-column:2/3">6</item>
+  <item style="grid-column:3/span 2">4</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">3</item>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:2/1">5</item>
+  <item style="grid-column:2/3">6</item>
+  <item style="grid-column:3/span 2">4</item>
+</grid>
+
+<div style="direction:rtl">
+<grid>
+  <item style="grid-column:1/2">3</item>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:2/1">5</item>
+  <item style="grid-column:2/3">6</item>
+  <item style="grid-column:3/span 2">4</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">3</item>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/span 2">4</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">3</item>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:2/1">5</item>
+  <item style="grid-column:2/3">6</item>
+  <item style="grid-column:3/span 2">4</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">3</item>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:2/1">5</item>
+  <item style="grid-column:2/3">6</item>
+  <item style="grid-column:3/span 2">4</item>
+</grid>
+</div>
+
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-004.html
new file mode 100644
index 0000000000..4d1a454a86
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-004.html
@@ -0,0 +1,109 @@
+<!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: Masonry layout using `grid-column/row`</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="masonry-item-placement-004-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:3/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="masonry-auto-flow: next">
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:3/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="masonry-auto-flow: ordered">
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:3/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="masonry-auto-flow: next ordered">
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:3/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<div style="direction:rtl">
+<grid>
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:3/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="masonry-auto-flow: next">
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:3/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="masonry-auto-flow: ordered">
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:3/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="masonry-auto-flow: next ordered">
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:3/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+</div>
+
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-005-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-005-ref.html
new file mode 100644
index 0000000000..806f314300
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-005-ref.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>Reference: Masonry layout using `grid-column/row`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: auto;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">5</item>
+  <item style="grid-column:1/2">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">3</item>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item style="grid-column:3/4">5</item>
+  <item style="grid-column:4/5">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">3</item>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item style="grid-column:3/4">5</item>
+  <item style="grid-column:4/5">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">5</item>
+  <item style="grid-column:1/2">6</item>
+</grid>
+
+<div style="direction:rtl">
+<grid>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">5</item>
+  <item style="grid-column:1/2">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">3</item>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item style="grid-column:3/4">5</item>
+  <item style="grid-column:4/5">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">3</item>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item style="grid-column:3/4">5</item>
+  <item style="grid-column:4/5">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:2/span 2">1</item>
+  <item style="grid-column:4/5">2</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">5</item>
+  <item style="grid-column:1/2">6</item>
+</grid>
+</div>
+
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-005.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-005.html
new file mode 100644
index 0000000000..ddfbc9e54e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-005.html
@@ -0,0 +1,109 @@
+<!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: Masonry layout using `grid-column/row`</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="masonry-item-placement-005-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="masonry-auto-flow: ordered">
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="masonry-auto-flow: ordered next">
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="masonry-auto-flow: next">
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<div style="direction:rtl">
+<grid>
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="masonry-auto-flow: ordered">
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="masonry-auto-flow: ordered next">
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="masonry-auto-flow: next">
+  <item style="grid-column:2/span 2">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+</div>
+
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-006-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-006-ref.html
new file mode 100644
index 0000000000..a6e9b75d0e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-006-ref.html
@@ -0,0 +1,144 @@
+<!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: Masonry item placement</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="padding-top:30px; grid-column:1/2">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid>
+  <item style="padding-top:30px; grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:4/5">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:3/span 2">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:1/2">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:1/span 3">4</item>
+  <item style="grid-column:4/5">5</item>
+  <item style="grid-column:4/5">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:1/span 4">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:2/3">6</item>
+</grid>
+
+<span class="next">
+<grid>
+  <item style="padding-top:30px; grid-column:1/2">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:2/3">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:2/3">6</item>
+</grid>
+
+<grid>
+  <item style="padding-top:30px; grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:2/3">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item style="grid-column:3/4">5</item>
+  <item style="grid-column:4/5">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:1/span 3">4</item>
+  <item style="grid-column:4/5">5</item>
+  <item style="grid-column:1/2">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:1/span 4">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:2/3">6</item>
+</grid>
+</span>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-006.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-006.html
new file mode 100644
index 0000000000..0082d72df2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-006.html
@@ -0,0 +1,149 @@
+<!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: Masonry item placement</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="masonry-item-placement-006-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+.next > grid {
+  masonry-auto-flow: next;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item style="padding-top:30px">1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item style="grid-column:span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item style="grid-column:span 3">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item style="grid-column:span 4">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<span class="next">
+<grid>
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item style="padding-top:30px">1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item style="grid-column:span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item style="grid-column:span 3">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item style="grid-column:span 4">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+</span>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-007-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-007-ref.html
new file mode 100644
index 0000000000..50236046fb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-007-ref.html
@@ -0,0 +1,145 @@
+<!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: Masonry item placement (RTL)</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+  direction: rtl;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="padding-top:30px; grid-column:1/2">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid>
+  <item style="padding-top:30px; grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:4/5">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:3/span 2">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:1/2">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:1/span 3">4</item>
+  <item style="grid-column:4/5">5</item>
+  <item style="grid-column:4/5">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:1/span 4">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:2/3">6</item>
+</grid>
+
+<span class="next">
+<grid>
+  <item style="padding-top:30px; grid-column:1/2">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:2/3">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:2/3">6</item>
+</grid>
+
+<grid>
+  <item style="padding-top:30px; grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:2/3">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:1/span 2">4</item>
+  <item style="grid-column:3/4">5</item>
+  <item style="grid-column:4/5">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:1/span 3">4</item>
+  <item style="grid-column:4/5">5</item>
+  <item style="grid-column:1/2">6</item>
+</grid>
+
+<grid>
+  <item style="grid-column:1/2">1</item>
+  <item style="padding-top:30px; grid-column:2/3">2</item>
+  <item style="padding-top:10px; grid-column:3/4">3</item>
+  <item style="grid-column:1/span 4">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:2/3">6</item>
+</grid>
+</span>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-007.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-007.html
new file mode 100644
index 0000000000..67a02560f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-007.html
@@ -0,0 +1,150 @@
+<!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: Masonry item placement (RTL)</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="masonry-item-placement-007-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+  direction: rtl;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+.next > grid {
+  masonry-auto-flow: next;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item style="padding-top:30px">1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item style="grid-column:span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item style="grid-column:span 3">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item style="grid-column:span 4">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<span class="next">
+<grid>
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item style="padding-top:30px">1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item style="grid-column:span 2">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item style="grid-column:span 3">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item style="padding-top:10px">3</item>
+  <item style="grid-column:span 4">4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+</span>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-008-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-008-ref.html
new file mode 100644
index 0000000000..e14ca3173a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-008-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry item placement w/ Images</title>
+  <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+</head>
+
+<body>
+<style>
+grid {
+  display: inline-grid;
+  grid-template-columns: 400px;
+}
+
+img {
+  width: 100%;
+  height: auto;
+  background-color: cyan;
+}
+</style>
+
+<grid>
+    <img width="400" height="400" />
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-008.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-008.html
new file mode 100644
index 0000000000..c68a9787b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-item-placement-008.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: Masonry item placement w/ Images</title>
+  <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-item-placement-008-ref.html">
+</head>
+
+<body>
+<style>
+grid {
+  display: inline-grid;
+  grid-template-rows: masonry;
+  grid-template-columns: repeat( auto-fill, minmax(200px, 400px) );
+  gap: 30px;
+  max-width: 50vw;
+}
+
+img {
+  width: 100%;
+  height: auto;
+  background-color: cyan;
+}
+</style>
+
+<grid>
+    <img width="400" height="400" />
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-item-placement-auto-flow-next-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-item-placement-auto-flow-next-001-ref.html
new file mode 100644
index 0000000000..cbb3e825a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-item-placement-auto-flow-next-001-ref.html
@@ -0,0 +1,46 @@
+<!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 masonry rows masonry-auto-flow next</title>
+  <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-auto-flow">
+  <meta name="assert" content="Placing item that would span outside the grid using masonry-auto-flow-next should place the item at the first grid axis track" />
+  <style>
+html,body {
+  color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 10px 20px;
+  grid-template-columns: repeat(4,80px);
+  grid-template-rows: auto;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  padding: 20px;
+  margin: 3px;
+  border: 5px solid blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item>1</item>
+  <item style="grid-column: span 3">2</item>
+  <item>3</item>
+  <item style="grid-column: span 4">4</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-item-placement-auto-flow-next-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-item-placement-auto-flow-next-001.html
new file mode 100644
index 0000000000..c425490d2d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-item-placement-auto-flow-next-001.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 masonry rows masonry-auto-flow next</title>
+  <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+  <link rel="help" href="https://drafts.csswg.org/css-grid-3/#masonry-auto-flow">
+  <link rel="match" href="masonry-rows-item-placement-auto-flow-next-001-ref.html">
+  <meta name="assert" content="Placing item that would span outside the grid using masonry-auto-flow-next should place the item at the first grid axis track" />
+  <style>
+html,body {
+  color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 10px 20px;
+  grid-template-columns: repeat(4,80px);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+  masonry-auto-flow: next;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  padding: 20px;
+  margin: 3px;
+  border: 5px solid blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item>1</item>
+  <item style="grid-column: span 3">2</item>
+  <item>3</item>
+  <item style="grid-column: span 4">4</item>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-with-grid-width-changed-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-with-grid-width-changed-ref.html
new file mode 100644
index 0000000000..71c081f2ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-with-grid-width-changed-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-3">
+<meta name="assert" content="When the width of the masonry grid changes, items are repositioned with correct offsets and are not overlapping">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+grid {
+    display: grid;
+    width: 1%;
+    grid-template-rows: masonry;
+    grid-template-columns: auto;
+    grid-gap: 10px;
+    font-family: Ahem;
+    font-size: 40px;
+}
+item {
+    background-color: grey;
+}
+</style>
+</head>
+<body>
+  <grid>
+    <item>Hello, world!</item>
+    <item>2</item>
+  </grid>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-with-grid-width-changed.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-with-grid-width-changed.html
new file mode 100644
index 0000000000..3a1c4cfa9c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/masonry-rows-with-grid-width-changed.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-3">
+<link rel="match" href="masonry-rows-with-grid-width-changed-ref.html">
+<meta name="assert" content="When the width of the masonry grid changes, items are repositioned with correct offsets and are not overlapping">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+  grid {
+    display: grid;
+    grid-template-rows: masonry;
+    grid-template-columns: auto;
+    grid-gap: 10px;
+    font-family: Ahem;
+    font-size: 40px;
+  }
+  item {
+    background-color: grey;
+  }
+</style>
+</head>
+<body>
+  <grid>
+    <item>Hello, world!</item>
+    <item>2</item>
+  </grid>
+</body>
+<script>
+  // Make sure layout occurs and then mutate the style to retrigger it
+  document.body.offsetHeight;
+  document.querySelector("grid").style["width"] = "1%";
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-001-ref.html
new file mode 100644
index 0000000000..f7d9ccf48f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-001-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: Masonry layout with `justify-content` in grid axis</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: 1em auto;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+  width: 100px;
+  align-items: start;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+.tall { padding-top:30px; grid-row:span 2; }
+</style>
+</head>
+<body>
+
+<grid style="justify-content:start">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:start">
+  <item style="grid-column:1/2">1</item>
+  <item style="grid-column:2/3" class="tall">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item style="grid-column:1/2">1</item>
+  <item style="grid-column:2/3" class="tall">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item style="grid-column:1/2">1</item>
+  <item style="grid-column:2/3" class="tall">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:stretch">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:space-between">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:space-around">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:space-evenly">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-001.html
new file mode 100644
index 0000000000..3d60ac19fe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-001.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>CSS Grid Test: Masonry layout with `justify-content` in grid axis</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="masonry-justify-content-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+  width: 100px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+</style>
+</head>
+<body>
+
+<grid style="justify-content:start">
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:start">
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item>1</item>
+  <item style="padding-top:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:stretch">
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:space-between">
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:space-around">
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:space-evenly">
+  <item style="padding-top:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-002-ref.html
new file mode 100644
index 0000000000..6889af7eac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-002-ref.html
@@ -0,0 +1,126 @@
+<!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: Masonry layout with `justify-content` in grid axis</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: 1em auto;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+  height: 100px;
+  writing-mode: vertical-lr;
+  align-items: start;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+.tall { padding-right:30px; grid-row:span 2; }
+</style>
+</head>
+<body>
+
+<grid style="justify-content:start">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:start">
+  <item style="grid-column:1/2">1</item>
+  <item style="grid-column:2/3" class="tall">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item style="grid-column:1/2">1</item>
+  <item style="grid-column:2/3" class="tall">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item style="grid-column:1/2">1</item>
+  <item style="grid-column:2/3" class="tall">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:1/2">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:stretch">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:space-between">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:space-around">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
+
+<grid style="justify-content:space-evenly">
+  <item style="grid-column:1/2" class="tall">1</item>
+  <item style="grid-column:2/3">2</item>
+  <item style="grid-column:3/4">3</item>
+  <item style="grid-column:4/5">4</item>
+  <item style="grid-column:2/3">5</item>
+  <item style="grid-column:3/4">6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-002.html
new file mode 100644
index 0000000000..b1db084d4e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-002.html
@@ -0,0 +1,126 @@
+<!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: Masonry layout with `justify-content` in grid axis</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="masonry-justify-content-002-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: repeat(4,20px);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+  height: 100px;
+  writing-mode: vertical-lr;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+</style>
+</head>
+<body>
+
+<grid style="justify-content:start">
+  <item style="padding-right:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:start">
+  <item>1</item>
+  <item style="padding-right:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item style="padding-right:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item>1</item>
+  <item style="padding-right:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item style="padding-right:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item>1</item>
+  <item style="padding-right:30px">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:stretch">
+  <item style="padding-right:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:space-between">
+  <item style="padding-right:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:space-around">
+  <item style="padding-right:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:space-evenly">
+  <item style="padding-right:30px">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-003-ref.html
new file mode 100644
index 0000000000..81d0fba410
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-003-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: Masonry layout with `justify-content` in masonry axis</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: 1ch auto;
+  grid-template-rows: repeat(4,20px);
+  background: content-box silver;
+  border: 1px solid;
+  padding: 2px;
+  width: 100px;
+  justify-items: start;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+.tall { grid-column:span 2; padding-left: 30px; }
+</style>
+</head>
+<body>
+
+<grid style="justify-content:start">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:start">
+  <item style="grid-row:1/2">1</item>
+  <item class="tall" style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:1/2">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item style="grid-row:1/2">1</item>
+  <item class="tall" style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:1/2">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item style="grid-row:1/2">1</item>
+  <item class="tall" style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:1/2">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:stretch">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:start">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-003.html
new file mode 100644
index 0000000000..772984b9e0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-003.html
@@ -0,0 +1,126 @@
+<!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: Masonry layout with `justify-content` in masonry axis</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="masonry-justify-content-003-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: masonry;
+  grid-template-rows: repeat(4,20px);
+  background: content-box silver;
+  border: 1px solid;
+  padding: 2px;
+  width: 100px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+.tall { padding-left: 30px; }
+</style>
+</head>
+<body>
+
+<grid style="justify-content:start">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:start">
+  <item>1</item>
+  <item class="tall">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item>1</item>
+  <item class="tall">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item>1</item>
+  <item class="tall">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:stretch">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:space-between">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:space-around">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:space-evenly">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-004-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-004-ref.html
new file mode 100644
index 0000000000..43af71fc01
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-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: Masonry layout with `justify-content` in masonry axis</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: 1ch auto;
+  grid-template-rows: repeat(4,20px);
+  background: content-box silver;
+  border: 1px solid;
+  padding: 0 3px 2px 0;
+  width: 100px;
+  height: 120px;
+  align-content: center;
+  justify-items: start;
+  writing-mode: vertical-rl;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+.tall { grid-column: span 2; padding: 11px 3px 13px 7px; }
+</style>
+</head>
+<body>
+
+<grid style="justify-content:start">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:start">
+  <item style="grid-row:1/2">1</item>
+  <item class="tall" style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:1/2">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item style="grid-row:1/2">1</item>
+  <item class="tall" style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:1/2">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item style="grid-row:1/2">1</item>
+  <item class="tall" style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:1/2">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:stretch">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:start">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item class="tall" style="grid-row:1/2">1</item>
+  <item style="grid-row:2/3">2</item>
+  <item style="grid-row:3/4">3</item>
+  <item style="grid-row:4/5">4</item>
+  <item style="grid-row:2/3">5</item>
+  <item style="grid-row:3/4">6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-004.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-004.html
new file mode 100644
index 0000000000..7d04ffeb4b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/justify-content/masonry-justify-content-004.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: Masonry layout with `justify-content` in masonry axis</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="masonry-justify-content-004-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:15px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 1px 2px;
+  grid-template-columns: masonry;
+  grid-template-rows: repeat(4,20px);
+  background: content-box silver;
+  border: 1px solid;
+  padding: 0 3px 2px 0;
+  width: 100px;
+  height: 120px;
+  align-content: center;
+  writing-mode: vertical-rl;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+}
+
+.tall { padding: 11px 3px 13px 7px; }
+</style>
+</head>
+<body>
+
+<grid style="justify-content:start">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:start">
+  <item>1</item>
+  <item class="tall">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:end">
+  <item>1</item>
+  <item class="tall">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:center">
+  <item>1</item>
+  <item class="tall">2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:stretch">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:space-between">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:space-around">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
+
+<grid style="justify-content:space-evenly">
+  <item class="tall">1</item>
+  <item>2</item>
+  <item>3</item>
+  <item>4</item>
+  <item>5</item>
+  <item>6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-columns-item-containing-block-is-grid-content-width.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-columns-item-containing-block-is-grid-content-width.html
new file mode 100644
index 0000000000..e48b650253
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-columns-item-containing-block-is-grid-content-width.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-3/#containing-block">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Svg should use grid's content logical width for its containing block size and get sized to 100px x 100px">
+<style>
+grid {
+    display: grid;
+    grid-template-columns:masonry;
+    grid-template-rows: auto;
+}
+</style>
+</head>
+<body>
+<p>Test passes if there is a filled green square.</p>
+<grid>
+    <svg width="100" height="100" viewBox="0 0 1 1" style="width: 100%; max-width: 100px; background: green;"></svg>
+</grid>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-grid-template-columns-computed-withcontent.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-grid-template-columns-computed-withcontent.html
new file mode 100644
index 0000000000..b36efb664d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-grid-template-columns-computed-withcontent.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Masonry Test: getComputedStyle().gridTemplateColumns</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns">
+<meta name="assert" content="grid-template-columns computed value is the keyword none or a computed track list.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #target {
+    display: grid;
+    grid-template-rows: masonry;
+    font-size: 40px;
+    min-width: 200px;
+    width: 300px;
+    max-width: 400px;
+    min-height: 500px;
+    height: 600px;
+    max-height: 700px;
+  }
+  #child {
+    min-width: 20px;
+    width: 30px;
+    max-width: 40px;
+    min-height: 50px;
+    height: 60px;
+    max-height: 70px;
+  }
+</style>
+</head>
+<body>
+<div id="container">
+  <div id="target">
+    <div id="child"></div>
+  </div>
+</div>
+<script>
+test_computed_value("grid-template-rows", 'masonry', 'masonry');
+test_computed_value("grid-template-columns", 'none', 'none'); // "none" without #child
+
+// track-size <fixed-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
+test_computed_value("grid-template-columns", '20%', '60px'); // 20% * width
+test_computed_value("grid-template-columns", 'calc(-0.5em + 10px)', '0px');
+test_computed_value("grid-template-columns", 'calc(0.5em + 10px)', '30px');
+test_computed_value("grid-template-columns", 'calc(30% + 40px)', '130px'); // 30% * width + 40px
+test_computed_value("grid-template-columns", '5fr', '300px'); // width
+test_computed_value("grid-template-columns", 'min-content', '30px');
+test_computed_value("grid-template-columns", 'max-content', '30px');
+test_computed_value("grid-template-columns", 'auto', '300px'); // width
+
+// track-size minmax( <inflexible-breadth> , <track-breadth> )
+test_computed_value("grid-template-columns", 'minmax(10px, auto)', '300px'); // width
+test_computed_value("grid-template-columns", 'minmax(20%, max-content)', '60px'); // 20% * width
+test_computed_value("grid-template-columns", 'minmax(min-content, calc(-0.5em + 10px))', '30px');
+test_computed_value("grid-template-columns", 'minmax(auto, 0)', '30px');
+
+// track-size fit-content( <length-percentage> )
+test_computed_value("grid-template-columns", 'fit-content(70px)', '30px');
+test_computed_value("grid-template-columns", 'fit-content(20%)', '30px');
+test_computed_value("grid-template-columns", 'fit-content(calc(-0.5em + 10px))', '30px');
+
+// <track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )
+test_computed_value("grid-template-columns", 'repeat(1, 10px)', '10px');
+test_computed_value("grid-template-columns", 'repeat(1, [one two] 20%)', '[one two] 60px');
+test_computed_value("grid-template-columns", 'repeat(2, minmax(10px, auto))', '160px 140px');
+
+test_computed_value("grid-template-columns", 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])',
+                    '30px [three four] 30px 40px [five six] 0px [three four] 30px 40px [five six]');
+
+// <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
+test_computed_value("grid-template-columns", 'min-content repeat(5, minmax(10px, auto))',
+                    '30px 54px 54px 54px 54px 54px');
+test_computed_value("grid-template-columns", '[] 150px [] 1fr []', '150px 150px');
+
+// <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
+test_computed_value("grid-template-columns", 'repeat(auto-fill, 200px)', '200px');
+test_computed_value("grid-template-columns", 'repeat(auto-fit, [one] 20%)',
+                    '[one] 60px [one] 60px [one] 60px [one] 60px [one] 60px');
+test_computed_value("grid-template-columns", 'repeat(auto-fill, minmax(100px, 5fr) [two])',
+                    '100px [two] 100px [two] 100px [two]');
+test_computed_value("grid-template-columns", 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])',
+                    '[three] 240px [four]');
+
+// <auto-track-list> =
+// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
+// <auto-repeat>
+// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
+
+test_computed_value("grid-template-columns", '[one] repeat(2, minmax(50px, auto)) [two] 30px [three] repeat(auto-fill, 10px) 40px [four five] repeat(2, minmax(200px, auto)) [six]',
+                    '[one] 50px 50px [two] 30px [three] 10px 40px [four five] 200px 200px [six]');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-not-inhibited-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-not-inhibited-001-ref.html
new file mode 100644
index 0000000000..3e86b8a89b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-not-inhibited-001-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>CSS Grid Reference</title>
+<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+<style>
+grid {
+  vertical-align: top;
+  display: inline-grid;
+  grid-template-columns: 60px 60px;
+  grid-template-rows: 60px;
+  border: 2px solid black;
+}
+item {
+  width: 60px;
+  height: 60px;
+  background: cyan;
+}
+.tall {
+  background: tan;
+}
+</style>
+<grid>
+  <item class="tall"></item>
+  <item></item>
+</grid>
+<grid class="overflowSet">
+  <item class="tall"></item>
+  <item></item>
+</grid>
+<grid class="containSet">
+  <item class="tall"></item>
+  <item></item>
+</grid>
+<grid class="containSet overflowSet">
+  <item class="tall"></item>
+  <item></item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-not-inhibited-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-not-inhibited-001.html
new file mode 100644
index 0000000000..54499d3d69
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/masonry-not-inhibited-001.html
@@ -0,0 +1,54 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>CSS Grid Test: Masonry layout shouldn't be inhibited simply due to being an independent formatting context (unlike subgrid)</title>
+<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-3/">
+<link rel="match" href="masonry-not-inhibited-001-ref.html">
+<style>
+grid {
+  vertical-align: top;
+  display: inline-grid;
+  grid-template-columns: 60px 60px;
+  grid-template-rows: masonry;
+  border: 2px solid black;
+}
+.overflowSet {
+  overflow: hidden;
+}
+.containSet {
+  contain: layout;
+}
+item {
+  width: 60px;
+  height: 30px;
+  background: cyan;
+}
+.tall {
+    /* This item is taller than the others, which lets us know if masonry
+       layout is being applied or not. If we're using masonry, then the second
+       and third items will stack in the same column.  If not, then the third
+       item will automatically fill in below this tall item. */
+    height: 60px;
+    background: tan;
+}
+</style>
+<grid>
+  <item class="tall"></item>
+  <item></item>
+  <item></item>
+</grid>
+<grid class="overflowSet">
+  <item class="tall"></item>
+  <item></item>
+  <item></item>
+</grid>
+<grid class="containSet">
+  <item class="tall"></item>
+  <item></item>
+  <item></item>
+</grid>
+<grid class="containSet overflowSet">
+  <item class="tall"></item>
+  <item></item>
+  <item></item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-001-ref.html
new file mode 100644
index 0000000000..6f20bd0583
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-001-ref.html
@@ -0,0 +1,43 @@
+<!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: Masonry layout using `order`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+    html,body {
+      color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
+    }
+
+    grid {
+      display: inline-grid;
+      gap: 10px 20px;
+      grid-template-columns:  repeat(4,auto);
+      grid-template-rows: masonry;
+      color: #444;
+      border: 1px solid;
+      padding: 2px;
+    }
+
+    item {
+      background-color: #444;
+      color: #fff;
+      padding: 20px;
+      margin: 3px;
+      border: 5px solid blue;
+    }
+  </style>
+</head>
+<body>
+
+<grid>
+  <item>1</item>
+  <item style="margin-top:10px">4</item>
+  <item>6</item>
+  <item>2</item>
+  <item style="grid-column: span 2">5</item>
+  <item>3</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-001.html
new file mode 100644
index 0000000000..d01f52ea04
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-001.html
@@ -0,0 +1,45 @@
+<!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: Masonry layout using `order`</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="masonry-order-001-ref.html">
+  <style>
+html,body {
+  color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  gap: 10px 20px;
+  grid-template-columns:  repeat(4,auto);
+  grid-template-rows: masonry;
+  color: #444;
+  border: 1px solid;
+  padding: 2px;
+}
+
+item {
+  background-color: #444;
+  color: #fff;
+  padding: 20px;
+  margin: 3px;
+  border: 5px solid blue;
+}
+</style>
+</head>
+<body>
+
+<grid>
+  <item>1</item>
+  <item style="order:1">2</item>
+  <item style="order:2">3</item>
+  <item style="margin-top:10px">4</item>
+  <item style="order:1; grid-column:span 2">5</item>
+  <item>6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-002-ref.html
new file mode 100644
index 0000000000..15be3fde83
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-002-ref.html
@@ -0,0 +1,43 @@
+<!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: Masonry layout using `order` and `masonry-auto-flow: next`</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <style>
+    html,body {
+      color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
+    }
+
+    grid {
+      display: inline-grid;
+      gap: 10px 20px;
+      grid-template-columns:  repeat(4,auto);
+      grid-template-rows: masonry;
+      color: #444;
+      border: 1px solid;
+      padding: 2px;
+    }
+
+    item {
+      background-color: #444;
+      color: #fff;
+      padding: 20px;
+      margin: 3px;
+      border: 5px solid blue;
+    }
+  </style>
+</head>
+<body>
+
+<grid>
+  <item style="grid-column: 1">1</item>
+  <item style="margin-top:10px; grid-column: 2;">4</item>
+  <item style="grid-column: 3">6</item>
+  <item style="grid-column: 4">2</item>
+  <item style="grid-column: 2/span 2">5</item>
+  <item>3</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-002.html
new file mode 100644
index 0000000000..abad3d44b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/order/masonry-order-002.html
@@ -0,0 +1,46 @@
+<!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: Masonry layout using `order` and `masonry-auto-flow: next`</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="masonry-order-002-ref.html">
+  <style>
+    html,body {
+      color:black; background-color:white; font:25px/1 monospace; padding:0; margin:0;
+    }
+
+    grid {
+      display: inline-grid;
+      gap: 10px 20px;
+      grid-template-columns:  repeat(4,auto);
+      grid-template-rows: masonry;
+      masonry-auto-flow: next;
+      color: #444;
+      border: 1px solid;
+      padding: 2px;
+    }
+
+    item {
+      background-color: #444;
+      color: #fff;
+      padding: 20px;
+      margin: 3px;
+      border: 5px solid blue;
+    }
+  </style>
+</head>
+<body>
+
+<grid>
+  <item>1</item>
+  <item style="order:1">2</item>
+  <item style="order:1">3</item>
+  <item style="margin-top:10px">4</item>
+  <item style="order:2; grid-column:span 2">5</item>
+  <item>6</item>
+</grid>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/parsing/masonry-parsing.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/parsing/masonry-parsing.html
new file mode 100644
index 0000000000..e3245095fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/parsing/masonry-parsing.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Masonry Test: parsing properties and shortands</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#propdef-grid-template-columns">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+</head>
+<body>
+<script>
+function masonry_test_template_prop(name) {
+  test_valid_value(name, 'masonry');
+  test_invalid_value(name, 'masonry []');
+  test_invalid_value(name, 'masonry [foo] 40px');
+  test_invalid_value(name, 'masonry 40px');
+  test_invalid_value(name, '[foo] masonry');
+  test_invalid_value(name, '0px masonry');
+  test_invalid_value(name, 'masonry masonry');
+  test_invalid_value(name, 'subgrid masonry');
+  test_invalid_value(name, 'masonry subgrid');
+  test_invalid_value(name, 'masonry repeat(1, [])');
+  test_invalid_value(name, 'masonry repeat(auto-fill, [])');
+  test_invalid_value(name, 'masonry / none');
+}
+masonry_test_template_prop("grid-template-columns");
+masonry_test_template_prop("grid-template-rows");
+
+test_shorthand_value("grid-template", 'masonry / masonry', {
+  'grid-template-rows': 'masonry',
+  'grid-template-columns': 'masonry',
+  'grid-template-areas': 'none'
+});
+
+test_shorthand_value("grid-template", 'masonry / subgrid [foo]', {
+  'grid-template-rows': 'masonry',
+  'grid-template-columns': 'subgrid [foo]',
+  'grid-template-areas': 'none'
+});
+
+test_shorthand_value("grid-template", '10px / masonry', {
+  'grid-template-rows': '10px',
+  'grid-template-columns': 'masonry',
+  'grid-template-areas': 'none'
+});
+
+test_shorthand_value("grid", 'masonry / masonry', {
+  'grid-template-rows': 'masonry',
+  'grid-template-columns': 'masonry',
+  'grid-template-areas': 'none',
+  'grid-auto-rows': 'auto',
+  'grid-auto-columns': 'auto',
+  'grid-auto-flow': 'row'
+});
+
+test_shorthand_value("grid", 'masonry / subgrid [foo]', {
+  'grid-template-rows': 'masonry',
+  'grid-template-columns': 'subgrid [foo]',
+  'grid-template-areas': 'none',
+  'grid-auto-rows': 'auto',
+  'grid-auto-columns': 'auto',
+  'grid-auto-flow': 'row'
+});
+
+test_shorthand_value("grid", '10px / masonry', {
+  'grid-template-rows': '10px',
+  'grid-template-columns': 'masonry',
+  'grid-template-areas': 'none',
+  'grid-auto-rows': 'auto',
+  'grid-auto-columns': 'auto',
+  'grid-auto-flow': 'row'
+});
+
+test_valid_value("masonry-auto-flow", 'pack');
+test_valid_value("masonry-auto-flow", 'pack ordered', 'ordered');
+test_valid_value("masonry-auto-flow", 'ordered next', 'next ordered');
+test_valid_value("masonry-auto-flow", 'next definite-first', 'next');
+test_valid_value("masonry-auto-flow", 'definite-first pack', 'pack');
+test_invalid_value("masonry-auto-flow", 'auto');
+test_invalid_value("masonry-auto-flow", 'none');
+test_invalid_value("masonry-auto-flow", '10px');
+test_invalid_value("masonry-auto-flow", 'row');
+test_invalid_value("masonry-auto-flow", 'dense');
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001-ref.html
new file mode 100644
index 0000000000..25ec77bc51
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001-ref.html
@@ -0,0 +1,224 @@
+<!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: Masonry layout with a subgrid</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-template-rows: 50px 80px 40px;
+  grid-template-columns: auto;
+  gap: 4px 2px;
+  padding: 1px 3px 5px 7px;
+  border: solid;
+  border-width: 3px 5px 1px 1px;
+  background: lightgrey content-box;
+}
+masonry-track {
+  display: grid;
+  gap: 4px 2px;
+}
+masonry-track:nth-child(1) {
+  grid-template-rows: 50px;
+  grid-template-columns: min-content auto;
+}
+masonry-track:nth-child(2) {
+  grid-auto-flow: column;
+  grid-template-rows: 80px 40px;
+  grid-template-columns: auto;
+}
+.rows {
+  grid-template-columns: 50px 122px;
+  grid-template-rows: auto;
+  align-content: start;
+}
+.rows > masonry-track:nth-child(1) {
+  grid-template-columns: 50px;
+  grid-template-rows: auto;
+  align-content: start;
+}
+.rows > masonry-track:nth-child(2) {
+  grid-template-columns: 80px 40px;
+  grid-template-rows: auto;
+  align-content: start;
+}
+item {
+  background: grey;
+  width: 3ch;
+  position: relative;
+}
+.purple { background:purple; width:auto; justify-self:start; }
+.rows .purple { justify-self:stretch; }
+.nth-1 {
+  border: solid;
+  border-width: 3px 13px 1px 1px;
+  margin: 7px 1px 5px 3px;
+}
+subgrid {
+  display: grid;
+  grid: subgrid / 2ch auto;
+  grid-row: 2 / span 2;
+  grid-gap: 8px 20px;
+  background: yellow;
+}
+masonry-track > subgrid {
+  grid-row: 1 / span 2;
+}
+.rows > masonry-track > subgrid {
+  grid: auto auto / subgrid;
+  grid-row: 2;
+  grid-column: 1 / span 2;
+}
+.js { justify-self:stretch; }
+</style>
+</head>
+<body>
+
+<!-- just to sanity check that `masonry` behaves as `none` in the column axis in this case: -->
+<grid style="grid:masonry/none">
+  <item class="nth-1">1</item>
+  <item class="purple js">2</item>
+  <item>3</item>
+  <subgrid style="grid:masonry/none">
+    <item class="nth-1">4a</item>
+    <item style="margin-right:15px" class="purple js">4b</item>
+  </subgrid>
+</grid>
+
+<grid>
+ <masonry-track>
+  <item class="nth-1">1</item>
+  <item>5</item>
+ </masonry-track>
+ <masonry-track>
+  <item class="purple">2</item>
+  <item>3</item>
+  <subgrid>
+    <item class="nth-1" style="grid-column:span 2">4a</item>
+    <item class="purple js">4b</item>
+    <item>4c</item>
+  </subgrid>
+ </masonry-track>
+</grid>
+
+<grid>
+ <masonry-track>
+  <item class="nth-1">1</item>
+  <item>5</item>
+ </masonry-track>
+ <masonry-track>
+  <item class="purple">2</item>
+  <item>3</item>
+  <subgrid style="grid:subgrid/auto">
+    <item class="nth-1">4a</item>
+    <item class="purple js">4b</item>
+    <item>4c</item>
+  </subgrid>
+ </masonry-track>
+</grid>
+
+<grid>
+ <masonry-track>
+  <item class="nth-1">1</item>
+  <item>5</item>
+ </masonry-track>
+ <masonry-track>
+  <item class="purple">2</item>
+  <item>3</item>
+  <subgrid style="grid:subgrid/auto; grid-auto-flow:column">
+    <item class="nth-1">4a</item>
+    <item class="purple js">4b</item>
+    <item>4c</item>
+  </subgrid>
+ </masonry-track>
+</grid>
+
+<grid>
+ <masonry-track>
+  <item class="nth-1">1</item>
+  <item>5</item>
+ </masonry-track>
+ <masonry-track>
+  <item class="purple">2</item>
+  <item>3</item>
+  <subgrid style="grid:auto auto/masonry">
+    <item class="nth-1">4a</item>
+    <item class="purple">4b</item>
+    <item>4c</item>
+  </subgrid>
+ </masonry-track>
+</grid>
+
+<grid class="rows">
+ <masonry-track>
+  <item class="nth-1">1</item>
+  <item>5</item>
+ </masonry-track>
+ <masonry-track>
+  <item class="purple">2</item>
+  <item>3</item>
+  <subgrid>
+    <item class="nth-1" style="grid-row:span 2; align-self:start">4a</item>
+    <item class="purple">4b</item>
+    <item style="grid-column:2">4c</item>
+  </subgrid>
+ </masonry-track>
+</grid>
+
+<grid class="rows">
+ <masonry-track>
+  <item class="nth-1">1</item>
+  <item>5</item>
+ </masonry-track>
+ <masonry-track>
+  <item class="purple">2</item>
+  <item>3</item>
+  <subgrid style="grid:auto/subgrid">
+    <item class="nth-1">4a</item>
+    <item class="purple">4b</item>
+    <item>4c</item>
+  </subgrid>
+ </masonry-track>
+</grid>
+
+<grid class="rows">
+ <masonry-track>
+  <item class="nth-1">1</item>
+  <item>5</item>
+ </masonry-track>
+ <masonry-track>
+  <item class="purple">2</item>
+  <item>3</item>
+  <subgrid style="grid:auto/subgrid; grid-auto-flow:column">
+    <item class="nth-1">4a</item>
+    <item class="purple">4b</item>
+    <item>4c</item>
+  </subgrid>
+ </masonry-track>
+</grid>
+
+<grid class="rows">
+ <masonry-track>
+  <item class="nth-1">1</item>
+  <item>5</item>
+ </masonry-track>
+ <masonry-track>
+  <item class="purple">2</item>
+  <item>3</item>
+  <subgrid style="grid:auto auto/subgrid">
+    <item class="nth-1">4a</item>
+    <item class="purple">4b</item>
+    <item>4c</item>
+  </subgrid>
+ </masonry-track>
+</grid>
+
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001.html
new file mode 100644
index 0000000000..de07dfb78d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-001.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: Masonry layout with a 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="masonry-subgrid-001-ref.html">
+<style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  grid-template-rows: 50px 80px 40px;
+  grid-template-columns: masonry;
+  gap: 4px 2px;
+  padding: 1px 3px 5px 7px;
+  border: solid;
+  border-width: 3px 5px 1px 1px;
+  background: lightgrey content-box;
+}
+.rows {
+  grid-template-columns: 50px 80px 40px;
+  grid-template-rows: masonry;
+}
+item {
+  background: grey;
+  width: 3ch;
+  position: relative;
+}
+item:nth-child(2n) { background:purple; width:auto; }
+item:nth-child(1) {
+  border: solid;
+  border-width: 3px 13px 1px 1px;
+  margin: 7px 1px 5px 3px;
+}
+subgrid {
+  display: grid;
+  grid: subgrid / subgrid;
+  grid-row: 2 / span 2;
+  grid-gap: 8px 20px;
+  background: yellow;
+}
+.rows > subgrid {
+  grid-row: initial;
+  grid-column: 2 / span 2;
+}
+</style>
+</head>
+<body>
+
+<!-- just to sanity check that `masonry` behaves as `none` in the column axis in this case: -->
+<grid style="grid:masonry/masonry">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid>
+    <item>4a</item>
+    <item style="margin-right:15px">4b</item>
+  </subgrid>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid>
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid:subgrid/auto">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid:subgrid/auto; grid-auto-flow:column">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid:auto auto/subgrid">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid>
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid:auto/subgrid">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid:auto/subgrid; grid-auto-flow:column">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid:auto auto/subgrid">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-002-ref.html
new file mode 100644
index 0000000000..4750c1899e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-002-ref.html
@@ -0,0 +1,302 @@
+<!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: Masonry layout with a subgrid</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-template-rows: 40px 30px 20px;
+  grid-template-columns: masonry;
+  gap: 4px 2px;
+  padding: 1px 3px 5px 7px;
+  border: solid;
+  border-width: 3px 5px 1px 1px;
+  background: lightgrey content-box;
+  grid-auto-flow: column;
+}
+.rows {
+  grid-template-columns: 40px 30px 20px;
+  grid-template-rows: masonry;
+  grid-auto-flow: row;
+}
+item {
+  background: grey;
+  width: 3ch;
+  position: relative;
+}
+item:nth-child(2n) { background:purple; width:auto; }
+item:nth-child(1) {
+  border: solid;
+  border-width: 3px 5px 1px 1px;
+  margin: 7px 1px 5px 3px;
+}
+subgrid {
+  display: grid;
+  grid-row: auto/span 2;
+  grid-column: auto/span 2;
+  grid: subgrid / subgrid;
+  grid-gap: 6px 8px;
+  background: yellow;
+}
+subgrid.definite {
+  grid-row-start:2;
+}
+subgrid.extent {
+  grid-row: 1/span 3;
+}
+.rows > subgrid.definite {
+  grid-column-start:2;
+  grid-row-start:auto;
+}
+.rows > subgrid.extent {
+  grid-row: auto/span 2;
+  grid-column: 1/span 3;
+}
+</style>
+</head>
+<body>
+
+<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... -->
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid: none / masonry">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... unless it's auto-placed in the first track ... -->
+<grid>
+  <item>1</item>
+  <subgrid class="definite">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>2</item>
+  <item>3</item>
+  <item>5</item>
+</grid>
+
+<!-- ... or has definite start position -->
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid: 29px 19px / masonry">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... or span all tracks in the grid-axis -->
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid class="extent" style="grid: 39px 28px 19px / masonry">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... -->
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid: none / masonry">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... unless it's auto-placed in the first track ... -->
+<grid>
+  <item>1</item>
+  <subgrid class="definite">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>2</item>
+  <item>3</item>
+  <item>5</item>
+</grid>
+
+<!-- ... or has definite start position -->
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid: 29px 19px / masonry">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... or span all tracks in the grid-axis -->
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid class="extent" style="grid: 39px 28px 19px / masonry">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- auto-placed subgrid "inherits" masonry if it has a grid-axis of its own -->
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid: auto auto / masonry">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... -->
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid: masonry / none">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... unless it's auto-placed in the first track ... -->
+<grid class="rows">
+  <item>1</item>
+  <subgrid class="definite">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>2</item>
+  <item>3</item>
+  <item>5</item>
+</grid>
+
+<!-- ... or has definite start position -->
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid: masonry / 27px 17px">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... or span all tracks in the grid-axis -->
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid class="extent" style="grid: masonry / 37px 24px 17px">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout -->
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid: masonry / none">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... unless it's auto-placed in the first track ... -->
+<grid class="rows">
+  <item>1</item>
+  <subgrid class="definite">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>2</item>
+  <item>3</item>
+  <item>5</item>
+</grid>
+
+<!-- ... or has definite start position -->
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid: masonry / 27px 17px">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... or span all tracks in the grid-axis -->
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid class="extent" style="grid: masonry / 37px 24px 17px">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- auto-placed subgrid "inherits" masonry if it has a grid-axis of its own -->
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid: masonry / auto auto">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-002.html
new file mode 100644
index 0000000000..466e95eb03
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/subgrid/masonry-subgrid-002.html
@@ -0,0 +1,301 @@
+<!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: Masonry layout with a subgrid</title>
+  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+  <link rel="help" href="https://drats.csswg.org/css-grid-2">
+  <link rel="match" href="masonry-subgrid-002-ref.html">
+<style>
+html,body {
+  color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
+}
+
+grid {
+  display: inline-grid;
+  grid-template-rows: 40px 30px 20px;
+  grid-template-columns: masonry;
+  gap: 4px 2px;
+  padding: 1px 3px 5px 7px;
+  border: solid;
+  border-width: 3px 5px 1px 1px;
+  background: lightgrey content-box;
+}
+.rows {
+  grid-template-columns: 40px 30px 20px;
+  grid-template-rows: masonry;
+}
+item {
+  background: grey;
+  width: 3ch;
+  position: relative;
+}
+item:nth-child(2n) { background:purple; width:auto; }
+item:nth-child(1) {
+  border: solid;
+  border-width: 3px 5px 1px 1px;
+  margin: 7px 1px 5px 3px;
+}
+subgrid {
+  display: grid;
+  grid-row: auto/span 2;
+  grid-column: auto/span 2;
+  grid: subgrid / subgrid;
+  grid-gap: 6px 8px;
+  background: yellow;
+}
+subgrid.definite {
+  grid-row-start:2;
+}
+subgrid.extent {
+  grid-row: auto/span 3;
+}
+.rows > subgrid.definite {
+  grid-column-start:2;
+}
+.rows > subgrid.extent {
+  grid-row: auto/span 2;
+  grid-column: auto/span 3;
+}
+</style>
+</head>
+<body>
+
+<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... -->
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid>
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... unless it's auto-placed in the first track ... -->
+<grid>
+  <item>1</item>
+  <subgrid>
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>2</item>
+  <item>3</item>
+  <item>5</item>
+</grid>
+
+<!-- ... or has definite start position -->
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid class="definite">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... or span all tracks in the grid-axis -->
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid class="extent">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... -->
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid: subgrid / masonry">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... unless it's auto-placed in the first track ... -->
+<grid>
+  <item>1</item>
+  <subgrid style="grid: subgrid / masonry">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>2</item>
+  <item>3</item>
+  <item>5</item>
+</grid>
+
+<!-- ... or has definite start position -->
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid class="definite">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... or span all tracks in the grid-axis -->
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid class="extent">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- auto-placed subgrid "inherits" masonry if it has a grid-axis of its own -->
+<grid>
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid: auto auto / subgrid">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout ... -->
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid>
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... unless it's auto-placed in the first track ... -->
+<grid class="rows">
+  <item>1</item>
+  <subgrid>
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>2</item>
+  <item>3</item>
+  <item>5</item>
+</grid>
+
+<!-- ... or has definite start position -->
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid class="definite">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... or span all tracks in the grid-axis -->
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid class="extent">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- auto-placed subgrid inhibits subgridding when parent is doing masonry layout -->
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid: masonry / subgrid">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... unless it's auto-placed in the first track ... -->
+<grid class="rows">
+  <item>1</item>
+  <subgrid style="grid: masonry / subgrid">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>2</item>
+  <item>3</item>
+  <item>5</item>
+</grid>
+
+<!-- ... or has definite start position -->
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid class="definite">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- ... or span all tracks in the grid-axis -->
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid class="extent">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+<!-- auto-placed subgrid "inherits" masonry if it has a grid-axis of its own -->
+<grid class="rows">
+  <item>1</item>
+  <item>2</item>
+  <item>3</item>
+  <subgrid style="grid: subgrid / auto auto">
+    <item>4a</item>
+    <item>4b</item>
+    <item>4c</item>
+  </subgrid>
+  <item>5</item>
+</grid>
+
+</body></html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-check-grid-height-on-resize-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-check-grid-height-on-resize-ref.html
new file mode 100644
index 0000000000..7196886492
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-check-grid-height-on-resize-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta charset="utf-8">
+<link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-3">
+<meta name="assert" content="When the height of an element in the grid changes, ensure the grid is properly resized">
+</head>
+
+<style>
+  grid {
+    display: grid;
+    grid-template-rows: masonry;
+    grid-template-columns: auto;
+    grid-gap: 10px;
+    border: 10px;
+    border-style: solid;
+  }
+  item1 {
+    background-color: grey;
+    height: 125px;
+    width: 250px;
+  }
+  item2 {
+    background-color: grey;
+    height: 250px;
+    width: 250px;
+  }
+</style>
+</head>
+<body>
+  <grid>
+    <item1>1</item1>
+    <item2>2</item2>
+  </grid>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-check-grid-height-on-resize.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-check-grid-height-on-resize.html
new file mode 100644
index 0000000000..06c2901f27
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-check-grid-height-on-resize.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta charset="utf-8">
+<link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-3">
+<link rel="match" href="masonry-track-sizing-check-grid-height-on-resize-ref.html">
+<meta name="assert" content="When the height of an element in the grid changes, ensure the grid is properly resized">
+</head>
+
+<style>
+  grid {
+    display: grid;
+    grid-template-rows: masonry;
+    grid-template-columns: auto;
+    grid-gap: 10px;
+    border: 10px;
+    border-style: solid;
+  }
+  item {
+    background-color: grey;
+    height: 250px;
+    width: 250px;
+  }
+</style>
+</head>
+<body>
+  <grid>
+    <item>1</item>
+    <item>2</item>
+  </grid>
+</body>
+<script>
+    /* Force a relayout */
+    document.body.offsetHeight;
+    document.querySelector("item").style["height"] = "125px";
+</script>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-explicit-block-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-explicit-block-ref.html
new file mode 100644
index 0000000000..993017919f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-explicit-block-ref.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>CSS Grid Reference: Verify definite blocks effect track-sizing algorithm.</title>
+</head>
+
+<body>
+<style>
+grid {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: 50px 50px;
+    width: 300px;
+    height: 100px;
+}
+
+box1 {
+    height: 50px;
+    width: 30px;
+    background-color: blue;
+}
+
+box2 {
+    height: 50px;
+    background-color: red;
+}
+
+box3 {
+    height: 50px;
+    width: 100px;
+    grid-row: 2;
+    grid-column: 1;
+    background-color: purple;
+}
+
+box4 {
+    height: 50px;
+    background-color: green;
+}
+
+</style>
+
+<grid>
+    <box1>1</box1>
+    <box2>2</box2>
+    <box3>3</box3>
+    <box4>4</box4>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-explicit-block.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-explicit-block.html
new file mode 100644
index 0000000000..3cc98708fe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-explicit-block.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>CSS Grid Test: Verify definite blocks effect track-sizing algorithm.</title>
+    <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com">
+    <link rel="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing">
+    <link rel="match" href="masonry-track-sizing-explicit-block-ref.html">
+</head>
+
+<body>
+<style>
+    grid {
+        display: grid;
+        grid-template-columns: 100px 1fr;
+        grid-template-rows: masonry;
+        width: 300px;
+        height: 100px;
+    }
+
+    box1 {
+        height: 50px;
+        width: 30px;
+        background-color: blue;
+    }
+
+    box2 {
+        height: 50px;
+        background-color: red;
+    }
+
+    box3 {
+        height: 50px;
+        width: 100px;
+        background-color: purple;
+    }
+
+    box4 {
+        height: 50px;
+        background-color: green;
+    }
+
+</style>
+
+<grid>
+    <box1>1</box1>
+    <box2>2</box2>
+    <box3>3</box3>
+    <box4>4</box4>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-left-side-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-left-side-ref.html
new file mode 100644
index 0000000000..5a31517183
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-left-side-ref.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>CSS Grid Test: Verify correct behavior of track-sizing</title>
+    <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com">
+    <link rel="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing">
+</head>
+
+<body>
+<style>
+grid {
+  display: grid;
+  grid-template-columns: 50px 1fr;
+  grid-template-rows: 50px 250px;
+  width: 300px;
+  height: 100px;
+}
+
+box1 {
+    height: 50px;
+    width: 50px;
+    background-color: blue;
+}
+
+box2 {
+    height: 50px;
+    background-color: red;
+}
+
+box3 {
+    width: 100px;
+    height: 50px;
+    background-color: purple;
+    z-index: 1;
+}
+
+box4 {
+    height: 50px;
+    background-color: green;
+}
+</style>
+
+<grid>
+    <box1>1</box1>
+    <box2>2</box2>
+    <box3>3</box3>
+    <box4>4</box4>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-left-side.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-left-side.html
new file mode 100644
index 0000000000..cd1b78a47b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-left-side.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>CSS Grid Test: Verify correct behavior of track-sizing</title>
+    <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com">
+    <link rel="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing">
+    <link rel="match" href="masonry-track-sizing-overflow-left-side-ref.html">
+</head>
+
+<body>
+<style>
+grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: masonry;
+  width: 300px;
+  height: 100px;
+}
+
+box1 {
+    height: 50px;
+    width: 50px;
+    background-color: blue;
+}
+
+box2 {
+    height: 50px;
+    background-color: red;
+}
+
+box3 {
+    width: 100px;
+    height: 50px;
+    background-color: purple;
+    z-index: 1;
+}
+
+box4 {
+    height: 50px;
+    background-color: green;
+}
+</style>
+
+<grid>
+    <box1>1</box1>
+    <box2>2</box2>
+    <box3>3</box3>
+    <box4>4</box4>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-right-side-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-right-side-ref.html
new file mode 100644
index 0000000000..51e657e2a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-right-side-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>CSS Grid Test: Verify correct behavior of track-sizing</title>
+    <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com">
+    <link rel="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing">
+</head>
+
+<body>
+<style>
+grid {
+  display: grid;
+  grid-template-columns: 1fr 50px;
+  grid-template-rows: 1fr 50px;
+  width: 300px;
+  height: 100px;
+}
+
+box1 {
+    height: 50px;
+    background-color: red;
+}
+
+box2 {
+    height: 50px;
+    width: 50px;
+    background-color: blue;
+}
+
+box3 {
+    height: 50px;
+    background-color: green;
+}
+
+box4 {
+    width: 100px;
+    height: 50px;
+    background-color: purple;
+    z-index: 1;
+}
+
+</style>
+
+<grid>
+    <box1>1</box1>
+    <box2>2</box2>
+    <box3>3</box3>
+    <box4>4</box4>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-right-side.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-right-side.html
new file mode 100644
index 0000000000..e4c17fd7b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-overflow-right-side.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>CSS Grid Test: Verify correct behavior of track-sizing</title>
+    <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com">
+    <link rel="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing">
+    <link rel="match" href="masonry-track-sizing-overflow-right-side-ref.html">
+</head>
+
+<body>
+<style>
+grid {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: masonry;
+  width: 300px;
+  height: 100px;
+}
+
+box1 {
+    width: 1fr;
+    height: 50px;
+    background-color: red;
+}
+
+box2 {
+    height: 50px;
+    width: 50px;
+    background-color: blue;
+}
+
+box3 {
+    height: 50px;
+    background-color: green;
+}
+
+box4 {
+    width: 100px;
+    height: 50px;
+    background-color: purple;
+    z-index: 1;
+}
+
+</style>
+
+<grid>
+    <box1>1</box1>
+    <box2>2</box2>
+    <box3>3</box3>
+    <box4>4</box4>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-span-row-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-span-row-ref.html
new file mode 100644
index 0000000000..b3e5fef233
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-span-row-ref.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>CSS Grid Reference: Verify that fully spanning blocks take presedence over indefinite ones.</title>
+</head>
+
+<body>
+<style>
+grid {
+    display: grid;
+    grid-template-columns: 50px 1fr;
+    grid-template-rows: auto auto auto;
+    width: 300px;
+    height: 100px;
+}
+
+box1 {
+    height: 50px;
+    width: 50px;
+    background-color: blue;
+}
+
+box2 {
+    height: 50px;
+    background-color: red;
+}
+
+box3 {
+    width: 100px;
+    height: 50px;
+    background-color: purple;
+    z-index: 1;
+}
+
+box4 {
+    height: 50px;
+    width: 300px;
+    grid-column-start: 1;
+    grid-column-end: 3;
+    background-color: green;
+}
+</style>
+
+<grid>
+    <box1>1</box1>
+    <box2>2</box2>
+    <box4>4</box4>
+    <box3>3</box3>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-span-row.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-span-row.html
new file mode 100644
index 0000000000..475c27f1eb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/masonry/tentative/track-sizing/masonry-track-sizing-span-row.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>CSS Grid Test: Verify that fully spanning blocks take presedence over indefinite ones.</title>
+    <link rel="author" title="Brandon Stewart" href="mailto:brandonstewart@apple.com">
+    <link rel="help" href="https://drafts.csswg.org/css-grid-3/#track-sizing">
+    <link rel="match" href="masonry-track-sizing-span-row-ref.html">
+</head>
+
+<body>
+<style>
+    grid {
+        display: grid;
+        grid-template-columns: 50px 1fr;
+        grid-template-rows: masonry;
+        width: 300px;
+        height: 100px;
+    }
+
+    box1 {
+        height: 50px;
+        width: 50px;
+        background-color: blue;
+    }
+
+    box2 {
+        height: 50px;
+        background-color: red;
+    }
+
+    box3 {
+        width: 100px;
+        height: 50px;
+        background-color: purple;
+        z-index: 1;
+    }
+
+    box4 {
+        height: 50px;
+        width: 300px;
+        grid-column: span 2;
+        background-color: green;
+    }
+</style>
+
+<grid>
+    <box1>1</box1>
+    <box2>2</box2>
+    <box4>4</box4>
+    <box3>3</box3>
+</grid>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/nested-grid-item-block-size-001-ref.html b/testing/web-platform/tests/css/css-grid/nested-grid-item-block-size-001-ref.html
new file mode 100644
index 0000000000..a037967e49
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/nested-grid-item-block-size-001-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+<style>
+.container {
+  list-style: none;
+  padding: 0px;
+  margin: 0px;
+}
+
+img {
+  block-size: 55vw;
+  aspect-ratio: 2/1;
+}
+</style>
+</head>
+<body>
+  <ul class="container">
+    <li>
+      <img src="support/colors-8x16.png">
+    </li>
+  </ul>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/nested-grid-item-block-size-001.html b/testing/web-platform/tests/css/css-grid/nested-grid-item-block-size-001.html
new file mode 100644
index 0000000000..e2892ecc3c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/nested-grid-item-block-size-001.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <link rel="author" title="Sean Feng" href="mailto:sefeng@mozilla.com">
+  <title>CSS Grid Test: Nested grid contains an item that overflows the viewport</title>
+  <link rel="help" href="https://drafts.csswg.org/css-grid">
+  <link rel="match" href="nested-grid-item-block-size-001-ref.html">
+<style>
+.container {
+  display: grid;
+  grid-auto-flow: column;
+  list-style: none;
+  padding: 0px;
+  margin: 0px;
+}
+
+img {
+  block-size: 55vw;
+  aspect-ratio: 2/1;
+}
+</style>
+</head>
+<body>
+  <ul class="container">
+    <li>
+      <div style="display: inline-block;">
+        <div style="display: grid;">
+          <img src="support/colors-8x16.png">
+        </div>
+      </div>
+    </li>
+  </ul>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-area-computed.html b/testing/web-platform/tests/css/css-grid/parsing/grid-area-computed.html
new file mode 100644
index 0000000000..d1ae78c702
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-area-computed.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridArea</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#placement">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+// auto
+test_computed_value("grid-area", "auto / auto / auto / auto",
+                    ["auto", "auto / auto / auto / auto"]);
+test_computed_value("grid-row", "auto / auto", ["auto", "auto / auto"]);
+test_computed_value("grid-column-end", "auto");
+
+// <custom-ident>
+test_computed_value("grid-row", "-zπ", [ "-zπ", "-zπ / -zπ"]);
+test_computed_value("grid-row-start", "AZ");
+test_computed_value("grid-column-start", "-_π");
+test_computed_value("grid-row-end", "_9");
+
+
+// <integer> && <custom-ident>?
+test_computed_value("grid-area", "1 / 90 -a- / auto / auto",
+                    ["1 / 90 -a-", "1 / 90 -a- / auto / auto"]);
+test_computed_value("grid-row", "2 az / auto", ["2 az", "2 az / auto"]);
+test_computed_value("grid-column", "9 / -19 zA");
+test_computed_value("grid-row-start", "-19");
+test_computed_value("grid-row-start", "9 -Z_");
+test_computed_value("grid-column-start", "-44 Z");
+test_computed_value("grid-row-end", "1 -πA");
+test_computed_value("grid-column-end", "5 π_");
+
+// span && [ <integer> || <custom-ident> ]
+test_computed_value("grid-area", "span 2 i / auto / auto / auto",
+                    ["span 2 i", "span 2 i / auto / auto / auto"]);
+test_computed_value("grid-row", "span 2 / auto", ["span 2", "span 2 / auto"]);
+test_computed_value("grid-column-start", "span 1 i", "span i");
+test_computed_value("grid-row-start", "span 1");
+test_computed_value("grid-row-end", "span 2 i");
+test_computed_value("grid-column-end", "span 2");
+
+// https://github.com/w3c/csswg-drafts/issues/3448
+test_computed_value("grid-row-start", "span i");
+test_computed_value("grid-row", "span i / auto", ["span i", "span i / auto"]);
+
+// <grid-line> [ / <grid-line> ]{0,3}
+test_computed_value("grid-area", "auto / i / auto / i",
+                    ["auto / i", "auto / i / auto / i"]);
+test_computed_value("grid-area", "auto / i / 2 j",
+                    ["auto / i / 2 j", "auto / i / 2 j / i"]);
+test_computed_value("grid-area", "auto / i / 2 j / span 3 k");
+test_computed_value("grid-row", "auto / i");
+test_computed_value("grid-column", "2 j / span 3 k");
+
+
+// https://github.com/w3c/csswg-drafts/issues/2858
+test_computed_value("grid-column-end",  "\\31st", "\\31 st");
+test_computed_value("grid-column-end",  "\\31 st", "\\31 st");
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-area-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-area-invalid.html
new file mode 100644
index 0000000000..c7d35ebf09
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-area-invalid.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-area with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-area">
+<meta name="assert" content="grid-area supports only the grammar '<grid-line> [ / <grid-line> ]{0,3}'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("grid-area", "'string'");
+test_invalid_value("grid-row", "1.0");
+test_invalid_value("grid-column", "1 2");
+test_invalid_value("grid-row-start", "+-3");
+test_invalid_value("grid-column-start", "0");
+test_invalid_value("grid-row-end", "span");
+test_invalid_value("grid-column-end", "sPaN");
+test_invalid_value("grid-column-end", '"1st"');
+test_invalid_value("grid-column-end", "1st");
+test_invalid_value("grid-column-start", "auto 1");
+test_invalid_value("grid-row-start", "1 auto");
+
+test_invalid_value("grid-area", "auto / initial");
+test_invalid_value("grid-row", "auto / inherit");
+test_invalid_value("grid-column", "auto / unset");
+
+test_invalid_value("grid-area", "auto / auto / auto / auto / auto");
+test_invalid_value("grid-row", "1 / 2 / 3")
+test_invalid_value("grid-column", "a / b / c");
+test_invalid_value("grid-row-end", "span 1 / span 2");
+test_invalid_value("grid-area", "auto 2 auto 4");
+test_invalid_value("grid-row", "33 -A0 auto");
+test_invalid_value("grid-row", "auto i 2 j span 3 k");
+
+
+// https://github.com/w3c/csswg-drafts/issues/2856
+test_invalid_value("grid-row-end", "1 auto");
+test_invalid_value("grid-row-end", "span 1 auto");
+test_invalid_value("grid-row-end", "span auto 1");
+test_invalid_value("grid-row-end", "1 auto span");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-area-shorthand.html b/testing/web-platform/tests/css/css-grid/parsing/grid-area-shorthand.html
new file mode 100644
index 0000000000..9cb84e940a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-area-shorthand.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: grid-area sets longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-area">
+<meta name="assert" content="grid-area supports the full grammar '<grid-line> [ / <grid-line> ]{0,3}'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_shorthand_value('grid-area', 'auto', {
+  'grid-row-start': 'auto',
+  'grid-column-start': 'auto',
+  'grid-row-end': 'auto',
+  'grid-column-end': 'auto'
+});
+
+// <custom-ident>
+test_shorthand_value('grid-area', '--a', {
+  'grid-row-start': '--a',
+  'grid-column-start': '--a',
+  'grid-row-end': '--a',
+  'grid-column-end': '--a'
+});
+
+test_shorthand_value('grid-area', 'a / b', {
+  'grid-row-start': 'a',
+  'grid-column-start': 'b',
+  'grid-row-end': 'a',
+  'grid-column-end': 'b'
+});
+
+test_shorthand_value('grid-area', 'a / b / c', {
+  'grid-row-start': 'a',
+  'grid-column-start': 'b',
+  'grid-row-end': 'c',
+  'grid-column-end': 'b'
+});
+
+test_shorthand_value('grid-area', 'a / b / c / d', {
+  'grid-row-start': 'a',
+  'grid-column-start': 'b',
+  'grid-row-end': 'c',
+  'grid-column-end': 'd'
+});
+
+// <integer> && <custom-ident>?
+// span && [ <integer> || <custom-ident> ]
+test_shorthand_value('grid-area', '+90 -a- / 2 i span', {
+  'grid-row-start': '90 -a-',
+  'grid-column-start': 'span 2 i',
+  'grid-row-end': 'auto',
+  'grid-column-end': 'auto'
+});
+
+test_shorthand_value('grid-area', '1 / 2 / 3 / 4', {
+  'grid-row-start': '1',
+  'grid-column-start': '2',
+  'grid-row-end': '3',
+  'grid-column-end': '4'
+});
+
+
+test_shorthand_value('grid-row', 'auto', {
+  'grid-row-start': 'auto',
+  'grid-row-end': 'auto'
+});
+
+test_shorthand_value('grid-row', 'one / 2', {
+  'grid-row-start': 'one',
+  'grid-row-end': '2'
+});
+
+test_shorthand_value('grid-row', '1 two / four 3', {
+  'grid-row-start': '1 two',
+  'grid-row-end': '3 four'
+});
+
+
+test_shorthand_value('grid-column', '5 span', {
+  'grid-column-start': 'span 5',
+  'grid-column-end': 'auto'
+});
+
+test_shorthand_value('grid-column', '1 / two', {
+  'grid-column-start': '1',
+  'grid-column-end': 'two'
+});
+
+test_shorthand_value('grid-column', 'span 1 two / four 3 span', {
+  'grid-column-start': 'span two',
+  'grid-column-end': 'span 3 four'
+});
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-area-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-area-valid.html
new file mode 100644
index 0000000000..b61c803658
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-area-valid.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-area with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-area">
+<meta name="assert" content="grid-area supports the full grammar '<grid-line> [ / <grid-line> ]{0,3}'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// auto
+test_valid_value("grid-area", "auto");
+test_valid_value("grid-area", "auto / auto", "auto");
+test_valid_value("grid-area", "auto / auto / auto", "auto");
+test_valid_value("grid-area", "auto / auto / auto / auto", "auto");
+test_valid_value("grid-area", "AuTo", "auto");
+test_valid_value("grid-row", "auto");
+test_valid_value("grid-row", "auto/auto", "auto");
+test_valid_value("grid-column-end", "AuTo", "auto");
+
+// <custom-ident>
+test_valid_value("grid-area", "--a");
+test_valid_value("grid-row", "-zπ");
+test_valid_value("grid-row", "-zπ/-zπ", "-zπ");
+test_valid_value("grid-row", "i / i", "i");
+test_valid_value("grid-row-start", "AZ");
+test_valid_value("grid-column-start", "-_π");
+test_valid_value("grid-row-end", "_9");
+
+
+// <integer> && <custom-ident>?
+test_valid_value("grid-area", "1");
+test_valid_value("grid-area", "+90 -a-", "90 -a-");
+test_valid_value("grid-row", "az 2", "2 az");
+test_valid_value("grid-column", "9");
+test_valid_value("grid-column", "-19 zA");
+test_valid_value("grid-column", "-A0 33", "33 -A0");
+test_valid_value("grid-row-start", "-19");
+test_valid_value("grid-row-start", "9 -Z_");
+test_valid_value("grid-column-start", "+90", "90");
+test_valid_value("grid-column-start", "Z -44", "-44 Z");
+test_valid_value("grid-row-end", "1 -πA");
+test_valid_value("grid-column-end", "π_ +5", "5 π_");
+
+// span && [ <integer> || <custom-ident> ]
+test_valid_value("grid-area", "span 2 i");
+test_valid_value("grid-area", "i 2 SpAn", "span 2 i");
+test_valid_value("grid-area", "span 1 i", "span i")
+test_valid_value("grid-row", "span 2");
+test_valid_value("grid-column", "i SpAn", "span i");
+test_valid_value("grid-row-start", "span i");
+test_valid_value("grid-column-start", "SpAn i 2", "span 2 i");
+test_valid_value("grid-row-end", "2 i span", "span 2 i");
+test_valid_value("grid-column-end", "2 SpAn", "span 2");
+
+// <grid-line> [ / <grid-line> ]{0,3}
+test_valid_value("grid-area", "auto / i");
+test_valid_value("grid-area", "auto / i / auto / i", "auto / i");
+test_valid_value("grid-area", "auto / i / auto / 2 i");
+test_valid_value("grid-area", "1 / i  / auto / i", "1 / i");
+test_valid_value("grid-area", "1 / auto / auto / auto", "1");
+test_valid_value("grid-area", "1 / auto / i / auto", "1 / auto / i");
+test_valid_value("grid-area", "1 / j / i / k");
+test_valid_value("grid-area", "1 / auto / 2 / auto", "1 / auto / 2");
+test_valid_value("grid-area", "1 / i / 2 / auto");
+test_valid_value("grid-area", "i / i / auto / auto");
+test_valid_value("grid-area", "i / auto / i / auto", "i / auto");
+test_valid_value("grid-area", "auto / i / 2 j");
+test_valid_value("grid-area", "auto / i / 2 j / span 3 k");
+test_valid_value("grid-row", "auto / i");
+test_valid_value("grid-row", "i / auto");
+test_valid_value("grid-row", "2 i / auto", "2 i");
+test_valid_value("grid-row", "1 / auto", "1");
+test_valid_value("grid-column", "2 j / span 3 k");
+
+// https://github.com/w3c/csswg-drafts/issues/2858
+// '\\31 st' in Blink, Firefox, EdgeHTML and Safari serialize invalid values.
+test_valid_value("grid-column-end", "\\31st", ["\\31 st", "\\31st"]);
+test_valid_value("grid-column-end", "\\31 st", ["\\31 st", "\\31st"]);
+test_valid_value("grid-column", "\\31st / \\31 st", ["\\31 st", "\\31st"]);
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-computed.html b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-computed.html
new file mode 100644
index 0000000000..ac8a9fb4ef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-computed.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridAutoColumns</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
+<script>
+// <track-breadth>
+// <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
+test_computed_value("grid-auto-columns", "1px");
+test_computed_value("grid-auto-columns", "calc(10px + 0.5em)", "30px");
+test_computed_value("grid-auto-columns", "calc(10px - 0.5em)", "0px");
+test_computed_value("grid-auto-columns", "4%");
+test_computed_value("grid-auto-columns", "5fr");
+test_computed_value("grid-auto-columns", "min-content");
+test_computed_value("grid-auto-columns", "max-content");
+test_computed_value("grid-auto-columns", "auto");
+
+// minmax( <inflexible-breadth> , <track-breadth> )
+// <inflexible-breadth> = <length-percentage> | min-content | max-content | auto
+test_computed_value("grid-auto-columns", "minmax(1px, 5fr)");
+test_computed_value("grid-auto-columns", "minmax(calc(10px + 0.5em), max-content)", "minmax(30px, max-content)");
+test_computed_value("grid-auto-columns", "minmax(calc(10px - 0.5em), max-content)", "minmax(0px, max-content)");
+test_computed_value("grid-auto-columns", "minmax(4%, auto)");
+test_computed_value("grid-auto-columns", "minmax(min-content, calc(10px + 0.5em))", "minmax(min-content, 30px)");
+test_computed_value("grid-auto-columns", "minmax(auto, 4%)");
+
+// fit-content( <length-percentage> )
+test_computed_value("grid-auto-columns", "fit-content(1px)");
+test_computed_value("grid-auto-columns", "fit-content(calc(10px + 0.5em))", "fit-content(30px)");
+test_computed_value("grid-auto-columns", "fit-content(calc(10px - 0.5em))", "fit-content(0px)");
+test_computed_value("grid-auto-columns", "fit-content(4%)");
+
+// 0
+test_computed_value("grid-auto-columns", "0px");
+test_computed_value("grid-auto-columns", "0%");
+test_computed_value("grid-auto-columns", "0fr");
+test_computed_value("grid-auto-columns", "minmax(auto, 0%)");
+test_computed_value("grid-auto-columns", "fit-content(0px)");
+
+// <track-size>+
+// https://bugzilla.mozilla.org/show_bug.cgi?id=1339672
+test_computed_value("grid-auto-columns", "1px 2px 3px 0px");
+test_computed_value("grid-auto-columns", "fit-content(1px) minmax(2px, 3px) 4px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-invalid.html
new file mode 100644
index 0000000000..04e0fadf0d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-invalid.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-auto-columns with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns">
+<meta name="assert" content="grid-auto-columns supports only the grammar '<track-size>+'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// <track-breadth>
+test_invalid_value("grid-auto-columns", "none");
+test_invalid_value("grid-auto-columns", "-1px");
+test_invalid_value("grid-auto-columns", "-4%");
+
+// minmax( <inflexible-breadth> , <track-breadth> )
+test_invalid_value("grid-auto-columns", "minmax(1px)");
+test_invalid_value("grid-auto-columns", "minmax(1px, 2px, 3px)");
+test_invalid_value("grid-auto-columns", "minmax(5fr, 1px)");
+test_invalid_value("grid-auto-columns", "minmax(6px, -7%)");
+test_invalid_value("grid-auto-columns", "minmax(8px, -9fr)");
+
+// fit-content( <length-percentage> )
+test_invalid_value("grid-auto-columns", "fit-content(-1px)");
+test_invalid_value("grid-auto-columns", "fit-content(1px, 2px)");
+test_invalid_value("grid-auto-columns", "fit-content(1px auto)");
+
+// <track-size>+
+test_invalid_value("grid-auto-columns", "2em / 3em");
+test_invalid_value("grid-auto-columns", "auto, 10%");
+test_invalid_value("grid-auto-columns", "1px [a] 1px");
+test_invalid_value("grid-auto-columns", "[] 1px []");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-valid.html
new file mode 100644
index 0000000000..e26d085a2d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-columns-valid.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-auto-columns with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns">
+<meta name="assert" content="grid-auto-columns supports the full grammar '<track-size>+'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// <track-breadth>
+// <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
+test_valid_value("grid-auto-columns", "1px");
+test_valid_value("grid-auto-columns", "2em");
+test_valid_value("grid-auto-columns", "calc(2em + 3ex)");
+test_valid_value("grid-auto-columns", "4%");
+test_valid_value("grid-auto-columns", "5fr");
+test_valid_value("grid-auto-columns", "min-content");
+test_valid_value("grid-auto-columns", "max-content");
+test_valid_value("grid-auto-columns", "auto");
+test_valid_value("grid-auto-columns", "auto /**/", "auto");
+
+// minmax( <inflexible-breadth> , <track-breadth> )
+// <inflexible-breadth> = <length-percentage> | min-content | max-content | auto
+test_valid_value("grid-auto-columns", "minmax(1px, 5fr)");
+test_valid_value("grid-auto-columns", "minmax(2em, min-content)");
+test_valid_value("grid-auto-columns", "minmax(calc(2em + 3ex), max-content)");
+test_valid_value("grid-auto-columns", "minmax(4%, auto)");
+test_valid_value("grid-auto-columns", "minmax(5vmin, 1px)");
+test_valid_value("grid-auto-columns", "minmax(min-content, 2em)");
+test_valid_value("grid-auto-columns", "minmax(max-content, calc(2em + 3ex))");
+test_valid_value("grid-auto-columns", "minmax(auto, 4%)");
+
+// fit-content( <length-percentage> )
+test_valid_value("grid-auto-columns", "fit-content(1px)");
+test_valid_value("grid-auto-columns", "fit-content(2em)");
+test_valid_value("grid-auto-columns", "fit-content(calc(2em + 3ex))");
+test_valid_value("grid-auto-columns", "fit-content(4%)");
+
+test_valid_value("grid-auto-columns", "0px");
+test_valid_value("grid-auto-columns", "0%");
+test_valid_value("grid-auto-columns", "0fr");
+test_valid_value("grid-auto-columns", "minmax(auto, 0%)");
+test_valid_value("grid-auto-columns", "fit-content(0px)");
+
+// <track-size>+
+test_valid_value("grid-auto-columns", "auto auto");
+test_valid_value("grid-auto-columns", "auto 10px");
+test_valid_value("grid-auto-columns", "1px 2px 3px 0px");
+test_valid_value("grid-auto-columns", "fit-content(1px) minmax(2px, 3px) 4px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-computed.html b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-computed.html
new file mode 100644
index 0000000000..330956c493
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-computed.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridAutoFlow</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-flow">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("grid-auto-flow", "row");
+test_computed_value("grid-auto-flow", "column");
+test_computed_value("grid-auto-flow", "row dense", "dense");
+test_computed_value("grid-auto-flow", "column dense");
+
+test_computed_value("grid-auto-flow", "dense row", "dense");
+test_computed_value("grid-auto-flow", "dense column", "column dense");
+
+test_computed_value("grid-auto-flow", "dense", "dense");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-invalid.html
new file mode 100644
index 0000000000..a261e8eba1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-invalid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-auto-flow with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-flow">
+<meta name="assert" content="grid-auto-flow supports only the grammar '[ row | column ] || dense'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("grid-auto-flow", "auto");
+test_invalid_value("grid-auto-flow", "row dense column");
+test_invalid_value("grid-auto-flow", "dense row dense");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-valid.html
new file mode 100644
index 0000000000..7db8b189a2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-flow-valid.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-auto-flow with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-flow">
+<meta name="assert" content="grid-auto-flow supports the full grammar '[ row | column ] || dense'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("grid-auto-flow", "row");
+test_valid_value("grid-auto-flow", "column");
+test_valid_value("grid-auto-flow", "row dense", "dense");
+test_valid_value("grid-auto-flow", "dense row", "dense");
+test_valid_value("grid-auto-flow", "dense");
+test_valid_value("grid-auto-flow", "column dense");
+test_valid_value("grid-auto-flow", "dense column", "column dense");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-computed.html b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-computed.html
new file mode 100644
index 0000000000..761c5d785d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-computed.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridAutoRows</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
+<script>
+// <track-breadth>
+// <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
+test_computed_value("grid-auto-rows", "1px");
+test_computed_value("grid-auto-rows", "calc(10px + 0.5em)", "30px");
+test_computed_value("grid-auto-rows", "calc(10px - 0.5em)", "0px");
+test_computed_value("grid-auto-rows", "4%");
+test_computed_value("grid-auto-rows", "5fr");
+test_computed_value("grid-auto-rows", "min-content");
+test_computed_value("grid-auto-rows", "max-content");
+test_computed_value("grid-auto-rows", "auto");
+
+// minmax( <inflexible-breadth> , <track-breadth> )
+// <inflexible-breadth> = <length-percentage> | min-content | max-content | auto
+test_computed_value("grid-auto-rows", "minmax(1px, 5fr)");
+test_computed_value("grid-auto-rows", "minmax(calc(10px + 0.5em), max-content)", "minmax(30px, max-content)");
+test_computed_value("grid-auto-rows", "minmax(calc(10px - 0.5em), max-content)", "minmax(0px, max-content)");
+test_computed_value("grid-auto-rows", "minmax(4%, auto)");
+test_computed_value("grid-auto-rows", "minmax(min-content, calc(10px + 0.5em))", "minmax(min-content, 30px)");
+test_computed_value("grid-auto-rows", "minmax(auto, 4%)");
+
+// fit-content( <length-percentage> )
+test_computed_value("grid-auto-rows", "fit-content(1px)");
+test_computed_value("grid-auto-rows", "fit-content(calc(10px + 0.5em))", "fit-content(30px)");
+test_computed_value("grid-auto-rows", "fit-content(calc(10px - 0.5em))", "fit-content(0px)");
+test_computed_value("grid-auto-rows", "fit-content(4%)");
+
+// 0
+test_computed_value("grid-auto-rows", "0px");
+test_computed_value("grid-auto-rows", "0%");
+test_computed_value("grid-auto-rows", "0fr");
+test_computed_value("grid-auto-rows", "minmax(auto, 0%)");
+test_computed_value("grid-auto-rows", "fit-content(0px)");
+
+// <track-size>+
+// https://bugzilla.mozilla.org/show_bug.cgi?id=1339672
+test_computed_value("grid-auto-rows", "1px 2px 3px 0px");
+test_computed_value("grid-auto-rows", "fit-content(1px) minmax(2px, 3px) 4px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-invalid.html
new file mode 100644
index 0000000000..1b61479f3c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-invalid.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-auto-rows with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows">
+<meta name="assert" content="grid-auto-rows supports only the grammar '<track-size>+'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// <track-breadth>
+test_invalid_value("grid-auto-rows", "none");
+test_invalid_value("grid-auto-rows", "-1px");
+test_invalid_value("grid-auto-rows", "-4%");
+
+// minmax( <inflexible-breadth> , <track-breadth> )
+test_invalid_value("grid-auto-rows", "minmax(1px)");
+test_invalid_value("grid-auto-rows", "minmax(1px, 2px, 3px)");
+test_invalid_value("grid-auto-rows", "minmax(5fr, 1px)");
+test_invalid_value("grid-auto-rows", "minmax(6px, -7%)");
+
+// fit-content( <length-percentage> )
+test_invalid_value("grid-auto-rows", "fit-content(-1px)");
+test_invalid_value("grid-auto-rows", "fit-content(1px, 2px)");
+test_invalid_value("grid-auto-rows", "fit-content(1px auto)");
+
+// <track-size>+
+test_invalid_value("grid-auto-rows", "2em / 3em");
+test_invalid_value("grid-auto-rows", "auto, 10%");
+test_invalid_value("grid-auto-rows", "1px [a] 1px");
+test_invalid_value("grid-auto-rows", "[] 1px []");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-valid.html
new file mode 100644
index 0000000000..d4dcdb12b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-auto-rows-valid.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-auto-rows with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows">
+<meta name="assert" content="grid-auto-rows supports the full grammar '<track-size>+'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// <track-breadth>
+// <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
+test_valid_value("grid-auto-rows", "1px");
+test_valid_value("grid-auto-rows", "2em");
+test_valid_value("grid-auto-rows", "calc(2em + 3ex)");
+test_valid_value("grid-auto-rows", "4%");
+test_valid_value("grid-auto-rows", "5fr");
+test_valid_value("grid-auto-rows", "min-content");
+test_valid_value("grid-auto-rows", "max-content");
+test_valid_value("grid-auto-rows", "auto");
+test_valid_value("grid-auto-rows", "auto /**/", "auto");
+
+// minmax( <inflexible-breadth> , <track-breadth> )
+// <inflexible-breadth> = <length-percentage> | min-content | max-content | auto
+test_valid_value("grid-auto-rows", "minmax(1px, 5fr)");
+test_valid_value("grid-auto-rows", "minmax(2em, min-content)");
+test_valid_value("grid-auto-rows", "minmax(calc(2em + 3ex), max-content)");
+test_valid_value("grid-auto-rows", "minmax(4%, auto)");
+test_valid_value("grid-auto-rows", "minmax(5vmin, 1px)");
+test_valid_value("grid-auto-rows", "minmax(min-content, 2em)");
+test_valid_value("grid-auto-rows", "minmax(max-content, calc(2em + 3ex))");
+test_valid_value("grid-auto-rows", "minmax(auto, 4%)");
+
+// fit-content( <length-percentage> )
+test_valid_value("grid-auto-rows", "fit-content(1px)");
+test_valid_value("grid-auto-rows", "fit-content(2em)");
+test_valid_value("grid-auto-rows", "fit-content(calc(2em + 3ex))");
+test_valid_value("grid-auto-rows", "fit-content(4%)");
+
+test_valid_value("grid-auto-rows", "0px");
+test_valid_value("grid-auto-rows", "0%");
+test_valid_value("grid-auto-rows", "0fr");
+test_valid_value("grid-auto-rows", "minmax(auto, 0%)");
+test_valid_value("grid-auto-rows", "fit-content(0px)");
+
+// <track-size>+
+test_valid_value("grid-auto-rows", "auto auto");
+test_valid_value("grid-auto-rows", "auto 10px");
+test_valid_value("grid-auto-rows", "1px 2px 3px 0px");
+test_valid_value("grid-auto-rows", "fit-content(1px) minmax(2px, 3px) 4px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-column-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-column-invalid.html
new file mode 100644
index 0000000000..d1f4dce172
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-column-invalid.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#placement-shorthands">
+<meta name="assert" content="Tests invalid values for grid-column"/>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_invalid_value("grid-column", "4 5");
+test_invalid_value("grid-column", "4 /");
+test_invalid_value("grid-column", "5 5");
+test_invalid_value("grid-column", "5 / /");
+
+test_invalid_value("grid-column", "0 / 5");
+test_invalid_value("grid-column", "6 / 0");
+test_invalid_value("grid-column", "0");
+
+test_invalid_value("grid-column", "span");
+test_invalid_value("grid-column", "span / span");
+
+test_invalid_value("grid-column", "span span / span span");
+
+test_invalid_value("grid-column", "5 5 / span 2");
+test_invalid_value("grid-column", "5 first last / span 2");
+test_invalid_value("grid-column", "5 / first last 2");
+test_invalid_value("grid-column", "first last / span 2");
+test_invalid_value("grid-column", "5 / first last");
+test_invalid_value("grid-column", "5 5 span / 2", "span 4 4 / 3");
+test_invalid_value("grid-column", "span 3 5 / 1", "5 span 4 / 3");
+test_invalid_value("grid-column", "span last first / 1", "span first last / 3");
+test_invalid_value("grid-column", "2 / span last first", "3 / span first last");
+test_invalid_value("grid-column", "span 1 last first / 1", "span first last 7 / 3");
+test_invalid_value("grid-column", "2 / span last 3 first", "3 / span first 5 last");
+test_invalid_value("grid-column", "1 span 2 first / 1", "1 span last 7 / 3");
+test_invalid_value("grid-column", "2 / 3 span 3 first", "3 / 5 span first 5");
+
+test_invalid_value("grid-column", "span -1 / -2");
+test_invalid_value("grid-column", "-1 / -2 span");
+test_invalid_value("grid-column", "0 span / 0");
+test_invalid_value("grid-column", "0 / span 0");
+test_invalid_value("grid-column", "span -3 'first' / 3 last");
+
+test_invalid_value("grid-column", "first span 1 / last");
+test_invalid_value("grid-column", "3 first / 2 span last");
+test_invalid_value("grid-column", "3 / 1 span 2");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-column-shortest-serialization.html b/testing/web-platform/tests/css/css-grid/parsing/grid-column-shortest-serialization.html
new file mode 100644
index 0000000000..868de54c35
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-column-shortest-serialization.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#placement-shorthands"/>
+<meta name="assert" content="grid-column computed value should be the shortest serialization possible"/>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("grid-column", "auto / auto", "auto");
+test_computed_value("grid-column", "auto", "auto");
+test_computed_value("grid-column", "10 / auto", "10");
+test_computed_value("grid-column", "10", "10");
+test_computed_value("grid-column", "-10 / auto", "-10");
+test_computed_value("grid-column", "-10", "-10");
+test_computed_value("grid-column", "first / first", "first");
+test_computed_value("grid-column", "first", "first");
+test_computed_value("grid-column", "span 2 / auto", "span 2");
+test_computed_value("grid-column", "span 2", "span 2");
+test_computed_value("grid-column", "2 first / auto", "2 first");
+test_computed_value("grid-column", "2 first", "2 first");
+test_computed_value("grid-column", "span first / auto", "span first");
+test_computed_value("grid-column", "span first", "span first");
+test_computed_value("grid-column", "span 2 first / auto", "span 2 first");
+test_computed_value("grid-column", "span 2 first", "span 2 first");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-column-shorthand.html b/testing/web-platform/tests/css/css-grid/parsing/grid-column-shorthand.html
new file mode 100644
index 0000000000..b60db55dc3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-column-shorthand.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#placement-shorthands">
+<meta name="assert" content="grid-column should set values for grid-column-start and grid-column-end">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_shorthand_value("grid-column", "auto / auto", {
+    "grid-column-start": "auto",
+    "grid-column-end": "auto"
+});
+test_shorthand_value("grid-column", "auto", {
+    "grid-column-start": "auto",
+    "grid-column-end": "auto"
+});
+
+test_shorthand_value("grid-column", "10 / auto", {
+    "grid-column-start": "10",
+    "grid-column-end": "auto"
+});
+test_shorthand_value("grid-column", "10", {
+    "grid-column-start": "10",
+    "grid-column-end": "auto"
+});
+
+test_shorthand_value("grid-column", "-10 / auto", {
+    "grid-column-start": "-10",
+    "grid-column-end": "auto"
+});
+test_shorthand_value("grid-column", "-10", {
+    "grid-column-start": "-10",
+    "grid-column-end": "auto"
+});
+
+test_shorthand_value("grid-column", "span 2 / auto", {
+    "grid-column-start": "span 2",
+    "grid-column-end": "auto"
+});
+test_shorthand_value("grid-column", "span 2", {
+    "grid-column-start": "span 2",
+    "grid-column-end": "auto"
+});
+
+test_shorthand_value("grid-column", "3 last / auto", {
+    "grid-column-start": "3 last",
+    "grid-column-end": "auto"
+});
+test_shorthand_value("grid-column", "3 last", {
+    "grid-column-start": "3 last",
+    "grid-column-end": "auto"
+});
+
+test_shorthand_value("grid-column", "span first / auto", {
+    "grid-column-start": "span first",
+    "grid-column-end": "auto"
+});
+test_shorthand_value("grid-column", "span first", {
+    "grid-column-start": "span first",
+    "grid-column-end": "auto"
+});
+test_shorthand_value("grid-column", "span 2 first / auto", {
+    "grid-column-start": "span 2 first",
+    "grid-column-end": "auto"
+});
+test_shorthand_value("grid-column", "span 2 first", {
+    "grid-column-start": "span 2 first",
+    "grid-column-end": "auto"
+});
+
+test_shorthand_value("grid-column", "last / last", {
+    "grid-column-start": "last",
+    "grid-column-end": "last"
+});
+test_shorthand_value("grid-column", "last", {
+    "grid-column-start": "last",
+    "grid-column-end": "last"
+});
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-columns-rows-get-set-multiple.html b/testing/web-platform/tests/css/css-grid/parsing/grid-columns-rows-get-set-multiple.html
new file mode 100644
index 0000000000..99af0110be
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-columns-rows-get-set-multiple.html
@@ -0,0 +1,322 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@webkit.org">
+<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=73272">
+<link href="/css/support/width-keyword-classes.css" rel="stylesheet">
+<link href="/css/support/grid.css" rel="stylesheet">
+<link href="/css/support/alignment.css" rel="stylesheet">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+<meta name="assert" content="Test that setting and getting multiple grid-template-columns and grid-template-rows works as expected">
+<style>
+/* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution. */
+.definite {
+    width: 800px;
+    height: 600px;
+}
+
+.gridItem {
+    grid-column: 1;
+    grid-row: 1;
+    width: 7px;
+    height: 16px;
+}
+
+.gridItem2 {
+    grid-column: 2;
+    grid-row: 2;
+    width: 17px;
+    height: 3px;
+}
+
+.gridWithFixed {
+    grid-template-columns: 7px 11px;
+    grid-template-rows: 17px 2px;
+}
+
+.gridWithPercent {
+    grid-template-columns: 50% 100%;
+    grid-template-rows: 25% 75%;
+}
+.gridWithAuto {
+    grid-template-columns: auto auto;
+    grid-template-rows: auto auto;
+}
+.gridWithEM {
+    grid-template-columns: 10em 12em;
+    grid-template-rows: 15em 17em;
+    font: 10px Ahem;
+}
+.gridWithNoneAndAuto {
+    grid-template-columns: none auto;
+    grid-template-rows: none auto;
+}
+.gridNoneWithAndFixed {
+    grid-template-columns: none 15px;
+    grid-template-rows: none 22px;
+}
+.gridWithThreeItems {
+    grid-template-columns: 15px auto 10em;
+    grid-template-rows: 12em 18px auto;
+    font: 10px Ahem;
+}
+.gridWithFitContentAndFitAvailable {
+    grid-template-columns: -webkit-content-available;
+    grid-template-rows: -webkit-fit-content -webkit-fit-available;
+}
+.gridWithMinMaxContent {
+    grid-template-columns: min-content max-content;
+    grid-template-rows: max-content min-content;
+}
+.gridWithMinMaxAndFixed {
+    grid-template-columns: minmax(45px, 30%) 15px;
+    grid-template-rows: 12em minmax(35%, 10px);
+    font: 10px Ahem;
+}
+.gridWithMinMaxAndMinMaxContent {
+    grid-template-columns: minmax(min-content, 30%) 15px;
+    grid-template-rows: 12em minmax(35%, max-content);
+    font: 10px Ahem;
+}
+.gridWithFractionFraction {
+    grid-template-columns: 2fr 3fr;
+    grid-template-rows: 3fr 5fr;
+}
+.gridWithFractionMinMax {
+    grid-template-columns: minmax(min-content, 45px) 2fr;
+    grid-template-rows: 3fr minmax(14px, max-content);
+}
+.gridWithCalcCalc {
+    grid-template-columns: calc(200px) calc(10em);
+    grid-template-rows: calc(15em) calc(75px);
+    font: 10px Ahem;
+}
+.gridWithCalcAndFixed {
+    grid-template-columns: calc(50%) 8em;
+    grid-template-rows: 88px calc(25%);
+    font: 10px Ahem;
+}
+.gridWithCalcAndMinMax {
+    grid-template-columns: calc(30px + 20%) minmax(min-content, 80px);
+    grid-template-rows: minmax(25%, max-content) calc(10% - 7px);
+}
+.gridWithCalcInsideMinMax {
+    grid-template-columns: minmax(calc(23px + 10%), 400px) 12em;
+    grid-template-rows: calc(150px) minmax(5%, calc(50% - 125px));
+    font: 10px Ahem;
+}
+.gridWithAutoInsideMinMax {
+    grid-template-columns: minmax(auto, min-content) 30px;
+    grid-template-rows: calc(100px + 2em) minmax(10%, auto);
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div class="grid definite gridWithFixed" id="gridWithFixedElement"></div>
+<div class="grid definite gridWithPercent" id="gridWithPercentElement"></div>
+<div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSize">
+    <div class="gridItem"></div>
+</div>
+<div class="grid definite gridWithAuto contentStart" id="gridWithAutoElement">
+    <div class="gridItem2"></div>
+</div>
+<div class="grid definite gridWithEM" id="gridWithEMElement"></div>
+<div class="grid definite gridWithNoneAndAuto" id="gridWithNoneAndAuto"></div>
+<div class="grid definite gridWithNoneAndFixed" id="gridWithNoneAndFixed"></div>
+<div class="grid definite gridWithThreeItems contentStart" id="gridWithThreeItems"></div>
+<div class="grid definite gridWithFitContentAndFitAvailable" id="gridWithFitContentAndFitAvailable"></div>
+<div class="grid definite gridWithMinMaxContent" id="gridWithMinMaxContent"></div>
+<div class="grid definite gridWithMinMaxContent" id="gridWithMinMaxContentWithChildrenElement">
+    <div class="gridItem"></div>
+    <div class="gridItem2"></div>
+</div>
+<div class="grid definite gridWithMinMaxAndFixed" id="gridWithMinMaxAndFixed"></div>
+<div class="grid definite gridWithMinMaxAndMinMaxContent" id="gridWithMinMaxAndMinMaxContent"></div>
+<div class="grid definite gridWithFractionFraction" id="gridWithFractionFraction"></div>
+<div class="grid definite gridWithFractionMinMax" id="gridWithFractionMinMax"></div>
+<div class="grid definite gridWithCalcCalc" id="gridWithCalcCalc"></div>
+<div class="grid definite gridWithCalcAndFixed" id="gridWithCalcAndFixed"></div>
+<div class="grid definite gridWithCalcAndMinMax" id="gridWithCalcAndMinMax"></div>
+<div class="grid definite gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax"></div>
+<div class="grid definite gridWithAutoInsideMinMax contentStart" id="gridWithAutoInsideMinMax"></div>
+
+<script>
+function testGridDefinitionsValues(id, columnValue, rowValue)
+{
+    test(function(){
+        var element = document.getElementById(id);
+        var readColumnValue = getComputedStyle(element).gridTemplateColumns;
+        var readRowValue = getComputedStyle(element).gridTemplateRows;
+        assert_equals(readColumnValue, columnValue);
+        assert_equals(readRowValue, rowValue);
+    }, `Test getting grid-template-columns and grid-template-rows set through CSS for element '${id}' : grid-template-columns = '${columnValue}', grid-template-rows = '${rowValue}'`);
+}
+
+function testGridDefinitionsSetJSValues(
+  columnValue,
+  rowValue,
+  computedColumnValue = columnValue,
+  computedRowValue = rowValue,
+  jsColumnValue = columnValue,
+  jsRowValue = rowValue)
+{
+    test(function(){
+        window.element = document.createElement("div");
+        document.body.appendChild(element);
+        element.style.display = "grid";
+        element.style.width = "800px";
+        element.style.height = "600px";
+        element.style.justifyContent = "start";
+        element.style.alignContent = "start";
+        element.style.font = "10px Ahem"; // Used to resolve em font consistently.
+        element.style.gridTemplateColumns = columnValue;
+        element.style.gridTemplateRows = rowValue;
+        assert_equals(getComputedStyle(element).gridTemplateColumns, computedColumnValue);
+        assert_equals(element.style.gridTemplateColumns, jsColumnValue);
+        assert_equals(getComputedStyle(element).gridTemplateRows, computedRowValue);
+        assert_equals(element.style.gridTemplateRows, jsRowValue);
+        document.body.removeChild(element);
+    }, `Test getting and setting grid-template-rows and grid-template-columns through JS: grid-template-columns = '${computedColumnValue}', element.style.gridTemplateColumns = '${columnValue}', grid-template-rows = '${computedRowValue}', element.style.gridTemplateRows = '${rowValue}'`);
+}
+
+function testGridDefinitionsSetBadJSValues(columnValue, rowValue)
+{
+    test(function(){
+        window.element = document.createElement("div");
+        document.body.appendChild(element);
+        element.style.gridTemplateColumns = columnValue;
+        element.style.gridTemplateRows = rowValue;
+        assert_equals(getComputedStyle(element).gridTemplateColumns, "none");
+        assert_equals(getComputedStyle(element).gridTemplateRows, "none");
+        document.body.removeChild(element);
+    }, `Test setting bad JS values: grid-template-columns = '${columnValue}', grid-template-rows = '${rowValue}'`);
+}
+
+function testDefaultValue()
+{
+    test(function(){
+        var element = document.createElement("div");
+        document.body.appendChild(element);
+        assert_equals(getComputedStyle(element).gridTemplateColumns, "none");
+        assert_equals(getComputedStyle(element).gridTemplateRows, "none");
+        document.body.removeChild(element);
+    }, `Test the default value`);
+}
+
+function testWrongCSSValue()
+{
+    test(function(){
+        var gridWithNoneAndAuto = document.getElementById("gridWithNoneAndAuto");
+        assert_equals(getComputedStyle(gridWithNoneAndAuto).gridTemplateColumns, "none");
+        assert_equals(getComputedStyle(gridWithNoneAndAuto).gridTemplateRows, "none");
+
+        var gridWithNoneAndFixed = document.getElementById("gridWithNoneAndFixed");
+        assert_equals(getComputedStyle(gridWithNoneAndFixed).gridTemplateColumns, "none");
+        assert_equals(getComputedStyle(gridWithNoneAndFixed).gridTemplateRows, "none");
+    }, `Test setting wrong/invalid values through CSS`);
+}
+
+function testInherit()
+{
+    test(function(){
+        var parentElement = document.createElement("div");
+        document.body.appendChild(parentElement);
+        parentElement.style.display = "grid";
+        parentElement.style.width = "800px";
+        parentElement.style.height = "600px";
+        parentElement.style.font = "10px Ahem"; // Used to resolve em font consistently.
+        parentElement.style.gridTemplateColumns = "50px 1fr [last]";
+        parentElement.style.gridTemplateRows = "2em [middle] 45px";
+        assert_equals(getComputedStyle(parentElement).gridTemplateColumns, "50px 750px [last]");
+        assert_equals(getComputedStyle(parentElement).gridTemplateRows, "20px [middle] 45px");
+
+        element = document.createElement("div");
+        parentElement.appendChild(element);
+        element.style.display = "grid";
+        element.style.gridTemplateColumns = "inherit";
+        element.style.gridTemplateRows = "inherit";
+        assert_equals(getComputedStyle(element).gridTemplateColumns, "50px 0px [last]");
+        assert_equals(getComputedStyle(element).gridTemplateRows, "20px [middle] 45px");
+
+        document.body.removeChild(parentElement);
+    }, `Test setting grid-template-columns and grid-template-rows to 'inherit' through JS`);
+}
+
+function testInitial()
+{
+    test(function(){
+        element = document.createElement("div");
+        document.body.appendChild(element);
+        element.style.display = "grid";
+        element.style.width = "800px";
+        element.style.height = "600px";
+        element.style.gridTemplateColumns = "150% [middle] 55px";
+        element.style.gridTemplateRows = "1fr [line] 2fr [line]";
+        assert_equals(getComputedStyle(element).gridTemplateColumns, "1200px [middle] 55px");
+        assert_equals(getComputedStyle(element).gridTemplateRows, "200px [line] 400px [line]");
+
+        element.style.gridTemplateColumns = "initial";
+        element.style.gridTemplateRows = "initial";
+        assert_equals(getComputedStyle(element).gridTemplateColumns, "none");
+        assert_equals(getComputedStyle(element).gridTemplateRows, "none");
+
+        document.body.removeChild(element);
+    }, `Test setting grid-template-columns and grid-template-rows to 'initial' through JS`);
+}
+
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    testGridDefinitionsValues("gridWithFixedElement", "7px 11px", "17px 2px");
+    testGridDefinitionsValues("gridWithPercentElement", "400px 800px", "150px 450px");
+    // This test failing in Firefox is caused by https://bugzilla.mozilla.org/show_bug.cgi?id=1481876
+    testGridDefinitionsValues("gridWithPercentWithoutSize", "3.5px 7px", "4px 12px");
+    testGridDefinitionsValues("gridWithAutoElement", "0px 17px", "0px 3px");
+    testGridDefinitionsValues("gridWithEMElement", "100px 120px", "150px 170px");
+    testGridDefinitionsValues("gridWithThreeItems", "15px 0px 100px", "120px 18px 0px");
+    testGridDefinitionsValues("gridWithFitContentAndFitAvailable", "none", "none");
+    testGridDefinitionsValues("gridWithMinMaxContent", "0px 0px", "0px 0px");
+    testGridDefinitionsValues("gridWithMinMaxContentWithChildrenElement", "7px 17px", "16px 3px");
+    testGridDefinitionsValues("gridWithMinMaxAndFixed", "240px 15px", "120px 210px");
+    testGridDefinitionsValues("gridWithMinMaxAndMinMaxContent", "240px 15px", "120px 210px");
+    testGridDefinitionsValues("gridWithFractionFraction", "320px 480px", "225px 375px");
+    testGridDefinitionsValues("gridWithFractionMinMax", "45px 755px", "586px 14px");
+    testGridDefinitionsValues("gridWithCalcCalc", "200px 100px", "150px 75px");
+    testGridDefinitionsValues("gridWithCalcAndFixed", "400px 80px", "88px 150px");
+    testGridDefinitionsValues("gridWithCalcAndMinMax", "190px 80px", "150px 53px");
+    testGridDefinitionsValues("gridWithCalcInsideMinMax", "400px 120px", "150px 175px");
+    testGridDefinitionsValues("gridWithAutoInsideMinMax", "0px 30px", "132px 60px");
+
+    testGridDefinitionsSetJSValues("18px 22px", "66px 70px");
+    testGridDefinitionsSetJSValues("55% 80%", "40% 63%", "440px 640px", "240px 378px");
+    testGridDefinitionsSetJSValues("auto auto", "auto auto", "0px 0px", "0px 0px");
+    testGridDefinitionsSetJSValues("auto 16em 22px", "56% 10em auto", "0px 160px 22px", "336px 100px 0px");
+    testGridDefinitionsSetJSValues("16em minmax(16px, 20px)", "minmax(10%, 15%) auto", "160px 20px", "90px 0px");
+    testGridDefinitionsSetJSValues("16em 2fr", "14fr auto", "160px 640px", "600px 0px");
+    testGridDefinitionsSetJSValues("calc(25px) calc(2em)", "auto calc(10%)", "25px 20px", "0px 60px", "calc(25px) calc(2em)", "auto calc(10%)");
+    // This test failing in Chromium is caused by https://bugs.chromium.org/p/chromium/issues/detail?id=1050968
+    testGridDefinitionsSetJSValues("calc(25px + 40%) minmax(min-content, calc(10% + 12px))", "minmax(calc(75% - 350px), max-content) auto", "345px 92px", "100px 0px", "calc(40% + 25px) minmax(min-content, calc(10% + 12px))", "minmax(calc(75% - 350px), max-content) auto");
+
+    testWrongCSSValue();
+
+    testGridDefinitionsSetBadJSValues("none auto", "none auto");
+    testGridDefinitionsSetBadJSValues("none 16em", "none 56%");
+    testGridDefinitionsSetBadJSValues("none none", "none none");
+    testGridDefinitionsSetBadJSValues("auto none", "auto none");
+    testGridDefinitionsSetBadJSValues("auto none 16em", "auto 18em none");
+    testGridDefinitionsSetBadJSValues("-webkit-fit-content -webkit-fit-content", "-webkit-fit-available -webkit-fit-available");
+    // Negative values are not allowed.
+    testGridDefinitionsSetBadJSValues("-10px minmax(16px, 32px)", "minmax(10%, 15%) -10vw");
+    testGridDefinitionsSetBadJSValues("10px minmax(16px, -1vw)", "minmax(-1%, 15%) 10vw");
+    // Invalid expressions with calc
+    testGridDefinitionsSetBadJSValues("10px calc(16px 30px)", "calc(25px + auto) 2em");
+    testGridDefinitionsSetBadJSValues("minmax(min-content, calc() 250px", "calc(2em(");
+
+    testInherit();
+
+    testDefaultValue()
+
+    testInitial();
+
+    done();
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-content-sized-columns-resolution.html b/testing/web-platform/tests/css/css-grid/parsing/grid-content-sized-columns-resolution.html
new file mode 100644
index 0000000000..411687abdb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-content-sized-columns-resolution.html
@@ -0,0 +1,386 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=392200">
+<link href="/css/support/grid.css" rel="stylesheet">
+<link href="/css/support/alignment.css" rel="stylesheet">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
+<meta name="assert" content="Checks resolution of content sized grid columns and verifies that items are processed by ascending span to compute column breadths">
+<style>
+.grid {
+    font: 10px/1 Ahem;
+ }
+.gridWidth300 {
+    width: 300px;
+}
+.gridMinContentFixedAndAuto {
+    grid-template-columns: minmax(min-content, 15px) auto;
+}
+.gridMaxContentFixedAndAuto {
+    grid-template-columns: minmax(max-content, 15px) auto;
+}
+.gridAutoAndAuto {
+    grid-template-columns: auto auto;
+}
+.gridMinContentAndMinContentFixed {
+    grid-template-columns: min-content minmax(min-content, 30px);
+}
+.gridMinContentAndMaxContentFixed {
+    grid-template-columns: min-content minmax(max-content, 30px);
+}
+.gridMaxContentAndMinContent {
+    grid-template-columns: max-content min-content;
+}
+.gridFixedMinContentAndMaxContent {
+    grid-template-columns: minmax(10px, min-content) max-content;
+}
+.gridFixedMaxContentAndMinContent {
+    grid-template-columns: minmax(10px, max-content) min-content;
+}
+.gridAutoMinContent {
+    grid-template-columns: auto min-content;
+}
+.gridAutoMaxContent {
+    grid-template-columns: auto max-content;
+}
+.gridMaxContentAndMinContentFixed {
+    grid-template-columns: max-content minmax(min-content, 35px);
+}
+.gridMaxContentAndMaxContentFixed {
+    grid-template-columns: max-content minmax(max-content, 35px);
+}
+.gridMinContentFixedAndFixedFixedAndAuto {
+    grid-template-columns: minmax(min-content, 20px) minmax(20px, 30px) auto;
+}
+.gridAutoAndFixedFixedAndMaxContentFixed {
+    grid-template-columns: auto minmax(20px, 30px) minmax(max-content, 20px);
+}
+.gridMaxContentAndMaxContentFixedAndMaxContent {
+    grid-template-columns: max-content minmax(max-content, 20px) max-content;
+}
+.gridAutoAndMinContentFixedAndMinContent {
+    grid-template-columns: auto minmax(min-content, 30px) min-content;
+}
+
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div class="grid gridMinContentFixedAndAuto justifyContentStart" id="gridMinContentFixedAndAuto">
+    <div class="firstRowBothColumn">XXXX XXXX</div>
+</div>
+
+<div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAuto">
+    <div class="firstRowBothColumn">XXXX XXXX</div>
+</div>
+
+<div class="grid gridMinContentAndMinContentFixed" id="gridMinContentAndMinContentFixed">
+    <div class="firstRowBothColumn">XXXX XXXX</div>
+</div>
+
+<div class="grid gridMaxContentAndMinContent" id="gridMaxContentAndMinContent">
+    <div class="firstRowBothColumn">XXXX XXXX</div>
+</div>
+
+<div class="grid gridFixedMinContentAndMaxContent" id="gridFixedMinContentAndMaxContent">
+    <div class="firstRowBothColumn">XXXX XXXX</div>
+</div>
+
+<div class="grid gridFixedMaxContentAndMinContent" id="gridFixedMaxContentAndMinContent">
+    <div class="firstRowBothColumn">XXXX XXXX</div>
+</div>
+
+<div class="grid gridMinContentAndMaxContentFixed" id="gridMinContentAndMaxContentFixed">
+    <div class="firstRowBothColumn">XXXX XXXX</div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridMaxContentFixedAndAuto" id="gridMaxContentFixedAndAuto">
+        <div class="firstRowBothColumn">XXXX XXXX</div>
+    </div>
+</div>
+
+<div class="grid gridAutoMinContent justifyContentStart" id="gridAutoMinContent">
+    <div class="firstRowBothColumn">XXXX XXXX</div>
+</div>
+
+<div class="grid gridAutoMaxContent justifyContentStart" id="gridAutoMaxContent">
+    <div class="firstRowBothColumn">XXXX XXXX</div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinContentFixed">
+        <div class="firstRowBothColumn">XXXX XXXX</div>
+    </div>
+</div>
+
+<div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxContentFixed">
+    <div class="firstRowBothColumn">XXXX XXXX</div>
+</div>
+
+<!-- Check that items are processed by ascending span instead of going track by track forbidding extra space distribution. -->
+<div class="constrainedContainer">
+    <div class="grid gridMinContentFixedAndAuto" id="gridMinContentFixedAndAutoUnsortedConstrained">
+        <div class="firstRowBothColumn">XXXX XXXX</div>
+        <div class="firstRowSecondColumn">XXXX XXXX</div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridAutoAndAuto" id="gridAutoAndAutoUnsortedConstrained">
+        <div class="firstRowBothColumn">XXXX XXXX</div>
+        <div class="firstRowSecondColumn">XXX</div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridMinContentAndMinContentFixed" id="gridMinContentAndMinContentFixedUnsortedConstrained">
+        <div class="firstRowBothColumn">XXXX XXXX</div>
+        <div class="firstRowBothColumn">XX XX XX</div>
+        <div class="firstRowSecondColumn">XXXX XXXX</div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridMaxContentAndMinContent" id="gridMaxContentAndMinContentUnsortedConstrained">
+        <div class="firstRowBothColumn">XXX XXX</div>
+        <div class="firstRowSecondColumn">XXXXXXX</div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridFixedMinContentAndMaxContent" id="gridFixedMinContentAndMaxContentUnsortedConstrained">
+        <div class="firstRowBothColumn">XXXXX XX</div>
+        <div class="firstRowSecondColumn">XXX</div>
+        <div class="firstRowSecondColumn">XXXXX</div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridFixedMaxContentAndMinContent" id="gridFixedMaxContentAndMinContentUnsortedConstrained">
+        <div class="firstRowBothColumn">XXXX XXXX</div>
+        <div class="firstRowBothColumn">X X</div>
+        <div class="firstRowSecondColumn">XXXX</div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridMinContentAndMaxContentFixed" id="gridMinContentAndMaxContentFixedUnsortedConstrained">
+        <div class="firstRowBothColumn">XXXX XXXX</div>
+        <div class="firstRowSecondColumn">XXXX XXXX</div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridMaxContentFixedAndAuto" id="gridMaxContentFixedAndAutoUnsortedConstrained">
+        <div class="firstRowBothColumn">XX XX</div>
+        <div class="firstRowSecondColumn">XXXX</div>
+        <div class="firstRowSecondColumn">XXX XXX</div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridAutoMinContent" id="gridAutoMinContentUnsortedConstrained">
+        <div class="firstRowBothColumn">XX XX XX XX</div>
+        <div class="firstRowSecondColumn">XXXXXX XXXXXX</div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridAutoMaxContent" id="gridAutoMaxContentUnsortedConstrained">
+        <div class="firstRowBothColumn">XXXX XXXX</div>
+        <div class="firstRowBothColumn">XXX XXX</div>
+        <div class="firstRowSecondColumn">XXXXX</div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinContentFixedUnsortedConstrained">
+        <div class="firstRowBothColumn">XXX XXX</div>
+        <div class="firstRowBothColumn">XXXX XXXX</div>
+        <div class="firstRowSecondColumn">XXXX XXXX</div>
+        <div class="firstRowSecondColumn">XX</div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxContentFixedUnsortedConstrained">
+        <div class="firstRowBothColumn">XXXX XXXX</div>
+        <div class="firstRowBothColumn">XX XX XX XX</div>
+        <div class="firstRowSecondColumn">XXXXXXX</div>
+    </div>
+</div>
+
+<!-- Check that items are processed by ascending span instead of going track by track allowing extra space distribution. -->
+<div class="grid gridMinContentFixedAndAuto justifyContentStart" id="gridMinContentFixedAndAutoUnsorted">
+    <div class="firstRowBothColumn">XXXX XXXX</div>
+    <div class="firstRowSecondColumn">XXXX XXXX</div>
+</div>
+
+<div class="grid gridAutoAndAuto justifyContentStart" id="gridAutoAndAutoUnsorted">
+    <div class="firstRowBothColumn">XXXX XXXX</div>
+    <div class="firstRowSecondColumn">XXX</div>
+</div>
+
+<div class="grid gridMinContentAndMinContentFixed" id="gridMinContentAndMinContentFixedUnsorted">
+    <div class="firstRowBothColumn">XXXX XXXX</div>
+    <div class="firstRowBothColumn">XX XX XX XX</div>
+    <div class="firstRowSecondColumn">XXXX XXXX</div>
+</div>
+
+<div class="grid gridMaxContentAndMinContent" id="gridMaxContentAndMinContentUnsorted">
+    <div class="firstRowBothColumn">XXX XXX</div>
+    <div class="firstRowSecondColumn">XXXXXXX</div>
+</div>
+
+<div class="grid gridFixedMinContentAndMaxContent" id="gridFixedMinContentAndMaxContentUnsorted">
+    <div class="firstRowBothColumn">XXXXX XX</div>
+    <div class="firstRowSecondColumn">XXX</div>
+    <div class="firstRowSecondColumn">XXXXX</div>
+</div>
+
+<div class="grid gridFixedMaxContentAndMinContent" id="gridFixedMaxContentAndMinContentUnsorted">
+    <div class="firstRowBothColumn">XXXX XXXX</div>
+    <div class="firstRowBothColumn">X X</div>
+    <div class="firstRowSecondColumn">XXXX</div>
+</div>
+
+<div class="grid gridMinContentAndMaxContentFixed" id="gridMinContentAndMaxContentFixedUnsorted">
+    <div class="firstRowBothColumn">XXXX XXXX</div>
+    <div class="firstRowSecondColumn">XXXX XXXX</div>
+</div>
+
+<div class="grid gridMaxContentFixedAndAuto justifyContentStart" id="gridMaxContentFixedAndAutoUnsorted">
+    <div class="firstRowBothColumn">XX XX</div>
+    <div class="firstRowSecondColumn">XXXX</div>
+    <div class="firstRowSecondColumn">XXX XXX</div>
+</div>
+
+<div class="grid gridAutoMinContent justifyContentStart" id="gridAutoMinContentUnsorted">
+    <div class="firstRowBothColumn">XX XX XX XX</div>
+    <div class="firstRowSecondColumn">XXXXXX XXXXXX</div>
+</div>
+
+<div class="grid gridAutoMaxContent justifyContentStart" id="gridAutoMaxContentUnsorted">
+    <div class="firstRowBothColumn">XXXX XXXX</div>
+    <div class="firstRowBothColumn">XXX XXX</div>
+    <div class="firstRowSecondColumn">XXXXX</div>
+</div>
+
+<div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinContentFixedUnsorted">
+    <div class="firstRowBothColumn">XXX XXX</div>
+    <div class="firstRowBothColumn">XXXX XXXX</div>
+    <div class="firstRowSecondColumn">XXXX XXXX</div>
+    <div class="firstRowSecondColumn">XX</div>
+</div>
+
+<div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxContentFixedUnsorted">
+    <div class="firstRowBothColumn">XXXX XXXX</div>
+    <div class="firstRowBothColumn">XX XX XX XX</div>
+    <div class="firstRowSecondColumn">XXXXXXX</div>
+</div>
+
+<!-- The next four force the grid to grow only a particular subset of tracks above the limits -->
+<div class="constrainedContainer">
+    <div class="grid gridMinContentFixedAndAuto justifyContentStart" id="gridMinContentFixedAndAutoAboveLimits">
+        <div class="firstRowBothColumn">XXXX XXXX</div>
+        <div class="firstRowBothColumn">XXXXXXXXXXX</div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridMaxContentFixedAndAuto" id="gridMaxContentFixedAndAutoAboveLimits">
+        <div class="firstRowBothColumn">XXXX XXXX</div>
+        <div class="firstRowBothColumn">XXXXXXXXXXXXXXX</div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridMinContentFixedAndFixedFixedAndAuto" id="gridMinContentFixedAndFixedFixedAndAuto">
+        <div class="firstRowBothColumn">XXXX XXXX</div>
+        <div class="firstRowBothColumn">XXXXXXXXXX</div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridAutoAndFixedFixedAndMaxContentFixed" id="gridAutoAndFixedFixedAndMaxContentFixed">
+        <div class="firstRowBothColumn">XXXX XXXX</div>
+        <div class="firstRowBothColumn">XXXXXXXXXXXXXXX</div>
+    </div>
+</div>
+
+<div class="grid gridMaxContentAndMaxContentFixedAndMaxContent" id="gridMaxContentAndMaxContentFixedAndMaxContent">
+    <div style="grid-row: 1; grid-column: 1;">X X X</div>
+    <div style="grid-row: 1; grid-column: 3;">X X</div>
+    <div style="grid-row: 1; grid-column: 1 / -1;">XX XX XX XX XX</div>
+</div>
+
+<div class="grid gridAutoAndMinContentFixedAndMinContent justifyContentStart" id="gridAutoAndMinContentFixedAndMinContent">
+    <div style="grid-row: 1; grid-column: 1;">XX</div>
+    <div style="grid-row: 1; grid-column: 1 / -1;">XXXXXXXXXXXXXXX</div>
+    <div style="grid-row: 1; grid-column: 3;">XXX XXX</div>
+</div>
+
+<script>
+function testGridColumnsValues(id, computedColumnValue) {
+    test(function(){
+        var div = document.getElementById(id);
+        var readValue = getComputedStyle(div).gridTemplateColumns;
+        assert_equals(readValue, computedColumnValue);
+    }, `Element '${id}' grid-template-columns value computes to '${computedColumnValue}'`);
+}
+
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    testGridColumnsValues("gridMinContentFixedAndAuto", "15px 75px");
+    testGridColumnsValues("gridAutoAndAuto", "45px 45px");
+    testGridColumnsValues("gridMinContentAndMinContentFixed", "20px 30px");
+    testGridColumnsValues("gridMaxContentAndMinContent", "70px 20px");
+    testGridColumnsValues("gridFixedMinContentAndMaxContent", "10px 80px");
+    testGridColumnsValues("gridFixedMaxContentAndMinContent", "60px 30px");
+    testGridColumnsValues("gridMinContentAndMaxContentFixed", "20px 70px");
+    testGridColumnsValues("gridMaxContentFixedAndAuto", "65px 25px");
+    testGridColumnsValues("gridAutoMinContent", "70px 20px");
+    testGridColumnsValues("gridAutoMaxContent", "20px 70px");
+    testGridColumnsValues("gridMaxContentAndMinContentFixed", "70px 20px");
+    testGridColumnsValues("gridMaxContentAndMaxContentFixed", "55px 35px");
+
+    // Check that items are processed by ascending span to compute track breadths forbidding extra space distribution.
+    testGridColumnsValues("gridMinContentFixedAndAutoUnsortedConstrained", "0px 40px");
+    testGridColumnsValues("gridAutoAndAutoUnsortedConstrained", "10px 30px");
+    testGridColumnsValues("gridMinContentAndMinContentFixedUnsortedConstrained", "0px 40px");
+    testGridColumnsValues("gridMaxContentAndMinContentUnsortedConstrained", "0px 70px");
+    testGridColumnsValues("gridFixedMinContentAndMaxContentUnsortedConstrained", "10px 70px");
+    testGridColumnsValues("gridFixedMaxContentAndMinContentUnsortedConstrained", "10px 40px");
+    testGridColumnsValues("gridMinContentAndMaxContentFixedUnsortedConstrained", "0px 90px");
+    testGridColumnsValues("gridMaxContentFixedAndAutoUnsortedConstrained", "10px 40px");
+    testGridColumnsValues("gridAutoMinContentUnsortedConstrained", "0px 60px");
+    testGridColumnsValues("gridAutoMaxContentUnsortedConstrained", "0px 90px");
+    testGridColumnsValues("gridMaxContentAndMinContentFixedUnsortedConstrained", "50px 40px");
+    testGridColumnsValues("gridMaxContentAndMaxContentFixedUnsortedConstrained", "40px 70px");
+
+    // Check that items are processed by ascending span to compute track breadths allowing extra space distribution.
+    testGridColumnsValues("gridMinContentFixedAndAutoUnsorted", "15px 90px");
+    testGridColumnsValues("gridAutoAndAutoUnsorted", "60px 30px");
+    testGridColumnsValues("gridMinContentAndMinContentFixedUnsorted", "0px 40px");
+    testGridColumnsValues("gridMaxContentAndMinContentUnsorted", "0px 70px");
+    testGridColumnsValues("gridFixedMinContentAndMaxContentUnsorted", "10px 70px");
+    testGridColumnsValues("gridFixedMaxContentAndMinContentUnsorted", "50px 40px");
+    testGridColumnsValues("gridMinContentAndMaxContentFixedUnsorted", "0px 90px");
+    testGridColumnsValues("gridMaxContentFixedAndAutoUnsorted", "15px 70px");
+    testGridColumnsValues("gridAutoMinContentUnsorted", "50px 60px");
+    testGridColumnsValues("gridAutoMaxContentUnsorted", "0px 90px");
+    testGridColumnsValues("gridMaxContentAndMinContentFixedUnsorted", "50px 40px");
+    testGridColumnsValues("gridMaxContentAndMaxContentFixedUnsorted", "40px 70px");
+
+    // Check that only a subset of tracks grow above track limits.
+    testGridColumnsValues("gridMinContentFixedAndAutoAboveLimits", "15px 95px");
+    testGridColumnsValues("gridMaxContentFixedAndAutoAboveLimits", "15px 135px");
+    testGridColumnsValues("gridMinContentFixedAndFixedFixedAndAuto", "20px 20px 60px");
+    testGridColumnsValues("gridAutoAndFixedFixedAndMaxContentFixed", "110px 20px 20px");
+    testGridColumnsValues("gridMaxContentAndMaxContentFixedAndMaxContent", "70px 20px 50px");
+    testGridColumnsValues("gridAutoAndMinContentFixedAndMinContent", "55px 30px 65px");
+
+    done();
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-row-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-row-invalid.html
new file mode 100644
index 0000000000..ca7b1d681a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-row-invalid.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#placement-shorthands">
+<meta name="assert" content="Tests invalid values for grid-row"/>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+    test_invalid_value("grid-row", "5 8");
+    test_invalid_value("grid-row", "5 /");
+    test_invalid_value("grid-row", "8 auto");
+    test_invalid_value("grid-row", "8 / /");
+    test_invalid_value("grid-row", "0 / 6");
+    test_invalid_value("grid-row", "8 / 0");
+    test_invalid_value("grid-row", "0");
+    test_invalid_value("grid-row", "span");
+    test_invalid_value("grid-row", "span / span");
+    test_invalid_value("grid-row", "span span / span span");
+    test_invalid_value("grid-row", "4 4 / 3 span");
+    test_invalid_value("grid-row", "first 4 last / 3 span");
+    test_invalid_value("grid-row", "4 / first 3 last");
+    test_invalid_value("grid-row", "first last / 3 span");
+    test_invalid_value("grid-row", "4 / first last");
+    test_invalid_value("grid-row", "span 4 4 / 3");
+    test_invalid_value("grid-row", "5 span 4 / 3");
+    test_invalid_value("grid-row", "span first last / 3");
+    test_invalid_value("grid-row", "3 / span first last");
+    test_invalid_value("grid-row", "span first last 7 / 3");
+    test_invalid_value("grid-row", "3 / span first 5 last");
+    test_invalid_value("grid-row", "1 span last 7 / 3");
+    test_invalid_value("grid-row", "3 / 5 span first 5");
+    test_invalid_value("grid-row", "-3 span / -4");
+    test_invalid_value("grid-row", "-3 / span -4");
+    test_invalid_value("grid-row", "span 0 / 0");
+    test_invalid_value("grid-row", "0 / 0 span");
+    test_invalid_value("grid-row", "last -2 span / 1 nav");
+    test_invalid_value("grid-row", "2 span first / last");
+    test_invalid_value("grid-row", "5 nav / last span 7");
+    test_invalid_value("grid-row", "5 / 3 span 3");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-row-shortest-serialization.html b/testing/web-platform/tests/css/css-grid/parsing/grid-row-shortest-serialization.html
new file mode 100644
index 0000000000..59558c0ac3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-row-shortest-serialization.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#placement-shorthands"/>
+<meta name="assert" content="grid-row computed value should be the shortest serialization possible"/>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+    test_computed_value("grid-row", "auto / auto", "auto");
+    test_computed_value("grid-row", "auto", "auto");
+    test_computed_value("grid-row", "10 / auto", "10");
+    test_computed_value("grid-row", "10");
+    test_computed_value("grid-row", "-10 / auto", "-10");
+    test_computed_value("grid-row", "-10");
+    test_computed_value("grid-row", "span 2 / auto", "span 2");
+    test_computed_value("grid-row", "span 2");
+    test_computed_value("grid-row", "3 last / auto", "3 last");
+    test_computed_value("grid-row", "3 last");
+    test_computed_value("grid-row", "span first / auto", "span first");
+    test_computed_value("grid-row", "span first");
+    test_computed_value("grid-row", "span 2 first / auto", "span 2 first");
+    test_computed_value("grid-row", "span 2 first");
+    test_computed_value("grid-row", "last / last", "last");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-row-shorthand.html b/testing/web-platform/tests/css/css-grid/parsing/grid-row-shorthand.html
new file mode 100644
index 0000000000..505fdb9775
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-row-shorthand.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#placement-shorthands">
+<meta name="assert" content="grid-row should set values for grid-row-start and grid-row-end">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_shorthand_value("grid-row", "auto / auto", {
+    "grid-row-start": "auto",
+    "grid-row-end": "auto"
+});
+test_shorthand_value("grid-row", "auto", {
+    "grid-row-start": "auto",
+    "grid-row-end": "auto"
+});
+
+test_shorthand_value("grid-row", "10 / auto", {
+    "grid-row-start": "10",
+    "grid-row-end": "auto"
+});
+test_shorthand_value("grid-row", "10", {
+    "grid-row-start": "10",
+    "grid-row-end": "auto"
+});
+
+test_shorthand_value("grid-row", "-10 / auto", {
+    "grid-row-start": "-10",
+    "grid-row-end": "auto"
+});
+test_shorthand_value("grid-row", "-10", {
+    "grid-row-start": "-10",
+    "grid-row-end": "auto"
+});
+
+test_shorthand_value("grid-row", "span 2 / auto", {
+    "grid-row-start": "span 2",
+    "grid-row-end": "auto"
+});
+test_shorthand_value("grid-row", "span 2", {
+    "grid-row-start": "span 2",
+    "grid-row-end": "auto"
+});
+
+test_shorthand_value("grid-row", "3 last / auto", {
+    "grid-row-start": "3 last",
+    "grid-row-end": "auto"
+});
+test_shorthand_value("grid-row", "3 last", {
+    "grid-row-start": "3 last",
+    "grid-row-end": "auto"
+});
+
+test_shorthand_value("grid-row", "span first / auto", {
+    "grid-row-start": "span first",
+    "grid-row-end": "auto"
+});
+test_shorthand_value("grid-row", "span first", {
+    "grid-row-start": "span first",
+    "grid-row-end": "auto"
+});
+test_shorthand_value("grid-row", "span 2 first / auto", {
+    "grid-row-start": "span 2 first",
+    "grid-row-end": "auto"
+});
+test_shorthand_value("grid-row", "span 2 first", {
+    "grid-row-start": "span 2 first",
+    "grid-row-end": "auto"
+});
+
+test_shorthand_value("grid-row", "last / last", {
+    "grid-row-start": "last",
+    "grid-row-end": "last"
+});
+test_shorthand_value("grid-row", "last", {
+    "grid-row-start": "last",
+    "grid-row-end": "last"
+});
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-invalid.html
new file mode 100644
index 0000000000..e5dbe7821c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-invalid.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing 'grid' with invalid values</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#propdef-grid">
+<meta name="assert" content="grid-template supports only the grammar `<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>`.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+
+test_invalid_value("grid", 'none none');
+test_invalid_value("grid", 'none []');
+test_invalid_value("grid", '10px');
+test_invalid_value("grid", '20%');
+test_invalid_value("grid", '5fr');
+test_invalid_value("grid", '[a]');
+test_invalid_value("grid", '[a] 10px');
+test_invalid_value("grid", '[a] 10px []');
+test_invalid_value("grid", '[]');
+test_invalid_value("grid", '10px "a"');
+test_invalid_value("grid", '[] 10px "a"');
+test_invalid_value("grid", '10px [] "a"');
+test_invalid_value("grid", '[] [] "a"');
+test_invalid_value("grid", '"a" none');
+test_invalid_value("grid", '"a" 10px 10px');
+test_invalid_value("grid", '"a" [a] 10px');
+test_invalid_value("grid", '"a" [a] 10px [a]');
+test_invalid_value("grid", '"a" [a] [a] 10px');
+test_invalid_value("grid", '"a" 10px [a] [a]');
+test_invalid_value("grid", '"a" [a] [a]');
+test_invalid_value("grid", '[a] "a" [a] [a]');
+test_invalid_value("grid", '"a" "a" [a] [a]');
+test_invalid_value("grid", '"a" [a] [a] / none');
+test_invalid_value("grid", '"a" "a" [a] [a] / none');
+test_invalid_value("grid", 'none / "a"');
+test_invalid_value("grid", '"a" / none');
+test_invalid_value("grid", 'none / [] "a"');
+test_invalid_value("grid", 'none / "a" []');
+test_invalid_value("grid", 'none / "a" [] 10px');
+test_invalid_value("grid", 'auto-flow 100px');
+test_invalid_value("grid", 'auto-flow / auto-flow');
+test_invalid_value("grid", 'auto-flow 1fr / auto-flow 1fr');
+test_invalid_value("grid", 'dense auto-flow / dense auto-flow');
+test_invalid_value("grid", 'auto / auto-flow foo()');
+// FIXME: add more values to test full syntax
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-serialization.html b/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-serialization.html
new file mode 100644
index 0000000000..7751fd883b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-serialization.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: only serialize 'grid' when the value can roundtrip</title>
+<link rel="author" title="Daniel Libby" href="mailto:dlibby@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#propdef-grid">
+<meta name="assert" content="grid shorthand must not serialize when the value cannot roundtrip.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<script>
+  function test_shorthand_roundtrip(cssText, properties, declarations) {
+    var div = document.createElement('div');
+    div.style.cssText = cssText;
+
+    for (let property of Object.keys(properties).sort()) {
+      test(function(){
+        const readValue = div.style[property];
+        if (Array.isArray(properties[property])) {
+          assert_in_array(readValue, properties[property], property + " serialization should be sound");
+        } else {
+          assert_equals(readValue, properties[property], property + " serialization should be canonical");
+        }
+
+        if (readValue != "") {
+          div.style[property] = "";
+          div.style[property] = readValue;
+          assert_equals(div.style[property], readValue, "serialization should round-trip");
+        }
+      }, "e.style.cssText = " + cssText + " should set " + property);
+    }
+
+    if (declarations) {
+      let cssText = div.style.cssText;
+      declarations.forEach(decl => {
+        test(function(){
+          assert_true(cssText.indexOf(decl) !== -1, `cssText ('${cssText}') must contain '${decl}'`);
+        }, `cssText ('${cssText}') must contain '${decl}'`);
+      });
+    }
+  }
+
+  test_shorthand_roundtrip('grid: auto-flow auto / 100px 100px',
+                            {
+    'grid': 'none / 100px 100px',
+    'grid-template-areas': 'none'
+  });
+
+  test_shorthand_roundtrip('grid: auto-flow auto / 100px 100px; grid-template-areas: "one two" "three four"',
+                            {
+    'grid': '',
+    'grid-template-areas': '"one two" "three four"',
+    'grid-auto-flow': 'row',
+    'grid-auto-rows': 'auto'
+  });
+
+  test_shorthand_roundtrip('grid: 30px 40px / 50px 60px; grid-auto-flow: column',
+                           {
+    'grid': '',
+    'grid-template': '30px 40px / 50px 60px',
+    'grid-auto-flow': 'column',
+  }, [
+    'grid-template: 30px 40px / 50px 60px;',
+    'grid-auto-rows: auto;',
+    'grid-auto-columns: auto;',
+    'grid-auto-flow: column;'
+  ]);
+
+  test_shorthand_roundtrip('grid: auto-flow / 10px; grid-template-rows: 20px',
+                           {
+    'grid': '20px / 10px',
+    'grid-template': '20px / 10px'
+  }, [
+    'grid: 20px / 10px;'
+  ]);
+
+  test_shorthand_roundtrip('grid: auto-flow 1px / 2px; grid-auto-flow: inherit', { 'grid': '' });
+  test_shorthand_roundtrip('grid: 1px / 2px; grid-auto-flow: row', { 'grid': '1px / 2px' });
+  test_shorthand_roundtrip('grid: none / 2px; grid-auto-flow: row', { 'grid': 'none / 2px' });
+  test_shorthand_roundtrip('grid: 1px / 2px; grid-auto-columns: auto', { 'grid': '1px / 2px' });
+  test_shorthand_roundtrip('grid: 1px / 2px; grid-auto-rows: auto', { 'grid': '1px / 2px' });
+  test_shorthand_roundtrip('grid: 1px / auto-flow 2px; grid-auto-rows: auto', { 'grid': '1px / auto-flow 2px' });
+  test_shorthand_roundtrip('grid: 1px / auto-flow; grid-auto-columns: auto', { 'grid': '1px / auto-flow' });
+  test_shorthand_roundtrip('grid: auto-flow 1px / 2px; grid-auto-columns: auto', { 'grid': 'auto-flow 1px / 2px' });
+  test_shorthand_roundtrip('grid: auto-flow 1px / none; grid-auto-columns: auto', { 'grid': 'auto-flow 1px / none' });
+  test_shorthand_roundtrip('grid: auto-flow dense / 2px; grid-auto-rows: auto', { 'grid': 'auto-flow dense / 2px' });
+
+  test_shorthand_roundtrip('grid: auto-flow 1px / 2px; grid-auto-columns: 3px',
+                           {
+    'grid': '',
+    'grid-auto-columns': '3px',
+    'grid-auto-rows': '1px',
+    'grid-auto-flow': 'row',
+    'grid-template-columns': '2px',
+    'grid-template-rows': 'none'
+  });
+  test_shorthand_roundtrip('grid: 1px / auto-flow 2px; grid-auto-rows: 3px',
+                           {
+    'grid': '',
+    'grid-auto-columns': '2px',
+    'grid-auto-rows': '3px',
+    'grid-auto-flow': 'column',
+    'grid-template-columns': 'none',
+    'grid-template-rows': '1px'
+  });
+  test_shorthand_roundtrip('grid: none / auto-flow 1px; grid-template-columns: 3px',
+                           {
+    'grid': '',
+    'grid-auto-columns': '1px',
+    'grid-auto-rows': 'auto',
+    'grid-auto-flow': 'column',
+    'grid-template-columns': '3px',
+    'grid-template-rows': 'none'
+  });
+  test_shorthand_roundtrip('grid: auto-flow 1px / none; grid-template-rows: 3px',
+                           {
+    'grid': '',
+    'grid-auto-columns': 'auto',
+    'grid-auto-rows': '1px',
+    'grid-auto-flow': 'row',
+    'grid-template-columns': 'none',
+    'grid-template-rows': '3px'
+  });
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-valid.html
new file mode 100644
index 0000000000..8d546a8212
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand-valid.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing 'grid' with valid values</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#propdef-grid">
+<meta name="assert" content="grid-template supports the grammar `<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>`.">
+<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", 'none');
+test_valid_value("grid", 'none / none', 'none');
+test_valid_value("grid", 'auto / auto');
+test_valid_value("grid", 'none / [a] 0px');
+test_valid_value("grid", 'none / [] 0px', 'none / 0px');
+test_valid_value("grid", '[a] 10px / auto');
+test_valid_value("grid", '[a] 10px / none');
+test_valid_value("grid", '[] 10px [] / [] auto []', '10px / auto');
+test_valid_value("grid", '[a] "a" 10px');
+test_valid_value("grid", '[a] "a" 10px []', '[a] "a" 10px');
+test_valid_value("grid", '"a" 10px');
+test_valid_value("grid", '[] "a" 10px', '"a" 10px');
+test_valid_value("grid", '[a] "a" 10px [a]');
+test_valid_value("grid", '"a"');
+test_valid_value("grid", '"a" auto', '"a"');
+test_valid_value("grid", '"a a a"', '"a a a"');
+test_valid_value("grid", '"a" / 10px');
+test_valid_value("grid", '"a" / 20%');
+test_valid_value("grid", '"a" / 5fr');
+test_valid_value("grid", '[a] "a"');
+test_valid_value("grid", '[a] "a" [a]');
+test_valid_value("grid", '[] "a"', '"a"');
+test_valid_value("grid", '"a" [] [] "b"', '"a" "b"');
+test_valid_value("grid", '"a" [] "b"', '"a" "b"');
+test_valid_value("grid", '"a" [a] [b] "b"', '"a" [a b] "b"');
+test_valid_value("grid", '"a" [a] "b"');
+test_valid_value("grid", '"a" / 0', '"a" / 0px');
+test_valid_value("grid", '"a" 10px / 10px');
+test_valid_value("grid", '"a" [a] "b" 10px');
+test_valid_value("grid", '"a" [a] "b" 10px [a]');
+test_valid_value("grid", '"a" [a] [a] "b" 10px', '"a" [a a] "b" 10px');
+test_valid_value("grid", '"a" [a] [] "b" 10px', '"a" [a] "b" 10px');
+test_valid_value("grid", '"a" 10px [a] "b" [a]');
+test_valid_value("grid", '"a" [a] "b" [a]');
+test_valid_value("grid", '[a] "a" [a] "b" [a]');
+test_valid_value("grid", '"a" "a" [a] "b" [a]');
+test_valid_value("grid", '"a" [a] "b" [a] / 0', '"a" [a] "b" [a] / 0px');
+test_valid_value("grid", '"a" "a" [a] [a] "b" / auto', '"a" "a" [a a] "b" / auto');
+test_valid_value("grid", '100px / auto-flow dense 100px');
+test_valid_value("grid", 'auto-flow dense 1fr / 100px');
+test_valid_value("grid", '100px / dense auto-flow 100px', '100px / auto-flow dense 100px');
+test_valid_value("grid", 'dense auto-flow 1fr / 100px', 'auto-flow dense 1fr / 100px');
+test_valid_value("grid", '100px / auto-flow 100px');
+test_valid_value("grid", 'auto-flow 1fr / 100px');
+test_valid_value("grid", 'none / auto-flow 100px');
+test_valid_value("grid", 'auto-flow 1fr / none');
+test_valid_value("grid", 'auto / auto-flow 100px');
+test_valid_value("grid", 'auto-flow 1fr / auto');
+test_valid_value("grid", '1fr / 1fr');
+
+// FIXME: add more values to test full syntax
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand.html b/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand.html
new file mode 100644
index 0000000000..9293d27631
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-shorthand.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: grid sets longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-shorthand">
+<meta name="assert" content="grid supports the full grammar '<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+</head>
+<body>
+<script>
+// <grid-template>
+test_shorthand_value('grid', 'none', {
+  'grid-template-rows': 'none',
+  'grid-template-columns': 'none',
+  'grid-template-areas': 'none',
+
+  'grid-auto-rows': 'auto',
+  'grid-auto-columns': 'auto',
+  'grid-auto-flow': 'row'
+});
+
+test_shorthand_value('grid', '10px / 20%', {
+  'grid-template-rows': '10px',
+  'grid-template-columns': '20%',
+  'grid-template-areas': 'none',
+
+  'grid-auto-rows': 'auto',
+  'grid-auto-columns': 'auto',
+  'grid-auto-flow': 'row'
+});
+
+// This could theoretically be serialized as "auto-flow / 10px",
+// but spec mandates the 'grid-template-*' form when the
+// 'grid-auto-*' properties are all initial.
+test_shorthand_value('grid', 'none / 10px', {
+  'grid-template-rows': 'none',
+  'grid-template-columns': '10px',
+  'grid-template-areas': 'none',
+
+  'grid-auto-rows': 'auto',
+  'grid-auto-columns': 'auto',
+  'grid-auto-flow': 'row'
+});
+
+test_shorthand_value('grid', 'fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))', {
+  'grid-template-rows': 'fit-content(calc(-0.5em + 10px))',
+  'grid-template-columns': 'fit-content(calc(0.5em + 10px))',
+  'grid-template-areas': 'none',
+
+  'grid-auto-rows': 'auto',
+  'grid-auto-columns': 'auto',
+  'grid-auto-flow': 'row'
+});
+
+test_shorthand_value('grid',
+                     '[header-top] "a a a"     [header-bottom]' +
+                     '  [main-top] "b b b" 1fr [main-bottom]' +
+                     '           / auto 1fr auto', {
+  'grid-template-rows': '[header-top] auto [header-bottom main-top] 1fr [main-bottom]',
+  'grid-template-columns': 'auto 1fr auto',
+  'grid-template-areas': '"a a a" "b b b"',
+
+  'grid-auto-rows': 'auto',
+  'grid-auto-columns': 'auto',
+  'grid-auto-flow': 'row'
+});
+
+test_shorthand_value('grid',
+                     '  "a a a"' +
+                     '  "b b b" 1fr' +
+                     '/ auto 1fr auto', {
+  'grid-template-rows': 'auto 1fr',
+  'grid-template-columns': 'auto 1fr auto',
+  'grid-template-areas': '"a a a" "b b b"',
+
+  'grid-auto-rows': 'auto',
+  'grid-auto-columns': 'auto',
+  'grid-auto-flow': 'row'
+});
+
+test_shorthand_value('grid',
+                     ' [] "a a a"     []' +
+                     ' [] "b b b" 1fr []' +
+                     '  / [] auto 1fr [] auto []', {
+  'grid-template-rows': 'auto 1fr',
+  'grid-template-columns': 'auto 1fr auto',
+  'grid-template-areas': '"a a a" "b b b"',
+
+  'grid-auto-rows': 'auto',
+  'grid-auto-columns': 'auto',
+  'grid-auto-flow': 'row'
+});
+
+// <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
+test_shorthand_value('grid',
+                     '10px' +
+                     ' / auto-flow dense' +
+                     ' 20px', {
+  'grid-template-rows': '10px',
+  'grid-template-columns': 'none',
+  'grid-template-areas': 'none',
+
+  'grid-auto-rows': 'auto',
+  'grid-auto-columns': '20px',
+  'grid-auto-flow': 'column dense'
+});
+
+// [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
+test_shorthand_value('grid',
+                     'auto-flow dense' +
+                     ' 30px /' +
+                     ' 40px', {
+  'grid-template-rows': 'none',
+  'grid-template-columns': '40px',
+  'grid-template-areas': 'none',
+
+  'grid-auto-rows': '30px',
+  'grid-auto-columns': 'auto',
+  'grid-auto-flow': 'dense'
+});
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-computed.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-computed.html
new file mode 100644
index 0000000000..8290a40088
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-computed.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridTemplateAreas</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-areas">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("grid-template-areas", "none");
+test_computed_value("grid-template-areas", '"first"');
+test_computed_value("grid-template-areas", '"first second"');
+test_computed_value("grid-template-areas", '"1st 2nd 3rd"');
+test_computed_value("grid-template-areas", '"first second" "third fourth"');
+test_computed_value("grid-template-areas", '"first second" "third ." "1st 2nd" "3rd 4th"');
+
+// https://github.com/w3c/csswg-drafts/issues/3261
+test_computed_value("grid-template-areas", '"  a  \t  b  "', '"a b"');
+test_computed_value("grid-template-areas", '"c\td"', '"c d"');
+test_computed_value("grid-template-areas", '"first ..."', '"first ."');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-invalid.html
new file mode 100644
index 0000000000..b0e60962cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-invalid.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-template-areas with invalid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-areas">
+<meta name="assert" content="grid-template-areas supports only the grammar 'none | <string>+'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("grid-template-areas", "auto");
+test_invalid_value("grid-template-areas", 'none "first"');
+test_invalid_value("grid-template-areas", '"first" none');
+test_invalid_value("grid-template-areas", '""');
+test_invalid_value("grid-template-areas", '" "');
+test_invalid_value("grid-template-areas", '"." ""');
+test_invalid_value("grid-template-areas", '"." " "');
+test_invalid_value("grid-template-areas", '"first" ""');
+test_invalid_value("grid-template-areas", '"first" "" "second"');
+test_invalid_value("grid-template-areas", '"first" " "');
+test_invalid_value("grid-template-areas", '"" none');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-one-cell.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-one-cell.html
new file mode 100644
index 0000000000..dc341bc35d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-one-cell.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<title>grid-template-areas must define at least one cell</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel=author title="Tab Atkins-Bittner" href="https://www.xanthir.com/contact/">
+<link rel=help href="https://www.w3.org/TR/css-grid-1/#grid-template-areas-property">
+<meta name=assert content="grid-template-areas must define at least one cell to be valid.">
+
+<script>
+function testValidGta(val) {
+  test(()=>{
+    const root = document.children[0];
+    root.style.gridTemplateAreas = "";
+    root.style.gridTemplateAreas = val;
+    assert_not_equals(root.style.gridTemplateAreas, "");
+  }, `"grid-template-areas: ${val};" should be valid.`);
+}
+function testInvalidGta(val) {
+  test(()=>{
+    const root = document.children[0];
+    root.style.gridTemplateAreas = "";
+    root.style.gridTemplateAreas = val;
+    assert_equals(root.style.gridTemplateAreas, "");
+  }, `"grid-template-areas: ${val};" should be invalid.`);
+}
+
+testValidGta("'a'");
+testValidGta("'.'");
+
+testInvalidGta("''");
+testInvalidGta("'' ''");
+testInvalidGta("'$'");
+testInvalidGta("'  '");
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-valid.html
new file mode 100644
index 0000000000..9c9bd47ec8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-areas-valid.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-template-areas with valid values</title>
+<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-areas">
+<meta name="assert" content="grid-template-areas supports the full grammar 'none | <string>+'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("grid-template-areas", "none");
+test_valid_value("grid-template-areas", '"first"');
+test_valid_value("grid-template-areas", '"first second"');
+test_valid_value("grid-template-areas", '"1st 2nd 3rd"');
+test_valid_value("grid-template-areas", '"first second" "third fourth"');
+test_valid_value("grid-template-areas", '"first second" "third ." "1st 2nd" "3rd 4th"');
+
+// https://github.com/w3c/csswg-drafts/issues/3261
+test_valid_value("grid-template-areas", '"  a  \t  b  "', '"a b"');
+test_valid_value("grid-template-areas", '"c\td"', '"c d"');
+test_valid_value("grid-template-areas", '"first ..."', '"first ."');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-implicit-track.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-implicit-track.html
new file mode 100644
index 0000000000..98d9efa573
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-implicit-track.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#resolved-track-list" title="7.2.6. Resolved Value of a Track Listing">
+<meta name="assert" content="Checks the resolved value of grid-template-columns on a grid container with a leading implicit track.">
+<style>
+#target {
+  display: grid;
+  width: 1px;
+  font-size: 1px;
+}
+#item {
+  grid-column: auto / 1;
+  width: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="target">
+  <div id="item"></div>
+</div>
+<script>
+// Can't use the test_computed_value from computed-testcommon.js
+// because grid-template-columns doesn't round-trip in this test.
+function grid_template_columns(specified, computed) {
+  test(() => {
+    const target = document.getElementById('target');
+    target.style.gridTemplateColumns = '';
+    target.style.gridTemplateColumns = specified;
+    assert_equals(getComputedStyle(target).gridTemplateColumns, computed);
+  }, `Property grid-template-columns value '${specified}' computes to '${computed}'`);
+}
+
+grid_template_columns("none", "10px");
+grid_template_columns("1px", "10px 1px");
+grid_template_columns("1px [a]", "10px 1px [a]");
+grid_template_columns("1px [a] 2px", "10px 1px [a] 2px");
+grid_template_columns("[a] 1px", "10px [a] 1px");
+grid_template_columns("[a] 1px [b]", "10px [a] 1px [b]");
+grid_template_columns("1px repeat(1, 2px) 3px", "10px 1px 2px 3px");
+grid_template_columns("1px repeat(auto-fill, 2px) 3px", "10px 1px 2px 3px");
+grid_template_columns("1px repeat(auto-fit, 2px) 3px", "10px 1px 0px 3px");
+grid_template_columns("1px [a] repeat(1, 2px 3px) [b] 4px", "10px 1px [a] 2px 3px [b] 4px");
+grid_template_columns("1px [a] repeat(auto-fill, 2px 3px) [b] 4px", "10px 1px [a] 2px 3px [b] 4px");
+grid_template_columns("1px [a] repeat(auto-fit, 2px 3px) [b] 4px", "10px 1px [a] 0px 0px [b] 4px");
+grid_template_columns("1px [a] repeat(1, [b] 2px [c]) [d] 3px", "10px 1px [a b] 2px [c d] 3px");
+grid_template_columns("1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px", "10px 1px [a b] 2px [c d] 3px");
+grid_template_columns("1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px", "10px 1px [a b] 0px [c d] 3px");
+grid_template_columns("[a] 1px repeat(1, 2px [b] 3px) 4px [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
+grid_template_columns("[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
+grid_template_columns("[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]", "10px [a] 1px 0px [b] 0px 4px [d]");
+grid_template_columns("100% [a] repeat(1, [b] 200% [c]) [d] 300%", "10px 1px [a b] 2px [c d] 3px");
+grid_template_columns("100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%", "10px 1px [a b] 2px [c d] 3px");
+grid_template_columns("100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%", "10px 1px [a b] 0px [c d] 3px");
+grid_template_columns("[a] 1em repeat(1, 2em [b] 3em) 4em [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
+grid_template_columns("[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
+grid_template_columns("[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]", "10px [a] 1px 0px [b] 0px 4px [d]");
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-nogrid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-nogrid.html
new file mode 100644
index 0000000000..b1f80a728c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-nogrid.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#resolved-track-list" title="7.2.6. Resolved Value of a Track Listing">
+<meta name="assert" content="Checks the resolved value of 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", "none");
+test_computed_value("grid-template-columns", "1px");
+test_computed_value("grid-template-columns", "1px [a]");
+test_computed_value("grid-template-columns", "1px [a] 2px");
+test_computed_value("grid-template-columns", "[a] 1px");
+test_computed_value("grid-template-columns", "[a] 1px [b]");
+test_computed_value("grid-template-columns", "1px repeat(1, 2px) 3px");
+test_computed_value("grid-template-columns", "1px repeat(auto-fill, 2px) 3px");
+test_computed_value("grid-template-columns", "1px repeat(auto-fit, 2px) 3px");
+test_computed_value("grid-template-columns", "1px [a] repeat(1, 2px 3px) [b] 4px");
+test_computed_value("grid-template-columns", "1px [a] repeat(2, 2px 3px) [b] 4px");
+test_computed_value("grid-template-columns", "1px [a] repeat(auto-fill, 2px 3px) [b] 4px");
+test_computed_value("grid-template-columns", "1px [a] repeat(auto-fit, 2px 3px) [b] 4px");
+test_computed_value("grid-template-columns", "1px [a] repeat(1, [b] 2px [c]) [d] 3px");
+test_computed_value("grid-template-columns", "1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px");
+test_computed_value("grid-template-columns", "1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px");
+test_computed_value("grid-template-columns", "[a] 1px repeat(1, 2px [b] 3px) 4px [d]");
+test_computed_value("grid-template-columns", "[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]");
+test_computed_value("grid-template-columns", "[a] 1px 4px [d]");
+test_computed_value("grid-template-columns", "[a] 1px repeat(auto-fill, 2px [b] 3px) [d] 4px");
+test_computed_value("grid-template-columns", "[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]");
+test_computed_value("grid-template-rows", "100% [a] repeat(1, [b] 200% [c]) [d] 300%");
+test_computed_value("grid-template-rows", "100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%");
+test_computed_value("grid-template-rows", "100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%");
+test_computed_value("grid-template-columns", "[a] 1em repeat(1, 2em [b] 3em) 4em [d]", "[a] 1px repeat(1, 2px [b] 3px) 4px [d]");
+test_computed_value("grid-template-columns", "[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]", "[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]");
+test_computed_value("grid-template-columns", "[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]", "[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]");
+test_computed_value("grid-template-columns", "repeat(1, 2px [a] 3px) [b] repeat(auto-fill, [c] 200% [d]) [e] 300%");
+test_computed_value("grid-template-columns", "[a] repeat(auto-fill, [b] 200% [c]) repeat(1, 2px [d] 3px) [e] 300%");
+test_computed_value("grid-template-columns", "repeat(1, [a] 2px [b] 3px) [b] repeat(auto-fill, [c] 200% [d]) [e] 300%");
+test_computed_value("grid-template-columns", "[a] repeat(auto-fill, [b] 200% [c]) repeat(1, 2px [d] 3px [e]) [f] 300%");
+test_computed_value("grid-template-columns", "[a] 1px [b c] repeat(auto-fill, [d] 200% [e f]) [g] 2px repeat(1, 3px [d e] 4px [e f]) [g] 300% [h]");
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-withcontent.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-withcontent.html
new file mode 100644
index 0000000000..a550b84e05
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed-withcontent.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns">
+<meta name="assert" content="grid-template-columns computed value is the keyword none or a computed track list.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #target {
+    display: grid;
+    font-size: 40px;
+    min-width: 200px;
+    width: 300px;
+    max-width: 400px;
+    min-height: 500px;
+    height: 600px;
+    max-height: 700px;
+  }
+  #child {
+    min-width: 20px;
+    width: 30px;
+    max-width: 40px;
+    min-height: 50px;
+    height: 60px;
+    max-height: 70px;
+  }
+</style>
+</head>
+<body>
+<div id="container">
+  <div id="target">
+    <div id="child"></div>
+  </div>
+</div>
+<script>
+test_computed_value("grid-template-columns", 'none', '300px'); // "none" without #child
+
+// track-size <fixed-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
+test_computed_value("grid-template-columns", '20%', '60px'); // 20% * width
+test_computed_value("grid-template-columns", 'calc(-0.5em + 10px)', '0px');
+test_computed_value("grid-template-columns", 'calc(0.5em + 10px)', '30px');
+test_computed_value("grid-template-columns", 'calc(30% + 40px)', '130px'); // 30% * width + 40px
+test_computed_value("grid-template-columns", '5fr', '300px'); // width
+test_computed_value("grid-template-columns", 'min-content', '30px');
+test_computed_value("grid-template-columns", 'max-content', '30px');
+test_computed_value("grid-template-columns", 'auto', '300px'); // width
+
+// track-size minmax( <inflexible-breadth> , <track-breadth> )
+test_computed_value("grid-template-columns", 'minmax(10px, auto)', '300px'); // width
+test_computed_value("grid-template-columns", 'minmax(20%, max-content)', '60px'); // 20% * width
+test_computed_value("grid-template-columns", 'minmax(min-content, calc(-0.5em + 10px))', '30px');
+test_computed_value("grid-template-columns", 'minmax(auto, 0)', '30px');
+
+// track-size fit-content( <length-percentage> )
+test_computed_value("grid-template-columns", 'fit-content(70px)', '30px');
+test_computed_value("grid-template-columns", 'fit-content(20%)', '30px');
+test_computed_value("grid-template-columns", 'fit-content(calc(-0.5em + 10px))', '30px');
+
+// <track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )
+test_computed_value("grid-template-columns", 'repeat(1, 10px)', '10px');
+test_computed_value("grid-template-columns", 'repeat(1, [one two] 20%)', '[one two] 60px');
+test_computed_value("grid-template-columns", 'repeat(2, minmax(10px, auto))', '160px 140px');
+
+test_computed_value("grid-template-columns", 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])',
+                    '30px [three four] 30px 40px [five six] 0px [three four] 30px 40px [five six]');
+
+// <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
+test_computed_value("grid-template-columns", 'min-content repeat(5, minmax(10px, auto))',
+                    '30px 54px 54px 54px 54px 54px');
+test_computed_value("grid-template-columns", '[] 150px [] 1fr []', '150px 150px');
+
+// <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
+test_computed_value("grid-template-columns", 'repeat(auto-fill, 200px)', '200px');
+test_computed_value("grid-template-columns", 'repeat(auto-fit, [one] 20%)',
+                    '[one] 60px [one] 0px [one] 0px [one] 0px [one] 0px');
+test_computed_value("grid-template-columns", 'repeat(auto-fill, minmax(100px, 5fr) [two])',
+                    '100px [two] 100px [two] 100px [two]');
+test_computed_value("grid-template-columns", 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])',
+                    '[three] 240px [four]');
+test_computed_value('grid-template-columns', '[a] 21px [b] repeat(auto-fill, [c] 22px [d] 23px [e]) [f] 24px [g]',
+                    '[a] 21px [b c] 22px [d] 23px [e c] 22px [d] 23px [e c] 22px [d] 23px [e c] 22px [d] 23px [e c] 22px [d] 23px [e f] 24px [g]');
+test_computed_value('grid-template-columns', '[a] 21px [b c] repeat(auto-fill, [d e] 22px [f g h] 23px [i j k l]) [m n] 24px [o]',
+                    '[a] 21px [b c d e] 22px [f g h] 23px [i j k l d e] 22px [f g h] 23px [i j k l d e] 22px [f g h] 23px [i j k l d e] 22px [f g h] 23px [i j k l d e] 22px [f g h] 23px [i j k l m n] 24px [o]');
+test_computed_value('grid-template-columns', '[a] repeat(2, [b] 20px [c d] 21px [e f g]) [h i] repeat(auto-fit, [j] 22px [k l m] 23px [n o p q]) [r s]',
+                    '[a b] 20px [c d] 21px [e f g b] 20px [c d] 21px [e f g h i j] 0px [k l m] 0px [n o p q j] 0px [k l m] 0px [n o p q j] 0px [k l m] 0px [n o p q j] 0px [k l m] 0px [n o p q r s]');
+
+// <auto-track-list> =
+// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
+// <auto-repeat>
+// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
+
+test_computed_value("grid-template-columns", '[one] repeat(2, minmax(50px, auto)) [two] 30px [three] repeat(auto-fill, 10px) 40px [four five] repeat(2, minmax(200px, auto)) [six]',
+                    '[one] 50px 50px [two] 30px [three] 10px 40px [four five] 200px 200px [six]');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed.html
new file mode 100644
index 0000000000..54380ef455
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-computed.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#resolved-track-list" title="7.2.6. Resolved Value of a Track Listing">
+<meta name="assert" content="Checks the resolved value of grid-template-columns on a grid container.">
+<style>
+#target {
+  display: grid;
+  width: 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", "none");
+test_computed_value("grid-template-columns", "1px");
+test_computed_value("grid-template-columns", "1px [a]");
+test_computed_value("grid-template-columns", "1px [a] 2px");
+test_computed_value("grid-template-columns", "[a] 1px");
+test_computed_value("grid-template-columns", "[a] 1px [b]");
+test_computed_value("grid-template-columns", "1px repeat(1, 2px) 3px", "1px 2px 3px");
+test_computed_value("grid-template-columns", "1px repeat(auto-fill, 2px) 3px", "1px 2px 3px");
+test_computed_value("grid-template-columns", "1px repeat(auto-fit, 2px) 3px", "1px 0px 3px");
+test_computed_value("grid-template-columns", "1px [a] repeat(1, 2px 3px) [b] 4px", "1px [a] 2px 3px [b] 4px");
+test_computed_value("grid-template-columns", "1px [a] repeat(auto-fill, 2px 3px) [b] 4px", "1px [a] 2px 3px [b] 4px");
+test_computed_value("grid-template-columns", "1px [a] repeat(auto-fit, 2px 3px) [b] 4px", "1px [a] 0px 0px [b] 4px");
+test_computed_value("grid-template-columns", "1px [a] repeat(1, [b] 2px [c]) [d] 3px", "1px [a b] 2px [c d] 3px");
+test_computed_value("grid-template-columns", "1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px", "1px [a b] 2px [c d] 3px");
+test_computed_value("grid-template-columns", "1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px", "1px [a b] 0px [c d] 3px");
+test_computed_value("grid-template-columns", "[a] 1px repeat(1, 2px [b] 3px) 4px [d]", "[a] 1px 2px [b] 3px 4px [d]");
+test_computed_value("grid-template-columns", "[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]", "[a] 1px 2px [b] 3px 4px [d]");
+test_computed_value("grid-template-columns", "[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]", "[a] 1px 0px [b] 0px 4px [d]");
+test_computed_value("grid-template-columns", "100% [a] repeat(1, [b] 200% [c]) [d] 300%", "1px [a b] 2px [c d] 3px");
+test_computed_value("grid-template-columns", "100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%", "1px [a b] 2px [c d] 3px");
+test_computed_value("grid-template-columns", "100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%", "1px [a b] 0px [c d] 3px");
+test_computed_value("grid-template-columns", "[a] 1em repeat(1, 2em [b] 3em) 4em [d]", "[a] 1px 2px [b] 3px 4px [d]");
+test_computed_value("grid-template-columns", "[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]", "[a] 1px 2px [b] 3px 4px [d]");
+test_computed_value("grid-template-columns", "[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]", "[a] 1px 0px [b] 0px 4px [d]");
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-crash.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-crash.html
new file mode 100644
index 0000000000..61bdfd8177
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-crash.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1214890">
+<body></body>
+<script>
+let value = '';
+for (let i = 0; i < 100000; ++i) {
+  value += ` repeat(1000, ${i}px)`;
+}
+document.body.style.gridTemplateColumns = value;
+document.body.textContent = 'PASS';
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-invalid.html
new file mode 100644
index 0000000000..5a79ea13d6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-invalid.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-template-columns with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns">
+<meta name="assert" content="grid-template-columns supports only the grammar 'none | <track-list> | <auto-track-list>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("grid-template-columns", '-10px');
+test_invalid_value("grid-template-columns", '-20%');
+test_invalid_value("grid-template-columns", '-5fr');
+test_invalid_value("grid-template-columns", 'minmax(5fr, calc(0.5em + 10px))');
+test_invalid_value("grid-template-columns", 'minmax(-10px, auto)');
+test_invalid_value("grid-template-columns", 'minmax(-20%, max-content)');
+test_invalid_value("grid-template-columns", 'minmax(min-content, -20%)');
+test_invalid_value("grid-template-columns", 'fit-content(-10px)');
+test_invalid_value("grid-template-columns", 'fit-content(-20%)');
+test_invalid_value("grid-template-columns", '[one] 10px [two three] repeat(20%) [four five six] 3fr [seven]');
+test_invalid_value("grid-template-columns", '[one]');
+test_invalid_value("grid-template-columns", '[one] 10px [two] [three]');
+test_invalid_value("grid-template-columns", 'repeat(auto-fill, -10px)');
+test_invalid_value("grid-template-columns", 'repeat(auto-fill, 10px) repeat(auto-fit, 20%)');
+test_invalid_value("grid-template-columns", '[auto] 1px');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-valid.html
new file mode 100644
index 0000000000..6bf2e7bce6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-columns-valid.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-template-columns with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns">
+<meta name="assert" content="grid-template-columns supports the full grammar 'none | <track-list> | <auto-track-list>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("grid-template-columns", "none");
+
+// track-size <fixed-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
+test_valid_value("grid-template-columns", '10px');
+test_valid_value("grid-template-columns", '20%');
+test_valid_value("grid-template-columns", 'calc(-0.5em + 10px)');
+test_valid_value("grid-template-columns", 'calc(0.5em + 10px)');
+test_valid_value("grid-template-columns", 'calc(30% + 40vw)');
+test_valid_value("grid-template-columns", '5fr');
+test_valid_value("grid-template-columns", 'min-content');
+test_valid_value("grid-template-columns", 'max-content');
+test_valid_value("grid-template-columns", 'auto');
+
+// track-size minmax( <inflexible-breadth> , <track-breadth> )
+test_valid_value("grid-template-columns", 'minmax(10px, auto)');
+test_valid_value("grid-template-columns", 'minmax(20%, max-content)');
+test_valid_value("grid-template-columns", 'minmax(calc(-0.5em + 10px), min-content)');
+test_valid_value("grid-template-columns", 'minmax(calc(0.5em + 10px), 5fr)');
+test_valid_value("grid-template-columns", 'minmax(calc(30% + 40vw), 10px)');
+test_valid_value("grid-template-columns", 'minmax(min-content, 20%)');
+test_valid_value("grid-template-columns", 'minmax(max-content, calc(-0.5em + 10px))');
+test_valid_value("grid-template-columns", 'minmax(auto, calc(0.5em + 10px))');
+
+// track-size fit-content( <length-percentage> )
+test_valid_value("grid-template-columns", 'fit-content(10px)');
+test_valid_value("grid-template-columns", 'fit-content(20%)');
+test_valid_value("grid-template-columns", 'fit-content(calc(-0.5em + 10px))');
+test_valid_value("grid-template-columns", 'fit-content(calc(0.5em + 10px))');
+test_valid_value("grid-template-columns", 'fit-content(calc(30% + 40vw))');
+
+// <track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )
+
+// 'repeat(1, [] 10px)' in Blink
+// 'repeat(1, 10px)' in Firefox
+// '[] 10px' in Safari
+// '10px' in Edge 18
+test_valid_value("grid-template-columns", 'repeat(1, [] 10px [])', 'repeat(1, 10px)');
+
+// 'repeat(1, [one two] 20%)' in Blink, Firefox
+// '[one two] 20%' in Safari, Edge 18
+test_valid_value("grid-template-columns", 'repeat(1, [one two] 20%)');
+
+// 'repeat(2, minmax(10px, auto))' in Blink, Firefox, Edge 18
+// 'minmax(10px, auto) minmax(10px, auto)' in Safari
+test_valid_value("grid-template-columns", 'repeat(2, minmax(10px, auto))');
+
+test_valid_value("grid-template-columns", 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])');
+
+// <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
+test_valid_value("grid-template-columns", 'min-content repeat(5, minmax(10px, auto))');
+test_valid_value("grid-template-columns", '[] 150px [] 1fr []', '150px 1fr');
+
+// <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
+test_valid_value("grid-template-columns", 'repeat(auto-fill, 10px)');
+test_valid_value("grid-template-columns", 'repeat(auto-fit, [one] 20%)');
+test_valid_value("grid-template-columns", 'repeat(auto-fill, minmax(30px, 5fr) [two])');
+test_valid_value("grid-template-columns", 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])');
+
+// <auto-track-list> =
+// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
+// <auto-repeat>
+// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
+
+test_valid_value("grid-template-columns", '[one] repeat(2, minmax(10px, auto)) [two] 30px [three] repeat(auto-fill, 10px) 40px [four five] repeat(2, minmax(10px, auto)) [six]');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-node-not-connected.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-node-not-connected.html
new file mode 100644
index 0000000000..89bee03a11
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-node-not-connected.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=261421">
+<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+<meta name="assert" content="test should not crash and grid-template for child should be the empty string after disconnecting the element">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<style>
+#child {
+  grid-template: 10px / 10px;
+}
+</style>
+<div>
+  <div id="child"></div>
+</div>
+<script>
+test(() => {
+  let styleDeclaration = window.getComputedStyle(document.getElementById("child"));
+  document.querySelector("body > div:nth-child(1)").textContent = "";
+  assert_equals(styleDeclaration.gridTemplate, "");
+});
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-repeat-auto-computed-withcontent-001.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-repeat-auto-computed-withcontent-001.html
new file mode 100644
index 0000000000..c18f296abc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-repeat-auto-computed-withcontent-001.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns">
+<meta name="assert" content="grid-template-columns computed value is the keyword none or a computed track list.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<script src="/css/css-grid/support/grid-child-utils.js"></script>
+<style>
+
+#target {
+    display: grid;
+    width: 32px;
+    height: 10px;
+};
+
+</style>
+</head>
+<body>
+<div id="container">
+  <div id="target">
+    <div></div>
+    <div></div>
+    <div id="child"></div>
+    <div style="grid-column: 7"></div>
+    <div></div>
+  </div>
+</div>
+<script>
+
+let autoFitTester = new GridChildHelper(gridChildHelperCol,
+    "[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h]) [i] 5px [k] 6px [l m] ");
+
+let autoFillTester = new GridChildHelper(gridChildHelperCol,
+    "[a] 1px [b] 2px [c d] repeat(auto-fill, [e f] 3px [g] 4px [h]) [i] 5px [k] 6px [l m] ");
+
+// Auto-fit
+autoFitTester.runTest(3, "[a] 1px [b] 2px [c d e f] 3px [g] 0px [h e f] 0px [g] 0px [h i] 5px [k] 6px [l m]");
+autoFitTester.runTest(4, "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 0px [g] 0px [h i] 5px [k] 6px [l m]");
+autoFitTester.runTest(5, "[a] 1px [b] 2px [c d e f] 0px [g] 0px [h e f] 3px [g] 0px [h i] 5px [k] 6px [l m]");
+autoFitTester.runTest(6, "[a] 1px [b] 2px [c d e f] 0px [g] 0px [h e f] 0px [g] 4px [h i] 5px [k] 6px [l m]");
+autoFitTester.runTest("4 / 5", "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 0px [g] 0px [h i] 5px [k] 6px [l m]");
+autoFitTester.runTest("4 / 6", "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 3px [g] 0px [h i] 5px [k] 6px [l m]");
+autoFitTester.runTest("3 / 6", "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 0px [h i] 5px [k] 6px [l m]");
+// Auto-fill. These tests are semi-redundant, but should still pass.
+autoFillTester.runTest(3, "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h i] 5px [k] 6px [l m]");
+autoFillTester.runTest(4, "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h i] 5px [k] 6px [l m]");
+autoFillTester.runTest(5, "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h i] 5px [k] 6px [l m]");
+autoFillTester.runTest("4 / 7", "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h i] 5px [k] 6px [l m]");
+autoFillTester.runTest("3 / 6", "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h i] 5px [k] 6px [l m]");
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-repeat-auto-computed-withcontent-002.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-repeat-auto-computed-withcontent-002.html
new file mode 100644
index 0000000000..8cb9209cee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-repeat-auto-computed-withcontent-002.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns">
+<meta name="assert" content="grid-template-columns computed value is the keyword none or a computed track list.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<script src="/css/css-grid/support/grid-child-utils.js"></script>
+<style>
+
+#target {
+    display: grid;
+    width: 54px;
+    height: 32px;
+};
+
+</style>
+</head>
+<body>
+<div id="container">
+  <div id="target">
+    <div></div>
+    <div></div>
+    <div style="grid-column: 4"></div>
+    <div id="child"></div>
+    <div style="grid-column: 10"></div>
+    <div></div>
+  </div>
+</div>
+<script>
+
+// Style with 3 repeat tracks.
+let style3 =
+    "[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h] 5px [i j]) [k] 7px [k] 8px [l m]";
+let col3Tester = new GridChildHelper(gridChildHelperCol, style3);
+let rowTester = new GridChildHelper(gridChildHelperRow, style3);
+
+// Style with 2 repeat tracks.
+let style2 =
+    "[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h]) [i j] 7px [k] 8px [l m]";
+let col2Tester = new GridChildHelper(gridChildHelperCol, style2);
+
+rowTester.runTest(3,
+    "[a] 1px [b] 2px [c d e f] 3px [g] 0px [h] 0px [i j k] 7px [k] 8px [l m]");
+rowTester.runTest(5,
+    "[a] 1px [b] 2px [c d e f] 0px [g] 0px [h] 5px [i j k] 7px [k] 8px [l m]");
+rowTester.runTest("3 / 8",
+    "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
+rowTester.runTest("4 / span 2",
+    "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
+rowTester.runTest("4 / 5",
+    "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 0px [i j k] 7px [k] 8px [l m]");
+
+col3Tester.runTest(3,
+    "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h] 0px [i j e f] 0px [g] 0px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
+col3Tester.runTest(6,
+    "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 0px [i j e f] 3px [g] 0px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
+col3Tester.runTest("3 / 8",
+    "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h] 5px [i j e f] 3px [g] 4px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
+col3Tester.runTest("5 / span 2",
+    "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 5px [i j e f] 3px [g] 0px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
+col3Tester.runTest("7 / span 2",
+    "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
+col3Tester.runTest("5 / 8",
+    "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 5px [i j e f] 3px [g] 4px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
+col3Tester.runTest("8 / 10",
+    "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 0px [i j e f] 0px [g] 0px [h] 5px [i j e f] 3px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
+
+col2Tester.runTest(3,
+    "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 0px [g] 0px [h e f] 0px [g] 0px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]");
+col2Tester.runTest(6,
+    "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 0px [g] 4px [h e f] 0px [g] 0px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]");
+col2Tester.runTest("3 / 8",
+    "[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h e f] 3px [g] 0px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]");
+col2Tester.runTest("6 / span 2",
+    "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]");
+col2Tester.runTest("5 / 10",
+    "[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 3px [g] 4px [h e f] 3px [g] 4px [h e f] 3px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]");
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-implicit-track.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-implicit-track.html
new file mode 100644
index 0000000000..7ed3110c76
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-implicit-track.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridTemplateRows</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#resolved-track-list" title="7.2.6. Resolved Value of a Track Listing">
+<meta name="assert" content="Checks the resolved value of grid-template-rows on a grid container with a leading implicit track.">
+<style>
+#target {
+  display: grid;
+  height: 1px;
+  font-size: 1px;
+}
+#item {
+  grid-row: auto / 1;
+  height: 10px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="target">
+  <div id="item"></div>
+</div>
+<script>
+// Can't use the test_computed_value from computed-testcommon.js
+// because grid-template-rows doesn't round-trip in this test.
+function grid_template_rows(specified, computed) {
+  test(() => {
+    const target = document.getElementById('target');
+    target.style.gridTemplateRows = '';
+    target.style.gridTemplateRows = specified;
+    assert_equals(getComputedStyle(target).gridTemplateRows, computed);
+  }, `Property grid-template-rows value '${specified}' computes to '${computed}'`);
+}
+
+grid_template_rows("none", "10px");
+grid_template_rows("1px", "10px 1px");
+grid_template_rows("1px [a]", "10px 1px [a]");
+grid_template_rows("1px [a] 2px", "10px 1px [a] 2px");
+grid_template_rows("[a] 1px", "10px [a] 1px");
+grid_template_rows("[a] 1px [b]", "10px [a] 1px [b]");
+grid_template_rows("1px repeat(1, 2px) 3px", "10px 1px 2px 3px");
+grid_template_rows("1px repeat(auto-fill, 2px) 3px", "10px 1px 2px 3px");
+grid_template_rows("1px repeat(auto-fit, 2px) 3px", "10px 1px 0px 3px");
+grid_template_rows("1px [a] repeat(1, 2px 3px) [b] 4px", "10px 1px [a] 2px 3px [b] 4px");
+grid_template_rows("1px [a] repeat(auto-fill, 2px 3px) [b] 4px", "10px 1px [a] 2px 3px [b] 4px");
+grid_template_rows("1px [a] repeat(auto-fit, 2px 3px) [b] 4px", "10px 1px [a] 0px 0px [b] 4px");
+grid_template_rows("1px [a] repeat(1, [b] 2px [c]) [d] 3px", "10px 1px [a b] 2px [c d] 3px");
+grid_template_rows("1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px", "10px 1px [a b] 2px [c d] 3px");
+grid_template_rows("1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px", "10px 1px [a b] 0px [c d] 3px");
+grid_template_rows("[a] 1px repeat(1, 2px [b] 3px) 4px [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
+grid_template_rows("[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
+grid_template_rows("[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]", "10px [a] 1px 0px [b] 0px 4px [d]");
+grid_template_rows("100% [a] repeat(1, [b] 200% [c]) [d] 300%", "10px 1px [a b] 2px [c d] 3px");
+grid_template_rows("100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%", "10px 1px [a b] 2px [c d] 3px");
+grid_template_rows("100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%", "10px 1px [a b] 0px [c d] 3px");
+grid_template_rows("[a] 1em repeat(1, 2em [b] 3em) 4em [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
+grid_template_rows("[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]", "10px [a] 1px 2px [b] 3px 4px [d]");
+grid_template_rows("[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]", "10px [a] 1px 0px [b] 0px 4px [d]");
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-nogrid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-nogrid.html
new file mode 100644
index 0000000000..057a7fa061
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-nogrid.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridTemplateRows</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#resolved-track-list" title="7.2.6. Resolved Value of a Track Listing">
+<meta name="assert" content="Checks the resolved value of grid-template-rows 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-rows", "none");
+test_computed_value("grid-template-rows", "1px");
+test_computed_value("grid-template-rows", "1px [a]");
+test_computed_value("grid-template-rows", "1px [a] 2px");
+test_computed_value("grid-template-rows", "[a] 1px");
+test_computed_value("grid-template-rows", "[a] 1px [b]");
+test_computed_value("grid-template-rows", "1px repeat(1, 2px) 3px");
+test_computed_value("grid-template-rows", "1px repeat(auto-fill, 2px) 3px");
+test_computed_value("grid-template-rows", "1px repeat(auto-fit, 2px) 3px");
+test_computed_value("grid-template-rows", "1px [a] repeat(1, 2px 3px) [b] 4px");
+test_computed_value("grid-template-rows", "1px [a] repeat(auto-fill, 2px 3px) [b] 4px");
+test_computed_value("grid-template-rows", "1px [a] repeat(auto-fit, 2px 3px) [b] 4px");
+test_computed_value("grid-template-rows", "1px [a] repeat(1, [b] 2px [c]) [d] 3px");
+test_computed_value("grid-template-rows", "1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px");
+test_computed_value("grid-template-rows", "1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px");
+test_computed_value("grid-template-rows", "[a] 1px repeat(1, 2px [b] 3px) 4px [d]");
+test_computed_value("grid-template-rows", "[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]");
+test_computed_value("grid-template-rows", "[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]");
+test_computed_value("grid-template-rows", "100% [a] repeat(1, [b] 200% [c]) [d] 300%");
+test_computed_value("grid-template-rows", "100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%");
+test_computed_value("grid-template-rows", "100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%");
+test_computed_value("grid-template-rows", "[a] 1em repeat(1, 2em [b] 3em) 4em [d]", "[a] 1px repeat(1, 2px [b] 3px) 4px [d]");
+test_computed_value("grid-template-rows", "[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]", "[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]");
+test_computed_value("grid-template-rows", "[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]", "[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]");
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-withcontent.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-withcontent.html
new file mode 100644
index 0000000000..693cf338c0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed-withcontent.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridTemplateRows</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-rows">
+<meta name="assert" content="grid-template-rows computed value is the keyword none or a computed track list.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #target {
+    display: grid;
+    font-size: 40px;
+    min-width: 200px;
+    width: 300px;
+    max-width: 400px;
+    min-height: 500px;
+    height: 600px;
+    max-height: 700px;
+  }
+  #child {
+    min-width: 20px;
+    width: 30px;
+    max-width: 40px;
+    min-height: 50px;
+    height: 60px;
+    max-height: 70px;
+  }
+</style>
+</head>
+<body>
+<div id="container">
+  <div id="target">
+    <div id="child"></div>
+  </div>
+</div>
+<script>
+test_computed_value("grid-template-rows", 'none', '600px'); // "none" without #child
+
+// track-size <fixed-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
+test_computed_value("grid-template-rows", '20%', '120px'); // 20% * height
+test_computed_value("grid-template-rows", 'calc(-0.5em + 10px)', '0px');
+test_computed_value("grid-template-rows", 'calc(0.5em + 10px)', '30px');
+test_computed_value("grid-template-rows", 'calc(30% + 40px)', '220px'); // 30% * height + 40px
+test_computed_value("grid-template-rows", '5fr', '600px'); // height
+test_computed_value("grid-template-rows", 'min-content', '60px');
+test_computed_value("grid-template-rows", 'max-content', '60px');
+test_computed_value("grid-template-rows", 'auto', '600px'); // height
+
+// track-size minmax( <inflexible-breadth> , <track-breadth> )
+test_computed_value("grid-template-rows", 'minmax(10px, auto)', '600px'); // height
+test_computed_value("grid-template-rows", 'minmax(20%, max-content)', '120px'); // 20% * height
+test_computed_value("grid-template-rows", 'minmax(min-content, calc(-0.5em + 10px))', '60px');
+test_computed_value("grid-template-rows", 'minmax(auto, 0)', '60px');
+
+// track-size fit-content( <length-percentage> )
+test_computed_value("grid-template-rows", 'fit-content(70px)', '60px');
+test_computed_value("grid-template-rows", 'fit-content(20%)', '60px');
+test_computed_value("grid-template-rows", 'fit-content(calc(-0.5em + 10px))', '60px');
+
+// <track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )
+test_computed_value("grid-template-rows", 'repeat(1, 10px)', '10px');
+test_computed_value("grid-template-rows", 'repeat(1, [one two] 20%)', '[one two] 120px');
+test_computed_value("grid-template-rows", 'repeat(2, minmax(10px, auto))', '325px 275px');
+
+test_computed_value("grid-template-rows", 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])',
+                    '60px [three four] 30px 40px [five six] 0px [three four] 30px 40px [five six]');
+
+// <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
+test_computed_value("grid-template-rows", 'min-content repeat(5, minmax(10px, auto))',
+                    '60px 108px 108px 108px 108px 108px');
+test_computed_value("grid-template-rows", '[] 150px [] 1fr []', '150px 450px');
+
+// <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
+test_computed_value("grid-template-rows", 'repeat(auto-fill, 200px)', '200px 200px 200px');
+test_computed_value("grid-template-rows", 'repeat(auto-fit, [one] 20%)',
+                    '[one] 120px [one] 0px [one] 0px [one] 0px [one] 0px');
+test_computed_value("grid-template-rows", 'repeat(auto-fill, minmax(100px, 5fr) [two])',
+                    '100px [two] 100px [two] 100px [two] 100px [two] 100px [two] 100px [two]');
+test_computed_value("grid-template-rows", 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])',
+                    '[three] 240px [four three] 0px [four]');
+
+// <auto-track-list> =
+// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
+// <auto-repeat>
+// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
+
+test_computed_value("grid-template-rows", '[one] repeat(2, minmax(50px, auto)) [two] 30px [three] repeat(auto-fill, 10px) 40px [four five] repeat(2, minmax(200px, auto)) [six]',
+                    '[one] 50px 50px [two] 30px [three] 10px 10px 10px 40px [four five] 200px 200px [six]');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed.html
new file mode 100644
index 0000000000..b7584e1954
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-computed.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: getComputedStyle().gridTemplateRows</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#resolved-track-list" title="7.2.6. Resolved Value of a Track Listing">
+<meta name="assert" content="Checks the resolved value of grid-template-rows on a grid container.">
+<style>
+#target {
+  display: grid;
+  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-rows", "none");
+test_computed_value("grid-template-rows", "1px");
+test_computed_value("grid-template-rows", "1px [a]");
+test_computed_value("grid-template-rows", "1px [a] 2px");
+test_computed_value("grid-template-rows", "[a] 1px");
+test_computed_value("grid-template-rows", "[a] 1px [b]");
+test_computed_value("grid-template-rows", "1px repeat(1, 2px) 3px", "1px 2px 3px");
+test_computed_value("grid-template-rows", "1px repeat(auto-fill, 2px) 3px", "1px 2px 3px");
+test_computed_value("grid-template-rows", "1px repeat(auto-fit, 2px) 3px", "1px 0px 3px");
+test_computed_value("grid-template-rows", "1px [a] repeat(1, 2px 3px) [b] 4px", "1px [a] 2px 3px [b] 4px");
+test_computed_value("grid-template-rows", "1px [a] repeat(auto-fill, 2px 3px) [b] 4px", "1px [a] 2px 3px [b] 4px");
+test_computed_value("grid-template-rows", "1px [a] repeat(auto-fit, 2px 3px) [b] 4px", "1px [a] 0px 0px [b] 4px");
+test_computed_value("grid-template-rows", "1px [a] repeat(1, [b] 2px [c]) [d] 3px", "1px [a b] 2px [c d] 3px");
+test_computed_value("grid-template-rows", "1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px", "1px [a b] 2px [c d] 3px");
+test_computed_value("grid-template-rows", "1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px", "1px [a b] 0px [c d] 3px");
+test_computed_value("grid-template-rows", "[a] 1px repeat(1, 2px [b] 3px) 4px [d]", "[a] 1px 2px [b] 3px 4px [d]");
+test_computed_value("grid-template-rows", "[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]", "[a] 1px 2px [b] 3px 4px [d]");
+test_computed_value("grid-template-rows", "[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]", "[a] 1px 0px [b] 0px 4px [d]");
+test_computed_value("grid-template-rows", "100% [a] repeat(1, [b] 200% [c]) [d] 300%", "1px [a b] 2px [c d] 3px");
+test_computed_value("grid-template-rows", "100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%", "1px [a b] 2px [c d] 3px");
+test_computed_value("grid-template-rows", "100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%", "1px [a b] 0px [c d] 3px");
+test_computed_value("grid-template-rows", "[a] 1em repeat(1, 2em [b] 3em) 4em [d]", "[a] 1px 2px [b] 3px 4px [d]");
+test_computed_value("grid-template-rows", "[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]", "[a] 1px 2px [b] 3px 4px [d]");
+test_computed_value("grid-template-rows", "[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]", "[a] 1px 0px [b] 0px 4px [d]");
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-invalid.html
new file mode 100644
index 0000000000..24008e65e2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-invalid.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-template-rows with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-rows">
+<meta name="assert" content="grid-template-rows supports only the grammar 'none | <track-list> | <auto-track-list>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("grid-template-rows", '-10px');
+test_invalid_value("grid-template-rows", '-20%');
+test_invalid_value("grid-template-rows", '-5fr');
+test_invalid_value("grid-template-rows", 'minmax(5fr, calc(0.5em + 10px))');
+test_invalid_value("grid-template-rows", 'minmax(-10px, auto)');
+test_invalid_value("grid-template-rows", 'minmax(-20%, max-content)');
+test_invalid_value("grid-template-rows", 'minmax(min-content, -20%)');
+test_invalid_value("grid-template-rows", 'fit-content(-10px)');
+test_invalid_value("grid-template-rows", 'fit-content(-20%)');
+test_invalid_value("grid-template-rows", '[one] 10px [two three] repeat(20%) [four five six] 3fr [seven]');
+test_invalid_value("grid-template-rows", '[one]');
+test_invalid_value("grid-template-rows", '[one] 10px [two] [three]');
+test_invalid_value("grid-template-rows", 'repeat(auto-fill, -10px)');
+test_invalid_value("grid-template-rows", 'repeat(auto-fill, 10px) repeat(auto-fit, 20%)');
+test_invalid_value("grid-template-rows", '[auto] 1px');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-valid.html
new file mode 100644
index 0000000000..2d3a1ed804
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-rows-valid.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-template-rows with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-rows">
+<meta name="assert" content="grid-template-rows supports the full grammar 'none | <track-list> | <auto-track-list>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("grid-template-rows", "none");
+
+// track-size <fixed-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
+test_valid_value("grid-template-rows", '10px');
+test_valid_value("grid-template-rows", '20%');
+test_valid_value("grid-template-rows", 'calc(-0.5em + 10px)');
+test_valid_value("grid-template-rows", 'calc(0.5em + 10px)');
+test_valid_value("grid-template-rows", 'calc(30% + 40vw)');
+test_valid_value("grid-template-rows", '5fr');
+test_valid_value("grid-template-rows", 'min-content');
+test_valid_value("grid-template-rows", 'max-content');
+test_valid_value("grid-template-rows", 'auto');
+
+// track-size minmax( <inflexible-breadth> , <track-breadth> )
+test_valid_value("grid-template-rows", 'minmax(10px, auto)');
+test_valid_value("grid-template-rows", 'minmax(20%, max-content)');
+test_valid_value("grid-template-rows", 'minmax(calc(-0.5em + 10px), min-content)');
+test_valid_value("grid-template-rows", 'minmax(calc(0.5em + 10px), 5fr)');
+test_valid_value("grid-template-rows", 'minmax(calc(30% + 40vw), 10px)');
+test_valid_value("grid-template-rows", 'minmax(min-content, 20%)');
+test_valid_value("grid-template-rows", 'minmax(max-content, calc(-0.5em + 10px))');
+test_valid_value("grid-template-rows", 'minmax(auto, calc(0.5em + 10px))');
+
+// track-size fit-content( <length-percentage> )
+test_valid_value("grid-template-rows", 'fit-content(10px)');
+test_valid_value("grid-template-rows", 'fit-content(20%)');
+test_valid_value("grid-template-rows", 'fit-content(calc(-0.5em + 10px))');
+test_valid_value("grid-template-rows", 'fit-content(calc(0.5em + 10px))');
+test_valid_value("grid-template-rows", 'fit-content(calc(30% + 40vw))');
+
+// <track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )
+
+test_valid_value("grid-template-rows", 'repeat(1, [] 10px [])', 'repeat(1, 10px)');
+
+// 'repeat(1, [one two] 20%)' in Blink, Firefox
+// '[one two] 20%' in Safari, Edge 18
+test_valid_value("grid-template-rows", 'repeat(1, [one two] 20%)');
+
+// 'repeat(2, minmax(10px, auto))' in Blink, Firefox, Edge 18
+// 'minmax(10px, auto) minmax(10px, auto)' in Safari
+test_valid_value("grid-template-rows", 'repeat(2, minmax(10px, auto))');
+
+test_valid_value("grid-template-rows", 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])');
+
+// <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
+test_valid_value("grid-template-rows", 'min-content repeat(5, minmax(10px, auto))');
+test_valid_value("grid-template-rows", '[] 150px [] 1fr []', '150px 1fr');
+
+// <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
+test_valid_value("grid-template-rows", 'repeat(auto-fill, 10px)');
+test_valid_value("grid-template-rows", 'repeat(auto-fit, [one] 20%)');
+test_valid_value("grid-template-rows", 'repeat(auto-fill, minmax(30px, 5fr) [two])');
+test_valid_value("grid-template-rows", 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])');
+
+// <auto-track-list> =
+// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
+// <auto-repeat>
+// [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
+
+test_valid_value("grid-template-rows", '[one] repeat(2, minmax(10px, auto)) [two] 30px [three] repeat(auto-fill, 10px) 40px [four five] repeat(2, minmax(10px, auto)) [six]');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-areas-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-areas-valid.html
new file mode 100644
index 0000000000..2d2b2433a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-areas-valid.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: grid-template and grid-template-areas</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template">
+<meta name=assert content="grid-template and grid-template-areas parsing is valid.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<script>
+
+function testValidGridTemplate(valueGridTemplate, valueGridAreas, serializedGridTemplateValue) {
+  if (arguments.length < 3)
+    serializedGridTemplateValue = valueGridTemplate;
+
+  test(()=>{
+    const root = document.children[0];
+    root.style.gridTemplate = "";
+    root.style.gridTemplate = valueGridTemplate;
+    root.style.gridTemplateAreas = "";
+    root.style.gridTemplateAreas = valueGridAreas;
+    assert_equals(root.style.gridTemplate, serializedGridTemplateValue);
+    assert_equals(root.style.gridTemplateAreas, valueGridAreas);
+  }, `grid-template: ${valueGridTemplate} and "grid-template-areas: ${valueGridAreas};" should be valid.`);
+}
+
+testValidGridTemplate("none / 1px",  "\"a\"", "");
+testValidGridTemplate("none / none", "\"a\"", "");
+testValidGridTemplate("auto / 1px", "\"a a a\"", "\"a a a\" / 1px");
+testValidGridTemplate("auto / auto", "\"a a a\"", "\"a a a\" / auto");
+testValidGridTemplate("10px 20px 30px / 40px 50px 60px 70px",
+                      "\"a . b .\" \"c d . e\" \"f g h .\"",
+                      "\"a . b .\" 10px \"c d . e\" 20px \"f g h .\" 30px / 40px 50px 60px 70px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-invalid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-invalid.html
new file mode 100644
index 0000000000..366cdf4d88
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-invalid.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-template with invalid values</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#propdef-grid-template">
+<meta name="assert" content="grid-template supports only the grammar `none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?`.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+
+test_invalid_value("grid-template", 'auto');
+test_invalid_value("grid-template", 'none none');
+test_invalid_value("grid-template", 'none []');
+test_invalid_value("grid-template", '10px');
+test_invalid_value("grid-template", '20%');
+test_invalid_value("grid-template", '5fr');
+test_invalid_value("grid-template", '[a]');
+test_invalid_value("grid-template", '[a] 10px');
+test_invalid_value("grid-template", '[a] 10px []');
+test_invalid_value("grid-template", '[]');
+test_invalid_value("grid-template", '10px "a"');
+test_invalid_value("grid-template", '[] 10px "a"');
+test_invalid_value("grid-template", '10px [] "a"');
+test_invalid_value("grid-template", '[] [] "a"');
+test_invalid_value("grid-template", '"a" none');
+test_invalid_value("grid-template", '"a" 10px 10px');
+test_invalid_value("grid-template", '"a" [a] 10px');
+test_invalid_value("grid-template", '"a" [a] 10px [a]');
+test_invalid_value("grid-template", '"a" [a] [a] 10px');
+test_invalid_value("grid-template", '"a" 10px [a] [a]');
+test_invalid_value("grid-template", '"a" [a] [a]');
+test_invalid_value("grid-template", '[a] "a" [a] [a]');
+test_invalid_value("grid-template", '"a" "a" [a] [a]');
+test_invalid_value("grid-template", '"a" [a] [a] / none');
+test_invalid_value("grid-template", '"a" "a" [a] [a] / none');
+test_invalid_value("grid-template", 'none / "a"');
+test_invalid_value("grid-template", '"a" / none');
+test_invalid_value("grid-template", 'none / [] "a"');
+test_invalid_value("grid-template", 'none / "a" []');
+test_invalid_value("grid-template", 'none / "a" [] 10px');
+
+// FIXME: add more values to test full syntax
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-valid.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-valid.html
new file mode 100644
index 0000000000..f26ef33067
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand-valid.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: parsing grid-template with valid values</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#propdef-grid-template">
+<meta name="assert" content="grid-template supports the grammar `none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?`.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+
+test_valid_value("grid-template", 'none');
+test_valid_value("grid-template", 'none / none', 'none');
+test_valid_value("grid-template", 'auto / auto');
+test_valid_value("grid-template", 'none / [a] 0px');
+test_valid_value("grid-template", 'none / [] 0px', 'none / 0px');
+test_valid_value("grid-template", '[a] 10px / auto');
+test_valid_value("grid-template", '[a] 10px / none');
+test_valid_value("grid-template", '[] 10px [] / [] auto []', '10px / auto');
+test_valid_value("grid-template", '[a] "a" 10px');
+test_valid_value("grid-template", '[a] "a" 10px []', '[a] "a" 10px');
+test_valid_value("grid-template", '"a" 10px');
+test_valid_value("grid-template", '[] "a" 10px', '"a" 10px');
+test_valid_value("grid-template", '[a] "a" 10px [a]');
+test_valid_value("grid-template", '"a"');
+test_valid_value("grid-template", '"a" auto', '"a"');
+test_valid_value("grid-template", '"a a a"', '"a a a"');
+test_valid_value("grid-template", '"a" / 10px');
+test_valid_value("grid-template", '"a" / 20%');
+test_valid_value("grid-template", '"a" / 5fr');
+test_valid_value("grid-template", '[a] "a"');
+test_valid_value("grid-template", '[a] "a" [a]');
+test_valid_value("grid-template", '[] "a"', '"a"');
+test_valid_value("grid-template", '"a" [] [] "b"', '"a" "b"');
+test_valid_value("grid-template", '"a" [] "b"', '"a" "b"');
+test_valid_value("grid-template", '"a" [a] [b] "b"', '"a" [a b] "b"');
+test_valid_value("grid-template", '"a" [a] "b"');
+test_valid_value("grid-template", '"a" / 0', '"a" / 0px');
+test_valid_value("grid-template", '"a" 10px / 10px');
+test_valid_value("grid-template", '"a" calc(100% - 10px) / calc(10px)');
+test_valid_value("grid-template", '"a" [a] "b" 10px');
+test_valid_value("grid-template", '"a" [a] "b" 10px [a]');
+test_valid_value("grid-template", '"a" [a] [a] "b" 10px', '"a" [a a] "b" 10px');
+test_valid_value("grid-template", '"a" [a] [] "b" 10px', '"a" [a] "b" 10px');
+test_valid_value("grid-template", '"a" 10px [a] "b" [a]');
+test_valid_value("grid-template", '"a" [a] "b" [a]');
+test_valid_value("grid-template", '[a] "a" [a] "b" [a]');
+test_valid_value("grid-template", '"a" "a" [a] "b" [a]');
+test_valid_value("grid-template", '"a" [a] "b" [a] / 0', '"a" [a] "b" [a] / 0px');
+test_valid_value("grid-template", '"a" "a" [a] [a] "b" / auto', '"a" "a" [a a] "b" / auto');
+test_valid_value("grid-template", '"a" auto [a] "b" auto [b] / 10px', '"a" [a] "b" [b] / 10px');
+
+// FIXME: add more values to test full syntax
+
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand.html b/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand.html
new file mode 100644
index 0000000000..b9165359a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/parsing/grid-template-shorthand.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: grid-template sets longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template">
+<meta name="assert" content="grid-template supports the full grammar 'none | [ <grid-template-rows> / <grid-template-columns> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_shorthand_value('grid-template', 'none', {
+  'grid-template-rows': 'none',
+  'grid-template-columns': 'none',
+  'grid-template-areas': 'none'
+});
+
+// <grid-template-rows> / <grid-template-columns>
+test_shorthand_value('grid-template', '10px / 20%', {
+  'grid-template-rows': '10px',
+  'grid-template-columns': '20%',
+  'grid-template-areas': 'none'
+});
+
+test_shorthand_value('grid-template', 'fit-content(calc(-0.5em + 10px)) / fit-content(calc(0.5em + 10px))', {
+  'grid-template-rows': 'fit-content(calc(-0.5em + 10px))',
+  'grid-template-columns': 'fit-content(calc(0.5em + 10px))',
+  'grid-template-areas': 'none'
+});
+
+// [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
+test_shorthand_value('grid-template',
+                     '[header-top] "a a a"     [header-bottom]' +
+                     '  [main-top] "b b b" 1fr [main-bottom]' +
+                     '           / auto 1fr auto', {
+  'grid-template-rows': '[header-top] auto [header-bottom main-top] 1fr [main-bottom]',
+  'grid-template-columns': 'auto 1fr auto',
+  'grid-template-areas': '"a a a" "b b b"'
+});
+
+test_shorthand_value('grid-template',
+                     '  "a a a"' +
+                     '  "b b b" 1fr' +
+                     '/ auto 1fr auto', {
+  'grid-template-rows': 'auto 1fr',
+  'grid-template-columns': 'auto 1fr auto',
+  'grid-template-areas': '"a a a" "b b b"'
+});
+
+test_shorthand_value('grid-template',
+                     ' [] "a a a"     []' +
+                     ' [] "b b b" 1fr []' +
+                     '  / [] auto 1fr [] auto []', {
+  'grid-template-rows': 'auto 1fr',
+  'grid-template-columns': 'auto 1fr auto',
+  'grid-template-areas': '"a a a" "b b b"'
+});
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-auto-flow-sparse-001.html b/testing/web-platform/tests/css/css-grid/placement/grid-auto-flow-sparse-001.html
new file mode 100644
index 0000000000..373371ac2b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/placement/grid-auto-flow-sparse-001.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<title>CSS Grid: auto-placement with 'grid-auto-flow: column'</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-flow">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-placement-algo">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=384099">
+<meta name="assert" content="Check that the auto-placement algorithm is sparse by default.">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/fonts/ahem.css">
+
+<style>
+.grid {
+    grid-template-columns: 50px 100px 150px 200px;
+    grid-template-rows: 50px 100px 150px 200px;
+}
+
+.unconstrainedContainer {
+    /* For accurate x / y offset. */
+    position: relative;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="unconstrainedContainer">
+    <div class="grid">
+        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="150" data-offset-y="0" data-expected-width="350" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="50" data-offset-y="50" data-expected-width="250" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0" data-offset-y="150" data-expected-width="150" data-expected-height="150"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="150" data-expected-width="150" data-expected-height="150"></div>
+    </div>
+</div>
+
+<div class="unconstrainedContainer">
+    <div class="grid">
+        <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="150" data-offset-y="0" data-expected-width="350" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="150" data-offset-y="50" data-expected-width="150" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="300" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150"></div>
+        <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning3" data-offset-x="50" data-offset-y="150" data-expected-width="450" data-expected-height="350"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="300" data-expected-width="50" data-expected-height="200"></div>
+    </div>
+</div>
+
+<div class="unconstrainedContainer">
+    <div class="grid">
+        <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="150"></div>
+    </div>
+</div>
+
+<div class="unconstrainedContainer">
+    <div class="grid">
+        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150"></div>
+        <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+        <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="150"></div>
+    </div>
+</div>
+
+<div class="unconstrainedContainer">
+    <div class="grid gridAutoFlowColumnSparse">
+        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="350"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="250"></div>
+        <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="150"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="150" data-expected-width="150" data-expected-height="150"></div>
+    </div>
+</div>
+
+<div class="unconstrainedContainer">
+    <div class="grid gridAutoFlowColumnSparse">
+        <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="350"></div>
+        <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="150"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="300" data-expected-width="100" data-expected-height="200"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSpanning3AutoColumnSpanning2" data-offset-x="150" data-offset-y="50" data-expected-width="350" data-expected-height="450"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="300" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
+    </div>
+</div>
+
+<div class="unconstrainedContainer">
+    <div class="grid gridAutoFlowColumnSparse">
+        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+        <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="50" data-expected-width="150" data-expected-height="100"></div>
+    </div>
+</div>
+
+<div class="unconstrainedContainer">
+    <div class="grid gridAutoFlowColumnSparse">
+        <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div>
+        <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+        <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+        <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="50" data-expected-width="150" data-expected-height="100"></div>
+    </div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-auto-placement-implicit-tracks-001.html b/testing/web-platform/tests/css/css-grid/placement/grid-auto-placement-implicit-tracks-001.html
new file mode 100644
index 0000000000..546336a6ce
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/placement/grid-auto-placement-implicit-tracks-001.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items auto-placement implicit tracks</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-placement-algo">
+<meta name="assert" content="This test checks that auto-placement works properly even when implicit tracks have been created during the first steps of the placement algorithm.">
+<style>
+.grid {
+    display: grid;
+    position: relative;
+    grid-auto-columns: 100px;
+    grid-auto-rows: 50px;
+    margin: 10px;
+}
+.gridAutoFlowColumn { grid-auto-flow: column; }
+.gridAutoFlowColumnDense { grid-auto-flow: column dense; }
+.gridAutoFlowRowDense { grid-auto-flow: row dense; }
+.grid > div { border: solid; }
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+<div id="log"></div>
+
+<div class="grid">
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">i1</div>
+  <div style="grid-column: span 2; grid-row: span 2;"
+      data-offset-x="0" data-offset-y="50" data-expected-width="200" data-expected-height="100">i2</div>
+  <div data-offset-x="0" data-offset-y="150" data-expected-width="100" data-expected-height="50">i3</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="50">i4</div>
+</div>
+
+<div class="grid">
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">i1</div>
+  <div style="grid-column: 1; grid-row: span 2;"
+      data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="100">i2</div>
+  <div data-offset-x="0" data-offset-y="150" data-expected-width="100" data-expected-height="50">i3</div>
+  <div data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="50">i4</div>
+</div>
+
+<div class="grid">
+  <div data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50">i1</div>
+  <div style="grid-column: span 2; grid-row: 1;"
+      data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50">i2</div>
+  <div data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50">i3</div>
+  <div data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50">i4</div>
+</div>
+
+<div class="grid gridAutoFlowRowDense">
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">i1</div>
+  <div style="grid-column: span 2; grid-row: span 2;"
+      data-offset-x="0" data-offset-y="50" data-expected-width="200" data-expected-height="100">i2</div>
+  <div data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50">i3</div>
+  <div data-offset-x="0" data-offset-y="150" data-expected-width="100" data-expected-height="50">i4</div>
+</div>
+
+<div class="grid gridAutoFlowRowDense">
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">i1</div>
+  <div style="grid-column: 1; grid-row: span 2;"
+      data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="100">i2</div>
+  <div data-offset-x="0" data-offset-y="150" data-expected-width="100" data-expected-height="50">i3</div>
+  <div data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="50">i4</div>
+</div>
+
+<div class="grid gridAutoFlowRowDense">
+  <div data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50">i1</div>
+  <div style="grid-column: span 2; grid-row: 1;"
+      data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50">i2</div>
+  <div data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50">i3</div>
+  <div data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50">i4</div>
+</div>
+
+<div class="grid gridAutoFlowColumn">
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">i1</div>
+  <div style="grid-column: span 2; grid-row: span 2;"
+      data-offset-x="100" data-offset-y="0" data-expected-width="200" data-expected-height="100">i2</div>
+  <div data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="50">i3</div>
+  <div data-offset-x="300" data-offset-y="50" data-expected-width="100" data-expected-height="50">i4</div>
+</div>
+
+<div class="grid gridAutoFlowColumn">
+  <div data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50">i1</div>
+  <div style="grid-column: 1; grid-row: span 2;"
+      data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100">i2</div>
+  <div data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50">i3</div>
+  <div data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50">i4</div>
+</div>
+
+<div class="grid gridAutoFlowColumn">
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">i1</div>
+  <div style="grid-column: span 2; grid-row: 1;"
+      data-offset-x="100" data-offset-y="0" data-expected-width="200" data-expected-height="50">i2</div>
+  <div data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="50">i3</div>
+  <div data-offset-x="400" data-offset-y="0" data-expected-width="100" data-expected-height="50">i4</div>
+</div>
+
+<div class="grid gridAutoFlowColumnDense">
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">i1</div>
+  <div style="grid-column: span 2; grid-row: span 2;"
+      data-offset-x="100" data-offset-y="0" data-expected-width="200" data-expected-height="100">i2</div>
+  <div data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50">i3</div>
+  <div data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="50">i4</div>
+</div>
+
+<div class="grid gridAutoFlowColumnDense">
+  <div data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50">i1</div>
+  <div style="grid-column: 1; grid-row: span 2;"
+      data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100">i2</div>
+  <div data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50">i3</div>
+  <div data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50">i4</div>
+</div>
+
+<div class="grid gridAutoFlowColumnDense">
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">i1</div>
+  <div style="grid-column: span 2; grid-row: 1;"
+      data-offset-x="100" data-offset-y="0" data-expected-width="200" data-expected-height="50">i2</div>
+  <div data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="50">i3</div>
+  <div data-offset-x="400" data-offset-y="0" data-expected-width="100" data-expected-height="50">i4</div>
+</div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-container-change-grid-tracks-recompute-child-positions-001.html b/testing/web-platform/tests/css/css-grid/placement/grid-container-change-grid-tracks-recompute-child-positions-001.html
new file mode 100644
index 0000000000..a2485142e1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/placement/grid-container-change-grid-tracks-recompute-child-positions-001.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Grid: Grid tracks changes recomputed child positions.</title>
+<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid/#placement"/>
+<meta name="assert" content="Checks that grid-template-{rows|columns} dynamic updates recomputes the positions of automatically placed grid items."/>
+<link rel="issue" href="https://crbug.com/248151"/>
+<link href="/css/support/grid.css" rel="stylesheet"/>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/>
+<style>
+.grid {
+    grid-auto-flow: row dense;
+    grid-auto-rows: 5px;
+    grid-auto-columns: 5px;
+}
+#firstGridItem {
+    grid-row: auto;
+    grid-column: 1;
+}
+
+#secondGridItem {
+    grid-row: 1;
+    grid-column: auto;
+}
+
+#thirdGridItem {
+    grid-row: auto;
+    grid-column: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script>
+function testGridDefinitions(gridTemplateRows, gridTemplateColumns, gridTemplateAreas, firstGridItemData, secondGridItemData, thirdGridItemData)
+{
+    var gridElement = document.getElementsByClassName("grid")[0];
+    gridElement.style.gridTemplateRows = gridTemplateRows;
+    gridElement.style.gridTemplateColumns = gridTemplateColumns;
+    gridElement.style.gridTemplateAreas = gridTemplateAreas;
+
+    var firstGridItem = document.getElementById("firstGridItem");
+    firstGridItem.setAttribute("data-expected-width", firstGridItemData.width);
+    firstGridItem.setAttribute("data-expected-height", firstGridItemData.height);
+    firstGridItem.setAttribute("data-offset-x", firstGridItemData.x);
+    firstGridItem.setAttribute("data-offset-y", firstGridItemData.y);
+
+    var secondGridItem = document.getElementById("secondGridItem");
+    secondGridItem.setAttribute("data-expected-width", secondGridItemData.width);
+    secondGridItem.setAttribute("data-expected-height", secondGridItemData.height);
+    secondGridItem.setAttribute("data-offset-x", secondGridItemData.x);
+    secondGridItem.setAttribute("data-offset-y", secondGridItemData.y);
+
+    var thirdGridItem = document.getElementById("thirdGridItem");
+    thirdGridItem.setAttribute("data-expected-width", thirdGridItemData.width);
+    thirdGridItem.setAttribute("data-expected-height", thirdGridItemData.height);
+    thirdGridItem.setAttribute("data-offset-x", thirdGridItemData.x);
+    thirdGridItem.setAttribute("data-offset-y", thirdGridItemData.y);
+
+    checkLayout(".grid", false);
+}
+
+function testChangingGridDefinitions()
+{
+    testGridDefinitions('10px 20px', '10px', '', { 'width': '10', 'height': '20', 'x': '0', 'y': '10' }, { 'width': '10', 'height': '10', 'x': '0', 'y': '0' }, { 'width': '10', 'height': '5', 'x': '0', 'y': '30' });
+    testGridDefinitions('10px', '10px', '"a"', { 'width': '10', 'height': '5', 'x': '0', 'y': '10' }, { 'width': '10', 'height': '10', 'x': '0', 'y': '0' }, { 'width': '10', 'height': '5', 'x': '0', 'y': '15' });
+    testGridDefinitions('10px', '10px', '"a ."', { 'width': '10', 'height': '5', 'x': '0', 'y': '10' }, { 'width': '10', 'height': '10', 'x': '0', 'y': '0' }, { 'width': '5', 'height': '10', 'x': '10', 'y': '0' });
+    testGridDefinitions('50px', '30px 40px', '', { 'width': '30', 'height': '5', 'x': '0', 'y': '50' }, { 'width': '30', 'height': '50', 'x': '0', 'y': '0' }, { 'width': '40', 'height': '50', 'x': '30', 'y': '0' });
+    testGridDefinitions('50px', '60px', '', { 'width': '60', 'height': '5', 'x': '0', 'y': '50' }, { 'width': '60', 'height': '50', 'x': '0', 'y': '0' }, { 'width': '60', 'height': '5', 'x': '0', 'y': '55' });
+    testGridDefinitions('50px 100px 150px', '60px', '', { 'width': '60', 'height': '100', 'x': '0', 'y': '50' }, { 'width': '60', 'height': '50', 'x': '0', 'y': '0' }, { 'width': '60', 'height': '150', 'x': '0', 'y': '150' });
+
+    done();
+}
+
+</script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { testChangingGridDefinitions(); })">
+<div style="position: relative">
+    <div class="grid">
+        <div class="sizedToGridArea" id="firstGridItem"></div>
+        <div class="sizedToGridArea" id="secondGridItem"></div>
+        <div class="sizedToGridArea" id="thirdGridItem"></div>
+    </div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-container-change-named-grid-recompute-child-positions-001.html b/testing/web-platform/tests/css/css-grid/placement/grid-container-change-named-grid-recompute-child-positions-001.html
new file mode 100644
index 0000000000..d702d30b3b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/placement/grid-container-change-named-grid-recompute-child-positions-001.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Grid: Change named grid lines.</title>
+<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid/#placement"/>
+<meta name="assert" content="Checks that updating the named grid lines definitions in grid-template-{rows|columns} recomputes the positions of automatically placed grid items."/>
+<link rel="issue" href="https://crbug.com/248151"/>
+<link href="/css/support/grid.css" rel="stylesheet"/>
+<link href="/css/support/alignment.css" rel="stylesheet">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/>
+<style>
+.grid {
+    grid-auto-flow: row dense;
+}
+#firstGridItem {
+    grid-row: auto;
+    grid-column: column;
+}
+
+#secondGridItem {
+    grid-row: row;
+    grid-column: auto;
+}
+
+#thirdGridItem {
+    grid-row: auto;
+    grid-column: auto;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<script>
+function testGridDefinitions(gridTemplateRows, gridTemplateColumns, firstGridItemData, secondGridItemData, thirdGridItemData)
+{
+    var gridElement = document.getElementsByClassName("grid")[0];
+    gridElement.style.gridTemplateRows = gridTemplateRows;
+    gridElement.style.gridTemplateColumns = gridTemplateColumns;
+
+    var firstGridItem = document.getElementById("firstGridItem");
+    firstGridItem.setAttribute("data-expected-width", firstGridItemData.width);
+    firstGridItem.setAttribute("data-expected-height", firstGridItemData.height);
+    firstGridItem.setAttribute("data-offset-x", firstGridItemData.x);
+    firstGridItem.setAttribute("data-offset-y", firstGridItemData.y);
+
+    var secondGridItem = document.getElementById("secondGridItem");
+    secondGridItem.setAttribute("data-expected-width", secondGridItemData.width);
+    secondGridItem.setAttribute("data-expected-height", secondGridItemData.height);
+    secondGridItem.setAttribute("data-offset-x", secondGridItemData.x);
+    secondGridItem.setAttribute("data-offset-y", secondGridItemData.y);
+
+    var thirdGridItem = document.getElementById("thirdGridItem");
+    thirdGridItem.setAttribute("data-expected-width", thirdGridItemData.width);
+    thirdGridItem.setAttribute("data-expected-height", thirdGridItemData.height);
+    thirdGridItem.setAttribute("data-offset-x", thirdGridItemData.x);
+    thirdGridItem.setAttribute("data-offset-y", thirdGridItemData.y);
+
+    checkLayout(".grid", false);
+}
+
+function testChangingGridDefinitions()
+{
+    testGridDefinitions('10px [row] 20px', '30px [column]', { 'width': '0', 'height': '10', 'x': '30', 'y': '0' }, { 'width': '30', 'height': '20', 'x': '0', 'y': '10' }, { 'width': '30', 'height': '10', 'x': '0', 'y': '0' });
+    testGridDefinitions('10px [row] 20px', '30px', { 'width': '0', 'height': '10', 'x': '30', 'y': '0' }, { 'width': '30', 'height': '20', 'x': '0', 'y': '10' }, { 'width': '30', 'height': '10', 'x': '0', 'y': '0' });
+    testGridDefinitions('10px 20px [row]', '30px', { 'width': '0', 'height': '10', 'x': '30', 'y': '0' }, { 'width': '30', 'height': '0', 'x': '0', 'y': '30' }, { 'width': '30', 'height': '10', 'x': '0', 'y': '0' });
+    testGridDefinitions('10px 20px [row]', '30px [column]', { 'width': '0', 'height': '10', 'x': '30', 'y': '0' }, { 'width': '30', 'height': '0', 'x': '0', 'y': '30' }, { 'width': '30', 'height': '10', 'x': '0', 'y': '0' });
+    done();
+}
+
+</script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { testChangingGridDefinitions(); })">
+<div style="position: relative">
+    <div class="grid justifyContentStart">
+        <div class="sizedToGridArea" id="firstGridItem"></div>
+        <div class="sizedToGridArea" id="secondGridItem"></div>
+        <div class="sizedToGridArea" id="thirdGridItem"></div>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-layout-grid-span.html b/testing/web-platform/tests/css/css-grid/placement/grid-layout-grid-span.html
new file mode 100644
index 0000000000..21aad99708
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/placement/grid-layout-grid-span.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Grid Layout Test: grid span</title>
+    <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+    <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-span">
+    <link rel="match" href="../reference/grid-layout-basic-ref.html">
+    <meta name="assert" content="the layout should behave the same as reference.">
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+      #caseTitle {
+        margin: 10px;
+        height: 40px;
+      }
+      #grid {
+        width: 150px;
+        background: #eee;
+        display: grid;
+        grid-template-columns: 50px 50px 50px;
+      }
+      .a {
+        background: blue;
+        grid-column: 1 / span 2;
+        grid-row: 1;
+      }
+      .b {
+        background: yellow;
+        grid-column: 3;
+        grid-row: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+    <div id="grid">
+      <div class="a">&nbsp;</div>
+      <div class="b">&nbsp;</div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-layout-lines-shorthands.html b/testing/web-platform/tests/css/css-grid/placement/grid-layout-lines-shorthands.html
new file mode 100644
index 0000000000..756e08c447
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/placement/grid-layout-lines-shorthands.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Grid Layout Test: grid lines shorthands</title>
+    <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+    <link rel="help" href="http://www.w3.org/TR/css-grid-1/#common-uses-named-lines">
+    <link rel="match" href="../reference/grid-layout-basic-ref.html">
+    <meta name="assert" content="the layout should behave the same as reference.">
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+      #caseTitle {
+        margin: 10px;
+        height: 40px;
+      }
+      #grid {
+        width: 150px;
+        background: #eee;
+        display: grid;
+        grid-template-columns: [left] 100px [center] 50px [right];
+      }
+      .a {
+        background: blue;
+        grid-column: left / center;
+      }
+      .b {
+        background: yellow;
+        grid-column: center / right;
+      }
+    </style>
+  </head>
+  <body>
+    <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+    <div id="grid">
+      <div class="a">&nbsp;</div>
+      <div class="b">&nbsp;</div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-layout-lines.html b/testing/web-platform/tests/css/css-grid/placement/grid-layout-lines.html
new file mode 100644
index 0000000000..62bfc8d7bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/placement/grid-layout-lines.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Grid Layout Test: grid lines</title>
+    <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+    <link rel="help" href="http://www.w3.org/TR/css-grid-1/#common-uses-named-lines">
+    <link rel="match" href="../reference/grid-layout-basic-ref.html">
+    <meta name="assert" content="the layout should behave the same as reference.">
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+      #caseTitle {
+        margin: 10px;
+        height: 40px;
+      }
+      #grid {
+        width: 150px;
+        background: #eee;
+        display: grid;
+        grid-template-columns: [left] 100px [center] 50px [right];
+      }
+      .a {
+        background: blue;
+        grid-column-start: left;
+        grid-column-end: center;
+      }
+      .b {
+        background: yellow;
+        grid-column-start: center;
+        grid-column-end: right;
+      }
+    </style>
+  </head>
+  <body>
+    <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+    <div id="grid">
+      <div class="a">&nbsp;</div>
+      <div class="b">&nbsp;</div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-layout-placement-shorthands.html b/testing/web-platform/tests/css/css-grid/placement/grid-layout-placement-shorthands.html
new file mode 100644
index 0000000000..be98679815
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/placement/grid-layout-placement-shorthands.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Grid Layout Test: placement shorthand</title>
+    <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+    <link rel="help" href="http://www.w3.org/TR/css-grid-1/#placement-shorthands">
+    <link rel="match" href="../reference/grid-layout-basic-ref.html">
+    <meta name="assert" content="the layout should behave the same as reference.">
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+      #caseTitle {
+        margin: 10px;
+        height: 40px;
+      }
+      #grid {
+        width: 150px;
+        background: #eee;
+        display: grid;
+        grid-template-columns: 50px 50px 50px;
+      }
+      .a {
+        background: blue;
+        grid-column: 1 / span 2;
+        grid-row: 1;
+      }
+      .b {
+        background: yellow;
+        grid-column: 3;
+        grid-row: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+    <div id="grid">
+      <div class="a">&nbsp;</div>
+      <div class="b">&nbsp;</div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-placement-items-spanning-multiple-rows-001.html b/testing/web-platform/tests/css/css-grid/placement/grid-placement-items-spanning-multiple-rows-001.html
new file mode 100644
index 0000000000..de6398e324
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/placement/grid-placement-items-spanning-multiple-rows-001.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Placement of grid items spanning multiple rows</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#auto-placement-algo" title="8.5. Grid Item Placement Algorithm">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1237036">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+.grid {
+  width: 100px;
+  display: grid;
+  background: red;
+  grid-auto-rows: 25px;
+  grid-template-columns: 50px 50px;
+}
+.grid > div {
+  background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="grid">
+  <div style="grid-row: span 4"></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-placement-items-spanning-multiple-rows-002.html b/testing/web-platform/tests/css/css-grid/placement/grid-placement-items-spanning-multiple-rows-002.html
new file mode 100644
index 0000000000..f055340a3a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/placement/grid-placement-items-spanning-multiple-rows-002.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Placement of grid items spanning multiple rows</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#auto-placement-algo" title="8.5. Grid Item Placement Algorithm">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1255298">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+.grid {
+  width: 100px;
+  height: 100px;
+  display: grid;
+  background: red;
+  grid-auto-rows: 5px;
+  grid-template-columns: repeat(4, 25px);
+}
+.grid > div {
+  background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="grid">
+  <div style="grid-row: span 7"></div>
+  <div style="grid-row: span 9"></div>
+  <div style="grid-row: span 11"></div>
+  <div style="grid-row: span 10"></div>
+  <div style="grid-row: span 10"></div>
+  <div style="grid-row: span 9"></div>
+  <div style="grid-row: span 10"></div>
+  <div style="grid-row: span 9"></div>
+  <div style="grid-row: span 3"></div>
+  <div style="grid-row: span 2"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-001.html b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-001.html
new file mode 100644
index 0000000000..12fdd78204
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid item placement mixing named grid areas and lines</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#line-placement">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-placement-slot">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#named-grid-area">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Line placement algorithm selects the first matching column when using a grid line name associated to several columns and no integer is specified within the custom-ident.">
+<style>
+.grid {
+    display: inline-grid;
+    background: red;
+    grid-template-columns: [C] 25px [C] 25px [C] 25px [C] 25px;
+    grid-auto-rows: 50px;
+    grid-template-areas: "A1 A2 A3 A4"
+                         ".  A2 A3 A4";
+}
+.grid > div { background: green; }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="grid">
+    <div style="grid-area: A1"></div>
+    <div style="grid-area: A2"></div>
+    <div style="grid-area: A3"></div>
+    <div style="grid-area: A4"></div>
+    <div style="grid-column: C; grid-row: 2;"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-002.html b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-002.html
new file mode 100644
index 0000000000..625401d7cf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-002.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid item placement with named line and auto repeat()</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#line-placement">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Grid placement algorithm is able to select the 1st line by name when the 1st track is defined with auto repeat().">
+<style>
+.grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  background: red;
+  grid-template-columns: [area-start] repeat(auto-fill, 10px) [area-end];
+  grid-template-rows: [area-start] repeat(auto-fill, 10px [area-start]) [area-end];
+}
+.grid > div {
+  grid-area: area;
+  background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="grid">
+  <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-003.html b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-003.html
new file mode 100644
index 0000000000..31173e0a45
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-003.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid item placement with named line and auto repeat()</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#line-placement">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Grid placement algorithm is able to select the right line when there is an auto repeat().">
+<style>
+.grid {
+  display: grid;
+  width: 300px;
+  height: 300px;
+  position: relative;
+  top: -200px;
+  left: -200px;
+  grid-template-columns: repeat(auto-fill, 100px 100px) [area-start] 100px [area-end];
+  grid-template-rows: repeat(auto-fill, 100px 100px [area-start]) [area-start] 100px [area-end];
+}
+.grid > div {
+  grid-area: area;
+  background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="grid">
+  <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-004.html b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-004.html
new file mode 100644
index 0000000000..c33b1a9ee9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-004.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid item placement with '&lt;integer&gt; && &lt;custom-ident&gt;' and auto repeat()</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#line-placement">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Grid placement algorithm is able to select the right line when using the '<integer> && <custom-ident>' syntax and there is an auto repeat().">
+<style>
+.grid {
+  display: grid;
+  width: 300px;
+  height: 300px;
+  grid-template-columns: [foo] repeat(auto-fill, 100px [foo]);
+  grid-template-rows: repeat(auto-fill, [foo] 100px);
+}
+.grid > div {
+  grid-area: 1 foo / 1 foo;
+  background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="grid">
+  <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-005.html b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-005.html
new file mode 100644
index 0000000000..20d9298955
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-005.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid item placement with implicit named line and auto repeat()</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#line-placement">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Grid placement algorithm is able to select the right line when defined implicitly with grid-template-areas.">
+<style>
+.grid {
+  display: grid;
+  width: 300px;
+  height: 300px;
+  grid-template-areas: "area";
+  grid-template-columns: repeat(auto-fill, 100px);
+  grid-template-rows: repeat(auto-fill, 100px) [area-end] 100px;
+}
+.grid > div {
+  grid-area: area;
+  background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="grid">
+  <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-006.html b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-006.html
new file mode 100644
index 0000000000..405858f73c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-006.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid item placement with implicit named line, '&lt;integer&gt; && &lt;custom-ident&gt;', and auto repeat()</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#line-placement">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Grid placement algorithm is able to select the right line when defined implicitly with grid-template-areas, referenced using the '<integer> && <custom-ident>' syntax, and with auto repeat().">
+<style>
+.grid {
+  display: grid;
+  width: 300px;
+  height: 300px;
+  margin-left: -100px;
+  margin-top: -100px;
+  grid-template-areas: ". ." ". foo";
+  grid-template-columns: repeat(auto-fill, 100px) [foo-start];
+  grid-template-rows: repeat(auto-fill, 100px) [foo-start];
+}
+.grid > div {
+  grid-area: 1 foo-start / 1 foo-start;
+  background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="grid">
+  <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-007.html b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-007.html
new file mode 100644
index 0000000000..4e6c4cceb5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-007.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid item placement with dynamically named grid lines</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#line-placement">
+<link rel="match" href="../../reference/ref-filled-green-300px-square.html">
+<meta name="assert" content="Grid item placement is updated when the names of the grid lines change dynamically.">
+<style>
+.container {
+  display: grid;
+  width: 300px;
+  height: 100px;
+  background: red;
+}
+.container::before {
+  content: "";
+  grid-area: main;
+  background: green;
+}
+.explicit {
+  grid-template-columns: [quux-start] 100% [quux-end];
+  grid-template-rows: [quux-start] 100% [quux-end];
+}
+.explicit.changed {
+  grid-template-columns: [main-start] 100% [main-end];
+  grid-template-rows: [main-start] 100% [main-end];
+}
+.auto-repeat {
+  grid-template-columns: repeat(auto-fill, [quux-start] 100% [quux-end]);
+  grid-template-rows: repeat(auto-fill, [quux-start] 100% [quux-end]);
+}
+.auto-repeat.changed {
+  grid-template-columns: repeat(auto-fill, [main-start] 100% [main-end]);
+  grid-template-rows: repeat(auto-fill, [main-start] 100% [main-end]);
+}
+.implicit {
+  grid-template-columns: 100%;
+  grid-template-rows: 100%;
+  grid-template-areas: "quux";
+}
+.implicit.changed {
+  grid-template-areas: "main";
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container explicit"></div>
+<div class="container auto-repeat"></div>
+<div class="container implicit"></div>
+<script>
+// Force layout
+document.body.offsetLeft;
+
+// Change the grid line names
+for (let container of document.querySelectorAll(".container")) {
+  container.classList.add("changed");
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-008.html b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-008.html
new file mode 100644
index 0000000000..6ee48448ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-008.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid item placement with inherited grid-template-areas</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#line-placement">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Grid placement algorithm is able to select the right line when defined implicitly with an inherited grid-template-areas.">
+<style>
+.wrapper {
+  grid-template-areas: "a b" "a c";
+}
+.grid {
+  display: grid;
+  grid-template-areas: inherit;
+  width: 100px;
+  height: 100px;
+  background: red;
+}
+.item {
+  background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="wrapper">
+  <div class="grid">
+    <div class="item" style="grid-area: a"></div>
+    <div class="item" style="grid-area: b"></div>
+    <div class="item" style="grid-area: c"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-009.html b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-009.html
new file mode 100644
index 0000000000..10cb140ebc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-009.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid item placement with non-inherited grid-template-areas</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#line-placement">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Checks that inheriting grid-template-columns and grid-template-rows doesn't also inherit grid-template-areas.">
+<style>
+.wrapper {
+  grid-template-areas: "area";
+}
+.grid {
+  display: grid;
+  width: 100px;
+  height: 100px;
+  grid-auto-columns: 0px 100%;
+  grid-auto-rows: 0px 100%;
+  grid-template-columns: inherit;
+  grid-template-rows: inherit;
+  background: red;
+}
+.item {
+  grid-area: area;
+  background: green;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="wrapper">
+  <div class="grid">
+    <div class="item"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/placement/grid-template-areas-must-keep-named-columns-order-001.html b/testing/web-platform/tests/css/css-grid/placement/grid-template-areas-must-keep-named-columns-order-001.html
new file mode 100644
index 0000000000..8b0736b87f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/placement/grid-template-areas-must-keep-named-columns-order-001.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-placement-slot">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-areas">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-column">
+<link rel="help" href="https://crbug.com/733577">
+<link rel="match" href="../reference/grid-template-areas-must-keep-named-columns-order-001-ref.html">
+<meta name="assert" content="A grid item located in a named line will be placed in the first one associated to that name"/>
+<style>
+.grid {
+  display: inline-grid;
+  background: grey;
+  grid-template-columns: [col] 50px [col] 50px [col] 50px [col] 50px;
+  grid-auto-rows: 50px;
+  grid-template-areas: "A . . .";
+}
+.grid > :nth-child(1) { background: magenta; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: green; }
+.grid > :nth-child(5) { background: black; }
+</style>
+<p>This test passes if the black item is positioned in the first column of the second row, since the spec states that we must select the first one among several equally named grid lines.</p>
+<div class="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div style="grid-column: col"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/reference/anonymous-grid-items-001-ref.html b/testing/web-platform/tests/css/css-grid/reference/anonymous-grid-items-001-ref.html
new file mode 100644
index 0000000000..20302c2f1a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/anonymous-grid-items-001-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<body>
+  <div>The test passes if it has the same output than the reference.</div>
+  <div>
+    <div>anonymous item</div>
+  </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/reference/display-grid-ref.html b/testing/web-platform/tests/css/css-grid/reference/display-grid-ref.html
new file mode 100644
index 0000000000..8008359a6b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/display-grid-ref.html
@@ -0,0 +1,64 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Grid Layout: Reference File</title>
+  <link rel="author" title="swain" href="mailto:swainet@126.com"/>
+  <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-17 -->
+  <style type="text/css">
+    #container {
+      position:relative;
+      width:400px;
+      height:100px;
+    }
+
+    .error {
+      position:absolute;
+      top:0;
+      left:0;
+      height:100%;
+      width:100%;
+      z-index:-1;
+    }
+
+    #table {
+      width:100%;
+      height:100%;
+      border-collapse:collapse;
+    }
+
+    #table td {
+      padding:0;
+      vertical-align:top;
+    }
+
+    #table td:first-child {
+      width:100px;
+    }
+
+    #table tr:last-child td {
+      height:30px;
+    }
+  </style>
+</head>
+<body>
+<p>Test passes if there are 4 green rectangles and no red.</p>
+
+<div id="container">
+  <div class="error">
+    <table id="table">
+      <tbody>
+      <tr>
+        <td style="background-color:green">cell1</td>
+        <td style="background-color:limegreen">cell2</td>
+      </tr>
+      <tr>
+        <td style="background-color:limegreen">cell3</td>
+        <td style="background-color:green">cell4</td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/reference/display-inline-grid-ref.html b/testing/web-platform/tests/css/css-grid/reference/display-inline-grid-ref.html
new file mode 100644
index 0000000000..422185a8e3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/display-inline-grid-ref.html
@@ -0,0 +1,62 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS Grid Layout: Reference File</title>
+  <link rel="author" title="swain" href="mailto:swainet@126.com"/>
+  <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-17 -->
+  <style type="text/css">
+    #container {
+      position:relative;
+    }
+
+    #table {
+      width:400px;
+      height:100px;
+      border-collapse:collapse;
+    }
+
+    #table td {
+      padding:0;
+      vertical-align:top;
+    }
+
+    #table td:first-child {
+      width:100px;
+    }
+
+    #table tr:last-child td {
+      height:30px;
+    }
+
+    #table-wrapper {
+      display:inline-block;
+      clear:right;
+    }
+
+    span {
+      vertical-align:top;
+    }
+  </style>
+</head>
+<body>
+<p>Test passes if there are 4 green rectangles and no red.</p>
+
+<div id="container">
+  <div id="table-wrapper">
+    <table id="table">
+      <tbody>
+      <tr>
+        <td style="background-color:green">cell1</td>
+        <td style="background-color:limegreen">cell2</td>
+      </tr>
+      <tr>
+        <td style="background-color:limegreen">cell3</td>
+        <td style="background-color:green">cell4</td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+  <span>Inline</span>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/reference/flex-item-grid-container-percentage-rows-001-ref.html b/testing/web-platform/tests/css/css-grid/reference/flex-item-grid-container-percentage-rows-001-ref.html
new file mode 100644
index 0000000000..1f4b23952e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/flex-item-grid-container-percentage-rows-001-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<style>
+.wrapper {
+  width: 200px;
+  border: 5px solid;
+}
+
+.wrapper > div {
+  height: 100px;
+}
+
+.magenta {
+  background: magenta;
+}
+
+.cyan {
+  background: cyan;
+}
+</style>
+
+<p>Test passes if you see a 200x200 box with top half cyan and bottom half magenta.</p>
+
+<div class="wrapper">
+    <div class="cyan"></div>
+    <div class="magenta"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/reference/fr-unit-ref.html b/testing/web-platform/tests/css/css-grid/reference/fr-unit-ref.html
new file mode 100644
index 0000000000..e7999ae7d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/fr-unit-ref.html
@@ -0,0 +1,63 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS3 Grid Layout: Reference File</title>
+  <link rel="author" title="swain" href="mailto:swainet@126.com"/>
+  <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-22 -->
+  <style type="text/css">
+    #container {
+      position:relative;
+      width:400px;
+      height:100px;
+    }
+
+    .error {
+      position:absolute;
+      top:0;
+      left:0;
+      height:100%;
+      width:100%;
+      z-index:-1;
+    }
+
+    #table {
+      width:100%;
+      height:100%;
+      border-collapse:collapse;
+    }
+
+    #table td {
+      padding:0;
+      vertical-align:top;
+    }
+
+    #table td:first-child {
+      width:100px;
+    }
+
+    #table tr:first-child td {
+      height:30px;
+    }
+  </style>
+</head>
+<body>
+<p>Test passes if there is a green square and no red.</p>
+
+<div id="container">
+  <div class="error">
+    <table id="table">
+      <tbody>
+      <tr>
+        <td>cell1</td>
+        <td>cell2</td>
+      </tr>
+      <tr>
+        <td>cell3</td>
+        <td style="background-color:green">cell4</td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/reference/fr-unit-with-percentage-ref.html b/testing/web-platform/tests/css/css-grid/reference/fr-unit-with-percentage-ref.html
new file mode 100644
index 0000000000..e7999ae7d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/fr-unit-with-percentage-ref.html
@@ -0,0 +1,63 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>CSS3 Grid Layout: Reference File</title>
+  <link rel="author" title="swain" href="mailto:swainet@126.com"/>
+  <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-22 -->
+  <style type="text/css">
+    #container {
+      position:relative;
+      width:400px;
+      height:100px;
+    }
+
+    .error {
+      position:absolute;
+      top:0;
+      left:0;
+      height:100%;
+      width:100%;
+      z-index:-1;
+    }
+
+    #table {
+      width:100%;
+      height:100%;
+      border-collapse:collapse;
+    }
+
+    #table td {
+      padding:0;
+      vertical-align:top;
+    }
+
+    #table td:first-child {
+      width:100px;
+    }
+
+    #table tr:first-child td {
+      height:30px;
+    }
+  </style>
+</head>
+<body>
+<p>Test passes if there is a green square and no red.</p>
+
+<div id="container">
+  <div class="error">
+    <table id="table">
+      <tbody>
+      <tr>
+        <td>cell1</td>
+        <td>cell2</td>
+      </tr>
+      <tr>
+        <td>cell3</td>
+        <td style="background-color:green">cell4</td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-2x2-blue-yellow-lime-magenta.html b/testing/web-platform/tests/css/css-grid/reference/grid-2x2-blue-yellow-lime-magenta.html
new file mode 100644
index 0000000000..1ea45f8585
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/grid-2x2-blue-yellow-lime-magenta.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Reference file 2x2 grid and cells with the following colors: blue, yellow, lime and magenta</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  div {
+    font: 50px/1 Ahem;
+  }
+
+  #blue {
+    color: blue;
+  }
+
+  #yellow {
+    color: yellow;
+  }
+
+  #lime {
+    color: lime;
+  }
+
+  #magenta {
+    color: magenta;
+  }
+</style>
+<p>Test passes if there are four filled squares with the same size and <strong>no red</strong>.</p>
+<p>Blue and yellow squares in the first line; lime and magenta squares in the second line (exactly in this order).</p>
+
+<div>
+  <span id="blue">B</span><span id="yellow">Y</span>
+  <br />
+  <span id="lime">L</span><span id="magenta">M</span>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-auto-repeat-multiple-values-001-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-auto-repeat-multiple-values-001-ref.html
new file mode 100644
index 0000000000..0b8ef6d39b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/grid-auto-repeat-multiple-values-001-ref.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>CSS Grid Layout Test: Auto Repaeat with Multiple Tracks and Gutters</title>
+    <link rel="author" title="Yu Shen" href="shenyu.tcv@gmail.com">
+    <style>
+        .match-container {
+            border: solid thick black;
+            position: relative;
+            margin: 10px;
+        }
+
+        .column {
+            width: 300px;
+        }
+
+        .row {
+            width: min-content;
+            height: 300px;
+        }
+
+        .item {
+            background: lime;
+            width: 50px;
+            height: 50px;
+        }
+
+        .column-second {
+            position: absolute;
+            top: 0;
+            left: 150px;
+        }
+
+        .row-second {
+            position: absolute;
+            top: 150px;
+            left: 0px;
+        }
+    </style>
+</head>
+
+<body>
+    <p>The test passes if it has the same visual effect as reference.</p>
+    <div class="match-container column">
+        <div class="item"></div>
+        <div class="item column-second"></div>
+    </div>
+    <div class="match-container row">
+        <div class="item"></div>
+        <div class="item row-second"></div>
+    </div>
+</body>
+
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-block-axis-alignment-auto-margins-008-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-block-axis-alignment-auto-margins-008-ref.html
new file mode 100644
index 0000000000..474f16b5fa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/grid-block-axis-alignment-auto-margins-008-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Reference: Aligning grid items using 'auto' margins</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-columns: 100px;
+      grid-template-rows: 40% 60%;
+      height: 50vh;
+      width: auto;
+      align-items: center;
+  }
+  #item1 {
+      font: 20px/1 Ahem;
+      color: green;
+  }
+  #item2 {
+      font: 40px/1 Ahem;
+      color: blue;
+  }
+</style>
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div id="item1">XXX</div>
+    <div id="item2">XXXXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-container-auto-margins-scrollbars-001-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-container-auto-margins-scrollbars-001-ref.html
new file mode 100644
index 0000000000..9ce866acef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/grid-container-auto-margins-scrollbars-001-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<style>
+body {
+   position: relative;
+   height: 100vh;
+}
+.item1 {
+   width: fit-content;
+   margin: 0px auto;
+}
+.item2 {
+   position: absolute;
+   bottom: 0;
+   background-color: cyan;
+   height: 50px;
+   width: 100%;
+}
+</style>
+<div class="item1">item1</div>
+<div class="item2">item2</div>
diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-container-baseline-synthesized-001-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-container-baseline-synthesized-001-ref.html
new file mode 100644
index 0000000000..88faddd22a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/grid-container-baseline-synthesized-001-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Grid Reference</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+:root {
+  font: 20px/1 Ahem;
+}
+.container {
+  display:inline-block;
+  width: 60px;
+  height: 60px;
+  background: cyan;
+  box-sizing: border-box;
+  border: 3px solid black;
+}
+</style>
+X
+<div class="container"></div>
+<div class="container"></div>
+<div class="container"></div>
+<div class="container"></div>
+<br><br>
+X
+<div class="container"></div>
+<div class="container"></div>
+<div class="container"></div>
+<div class="container"></div>
+<br><br>
+X
+<div class="container"></div>
+<div class="container"></div>
+<div class="container"></div>
+<div class="container"></div>
+<br><br>
+X
+<div class="container"></div>
+<div class="container"></div>
+<div class="container"></div>
+<div class="container"></div>
+<br><br>
+X
+<div class="container"></div>
+<div class="container"></div>
+<div class="container"></div>
+<div class="container"></div>
diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-container-scrollbars-sizing-001-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-container-scrollbars-sizing-001-ref.html
new file mode 100644
index 0000000000..a090f79559
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/grid-container-scrollbars-sizing-001-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<style>
+html {
+   overflow-x: scroll;
+}
+.grid {
+   float: left;
+   overflow-y: scroll;
+   overflow-x: scroll;
+}
+.item {
+    background: lime;
+    width: 100px;
+    height: 100px;
+}
+</style>
+<p>This test passes if you see a 100x100px green box and scrollbars are disabled.</p>
+<div class="grid">
+    <div class="item">item</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-container-scrollbars-sizing-002-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-container-scrollbars-sizing-002-ref.html
new file mode 100644
index 0000000000..d95ab37f98
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/grid-container-scrollbars-sizing-002-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<style>
+.grid {
+  display: block;
+  background-color: grey;
+  overflow: scroll;
+}
+.inline-grid {
+  display: inline-block;
+  background-color: grey;
+  overflow: scroll;
+}
+.gridItem {
+  display: block;
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+.fit-content {
+  width: fit-content;
+}
+</style>
+<body>
+<div class='grid fit-content'>
+  <span class='gridItem'></span>
+</div>
+<div class='grid fit-content' style='overflow-y: hidden'>
+  <span class='gridItem'></span>
+</div>
+<div class='inline-grid fit-content'>
+  <span class='gridItem'></span>
+</div>
+<div class='inline-grid fit-content' style='overflow-y: hidden'>
+  <span class='gridItem'></span>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-different-gutters-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-different-gutters-ref.html
new file mode 100644
index 0000000000..57d27ff3aa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/grid-different-gutters-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Reference: a square with a green cross</title>
+<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk" />
+<style>
+    #grid {
+        width:200px;
+        height: 220px;
+        background-color: green;
+        position: relative;
+    }
+
+    #grid > div {
+        background-color: silver;
+        width: 90px;
+        height: 90px;
+        position: absolute;
+    }
+
+    #grid :nth-child(1) {
+        top: 0;
+        left: 0;
+    }
+
+    #grid :nth-child(2) {
+        top: 0;
+        left: 110px;
+    }
+
+    #grid :nth-child(3) {
+        top: 130px;
+        left: 0;
+    }
+
+    #grid :nth-child(4) {
+        top: 130px;
+        left: 110px;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-equal-gutters-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-equal-gutters-ref.html
new file mode 100644
index 0000000000..caea89a8be
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/grid-equal-gutters-ref.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Reference: a square with a green cross</title>
+<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk" />
+<style>
+    #grid {
+        width:200px;
+        height: 200px;
+        background-color: green;
+        position: relative;
+    }
+
+    #grid > div {
+        background-color: silver;
+        width: 90px;
+        height: 90px;
+        position: absolute;
+    }
+
+    #grid :nth-child(1) {
+        top: 0;
+        left: 0;
+    }
+
+    #grid :nth-child(2) {
+        top: 0;
+        left: 110px;
+    }
+
+    #grid :nth-child(3) {
+        top: 110px;
+        left: 0;
+    }
+
+    #grid :nth-child(4) {
+        top: 110px;
+        left: 110px;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html b/testing/web-platform/tests/css/css-grid/reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html
new file mode 100644
index 0000000000..e3b19211d4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/grid-filled-blue-yellow-green-overlapped-100px-squares.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Reference file 3 overlapped squares the following colors: blue, yellow and green</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+  #main {
+    position: relative;
+  }
+
+  #main div {
+    width: 100px;
+    height: 100px;
+  }
+
+  .blue {
+    background-color: blue;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+  }
+
+  .yellow {
+    background-color: yellow;
+    position: absolute;
+    left: 25px;
+    top: 25px;
+  }
+
+  .green {
+    background-color: green;
+    position: absolute;
+    left: 50px;
+    top: 50px;
+  }
+</style>
+<p>Test passes if there are 3 filled squares with the same size, and <strong>green</strong> is overlapping <strong>yellow</strong> which is overlapping <strong>blue</strong>.</p>
+
+<div id="main">
+  <div class="blue"></div>
+  <div class="yellow"></div>
+  <div class="green"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-first-letter-green-margin-no-collapse-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-first-letter-green-margin-no-collapse-ref.html
new file mode 100644
index 0000000000..cf3c6f28b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/grid-first-letter-green-margin-no-collapse-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Reference file text first letter should be green and margins do not collapse</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+  p {
+    /* Prevent collapsing body and paragraph margins. */
+    float: left;
+  }
+
+  .green {
+    color: green;
+  }
+</style>
+<p>
+  <span class="green">T</span>he <strong>first letter</strong> of this paragraph, and only that one, should be <strong>green</strong>.
+  In addition, body and paragraph margins should <strong>not collapse</strong>.
+</p>
diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-inline-axis-alignment-auto-margins-008-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-inline-axis-alignment-auto-margins-008-ref.html
new file mode 100644
index 0000000000..d5f993d051
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/grid-inline-axis-alignment-auto-margins-008-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Reference: Aligning grid items using 'auto' margins</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-columns: 40% 60%;
+      grid-template-rows: 100px;
+      height: 200px;
+      width: auto;
+      justify-items: center;
+      align-items: start;
+  }
+  #item1 {
+      font: 20px/1 Ahem;
+      color: green;
+  }
+  #item2 {
+      font: 40px/1 Ahem;
+      color: blue;
+  }
+</style>
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div id="item1">XXX</div>
+    <div id="item2">XXXXX</div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-inline-baseline-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-inline-baseline-ref.html
new file mode 100644
index 0000000000..dd8fa7a3a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/grid-inline-baseline-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<p>Test passes if the text is aligned.</p>
+<div style="writing-mode: vertical-lr; text-orientation: sideways;">
+  before
+  <div style="display: inline-block; background: green; width: 100px; height: 50px;">grid</div>
+  after
+</div>
+
diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-item-script-001-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-item-script-001-ref.html
new file mode 100644
index 0000000000..2574678a8b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/grid-item-script-001-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<div style="background: grey;">Test passes if it doesn't crash.</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-layout-auto-tracks-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-layout-auto-tracks-ref.html
new file mode 100644
index 0000000000..9f2f91cf7f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/grid-layout-auto-tracks-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Grid Layout Reference</title>
+    <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+        border: 0 none;
+      }
+      #caseTitle {
+        margin: 10px;
+        height: 40px;
+      }
+      #grid {
+        margin: 0;
+        width: 300px;
+      }
+      .a {
+        background: blue;
+        width: 100px;
+        float: left;
+      }
+      .b {
+        background: yellow;
+        width: 50px;
+        float: left;
+      }
+      .c {
+        background: pink;
+        width: 100px;
+        clear: both;
+        float: left;
+      }
+    </style>
+  </head>
+  <body>
+    <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+    <div id="grid">
+      <div class="a">&nbsp;</div>
+      <div class="b">&nbsp;</div>
+      <div class="c">&nbsp;</div>
+    </div>
+  </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-layout-basic-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-layout-basic-ref.html
new file mode 100644
index 0000000000..39a84ca498
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/grid-layout-basic-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Grid Layout Reference</title>
+    <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+        border: 0 none;
+      }
+      #caseTitle {
+        margin: 10px;
+        height: 40px;
+      }
+      #grid {
+        margin: 0;
+        width: 150px;
+      }
+      .a {
+        background: blue;
+        width: 100px;
+        float:left
+      }
+      .b {
+        background: yellow;
+        width: 50px;
+        float:left;
+      }
+    </style>
+  </head>
+  <body>
+    <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+    <div id="grid">
+      <div class="a">&nbsp;</div>
+      <div class="b">&nbsp;</div>
+    </div>
+  </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-layout-grid-in-grid-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-layout-grid-in-grid-ref.html
new file mode 100644
index 0000000000..bd6ebd710b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/grid-layout-grid-in-grid-ref.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Grid Layout Reference</title>
+    <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+        border: 0 none;
+      }
+      #caseTitle {
+        margin: 10px;
+        height: 40px;
+      }
+      #grid {
+        margin: 0;
+        height: 150px;
+        width: 150px;
+        background: yellow;
+        position: relative;
+      }
+      .a {
+        background: blue;
+        height: 100px;
+        width: 50px;
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+      .b1 {
+        background: orange;
+        width: 50px;
+        height: 50px;
+        position: absolute;
+        top: 0;
+        left: 50px;
+      }
+      .b2 {
+        background: cyan;
+        width: 50px;
+        height: 50px;
+        position: absolute;
+        top: 50px;
+        left: 100px;
+      }
+      .c {
+        background: pink;
+        width: 100px;
+        height: 50px;
+        position: absolute;
+        top: 100px;
+        left: 50px;
+      }
+      .d {
+        background: #eee;
+        width: 50px;
+        height: 50px;
+        position: absolute;
+        top: 100px;
+        left: 0
+      }
+    </style>
+  </head>
+  <body>
+    <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+    <div id="grid">
+      <div class="a"></div>
+
+      <div class="b1"></div>
+      <div class="b2"></div>
+      <div class="c"></div>
+      <div class="d"></div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-layout-repeat-notation-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-layout-repeat-notation-ref.html
new file mode 100644
index 0000000000..b52074169c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/grid-layout-repeat-notation-ref.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Grid Layout Reference</title>
+    <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+      #caseTitle {
+        margin: 10px;
+        height: 40px;
+      }
+      #grid {
+        width: 450px;
+        position: relative;
+      }
+      .a {
+        background: blue;
+        width: 100px;
+        float:left
+      }
+      .b {
+        background: yellow;
+        width: 100px;
+        float:left
+      }
+      .c {
+        background: orange;
+        width: 100px;
+        float:left
+      }
+      .d {
+        background: cyan;
+        width: 100px;
+        float:left
+      }
+      .e {
+        background: pink;
+        width: 50px;
+        float:left
+      }
+    </style>
+  </head>
+  <body>
+    <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+    <div id="grid">
+      <div class="a">&nbsp;</div>
+      <div class="b">&nbsp;</div>
+      <div class="c">&nbsp;</div>
+      <div class="d">&nbsp;</div>
+      <div class="e">&nbsp;</div>
+    </div>
+  </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-layout-z-order-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-layout-z-order-ref.html
new file mode 100644
index 0000000000..0b2bc0c8bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/grid-layout-z-order-ref.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Grid Layout Reference</title>
+    <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com">
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+        border: 0 none;
+      }
+      #caseTitle {
+        margin: 10px;
+        height: 40px;
+      }
+      #grid {
+        margin: 0;
+        width: 150px;
+        color:white;
+      }
+      .a {
+        background: blue;
+        width: 100px;
+        float:left
+      }
+      .b {
+        background: yellow;
+        width: 50px;
+        float:left;
+      }
+    </style>
+  </head>
+  <body>
+    <p id="caseTitle">The test passes if it has the same visual effect as reference.</p>
+    <div id="grid">
+      <div class="a">up</div>
+      <div class="b">&nbsp;</div>
+    </div>
+  </body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-percentage-gap-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-percentage-gap-ref.html
new file mode 100644
index 0000000000..f3616f7d07
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/grid-percentage-gap-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Reference: percentage grid gaps</title>
+<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk" />
+<style>
+    .grid {
+        width:200px;
+        height: 180px;
+        background-color: green;
+        position: relative;
+        margin-bottom: 30px;
+    }
+
+    .grid > div {
+        background-color: silver;
+        width: 90px;
+        height: 90px;
+        position: absolute;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference. Column gap should be percentage of width. Row gap should be percentage of height.</p>
+<div class="grid">
+    <div style="top:0;     left:0"></div>
+    <div style="top:0;     left:110px"></div>
+    <div style="top:108px; left:0"></div>
+    <div style="top:108px; left:110px"></div>
+</div>
+<div class="grid" style="height:200px">
+    <div style="top:0;     left:0"></div>
+    <div style="top:0;     left:120px"></div>
+    <div style="top:120px; left:0"></div>
+    <div style="top:120px; left:120px"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-support-grid-auto-columns-rows-001-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-support-grid-auto-columns-rows-001-ref.html
new file mode 100644
index 0000000000..7e4e3d2688
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/grid-support-grid-auto-columns-rows-001-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>CSS Grid Layout Test: Support for 'grid-auto-columns' and 'grid-auto-rows' properties</title>
+        <link rel="author" title="Joao Oliveira" href="mailto:hello@jxs.pt"/>
+        <style>
+         #grid {
+             position: relative;
+         }
+         .position {
+             position: absolute;
+             top: 0;
+             left: 0;
+         }
+         #first-column-first-row {
+             width: 30px;
+             height: 30px;
+             background-color: purple;
+         }
+         #third-column-first-and-second-rows {
+             left: 60px;
+             width: 30px;
+             height: 60px;
+             background-color: orange
+         }
+         #first-and-second-columns-second-row {
+             top: 30px;
+             width: 60px;
+             height: 30px;
+             background-color: blue;
+         }
+        </style>
+    </head>
+    <body>
+        <p>The test passes if it has the same visual effect as reference.</p>
+        <div id="grid">
+            <div class="position" id="first-column-first-row"></div>
+            <div class="position" id="third-column-first-and-second-rows"></div>
+            <div class="position" id="first-and-second-columns-second-row"></div>
+        </div>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-support-grid-auto-columns-rows-002-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-support-grid-auto-columns-rows-002-ref.html
new file mode 100644
index 0000000000..4a21823429
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/grid-support-grid-auto-columns-rows-002-ref.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Support for 'grid-auto-columns' and 'grid-auto-rows' properties accepting track listing as value</title>
+<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk" />
+<style>
+    #grid {
+        position: relative;
+    }
+
+    .absolute {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    #first-column-first-row {
+        width: 25px;
+        height: 40px;
+        background-color: purple;
+    }
+
+    #second-column-first-row {
+        width: 50px;
+        height: 40px;
+        left: 25px;
+        background-color: orange;
+    }
+
+    #first-column-second-row {
+        width: 25px;
+        height: 30px;
+        top: 40px;
+        background-color: green;
+    }
+
+    #second-column-second-row {
+        width: 50px;
+        height: 30px;
+        top: 40px;
+        left: 25px;
+        background-color: pink;
+    }
+
+    #first-and-second-column-third-row {
+        width: 75px;
+        height: 40px;
+        top: 70px;
+        background-color: silver;
+    }
+
+    #third-column-all-rows {
+        left: 75px;
+        height: 110px;
+        width: 25px;
+        background-color: blue;
+    }
+</style>
+
+<p>The test passes if it has the same visual effect as reference.</p>
+<div id="grid">
+    <div class="absolute" id="first-column-first-row"></div>
+    <div class="absolute" id="second-column-first-row"></div>
+    <div class="absolute" id="first-column-second-row"></div>
+    <div class="absolute" id="second-column-second-row"></div>
+    <div class="absolute" id="first-and-second-column-third-row"></div>
+    <div class="absolute" id="third-column-all-rows"></div>
+</div>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-support-grid-auto-columns-rows-003-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-support-grid-auto-columns-rows-003-ref.html
new file mode 100644
index 0000000000..5489a9bffe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/grid-support-grid-auto-columns-rows-003-ref.html
@@ -0,0 +1,453 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>CSS Grid Layout Test Reference: Support for 'grid-auto-columns' and
+      'grid-auto-rows' properties with implicit tracks after and before the
+      explicit grid</title>
+    <style>
+    #wrapper {
+      display: grid;
+      grid-template-columns: 50px 50px 50px 50px;
+    }
+
+    div { position: relative; }
+
+    .item-left3 {
+      width: 3px;
+      height: 3px;
+      background: #ff0;
+    }
+    .item-left2 {
+      width: 2px;
+      height: 2px;
+      background: #ff0;
+    }
+    .item-left1 {
+      width: 3px;
+      height: 3px;
+      background: #ff0;
+    }
+    .item-explicit {
+      width: 5px;
+      height: 5px;
+      background: #f0f;
+    }
+    .item-right1 {
+      width: 2px;
+      height: 2px;
+      background: #0ff;
+    }
+    .item-right2 {
+      width: 3px;
+      height: 3px;
+      background: #0ff;
+    }
+    .item-right3 {
+      width: 2px;
+      height: 2px;
+      background: #0ff;
+    }
+
+    #zero .item-explicit {
+      width: 2px;
+      height: 2px;
+    }
+    #two .item-explicit {
+      width: 10px;
+      height: 10px;
+    }
+    #three .item-explicit {
+      width: 15px;
+      height: 15px;
+    }
+    </style>
+  </head>
+  <body>
+    <div id="wrapper">
+      <div id="zero">
+        <div>
+          <div class="item-right1"></div>
+        </div>
+        <div>
+          <div class="item-right1"></div>
+          <div class="item-right2" style="left:2px;"></div>
+        </div>
+        <div>
+          <div class="item-right1"></div>
+          <div class="item-right2" style="left:2px;"></div>
+          <div class="item-right3" style="left:5px;"></div>
+        </div>
+
+        <div>
+          <div class="item-left1"></div>
+          <div class="item-explicit" style="left:3px;"></div>
+        </div>
+        <div>
+          <div class="item-left1"></div>
+          <div class="item-right1" style="left:3px;"></div>
+        </div>
+        <div>
+          <div class="item-left1"></div>
+          <div class="item-right1" style="left:3px;"></div>
+          <div class="item-right2" style="left:5px;"></div>
+        </div>
+        <div>
+          <div class="item-left1"></div>
+          <div class="item-right1" style="left:3px;"></div>
+          <div class="item-right2" style="left:5px;"></div>
+          <div class="item-right3" style="left:8px;"></div>
+        </div>
+
+        <div>
+          <div class="item-left2"></div>
+          <div class="item-left1" style="left:2px;"></div>
+          <div class="item-explicit" style="left:5px;"></div>
+        </div>
+        <div>
+          <div class="item-left2"></div>
+          <div class="item-left1" style="left:2px;"></div>
+          <div class="item-right1" style="left:5px;"></div>
+        </div>
+        <div>
+          <div class="item-left2"></div>
+          <div class="item-left1" style="left:2px;"></div>
+          <div class="item-right1" style="left:5px;"></div>
+          <div class="item-right2" style="left:7px;"></div>
+        </div>
+        <div>
+          <div class="item-left2"></div>
+          <div class="item-left1" style="left:2px;"></div>
+          <div class="item-right1" style="left:5px;"></div>
+          <div class="item-right2" style="left:7px;"></div>
+          <div class="item-right3" style="left:10px;"></div>
+        </div>
+
+        <div>
+          <div class="item-left3"></div>
+          <div class="item-left2" style="left:3px;"></div>
+          <div class="item-left1" style="left:5px;"></div>
+          <div class="item-explicit" style="left:8px;"></div>
+        </div>
+        <div>
+          <div class="item-left3"></div>
+          <div class="item-left2" style="left:3px;"></div>
+          <div class="item-left1" style="left:5px;"></div>
+          <div class="item-right1" style="left:8px;"></div>
+        </div>
+        <div>
+          <div class="item-left3"></div>
+          <div class="item-left2" style="left:3px;"></div>
+          <div class="item-left1" style="left:5px;"></div>
+          <div class="item-right1" style="left:8px;"></div>
+          <div class="item-right2" style="left:10px;"></div>
+        </div>
+        <div>
+          <div class="item-left3"></div>
+          <div class="item-left2" style="left:3px;"></div>
+          <div class="item-left1" style="left:5px;"></div>
+          <div class="item-right1" style="left:8px;"></div>
+          <div class="item-right2" style="left:10px;"></div>
+          <div class="item-right3" style="left:13px;"></div>
+        </div>
+      </div>
+
+      <div id="one">
+        <div>
+          <div class="item-explicit"></div>
+          <div class="item-right1" style="left:5px;"></div>
+        </div>
+        <div>
+          <div class="item-explicit"></div>
+          <div class="item-right1" style="left:5px;"></div>
+          <div class="item-right2" style="left:7px;"></div>
+        </div>
+        <div>
+          <div class="item-explicit"></div>
+          <div class="item-right1" style="left:5px;"></div>
+          <div class="item-right2" style="left:7px;"></div>
+          <div class="item-right3" style="left:10px;"></div>
+        </div>
+
+        <div>
+          <div class="item-left1"></div>
+          <div class="item-explicit" style="left:3px;"></div>
+        </div>
+        <div>
+          <div class="item-left1"></div>
+          <div class="item-explicit" style="left:3px;"></div>
+          <div class="item-right1" style="left:8px;"></div>
+        </div>
+        <div>
+          <div class="item-left1"></div>
+          <div class="item-explicit" style="left:3px;"></div>
+          <div class="item-right1" style="left:8px;"></div>
+          <div class="item-right2" style="left:10px;"></div>
+        </div>
+        <div>
+          <div class="item-left1"></div>
+          <div class="item-explicit" style="left:3px;"></div>
+          <div class="item-right1" style="left:8px;"></div>
+          <div class="item-right2" style="left:10px;"></div>
+          <div class="item-right3" style="left:13px;"></div>
+        </div>
+
+        <div>
+          <div class="item-left2"></div>
+          <div class="item-left1" style="left:2px;"></div>
+          <div class="item-explicit" style="left:5px;"></div>
+        </div>
+        <div>
+          <div class="item-left2"></div>
+          <div class="item-left1" style="left:2px;"></div>
+          <div class="item-explicit" style="left:5px;"></div>
+          <div class="item-right1" style="left:10px;"></div>
+        </div>
+        <div>
+          <div class="item-left2"></div>
+          <div class="item-left1" style="left:2px;"></div>
+          <div class="item-explicit" style="left:5px;"></div>
+          <div class="item-right1" style="left:10px;"></div>
+          <div class="item-right2" style="left:12px;"></div>
+        </div>
+        <div>
+          <div class="item-left2"></div>
+          <div class="item-left1" style="left:2px;"></div>
+          <div class="item-explicit" style="left:5px;"></div>
+          <div class="item-right1" style="left:10px;"></div>
+          <div class="item-right2" style="left:12px;"></div>
+          <div class="item-right3" style="left:15px;"></div>
+        </div>
+
+        <div>
+          <div class="item-left3"></div>
+          <div class="item-left2" style="left:3px;"></div>
+          <div class="item-left1" style="left:5px;"></div>
+          <div class="item-explicit" style="left:8px;"></div>
+        </div>
+        <div>
+          <div class="item-left3"></div>
+          <div class="item-left2" style="left:3px;"></div>
+          <div class="item-left1" style="left:5px;"></div>
+          <div class="item-explicit" style="left:8px;"></div>
+          <div class="item-right1" style="left:13px;"></div>
+        </div>
+        <div>
+          <div class="item-left3"></div>
+          <div class="item-left2" style="left:3px;"></div>
+          <div class="item-left1" style="left:5px;"></div>
+          <div class="item-explicit" style="left:8px;"></div>
+          <div class="item-right1" style="left:13px;"></div>
+          <div class="item-right2" style="left:15px;"></div>
+        </div>
+        <div>
+          <div class="item-left3"></div>
+          <div class="item-left2" style="left:3px;"></div>
+          <div class="item-left1" style="left:5px;"></div>
+          <div class="item-explicit" style="left:8px;"></div>
+          <div class="item-right1" style="left:13px;"></div>
+          <div class="item-right2" style="left:15px;"></div>
+          <div class="item-right3" style="left:18px;"></div>
+        </div>
+      </div>
+
+      <div id="two">
+        <div>
+          <div class="item-explicit"></div>
+          <div class="item-right1" style="left:10px;"></div>
+        </div>
+        <div>
+          <div class="item-explicit"></div>
+          <div class="item-right1" style="left:10px;"></div>
+          <div class="item-right2" style="left:12px;"></div>
+        </div>
+        <div>
+          <div class="item-explicit"></div>
+          <div class="item-right1" style="left:10px;"></div>
+          <div class="item-right2" style="left:12px;"></div>
+          <div class="item-right3" style="left:15px;"></div>
+        </div>
+
+        <div>
+          <div class="item-left1"></div>
+          <div class="item-explicit" style="left:3px;"></div>
+        </div>
+        <div>
+          <div class="item-left1"></div>
+          <div class="item-explicit" style="left:3px;"></div>
+          <div class="item-right1" style="left:13px;"></div>
+        </div>
+        <div>
+          <div class="item-left1"></div>
+          <div class="item-explicit" style="left:3px;"></div>
+          <div class="item-right1" style="left:13px;"></div>
+          <div class="item-right2" style="left:15px;"></div>
+        </div>
+        <div>
+          <div class="item-left1"></div>
+          <div class="item-explicit" style="left:3px;"></div>
+          <div class="item-right1" style="left:13px;"></div>
+          <div class="item-right2" style="left:15px;"></div>
+          <div class="item-right3" style="left:18px;"></div>
+        </div>
+
+        <div>
+          <div class="item-left2"></div>
+          <div class="item-left1" style="left:2px;"></div>
+          <div class="item-explicit" style="left:5px;"></div>
+        </div>
+        <div>
+          <div class="item-left2"></div>
+          <div class="item-left1" style="left:2px;"></div>
+          <div class="item-explicit" style="left:5px;"></div>
+          <div class="item-right1" style="left:15px;"></div>
+        </div>
+        <div>
+          <div class="item-left2"></div>
+          <div class="item-left1" style="left:2px;"></div>
+          <div class="item-explicit" style="left:5px;"></div>
+          <div class="item-right1" style="left:15px;"></div>
+          <div class="item-right2" style="left:17px;"></div>
+        </div>
+        <div>
+          <div class="item-left2"></div>
+          <div class="item-left1" style="left:2px;"></div>
+          <div class="item-explicit" style="left:5px;"></div>
+          <div class="item-right1" style="left:15px;"></div>
+          <div class="item-right2" style="left:17px;"></div>
+          <div class="item-right3" style="left:20px;"></div>
+        </div>
+
+        <div>
+          <div class="item-left3"></div>
+          <div class="item-left2" style="left:3px;"></div>
+          <div class="item-left1" style="left:5px;"></div>
+          <div class="item-explicit" style="left:8px;"></div>
+        </div>
+        <div>
+          <div class="item-left3"></div>
+          <div class="item-left2" style="left:3px;"></div>
+          <div class="item-left1" style="left:5px;"></div>
+          <div class="item-explicit" style="left:8px;"></div>
+          <div class="item-right1" style="left:18px;"></div>
+        </div>
+        <div>
+          <div class="item-left3"></div>
+          <div class="item-left2" style="left:3px;"></div>
+          <div class="item-left1" style="left:5px;"></div>
+          <div class="item-explicit" style="left:8px;"></div>
+          <div class="item-right1" style="left:18px;"></div>
+          <div class="item-right2" style="left:20px;"></div>
+        </div>
+        <div>
+          <div class="item-left3"></div>
+          <div class="item-left2" style="left:3px;"></div>
+          <div class="item-left1" style="left:5px;"></div>
+          <div class="item-explicit" style="left:8px;"></div>
+          <div class="item-right1" style="left:18px;"></div>
+          <div class="item-right2" style="left:20px;"></div>
+          <div class="item-right3" style="left:23px;"></div>
+        </div>
+      </div>
+
+      <div id="three">
+        <div>
+          <div class="item-explicit"></div>
+          <div class="item-right1" style="left:15px;"></div>
+        </div>
+        <div>
+          <div class="item-explicit"></div>
+          <div class="item-right1" style="left:15px;"></div>
+          <div class="item-right2" style="left:17px;"></div>
+        </div>
+        <div>
+          <div class="item-explicit"></div>
+          <div class="item-right1" style="left:15px;"></div>
+          <div class="item-right2" style="left:17px;"></div>
+          <div class="item-right3" style="left:20px;"></div>
+        </div>
+
+        <div>
+          <div class="item-left1"></div>
+          <div class="item-explicit" style="left:3px;"></div>
+        </div>
+        <div>
+          <div class="item-left1"></div>
+          <div class="item-explicit" style="left:3px;"></div>
+          <div class="item-right1" style="left:18px;"></div>
+        </div>
+        <div>
+          <div class="item-left1"></div>
+          <div class="item-explicit" style="left:3px;"></div>
+          <div class="item-right1" style="left:18px;"></div>
+          <div class="item-right2" style="left:20px;"></div>
+        </div>
+        <div>
+          <div class="item-left1"></div>
+          <div class="item-explicit" style="left:3px;"></div>
+          <div class="item-right1" style="left:18px;"></div>
+          <div class="item-right2" style="left:20px;"></div>
+          <div class="item-right3" style="left:23px;"></div>
+        </div>
+
+        <div>
+          <div class="item-left2"></div>
+          <div class="item-left1" style="left:2px;"></div>
+          <div class="item-explicit" style="left:5px;"></div>
+        </div>
+        <div>
+          <div class="item-left2"></div>
+          <div class="item-left1" style="left:2px;"></div>
+          <div class="item-explicit" style="left:5px;"></div>
+          <div class="item-right1" style="left:20px;"></div>
+        </div>
+        <div>
+          <div class="item-left2"></div>
+          <div class="item-left1" style="left:2px;"></div>
+          <div class="item-explicit" style="left:5px;"></div>
+          <div class="item-right1" style="left:20px;"></div>
+          <div class="item-right2" style="left:22px;"></div>
+        </div>
+        <div>
+          <div class="item-left2"></div>
+          <div class="item-left1" style="left:2px;"></div>
+          <div class="item-explicit" style="left:5px;"></div>
+          <div class="item-right1" style="left:20px;"></div>
+          <div class="item-right2" style="left:22px;"></div>
+          <div class="item-right3" style="left:25px;"></div>
+        </div>
+
+        <div>
+          <div class="item-left3"></div>
+          <div class="item-left2" style="left:3px;"></div>
+          <div class="item-left1" style="left:5px;"></div>
+          <div class="item-explicit" style="left:8px;"></div>
+        </div>
+        <div>
+          <div class="item-left3"></div>
+          <div class="item-left2" style="left:3px;"></div>
+          <div class="item-left1" style="left:5px;"></div>
+          <div class="item-explicit" style="left:8px;"></div>
+          <div class="item-right1" style="left:23px;"></div>
+        </div>
+        <div>
+          <div class="item-left3"></div>
+          <div class="item-left2" style="left:3px;"></div>
+          <div class="item-left1" style="left:5px;"></div>
+          <div class="item-explicit" style="left:8px;"></div>
+          <div class="item-right1" style="left:23px;"></div>
+          <div class="item-right2" style="left:25px;"></div>
+        </div>
+        <div>
+          <div class="item-left3"></div>
+          <div class="item-left2" style="left:3px;"></div>
+          <div class="item-left1" style="left:5px;"></div>
+          <div class="item-explicit" style="left:8px;"></div>
+          <div class="item-right1" style="left:23px;"></div>
+          <div class="item-right2" style="left:25px;"></div>
+          <div class="item-right3" style="left:28px;"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-template-areas-must-keep-named-columns-order-001-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-template-areas-must-keep-named-columns-order-001-ref.html
new file mode 100644
index 0000000000..7ea26011b9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/grid-template-areas-must-keep-named-columns-order-001-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<style>
+.grid {
+  display: inline-grid;
+  background: grey;
+  grid-template-columns: 50px 50px 50px 50px;
+  grid-template-rows: 50px 50px;
+}
+.grid > :nth-child(1) { background: magenta; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: green; }
+.grid > :nth-child(5) { background: black; }
+</style>
+<p>This test passes if the black item is positioned in the first column of the second row, since the spec states that we must select the first one among several equally named grid lines.</p>
+<div class="grid">
+  <div style="grid-row: 1; grid-column: 1"></div>
+  <div style="grid-row: 1; grid-column: 2"></div>
+  <div style="grid-row: 1; grid-column: 3"></div>
+  <div style="grid-row: 1; grid-column: 4"></div>
+  <div style="grid-row: 2; grid-column: 1"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/reference/grid-text-green-margin-no-collapse-ref.html b/testing/web-platform/tests/css/css-grid/reference/grid-text-green-margin-no-collapse-ref.html
new file mode 100644
index 0000000000..9dcba3f28f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/grid-text-green-margin-no-collapse-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Reference file text should be green and margins do not collapse</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+  p {
+    color: green;
+    /* Prevent collapsing body and paragraph margins. */
+    float: left;
+  }
+</style>
+<p>This text should be <strong>green</strong> and body and paragraph margins should <strong>not collapse</strong>.</p>
diff --git a/testing/web-platform/tests/css/css-grid/reference/replaced-element-015-ref.html b/testing/web-platform/tests/css/css-grid/reference/replaced-element-015-ref.html
new file mode 100644
index 0000000000..aa1434172a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/reference/replaced-element-015-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<p>Test passes if it matches the reference.</p>
+<div style="display: inline-grid; width: 100px;">
+  <div id="target" style="height: 100%;">
+    <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='green'/></svg>"
+         style="height: 100%">
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/relative-grandchild.html b/testing/web-platform/tests/css/css-grid/relative-grandchild.html
new file mode 100644
index 0000000000..9c1b7d54e1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/relative-grandchild.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1138504">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="width: 100px; height: 100px; background: red;"></div>
+<div style="display: grid; width: 100px; height: 100px;">
+  <div>
+    <div style="position: relative; height: 100px; background: green; top: -100%;"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/stretch-grid-item-button-overflow-ref.html b/testing/web-platform/tests/css/css-grid/stretch-grid-item-button-overflow-ref.html
new file mode 100644
index 0000000000..a798dffe95
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/stretch-grid-item-button-overflow-ref.html
@@ -0,0 +1,86 @@
+<!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 Reference: stretching overflow!=visible items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857">
+  <style>
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: inline-grid;
+  width: 100px;
+  height: 50px;
+  grid: 7px auto 3px / 7px auto 3px;
+  grid-gap: 5px;
+  border:1px solid;
+}
+
+.grid > * {
+  grid-area: 2/2;
+  border:1px solid;
+  appearance: none;
+  min-width:0;
+  min-height:0;
+  box-sizing: border-box;
+}
+
+.os {
+  /* Note: overflow:scroll does add scrollbars to the testcase's
+     empty buttons in some UAs, so we need to include this style
+     in the reference case to create a proper reference rendering
+     that's robust in the face of UAs that do/don't support
+     scrollable buttons. */
+  overflow: scroll;
+}
+.m  { margin: 17px 3px 5px 7px; }
+
+x { display:block; width:110px; height:5px; background:grey; }
+.h .grid x { width:5px; height:110px; }
+
+br { clear:both; }
+  </style>
+</head>
+<body>
+
+<div class="grid"><button class="oa"></button></div>
+<div class="grid"><button class="os"></button></div>
+<div class="grid"><button class="oh"></button></div>
+<div class="grid"><button class="ov"></button></div>
+<div class="grid"><button class="oc"></button></div>
+
+<br>
+
+<div class="grid"><button class="m oa"></button></div>
+<div class="grid"><button class="m os"></button></div>
+<div class="grid"><button class="m oh"></button></div>
+<div class="grid"><button class="m ov"></button></div>
+<div class="grid"><button class="m oc"></button></div>
+
+<br>
+
+<div class="h">
+
+<div class="grid"><button class="oa"></button></div>
+<div class="grid"><button class="os"></button></div>
+<div class="grid"><button class="oh"></button></div>
+<div class="grid"><button class="ov"></button></div>
+<div class="grid"><button class="oc"></button></div>
+
+<br>
+
+<div class="grid"><button class="m oa"></button></div>
+<div class="grid"><button class="m os"></button></div>
+<div class="grid"><button class="m oh"></button></div>
+<div class="grid"><button class="m ov"></button></div>
+<div class="grid"><button class="m oc"></button></div>
+
+<br>
+
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/stretch-grid-item-button-overflow.html b/testing/web-platform/tests/css/css-grid/stretch-grid-item-button-overflow.html
new file mode 100644
index 0000000000..0b86a7e9ac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/stretch-grid-item-button-overflow.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>CSS Grid Test: stretching overflow!=visible items: stretching rules for scroll containers</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
+  <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7714">
+  <link rel="match" href="stretch-grid-item-button-overflow-ref.html">
+  <style>
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: inline-grid;
+  width: 100px;
+  height: 50px;
+  grid: 7px auto 3px / 7px auto 3px;
+  grid-gap: 5px;
+  border:1px solid;
+}
+
+.grid > * {
+  grid-area: 2/2;
+  border:1px solid;
+  appearance: none;
+}
+
+.oa { overflow: auto; }
+.os { overflow: scroll; }
+.oh { overflow: hidden; }
+.oc { overflow: clip; }
+.m  { margin: 17px 3px 5px 7px; }
+
+x { display:block; width:110px; height:5px; background:grey; }
+.h .grid x { width:5px; height:110px; }
+
+br { clear:both; }
+  </style>
+</head>
+<body>
+
+<div class="grid"><button class="oa"></button></div>
+<div class="grid"><button class="os"></button></div>
+<div class="grid"><button class="oh"></button></div>
+<div class="grid"><button class="oc"></button></div>
+<div class="grid"><button class="  "></button></div>
+
+<br>
+
+<div class="grid"><button class="m oa"></button></div>
+<div class="grid"><button class="m os"></button></div>
+<div class="grid"><button class="m oh"></button></div>
+<div class="grid"><button class="m oc"></button></div>
+<div class="grid"><button class="m   "></button></div>
+
+<br>
+
+<div class="h">
+
+<div class="grid"><button class="oa"></button></div>
+<div class="grid"><button class="os"></button></div>
+<div class="grid"><button class="oh"></button></div>
+<div class="grid"><button class="oc"></button></div>
+<div class="grid"><button class="  "></button></div>
+
+<br>
+
+<div class="grid"><button class="m oa"></button></div>
+<div class="grid"><button class="m os"></button></div>
+<div class="grid"><button class="m oh"></button></div>
+<div class="grid"><button class="m oc"></button></div>
+<div class="grid"><button class="m   "></button></div>
+
+<br>
+
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/stretch-grid-item-checkbox-input-ref.html b/testing/web-platform/tests/css/css-grid/stretch-grid-item-checkbox-input-ref.html
new file mode 100644
index 0000000000..6a75b0fcfb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/stretch-grid-item-checkbox-input-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<input type="checkbox" style="display: block; width: 50px; height: 50px; margin: 0;">
diff --git a/testing/web-platform/tests/css/css-grid/stretch-grid-item-checkbox-input.html b/testing/web-platform/tests/css/css-grid/stretch-grid-item-checkbox-input.html
new file mode 100644
index 0000000000..c6a34a8288
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/stretch-grid-item-checkbox-input.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=768999">
+<link rel="match" href="stretch-grid-item-checkbox-input-ref.html">
+<div style="display: grid; width: 50px; height: 50px; grid-template: 50px / 50px;">
+  <input type="checkbox" style="margin: 0;">
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/stretch-grid-item-radio-input-ref.html b/testing/web-platform/tests/css/css-grid/stretch-grid-item-radio-input-ref.html
new file mode 100644
index 0000000000..401a2bfc72
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/stretch-grid-item-radio-input-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<input type="radio" style="display: block; width: 50px; height: 50px; margin: 0;">
diff --git a/testing/web-platform/tests/css/css-grid/stretch-grid-item-radio-input.html b/testing/web-platform/tests/css/css-grid/stretch-grid-item-radio-input.html
new file mode 100644
index 0000000000..9ae9d7be04
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/stretch-grid-item-radio-input.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=768999">
+<link rel="match" href="stretch-grid-item-radio-input-ref.html">
+<div style="display: grid; width: 50px; height: 50px; grid-template: 50px / 50px;">
+  <input type="radio" style="margin: 0;">
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/stretch-grid-item-text-input-overflow-ref.html b/testing/web-platform/tests/css/css-grid/stretch-grid-item-text-input-overflow-ref.html
new file mode 100644
index 0000000000..ebc0c8ef9c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/stretch-grid-item-text-input-overflow-ref.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 Reference: stretching overflow!=visible items</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: inline-grid;
+  width: 100px;
+  height: 50px;
+  grid: 7px auto 3px / 7px auto 3px;
+  grid-gap: 5px;
+  border:1px solid;
+}
+
+.grid > * {
+  grid-area: 2/2;
+  border:1px solid;
+  appearance: none;
+  min-width:0;
+  min-height:0;
+  box-sizing: border-box;
+}
+
+input { justify-self: start; }
+.m  { align-self: start; margin: 17px 3px 5px 7px; }
+
+x { display:block; width:110px; height:5px; background:grey; }
+.h .grid x { width:5px; height:110px; }
+
+br { clear:both; }
+  </style>
+</head>
+<body>
+
+<div class="grid"><input class="oa"></div>
+<div class="grid"><input class="os"></div>
+<div class="grid"><input class="oh"></div>
+<div class="grid"><input class="ov"></div>
+<div class="grid"><input class="oc"></div>
+
+<br>
+
+<div class="grid"><input class="m oa"></div>
+<div class="grid"><input class="m os"></div>
+<div class="grid"><input class="m oh"></div>
+<div class="grid"><input class="m ov"></div>
+<div class="grid"><input class="m oc"></div>
+
+<br>
+
+<div class="h">
+
+<div class="grid"><input class="oa"></div>
+<div class="grid"><input class="os"></div>
+<div class="grid"><input class="oh"></div>
+<div class="grid"><input class="ov"></div>
+<div class="grid"><input class="oc"></div>
+
+<br>
+
+<div class="grid"><input class="m oa"></div>
+<div class="grid"><input class="m os"></div>
+<div class="grid"><input class="m oh"></div>
+<div class="grid"><input class="m ov"></div>
+<div class="grid"><input class="m oc"></div>
+
+<br>
+
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/stretch-grid-item-text-input-overflow.html b/testing/web-platform/tests/css/css-grid/stretch-grid-item-text-input-overflow.html
new file mode 100644
index 0000000000..0814b3dcf0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/stretch-grid-item-text-input-overflow.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>CSS Grid Test: stretching overflow!=visible items: stretching rules for scroll containers don't apply to input</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857">
+  <link rel="match" href="stretch-grid-item-text-input-overflow-ref.html">
+  <link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto">
+  <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7714">
+  <style type="text/css">
+body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
+
+.grid {
+  display: inline-grid;
+  width: 100px;
+  height: 50px;
+  grid: 7px auto 3px / 7px auto 3px;
+  grid-gap: 5px;
+  border:1px solid;
+}
+
+.grid > * {
+  grid-area: 2/2;
+  border:1px solid;
+  appearance: none;
+}
+
+.oa { overflow: auto; }
+.os { overflow: scroll; }
+.oh { overflow: hidden; }
+.oc { overflow: clip; }
+.m  { margin: 17px 3px 5px 7px; }
+
+x { display:block; width:110px; height:5px; background:grey; }
+.h .grid x { width:5px; height:110px; }
+
+br { clear:both; }
+  </style>
+</head>
+<body>
+
+<div class="grid"><input class="oa"></div>
+<div class="grid"><input class="os"></div>
+<div class="grid"><input class="oh"></div>
+<div class="grid"><input class="oc"></div>
+<div class="grid"><input class="  "></div>
+
+<br>
+
+<div class="grid"><input class="m oa"></div>
+<div class="grid"><input class="m os"></div>
+<div class="grid"><input class="m oh"></div>
+<div class="grid"><input class="m oc"></div>
+<div class="grid"><input class="m   "></div>
+
+<br>
+
+<div class="h">
+
+<div class="grid"><input class="oa"></div>
+<div class="grid"><input class="os"></div>
+<div class="grid"><input class="oh"></div>
+<div class="grid"><input class="oc"></div>
+<div class="grid"><input class="  "></div>
+
+<br>
+
+<div class="grid"><input class="m oa"></div>
+<div class="grid"><input class="m os"></div>
+<div class="grid"><input class="m oh"></div>
+<div class="grid"><input class="m oc"></div>
+<div class="grid"><input class="m   "></div>
+
+<br>
+
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-grid/subgrid/WEB_FEATURES.yml
new file mode 100644
index 0000000000..9fffbbfce9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/WEB_FEATURES.yml
@@ -0,0 +1,3 @@
+features:
+- name: subgrid
+  files: "**"
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/align-self-baseline-with-subgrid-mbp.html b/testing/web-platform/tests/css/css-grid/subgrid/align-self-baseline-with-subgrid-mbp.html
new file mode 100644
index 0000000000..bb9f844483
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/align-self-baseline-with-subgrid-mbp.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+<meta name="assert" content="Margin, border, and padding of subgrids should influence the offset of items in the same baseline alignment context">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-item-contribution">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<style>
+html,body {
+  color:black; background-color:white;  padding:0; margin:0;
+}
+.grid {
+    font:16px/1 Ahem;
+    display: inline-grid;
+    border: 1px solid black;
+    grid-template-columns: auto auto;
+}
+.subgrid {
+    display: grid;
+    grid-template-rows: subgrid;
+    border: 9px solid blue;
+    margin-top: 15px;
+    padding-top: 6px;
+}
+.first-baseline {
+    align-self: baseline;
+}
+</style>
+</head>
+<body onload="checkLayout('.first-baseline')">
+<div id="target" class="grid">
+    <div data-offset-y="31" class="first-baseline">X</div>
+    <div class="subgrid">
+        <div data-offset-y="31"  class="first-baseline">X</div>
+    </div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/alignment-in-subgridded-axes-001.html b/testing/web-platform/tests/css/css-grid/subgrid/alignment-in-subgridded-axes-001.html
new file mode 100644
index 0000000000..419088b4d5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/alignment-in-subgridded-axes-001.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Test: Specified alignment properties in subgridded axes</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment">
+<style>
+body {
+  margin: 0;
+  padding: 0;
+  font-size: 0;
+}
+
+.grid {
+  background: gray;
+  display: inline-grid;
+  grid-auto-rows: 100px;
+  grid-template-columns: 100px;
+}
+
+.subgrid {
+  margin: 10px;
+  padding: 10px;
+  display: grid;
+  background: orangered;
+  border: blue solid 10px;
+  grid-template: subgrid / subgrid;
+}
+
+.as { align-self: start; }
+.ae { align-self: end; }
+.ac { align-self: center; }
+.ab { align-self: baseline; }
+
+.js { justify-self: start; }
+.je { justify-self: end; }
+.jc { justify-self: center; }
+.jb { justify-self: baseline; }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.item')">
+<div class="grid">
+  <div class="subgrid as js">
+    <div class="item" data-offset-x="30" data-expected-width="40" data-offset-y="30" data-expected-height="40"></div>
+  </div>
+  <div class="subgrid as je">
+    <div class="item" data-offset-x="30" data-expected-width="40" data-offset-y="130" data-expected-height="40"></div>
+  </div>
+  <div class="subgrid as jc">
+    <div class="item" data-offset-x="30" data-expected-width="40" data-offset-y="230" data-expected-height="40"></div>
+  </div>
+  <div class="subgrid as jb">
+    <div class="item" data-offset-x="30" data-expected-width="40" data-offset-y="330" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid ae js">
+    <div class="item" data-offset-x="130" data-expected-width="40" data-offset-y="30" data-expected-height="40"></div>
+  </div>
+  <div class="subgrid ae je">
+    <div class="item" data-offset-x="130" data-expected-width="40" data-offset-y="130" data-expected-height="40"></div>
+  </div>
+  <div class="subgrid ae jc">
+    <div class="item" data-offset-x="130" data-expected-width="40" data-offset-y="230" data-expected-height="40"></div>
+  </div>
+  <div class="subgrid ae jb">
+    <div class="item" data-offset-x="130" data-expected-width="40" data-offset-y="330" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid ac js">
+    <div class="item" data-offset-x="230" data-expected-width="40" data-offset-y="30" data-expected-height="40"></div>
+  </div>
+  <div class="subgrid ac je">
+    <div class="item" data-offset-x="230" data-expected-width="40" data-offset-y="130" data-expected-height="40"></div>
+  </div>
+  <div class="subgrid ac jc">
+    <div class="item" data-offset-x="230" data-expected-width="40" data-offset-y="230" data-expected-height="40"></div>
+  </div>
+  <div class="subgrid ac jb">
+    <div class="item" data-offset-x="230" data-expected-width="40" data-offset-y="330" data-expected-height="40"></div>
+  </div>
+</div>
+
+<div class="grid">
+  <div class="subgrid ab js">
+    <div class="item" data-offset-x="330" data-expected-width="40" data-offset-y="30" data-expected-height="40"></div>
+  </div>
+  <div class="subgrid ab je">
+    <div class="item" data-offset-x="330" data-expected-width="40" data-offset-y="130" data-expected-height="40"></div>
+  </div>
+  <div class="subgrid ab jc">
+    <div class="item" data-offset-x="330" data-expected-width="40" data-offset-y="230" data-expected-height="40"></div>
+  </div>
+  <div class="subgrid ab jb">
+    <div class="item" data-offset-x="330" data-expected-width="40" data-offset-y="330" data-expected-height="40"></div>
+  </div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/alignment-in-subgridded-axes-002-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/alignment-in-subgridded-axes-002-ref.html
new file mode 100644
index 0000000000..5e2f1cbac3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/alignment-in-subgridded-axes-002-ref.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Reference: Specified alignment properties in subgridded axes</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment">
+<style>
+div {
+  display: inline-grid;
+  gap: 5px;
+}
+
+.grid { grid-template: 50px / 50px }
+.vlr { writing-mode: vertical-lr }
+.subgrid { background: gray }
+
+.item {
+  background: orange;
+  height: 20px;
+  width: 20px;
+}
+
+.as { align-self: start }
+.ae { align-self: end }
+.ac { align-self: center }
+.ab { align-self: baseline }
+
+.js { justify-self: start }
+.je { justify-self: end }
+.jc { justify-self: center }
+.jb { justify-self: baseline }
+</style>
+<div id="wrapper"></div>
+
+<template id="grid">
+  <div class="grid">
+    <div class="subgrid">
+      <div class="item"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+"use strict";
+
+let align_properties = ["as", "ae", "ac", "ab"];
+let justify_properties = ["js", "je", "jc", "jb"];
+let wrapper = document.getElementById("wrapper");
+
+wrapper.style.gridTemplateColumns = `repeat(${justify_properties.length * 2}, 50px)`;
+
+for (let align_self of align_properties) {
+  // Add a grid for all combinations of `align-self` and `justify-self`.
+  for (let justify_self of justify_properties) {
+    let grid = document.getElementById("grid").content.cloneNode(true);
+    grid.querySelector(".item").classList.add(align_self, justify_self);
+    wrapper.appendChild(grid);
+  }
+
+  // Add all combinations again, but make the subgrid orthogonal.
+  for (let justify_self of justify_properties) {
+    let grid = document.getElementById("grid").content.cloneNode(true);
+    grid.querySelector(".item").classList.add(align_self, justify_self);
+    grid.querySelector(".subgrid").classList.add("vlr");
+    wrapper.appendChild(grid);
+  }
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/alignment-in-subgridded-axes-002.html b/testing/web-platform/tests/css/css-grid/subgrid/alignment-in-subgridded-axes-002.html
new file mode 100644
index 0000000000..68f1b3d43c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/alignment-in-subgridded-axes-002.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Test: Specified alignment properties in subgridded axes</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment">
+<link rel="match" href="alignment-in-subgridded-axes-002-ref.html">
+<style>
+div {
+  display: inline-grid;
+  gap: 5px;
+}
+
+.grid { grid-template: 50px / 50px }
+.vlr { writing-mode: vertical-lr }
+
+.subgrid {
+  background: gray;
+  grid-template: subgrid / subgrid;
+}
+
+.item {
+  background: orange;
+  height: 20px;
+  width: 20px;
+}
+
+.as { align-self: start }
+.ae { align-self: end }
+.ac { align-self: center }
+.ab { align-self: baseline }
+
+.js { justify-self: start }
+.je { justify-self: end }
+.jc { justify-self: center }
+.jb { justify-self: baseline }
+</style>
+<div id="wrapper"></div>
+
+<template id="grid">
+  <div class="grid">
+    <div class="subgrid">
+      <div class="item"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+"use strict";
+
+let align_properties = ["as", "ae", "ac", "ab"];
+let justify_properties = ["js", "je", "jc", "jb"];
+let wrapper = document.getElementById("wrapper");
+
+wrapper.style.gridTemplateColumns = `repeat(${justify_properties.length * 2}, 50px)`;
+
+for (let align_self of align_properties) {
+  // Add a grid for all combinations of `align-self` and `justify-self`.
+  for (let justify_self of justify_properties) {
+    let grid = document.getElementById("grid").content.cloneNode(true);
+    grid.querySelector(".item").classList.add(align_self, justify_self);
+    wrapper.appendChild(grid);
+  }
+
+  // Add all combinations again, but make the subgrid orthogonal.
+  for (let justify_self of justify_properties) {
+    let grid = document.getElementById("grid").content.cloneNode(true);
+    grid.querySelector(".item").classList.add(align_self, justify_self);
+    grid.querySelector(".subgrid").classList.add("vlr");
+    wrapper.appendChild(grid);
+  }
+}
+</script>
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/auto-track-sizing-003.html b/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-003.html
new file mode 100644
index 0000000000..fdb571c157
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-003.html
@@ -0,0 +1,45 @@
+<!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 auto track sizing</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-overview">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+.wrapper {
+  width: 100px;
+  height: 100px;
+  background: red;
+}
+.grid {
+  display: grid;
+  width: min-content;
+  background: green;
+  color: transparent;
+  font: 25px/1 Ahem;
+}
+.subgrid {
+  display: grid;
+  grid-row: 1 / -1;
+  grid-column: 1 / -1;
+  grid-template: subgrid / subgrid;
+}
+</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">
+      X XXXX XX XXX
+    </div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-004.html b/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-004.html
new file mode 100644
index 0000000000..d5e120dab0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/auto-track-sizing-004.html
@@ -0,0 +1,50 @@
+<!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 auto track sizing</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-overview">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+.wrapper {
+  width: 100px;
+  height: 100px;
+  background: red;
+}
+.grid {
+  display: inline-grid;
+  grid-template-columns: repeat(10, auto);
+  grid-template-rows: repeat(5, 5px auto);
+}
+.subgrid {
+  display: grid;
+  grid-template: subgrid / subgrid;
+  grid-column: 1 / -1;
+  grid-row: 1 / -1;
+}
+.item {
+  background: green;
+  height: 50px;
+  width: 50px;
+}
+</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="item" style="grid-column: span 3; grid-row: span 8;"></div>
+      <div class="item" style="grid-column: span 7; grid-row: span 8;"></div>
+      <div class="item" style="grid-column: span 6; grid-row: span 2;"></div>
+      <div class="item" style="grid-column: span 4; grid-row: span 2;"></div>
+    </div>
+  </div>
+</div>
+</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/contribution-size-flex-tracks-001.html b/testing/web-platform/tests/css/css-grid/subgrid/contribution-size-flex-tracks-001.html
new file mode 100644
index 0000000000..cc99f63968
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/contribution-size-flex-tracks-001.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 contribution size to flexible tracks</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-size-contribution">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+.grid {
+  background: red;
+  display: inline-grid;
+  grid-template: repeat(4, minmax(0, 1fr)) / repeat(10, minmax(0, 1fr));
+}
+.subgrid {
+  width: 50px;
+  height: 50px;
+  background: green;
+  display: grid;
+  grid-row: 1 / -1;
+  grid-column: 1 / -1;
+  grid-template: subgrid / subgrid;
+}
+.item {
+  width: 10px;
+  height: 25px;
+}
+</style>
+</head>
+<body>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="grid">
+  <div class="subgrid">
+    <div class="item"></div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/crashtests/contain-strict-nested-subgrid.html b/testing/web-platform/tests/css/css-grid/subgrid/crashtests/contain-strict-nested-subgrid.html
new file mode 100644
index 0000000000..a98e43777e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/crashtests/contain-strict-nested-subgrid.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/crashtests/contain-strict-subgrid.html b/testing/web-platform/tests/css/css-grid/subgrid/crashtests/contain-strict-subgrid.html
new file mode 100644
index 0000000000..0d377175b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/crashtests/contain-strict-subgrid.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/crashtests/subgrid-reflow-root.html b/testing/web-platform/tests/css/css-grid/subgrid/crashtests/subgrid-reflow-root.html
new file mode 100644
index 0000000000..e8bfc2b7d3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/crashtests/subgrid-reflow-root.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<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/crashtests/subgridded-axis-auto-repeater-001.html b/testing/web-platform/tests/css/css-grid/subgrid/crashtests/subgridded-axis-auto-repeater-001.html
new file mode 100644
index 0000000000..2edb01db08
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/crashtests/subgridded-axis-auto-repeater-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/crashtests/subgridded-axis-auto-repeater-002.html b/testing/web-platform/tests/css/css-grid/subgrid/crashtests/subgridded-axis-auto-repeater-002.html
new file mode 100644
index 0000000000..42bcbcfab0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/crashtests/subgridded-axis-auto-repeater-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/crashtests/subgridded-axis-auto-repeater-003.html b/testing/web-platform/tests/css/css-grid/subgrid/crashtests/subgridded-axis-auto-repeater-003.html
new file mode 100644
index 0000000000..eeb97967f7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/crashtests/subgridded-axis-auto-repeater-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/dynamic-min-content-001.html b/testing/web-platform/tests/css/css-grid/subgrid/dynamic-min-content-001.html
new file mode 100644
index 0000000000..97fa9b1327
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/dynamic-min-content-001.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="display: grid; height: 100px; width: min-content; background: green;">
+  <div style="display: grid; grid-template-columns: subgrid;">
+    <div id="target" style="width: 50px;"></div>
+  </div>
+</div>
+<script>
+document.body.offsetTop;
+document.getElementById('target').style.width = '100px';
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/dynamic-min-content-002.html b/testing/web-platform/tests/css/css-grid/subgrid/dynamic-min-content-002.html
new file mode 100644
index 0000000000..04c5d143d9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/dynamic-min-content-002.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="display: grid; height: 100px; width: min-content; background: green;">
+  <div style="display: grid; grid-template-rows: subgrid; writing-mode: vertical-rl;">
+    <div id="target" style="writing-mode: horizontal-tb; width: 50px;"></div>
+  </div>
+</div>
+<script>
+document.body.offsetTop;
+document.getElementById('target').style.width = '100px';
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/dynamic-min-content-003.html b/testing/web-platform/tests/css/css-grid/subgrid/dynamic-min-content-003.html
new file mode 100644
index 0000000000..625d83485c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/dynamic-min-content-003.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="display: grid; height: 100px; width: min-content; background: green;">
+  <div style="display: grid; grid-template-rows: subgrid; writing-mode: vertical-rl;">
+    <div style="display: grid; grid-template-columns: subgrid; writing-mode: horizontal-tb;">
+      <div id="target" style="width: 50px;">
+    </div>
+  </div>
+</div>
+<script>
+document.body.offsetTop;
+document.getElementById('target').style.width = '100px';
+</script>
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..35af77634f
--- /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:start; 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-012-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-012-ref.html
new file mode 100644
index 0000000000..347fc79098
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-012-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>CSS Grid Reference</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+
+<div style="width: 200px; height: 100px; background-color: blue; position: relative; left: 225px;"></div>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-012.html b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-012.html
new file mode 100644
index 0000000000..02d9a0e801
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-gap-012.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>CSS Grid Test: Subgrids with column gap larger than 2x the track size</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1841297">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-item-contribution">
+<link rel="match" href="grid-gap-012-ref.html">
+
+<div style="display: grid; grid-template-columns: 100px 100px 100px; width: 300px">
+  <div style="display: grid; grid-template-columns: subgrid; gap: 250px; 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>
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-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..49d781e91f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/grid-template-invalid.html
@@ -0,0 +1,43 @@
+<!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(auto-fit, [a])');
+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(auto-fit, [a])');
+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/independent-tracks-from-parent-grid.html b/testing/web-platform/tests/css/css-grid/subgrid/independent-tracks-from-parent-grid.html
new file mode 100644
index 0000000000..d7647eaafb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/independent-tracks-from-parent-grid.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Grid Test: Subgrid standalone tracks are independent of the parent grid</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrids">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+.grid {
+  display: inline-grid;
+  background: red;
+  gap: 25px;
+}
+.subgrid {
+  display: grid;
+  grid-template-columns: subgrid;
+}
+.item {
+  background: green;
+  height: 25px;
+  width: 100px;
+}
+</style>
+</head>
+<body>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="grid">
+  <div class="subgrid">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></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..20e7a30cce
--- /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 / -1"></div>
+    <div style="grid-row:1 / -1"></div>
+    <div style="grid-row:-1"></div>
+  </div></div></div>
+
+  <div class="grid"><div class="subgrid areas-1b"><div class="subgrid">
+    <div style="grid-row:2"></div>
+    <div style="grid-row:2 / -1"></div>
+    <div style="grid-row:2 / -1"></div>
+    <div style="grid-row:-1"></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/-2"></div>
+    <div style="grid-row:1/-2"></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:3"></div>
+    <div style="grid-row:3 / -1"></div>
+    <div style="grid-row:3 / -1"></div>
+    <div style="grid-row:-1"></div>
+  </div></div></div>
+
+  <div class="grid"><div class="subgrid areas-1e"><div class="subgrid">
+    <div style="grid-row:3"></div>
+    <div style="grid-row:3"></div>
+    <div style="grid-row:3"></div>
+    <div style="grid-row:-1"></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/overflow-hidden-does-not-prohibit-subgrid.html b/testing/web-platform/tests/css/css-grid/subgrid/overflow-hidden-does-not-prohibit-subgrid.html
new file mode 100644
index 0000000000..b0c73e0e24
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/overflow-hidden-does-not-prohibit-subgrid.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#overflow-control">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#track-sizing">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="overflow on a grid item does not cause it to establish an independent formatting context, and as a result does not prohibit subgrid">
+<style>
+.grid {
+  display: inline-grid;
+  grid-template: auto auto / auto auto;
+  background-color: green;
+}
+.subgrid {
+    grid-row: span 2;
+    grid-column: 2;
+    display: grid;
+    grid-template-rows: subgrid;
+    overflow: hidden;
+}
+.item {
+    width: 50px;
+    height: 50px;
+}
+</style>
+</head>
+<body>
+<p>Test passes if there is a filled green square.</p>
+<div class="grid">
+  <div class="item" style="grid-row: 1;"></div>
+  <div class="subgrid">
+    <div class="item" style="grid-row: 2;"></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/percentage-track-sizing.html b/testing/web-platform/tests/css/css-grid/subgrid/percentage-track-sizing.html
new file mode 100644
index 0000000000..3e62f19a0a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/percentage-track-sizing.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<meta charset="utf-8">
+<title>CSS Grid Test: Subgrid percentage track sizing</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-overview">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+.grid {
+  display: grid;
+  background: red;
+  height: 100px;
+  width: 100px;
+}
+.subgrid {
+  display: grid;
+  grid-template-columns: 100% 0%;
+  grid-template-rows: subgrid;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="grid">
+  <div class="subgrid">
+    <div style="background: green"></div>
+  </div>
+</div>
+</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/repeat-auto-fill-009.html b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-009.html
new file mode 100644
index 0000000000..086a4769d4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/repeat-auto-fill-009.html
@@ -0,0 +1,121 @@
+<!DOCTYPE HTML>
+<html>
+  <link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
+  <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;
+}
+
+.wrapper {
+  display: inline-block;
+  width: 110px;
+  border: 1px solid;
+}
+
+.grid {
+  display: grid;
+  grid-auto-rows: 8px;
+  background: grey;
+}
+
+.fill-0a  { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] }
+.fill-0b  { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] }
+.fill-0c  { grid-template-columns: subgrid [x] [y] repeat(auto-fill, [z]) }
+.fill-0d  { grid-template-columns: subgrid repeat(auto-fill, [x]) }
+.fill-0e  { grid-template-columns: subgrid [x] }
+
+.grid > :nth-child(2n)   {  background: black; }
+.grid > :nth-child(2n+1) {  background: pink; }
+
+    </style>
+  </head>
+<body>
+
+<div class="wrapper"><div class="grid 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="wrapper"><div class="grid 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="wrapper"><div class="grid 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="wrapper"><div class="grid 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="wrapper"><div class="grid 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>
+
+<script>
+  const expectedResults = [
+    "10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px",
+    "10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px",
+    "10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px",
+    "10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px",
+    "10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px",
+  ];
+  [...document.querySelectorAll('.grid')].forEach(function(grid, i) {
+    let actual = window.getComputedStyle(grid)['grid-template-columns'];
+    let expected = expectedResults[i];
+    if (actual != expected) {
+      let err = "Unexpected getComputedStyle value for grid " + i + " with className '" + grid.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/standalone-axis-size-001.html b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-001.html
new file mode 100644
index 0000000000..aaa71ddbef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>CSS Grid Test: Subgrid specified size on standalone axis</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+.grid {
+  display: grid;
+  grid-template-rows: 100px;
+}
+.subgrid {
+  display: grid;
+  background: red;
+  width: min-content;
+  grid-template-rows: subgrid;
+}
+.item {
+  background: green;
+  width: 100px;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="grid">
+  <div class="subgrid">
+    <div class="item"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-002.html b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-002.html
new file mode 100644
index 0000000000..0e02aa1b14
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-002.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Test: Subgrid specified size on standalone axis</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+.grid {
+  display: grid;
+  grid-template-rows: 100px;
+}
+.subgrid {
+  display: grid;
+  width: min-content;
+  grid-template: subgrid / 20% 30%;
+}
+.w100 { width: 100px }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="grid">
+  <div class="subgrid">
+    <div style="background: green"><div class="w100"></div></div>
+    <div style="background: green"><div class="w100"></div></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-003.html b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-003.html
new file mode 100644
index 0000000000..5c06ee62e1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-003.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Test: Subgrid contribution size on standalone axis</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+.grid {
+  background: green;
+  display: inline-grid;
+  grid-template-rows: 100px;
+}
+.subgrid {
+  width: 100px;
+  display: grid;
+  grid-template-rows: subgrid;
+}
+.w200 { width: 200px }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="grid">
+  <div class="subgrid">
+    <div class="w200"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-004.html b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-004.html
new file mode 100644
index 0000000000..d69412d625
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-004.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Test: Subgrid contribution size on standalone axis</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+.grid {
+  display: inline-grid;
+  grid-template: 100px / minmax(auto, 100px);
+}
+.subgrid {
+  width: 100%;
+  display: grid;
+  background: green;
+  grid-template-rows: subgrid;
+}
+.w200 { width: 200px }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="grid">
+  <div class="subgrid">
+    <div class="w200"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-005.html b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-005.html
new file mode 100644
index 0000000000..586d26bf2f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-005.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Test: Subgrid contribution size on standalone axis</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+.grid {
+  display: grid;
+  background: red;
+  width: max-content;
+  grid-template-columns: minmax(min-content, max-content);
+}
+.subgrid {
+  display: grid;
+  background: green;
+  width: min-content;
+  grid-template-rows: subgrid;
+}
+.w100 {
+  display: inline-block;
+  height: 50px;
+  width: 100px;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="grid">
+  <div class="subgrid">
+    <div style="font-size: 0">
+      <div class="w100"></div>
+      <div class="w100"></div>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-006.html b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-006.html
new file mode 100644
index 0000000000..056f0a4028
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-006.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Test: Subgrid contribution size on standalone axis</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+.grid {
+  display: grid;
+  background: red;
+  width: min-content;
+}
+.subgrid {
+  display: grid;
+  background: green;
+  max-width: 100px;
+  width: max-content;
+  grid-template-rows: subgrid;
+}
+.w100 {
+  display: inline-block;
+  height: 50px;
+  width: 100px;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="grid">
+  <div class="subgrid">
+    <div style="font-size: 0">
+      <div class="w100"></div>
+      <div class="w100"></div>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-007.html b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-007.html
new file mode 100644
index 0000000000..464200614c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-007.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Test: Subgrid contribution size on standalone axis</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+.grid {
+  background: red;
+  display: inline-grid;
+}
+.subgrid {
+  display: grid;
+  grid-row: span 2;
+  background: green;
+  min-width: min-content;
+  grid-auto-flow: column;
+  grid-template-rows: subgrid;
+}
+.w100 {
+  height: 50px;
+  width: 100px;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="grid">
+  <div class="subgrid">
+    <div class="w100"></div>
+    <div class="w100"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-008.html b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-008.html
new file mode 100644
index 0000000000..6ee4e77405
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-008.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Test: Subgrid contribution size on standalone axis</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+.grid {
+  background: green;
+  display: inline-grid;
+  grid-template-columns: 100px;
+}
+.subgrid {
+  height: 100px;
+  display: grid;
+  grid-template-columns: subgrid;
+}
+.h200 { height: 200px }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="grid">
+  <div class="subgrid">
+    <div class="h200"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-009.html b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-009.html
new file mode 100644
index 0000000000..bbf585efd1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/standalone-axis-size-009.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Test: Subgrid contribution size on standalone axis</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+.grid {
+  display: inline-grid;
+  grid-template: minmax(auto, 100px) / 100px;
+}
+.subgrid {
+  height: 100%;
+  display: grid;
+  background: green;
+  grid-template-columns: subgrid;
+}
+.h200 { height: 200px }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="grid">
+  <div class="subgrid">
+    <div class="h200"></div>
+  </div>
+</div>
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-baseline-005.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-005.html
new file mode 100644
index 0000000000..455439f798
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-005.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/">
+<style>
+.item {
+  inline-size: 40px;
+  box-sizing: border-box;
+  border: solid 5px hotpink;
+  line-height: 0;
+  margin-block-start: 3px;
+  margin-block-end: 5px;
+}
+.small {
+  width: 20px;
+  height: 20px;
+  border: solid 5px cyan;
+}
+.first {
+  align-self: baseline;
+}
+.last {
+  align-self: last baseline;
+}
+span {
+  width: 20px;
+  height: 20px;
+  box-sizing: border-box;
+  border: solid 5px orange;
+  display: inline-block;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.item')">
+
+<div style="position: relative; display: grid; grid-template: 150px 150px 150px / 100px 100px 100px 100px;">
+  <div style="display: grid;
+              gap: 10px;
+              grid-column: 1 / span 2;
+              grid-row: 1 / span 3;
+              grid-template: subgrid / subgrid;
+              margin-block-start: 5px; margin-block-end: 10px;
+              border: solid black 5px;
+              padding-block-start: 10px; padding-block-end: 20px;">
+    <div style="display: grid;
+                gap: 20px;
+                grid-column: 1 / span 2;
+                grid-row: 1 / span 2;
+                grid-template: subgrid / subgrid;
+                margin-block-start: 3px; margin-block-end: 7px;
+                border: solid black 5px;
+                padding-block-start: 5px; padding-block-end: 10px;">
+      <div data-offset-y="36" class="item first">
+        <span></span><br><span></span>
+      </div>
+      <div data-offset-y="85" class="item last">
+        <span></span><br><span></span>
+      </div>
+      <div data-offset-y="163" class="item first">
+        <span></span><br><span></span>
+      </div>
+      <div data-offset-y="218" class="item last">
+        <span></span><br><span></span>
+      </div>
+    </div>
+    <div data-offset-y="308" class="item first">
+      <span></span><br><span></span>
+    </div>
+    <div data-offset-y="360" class="item last">
+      <span></span><br><span></span>
+    </div>
+  </div>
+  <div data-offset-y="41" class="item small first"></div>
+  <div data-offset-y="110" class="item small last"></div>
+  <div data-offset-y="168" class="item small first"></div>
+  <div data-offset-y="243" class="item small last"></div>
+  <div data-offset-y="313" class="item small first"></div>
+  <div data-offset-y="385" class="item small last"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-006.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-006.html
new file mode 100644
index 0000000000..23d2b3b606
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-006.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/">
+<style>
+.item {
+  inline-size: 40px;
+  box-sizing: border-box;
+  border: solid 5px hotpink;
+  line-height: 0;
+  margin-block-start: 3px;
+  margin-block-end: 5px;
+}
+.small {
+  width: 30px;
+  height: 30px;
+  border: solid 5px cyan;
+}
+.first {
+  align-self: baseline;
+}
+.last {
+  align-self: last baseline;
+}
+span {
+  width: 20px;
+  height: 20px;
+  box-sizing: border-box;
+  border: solid 5px orange;
+  display: inline-block;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.item')">
+
+<div style="writing-mode: vertical-rl; width: 600px; position: relative; display: grid; grid-template: 150px 150px 150px / 100px 100px 100px 100px;">
+  <div style="display: grid;
+              gap: 10px;
+              grid-column: 1 / span 2;
+              grid-row: 1 / span 3;
+              grid-template: subgrid / subgrid;
+              margin-block-start: 5px; margin-block-end: 10px;
+              border: solid black 5px;
+              padding-block-start: 10px; padding-block-end: 20px;">
+    <div style="display: grid;
+                gap: 20px;
+                grid-column: 1 / span 2;
+                grid-row: 1 / span 2;
+                grid-template: subgrid / subgrid;
+                margin-block-start: 3px; margin-block-end: 7px;
+                border: solid black 5px;
+                padding-block-start: 5px; padding-block-end: 10px;">
+      <div data-offset-x="514" class="item first">
+        <span></span><br><span></span>
+      </div>
+      <div data-offset-x="465" class="item last">
+        <span></span><br><span></span>
+      </div>
+      <div data-offset-x="387" class="item first">
+        <span></span><br><span></span>
+      </div>
+      <div data-offset-x="332" class="item last">
+        <span></span><br><span></span>
+      </div>
+    </div>
+    <div data-offset-x="242" class="item first">
+      <span></span><br><span></span>
+    </div>
+    <div data-offset-x="190" class="item last">
+      <span></span><br><span></span>
+    </div>
+  </div>
+  <div data-offset-x="534" class="item small first"></div>
+  <div data-offset-x="465" class="item small last"></div>
+  <div data-offset-x="407" class="item small first"></div>
+  <div data-offset-x="332" class="item small last"></div>
+  <div data-offset-x="262" class="item small first"></div>
+  <div data-offset-x="190" class="item small last"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-007.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-007.html
new file mode 100644
index 0000000000..f8477bea50
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-007.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/">
+<style>
+.item {
+  inline-size: 40px;
+  box-sizing: border-box;
+  border: solid 5px hotpink;
+  line-height: 0;
+  margin-block-start: 3px;
+  margin-block-end: 5px;
+}
+.small {
+  width: 20px;
+  height: 20px;
+  border: solid 5px cyan;
+}
+.first {
+  align-self: baseline;
+}
+.last {
+  align-self: last baseline;
+}
+.item.small.first {
+  block-size: 50px;
+}
+.item.small.last {
+  block-size: 100px;
+}
+span {
+  width: 20px;
+  height: 20px;
+  box-sizing: border-box;
+  border: solid 5px orange;
+  display: inline-block;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.item')">
+
+<div style="position: relative; display: grid; grid-template: auto auto auto / 100px 100px 100px 100px;">
+  <div style="display: grid;
+              gap: 10px;
+              grid-column: 1 / span 2;
+              grid-row: 1 / span 3;
+              grid-template: subgrid / subgrid;
+              margin-block-start: 5px; margin-block-end: 10px;
+              border: solid black 5px;
+              padding-block-start: 10px; padding-block-end: 20px;">
+    <div style="display: grid;
+                gap: 20px;
+                grid-column: 1 / span 2;
+                grid-row: 1 / span 2;
+                grid-template: subgrid / subgrid;
+                margin-block-start: 3px; margin-block-end: 7px;
+                border: solid black 5px;
+                padding-block-start: 5px; padding-block-end: 10px;">
+      <div data-offset-y="36" class="item first">
+        <span></span><br><span></span>
+      </div>
+      <div data-offset-y="58" class="item last">
+        <span></span><br><span></span>
+      </div>
+      <div data-offset-y="151" class="item first">
+        <span></span><br><span></span>
+      </div>
+      <div data-offset-y="181" class="item last">
+        <span></span><br><span></span>
+      </div>
+    </div>
+    <div data-offset-y="291" class="item first">
+      <span></span><br><span></span>
+    </div>
+    <div data-offset-y="321" class="item last">
+      <span></span><br><span></span>
+    </div>
+  </div>
+  <div data-offset-y="11" class="item small first"></div>
+  <div data-offset-y="3" class="item small last"></div>
+  <div data-offset-y="126" class="item small first"></div>
+  <div data-offset-y="126" class="item small last"></div>
+  <div data-offset-y="266" class="item small first"></div>
+  <div data-offset-y="266" class="item small last"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-008.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-008.html
new file mode 100644
index 0000000000..1ef23599f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-008.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/">
+<style>
+.item {
+  inline-size: 40px;
+  box-sizing: border-box;
+  border: solid 5px hotpink;
+  line-height: 0;
+  margin-block-start: 3px;
+  margin-block-end: 5px;
+}
+.small {
+  width: 20px;
+  height: 20px;
+  border: solid 5px cyan;
+}
+.first {
+  align-self: baseline;
+}
+.last {
+  align-self: last baseline;
+}
+.item.small.first {
+  block-size: 50px;
+}
+.item.small.last {
+  block-size: 100px;
+}
+span {
+  width: 20px;
+  height: 20px;
+  box-sizing: border-box;
+  border: solid 5px orange;
+  display: inline-block;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.item')">
+
+<div style="writing-mode: vertical-rl; width: 600px; position: relative; display: grid; grid-template: auto auto auto / 100px 100px 100px 100px;">
+  <div style="display: grid;
+              gap: 10px;
+              grid-column: 1 / span 2;
+              grid-row: 1 / span 3;
+              grid-template: subgrid / subgrid;
+              margin-block-start: 5px; margin-block-end: 10px;
+              border: solid black 5px;
+              padding-block-start: 10px; padding-block-end: 20px;">
+    <div style="display: grid;
+                gap: 20px;
+                grid-column: 1 / span 2;
+                grid-row: 1 / span 2;
+                grid-template: subgrid / subgrid;
+                margin-block-start: 3px; margin-block-end: 7px;
+                border: solid black 5px;
+                padding-block-start: 5px; padding-block-end: 10px;">
+      <div data-offset-x="514" class="item first">
+        <span></span><br><span></span>
+      </div>
+      <div data-offset-x="428" class="item last">
+        <span></span><br><span></span>
+      </div>
+      <div data-offset-x="325" class="item first">
+        <span></span><br><span></span>
+      </div>
+      <div data-offset-x="234" class="item last">
+        <span></span><br><span></span>
+      </div>
+    </div>
+    <div data-offset-x="131" class="item first">
+      <span></span><br><span></span>
+    </div>
+    <div data-offset-x="40" class="item last">
+      <span></span><br><span></span>
+    </div>
+  </div>
+  <div data-offset-x="524" class="item small first"></div>
+  <div data-offset-x="393" class="item small last"></div>
+  <div data-offset-x="335" class="item small first"></div>
+  <div data-offset-x="199" class="item small last"></div>
+  <div data-offset-x="141" class="item small first"></div>
+  <div data-offset-x="5" class="item small last"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-009.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-009.html
new file mode 100644
index 0000000000..b7bf46d874
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-009.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/">
+<style>
+.item {
+  writing-mode: vertical-rl;
+  block-size: 80px;
+  box-sizing: border-box;
+  border: solid 5px hotpink;
+  line-height: 0;
+  margin-block-start: 10px;
+  margin-block-end: 15px;
+}
+.small {
+  width: 20px;
+  height: 20px;
+  border: solid 5px cyan;
+}
+.first {
+  justify-self: baseline;
+}
+.last {
+  justify-self: last baseline;
+}
+span {
+  width: 20px;
+  height: 20px;
+  box-sizing: border-box;
+  border: solid 5px orange;
+  display: inline-block;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.item')">
+
+<div style="width: 600px; position: relative; display: grid; grid-auto-flow: column; grid-template: 100px 100px 100px 100px / auto auto auto;">
+  <div style="display: grid;
+              grid-auto-flow: column;
+              gap: 10px;
+              grid-column: 1 / span 3;
+              grid-row: 1 / span 2;
+              grid-template: subgrid / subgrid;
+              margin-inline-start: 5px; margin-inline-end: 10px;
+              border: solid black 5px;
+              padding-inline-start: 10px; padding-inline-end: 20px;">
+    <div style="display: grid;
+                direction: rtl;
+                grid-auto-flow: column;
+                gap: 20px;
+                grid-column: 1 / span 2;
+                grid-row: 1 / span 2;
+                grid-template: subgrid / subgrid;
+                margin-inline-start: 3px; margin-inline-end: 7px;
+                border: solid black 5px;
+                padding-inline-start: 5px; padding-inline-end: 10px;">
+      <div data-offset-x="292" class="item first">
+        <span></span><br><span></span>
+      </div>
+      <div data-offset-x="237" class="item last">
+        <span></span><br><span></span>
+      </div>
+      <div data-offset-x="112" class="item first">
+        <span></span><br><span></span>
+      </div>
+      <div data-offset-x="57" class="item last">
+        <span></span><br><span></span>
+      </div>
+    </div>
+    <div data-offset-x="475" class="item first">
+      <span></span><br><span></span>
+    </div>
+    <div data-offset-x="420" class="item last">
+      <span></span><br><span></span>
+    </div>
+  </div>
+  <div data-offset-x="177" class="item small first"></div>
+  <div data-offset-x="102" class="item small last"></div>
+  <div data-offset-x="357" class="item small first"></div>
+  <div data-offset-x="282" class="item small last"></div>
+  <div data-offset-x="540" class="item small first"></div>
+  <div data-offset-x="465" class="item small last"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-010.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-010.html
new file mode 100644
index 0000000000..fde522c57a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-010.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Test: Subgrid with baseline-aligned standalone axis</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+body {
+  margin: 0;
+  padding: 0;
+  font: 15px/1 Ahem;
+}
+div {
+  align-items: baseline;
+  display: inline-grid;
+  grid-template: 30px / 60px;
+}
+.subgrid { grid-template: subgrid / repeat(2, 30px) }
+.item { grid-template: auto / subgrid }
+.item:nth-child(2) { font-size: 30px }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.item')">
+<div>
+  <div class="subgrid">
+    <div class="item" data-offset-y="12" data-expected-height="15">X</div>
+    <div class="item" data-offset-y="0" data-expected-height="30">X</div>
+  </div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-011.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-011.html
new file mode 100644
index 0000000000..098145cd04
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-011.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Test: Subgrid with baseline-aligned standalone axis</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<style>
+body {
+  margin: 0;
+  padding: 0;
+  font: 15px/1 Ahem;
+}
+div {
+  align-items: baseline;
+  display: inline-grid;
+  grid-template-columns: repeat(2, auto);
+}
+div > div { grid-template-columns: subgrid }
+.subgrid { grid-column: 1 / -1 }
+.item:nth-child(2) { font-size: 30px }
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.item')">
+<div>
+  <div class="subgrid">
+    <div class="item" data-offset-y="12" data-expected-height="15">X</div>
+    <div class="item" data-offset-y="0" data-expected-height="30">X</div>
+  </div>
+</div>
+</body>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-012.html b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-012.html
new file mode 100644
index 0000000000..e6348411f5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/subgrid-baseline-012.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Test: Baseline-aligned subgridded item</title>
+<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#subgrid-box-alignment">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+.grid {
+  display: inline-grid;
+  background: red;
+}
+.subgrid {
+  display: grid;
+  grid-template-rows: subgrid;
+  writing-mode: vertical-rl;
+}
+.item {
+  align-self: baseline;
+  background: green;
+  height: 100px;
+  width: 100px;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="grid">
+  <div class="subgrid">
+    <div class="item"></div>
+  </div>
+</div>
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..f43c6f785d
--- /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/#subgrid-edge-placeholders">
+<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..aa905954b9
--- /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/#subgrid-edge-placeholders">
+<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-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>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-003-ref.html b/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-003-ref.html
new file mode 100644
index 0000000000..b8038a2b50
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-003-ref.html
@@ -0,0 +1,60 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: out-of-flow subgridded items properly map repetitions</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>
+
+.grid {
+  display: grid;
+  grid-template: repeat(5, 10px) repeat(5, 10px) / repeat(5, 10px) repeat(5, 10px);
+  background: grey;
+  border: 1px solid;
+  width: 100px;
+  height: 100px;
+}
+
+.grid-item {
+  width: 10px;
+  height: 10px;
+  background: orange;
+  border: 1px solid;
+}
+
+.rtl { direction:rtl; }
+
+.ltr { direction:ltr; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid rtl">
+  <div class="grid-item" style="grid-column: 10; grid-row: 10;"></div>
+  <div class="grid-item" style="grid-column: 9; grid-row: 9;"></div>
+  <div class="grid-item" style="grid-column: 8; grid-row: 8;"></div>
+  <div class="grid-item" style="grid-column: 7; grid-row: 7;"></div>
+  <div class="grid-item" style="grid-column: 6; grid-row: 6;"></div>
+  <div class="grid-item" style="grid-column: 5; grid-row: 5;"></div>
+  <div class="grid-item" style="grid-column: 4; grid-row: 4;"></div>
+  <div class="grid-item" style="grid-column: 3; grid-row: 3;"></div>
+  <div class="grid-item" style="grid-column: 2; grid-row: 2;"></div>
+  <div class="grid-item" style="grid-column: 1; grid-row: 1;"></div>
+</div>
+
+<div class="grid ltr">
+  <div class="grid-item" style="grid-column: 10; grid-row: 10;"></div>
+  <div class="grid-item" style="grid-column: 9; grid-row: 9;"></div>
+  <div class="grid-item" style="grid-column: 8; grid-row: 8;"></div>
+  <div class="grid-item" style="grid-column: 7; grid-row: 7;"></div>
+  <div class="grid-item" style="grid-column: 6; grid-row: 6;"></div>
+  <div class="grid-item" style="grid-column: 5; grid-row: 5;"></div>
+  <div class="grid-item" style="grid-column: 4; grid-row: 4;"></div>
+  <div class="grid-item" style="grid-column: 3; grid-row: 3;"></div>
+  <div class="grid-item" style="grid-column: 2; grid-row: 2;"></div>
+  <div class="grid-item" style="grid-column: 1; grid-row: 1;"></div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-003.html b/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-003.html
new file mode 100644
index 0000000000..1df5512d19
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/subgrid/writing-directions-003.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Grid Test: out-of-flow subgridded items properly map repetitions</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-003-ref.html">
+  <style>
+
+.grid {
+  display: grid;
+  grid-template: repeat(5, 10px) repeat(5, 10px) / repeat(5, 10px) repeat(5, 10px);
+  width: 100px;
+  height: 100px;
+  border: 1px solid;
+  background: grey;
+}
+
+.subgrid {
+  position: relative;
+  display: grid;
+  grid-template: subgrid / subgrid;
+  grid-column: span 10;
+  grid-row: span 10;
+}
+
+.grid-item {
+  width: 10px;
+  height: 10px;
+  background: orange;
+  border: 1px solid;
+  position: absolute;
+}
+
+.rtl { direction:rtl; }
+
+.ltr { direction:ltr; }
+
+  </style>
+</head>
+<body>
+
+<div class="grid">
+  <div class="subgrid rtl">
+    <div class="grid-item" style="grid-column: 10; grid-row: 10;"></div>
+    <div class="grid-item" style="grid-column: 9; grid-row: 9;"></div>
+    <div class="grid-item" style="grid-column: 8; grid-row: 8;"></div>
+    <div class="grid-item" style="grid-column: 7; grid-row: 7;"></div>
+    <div class="grid-item" style="grid-column: 6; grid-row: 6;"></div>
+    <div class="grid-item" style="grid-column: 5; grid-row: 5;"></div>
+    <div class="grid-item" style="grid-column: 4; grid-row: 4;"></div>
+    <div class="grid-item" style="grid-column: 3; grid-row: 3;"></div>
+    <div class="grid-item" style="grid-column: 2; grid-row: 2;"></div>
+    <div class="grid-item" style="grid-column: 1; grid-row: 1;"></div>
+  </div>
+</div>
+
+<div class="grid rtl">
+  <div class="subgrid ltr">
+    <div class="grid-item" style="grid-column: 10; grid-row: 10;"></div>
+    <div class="grid-item" style="grid-column: 9; grid-row: 9;"></div>
+    <div class="grid-item" style="grid-column: 8; grid-row: 8;"></div>
+    <div class="grid-item" style="grid-column: 7; grid-row: 7;"></div>
+    <div class="grid-item" style="grid-column: 6; grid-row: 6;"></div>
+    <div class="grid-item" style="grid-column: 5; grid-row: 5;"></div>
+    <div class="grid-item" style="grid-column: 4; grid-row: 4;"></div>
+    <div class="grid-item" style="grid-column: 3; grid-row: 3;"></div>
+    <div class="grid-item" style="grid-column: 2; grid-row: 2;"></div>
+    <div class="grid-item" style="grid-column: 1; grid-row: 1;"></div>
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/support/colors-8x16.png b/testing/web-platform/tests/css/css-grid/support/colors-8x16.png
new file mode 100644
index 0000000000..596fdb389d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/support/colors-8x16.png
diff --git a/testing/web-platform/tests/css/css-grid/support/grid-child-utils.js b/testing/web-platform/tests/css/css-grid/support/grid-child-utils.js
new file mode 100644
index 0000000000..5e0c5caad1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/support/grid-child-utils.js
@@ -0,0 +1,45 @@
+// Any copyright is dedicated to the Public Domain.
+// https://creativecommons.org/publicdomain/zero/1.0/
+
+const gridChildHelperRow = "row";
+const gridChildHelperCol = "col";
+
+// Helper for building testcases for grid-template-* with a child div in
+// multiple positions. Prop is expected to be one of gridChildHelperRow or
+// gridChildHelperCol, to select testing grid rows or grid columns,
+// respectively.
+// The child div is found by the id of 'child'.
+function GridChildHelper(prop, style){
+  this.child = document.getElementById("child");
+  this.style = style;
+  this.prop = prop;
+}
+
+// Runs a test for computed values on the property the helper object was
+// constructed with. The childStyle is used for choosing the grid row/column
+// of the child div.
+// expected is passed as-is to the computed value test.
+// The child style is appended to the test name in such a way that different
+// tests for the same parent style but different child style values will have
+// different test names.
+GridChildHelper.prototype.runTest = function(childStyle, expected) {
+  'use strict';
+  const childProps = {
+    [gridChildHelperCol]:"gridColumn",
+    [gridChildHelperRow]:"gridRow"
+  };
+  const childProp = childProps[this.prop];
+
+  const parentProps = {
+    [gridChildHelperCol]:"grid-template-columns",
+    [gridChildHelperRow]:"grid-template-rows"
+  };
+  const parentProp = parentProps[this.prop];
+
+  const oldChildStyle = this.child[childProp];
+  this.child.style[childProp] = childStyle;
+
+  test_computed_value(parentProp, this.style, expected, childProp + " = " + childStyle);
+
+  this.child[childProp] = oldChildStyle;
+}
diff --git a/testing/web-platform/tests/css/css-grid/table-grid-item-005.html b/testing/web-platform/tests/css/css-grid/table-grid-item-005.html
new file mode 100644
index 0000000000..4f217bc5f4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/table-grid-item-005.html
@@ -0,0 +1,60 @@
+<!doctype html>
+
+<meta charset="utf-8">
+<title>Table sizing inside a fixed sized grid</title>
+<link rel="help" href="https://crbug.com/667785">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+
+  .grid {
+    display: grid;
+    width: 400px;
+    height: 400px;
+    border: 1px solid black;
+    background: red;
+  }
+
+  .item {
+    display: table;
+    background: lime;
+  }
+
+  caption {
+    background: grey;
+  }
+
+</style>
+
+<pre>There should be no red areas:</pre>
+
+<p>Table with one cell</p>
+<div class="grid">
+  <div class="item">
+    table cell
+  </div>
+</div>
+
+<p>Empty table with caption</p>
+<div class="grid">
+  <table class="item">
+    <caption>caption</caption>
+  </table>
+</div>
+
+<p>Table with caption and cell</p>
+<div class="grid">
+  <table class="item">
+    <caption>caption</caption>
+    <tr><td>table cell</td></tr>
+  </table>
+</div>
+
+<script>
+  test(_ => {
+    for (let t of Array.from(document.body.querySelectorAll(".item"))) {
+      assert_equals(t.offsetWidth, 400, "table is as wide as the grid");
+      assert_equals(t.offsetHeight, 400, "table is as tall as the grid");
+    }
+  }, "<table> grid items should fill their grid area");
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/table-grid-item-dynamic-001-ref.html b/testing/web-platform/tests/css/css-grid/table-grid-item-dynamic-001-ref.html
new file mode 100644
index 0000000000..362904334a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/table-grid-item-dynamic-001-ref.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+div {
+  display: grid;
+  background-color: lime;
+}
+
+table {
+  margin-top: 100px;
+}
+</style>
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th>Relayout shouldn't grow this table</th>
+      </tr>
+    </thead>
+  </table>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/table-grid-item-dynamic-001.html b/testing/web-platform/tests/css/css-grid/table-grid-item-dynamic-001.html
new file mode 100644
index 0000000000..e87a3dfe9a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/table-grid-item-dynamic-001.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<meta charset="utf-8">
+<title>Table grid items with margins don't grow on incremental relayout</title>
+<link rel="author" href="mailto:mats@mozilla.com">
+<link rel="author" href="mailto:emilio@crisal.io">
+<link rel="author" href="https://mozilla.org">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1492315">
+<link rel="match" href="table-grid-item-dynamic-001-ref.html">
+<style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+div {
+  display: grid;
+  background-color: lime;
+}
+
+table {
+  margin-top: 100px;
+}
+</style>
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th>Relayout shouldn't grow this table</th>
+      </tr>
+    </thead>
+  </table>
+</div>
+<script>
+onload = function() {
+  let grid = document.querySelector("div");
+  grid.getBoundingClientRect();
+  document.body.style.width = "50vw";
+  grid.getBoundingClientRect();
+  document.body.style.width = "";
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/table-grid-item-dynamic-002-ref.html b/testing/web-platform/tests/css/css-grid/table-grid-item-dynamic-002-ref.html
new file mode 100644
index 0000000000..88fdfa71f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/table-grid-item-dynamic-002-ref.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+div {
+  display: grid;
+  background-color: lime;
+}
+
+table {
+  min-height: 100px;
+}
+</style>
+<div>
+  <table>
+    <caption>Table caption</caption>
+    <thead>
+      <tr>
+        <th>This table should shrink after setting a smaller min-height</th>
+      </tr>
+    </thead>
+  </table>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/table-grid-item-dynamic-002.html b/testing/web-platform/tests/css/css-grid/table-grid-item-dynamic-002.html
new file mode 100644
index 0000000000..fdec4e6b3b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/table-grid-item-dynamic-002.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<meta charset="utf-8">
+<title>Table grid items with min-height should shrink after setting a smaller min-height</title>
+<link rel="author" href="mailto:mats@mozilla.com">
+<link rel="author" href="mailto:emilio@crisal.io">
+<link rel="author" href="mailto:tlin@mozilla.com">
+<link rel="author" href="https://mozilla.org">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1527734">
+<link rel="match" href="table-grid-item-dynamic-002-ref.html">
+<style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+div {
+  display: grid;
+  background-color: lime;
+}
+
+table {
+  min-height: 500px;
+}
+</style>
+
+<div>
+  <table>
+    <caption>Table caption</caption>
+    <thead>
+      <tr>
+        <th>This table should shrink after setting a smaller min-height</th>
+      </tr>
+    </thead>
+  </table>
+</div>
+<script>
+onload = function() {
+  let grid = document.querySelector("div");
+  let table = grid.querySelector("table");
+  grid.getBoundingClientRect();
+  table.style.minHeight = "100px";
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/table-grid-item-dynamic-003-ref.html b/testing/web-platform/tests/css/css-grid/table-grid-item-dynamic-003-ref.html
new file mode 100644
index 0000000000..1de4ccea47
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/table-grid-item-dynamic-003-ref.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+div {
+  display: grid;
+  height: 100px;
+  background-color: lime;
+}
+
+table {
+  padding-top: 100px;
+  height: 100%;
+  box-sizing: content-box;
+  background-color: yellow;
+}
+</style>
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th>Relayout shouldn't grow this table</th>
+      </tr>
+    </thead>
+  </table>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/table-grid-item-dynamic-003.html b/testing/web-platform/tests/css/css-grid/table-grid-item-dynamic-003.html
new file mode 100644
index 0000000000..32b809c5dc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/table-grid-item-dynamic-003.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<meta charset="utf-8">
+<title>Table grid items with padding-top, percentage height, and box-sizing:content-box, don't grow on incremental relayout</title>
+<link rel="author" href="mailto:mats@mozilla.com">
+<link rel="author" href="mailto:emilio@crisal.io">
+<link rel="author" href="mailto:tlin@mozilla.com">
+<link rel="author" href="https://mozilla.org">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1521088">
+<link rel="match" href="table-grid-item-dynamic-003-ref.html">
+<style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+div {
+  display: grid;
+  height: 100px;
+  background-color: lime;
+}
+
+table {
+  padding-top: 100px;
+  height: 100%;
+  box-sizing: content-box;
+  background-color: yellow;
+}
+</style>
+
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th>Relayout shouldn't grow this table</th>
+      </tr>
+    </thead>
+  </table>
+</div>
+<script>
+onload = function() {
+  let grid = document.querySelector("div");
+  grid.getBoundingClientRect();
+  document.body.style.width = "50vw";
+  grid.getBoundingClientRect();
+  document.body.style.width = "";
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/table-grid-item-dynamic-004-ref.html b/testing/web-platform/tests/css/css-grid/table-grid-item-dynamic-004-ref.html
new file mode 100644
index 0000000000..9189fb5f7e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/table-grid-item-dynamic-004-ref.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+div {
+  display: grid;
+  height: 100px;
+  background-color: lime;
+}
+
+table {
+  padding-top: 100px;
+  width: 500px;
+  height: 100%;
+  box-sizing: content-box;
+  background-color: yellow;
+}
+</style>
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th>Relayout shouldn't grow this table</th>
+      </tr>
+    </thead>
+  </table>
+</div>
diff --git a/testing/web-platform/tests/css/css-grid/table-grid-item-dynamic-004.html b/testing/web-platform/tests/css/css-grid/table-grid-item-dynamic-004.html
new file mode 100644
index 0000000000..537d85ad34
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/table-grid-item-dynamic-004.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<meta charset="utf-8">
+<title>Table grid items with padding-top, definite width, percentage height, and box-sizing:content-box, don't grow on incremental relayout</title>
+<link rel="author" href="mailto:mats@mozilla.com">
+<link rel="author" href="mailto:emilio@crisal.io">
+<link rel="author" href="mailto:tlin@mozilla.com">
+<link rel="author" href="https://mozilla.org">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1521088">
+<link rel="match" href="table-grid-item-dynamic-004-ref.html">
+<style>
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+div {
+  display: grid;
+  height: 100px;
+  background-color: lime;
+}
+
+table {
+  padding-top: 100px;
+  width: 500px;
+  height: 100%;
+  box-sizing: content-box;
+  background-color: yellow;
+}
+</style>
+
+<div>
+  <table>
+    <thead>
+      <tr>
+        <th>Relayout shouldn't grow this table</th>
+      </tr>
+    </thead>
+  </table>
+</div>
+<script>
+onload = function() {
+  let grid = document.querySelector("div");
+  grid.getBoundingClientRect();
+  document.body.style.width = "50vw";
+  grid.getBoundingClientRect();
+  document.body.style.width = "";
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-grid/test-plan/index.html b/testing/web-platform/tests/css/css-grid/test-plan/index.html
new file mode 100644
index 0000000000..039f3a87c1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/test-plan/index.html
@@ -0,0 +1,558 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Grid Layout Module Level 1 Test Plan</title>
+    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>
+    <!--
+      === NOTA BENE ===
+      For the three scripts below, if your spec resides on dev.w3 you can check them
+      out in the same tree and use relative links so that they'll work offline,
+     -->
+    <script src='http://www.w3.org/Tools/respec/respec-w3c-common' class='remove' async></script>
+    <script class='remove'>
+      var respecConfig = {
+          publishDate: "2015-07-10",
+          shortName: "css-grid-1-test-plan",
+          specStatus: "unofficial",
+          editors: [
+            {
+              name: "Manuel Rego Casasnovas", mailto: "rego@igalia.com",
+              company: "Igalia, S.L.", companyURL: "http://www.igalia.com/"
+            },
+          ],
+          testSuiteURI: "http://test.csswg.org/suites/css-grid-1_dev/nightly-unstable/",
+      };
+    </script>
+    <style>
+    a.bibref,
+    #references dt {
+      text-transform: uppercase;
+    }
+    </style>
+  </head>
+  <body>
+    <section id='abstract'>
+      <p>
+        This document is intended to be used as a guideline for the testing
+        activities related to the CSS Grid Layout Level 1 spec
+        [[!css3-grid-layout]]. Its main goal is to provide an overview of the
+        general testing areas, possible caveats and testing aspects not
+        immediately apparent from the spec. Also, it provides a means of
+        tracking the progress of the CSS Grid Layout spec testing.
+      </p>
+      <p>
+        This document is not meant to replace the spec in determining the
+        normative and non-normative assertions to be tested, but rather
+        complement it.
+      </p>
+    </section>
+
+    <section>
+      <h2>Introduction</h2>
+      <p>
+        As CSS moved away from the monolithic development of CSS 2.1 to the
+        modular development of CSS 3, the number of proposed new features and
+        the complexity of the layout landscape have increased dramatically.
+        While this directly translates to increased flexibility and agility in
+        adopting and implementing new CSS features, it also increases the
+        complexity of testing CSS features and the need for coordinating the
+        testing efforts. Also, the need for testing coordination increases as
+        crowd-sourcing efforts like
+        <a href="http://testthewebforward.org/" target="_blank">Test the Web
+        Forward</a> present people less familiar with the processes and
+        policies of the W3C with the opportunity to contribute new tests.
+      </p>
+      <p>
+        Except when defining new behaviors or redefining old behaviors, the
+        implicit assumption for new CSS modules is that they play nicely with
+        other modules or properties defined in CSS 2.1 [[!CSS21]]. As CSS Grid
+        Layout is a spec that touches many aspects of layout, styling and
+        CSSOM, it's not unreasonable to want to test the spec against these
+        implicit assumptions, too.
+      </p>
+      <p>
+        This testing strategy document is meant to complement the CSS Grid
+        Layout spec and the existing test suite by providing an overview of
+        the testing areas (especially the less apparent ones) and tracking
+        the progress of the testing activities against these test areas.
+      </p>
+    </section>
+
+    <section>
+      <h2>Goals</h2>
+      <p>
+        To ensure a comprehensive test suite with useful, high quality tests,
+        a number of goals are proposed. They range from process goals (how to
+        conduct testing) to implementation goals (how to write good tests).
+      </p>
+      <section>
+        <h3>Enabling easy test contribution</h3>
+        <p>
+          An important vector in successfully testing CSS Grid Layout is to
+          enable easy test contributions, both from W3C partners and from
+          non-W3C members that wish to contribute. This is achieved by clearly
+          marking and explaining the areas that need testing, linking to
+          existing tests, and general testing progress.
+        </p>
+      </section>
+      <section>
+        <h3>Providing guidance on testing</h3>
+        <p>
+          In order to increase the quality of the test contributions, this
+          document offers a set of guidelines for conducting testing (see
+          <a href="#approach" class="sectionRef"></a>) and a testing progress
+          tracker to increase the surface coverage of tests (see
+          <a href="#test-progress-tracking" class="sectionRef"></a>).
+        </p>
+      </section>
+      <section>
+        <h3>Creating automation-friendly tests</h3>
+        <p>
+          In terms of actual tests produced for the CSS Grid Layout
+          specification, the main goal is to ensure that most tests are
+          automatable (i.e. they're either reftests or use
+          <code>testharness.js</code>). Even where manual tests are absolutely
+          necessary they should be written so that they can be easily
+          automated &ndash; as there are ongoing efforts to make WebDriver
+          [[webdriver]] automated tests a first class citizen in W3C testing.
+          This means that even if a manual test requires user interaction,
+          the validation or PASS/FAIL conditions should still be clear enough
+          as to allow automatic validation if said interaction is later
+          automated.
+        </p>
+      </section>
+    </section>
+    <section>
+		<h2>Approach</h2>
+		<p>
+            As spec testing cannot be realistically separated from testing a
+            particular implementation (except for the very simple cases), the
+            approach proposed for testing is one that tries to first cover as
+            many areas as possible, instead of deep diving on a certain
+            feature or aspect of the spec first. A side benefit of this
+            approach is that the spec tests can be used at any time to gauge
+            the level of support of a certain implementation.
+        </p>
+        <p>
+            Having this <em>breadth-first</em> approach in mind, tests will be
+            created for the testing areas listed in <a href="#testing-areas"
+            class="sectionRef"></a>. Testing will be done in multiple passes,
+            each aimed at covering more specific edge-cases.
+        </p>
+	</section>
+	<section>
+      <h2>Testing areas</h2>
+      <section>
+        <h3>Explicit testing areas</h3>
+        <p>
+          These are testing areas normatively defined by the spec. They cover
+          things explicitly or implicitly defined in the CSS Grid Layout spec.
+          Please note that while detailed, this list is not necessarily
+          exhaustive and normative behaviors may not be contained in it.
+          When in doubt, consult the CSS Grid Layout spec or ask a question on
+          the <a href="http://lists.w3.org/Archives/Public/www-style/">mailing
+          list</a> adding <kbd>[css-grid]</kbd> to the subject.
+        </p>
+        <section>
+          <h4>Grid Containers (<kbd>grid-model</kbd>)</h4>
+          <ul>
+            <li>
+              <code>grid</code> and <code>inline-grid</code> values for
+              <code>display</code> property
+              [<a href="https://github.com/w3c/csswg-test/issues/627">#627</a>].
+            </li>
+            <li>
+              Grid container’s margins do not collapse with the margins of its
+              contents
+              [<a href="https://github.com/w3c/csswg-test/issues/661">#661</a>].
+            </li>
+            <li>
+              <code>column-*</code> properties have no effect on a grid
+              container
+              [<a href="https://github.com/w3c/csswg-test/issues/628">#628</a>].
+            </li>
+            <li>
+              <code>float</code> and <code>clear</code> have no effect on a
+              grid item
+              [<a href="https://github.com/w3c/csswg-test/issues/629">#629</a>].
+            </li>
+            <li>
+              <code>float</code> affects to the computed value of display on
+              grid items
+              [<a href="https://github.com/w3c/csswg-test/issues/630">#630</a>].
+            </li>
+            <li>
+              <code>vertical-align</code> has no effect on a grid item
+              [<a href="https://github.com/w3c/csswg-test/issues/631">#631</a>].
+            </li>
+            <li>
+              <code>first-line</code> and <code>first-letter</code> do not
+              apply to grid containers
+              [<a href="https://github.com/w3c/csswg-test/issues/632">#632</a>].
+            </li>
+            <li>
+              Sizing grid containers
+              [<a href="https://github.com/w3c/csswg-test/issues/638">#638</a>].
+            </li>
+          </ul>
+        </section>
+        <section>
+          <h4>Grid Items (<kbd>grid-items</kbd>)</h4>
+          <ul>
+            <li>
+              Each child of a grid container becomes a grid item
+              [<a href="https://github.com/w3c/csswg-test/issues/639">#639</a>].
+            </li>
+            <li>
+              Each contiguous run of text that is directly contained inside
+              grid container is wrapped in an anonymous grid item
+              [<a href="https://github.com/w3c/csswg-test/issues/640">#640</a>].
+            </li>
+            <li>
+              <code>visibility</code> property.
+              <div class="note">Still undefined in the spec.</div>
+            </li>
+            <li>
+              <code>order</code> property
+              [<a href="https://github.com/w3c/csswg-test/issues/641">#641</a>].
+            </li>
+            <li>
+              Static position
+              [<a href="https://github.com/w3c/csswg-test/issues/642">#642</a>
+              &amp;
+              <a href="https://github.com/w3c/csswg-test/issues/643">#643</a>].
+            </li>
+            <li>
+              Z-axis ordering:
+              <ul>
+                <li>
+                  <code>z-index</code> property
+                  [<a href="https://github.com/w3c/csswg-test/issues/677">#677</a>].
+                </li>
+              </ul>
+            </li>
+            <li>
+              Minimum size of grid items
+              [<a href="https://github.com/w3c/csswg-test/issues/799">#799</a>].
+            </li>
+          </ul>
+        </section>
+        <section>
+          <h4>The Explicit Grid (<kbd>grid-definition</kbd>)</h4>
+          <ul>
+            <li>
+              Track sizing:
+              <ul>
+                <li>
+                  <code>grid-template-columns</code> and
+                  <code>grid-template-rows</code> properties
+                  [<a href="https://github.com/w3c/csswg-test/issues/644">#644</a>].
+                </li>
+                <li>
+                  <kbd>&lt;track-size&gt;</kbd>: <code>length</code>,
+                  <code>percentage</code>, <code>max-content</code>,
+                  <code>min-content</code>, <code>minmax(min, max)</code>,
+                  <code>auto</code>.
+                </li>
+                <li>
+                  Named grid lines (<kbd>&lt;custom-ident&gt;</kbd>)
+                  [<a href="https://github.com/w3c/csswg-test/issues/645">#645</a>].
+                </li>
+                <li>
+                  <code>repeat()</code> notation
+                  [<a href="https://github.com/w3c/csswg-test/issues/646">#646</a>].
+                </li>
+                <li>
+                  Flexible lengths: <code>fr</code> unit
+                  [<a href="https://github.com/w3c/csswg-test/issues/647">#647</a>].
+                </li>
+                <li>
+                  <code>subgrid</code> keyword.
+                  <div class="note">Subgrid feature is currently at-risk.</div>
+                </li>
+                <li>
+                  Resolved values
+                  [<a href="https://github.com/w3c/csswg-test/issues/648">#648</a>].
+                </li>
+              </ul>
+            </li>
+            <li>
+              Named areas:
+              <ul>
+                <li>
+                  <code>grid-template-areas</code> property
+                  [<a href="https://github.com/w3c/csswg-test/issues/649">#649</a>].
+                </li>
+                <li>
+                  Implicit named grid lines
+                  [<a href="https://github.com/w3c/csswg-test/issues/650">#650</a>].
+                </li>
+                <li>
+                  Implicit named areas
+                  [<a href="https://github.com/w3c/csswg-test/issues/651">#651</a>].
+                </li>
+              </ul>
+            </li>
+            <li>
+              Explicit grid shorthand:
+              <ul>
+                <li>
+                  <code>grid-template</code> property
+                  [<a href="https://github.com/w3c/csswg-test/issues/652">#652</a>].
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </section>
+        <section>
+          <h4>The Implicit Grid (<kbd>implicit-grids</kbd>)</h4>
+          <ul>
+            <li>
+              <code>grid-auto-rows</code> and <code>grid-auto-columns</code>
+              properties
+              [<a href="https://github.com/w3c/csswg-test/issues/662">#662</a>].
+            </li>
+            <li>
+              <code>grid-auto-flow</code> property
+              [<a href="https://github.com/w3c/csswg-test/issues/663">#663</a>].
+            </li>
+          </ul>
+        </section>
+        <section>
+          <h4>Grid Definition Shorthand (<kbd>grid-shorthand</kbd>)</h4>
+          <ul>
+            <li>
+              <code>grid</code> property
+              [<a href="https://github.com/w3c/csswg-test/issues/664">#664</a>].
+            </li>
+          </ul>
+        </section>
+        <section>
+          <h4>Placing Grid Items (<kbd>placement</kbd>)</h4>
+          <ul>
+            <li>
+              Common patterns:
+              <ul>
+                <li>
+                  Named areas
+                  [<a href="https://github.com/w3c/csswg-test/issues/665">#665</a>].
+                </li>
+                <li>
+                  Numeric indexes and spans
+                  [<a href="https://github.com/w3c/csswg-test/issues/666">#666</a>].
+                </li>
+                <li>
+                  Named lines and spans
+                  [<a href="https://github.com/w3c/csswg-test/issues/667">#667</a>].
+                </li>
+                <li>
+                  Auto placement
+                  [<a href="https://github.com/w3c/csswg-test/issues/668">#668</a>].
+                </li>
+                <li>
+                  Auto sizing siblings.
+                  <div class="note">Subgrid feature is currently at-risk.</div>
+                </li>
+              </ul>
+            </li>
+            <li>
+              Line-based placement:
+              <ul>
+                <li>
+                  <code>grid-row-start</code>, <code>grid-column-start</code>,
+                  <code>grid-row-end</code> and <code>grid-column-end</code>
+                  properties
+                  [<a href="https://github.com/w3c/csswg-test/issues/669">#669</a>].
+                </li>
+                <li>
+                  Grid placement conflict handling
+                  [<a href="https://github.com/w3c/csswg-test/issues/670">#670</a>].
+                </li>
+              </ul>
+            </li>
+            <li>
+              Placement shorthands:
+              <ul>
+                <li>
+                  <code>grid-column</code>, <code>grid-row</code> and
+                  <code>grid-area</code> properties
+                  [<a href="https://github.com/w3c/csswg-test/issues/671">#671</a>].
+                </li>
+              </ul>
+            </li>
+            <li>
+              Absolutely-positioned grid items
+              [<a href="https://github.com/w3c/csswg-test/issues/672">#672</a>].
+            </li>
+            <li>
+              Grid item placement algorithm
+              [<a href="https://github.com/w3c/csswg-test/issues/683">#683</a>].
+            </li>
+          </ul>
+        </section>
+        <section>
+          <h4>Alignment (<kbd>alignment</kbd>)</h4>
+          <ul>
+            <li>
+              Aligning with auto margins
+              [<a href="https://github.com/w3c/csswg-test/issues/673">#673</a>].
+            </li>
+            <li>
+              Row-axis alignment:
+              <ul>
+                <li>
+                  <code>justify-self</code> and <code>justify-items</code>
+                  properties.
+                  [<a href="https://github.com/w3c/csswg-test/issues/674">#674</a>].
+                </li>
+              </ul>
+            </li>
+            <li>
+              Column-axis alignment:
+              <ul>
+                <li>
+                  <code>align-self</code> and <code>align-items</code>
+                  properties
+                  [<a href="https://github.com/w3c/csswg-test/issues/675">#675</a>].
+                </li>
+              </ul>
+            </li>
+            <li>
+              Aligning the grid:
+              <ul>
+                <li>
+                  <code>justify-content</code> and <code>align-content</code>
+                  properties
+                  [<a href="https://github.com/w3c/csswg-test/issues/676">#676</a>].
+                </li>
+              </ul>
+            </li>
+            <li>
+              Grid baselines
+              [<a href="https://github.com/w3c/csswg-test/issues/678">#678</a>].
+            </li>
+          </ul>
+        </section>
+        <section>
+          <h4>Track Sizing Algorithm (<kbd>layout-algorithm</kbd>)</h4>
+          <ul>
+            <li>
+              Content-based track sizing
+              [<a href="https://github.com/w3c/csswg-test/issues/679">#679</a>].
+            </li>
+            <li>
+              Grow tracks using free space
+              [<a href="https://github.com/w3c/csswg-test/issues/680">#680</a>].
+            </li>
+            <li>
+              Flexible tracks
+              [<a href="https://github.com/w3c/csswg-test/issues/681">#681</a>].
+            </li>
+          </ul>
+        </section>
+        <section>
+          <h4>Fragmenting Grid Layout (<kbd>pagination</kbd>)</h4>
+          <ul>
+            <li>
+              Fragmentation algorithm
+              [<a href="https://github.com/w3c/csswg-test/issues/682">#682</a>].
+            </li>
+          </ul>
+        </section>
+      </section>
+      <section>
+        <h3>Specification examples</h3>
+        <p>
+          The spec examples should become tests (maybe some of them need to be
+          defined as manual tests). This will allow to increase the coverage
+          with more tests, but also to check the spec itself.
+        </p>
+      </section>
+      <section>
+        <h3>Implicit testing areas</h3>
+        <p>
+          These are testing areas either normatively defined in other specs
+          that explicitly refer to the CSS Grid Layout spec or simply not
+          explicitly defined, but implied by various aspects of the spec.
+          Please note that while detailed, this list is not necessarily
+          exhaustive and normative behaviors may not be contained in it. When
+          in doubt, consult the CSS Grid Layout spec or ask a question on the
+          <a href="http://lists.w3.org/Archives/Public/www-style/">mailing
+          list</a> adding <kbd>[css-grid]</kbd> to the subject.
+        </p>
+        <p>
+          Below is the list of implicit testing areas:
+        </p>
+        <ul>
+          <li>
+            CSS Grid Layout and other layout models:
+            <ul>
+              <li>Floats [[!CSS21]].</li>
+              <li>Positioned elements [[!css3-positioning]].</li>
+              <li>CSS Flexbox [[!css3-flexbox]].</li>
+              <li>CSS Multicolumn [[!css3-multicol]].</li>
+              <li>CSS Regions [[!css3-regions]].</li>
+              <li>CSS Shapes [[!css-shapes-1]].</li>
+            </ul>
+          </li>
+          <li>
+            CSS Grid Layout and different type of elements [[!html5]]:
+            <ul>
+              <li><code>img</code>.</li>
+              <li><code>video</code>.</li>
+              <li><code>iframe</code>.</li>
+              <li><code>canvas</code>.</li>
+              <li><code>table</code>.</li>
+            </ul>
+          </li>
+          <li>
+            Dynamic content:
+            <ul>
+              <li>Changing the content of the grid items at runtime.</li>
+              <li>
+                Interactive content <code>contentEditable</code>,
+                <code>designMode</code> and input elements [[!html5]].
+              </li>
+            </ul>
+          </li>
+          <li>Writing modes [[!css3-writing-modes]].</li>
+          <li>Transforms [[!css3-transforms]].</li>
+          <li>
+            Transitions [[!css3-transitions]] and animations
+            [[!css3-animations]].
+          </li>
+          <li>Pseudo-elements in grid items [[!CSS21]].</li>
+        </ul>
+      </section>
+    </section>
+    <section>
+      <h2>People and responsibilities</h2>
+      <p>
+        Below is a list of people you should reach out to if you have any
+        questions related to this document or testing CSS Grid Layout in
+        general:
+      </p>
+      <ul>
+        <li>Manuel Rego &ndash; Test Coordinator for CSS Grid Layout</li>
+      </ul>
+    </section>
+    <section>
+      <h2>Test progress tracking</h2>
+      <p>
+        Currently test progress tracking is done via GitHub
+        <a href="https://github.com/w3c/csswg-test/issues?labels=spec%3Agrid&amp;milestone=&amp;page=1&amp;state=open">
+        milestones and issues</a>.
+        <!--
+          FIXME: This link doesn't work yet.
+          TODO:
+          * Label "spec:grid" has to be created
+            (https://github.com/w3c/csswg-test/labels)
+          * Milestone "css-grid-1_dev" has to be created
+            https://github.com/w3c/csswg-test/milestones
+          * Once issues are created, add references from the different
+            sections.
+        -->
+      </p>
+    </section>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/whitespace-reattach.html b/testing/web-platform/tests/css/css-grid/whitespace-reattach.html
new file mode 100644
index 0000000000..f97934eb30
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/whitespace-reattach.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1308400">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="target" style="display: grid; grid-template: 100px / 100px 100px; background: red; width: 100px;">
+text
+</div>
+<script>
+document.body.offsetTop;
+const el = document.createElement('div');
+el.style.background = 'green';
+const target = document.getElementById('target');
+const content = target.childNodes[0].splitText(1);
+target.replaceChild(el, content);
+</script>