Bug 1340309 part 2: Adjust some abspos align-self/justify-self tests to better exercise "auto" value. r=mats
authorDaniel Holbert <dholbert@cs.stanford.edu>
Fri, 24 Feb 2017 08:38:38 -0800
changeset 374067 9ff75c152be3b18e5f8750b7bb241f11ba3d52e4
parent 374066 06623679bd90b5edadd91022bf83589eb55b2d9e
child 374068 858477eb9953c6a6c8991c7b78c456e9f71f7c4c
push id10863
push userjlorenzo@mozilla.com
push dateMon, 06 Mar 2017 23:02:23 +0000
treeherdermozilla-aurora@0931190cd725 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmats
bugs1340309
milestone54.0a1
Bug 1340309 part 2: Adjust some abspos align-self/justify-self tests to better exercise "auto" value. r=mats MozReview-Commit-ID: Glrv2aYmgbX
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-001-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-001.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-002-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-002.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-003-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-003.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-004-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-004.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-005-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-005.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-006-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-006.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-007-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-007.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-008-ref.html
layout/reftests/w3c-css/submitted/align3/flex-abspos-staticpos-align-self-008.html
layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-001-ref.html
layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-001.html
layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-002-ref.html
layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-align-self-002.html
layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-001-ref.html
layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-001.html
layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-002-ref.html
layout/reftests/w3c-css/submitted/align3/grid-abspos-staticpos-justify-self-002.html
--- 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
@@ -42,17 +42,17 @@
     .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="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: -->
@@ -68,17 +68,17 @@
     <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="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: -->
--- 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
@@ -15,16 +15,17 @@
       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 {
--- 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
@@ -42,17 +42,17 @@
     .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="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: -->
@@ -68,17 +68,17 @@
     <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="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: -->
--- 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
@@ -15,16 +15,17 @@
       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 {
--- 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
@@ -45,17 +45,17 @@
     .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="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: -->
@@ -71,17 +71,17 @@
     <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="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: -->
--- 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
@@ -15,16 +15,17 @@
       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 {
--- 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
@@ -45,17 +45,17 @@
     .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="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: -->
@@ -71,17 +71,17 @@
     <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="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: -->
--- 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
@@ -15,16 +15,17 @@
       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 {
--- 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
@@ -42,17 +42,17 @@
     .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="alignStart"><!--auto--></div></div>
+    <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: -->
@@ -68,17 +68,17 @@
     <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="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: -->
--- 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
@@ -15,16 +15,17 @@
       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 {
--- 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
@@ -42,17 +42,17 @@
     .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="alignStart"><!--auto--></div></div>
+    <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: -->
@@ -68,17 +68,17 @@
     <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="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: -->
--- 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
@@ -15,16 +15,17 @@
       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 {
--- 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
@@ -45,17 +45,17 @@
     .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="alignStart"><!--auto--></div></div>
+    <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: -->
@@ -71,17 +71,17 @@
     <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="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: -->
--- 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
@@ -15,16 +15,17 @@
       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 {
--- 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
@@ -45,17 +45,17 @@
     .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="alignStart"><!--auto--></div></div>
+    <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: -->
@@ -71,17 +71,17 @@
     <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="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: -->
--- 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
@@ -15,16 +15,17 @@
       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 {
--- 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
@@ -43,17 +43,17 @@
     .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="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: -->
@@ -69,17 +69,17 @@
     <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="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: -->
--- 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
@@ -14,16 +14,17 @@
     .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;
--- 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
@@ -41,17 +41,17 @@
     .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="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: -->
@@ -67,17 +67,17 @@
     <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="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: -->
--- 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
@@ -14,16 +14,17 @@
     .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;
     }
--- 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
@@ -44,17 +44,17 @@
     .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="alignStart"><!--auto--></div></div>
+    <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: -->
@@ -70,17 +70,17 @@
     <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="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: -->
--- 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
@@ -14,16 +14,17 @@
     .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;
--- 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
@@ -42,17 +42,17 @@
     .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="alignStart"><!--auto--></div></div>
+    <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: -->
@@ -68,17 +68,17 @@
     <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="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: -->
--- 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
@@ -14,16 +14,17 @@
     .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;
     }