summaryrefslogtreecommitdiffstats
path: root/layout/reftests/w3c-css/submitted/align3
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/w3c-css/submitted/align3')
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-001-ref.html103
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-001.html106
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-002-ref.html103
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-002.html106
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-003-ref.html106
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-003.html106
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-004-ref.html106
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-004.html106
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-005-ref.html103
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-005.html106
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-006-ref.html103
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-006.html106
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-007-ref.html106
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-007.html106
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-008-ref.html106
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-008.html106
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-001-ref.html106
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-001.html107
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-002-ref.html103
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-rtl-002.html107
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-001-ref.html103
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-001.html107
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-002-ref.html106
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-content-vertWM-002.html107
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-001-ref.html99
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-001.html98
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-002-ref.html99
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-002.html98
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-003-ref.html102
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-003.html98
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-004-ref.html102
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-004.html98
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-005-ref.html99
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-005.html98
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-006-ref.html99
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-006.html98
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-007-ref.html102
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-007.html98
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-008-ref.html102
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-008.html98
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-001-ref.html102
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-001.html98
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-002-ref.html102
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-002.html99
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-003-ref.html99
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-003.html98
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-004-ref.html99
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-rtl-004.html99
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-001-ref.html99
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-001.html98
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-002-ref.html99
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-002.html99
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-003-ref.html102
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-003.html98
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-004-ref.html102
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-vertWM-004.html100
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-align-content-001-ref.html75
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-align-content-001.html72
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-justify-content-001-ref.html75
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-fallback-justify-content-001.html76
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-001-ref.html103
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-001.html101
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-002-ref.html103
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-002.html101
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-003-ref.html103
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-003.html101
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-004-ref.html103
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-004.html101
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-005-ref.html103
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-005.html101
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-006-ref.html103
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-006.html101
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-007-ref.html103
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-007.html101
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-008-ref.html103
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-008.html101
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-001-ref.html103
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-001.html102
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-002-ref.html106
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-rtl-002.html102
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-001-ref.html106
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-001.html102
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-002-ref.html103
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-content-vertWM-002.html102
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-self-001-ref.html93
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-justify-self-001.html97
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-001-ref.html79
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-001.html83
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-002-ref.html79
-rw-r--r--layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-margin-002.html84
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-001-ref.html100
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-001.html101
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-002-ref.html98
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-002.html100
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-001-ref.html127
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-001.html126
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-002-ref.html125
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-img-002.html125
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-001-ref.html102
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-001.html101
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-002-ref.html102
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-002.html102
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-003-ref.html101
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-003.html100
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-004-ref.html101
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-rtl-004.html101
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-001-ref.html101
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-001.html102
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-002-ref.html101
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-002.html103
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-003-ref.html99
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-003.html101
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-004-ref.html99
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-vertWM-004.html102
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-001-ref.html101
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-001.html102
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-002-ref.html99
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-002.html101
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-001-ref.html127
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-001.html126
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-002-ref.html125
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-img-002.html125
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-001-ref.html101
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-001.html102
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-002-ref.html101
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-002.html103
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-003-ref.html99
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-003.html101
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-004-ref.html99
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-rtl-004.html102
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-001-ref.html103
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-001.html101
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-002-ref.html103
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-002.html102
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-003-ref.html101
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-003.html100
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-004-ref.html101
-rw-r--r--layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-vertWM-004.html101
-rw-r--r--layout/reftests/w3c-css/submitted/align3/reftest.list77
-rw-r--r--layout/reftests/w3c-css/submitted/align3/support/colors-8x16.pngbin0 -> 92 bytes
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
Binary files differ