Adding upstream version 110.0.1.upstream/110.0.1 upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 09:22:09 +0000
commit: 43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree: 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-grid/abspos
parent: Initial commit. (diff)
download: firefox-upstream.tar.xz
firefox-upstream.zip
273 files changed, 18254 insertions, 0 deletions
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..803539a069
--- /dev/null
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-025-ref.html
@@ -0,0 +1,10 @@
+<!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;display: inline-block;"></div>
+    <div style="background-color:blue; height: 100px; width: 80px;position: relative;display: inline-block;left: 146px;"></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");
+  });
+}
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 09:22:09 +0000
commit	43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree	620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-grid/abspos
parent	Initial commit. (diff)
download	firefox-upstream.tar.xz firefox-upstream.zip