CSS:Tests: Fix tests & support tests under CSS Zoom (3.x version)

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 gh-5489
Closes gh-5496
Ref gh-5495
This commit is contained in:
Michał Gołębiowski-Owczarek 2024-06-03 18:15:39 +02:00 committed by GitHub
parent b6f53def96
commit 29a9030c78
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 61 additions and 5 deletions

View File

@ -151,9 +151,9 @@ define( [
} }
trStyle = window.getComputedStyle( tr ); trStyle = window.getComputedStyle( tr );
reliableTrDimensionsVal = ( parseInt( trStyle.height, 10 ) + reliableTrDimensionsVal = ( Math.round( parseFloat( trStyle.height ) ) +
parseInt( trStyle.borderTopWidth, 10 ) + Math.round( parseFloat( trStyle.borderTopWidth ) ) +
parseInt( trStyle.borderBottomWidth, 10 ) ) === tr.offsetHeight; Math.round( parseFloat( trStyle.borderBottomWidth ) ) ) === tr.offsetHeight;
documentElement.removeChild( table ); documentElement.removeChild( table );
} }

View File

@ -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>

View File

@ -1396,8 +1396,20 @@ testIframe(
"css/cssWidthBrowserZoom.html", "css/cssWidthBrowserZoom.html",
function( assert, jQuery, window, document, widthBeforeSet, widthAfterSet ) { function( assert, jQuery, window, document, widthBeforeSet, widthAfterSet ) {
assert.expect( 2 ); 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" );
}
} }
); );

View File

@ -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() { ( function() {
var browserKey, expected, var browserKey, expected,
userAgent = window.navigator.userAgent, userAgent = window.navigator.userAgent,