1841311 - Firefox fails WPT css/css-grid/abspos/positioned-grid-items-025.html

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, task)

Description

[Thomas Wisniewski [:twisniewski]]

wpt.fyi:
https://wpt.fyi/results/css/css-grid/abspos/positioned-grid-items-025.html

It appears as though Firefox has the bigger blue box on the test too far right by 1px, compared to the test's expectations.

Comment 1

[Daniel Holbert [:dholbert]]

Comparing our rendering to Chrome, zoomed in to 500%, it looks like we agree on the rendering of the testcase, and we disagree on the rendering of the reference case.

Comment 2

[Daniel Holbert [:dholbert]]

The reference case is accidentally depending on the width of a single space character. :)

There's whitespace between the two blue rectangles, which renders (as the width of a space character). Then the testcase adds an additional 146px translation to the second blue rectangle.

But its position is still influenced by the width of that space character. And in Firefox, that space is 1px wider than it is in WebKit and Chrome.

So: the fix here is to remove that whitespace (or remove its influence, by making the blue divs not be inline-blocks. I don't think there's any reason for them to be inline-blocks; that's just how the test author happened to decide on making them stack horizontally.)

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: Bug 1841311: Fix reference case for WPT positioned-grid-items-025.html to avoid depending on the width of a space character. r?#layout-reviewers,twisniewski

This testcase happened to use two inline-blocks, with whitespace between them,
which renders as a space character. The reference case's positioning for the
second inline-block was hand-tuned with a particular magic number of pixels,
which only produced the actual intended rendering if the space character
happened to render at a particular width.

This patch addresses this issue by making the elements be blocks instead of
inline-blocks, so that the whitespace between them gets collapsed away and
doesn't impact the rendering. I then make them "stack horizontally" by
translating the second one upwards to still show up alongside the first one.
(There are of course other ways to achieve this, but this requires the least
edits to this existing file, while keeping things still fairly understandable.)

Comment 4

[Daniel Holbert [:dholbert]]

[CC'ing mattwoodrow as an FYI, since he wrote this test as part of his grid work in WebKit]

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9aecd29d3377
Fix reference case for WPT positioned-grid-items-025.html to avoid depending on the width of a space character. r=twisniewski

Comment 6

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/40893 for changes under testing/web-platform/tests

Comment 7

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/9aecd29d3377

Comment 8

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot