Firefox 70 fails the "dimensions: width/height on a table row with phantom borders (gh-3698)" test

[mgol]

Description

The just released Firefox 70 (& newer) fails the "dimensions: width/height on a table row with phantom borders (gh-3698)" test. As Travis uses the newest version of Firefox, it started failing on master.

Link to test case

See the relevant test case in the jQuery repo, a screenshot:

[timmywil]

Just a note, we keep track of swarm failures in the meeting notes. Those tests can be in flux a lot between releases and I don't think we need to create a GH issue for each failure. All failures are always addressed before a release can go out.

[mgol]

This doesn't fail on Swarm as we don't have Firefox 70 there yet; it fails on Travis as I've recently added Firefox testing there & Firefox 70 has been released today.

I think these issues make sense; they e.g. allow to assign an issue to a particular person, they also make it easier to distinguish flakes from consistent issues (this is the latter case). It looks like a real issue to me, it fails on stable, beta & nightly and I meant to look at it tomorrow.

[mgol]

To clarify, I'm not saying we have to create issues for all those TestSwarm failures. But we can if we feel the need IMO.

[mgol]

One additional reason to allow issue creation in such cases is that this creates a space to dump the investigation results which I plan to do soon.

[mgol]

Results from my investigation:
The failing test case was added in #3738; it works on the following HTML:

<table id="gh3698" style="border-collapse: separate; border-spacing: 0; background: #baffc9"><tbody>
	<tr style="margin: 0; border: 10px solid black; padding: 0">
		<td style="margin: 0; border: 0; padding: 0; height: 42px; width: 42px;"></td>
	</tr>
</tbody></table>

and runs .outerWidth() & .outerWidth( true ) on the tr element. In all our tested browsers, including Chrome 78 & Firefox <70, it returns 42, with the exception of Firefox 70 where it returns 62. The issue is that Firefox 70 started reporting 10px for getComputedStyle( tr ).borderLeftWidth (the same for borderRightWidth); Firefox 68 reports 0px. However, Chrome already reports 10px as well... So why did it start breaking? Because in Firefox (both 68 & 70) getComputedStyle( tr ).width is 42px while in Chrome it's 22px - it used to add up to the same number even though partial results were different.

An interesting consequence of that is that in both Firefox 68 & 70 $( tr ).innerWidth() returns 42px while in Chrome it returns 22px - we just don't have a test that would report this difference.

Safari behaves just like Chrome while Edge & IE 11 returns auto for getComputedStyle( tr ).width - but we already work around that. getComputedStyle( tr ).borderLeftWidth is 10px in all browsers (Chrome 78, Firefox 70, Safari 13, Edge 18 & IE 11) except Firefox 68 so that change actually aligns them more with others.

[mgol]

Reported to Firefox at https://bugzilla.mozilla.org/show_bug.cgi?id=1590837.