Chrome and Firefox differ in visual ordering of certain table cells
Categories
(Core :: Layout: Tables, defect, P3)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox72 | --- | fixed |
People
(Reporter: twisniewski, Assigned: MatsPalmgren_bugz)
References
Details
(Keywords: testcase)
Attachments
(3 files, 2 obsolete files)
screenshot of testcase matching in Firefox vs Chrome on dholbert's machine (Firefox nightly on the left, chrome dev on the right)
In the attached test-case, Firefox places the first display: table-cell in the markup underneath the second one, while Chrome places it above (keeping them in markup order).
It seems as though the padding on the second cell is treated differently somehow.
This seems to be at least part of the reason for the checkbox mis-alignment seen on Amazon's mobile page as reported at https://webcompat.com/issues/32605
|
Reporter | |
Comment 2•5 years ago
|
||
Um, yes. Good thing I hadn't deleted it yet!
|
||
Comment 3•5 years ago
|
||
That testcase looks the same to me in Firefox Nightly 72 & Chrome 79.0.3938.0 dev ... See screenshot.
Does it look different for you? (Maybe this was a chrome bug that was recently fixed?)
|
|
||
Updated•5 years ago
|
|
|
Reporter | |
Comment 4•5 years ago
|
||
Ugh, I uploaded a version of the testcase without the padding :S
|
||
Comment 5•5 years ago
|
||
So this is about where the baseline is, or whether it gets shared across the table cells, I guess? Does blink actually create a single table or do they create two tables, which would explain the baseline not being shared?
|
|
||
Comment 6•5 years ago
|
||
No, it seems it repros with tables too:
data:text/html,<!doctype html><style>* { vertical-align: baseline }</style><table><tr><td style="background: green"><div style="background: red">X</div></td><td style="padding: 1.3rem"></td></tr>
|
||
Comment 7•5 years ago
|
||
I think this is about where the "baseline" is considered to be for a table cell with no content (<div class="sh-badge-v2-textbox-div">) in the testcase). If you put a character into that div, then the browsers behave similarly, but when it is empty, Firefox treats it as having its baseline at the bottom, while Chrome considers it to be at the top.
(It's not the padding as such that matters; the same effect can be produced by just setting an explicit large height on the second cell.)
|
Assignee | |
Comment 8•5 years ago
|
||
but when it is empty, Firefox treats it as having its baseline at the bottom, while Chrome considers it to be at the top.
I'd say both are wrong per spec, if I read it correctly:
https://drafts.csswg.org/css-align-3/#baseline-export
Under tables, "The first/last baseline set of a table box is the first/last baseline set of its first/last row."
Under table rows, "Otherwise, the first/last baseline set of the row is synthesized from the lowest and highest content edges of the cells in the row."
So the baseline of the "X" should be aligned with the end content edge of the empty cell (which is roughly in the center of the cell/table).
CSS2 says:
https://www.w3.org/TR/CSS22/tables.html#height-layout
"The baseline of a cell is the baseline of the first in-flow line box in the cell, or the first in-flow table-row in the cell, whichever comes first. If there is no such line box or table-row, the baseline is the bottom of content edge of the cell box."
which is similar to the text for "block containers" in https://drafts.csswg.org/css-align-3/#baseline-export
I think the intent is that it applies to table cells too since they are treated the same elsewhere in the spec, e.g. https://drafts.csswg.org/css-align-3/#distribution-block
|
|
Assignee | |
Comment 9•5 years ago
|
||
Here's a clearer testcase that separates the two cases:
- The table on the left has only one cell, which is empty, and thus the row is forced to synthesize a baseline from it.
- The table on the right has a [non-empty] cell which participates in baseline alignment so that cell's baseline is the baseline of the row/table. The empty cell in this case doesn't participate in baseline alignment in its alignment context (the row) at all - it effectively has start alignment.
I think Chrome handles case 1 wrong, but 2 correct. Firefox handles both wrong.
(In case 1, "synthesized from the lowest and highest content edges" means we should use the "line-under line", i.e. the end content edge, per https://drafts.csswg.org/css-align-3/#synthesize-baseline)
|
|
Assignee | |
Updated•5 years ago
|
|
|
Assignee | |
Comment 10•5 years ago
|
||
|
||
Comment 11•5 years ago
|
||
Pushed by mpalmgren@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/fec55267c096 [css-align] Synthesize a baseline from the content edges for empty table cells. r=dholbert
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/20214 for changes under testing/web-platform/tests
Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.
|
||
Comment 14•5 years ago
|
||
| bugherder | ||
Upstream PR merged by moz-wptsync-bot
Description
•