CSS: Correctly set support properties with non-default zoom

Fixes gh-3808
Closes gh-3872
This commit is contained in:
Saptak Sengupta 2017-12-06 10:29:54 +05:30 committed by Richard Gibson
parent 0aa832afec
commit f00a07590e
3 changed files with 42 additions and 3 deletions

View File

@ -30,16 +30,16 @@ define( [
pixelPositionVal = divStyle.top !== "1%";
// Support: Android 4.0 - 4.3 only, Firefox <=3 - 44
reliableMarginLeftVal = divStyle.marginLeft === "12px";
reliableMarginLeftVal = roundPixelMeasures( divStyle.marginLeft ) === 12;
// Support: Android 4.0 - 4.3 only, Safari <=9.1 - 10.1, iOS <=7.0 - 9.3
// Some styles come back with percentage values, even though they shouldn't
div.style.right = "60%";
pixelBoxStylesVal = divStyle.right === "36px";
pixelBoxStylesVal = roundPixelMeasures( divStyle.right ) === 36;
// Support: IE 9 - 11 only
// Detect misreporting of content dimensions for box-sizing:border-box elements
boxSizingReliableVal = divStyle.width === "36px";
boxSizingReliableVal = roundPixelMeasures( divStyle.width ) === 36;
// Support: IE 9 only
// Detect overflow:scroll screwiness (gh-3699)
@ -53,6 +53,10 @@ define( [
div = null;
}
function roundPixelMeasures( measure ) {
return Math.round( parseFloat( measure ) );
}
var pixelPositionVal, boxSizingReliableVal, scrollboxSizeVal, pixelBoxStylesVal,
reliableMarginLeftVal,
container = document.createElement( "div" ),

View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html {
zoom: 1.1;
}
#test {
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid pink;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="test"></div>
<script src="../../jquery.js"></script>
<script src="../iframeTest.js"></script>
<script>
startIframeTest( jQuery( "#test" ).css( 'width' ) );
</script>
</body>
</html>

View File

@ -1164,6 +1164,15 @@ testIframe(
}
);
testIframe(
"css('width') should work correctly with browser zooming",
"css/cssWidthBrowserZoom.html",
function( assert, jQuery, window, document, cssWidthBrowserZoom ) {
assert.expect( 1 );
assert.strictEqual( cssWidthBrowserZoom, "100px", "elem.css('width') works correctly with browser zoom" );
}
);
( function() {
var supportsFractionalGBCR,
qunitFixture = document.getElementById( "qunit-fixture" ),