Bug 1304012 -- Part 3: mochitest updated to match new spec behavior, and updated property database. r=dholbert
authorBrad Werth <bwerth@mozilla.com>
Thu, 29 Sep 2016 15:47:36 -0700
changeset 419821 1c8ed959072ab9eb66ca02ad77003a33dd210a5f
parent 419820 a0ea382c12cae7c67b0f0c182f334fc3c4809ee8
child 419822 9eb7d99a0bb26a885ab865f245934caad0b4aec7
push id31023
push usercykesiopka.bmo@gmail.com
push dateSat, 01 Oct 2016 01:30:33 +0000
reviewersdholbert
bugs1304012
milestone52.0a1
Bug 1304012 -- Part 3: mochitest updated to match new spec behavior, and updated property database. r=dholbert MozReview-Commit-ID: o5ENMMRLZF
layout/style/test/property_database.js
layout/style/test/test_align_justify_computed_values.html
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -4398,19 +4398,18 @@ var gCSSProperties = {
     invalid_values: [ "space-between", "abc", "5%", "legacy", "legacy end",
                       "end legacy", "unsafe", "unsafe baseline", "normal unsafe",
                       "safe left unsafe", "safe stretch", "end end", "auto" ]
   },
   "align-self": {
     domProp: "alignSelf",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
-    // (Assuming defaults on the parent, 'auto' will compute to 'normal'.)
-    initial_values: [ "auto", "normal" ],
-    other_values: [ "start", "flex-start", "flex-end", "center", "stretch",
+    initial_values: [ "auto" ],
+    other_values: [ "normal", "start", "flex-start", "flex-end", "center", "stretch",
                     "baseline", "last-baseline", "right safe", "unsafe center",
                     "self-start", "self-end safe" ],
     invalid_values: [ "space-between", "abc", "30px", "stretch safe", "safe" ]
   },
   "justify-content": {
     domProp: "justifyContent",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
@@ -4439,18 +4438,18 @@ var gCSSProperties = {
                       "safe legacy left", "legacy left safe", "legacy safe left",
                       "safe left legacy", "legacy left legacy", "baseline unsafe",
                       "safe unsafe", "safe left unsafe", "safe stretch" ]
   },
   "justify-self": {
     domProp: "justifySelf",
     inherited: false,
     type: CSS_TYPE_LONGHAND,
-    initial_values: [ "auto", "normal" ],
-    other_values: [ "start", "end", "flex-start", "flex-end", "self-start",
+    initial_values: [ "auto" ],
+    other_values: [ "normal", "start", "end", "flex-start", "flex-end", "self-start",
                     "self-end", "center", "left", "right", "baseline",
                     "last-baseline", "stretch", "left unsafe", "unsafe right",
                     "safe right", "center safe" ],
     invalid_values: [ "space-between", "abc", "30px", "none",
                       "legacy left", "right legacy" ]
   },
   "flex": {
     domProp: "flex",
--- a/layout/style/test/test_align_justify_computed_values.html
+++ b/layout/style/test/test_align_justify_computed_values.html
@@ -46,155 +46,93 @@ function getComputedJustifySelf(elem) {
 function getComputedJustifyItems(elem) {
   return window.getComputedStyle(elem, "").justifyItems;
 }
 function getComputedJustifyContent(elem) {
   return window.getComputedStyle(elem, "").justifyContent;
 }
 
 /**
- * Test behavior of 'align-self:auto' (Bug 696253)
+ * Test behavior of 'align-self:auto' (Bug 696253 and Bug 1304012)
  * ===============================================
  *
- * The value "align-self: auto" is special.  It's the initial value for
- * "align-self", and it's supposed to compute to the parent's "align-items" value.
- *
- * However, to allow its style-struct to be shared by default, we internally
- * make it compute to a special "auto" enumerated value, and then we resolve that
- * to the correct value by examining the parent's style struct whenever we actually
- * need to use it.
- *
- * This test makes sure that optimization isn't detectable to content.
- *
- * One special case of this is inheritance -- e.g.:
- *
- *  <html style="align-items: baseline">
- *    <body style="align-self: auto; align-items: center">
- *      <div style="align-self: inherit">
- *
- * In that example, the child div's "inherit" should get the _computed_ value
- * of "align-self" on the body.  That, in turn, is "auto", so it should compute to
- * its parent's "align-items" value, which is "baseline".  So we need to end up 
- * with a computed "align-self" value of "baseline" on the child.
- *
- * (NOTE: if we instead allowed the child div to directly inherit the value "auto"
- * from its parent, then we'd get different & incorrect behavior. The div would
- * resolve that inherited "auto" value to its own parent's "align-items" value,
- * which is "center" -- not "baseline".)
- *
- * This mochitest tests that situation and a few other similar tricky situations.
+ * In a previous revision of the CSS Alignment spec, align-self:auto
+ * was required to actually *compute* to the parent's align-items value --
+ * but now, the spec says it simply computes to itself, and it should
+ * only get converted into the parent's align-items value when it's used
+ * in layout.  This test verifies that we do indeed have it compute to
+ * itself, regardless of the parent's align-items value.
  */
 
 /*
  * Tests for a block node with a parent node:
  */
 function testGeneralNode(elem) {
   // Test initial computed style
-  // (Initial value should be 'auto', which should compute to 'normal')
-  is(getComputedAlignSelf(elem), "normal", elem.tagName + ": " +
-     "initial computed value of 'align-self' should be 'normal', " +
-     "if we haven't explicitly set any style on the parent");
+  // (Initial value should be 'auto', which should compute to itself)
+  is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " +
+     "initial computed value of 'align-self' should be 'auto'");
 
   // Test value after setting align-self explicitly to "auto"
   elem.style.alignSelf = "auto";
-  is(getComputedAlignSelf(elem), "normal", elem.tagName + ": " +
-     "computed value of 'align-self: auto' should be 'normal', " +
-     "if we haven't explicitly set any style on the parent");
+  is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " +
+     "computed value of 'align-self: auto' should be 'auto'");
   elem.style.alignSelf = ""; // clean up
 
   // Test value after setting align-self explicitly to "inherit"
   elem.style.alignSelf = "inherit";
-  is(getComputedAlignSelf(elem), "normal", elem.tagName + ": " +
-     "computed value of 'align-self: inherit' should be 'normal', " +
-     "if we haven't explicitly set any style on the parent");
+  if (elem.parentNode && elem.parentNode.style) {
+    is(getComputedAlignSelf(elem), getComputedAlignSelf(elem.parentNode),
+       elem.tagName + ": computed value of 'align-self: inherit' " +
+       "should match the value on the parent");
+  } else {
+    is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " +
+       "computed value of 'align-self: inherit' should be 'auto', " +
+       "when there is no parent");
+  }
   elem.style.alignSelf = ""; // clean up
 }
 
 /*
  * Tests that depend on us having a parent node:
  */
 function testNodeThatHasParent(elem) {
   // Sanity-check that we actually do have a styleable parent:
   ok(elem.parentNode && elem.parentNode.style, elem.tagName + ": " +
      "bug in test -- expecting caller to pass us a node with a parent");
 
   // Test initial computed style when "align-items" has been set on our parent.
   // (elem's initial "align-self" value should be "auto", which should compute
   // to its parent's "align-items" value, which in this case is "center".)
   elem.parentNode.style.alignItems = "center";
-  is(getComputedAlignSelf(elem), "center", elem.tagName + ": " +
-     "initial computed value of 'align-self' should match parent's " +
-     "specified 'align-items' value");
+  is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " +
+     "initial computed value of 'align-self' should be 'auto', even " +
+     "after changing parent's 'align-items' value");
 
   // ...and now test computed style after setting "align-self" explicitly to
   // "auto" (with parent "align-items" still at "center")
   elem.style.alignSelf = "auto";
-  is(getComputedAlignSelf(elem), "center", elem.tagName + ": " +
-     "computed value of 'align-self: auto' should match parent's " +
-     "specified 'align-items' value");
+  is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " +
+     "computed value of 'align-self: auto' should remain 'auto', after " +
+     "being explicitly set");
 
   elem.style.alignSelf = ""; // clean up
   elem.parentNode.style.alignItems = ""; // clean up
 
   // Finally: test computed style after setting "align-self" to "inherit"
-  // and leaving parent at its initial value (which should be "auto", which
-  // should compute to "normal")
+  // and leaving parent at its initial value which should be "auto".
   elem.style.alignSelf = "inherit";
-  is(getComputedAlignSelf(elem), "normal", elem.tagName + ": " +
+  is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " +
      "computed value of 'align-self: inherit' should take parent's " +
-     "computed 'align-self' value (which should be 'normal', " +
+     "computed 'align-self' value (which should be 'auto', " +
      "if we haven't explicitly set any other style");
   elem.style.alignSelf = ""; // clean up
  }
 
 /*
- * Tests that depend on us having a grandparent node:
- */
-function testNodeThatHasGrandparent(elem) {
-  // Sanity-check that we actually do have a styleable grandparent:
-  ok(elem.parentNode && elem.parentNode.parentNode &&
-     elem.parentNode.parentNode.style, elem.tagName + ": " +
-     "bug in test -- should be getting a node with a grandparent");
-
-  // Test computed "align-self" after we set "align-self" to "inherit" on our elem
-  // and to "auto" on its parent, and "align-items" to "baseline" on its
-  // grandparent. The parent's "auto" value should resolve to "baseline", and
-  // that's what our elem should inherit.
-
-  elem.style.alignSelf = "inherit";
-  elem.parentNode.style.alignSelf = "auto";
-  elem.parentNode.parentNode.style.alignItems = "baseline";
-
-  is(getComputedAlignSelf(elem), "baseline", elem.tagName + ": " +
-     "computed value of 'align-self:inherit' on node when parent has " +
-     "'align-self:auto' and grandparent has 'align-items:baseline'")
-
-  // clean up:
-  elem.style.alignSelf = "";
-  elem.parentNode.style.alignSelf = "";
-  elem.parentNode.parentNode.style.alignItems = "";
-
-  // Test computed "align-self" after we set it to "auto" on our node, set
-  // "align-items" to "inherit" on its parent, and "align-items" to "baseline"
-  // on its grandparent. The parent's "inherit" should compute to "baseline",
-  // and our elem's "auto" value should resolve to that.
-  elem.style.alignSelf = "auto";
-  elem.parentNode.style.alignItems = "inherit";
-  elem.parentNode.parentNode.style.alignItems = "baseline";
-  is(getComputedAlignSelf(elem), "baseline", elem.tagName + ": " +
-     "computed value of 'align-self:auto on node when parent has " +
-     "'align-items:inherit' and grandparent has 'align-items:baseline'")
-
-  // clean up:
-  elem.style.alignSelf = "";
-  elem.parentNode.style.alignItems = "";
-  elem.parentNode.parentNode.style.alignItems = "";
-}
-
-/*
  * Main test function
  */
 function main() {
   // Test the root node
   // ==================
   // (It's special because it has no parent style context.)
 
   var rootNode = document.documentElement;
@@ -213,96 +151,84 @@ function main() {
 
   var body = document.getElementsByTagName("body")[0];
   is(body.parentNode, document.documentElement,
      "expecting body element's parent to be the root node");
 
   testGeneralNode(body);
   testNodeThatHasParent(body);
 
-  // Test the <div id="display"> node
-  // ================================
-  // (It has both a parent and a grandparent style context.)
-
-  var displayNode = document.getElementById("display");
-  is(displayNode.parentNode.parentNode, document.documentElement,
-     "expecting 'display' node's grandparent to be the root node");
-
-  testGeneralNode(displayNode);
-  testNodeThatHasParent(displayNode);
-  testNodeThatHasGrandparent(displayNode);
-
   // 
   // align-items/self tests:
   //
   //// Block tests
   var elem = document.body;
   var child = document.getElementById("display");
   var abs = document.getElementById("absChild");
   is(getComputedAlignItems(elem), 'normal', "default align-items value for block container");
-  is(getComputedAlignSelf(child), 'normal', "default align-self value for block child");
-  is(getComputedAlignSelf(abs), 'normal', "default align-self value for block container abs.pos. child");
+  is(getComputedAlignSelf(child), 'auto', "default align-self value for block child");
+  is(getComputedAlignSelf(abs), 'auto', "default align-self value for block container abs.pos. child");
   elem.style.alignItems = "end";
-  is(getComputedAlignSelf(child), 'end', "auto value copies align-items of parent");
-  is(getComputedAlignSelf(abs), 'end', "align-self:auto is affected by parent align-items value for block container abs.pos. child");
+  is(getComputedAlignSelf(child), 'auto', "align-self:auto value persists for block child");
+  is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for block container abs.pos. child");
   elem.style.alignItems = "left";
-  is(getComputedAlignItems(elem), 'left', "align-items:left computes to itself on a block");
-  is(getComputedAlignSelf(child), 'left', "align-self:left computes to left on block child");
-  is(getComputedAlignSelf(abs), 'left', "align-self:auto is affected by parent align-items value for block container abs.pos. child");
+  is(getComputedAlignItems(elem), 'left', "align-items:left computes to itself for a block");
+  is(getComputedAlignSelf(child), 'auto', "align-self:auto persists for block child");
+  is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for block container abs.pos. child");
   elem.style.alignItems = "right";
-  is(getComputedAlignSelf(child), 'right', "align-self:right computes to right on block child");
-  is(getComputedAlignSelf(abs), 'right', "align-self:auto is affected by parent align-items value for block container abs.pos. child");
+  is(getComputedAlignSelf(child), 'auto', "align-self:auto value persists for block child");
+  is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for block container abs.pos. child");
   elem.style.alignItems = "right safe";
-  is(getComputedAlignSelf(child), 'right safe', "align-items:'right safe' computes to 'align-self:right safe' on block child");
+  is(getComputedAlignSelf(child), 'auto', "align-self:auto value persists for block child");
   elem.style.alignItems = "";
   child.style.alignSelf = "left";
-  is(getComputedAlignSelf(child), 'left', "align-self:left computes to left on block child");
+  is(getComputedAlignSelf(child), 'left', "align-self:left computes to left for block child");
   child.style.alignSelf = "right";
-  is(getComputedAlignSelf(child), 'right', "align-self:right computes to right on block child");
+  is(getComputedAlignSelf(child), 'right', "align-self:right computes to right for block child");
   child.style.alignSelf = "";
   abs.style.alignSelf = "right";
-  is(getComputedAlignSelf(abs), 'right', "align-self:right computes to right on block container abs.pos. child");
+  is(getComputedAlignSelf(abs), 'right', "align-self:right computes to right for block container abs.pos. child");
 
   //// Flexbox tests
   function testFlexAlignItemsSelf(elem) {
     var item = elem.firstChild;
     var abs = elem.children[1];
     is(getComputedAlignItems(elem), 'normal', "default align-items value for flex container");
-    is(getComputedAlignSelf(item), 'normal', "default align-self value for flex item");
-    is(getComputedAlignSelf(abs), 'normal', "default align-self value for flex container abs.pos. child");
+    is(getComputedAlignSelf(item), 'auto', "default align-self value for flex item");
+    is(getComputedAlignSelf(abs), 'auto', "default align-self value for flex container abs.pos. child");
     elem.style.alignItems = "flex-end";
-    is(getComputedAlignSelf(item), 'flex-end', "auto value copies align-items of parent");
-    is(getComputedAlignSelf(abs), 'flex-end', "align-self:auto is affected by parent align-items value for flex container abs.pos. child");
+    is(getComputedAlignSelf(item), 'auto', "align-self:auto value persists for flex container child");
+    is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for flex container abs.pos. child");
     elem.style.alignItems = "left";
     is(getComputedAlignItems(elem), 'left', "align-items:left computes to itself for flex container");
     // XXX TODO: add left/right tests (bug 1221565)
     elem.style.alignItems = "";
   }
   testFlexAlignItemsSelf(document.getElementById("flexContainer"));
   testFlexAlignItemsSelf(document.getElementById("flexContainerGrid"));
 
   //// Grid tests
   function testGridAlignItemsSelf(elem) {
     var item = elem.firstChild;
     var abs = elem.children[1];
     is(getComputedAlignItems(elem), 'normal', "default align-items value for grid container");
-    is(getComputedAlignSelf(item), 'normal', "default align-self value for grid item");
-    is(getComputedAlignSelf(abs), 'normal', "default align-self value for grid container abs.pos. child");
+    is(getComputedAlignSelf(item), 'auto', "default align-self value for grid item");
+    is(getComputedAlignSelf(abs), 'auto', "default align-self value for grid container abs.pos. child");
     elem.style.alignItems = "end";
-    is(getComputedAlignSelf(item), 'end', "auto value copies align-items of parent");
-    is(getComputedAlignSelf(abs), 'end', "align-self:auto is affected by parent align-items value for grid container abs.pos. child");
+    is(getComputedAlignSelf(item), 'auto', "align-self:auto value persists for grid container child");
+    is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for grid container abs.pos. child");
     elem.style.alignItems = "left";
     is(getComputedAlignItems(elem), 'left', "align-items:left computes to itself for grid container");
-    is(getComputedAlignSelf(item), 'left', "align-self:left computes to left on grid item");
-    is(getComputedAlignSelf(abs), 'left', "align-self:auto is affected by parent align-items value for grid container abs.pos. child");
+    is(getComputedAlignSelf(item), 'auto', "align-self:auto value persists for grid container child");
+    is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for grid container abs.pos. child");
     elem.style.alignItems = "right";
-    is(getComputedAlignSelf(item), 'right', "align-self:right computes to right on grid item");
-    is(getComputedAlignSelf(abs), 'right', "align-self:auto is affected by parent align-items value for grid container abs.pos. child");
+    is(getComputedAlignSelf(item), 'auto', "align-self:auto value persists for grid container child");
+    is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for grid container abs.pos. child");
     elem.style.alignItems = "right safe";
-    is(getComputedAlignSelf(item), 'right safe', "align-items:'right safe' computes to 'align-self:right safe' on grid item");
+    is(getComputedAlignSelf(item), 'auto', "align-self:auto value persists for grid container child");
     item.style.alignSelf = "left";
     is(getComputedAlignSelf(item), 'left', "align-self:left computes to left on grid item");
     item.style.alignSelf = "right";
     is(getComputedAlignSelf(item), 'right', "align-self:right computes to right on grid item");
     item.style.alignSelf = "right safe";
     is(getComputedAlignSelf(item), 'right safe', "align-self:'right safe' computes to 'right safe' on grid item");
     item.style.alignSelf = "";
     abs.style.alignSelf = "right";
@@ -317,89 +243,89 @@ function main() {
   //
   // justify-items/self tests:
   //
   //// Block tests
   var elem = document.body;
   var child = document.getElementById("display");
   var abs = document.getElementById("absChild");
   is(getComputedJustifyItems(elem), 'normal', "default justify-items value for block container");
-  is(getComputedJustifySelf(child), 'normal', "default justify-self value for block child");
-  is(getComputedJustifySelf(abs), 'normal', "default justify-self value for block container abs.pos. child");
+  is(getComputedJustifySelf(child), 'auto', "default justify-self value for block container child");
+  is(getComputedJustifySelf(abs), 'auto', "default justify-self value for block container abs.pos. child");
   elem.style.justifyItems = "end";
-  is(getComputedJustifySelf(child), 'end', "auto value copies justify-items of parent");
-  is(getComputedJustifySelf(abs), 'end', "justify-self:auto ist affected by parent justify-items value for block container abs.pos. child");
+  is(getComputedJustifySelf(child), 'auto', "justify-self:auto value persists for block child");
+  is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for block container abs.pos. child");
   elem.style.justifyItems = "left";
   is(getComputedJustifyItems(elem), 'left', "justify-items:left computes to itself on a block");
-  is(getComputedJustifySelf(child), 'left', "justify-self:left computes to left on block child");
-  is(getComputedJustifySelf(abs), 'left', "justify-self:auto is affected by parent justify-items value for block container abs.pos. child");
+  is(getComputedJustifySelf(child), 'auto', "justify-self:auto value persists for block child");
+  is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for block container abs.pos. child");
   elem.style.justifyItems = "right";
-  is(getComputedJustifySelf(child), 'right', "justify-self:right computes to right on block child");
-  is(getComputedJustifySelf(abs), 'right', "justify-self:auto is affected by parent justify-items value for block container abs.pos. child");
+  is(getComputedJustifySelf(child), 'auto', "justify-self:auto value persists for block child");
+  is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for block container abs.pos. child");
   elem.style.justifyItems = "right safe";
-  is(getComputedJustifySelf(child), 'right safe', "justify-items:'right safe' computes to 'justify-self:right safe' on block child");
+  is(getComputedJustifySelf(child), 'auto', "justify-self:auto value persists for block child");
   elem.style.justifyItems = "";
   child.style.justifySelf = "left";
   is(getComputedJustifySelf(child), 'left', "justify-self:left computes to left on block child");
   child.style.justifySelf = "right";
   is(getComputedJustifySelf(child), 'right', "justify-self:right computes to right on block child");
   child.style.justifySelf = "";
   abs.style.justifySelf = "right";
   is(getComputedJustifySelf(abs), 'right', "justify-self:right computes to right on block container abs.pos. child");
 
   //// Flexbox tests
   function testFlexJustifyItemsSelf(elem) {
     var item = elem.firstChild;
     var abs = elem.children[1];
     is(getComputedJustifyItems(elem), 'normal', "default justify-items value for flex container");
-    is(getComputedJustifySelf(item), 'normal', "default justify-self value for flex item");
-    is(getComputedJustifySelf(abs), 'normal', "default justify-self value for flex container abs.pos. child");
+    is(getComputedJustifySelf(item), 'auto', "default justify-self value for flex item");
+    is(getComputedJustifySelf(abs), 'auto', "default justify-self value for flex container abs.pos. child");
     elem.style.justifyItems = "flex-end";
-    is(getComputedJustifySelf(item), 'flex-end', "auto value copies justify-items of parent");
-    is(getComputedJustifySelf(abs), 'flex-end', "default justify-self value for flex container abs.pos. child");
+    is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for flex container child");
+    is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for flex container abs.pos. child");
     elem.style.justifyItems = "left";
     is(getComputedJustifyItems(elem), 'left', "justify-items:left computes to itself for flex container");
     elem.style.justifyItems = "right safe";
-    is(getComputedJustifySelf(item), 'right safe', "justify-items:'right safe' computes to 'justify-self:right safe' on flex item");
+    is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for flex container child");
     // XXX TODO: add left/right tests (bug 1221565)
     elem.style.justifyItems = "";
   }
   testFlexJustifyItemsSelf(document.getElementById("flexContainer"));
   testFlexJustifyItemsSelf(document.getElementById("flexContainerGrid"));
 
   //// Grid tests
   function testGridJustifyItemsSelf(elem) {
     var item = elem.firstChild;
     var abs = elem.children[1];
     is(getComputedJustifyItems(elem), 'normal', "default justify-items value for grid container");
-    is(getComputedJustifySelf(item), 'normal', "default justify-self value for grid item");
-    is(getComputedJustifySelf(abs), 'normal', "default justify-self value for grid container abs.pos. child");
+    is(getComputedJustifySelf(item), 'auto', "default justify-self value for grid item");
+    is(getComputedJustifySelf(abs), 'auto', "default justify-self value for grid container abs.pos. child");
     elem.style.justifyItems = "end";
-    is(getComputedJustifySelf(item), 'end', "auto value copies justify-items of parent");
-    is(getComputedJustifySelf(abs), 'end', "default justify-self value for grid container abs.pos. child");
+    is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child");
+    is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child");
     elem.style.justifyItems = "left";
     is(getComputedJustifyItems(elem), 'left', "justify-items:left computes to itself for grid container");
-    is(getComputedJustifySelf(item), 'left', "justify-self:left computes to left on grid item");
-    is(getComputedJustifySelf(abs), 'left', "justify-self:auto is affected by parent justify-items value for grid container abs.pos. child");
+    is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child");
+    is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child");
     elem.style.justifyItems = "legacy left";
-    is(getComputedJustifySelf(item), 'left', "justify-self inherits without the legacy keyword on grid item");
-    is(getComputedJustifySelf(abs), 'left', "justify-self:auto is affected by parent justify-items value for grid container abs.pos. child");
+    is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child");
+    is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child");
     elem.style.justifyItems = "right";
-    is(getComputedJustifySelf(item), 'right', "justify-self:right computes to right on grid item");
-    is(getComputedJustifySelf(abs), 'right', "justify-self:auto is affected by parent justify-items value for grid container abs.pos. child");
+    is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child");
+    is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child");
     elem.style.justifyItems = "right safe";
-    is(getComputedJustifySelf(item), 'right safe', "justify-items:'right safe' computes to 'justify-self:right safe' on grid item");
+    is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child");
     elem.style.justifyItems = "legacy right";
-    is(getComputedJustifySelf(item), 'right', "justify-self inherits without the legacy keyword on grid item");
-    is(getComputedJustifySelf(abs), 'right', "justify-self:auto is affected by parent justify-items value for grid container abs.pos. child");
+    is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child");
+    is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child");
     elem.style.justifyItems = "legacy center";
     item.style.justifyItems = "inherit";
     abs.style.justifyItems = "inherit";
-    is(getComputedJustifySelf(item), 'center', "justify-self inherits without the legacy keyword on grid item");
-    is(getComputedJustifySelf(abs), 'center', "justify-self:auto isn't affected by parent justify-items value for grid container abs.pos. child");
+    is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child");
+    is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child");
     is(getComputedJustifyItems(elem), 'legacy center', "justify-items computes to itself grid container");
     is(getComputedJustifyItems(item), 'legacy center', "justify-items inherits including legacy keyword to grid item");
     is(getComputedJustifyItems(abs), 'legacy center', "justify-items inherits including legacy keyword to grid container abs.pos. child");
     elem.style.justifyItems = "";
     item.style.justifySelf = "left";
     is(getComputedJustifySelf(item), 'left', "justify-self:left computes to left on grid item");
     item.style.justifySelf = "right";
     is(getComputedJustifySelf(item), 'right', "justify-self:right computes to right on grid item");