CSS: Fix dimensions of table `<col>` elements

Changes:
1. Fix measurements of `<col span="2">` elements in Firefox.
2. Fix measurements of all implicitly sized `<col>` elements in Safari.

Firefox always reports computed width as if `span` was 1. In Safari, computed
width for columns is always 0. Work around both issues by using `offsetWidth`.

In IE/Edge, `<col>` computed width is `"auto"` unless `width` is set explicitly
via CSS so measurements there remain incorrect. Because of the lack of a proper
workaround, we accept this limitation.

Fixes gh-5628
Closes gh-5630
Ref gh-5634

1 files changed, 84 insertions, 50 deletions

diff --git a/src/css/support.js b/src/css/support.js
index bca0b6dbf..a05d31bd1 100644
--- a/src/css/support.js
+++ b/src/css/support.js
@@ -1,62 +1,96 @@
+import { jQuery } from "../core.js";
 import { document } from "../var/document.js";
 import { documentElement } from "../var/documentElement.js";
 import { support } from "../var/support.js";
+import { isIE } from "../var/isIE.js";
 
-( function() {
+var reliableTrDimensionsVal, reliableColDimensionsVal,
+	table = document.createElement( "table" );
 
-var reliableTrDimensionsVal,
-	div = document.createElement( "div" );
+// Executing table tests requires only one layout, so they're executed
+// at the same time to save the second computation.
+function computeTableStyleTests() {
+	if (
 
-// Finish early in limited (non-browser) environments
-if ( !div.style ) {
-	return;
-}
+		// This is a singleton, we need to execute it only once
+		!table ||
+
+		// Finish early in limited (non-browser) environments
+		!table.style
+	) {
+		return;
+	}
+
+	var trStyle,
+		col = document.createElement( "col" ),
+		tr = document.createElement( "tr" ),
+		td = document.createElement( "td" );
 
-// Support: IE 10 - 11+
-// IE misreports `getComputedStyle` of table rows with width/height
-// set in CSS while `offset*` properties report correct values.
-// Support: Firefox 70+
-// Only Firefox includes border widths
-// in computed dimensions. (gh-4529)
-support.reliableTrDimensions = function() {
-	var table, tr, trStyle;
-	if ( reliableTrDimensionsVal == null ) {
-		table = document.createElement( "table" );
-		tr = document.createElement( "tr" );
-
-		table.style.cssText = "position:absolute;left:-11111px;border-collapse:separate";
-		tr.style.cssText = "box-sizing:content-box;border:1px solid;height:1px";
-		div.style.height = "9px";
-
-		// Support: Android Chrome 86+
-		// In our bodyBackground.html iframe,
-		// display for all div elements is set to "inline",
-		// which causes a problem only in Android Chrome, but
-		// not consistently across all devices.
-		// Ensuring the div is `display: block`
-		// gets around this issue.
-		div.style.display = "block";
-
-		documentElement
-			.appendChild( table )
-			.appendChild( tr )
-			.appendChild( div );
-
-		// Don't run until window is visible
-		if ( table.offsetWidth === 0 ) {
-			documentElement.removeChild( table );
-			return;
-		}
-
-		trStyle = window.getComputedStyle( tr );
-		reliableTrDimensionsVal = ( Math.round( parseFloat( trStyle.height ) ) +
-			Math.round( parseFloat( trStyle.borderTopWidth ) ) +
-			Math.round( parseFloat( trStyle.borderBottomWidth ) ) ) === tr.offsetHeight;
+	table.style.cssText = "position:absolute;left:-11111px;" +
+		"border-collapse:separate;border-spacing:0";
+	tr.style.cssText = "box-sizing:content-box;border:1px solid;height:1px";
+	td.style.cssText = "height:9px;width:9px;padding:0";
 
+	col.span = 2;
+
+	documentElement
+		.appendChild( table )
+		.appendChild( col )
+		.parentNode
+		.appendChild( tr )
+		.appendChild( td )
+		.parentNode
+		.appendChild( td.cloneNode( true ) );
+
+	// Don't run until window is visible
+	if ( table.offsetWidth === 0 ) {
 		documentElement.removeChild( table );
+		return;
+	}
+
+	trStyle = window.getComputedStyle( tr );
+
+	// Support: Firefox 135+
+	// Firefox always reports computed width as if `span` was 1.
+	// Support: Safari 18.3+
+	// In Safari, computed width for columns is always 0.
+	// In both these browsers, using `offsetWidth` solves the issue.
+	// Support: IE 11+
+	// In IE, `<col>` computed width is `"auto"` unless `width` is set
+	// explicitly via CSS so measurements there remain incorrect. Because of
+	// the lack of a proper workaround, we accept this limitation, treating
+	// IE as passing the test.
+	reliableColDimensionsVal = isIE || Math.round( parseFloat(
+		window.getComputedStyle( col ).width )
+	) === 18;
+
+	// Support: IE 10 - 11+
+	// IE misreports `getComputedStyle` of table rows with width/height
+	// set in CSS while `offset*` properties report correct values.
+	// Support: Firefox 70 - 135+
+	// Only Firefox includes border widths
+	// in computed dimensions for table rows. (gh-4529)
+	reliableTrDimensionsVal = Math.round( parseFloat( trStyle.height ) +
+		parseFloat( trStyle.borderTopWidth ) +
+		parseFloat( trStyle.borderBottomWidth ) ) === tr.offsetHeight;
+
+	documentElement.removeChild( table );
+
+	// Nullify the table so it wouldn't be stored in the memory;
+	// it will also be a sign that checks were already performed.
+	table = null;
+}
+
+jQuery.extend( support, {
+	reliableTrDimensions: function() {
+		computeTableStyleTests();
+		return reliableTrDimensionsVal;
+	},
+
+	reliableColDimensions: function() {
+		computeTableStyleTests();
+		return reliableColDimensionsVal;
 	}
-	return reliableTrDimensionsVal;
-};
-} )();
+} );
 
 export { support };