Add m-esr52 at 52.6.0

author: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
committer: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
commit: 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree: 10027f336435511475e392454359edea8e25895d /layout/reftests/w3c-css/submitted/align3
parent: 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download: UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
140 files changed, 14105 insertions, 0 deletions
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-001-ref.html
new file mode 100644
index 000000000..f96f07c38
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-001-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-001.html
new file mode 100644
index 000000000..3e1819193
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-001.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row flex container, with various "align-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-content-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row wrap;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+      /* This "align-self" only gets a chance to take effect when our container
+         has "align-content: stretch". In that case, it helps us verify that
+         the container's "align-content: stretch" is actually taking effect
+         and stretching the flex line (and giving us space to center in). */
+      align-self: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-002-ref.html
new file mode 100644
index 000000000..93a027b09
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-002-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--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-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-002.html
new file mode 100644
index 000000000..ad3437473
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-002.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row wrap-reverse flex container, with various "align-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-content-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row wrap-reverse;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+      /* This "align-self" only gets a chance to take effect when our container
+         has "align-content: stretch". In that case, it helps us verify that
+         the container's "align-content: stretch" is actually taking effect
+         and stretching the flex line (and giving us space to center in). */
+      align-self: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-003-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-003-ref.html
new file mode 100644
index 000000000..383d181c9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-003-ref.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 8px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-003.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-003.html
new file mode 100644
index 000000000..4ed94d087
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-003.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row-reverse flex container, with various "align-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-content-003-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row-reverse wrap;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+      /* This "align-self" only gets a chance to take effect when our container
+         has "align-content: stretch". In that case, it helps us verify that
+         the container's "align-content: stretch" is actually taking effect
+         and stretching the flex line (and giving us space to center in). */
+      align-self: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-004-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-004-ref.html
new file mode 100644
index 000000000..3702330bc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-004-ref.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 8px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--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-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-004.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-004.html
new file mode 100644
index 000000000..d859af211
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-004.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row-reverse wrap-reverse flex container, with various "align-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-content-004-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row-reverse wrap-reverse;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+      /* This "align-self" only gets a chance to take effect when our container
+         has "align-content: stretch". In that case, it helps us verify that
+         the container's "align-content: stretch" is actually taking effect
+         and stretching the flex line (and giving us space to center in). */
+      align-self: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-005-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-005-ref.html
new file mode 100644
index 000000000..d2d5a99a8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-005-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { margin-left: 8px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { margin-left: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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 align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-005.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-005.html
new file mode 100644
index 000000000..ec491ffe8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-005.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a column flex container, with various "align-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-content-005-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column wrap;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+      /* This "align-self" only gets a chance to take effect when our container
+         has "align-content: stretch". In that case, it helps us verify that
+         the container's "align-content: stretch" is actually taking effect
+         and stretching the flex line (and giving us space to center in). */
+      align-self: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-006-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-006-ref.html
new file mode 100644
index 000000000..880f25836
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-006-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { margin-left: 8px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { margin-left: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--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 align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-006.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-006.html
new file mode 100644
index 000000000..1ce890a99
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-006.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a column wrap-reverse flex container, with various "align-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-content-006-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column wrap-reverse;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+      /* This "align-self" only gets a chance to take effect when our container
+         has "align-content: stretch". In that case, it helps us verify that
+         the container's "align-content: stretch" is actually taking effect
+         and stretching the flex line (and giving us space to center in). */
+      align-self: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-007-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-007-ref.html
new file mode 100644
index 000000000..aaac464cd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-007-ref.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-top: 4px; }
+    .small > .container > * { margin-top: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { margin-left: 8px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { margin-left: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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 align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-007.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-007.html
new file mode 100644
index 000000000..9964af698
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-007.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a column-reverse flex container, with various "align-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-content-007-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column-reverse wrap;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+      /* This "align-self" only gets a chance to take effect when our container
+         has "align-content: stretch". In that case, it helps us verify that
+         the container's "align-content: stretch" is actually taking effect
+         and stretching the flex line (and giving us space to center in). */
+      align-self: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-008-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-008-ref.html
new file mode 100644
index 000000000..14166e151
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-008-ref.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-top: 4px; }
+    .small > .container > * { margin-top: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { margin-left: 8px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { margin-left: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--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 align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-008.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-008.html
new file mode 100644
index 000000000..2a8fa4b7c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-008.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a column-reverse wrap-reverse flex container, with various "align-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-content-008-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column-reverse wrap-reverse;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+      /* This "align-self" only gets a chance to take effect when our container
+         has "align-content: stretch". In that case, it helps us verify that
+         the container's "align-content: stretch" is actually taking effect
+         and stretching the flex line (and giving us space to center in). */
+      align-self: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-001-ref.html
new file mode 100644
index 000000000..383d181c9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-001-ref.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 8px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-001.html
new file mode 100644
index 000000000..f45b5371a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-001.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a RTL row flex container, with various "align-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-content-rtl-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row wrap;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+      /* This "align-self" only gets a chance to take effect when our container
+         has "align-content: stretch". In that case, it helps us verify that
+         the container's "align-content: stretch" is actually taking effect
+         and stretching the flex line (and giving us space to center in). */
+      align-self: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-002-ref.html
new file mode 100644
index 000000000..c1f117e2b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-002-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { margin-left: 8px }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { /* nothing special */ }
+    .small .alignStart  { margin-left: -4px }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { /* nothing special */ }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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 align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-002.html
new file mode 100644
index 000000000..755db6cec
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-002.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a RTL column flex container, with various "align-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-content-rtl-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column wrap;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+      /* This "align-self" only gets a chance to take effect when our container
+         has "align-content: stretch". In that case, it helps us verify that
+         the container's "align-content: stretch" is actually taking effect
+         and stretching the flex line (and giving us space to center in). */
+      align-self: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-001-ref.html
new file mode 100644
index 000000000..f952c8daa
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-001-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { margin-left: 8px }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { /* nothing special */ }
+    .small .alignStart  { margin-left: -4px }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { /* nothing special */ }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-001.html
new file mode 100644
index 000000000..5fa7f7722
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-001.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a vertical-rl row flex container, with various "align-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-content-vertWM-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row wrap;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+      /* This "align-self" only gets a chance to take effect when our container
+         has "align-content: stretch". In that case, it helps us verify that
+         the container's "align-content: stretch" is actually taking effect
+         and stretching the flex line (and giving us space to center in). */
+      align-self: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-002-ref.html
new file mode 100644
index 000000000..492924567
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-002-ref.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 8px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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 align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignCenter"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-002.html
new file mode 100644
index 000000000..254403282
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-002.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a vertical-rl column flex container, with various "align-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-content-vertWM-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column wrap;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+      /* This "align-self" only gets a chance to take effect when our container
+         has "align-content: stretch". In that case, it helps us verify that
+         the container's "align-content: stretch" is actually taking effect
+         and stretching the flex line (and giving us space to center in). */
+      align-self: center;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various align-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="align-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="align-content: baseline"><div></div></div>
+    <div class="container" style="align-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="align-content: center"><div></div></div>
+    <div class="container" style="align-content: start"><div></div></div>
+    <div class="container" style="align-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="align-content: flex-start"><div></div></div>
+    <div class="container" style="align-content: flex-end"><div></div></div>
+    <div class="container" style="align-content: left"><div></div></div>
+    <div class="container" style="align-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-001-ref.html
new file mode 100644
index 000000000..e85089fc9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-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>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .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>
+    <div class="container"><div class="alignEnd"><!--last 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="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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-001.html
new file mode 100644
index 000000000..ea05c96b0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-001.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row flex 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-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      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>
+    <div class="container"><div style="align-self: last 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>
+    <div class="container"><div style="align-self: last 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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-002-ref.html
new file mode 100644
index 000000000..c6398ca52
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-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>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .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>
+    <div class="container"><div class="alignEnd"><!--last 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="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--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="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>
+    <div class="container"><div class="alignEnd"><!--last 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="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-002.html
new file mode 100644
index 000000000..a45c61d31
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-002.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row wrap-reverse flex 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-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row wrap-reverse;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      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>
+    <div class="container"><div style="align-self: last 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>
+    <div class="container"><div style="align-self: last 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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-003-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-003-ref.html
new file mode 100644
index 000000000..6d08814e3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-003-ref.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 8px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .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>
+    <div class="container"><div class="alignEnd"><!--last 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="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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-003.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-003.html
new file mode 100644
index 000000000..5af8077ba
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-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>
+  <title>CSS Test: Static position of abspos children in a row-reverse flex 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-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-003-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row-reverse;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      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>
+    <div class="container"><div style="align-self: last 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>
+    <div class="container"><div style="align-self: last 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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-004-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-004-ref.html
new file mode 100644
index 000000000..7065861dc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-004-ref.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 8px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .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>
+    <div class="container"><div class="alignEnd"><!--last 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="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--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="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>
+    <div class="container"><div class="alignEnd"><!--last 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="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-004.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-004.html
new file mode 100644
index 000000000..6f00b15fd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-004.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row-reverse wrap-reverse flex 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-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-004-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row-reverse wrap-reverse;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      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>
+    <div class="container"><div style="align-self: last 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>
+    <div class="container"><div style="align-self: last 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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-005-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-005-ref.html
new file mode 100644
index 000000000..08501e841
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-005-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>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { margin-left: 8px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { margin-left: -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>
+    <div class="container"><div class="alignEnd"><!--last 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 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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-005.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-005.html
new file mode 100644
index 000000000..c5d1f5b61
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-005.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a column flex 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-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-005-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      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>
+    <div class="container"><div style="align-self: last 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>
+    <div class="container"><div style="align-self: last 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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-006-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-006-ref.html
new file mode 100644
index 000000000..8ad129114
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-006-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>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { margin-left: 8px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { margin-left: -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>
+    <div class="container"><div class="alignEnd"><!--last 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="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--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 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>
+    <div class="container"><div class="alignEnd"><!--last 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="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-006.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-006.html
new file mode 100644
index 000000000..ee1979608
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-006.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a column wrap-reverse flex 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-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-006-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column wrap-reverse;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      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>
+    <div class="container"><div style="align-self: last 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>
+    <div class="container"><div style="align-self: last 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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-007-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-007-ref.html
new file mode 100644
index 000000000..25609fc3c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-007-ref.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-top: 4px; }
+    .small > .container > * { margin-top: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { margin-left: 8px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { margin-left: -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>
+    <div class="container"><div class="alignEnd"><!--last 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 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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-007.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-007.html
new file mode 100644
index 000000000..b7b1d8a9d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-007.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a column-reverse flex 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-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-007-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column-reverse;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      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>
+    <div class="container"><div style="align-self: last 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>
+    <div class="container"><div style="align-self: last 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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-008-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-008-ref.html
new file mode 100644
index 000000000..3feea0b31
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-008-ref.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-top: 4px; }
+    .small > .container > * { margin-top: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { margin-left: 8px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { margin-left: -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>
+    <div class="container"><div class="alignEnd"><!--last 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="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--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 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>
+    <div class="container"><div class="alignEnd"><!--last 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="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-008.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-008.html
new file mode 100644
index 000000000..b1fdc9220
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-008.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a column-reverse wrap-reverse flex 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-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-008-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column-reverse wrap-reverse;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      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>
+    <div class="container"><div style="align-self: last 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>
+    <div class="container"><div style="align-self: last 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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-001-ref.html
new file mode 100644
index 000000000..4e395aa66
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-001-ref.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 8px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .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>
+    <div class="container"><div class="alignEnd"><!--last 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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-001.html
new file mode 100644
index 000000000..6c8bc5c78
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-001.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a RTL row flex 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-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-rtl-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      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>
+    <div class="container"><div style="align-self: last 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>
+    <div class="container"><div style="align-self: last 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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-002-ref.html
new file mode 100644
index 000000000..4e395aa66
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-002-ref.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 8px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .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>
+    <div class="container"><div class="alignEnd"><!--last 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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-002.html
new file mode 100644
index 000000000..99e171a0f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-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>
+  <title>CSS Test: Static position of abspos LTR children in a RTL row flex 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-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-rtl-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      direction: ltr;
+      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>
+    <div class="container"><div style="align-self: last 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>
+    <div class="container"><div style="align-self: last 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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-003-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-003-ref.html
new file mode 100644
index 000000000..b773df598
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-003-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>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { margin-left: 8px }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { /* nothing special */ }
+    .small .alignStart  { margin-left: -4px }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { /* nothing special */ }
+  </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>
+    <div class="container"><div class="alignEnd"><!--last 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 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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-003.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-003.html
new file mode 100644
index 000000000..3bac61b68
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-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>
+  <title>CSS Test: Static position of abspos children in a RTL column flex 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-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-rtl-003-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      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>
+    <div class="container"><div style="align-self: last 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>
+    <div class="container"><div style="align-self: last 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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-004-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-004-ref.html
new file mode 100644
index 000000000..3fb584268
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-004-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>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { margin-left: 8px }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { /* nothing special */ }
+    .small .alignStart  { margin-left: -4px }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { /* nothing special */ }
+  </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>
+    <div class="container"><div class="alignEnd"><!--last 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 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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-004.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-004.html
new file mode 100644
index 000000000..5588bee71
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-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>
+  <title>CSS Test: Static position of abspos LTR children in a RTL column flex 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-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-rtl-004-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      direction: ltr;
+      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>
+    <div class="container"><div style="align-self: last 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>
+    <div class="container"><div style="align-self: last 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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-001-ref.html
new file mode 100644
index 000000000..e9b697062
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-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>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { margin-left: 8px }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { /* nothing special */ }
+    .small .alignStart  { margin-left: -4px }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { /* nothing special */ }
+  </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>
+    <div class="container"><div class="alignEnd"><!--last 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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-001.html
new file mode 100644
index 000000000..e2fe739a0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-001.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a vertical-rl row flex 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-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-vertWM-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      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>
+    <div class="container"><div style="align-self: last 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>
+    <div class="container"><div style="align-self: last 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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-002-ref.html
new file mode 100644
index 000000000..4459c1a03
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-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>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { margin-left: 8px }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { /* nothing special */ }
+    .small .alignStart  { margin-left: -4px }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { /* nothing special */ }
+  </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>
+    <div class="container"><div class="alignEnd"><!--last 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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-002.html
new file mode 100644
index 000000000..03f1a1291
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-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>
+  <title>CSS Test: Static position of abspos horizontal-tb children in a vertical-rl row flex 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-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-vertWM-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      writing-mode: horizontal-tb;
+      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>
+    <div class="container"><div style="align-self: last 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>
+    <div class="container"><div style="align-self: last 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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-003-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-003-ref.html
new file mode 100644
index 000000000..9cd5fb6e8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-003-ref.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 8px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .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>
+    <div class="container"><div class="alignEnd"><!--last 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 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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-003.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-003.html
new file mode 100644
index 000000000..a54c7d5f2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-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>
+  <title>CSS Test: Static position of abspos children in a vertical-rl column flex 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-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-vertWM-003-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      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>
+    <div class="container"><div style="align-self: last 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>
+    <div class="container"><div style="align-self: last 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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-004-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-004-ref.html
new file mode 100644
index 000000000..7787fba08
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-004-ref.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 8px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .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>
+    <div class="container"><div class="alignEnd"><!--last 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="alignEnd"><!--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>
+    <div class="container"><div class="alignEnd"><!--last 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="alignEnd"><!--right--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-004.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-004.html
new file mode 100644
index 000000000..c0ccc9bb7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-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>
+  <title>CSS Test: Static position of abspos vertical-lr + RTL children in a vertical-rl column flex 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-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-align-self-vertWM-004-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      writing-mode: vertical-lr;
+      direction: rtl;
+      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>
+    <div class="container"><div style="align-self: last 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>
+    <div class="container"><div style="align-self: last 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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-align-content-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-align-content-001-ref.html
new file mode 100644
index 000000000..24935ee0a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-align-content-001-ref.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- <content-distribution> with implied fallback -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-distribution> with explicit "flex-end" fallback -->
+    <div class="container"><div class="alignEnd"><!--space-between--></div></div>
+    <div class="container"><div class="alignEnd"><!--space-around--></div></div>
+    <div class="container"><div class="alignEnd"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignEnd"><!--stretch--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- <content-distribution> with implied fallback -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-distribution> with explicit "flex-end" fallback -->
+    <div class="container"><div class="alignEnd"><!--space-between--></div></div>
+    <div class="container"><div class="alignEnd"><!--space-around--></div></div>
+    <div class="container"><div class="alignEnd"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignEnd"><!--stretch--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-align-content-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-align-content-001.html
new file mode 100644
index 000000000..e1de7af3b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-align-content-001.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row flex container, with various "align-content" values with explicit fallback values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-fallback-align-content-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row wrap;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- <content-distribution> with implied fallback -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-distribution> with explicit "flex-end" fallback -->
+    <div class="container" style="align-content: space-between flex-end"><div></div></div>
+    <div class="container" style="align-content: space-around flex-end"><div></div></div>
+    <div class="container" style="align-content: space-evenly flex-end"><div></div></div>
+    <div class="container" style="align-content: stretch flex-end"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- <content-distribution> with implied fallback -->
+    <div class="container" style="align-content: space-between"><div></div></div>
+    <div class="container" style="align-content: space-around"><div></div></div>
+    <div class="container" style="align-content: space-evenly"><div></div></div>
+    <div class="container" style="align-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-distribution> with explicit "flex-end" fallback -->
+    <div class="container" style="align-content: space-between flex-end"><div></div></div>
+    <div class="container" style="align-content: space-around flex-end"><div></div></div>
+    <div class="container" style="align-content: space-evenly flex-end"><div></div></div>
+    <div class="container" style="align-content: stretch flex-end"><div></div></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-justify-content-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-justify-content-001-ref.html
new file mode 100644
index 000000000..21185bcb2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-justify-content-001-ref.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { margin-left: 8px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { margin-left: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- <content-distribution> with implied fallback -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-distribution> with explicit "flex-end" fallback -->
+    <div class="container"><div class="alignEnd"><!--space-between--></div></div>
+    <div class="container"><div class="alignEnd"><!--space-around--></div></div>
+    <div class="container"><div class="alignEnd"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- <content-distribution> with implied fallback -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-distribution> with explicit "flex-end" fallback -->
+    <div class="container"><div class="alignEnd"><!--space-between--></div></div>
+    <div class="container"><div class="alignEnd"><!--space-around--></div></div>
+    <div class="container"><div class="alignEnd"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-justify-content-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-justify-content-001.html
new file mode 100644
index 000000000..d90dc7597
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-justify-content-001.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row flex container, with various "justify-content" values with explicit fallback values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-fallback-justify-content-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- <content-distribution> with implied fallback -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-distribution> with explicit "flex-end" fallback -->
+    <div class="container" style="justify-content: space-between flex-end"><div></div></div>
+    <div class="container" style="justify-content: space-around flex-end"><div></div></div>
+    <div class="container" style="justify-content: space-evenly flex-end"><div></div></div>
+    <div class="container" style="justify-content: stretch flex-end"><div></div></div>
+    <!-- Note: specifically for flex containers, in the justify-content axis,
+         "stretch behaves as flex-start (ignoring the specified fallback
+         alignment, if any." https://drafts.csswg.org/css-align-3/#distribution-flex -->
+    <br>
+  </div>
+  <div class="small">
+    <!-- <content-distribution> with implied fallback -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-distribution> with explicit "flex-end" fallback -->
+    <div class="container" style="justify-content: space-between flex-end"><div></div></div>
+    <div class="container" style="justify-content: space-around flex-end"><div></div></div>
+    <div class="container" style="justify-content: space-evenly flex-end"><div></div></div>
+    <div class="container" style="justify-content: stretch flex-end"><div></div></div>
+    <!-- As noted above, the explicit fallback for "stretch" is ignored here. -->
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-001-ref.html
new file mode 100644
index 000000000..fc450981e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-001-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { margin-left: 8px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { margin-left: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-001.html
new file mode 100644
index 000000000..1d571360a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-001.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row flex container, with various "justify-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-justify-content-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-002-ref.html
new file mode 100644
index 000000000..fc450981e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-002-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { margin-left: 8px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { margin-left: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-002.html
new file mode 100644
index 000000000..09073d4fb
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-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>
+  <title>CSS Test: Static position of abspos children in a row wrap-reverse flex container, with various "justify-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-justify-content-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row wrap-reverse;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-003-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-003-ref.html
new file mode 100644
index 000000000..d49626975
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-003-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { margin-left: 8px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { margin-left: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignEnd"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignEnd"><!--stretch--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--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-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignEnd"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignEnd"><!--stretch--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-003.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-003.html
new file mode 100644
index 000000000..f2801ebdd
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-003.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row-reverse flex container, with various "justify-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-justify-content-003-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row-reverse wrap;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-004-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-004-ref.html
new file mode 100644
index 000000000..d49626975
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-004-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { margin-left: 8px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { margin-left: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignEnd"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignEnd"><!--stretch--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--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-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignEnd"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignEnd"><!--stretch--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-004.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-004.html
new file mode 100644
index 000000000..0f8d330ba
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-004.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row-reverse wrap-reverse flex container, with various "justify-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-justify-content-004-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row-reverse wrap-reverse;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-005-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-005-ref.html
new file mode 100644
index 000000000..807f16124
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-005-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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 justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-005.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-005.html
new file mode 100644
index 000000000..729ca9732
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-005.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a column flex container, with various "justify-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-justify-content-005-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-006-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-006-ref.html
new file mode 100644
index 000000000..807f16124
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-006-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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 justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-006.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-006.html
new file mode 100644
index 000000000..83da7de4f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-006.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a column wrap-reverse flex container, with various "justify-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-justify-content-006-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column wrap-reverse;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-007-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-007-ref.html
new file mode 100644
index 000000000..04979dfa7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-007-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignEnd"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignEnd"><!--stretch--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--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 justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignEnd"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignEnd"><!--stretch--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-007.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-007.html
new file mode 100644
index 000000000..ad97ac3ce
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-007.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a column-reverse flex container, with various "justify-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-justify-content-007-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column-reverse wrap;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-008-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-008-ref.html
new file mode 100644
index 000000000..04979dfa7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-008-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignEnd"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignEnd"><!--stretch--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--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 justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignEnd"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignEnd"><!--stretch--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-position>, part 2: -->
+    <div class="container"><div class="alignEnd"><!--flex-start--></div></div>
+    <div class="container"><div class="alignStart"><!--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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-008.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-008.html
new file mode 100644
index 000000000..d6a4074e3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-008.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a column-reverse wrap-reverse flex container, with various "justify-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-justify-content-008-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column-reverse wrap-reverse;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-001-ref.html
new file mode 100644
index 000000000..2ccb6b157
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-001-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { margin-left: 8px }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { /* nothing special */ }
+    .small .alignStart  { margin-left: -4px }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { /* nothing special */ }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-001.html
new file mode 100644
index 000000000..94df40c0e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-001.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a RTL row flex container, with various "justify-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-justify-content-rtl-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-002-ref.html
new file mode 100644
index 000000000..4cf947164
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-002-ref.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 8px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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 justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-002.html
new file mode 100644
index 000000000..f85c7d051
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-002.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a RTL column flex container, with various "justify-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-justify-content-rtl-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-001-ref.html
new file mode 100644
index 000000000..dc9b6da9b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-001-ref.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 8px; }
+    .small > .container > * { margin-left: -4px; }
+
+    .big   .alignStart  { /* nothing special */ }
+    .big   .alignCenter { margin-top: 2px }
+    .big   .alignEnd    { margin-top: 4px }
+    .small .alignStart  { /* nothing special */ }
+    .small .alignCenter { margin-top: -2px }
+    .small .alignEnd    { margin-top: -4px }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-001.html
new file mode 100644
index 000000000..db4b5b691
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-001.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a vertical-rl row flex container, with various "justify-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-justify-content-vertWM-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-002-ref.html
new file mode 100644
index 000000000..d4fd90e35
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-002-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { margin-left: 8px }
+    .big   .alignCenter { margin-left: 4px }
+    .big   .alignEnd    { /* nothing special */ }
+    .small .alignStart  { margin-left: -4px }
+    .small .alignCenter { margin-left: -2px }
+    .small .alignEnd    { /* nothing special */ }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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 justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container"><div class="alignStart"><!--normal--></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div class="alignStart"><!--baseline--></div></div>
+    <div class="container"><div class="alignEnd"><!--last baseline--></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container"><div class="alignStart"><!--space-between--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-around--></div></div>
+    <div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
+    <div class="container"><div class="alignStart"><!--stretch--></div></div>
+    <br>
+    <!-- <content-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>
+    <br>
+    <!-- <content-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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-002.html
new file mode 100644
index 000000000..1eb456d6e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-002.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a vertical-rl column flex container, with various "justify-content" values</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-justify-content-vertWM-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: column;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- The various justify-content values, from
+         https://www.w3.org/TR/css-align-3/#propdef-align-content -->
+    <!-- normal -->
+    <div class="container" style="justify-content: normal"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container" style="justify-content: baseline"><div></div></div>
+    <div class="container" style="justify-content: last baseline"><div></div></div>
+    <br>
+    <!-- <content-distribution> -->
+    <div class="container" style="justify-content: space-between"><div></div></div>
+    <div class="container" style="justify-content: space-around"><div></div></div>
+    <div class="container" style="justify-content: space-evenly"><div></div></div>
+    <div class="container" style="justify-content: stretch"><div></div></div>
+    <br>
+    <!-- <content-position>, part 1 -->
+    <div class="container" style="justify-content: center"><div></div></div>
+    <div class="container" style="justify-content: start"><div></div></div>
+    <div class="container" style="justify-content: end"><div></div></div>
+    <br>
+    <!-- <content-position>, part 2 -->
+    <div class="container" style="justify-content: flex-start"><div></div></div>
+    <div class="container" style="justify-content: flex-end"><div></div></div>
+    <div class="container" style="justify-content: left"><div></div></div>
+    <div class="container" style="justify-content: right"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-self-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-self-001-ref.html
new file mode 100644
index 000000000..d4f75a036
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-self-001-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>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      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></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></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></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <br>
+    <!-- <baseline-position> -->
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <br>
+    <!-- <self-position>, part 1: -->
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <br>
+    <!-- <self-position>, part 2: -->
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-self-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-self-001.html
new file mode 100644
index 000000000..90f328e3a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-self-001.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row flex container, with various "justify-self" values (which shouldn't have any effect) </title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-flex">
+  <link rel="match" href="flex-abspos-staticpos-justify-self-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row;
+      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: 10px;
+      width: 16px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      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>
+    <div class="container"><div style="justify-self: last 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>
+    <div class="container"><div style="justify-self: last 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/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-001-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-001-ref.html
new file mode 100644
index 000000000..428aeae64
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-001-ref.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 10px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 14px;
+      width: 20px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- Margin just on one side: -->
+    <div class="container"><div style="margin-top: 3px"></div></div>
+    <div class="container"><div style="margin-right: 3px"></div></div>
+    <div class="container"><div style="margin-bottom: 3px"></div></div>
+    <div class="container"><div style="margin-left: 3px"></div></div>
+    <!-- Margin on all sides: -->
+    <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div>
+    <br>
+
+    <!-- "auto" margin on just one side (should be treated as 0): -->
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <!-- "auto" margin on all sides (should be treated as 0): -->
+    <div class="container"><div></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- Margin just on one side: -->
+    <div class="container"><div style="margin-top: 3px"></div></div>
+    <div class="container"><div style="margin-right: 3px"></div></div>
+    <div class="container"><div style="margin-bottom: 3px"></div></div>
+    <div class="container"><div style="margin-left: 3px"></div></div>
+    <!-- Margin on all sides: -->
+    <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div>
+    <br>
+
+    <!-- "auto" margin on just one side (should be treated as 0): -->
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <div class="container"><div></div></div>
+    <!-- "auto" margin on all sides (should be treated as 0): -->
+    <div class="container"><div></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-001.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-001.html
new file mode 100644
index 000000000..7a42e0def
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-001.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row flex container, with various margins applied</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-margin-001-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 10px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 14px;
+      width: 20px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- Margin just on one side: -->
+    <div class="container"><div style="margin-top: 3px"></div></div>
+    <div class="container"><div style="margin-right: 3px"></div></div>
+    <div class="container"><div style="margin-bottom: 3px"></div></div>
+    <div class="container"><div style="margin-left: 3px"></div></div>
+    <!-- Margin on all sides: -->
+    <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div>
+    <br>
+
+    <!-- "auto" margin on just one side (should be treated as 0): -->
+    <div class="container"><div style="margin-top: auto"></div></div>
+    <div class="container"><div style="margin-right: auto"></div></div>
+    <div class="container"><div style="margin-bottom: auto"></div></div>
+    <div class="container"><div style="margin-left: auto"></div></div>
+    <!-- "auto" margin on all sides (should be treated as 0): -->
+    <div class="container"><div style="margin: auto"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- Margin just on one side: -->
+    <div class="container"><div style="margin-top: 3px"></div></div>
+    <div class="container"><div style="margin-right: 3px"></div></div>
+    <div class="container"><div style="margin-bottom: 3px"></div></div>
+    <div class="container"><div style="margin-left: 3px"></div></div>
+    <!-- Margin on all sides: -->
+    <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div>
+    <br>
+
+    <!-- "auto" margin on just one side (should be treated as 0): -->
+    <div class="container"><div style="margin-top: auto"></div></div>
+    <div class="container"><div style="margin-right: auto"></div></div>
+    <div class="container"><div style="margin-bottom: auto"></div></div>
+    <div class="container"><div style="margin-left: auto"></div></div>
+    <!-- "auto" margin on all sides (should be treated as 0): -->
+    <div class="container"><div style="margin: auto"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-002-ref.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-002-ref.html
new file mode 100644
index 000000000..38cfdff07
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-002-ref.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: block;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 10px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 14px;
+      width: 20px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- Margin just on one side: -->
+    <div class="container"><div style="margin: 3px 0 0 12px"></div></div>
+    <div class="container"><div style="margin: 0 0 0 9px"></div></div>
+    <div class="container"><div style="margin: 0 0 0 12px"></div></div>
+    <div class="container"><div style="margin: 0 0 0 12px"></div></div>
+    <!-- Margin on all sides: -->
+    <div class="container"><div style="margin: 1px 0 0 10px"></div></div>
+    <br>
+
+    <!-- "auto" margin on just one side (should be treated as 0): -->
+    <div class="container"><div style="margin: 0 0 0 12px"></div></div>
+    <div class="container"><div style="margin: 0 0 0 12px"></div></div>
+    <div class="container"><div style="margin: 0 0 0 12px"></div></div>
+    <div class="container"><div style="margin: 0 0 0 12px"></div></div>
+    <!-- "auto" margin on all sides (should be treated as 0): -->
+    <div class="container"><div style="margin: 0 0 0 12px"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- Margin just on one side: -->
+    <div class="container"><div style="margin: 3px 0 0 -4px"></div></div>
+    <div class="container"><div style="margin: 0 0 0 -7px"></div></div>
+    <div class="container"><div style="margin: 0 0 0 -4px"></div></div>
+    <div class="container"><div style="margin: 0 0 0 -4px"></div></div>
+    <!-- Margin on all sides: -->
+    <div class="container"><div style="margin: 1px 0 0 -6px"></div></div>
+    <br>
+
+    <!-- "auto" margin on just one side (should be treated as 0): -->
+    <div class="container"><div style="margin: 0 0 0 -4px"></div></div>
+    <div class="container"><div style="margin: 0 0 0 -4px"></div></div>
+    <div class="container"><div style="margin: 0 0 0 -4px"></div></div>
+    <div class="container"><div style="margin: 0 0 0 -4px"></div></div>
+    <!-- "auto" margin on all sides (should be treated as 0): -->
+    <div class="container"><div style="margin: 0 0 0 -4px"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-002.html b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-002.html
new file mode 100644
index 000000000..51b70d691
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-002.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <title>CSS Test: Static position of abspos children in a row flex container, with various margins applied, and "justify-content: flex-end"</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-abspos-static">
+  <link rel="match" href="flex-abspos-staticpos-margin-002-ref.html">
+  <meta charset="utf-8">
+  <style>
+    .container {
+      display: flex;
+      flex-flow: row;
+      justify-content: flex-end;
+      padding: 1px 2px;
+      border: 1px solid black;
+      background: yellow;
+      margin-bottom: 5px;
+      margin-right: 10px;
+      float: left; /* For testing in "rows" of containers */
+    }
+    br { clear: both }
+
+    .big > .container {
+      height: 14px;
+      width: 20px;
+    }
+    .small > .container {
+      height: 2px;
+      width: 4px;
+    }
+
+    .container > * {
+      position: absolute;
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+  </style>
+</head>
+<body>
+  <div class="big">
+    <!-- Margin just on one side: -->
+    <div class="container"><div style="margin-top: 3px"></div></div>
+    <div class="container"><div style="margin-right: 3px"></div></div>
+    <div class="container"><div style="margin-bottom: 3px"></div></div>
+    <div class="container"><div style="margin-left: 3px"></div></div>
+    <!-- Margin on all sides: -->
+    <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div>
+    <br>
+
+    <!-- "auto" margin on just one side (should be treated as 0): -->
+    <div class="container"><div style="margin-top: auto"></div></div>
+    <div class="container"><div style="margin-right: auto"></div></div>
+    <div class="container"><div style="margin-bottom: auto"></div></div>
+    <div class="container"><div style="margin-left: auto"></div></div>
+    <!-- "auto" margin on all sides (should be treated as 0): -->
+    <div class="container"><div style="margin: auto"></div></div>
+    <br>
+  </div>
+  <div class="small">
+    <!-- Margin just on one side: -->
+    <div class="container"><div style="margin-top: 3px"></div></div>
+    <div class="container"><div style="margin-right: 3px"></div></div>
+    <div class="container"><div style="margin-bottom: 3px"></div></div>
+    <div class="container"><div style="margin-left: 3px"></div></div>
+    <!-- Margin on all sides: -->
+    <div class="container"><div style="margin: 1px 2px 3px 4px"></div></div>
+    <br>
+
+    <!-- "auto" margin on just one side (should be treated as 0): -->
+    <div class="container"><div style="margin-top: auto"></div></div>
+    <div class="container"><div style="margin-right: auto"></div></div>
+    <div class="container"><div style="margin-bottom: auto"></div></div>
+    <div class="container"><div style="margin-left: auto"></div></div>
+    <!-- "auto" margin on all sides (should be treated as 0): -->
+    <div class="container"><div style="margin: auto"></div></div>
+    <br>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-001-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-001-ref.html
new file mode 100644
index 000000000..e519f2d7a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-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;
+      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>
+    <div class="container"><div class="alignEnd"><!--last 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="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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-001.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-001.html
new file mode 100644
index 000000000..02b7a136a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-001.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 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-align-3/#align-abspos-static">
+  <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>
+    <div class="container"><div style="align-self: last 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>
+    <div class="container"><div style="align-self: last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-002-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-002-ref.html
new file mode 100644
index 000000000..eaa1c712d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-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;
+      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: 32px;
+      width: 26px;
+    }
+    .small > .container {
+      height: 4px;
+      width: 8px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   .alignStart  { margin-top:  0px; }
+    .big   .alignCenter { margin-top: 13px; }
+    .big   .alignEnd    { margin-top: 26px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -1px; }
+    .small .alignEnd    { margin-top: -2px; }
+  </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>
+    <div class="container"><div class="alignEnd"><!--last 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="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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-002.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-002.html
new file mode 100644
index 000000000..32f90939b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-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 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-align-3/#align-abspos-static">
+  <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>
+    <div class="container"><div style="align-self: last 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>
+    <div class="container"><div style="align-self: last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-001-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-001-ref.html
new file mode 100644
index 000000000..a14d63068
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-001-ref.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>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>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--last 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>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-001.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-001.html
new file mode 100644
index 000000000..fa4a56d40
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-001.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS 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-align-3/#align-abspos-static">
+  <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>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: last 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>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-002-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-002-ref.html
new file mode 100644
index 000000000..cba35db99
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-002-ref.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      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: 42px;
+      width: 26px;
+    }
+    .small > .container {
+      height: 4px;
+      width: 8px;
+      margin-bottom: 20px; /* to reduce overlap between overflowing images */
+    }
+
+    .container > * {
+      display: block;
+    }
+    .big   .alignStart  { margin-top:   0px; }
+    .big   .alignCenter { margin-top:  13px; }
+    .big   .alignEnd    { margin-top:  26px; }
+    .small .alignStart  { margin-top:   0px; }
+    .small .alignCenter { margin-top:  -6px; }
+    .small .alignEnd    { margin-top: -12px; }
+  </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>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--last 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>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-002.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-002.html
new file mode 100644
index 000000000..5fca4c308
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-002.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS 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-align-3/#align-abspos-static">
+  <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: 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>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: last 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>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="align-self: last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-001-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-001-ref.html
new file mode 100644
index 000000000..671b315a1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-001-ref.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>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>
+    <div class="container"><div class="alignEnd"><!--last 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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-001.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-001.html
new file mode 100644
index 000000000..1e7a125d9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-001.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 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-align-3/#align-abspos-static">
+  <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>
+    <div class="container"><div style="align-self: last 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>
+    <div class="container"><div style="align-self: last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-002-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-002-ref.html
new file mode 100644
index 000000000..671b315a1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-002-ref.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>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>
+    <div class="container"><div class="alignEnd"><!--last 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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-002.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-002.html
new file mode 100644
index 000000000..7274c116f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-002.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>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-align-3/#align-abspos-static">
+  <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>
+    <div class="container"><div style="align-self: last 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>
+    <div class="container"><div style="align-self: last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-003-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-003-ref.html
new file mode 100644
index 000000000..dc3d2bc46
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-003-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;
+      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: 32px;
+      width: 26px;
+    }
+    .small > .container {
+      height: 4px;
+      width: 8px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 18px; }
+    .small > .container > * { margin-left:  0px; }
+
+    .big   .alignStart  { margin-top:  0px; }
+    .big   .alignCenter { margin-top: 13px; }
+    .big   .alignEnd    { margin-top: 26px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -1px; }
+    .small .alignEnd    { margin-top: -2px; }
+  </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>
+    <div class="container"><div class="alignEnd"><!--last 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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-003.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-003.html
new file mode 100644
index 000000000..f8539f8b9
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-003.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 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-align-3/#align-abspos-static">
+  <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>
+    <div class="container"><div style="align-self: last 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>
+    <div class="container"><div style="align-self: last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-004-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-004-ref.html
new file mode 100644
index 000000000..dc3d2bc46
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-004-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;
+      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: 32px;
+      width: 26px;
+    }
+    .small > .container {
+      height: 4px;
+      width: 8px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 18px; }
+    .small > .container > * { margin-left:  0px; }
+
+    .big   .alignStart  { margin-top:  0px; }
+    .big   .alignCenter { margin-top: 13px; }
+    .big   .alignEnd    { margin-top: 26px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -1px; }
+    .small .alignEnd    { margin-top: -2px; }
+  </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>
+    <div class="container"><div class="alignEnd"><!--last 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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-004.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-004.html
new file mode 100644
index 000000000..b891d5415
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-004.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 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-align-3/#align-abspos-static">
+  <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>
+    <div class="container"><div style="align-self: last 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>
+    <div class="container"><div style="align-self: last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-001-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-001-ref.html
new file mode 100644
index 000000000..37575f03e
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-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: 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>
+    <div class="container"><div class="alignEnd"><!--last 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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-001.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-001.html
new file mode 100644
index 000000000..273abb150
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-001.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>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-align-3/#align-abspos-static">
+  <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>
+    <div class="container"><div style="align-self: last 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>
+    <div class="container"><div style="align-self: last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-002-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-002-ref.html
new file mode 100644
index 000000000..ce217e7ff
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-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: 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>
+    <div class="container"><div class="alignEnd"><!--last 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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-002.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-002.html
new file mode 100644
index 000000000..2156f4bbf
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-002.html
@@ -0,0 +1,103 @@
+<!DOCTYPE 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-align-3/#align-abspos-static">
+  <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>
+    <div class="container"><div style="align-self: last 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>
+    <div class="container"><div style="align-self: last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-003-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-003-ref.html
new file mode 100644
index 000000000..8877789be
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-003-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;
+      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: 32px;
+      height: 26px;
+    }
+    .small > .container {
+      width: 4px;
+      height: 8px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+    .big   .alignStart  { margin-left: 26px; }
+    .big   .alignCenter { margin-left: 13px; }
+    .big   .alignEnd    { margin-left:  0px; }
+    .small .alignStart  { margin-left: -2px; }
+    .small .alignCenter { margin-left: -1px; }
+    .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>
+    <div class="container"><div class="alignEnd"><!--last 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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-003.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-003.html
new file mode 100644
index 000000000..b727d3b37
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-003.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 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-align-3/#align-abspos-static">
+  <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>
+    <div class="container"><div style="align-self: last 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>
+    <div class="container"><div style="align-self: last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-004-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-004-ref.html
new file mode 100644
index 000000000..54d6d46f8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-004-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;
+      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: 32px;
+      height: 26px;
+    }
+    .small > .container {
+      width: 4px;
+      height: 8px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+    .big   .alignStart  { margin-left: 26px; }
+    .big   .alignCenter { margin-left: 13px; }
+    .big   .alignEnd    { margin-left:  0px; }
+    .small .alignStart  { margin-left: -2px; }
+    .small .alignCenter { margin-left: -1px; }
+    .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>
+    <div class="container"><div class="alignEnd"><!--last 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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-004.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-004.html
new file mode 100644
index 000000000..f350ef8ce
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-004.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>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-align-3/#align-abspos-static">
+  <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>
+    <div class="container"><div style="align-self: last 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>
+    <div class="container"><div style="align-self: last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-001-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-001-ref.html
new file mode 100644
index 000000000..6d197e490
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-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: 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>
+    <div class="container"><div class="alignEnd"><!--last 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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-001.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-001.html
new file mode 100644
index 000000000..99cfcbb9b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-001.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>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-align-3/#align-abspos-static">
+  <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>
+    <div class="container"><div style="justify-self: last 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>
+    <div class="container"><div style="justify-self: last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-002-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-002-ref.html
new file mode 100644
index 000000000..741a795f2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-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;
+      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: 32px;
+      height: 26px;
+    }
+    .small > .container {
+      width: 4px;
+      height: 8px;
+      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: 13px; }
+    .big   .alignEnd    { margin-left: 26px; }
+    .small .alignStart  { margin-left:  0px; }
+    .small .alignCenter { margin-left: -1px; }
+    .small .alignEnd    { margin-left: -2px; }
+  </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>
+    <div class="container"><div class="alignEnd"><!--last 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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-002.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-002.html
new file mode 100644
index 000000000..b82d308af
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-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 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-align-3/#align-abspos-static">
+  <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>
+    <div class="container"><div style="justify-self: last 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>
+    <div class="container"><div style="justify-self: last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-001-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-001-ref.html
new file mode 100644
index 000000000..78d621219
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-001-ref.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>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>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--last 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>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-001.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-001.html
new file mode 100644
index 000000000..fdd4f6220
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-001.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS 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-align-3/#align-abspos-static">
+  <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>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: last 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>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-002-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-002-ref.html
new file mode 100644
index 000000000..a1d4e8163
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-002-ref.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+    .container {
+      display: block;
+      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: 42px;
+      height: 26px;
+    }
+    .small > .container {
+      width: 4px;
+      height: 8px;
+      margin-bottom: 20px; /* to reduce overlap between overflowing images */
+    }
+
+    .container > * {
+      display: block;
+    }
+    .big   .alignStart  { margin-left:  0px; }
+    .big   .alignCenter { margin-left: 17px; }
+    .big   .alignEnd    { margin-left: 34px; }
+    .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"><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>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--last 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>
+    <div class="container"><img src="support/colors-8x16.png"
+                                class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-002.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-002.html
new file mode 100644
index 000000000..61c1b97b5
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-002.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS 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-align-3/#align-abspos-static">
+  <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: 5px;
+      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>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: last 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>
+    <div class="container"><img src="support/colors-8x16.png"
+                                style="justify-self: last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-001-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-001-ref.html
new file mode 100644
index 000000000..8e5db1efc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-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: 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>
+    <div class="container"><div class="alignEnd"><!--last 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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-001.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-001.html
new file mode 100644
index 000000000..18e024bf2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-001.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>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-align-3/#align-abspos-static">
+  <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>
+    <div class="container"><div style="justify-self: last 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>
+    <div class="container"><div style="justify-self: last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-002-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-002-ref.html
new file mode 100644
index 000000000..c7176a7c2
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-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: 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>
+    <div class="container"><div class="alignEnd"><!--last 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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-002.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-002.html
new file mode 100644
index 000000000..d7e510e1b
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-002.html
@@ -0,0 +1,103 @@
+<!DOCTYPE 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-align-3/#align-abspos-static">
+  <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>
+    <div class="container"><div style="justify-self: last 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>
+    <div class="container"><div style="justify-self: last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-003-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-003-ref.html
new file mode 100644
index 000000000..b38590c80
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-003-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;
+      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: 32px;
+      height: 26px;
+    }
+    .small > .container {
+      width: 4px;
+      height: 8px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+    .big   .alignStart  { margin-left: 26px; }
+    .big   .alignCenter { margin-left: 13px; }
+    .big   .alignEnd    { margin-left:  0px; }
+    .small .alignStart  { margin-left: -2px; }
+    .small .alignCenter { margin-left: -1px; }
+    .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>
+    <div class="container"><div class="alignEnd"><!--last 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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-003.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-003.html
new file mode 100644
index 000000000..2224ff684
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-003.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 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-align-3/#align-abspos-static">
+  <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>
+    <div class="container"><div style="justify-self: last 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>
+    <div class="container"><div style="justify-self: last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-004-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-004-ref.html
new file mode 100644
index 000000000..1ebc9e62c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-004-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;
+      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: 32px;
+      height: 26px;
+    }
+    .small > .container {
+      width: 4px;
+      height: 8px;
+      margin-right: 10px; /* To avoid overlap between overflowing kids */
+    }
+
+    .container > * {
+      background: teal;
+      width: 6px;
+      height: 8px;
+    }
+    .big   .alignStart  { margin-left: 26px; }
+    .big   .alignCenter { margin-left: 13px; }
+    .big   .alignEnd    { margin-left:  0px; }
+    .small .alignStart  { margin-left: -2px; }
+    .small .alignCenter { margin-left: -1px; }
+    .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>
+    <div class="container"><div class="alignEnd"><!--last 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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-004.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-004.html
new file mode 100644
index 000000000..a22fdc24f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-004.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>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-align-3/#align-abspos-static">
+  <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>
+    <div class="container"><div style="justify-self: last 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>
+    <div class="container"><div style="justify-self: last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-001-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-001-ref.html
new file mode 100644
index 000000000..9fff3eabc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-001-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE 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>
+    <div class="container"><div class="alignEnd"><!--last 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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-001.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-001.html
new file mode 100644
index 000000000..1bc2a5c33
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-001.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 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-align-3/#align-abspos-static">
+  <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>
+    <div class="container"><div style="justify-self: last 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>
+    <div class="container"><div style="justify-self: last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-002-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-002-ref.html
new file mode 100644
index 000000000..9fff3eabc
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-002-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE 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>
+    <div class="container"><div class="alignEnd"><!--last 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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-002.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-002.html
new file mode 100644
index 000000000..7b72c6aae
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-002.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>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-align-3/#align-abspos-static">
+  <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>
+    <div class="container"><div style="justify-self: last 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>
+    <div class="container"><div style="justify-self: last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-003-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-003-ref.html
new file mode 100644
index 000000000..155078456
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-003-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;
+      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: 32px;
+      width: 26px;
+    }
+    .small > .container {
+      height: 4px;
+      width: 8px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 18px; }
+    .small > .container > * { margin-left:  0px; }
+
+    .big   .alignStart  { margin-top:  0px; }
+    .big   .alignCenter { margin-top: 13px; }
+    .big   .alignEnd    { margin-top: 26px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -1px; }
+    .small .alignEnd    { margin-top: -2px; }
+  </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>
+    <div class="container"><div class="alignEnd"><!--last 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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-003.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-003.html
new file mode 100644
index 000000000..582262bd3
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-003.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 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-align-3/#align-abspos-static">
+  <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>
+    <div class="container"><div style="justify-self: last 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>
+    <div class="container"><div style="justify-self: last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-004-ref.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-004-ref.html
new file mode 100644
index 000000000..155078456
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-004-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;
+      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: 32px;
+      width: 26px;
+    }
+    .small > .container {
+      height: 4px;
+      width: 8px;
+    }
+
+    .container > * {
+      background: teal;
+      height: 6px;
+      width: 8px;
+    }
+    .big   > .container > * { margin-left: 18px; }
+    .small > .container > * { margin-left:  0px; }
+
+    .big   .alignStart  { margin-top:  0px; }
+    .big   .alignCenter { margin-top: 13px; }
+    .big   .alignEnd    { margin-top: 26px; }
+    .small .alignStart  { margin-top:  0px; }
+    .small .alignCenter { margin-top: -1px; }
+    .small .alignEnd    { margin-top: -2px; }
+  </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>
+    <div class="container"><div class="alignEnd"><!--last 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>
+    <div class="container"><div class="alignEnd"><!--last 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/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-004.html b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-004.html
new file mode 100644
index 000000000..63c893b6c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-004.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 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-align-3/#align-abspos-static">
+  <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>
+    <div class="container"><div style="justify-self: last 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>
+    <div class="container"><div style="justify-self: last 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/layout/reftests/w3c-css/submitted/align3/reftest.list b/layout/reftests/w3c-css/submitted/align3/reftest.list
new file mode 100644
index 000000000..02f842278
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/reftest.list
@@ -0,0 +1,77 @@
+# Tests for static position of absolutely positioned flex children.
+== flex-abspos-staticpos-align-content-001.html flex-abspos-staticpos-align-content-001-ref.html
+== flex-abspos-staticpos-align-content-002.html flex-abspos-staticpos-align-content-002-ref.html
+== flex-abspos-staticpos-align-content-003.html flex-abspos-staticpos-align-content-003-ref.html
+== flex-abspos-staticpos-align-content-004.html flex-abspos-staticpos-align-content-004-ref.html
+== flex-abspos-staticpos-align-content-005.html flex-abspos-staticpos-align-content-005-ref.html
+== flex-abspos-staticpos-align-content-006.html flex-abspos-staticpos-align-content-006-ref.html
+== flex-abspos-staticpos-align-content-007.html flex-abspos-staticpos-align-content-007-ref.html
+== flex-abspos-staticpos-align-content-008.html flex-abspos-staticpos-align-content-008-ref.html
+== flex-abspos-staticpos-align-content-rtl-001.html flex-abspos-staticpos-align-content-rtl-001-ref.html
+== flex-abspos-staticpos-align-content-rtl-002.html flex-abspos-staticpos-align-content-rtl-002-ref.html
+== flex-abspos-staticpos-align-content-vertWM-001.html flex-abspos-staticpos-align-content-vertWM-001-ref.html
+== flex-abspos-staticpos-align-content-vertWM-002.html flex-abspos-staticpos-align-content-vertWM-002-ref.html
+
+== flex-abspos-staticpos-align-self-001.html flex-abspos-staticpos-align-self-001-ref.html
+== flex-abspos-staticpos-align-self-002.html flex-abspos-staticpos-align-self-002-ref.html
+== flex-abspos-staticpos-align-self-003.html flex-abspos-staticpos-align-self-003-ref.html
+== flex-abspos-staticpos-align-self-004.html flex-abspos-staticpos-align-self-004-ref.html
+== flex-abspos-staticpos-align-self-005.html flex-abspos-staticpos-align-self-005-ref.html
+== flex-abspos-staticpos-align-self-006.html flex-abspos-staticpos-align-self-006-ref.html
+== flex-abspos-staticpos-align-self-007.html flex-abspos-staticpos-align-self-007-ref.html
+== flex-abspos-staticpos-align-self-008.html flex-abspos-staticpos-align-self-008-ref.html
+== flex-abspos-staticpos-align-self-rtl-001.html flex-abspos-staticpos-align-self-rtl-001-ref.html
+== flex-abspos-staticpos-align-self-rtl-002.html flex-abspos-staticpos-align-self-rtl-002-ref.html
+== flex-abspos-staticpos-align-self-rtl-003.html flex-abspos-staticpos-align-self-rtl-003-ref.html
+== flex-abspos-staticpos-align-self-rtl-004.html flex-abspos-staticpos-align-self-rtl-004-ref.html
+== flex-abspos-staticpos-align-self-vertWM-001.html flex-abspos-staticpos-align-self-vertWM-001-ref.html
+== flex-abspos-staticpos-align-self-vertWM-002.html flex-abspos-staticpos-align-self-vertWM-002-ref.html
+== flex-abspos-staticpos-align-self-vertWM-003.html flex-abspos-staticpos-align-self-vertWM-003-ref.html
+== flex-abspos-staticpos-align-self-vertWM-004.html flex-abspos-staticpos-align-self-vertWM-004-ref.html
+
+== flex-abspos-staticpos-fallback-align-content-001.html flex-abspos-staticpos-fallback-align-content-001-ref.html
+== flex-abspos-staticpos-fallback-justify-content-001.html flex-abspos-staticpos-fallback-justify-content-001-ref.html
+
+== flex-abspos-staticpos-justify-content-001.html flex-abspos-staticpos-justify-content-001-ref.html
+== flex-abspos-staticpos-justify-content-002.html flex-abspos-staticpos-justify-content-002-ref.html
+== flex-abspos-staticpos-justify-content-003.html flex-abspos-staticpos-justify-content-003-ref.html
+== flex-abspos-staticpos-justify-content-004.html flex-abspos-staticpos-justify-content-004-ref.html
+== flex-abspos-staticpos-justify-content-005.html flex-abspos-staticpos-justify-content-005-ref.html
+== flex-abspos-staticpos-justify-content-006.html flex-abspos-staticpos-justify-content-006-ref.html
+== flex-abspos-staticpos-justify-content-007.html flex-abspos-staticpos-justify-content-007-ref.html
+== flex-abspos-staticpos-justify-content-008.html flex-abspos-staticpos-justify-content-008-ref.html
+== flex-abspos-staticpos-justify-content-rtl-001.html flex-abspos-staticpos-justify-content-rtl-001-ref.html
+== flex-abspos-staticpos-justify-content-rtl-002.html flex-abspos-staticpos-justify-content-rtl-002-ref.html
+== flex-abspos-staticpos-justify-content-vertWM-001.html flex-abspos-staticpos-justify-content-vertWM-001-ref.html
+== flex-abspos-staticpos-justify-content-vertWM-002.html flex-abspos-staticpos-justify-content-vertWM-002-ref.html
+
+== flex-abspos-staticpos-justify-self-001.html flex-abspos-staticpos-justify-self-001-ref.html
+
+== flex-abspos-staticpos-margin-001.html flex-abspos-staticpos-margin-001-ref.html
+== flex-abspos-staticpos-margin-002.html flex-abspos-staticpos-margin-002-ref.html
+
+== grid-abspos-staticpos-align-self-001.html grid-abspos-staticpos-align-self-001-ref.html
+== grid-abspos-staticpos-align-self-002.html grid-abspos-staticpos-align-self-002-ref.html
+== grid-abspos-staticpos-align-self-img-001.html grid-abspos-staticpos-align-self-img-001-ref.html
+== grid-abspos-staticpos-align-self-img-002.html grid-abspos-staticpos-align-self-img-002-ref.html
+== grid-abspos-staticpos-align-self-rtl-001.html grid-abspos-staticpos-align-self-rtl-001-ref.html
+== grid-abspos-staticpos-align-self-rtl-002.html grid-abspos-staticpos-align-self-rtl-002-ref.html
+== grid-abspos-staticpos-align-self-rtl-003.html grid-abspos-staticpos-align-self-rtl-003-ref.html
+== grid-abspos-staticpos-align-self-rtl-004.html grid-abspos-staticpos-align-self-rtl-004-ref.html
+== grid-abspos-staticpos-align-self-vertWM-001.html grid-abspos-staticpos-align-self-vertWM-001-ref.html
+== grid-abspos-staticpos-align-self-vertWM-002.html grid-abspos-staticpos-align-self-vertWM-002-ref.html
+== grid-abspos-staticpos-align-self-vertWM-003.html grid-abspos-staticpos-align-self-vertWM-003-ref.html
+== grid-abspos-staticpos-align-self-vertWM-004.html grid-abspos-staticpos-align-self-vertWM-004-ref.html
+
+== grid-abspos-staticpos-justify-self-001.html grid-abspos-staticpos-justify-self-001-ref.html
+== grid-abspos-staticpos-justify-self-002.html grid-abspos-staticpos-justify-self-002-ref.html
+== grid-abspos-staticpos-justify-self-img-001.html grid-abspos-staticpos-justify-self-img-001-ref.html
+== grid-abspos-staticpos-justify-self-img-002.html grid-abspos-staticpos-justify-self-img-002-ref.html
+== grid-abspos-staticpos-justify-self-rtl-001.html grid-abspos-staticpos-justify-self-rtl-001-ref.html
+== grid-abspos-staticpos-justify-self-rtl-002.html grid-abspos-staticpos-justify-self-rtl-002-ref.html
+== grid-abspos-staticpos-justify-self-rtl-003.html grid-abspos-staticpos-justify-self-rtl-003-ref.html
+== grid-abspos-staticpos-justify-self-rtl-004.html grid-abspos-staticpos-justify-self-rtl-004-ref.html
+== grid-abspos-staticpos-justify-self-vertWM-001.html grid-abspos-staticpos-justify-self-vertWM-001-ref.html
+== grid-abspos-staticpos-justify-self-vertWM-002.html grid-abspos-staticpos-justify-self-vertWM-002-ref.html
+== grid-abspos-staticpos-justify-self-vertWM-003.html grid-abspos-staticpos-justify-self-vertWM-003-ref.html
+== grid-abspos-staticpos-justify-self-vertWM-004.html grid-abspos-staticpos-justify-self-vertWM-004-ref.html
diff --git a/layout/reftests/w3c-css/submitted/align3/support/colors-8x16.png b/layout/reftests/w3c-css/submitted/align3/support/colors-8x16.png
new file mode 100644
index 000000000..596fdb389
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/align3/support/colors-8x16.png
author	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
committer	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
commit	5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree	10027f336435511475e392454359edea8e25895d /layout/reftests/w3c-css/submitted/align3
parent	49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download	UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip