CSS:Tests: Fix tests & support tests under CSS Zoom

mgol · mgol · commit f163b3d21475 · 2024-05-29T14:30:15.000+02:00
Firefox 126+ implements CSS zoom in a way it affects width computed style very slightly (`100.008px` instead of `100px`); accept that difference. Also, skip the width setter under zoom test in Firefox 126 completely - that version has CSS zoom affecting `offsetWidth` values. This has been fixed in Firefox 127 so it's not worth working around it. Add a test for support tests resolving the same under CSS zoom & without one. That test uncovered Chrome failing the `reliableTrDimensions` support test under zoom; the test has been fixed. Fixes jquerygh-5489 Closes jquerygh-5496 Ref jquerygh-5495
diff --git a/src/css/support.js b/src/css/support.js
@@ -151,9 +151,22 @@ define( [
 				}
 
 				trStyle = window.getComputedStyle( tr );
-				reliableTrDimensionsVal = ( parseInt( trStyle.height, 10 ) +
-					parseInt( trStyle.borderTopWidth, 10 ) +
-					parseInt( trStyle.borderBottomWidth, 10 ) ) === tr.offsetHeight;
+				window.console.log(
+					[
+						trStyle.height,
+						trStyle.borderTopWidth,
+						trStyle.borderBottomWidth
+					],
+					[
+						Math.round( parseFloat( trStyle.height ) ),
+						Math.round( parseFloat( trStyle.borderTopWidth ) ),
+						Math.round( parseFloat( trStyle.borderBottomWidth ) )
+					],
+					tr.offsetHeight
+				);
+				reliableTrDimensionsVal = ( Math.round( parseFloat( trStyle.height ) ) +
+					Math.round( parseFloat( trStyle.borderTopWidth ) ) +
+					Math.round( parseFloat( trStyle.borderBottomWidth ) ) ) === tr.offsetHeight;
 
 				documentElement.removeChild( table );
 			}
diff --git a/test/data/support/zoom.html b/test/data/support/zoom.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8" />
+	<style>
+		html {
+			zoom: 2.1;
+		}
+	</style>
+</head>
+<body>
+	<div>
+		<script src="../../jquery.js"></script>
+		<script src="../iframeTest.js"></script>
+		<script src="getComputedSupport.js"></script>
+	</div>
+	<script>
+		startIframeTest(
+			getComputedStyle( document.documentElement ),
+			getComputedSupport( jQuery.support )
+		);
+	</script>
+</body>
+</html>
diff --git a/test/unit/css.js b/test/unit/css.js
@@ -1396,8 +1396,20 @@ testIframe(
 	"css/cssWidthBrowserZoom.html",
 	function( assert, jQuery, window, document, widthBeforeSet, widthAfterSet ) {
 		assert.expect( 2 );
-		assert.strictEqual( widthBeforeSet, "100px", "elem.css('width') works correctly with browser zoom" );
-		assert.strictEqual( widthAfterSet, "100px", "elem.css('width', val) works correctly with browser zoom" );
+
+		// Support: Firefox 126+
+		// Newer Firefox implements CSS zoom in a way it affects
+		// those values slightly.
+		assert.ok( /^100(?:|\.0\d*)px$/.test( widthBeforeSet ), "elem.css('width') works correctly with browser zoom" );
+
+		// Support: Firefox 126 only
+		// In Firefox 126 only, CSS zoom affects `offsetWidth`. Since the issue
+		// is fixed in v127, let's just skip the test in v126.
+		if ( /\bfirefox\/126\.\d\b/i.test( navigator.userAgent ) ) {
+			assert.ok( true, "elem.css('width', val) works incorrectly with browser zoom in Firefox 126 and we accept that" );
+		} else {
+			assert.ok( /^100(?:|\.0\d*)px$/.test( widthAfterSet ), "elem.css('width', val) works correctly with browser zoom" );
+		}
 	}
 );
 
diff --git a/test/unit/support.js b/test/unit/support.js
@@ -66,6 +66,26 @@ testIframe(
 	}
 );
 
+testIframe(
+	"Verify correctness of support tests with CSS zoom on the root element",
+	"support/zoom.html",
+	function( assert, jQuery, window, document, htmlStyle, support ) {
+		assert.expect( 1 );
+
+		// Support: Firefox 126 only
+		// In Firefox 126 only, CSS zoom affects `offsetWidth`, causing
+		// the `scrollboxSize` support test to fail. Accept that.
+		if ( /\bfirefox\/126\.\d\b/i.test( navigator.userAgent ) ) {
+			assert.deepEqual( jQuery.extend( {}, support ),
+				jQuery.extend( {}, computedSupport, { scrollboxSize: false } ),
+				"Same support properties except for `scrollboxSize`" );
+		} else {
+			assert.deepEqual( jQuery.extend( {}, support ), computedSupport,
+				"Same support properties" );
+		}
+	}
+);
+
 ( function() {
 	var browserKey, expected,
 		userAgent = window.navigator.userAgent,
