On 5/24/10 2:12 PM, Tab Atkins Jr. wrote:
> After drawing some more diagrams, looks like these are the rules we need:
The element tree doesn't include pseudo-elements, so the rules need to
be adjusted for that.
You're also missing inline-table in some places in there, I think.
> If an abspos element meets one of the following criteria:
> 1. It has two immediate siblings, and both are display:table-* (not
> display:table).
> 2. It has one immediate sibling, that sibling is display:table-*
> (not display:table), and its parent is display:table or
> display:table-*.
> 3. It has no siblings, and its parent is display:table or display:table-*.
Ok.... There's some whitespace issues in here, unless your definition
of "immediate sibling" covers those.
> ...then use the first of the following rules that matches to determine
> the auto position of the element:
> 1. If its following sibling is display:table-cell, the auto position
> is the upper right of the border box of the sibling.
<body style="display: table">
<div style="position: absolute"/>
<div style="display: table-cell"/>
</body>
Putting that abs pos div at the top right corner of the table cell
doesn't make any sense.
> 2. If its preceding sibling is display:table-cell, the auto position
> is the upper left of the border box of the sibling.
Or did you just get this rule and rule #1 slightly backwards?
> 3. If its following sibling is display:table-row, the auto position
> is the upper right of the border box of the sibling.
> 4. If its preceding sibling is display:table-row, the auto position
> is the upper left of the border box of the sibling.
And also backwards here?
> 5. If its following sibling is
> display:table-[row|header|footer]-group, the auto position is the
> upper right of the border box of the sibling.
> 6. If its preceding sibling is
> display:table-[row|header|footer]-group, the auto position is the
> upper left of the border box of the sibling.
And here.
This actually raises a really interesting question I hadn't thought
about before, though. Consider:
<body style="display: table">
<div style="display: table-footer-group">A</div>
<div style="position: absolute">B</div>
<div style="display: table-row-group">C</div>
</body>
This will put the abs pos at the top left of the rowgroup, if I read
your markup correctly. So the rendering will look like:
A
B overlapping C
On the other hand, this markup:
<body style="display: table">
<div style="display: table-row-group">C</div>
<div style="position: absolute">B</div>
<div style="display: table-footer-group">A</div>
</body>
will render as:
B overlapping A
C
That is, everything in the rendering is the same except where the abs
pos kid is. Is that desirable, or just acceptable?
> These rules cover all cases (I made an exhaustive list), don't depend
> on the behavior of the table-repair algorithm (as it operates only on
> the element-tree), and should always give the most reasonable
> behavior.
-Boris