[css-grid] How to resolve lines for absolutely positioned grid items

Hi,

I'm implementing Grid layout for Gecko and I have a few questions
on how lines should be resolved for abs.pos. grid items.
(I'm including a full example inline at the bottom)

Q1. what is the end line for "grid-column: auto / span 2" ?

My understanding is that "span 2" means "cover two tracks"
just as it does for normal flow grid items, i.e. line 3.
Is that correct?

Q2. what is the end line for "grid-column: auto / span A" ?
http://dev.w3.org/csswg/css-grid/#grid-placement-errors
third paragraph says it should be treated as "span 1"
which seems undesirable for abs.pos. grid items.

(I would like the answer to cover both when line A exists
and when it doesn't exist.)

Q3. what is the start and end lines for "grid-column: 99 / 100"
     in a 3x3 grid?

I think first clamping the lines to the implicit grid bounds
makes sense ("4 / 4").  And then the error handling:
http://dev.w3.org/csswg/css-grid/#grid-placement-errors
(first paragraph says "it instead contributes nothing")
makes it "4 / auto".  So the containing block will cover
the area between the end of the grid to the padding-edge on
the right side.  Is that correct?

And what is the answer to Q3 if the grid has no tracks at all?
(same as "auto / auto" ?)

I'm assuming that abs.pos. grid items don't create new tracks
in the implicit grid due to the Note in 9.4:
"such elements do not take up space or otherwise
  participate in the layout of the grid."
http://dev.w3.org/csswg/css-grid/#abspos-items
but it was brought up during code review that there is nothing
in the spec that actually says that.  To the contrary,
the intro to chap 6. "The Implicit Grid" makes no exception
for abs.pos. grid items:
http://dev.w3.org/csswg/css-grid/#implicit-grids


Thanks,
Mats

(an example that covers the above cases follows)


<style>
.grid {
  display: grid;
  position: relative;
  border: dashed blue;
  grid-template-columns: 20px 20px (B) 20px;
  grid-template-rows:    20px 20px 20px;
  padding-left: 10px;
  width: 60px;
  height: 60px;
}

.a {
   grid-column: 1 / span 2;
   grid-row:    1 / 3;
   background: lime;
}

.b {
   grid-column:  auto / 2;
   grid-row:     auto / auto;
   position: absolute;
   left:0; right:0; top:0; bottom:0;
   opacity: 0.7;
   background: pink;
}
</style>

<div class="grid">
<span class="a">a</span>
<span class="b" style="grid-column: auto / span 2">b</span>
</div>

<div class="grid">
<span class="a">a</span>
<span class="b" style="grid-column: auto / span A">b</span>
</div>

<div class="grid">
<span class="a">a</span>
<span class="b" style="grid-column: auto / span B">b</span>
</div>

<div class="grid">
<span class="a">a</span>
<span class="b" style="grid-column: 99 / 100">b</span>
</div>

Received on Tuesday, 24 March 2015 18:59:38 UTC