Closed Bug 1112750 Opened 10 years ago Closed 10 years ago

display: table-cell with position: relative and top: Xpx DIFFERENT from WebKit

Categories

(Core :: Layout: Tables, defect)

34 Branch
x86_64
Linux
defect
Not set
normal

Tracking

()

RESOLVED DUPLICATE of bug 35168

People

(Reporter: jon.dufresne, Unassigned)

Details

Attachments

(2 files)

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:34.0) Gecko/20100101 Firefox/34.0
Build ID: 20141201111703

Steps to reproduce:

I'm not sure which rendering is technically correct based on the spec. But I ran into this issue while developing and noticed a difference between Firefox and WebKit. The results from WebKit surprised me the most. I also filed a bug with WebKit: <https://bugs.webkit.org/show_bug.cgi?id=139742>

When an element has the CSS:

display: table-cell;
position: relative;
top: Xpx;

Where X is some value greater than 0, the element is renderd X pixels from the top. I am surprised by this as I would expect (intuitively; not based on a spec) table-cell display to override the relative positioning. That is, I'd expect the element to be rendered more like a table cell.

Could be related to bug 981950 which has linked to a Chrome bug <https://code.google.com/p/chromium/issues/detail?id=352144>.


Test document:


<!doctype HTML>

<head>
  <title>Test</title>
  <style>
    #row {
        display: table;
    }
    .cell {
        display: table-cell;
        position: relative;
        height: 100px;
        width: 100px;
    }
    #left {
        background-color: green;
        top: 50px;
    }
    #right {
        background-color: red;
    }
  </style>
</head>
<body>
  <div id="row">
    <div id="left" class="cell"></div>
    <div id="right" class="cell"></div>
  </div>
</body>
Attached image Screenshot WebKit
Attached image Screenshot Firefox
> table-cell display to override the relative positioning

Display and relative positioning are completely unrelated.  All relative positioning does is shift the box over once you're done with layout, and this can be done for any display type.

WebKit's rendering here is correct.
Status: UNCONFIRMED → RESOLVED
Closed: 10 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: