Bug 1194892 - [css-grid] "span * / span *" should be treated as "auto / auto" for abs.pos. grid items. r=dholbert

layout/generic/nsGridContainerFrame.cpp

@@ -685,7 +685,14 @@ nsGridContainerFrame::ResolveAbsPosLineRange(
 
   LineRange r = ResolveLineRange(aStart, aEnd, aLineNameList, aAreaStart,
                                  aAreaEnd, aExplicitGridEnd, aStyle);
-  MOZ_ASSERT(!r.IsAuto(), "resolving definite lines shouldn't result in auto");
+  if (r.IsAuto()) {
+    MOZ_ASSERT(aStart.mHasSpan && aEnd.mHasSpan, "span / span is the only case "
+               "leading to IsAuto here -- we dealt with the other cases above");
+    // The second span was ignored per 9.2.1.  For abs.pos., 10.1 says that this
+    // case should result in "auto / auto" unlike normal flow grid items.
+    return LineRange(kAutoLine, kAutoLine);
+  }
+
   // Clamp definite lines to be within the implicit grid.
   // Note that this implies mUntranslatedStart may be equal to mUntranslatedEnd.
   r.mUntranslatedStart = clamped(r.mUntranslatedStart, aGridStart, aGridEnd);

layout/reftests/css-grid/grid-abspos-items-001-ref.html

@@ -67,6 +67,11 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0;
   top:3px; left:1px; right:5px; bottom:1px;
   width:auto; height:auto;
 }
+.i, .j {
+  top:3px; left:1px; right:5px; bottom:1px;
+  border:none;
+  width:auto; height:auto;
+}
 span {
   background: lime;
   border: 1px solid;
@@ -103,6 +108,14 @@ span {
 <span class="h abs">h</span>
 </div>
 
+<div class="grid" style="height:17px">
+<span class="i abs">i</span>
+</div>
+
+<div class="grid" style="height:17px">
+<span class="j abs">j</span>
+</div>
+
 <div class="grid" style="width:43px; height:53px">
 <span class="abs" style="left:1px; top:3px; height:11px; width:5px;">a</span>
 <span class="abs" style="right:5px; top:3px; height:11px; width:42px;">b</span>

layout/reftests/css-grid/grid-abspos-items-001.html

@@ -65,6 +65,16 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0;
   grid-column:  auto / auto;
   grid-row:     auto / auto; 
 }
+.i {
+  grid-column:  span 1 / span 2;
+  grid-row:     span 2 / span A;
+  background: lime;
+}
+.j {
+  grid-column:  span A / span 2;
+  grid-row:     span 2 / span 1;
+  background: lime;
+}
 span {
   background: lime;
   border: 1px solid;
@@ -101,6 +111,16 @@ span {
 <span class="h abs">h</span>
 </div>
 
+<div class="grid" style="height:auto">
+<div style="grid-column: 1 / span 3"></div>
+<div class="i abs">i</div>
+</div>
+
+<div class="grid" style="height:auto">
+<div style="grid-column: 1 / span 3"></div>
+<div class="j abs">j</div>
+</div>
+
 <div class="grid" style="width:43px; height:53px">
 <span class="abs" style="grid-column-end:1; grid-row-end:1;">a</span>
 <span class="abs" style="grid-column-start:1; grid-row-end:1;">b</span>

layout/reftests/css-grid/grid-abspos-items-002-ref.html

@@ -68,6 +68,11 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0;
   top:3px; left:1px; right:5px; bottom:1px;
   width:auto; height:auto;
 }
+.i, .j {
+  top:3px; left:1px; right:5px; bottom:1px;
+  border:none;
+  width:auto; height:auto;
+}
 span {
   background: lime;
   border: 1px solid;
@@ -104,6 +109,14 @@ span {
 <span class="h abs">h</span>
 </div>
 
+<div class="grid" style="height:17px">
+<span class="i abs">i</span>
+</div>
+
+<div class="grid" style="height:17px">
+<span class="j abs">j</span>
+</div>
+
 <div class="grid" style="width:43px; height:53px">
 <span class="abs" style="left:1px; top:3px; height:11px; width:5px;">a</span>
 <span class="abs" style="right:5px; top:3px; height:11px; width:42px;">b</span>

layout/reftests/css-grid/grid-abspos-items-002.html

@@ -65,6 +65,16 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0;
   grid-column:  auto / auto;
   grid-row:     auto / auto; 
 }
+.i {
+  grid-column:  span 1 / span 2;
+  grid-row:     span 2 / span A;
+  background: lime;
+}
+.j {
+  grid-column:  span A / span 2;
+  grid-row:     span 2 / span 1;
+  background: lime;
+}
 span {
   background: lime;
   border: 1px solid;
@@ -101,6 +111,16 @@ span {
 <span class="h abs">h</span>
 </div>
 
+<div class="grid" style="height:auto">
+<div style="grid-column: 1 / span 3"></div>
+<div class="i abs">i</div>
+</div>
+
+<div class="grid" style="height:auto">
+<div style="grid-column: 1 / span 3"></div>
+<div class="j abs">j</div>
+</div>
+
 <div class="grid" style="width:43px; height:53px">
 <span class="abs" style="grid-column-end:1; grid-row-end:1;">a</span>
 <span class="abs" style="grid-column-start:1; grid-row-end:1;">b</span>