1821801 - wpt.fyi "Triage Mode" doesn't work in Firefox due to table "border-collapse:collapse" rendering issue

Status: RESOLVED DUPLICATE of bug 1450601

(Core :: Layout: Tables, defect)

Description

[Daniel Holbert [:dholbert]]

NOTE: you need to be part of the specially-selected group of folks who can triage WPT tests (based on github account group-membership I think) in order to directly trigger this bug. You can still use devtools to trigger the issue if you're not in that membership group, though.

STR:

1. Visit https://wpt.fyi/results/css/css-images/image-set/image-set-parsing.html?label=master&label=experimental&aligned (or some WPT.fyi page for a test failure with multiple subtests, some of which fail in some browser)
2. Sign in to GitHub using link at top-right
3. If it's available to you, enable "Triage Mode" at the top right of the page.
4. Click on some red cell.

Alternate STR if you aren't in the group of WPT triagers or don't want to sign in to github:

1. Visit the aforementioned link.
2. Right-click any cell (PASS or FAIL, doesn't matter) and inspect in devtools, and be sure you've got the td element in inspector (not its child, for example).
3. In devtools console, type:
   $0.setAttribute("selected", "selected")

EXPECTED RESULTS:
The cell in question should get a black border.

ACTUAL RESULTS:
No black border. The text inside the cell shifts inwards a little, but no border appears.

Chrome gives EXPECTED RESULTS. Firefox gives ACTUAL RESULTS.
Firefox version: 112.0a1 (2023-03-09) (64-bit)

(This is probably a known border-image bug that wants to be duped; I wanted to be sure we had the wpt.fyi affectedness & steps-to-repro on-file, since folks may run into this when triaging interop-2023 test failures.)

Comment 1

[Daniel Holbert [:dholbert]]

Side note, the STR do produce expected-results on some pages, e.g. views of an entire directory like this one:
https://wpt.fyi/results/css/css-images/image-set?label=master&label=experimental&aligned&view=subtest

But it seems to be broken when you're viewing a page for a single test that has multiple subtests.

Comment 2

[Daniel Holbert [:dholbert]]

Aha, it specifically affects pages where the results table has the terse attribute, which activates this style rule:

table[terse] td {
  position: relative;
}

That seems to trigger the issue, apparently by making the background of other cells draw in front of the border of the selected cell.

Comment 3

[Daniel Holbert [:dholbert]]

I think this is bug 1450601, essentially.

Comment 4

[Daniel Holbert [:dholbert]]

As a local workaround on wpt.fyi, you can open devtools and un-tick border-collapse:collapse for the table element. That changes the look of the page a bit (adding space between cells), but it does mean you can actually see borders around the selected/triage'd cells, which is a functional improvement.

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: screencast demonstrating expected-results, bug, and workaround

Here's a screencast showing (in order):

• the expected-results in Chrome
• the actual-results (bug) in Firefox
• one workaround (unchecking border-collapse: collapse) to get a functional but cosmetically-less-great experience.