Closed Bug 981950 Opened 10 years ago Closed 10 years ago

"display: table;" and "left: 0%" has different behavior between Gecko and Webkit

Categories

(Core :: Layout: Positioned, defect)

Product:
Core
Component:
Layout: Positioned
Platform:
x86
macOS
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: christian, Unassigned)

Details

The following code displays differently in Firefox vs WebKit browsers:

<html>
    <head>
        <style type="text/css">
div#parent {
    width: 500px;
    height: 500px;
    background-color: #a00;
    border: 30px solid #f55;

    position: relative;

    display: table;
}

div#child {
    width: 100px;
    height: 100px;
    background-color: red;

    position: absolute;
    left: 0%;
}
        </style>
    </head>
    <body>
        <div id="parent">
            <div id="child" />
        </div>
    </body>
</html>

Removing the "display: table;" line will make them render the same. With that line, Gecko will render div#child as if border-width on div#parent were 0. The combination of "display: table;" and "left: 0%" is causing the break.

This repros on release, beta, aurora, and nightly.
It's not actually quite clear what the right behavior is here.

A table generates two boxes: the "table wrapper box" and the "table box".  See the diagram at http://www.w3.org/TR/CSS21/tables.html#model

Which of these is the containing block for abs pos kids?

In Gecko, it's the table wrapper box.  Since this never has borders (which are on the table box), that effectively means that the border seems to be ignored as in the testcase in comment 0.

In WebKit, the containing block is, as far as I can tell, also the table wrapper box, but deflated by the border of the table.  If there's a top caption on the table, this looks incredibly weird: the content that said "top: 0" is placed in a random-ish spot (one top border width down) in the middle of the caption.  The actual top border, however is _below_ the caption.

CSS2.1 is so handwavy about containing blocks that it's impossible to tell what the right behavior is from it, but WebKit's behavior is _certainly_ not right per CSS2.1: the only options there are using the table wrapper box (which has no border or padding, so has padding edge == content edge == border edge) or using the padding edge of the table box.  WebKit is doing neither.

http://dev.w3.org/csswg/css-position/#def-containing-blocks doesn't seem to improve on the situation, unfortunately.

I posted http://lists.w3.org/Archives/Public/www-style/2014Mar/0208.html to get the spec clarified here.
Component: Layout → Layout: R & A Pos
http://lists.w3.org/Archives/Public/www-style/2014Mar/0220.html suggests what we're doing here is the right thing.
Status: NEW → RESOLVED
Closed: 10 years ago
Resolution: --- → INVALID
Thanks for the investigation!
You need to log in before you can comment on or make changes to this bug.