library-mirrors/jquery
1
0
Fork 0
mirror of https://github.com/jquery/jquery.git synced 2024-11-23 02:54:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

CSS: Correct misrepresentation of "auto" horizontal margins as 0

Browse Source 
Fixes gh-2237
Closes gh-2276
This commit is contained in:
Richard Gibson 2015-05-07 23:16:18 -04:00
parent 6e466af010
commit 214e1634ab
6 changed files with 96 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/css.js
View File

@ -434,6 +434,19 @@ jQuery.cssHooks.marginRight = addGetHookIf( support.reliableMarginRight,
}
);
jQuery.cssHooks.marginLeft = addGetHookIf( support.reliableMarginLeft,
function( elem, computed ) {
if ( computed ) {
return ( parseFloat( curCSS( elem, "marginLeft" ) ) ||
elem.getBoundingClientRect().left -
swap( elem, { marginLeft: 0 }, function() {
return elem.getBoundingClientRect().left;
} )
) + "px";
}
}
);
// These hooks are used by animate to expand properties
jQuery.each( {
margin: "",

31
src/css/support.js
View File

@ -6,8 +6,8 @@ define( [
], function( jQuery, document, documentElement, support ) {
( function() {
var pixelPositionVal, boxSizingReliableVal, gBCRDimensionsVal,
pixelMarginRightVal, reliableHiddenOffsetsVal, reliableMarginRightVal,
var pixelPositionVal, pixelMarginRightVal, gBCRDimensionsVal, boxSizingReliableVal,
reliableHiddenOffsetsVal, reliableMarginRightVal, reliableMarginLeftVal,
container = document.createElement( "div" ),
div = document.createElement( "div" );
@ -84,6 +84,15 @@ define( [
computeStyleTests();
}
return reliableMarginRightVal;
},
reliableMarginLeft: function() {
// Support: IE <=8 only, Android 4.0 - 4.3 only, Firefox <=3 - 37
if ( pixelPositionVal == null ) {
computeStyleTests();
}
return reliableMarginLeftVal;
}
} );
@ -99,14 +108,13 @@ define( [
// Support: Android 2.3
// Vendor-prefix box-sizing
"-webkit-box-sizing:border-box;box-sizing:border-box;" +
"position:absolute;display:block;" +
"margin:0;margin-top:1%;margin-right:50%;" +
"border:1px;padding:1px;" +
"top:1%;height:4px;width:50%";
"position:relative;display:block;" +
"margin:auto;border:1px;padding:1px;" +
"top:1%;width:50%";
// Support: IE<9
// Assume reasonable values in the absence of getComputedStyle
pixelPositionVal = boxSizingReliableVal = false;
pixelPositionVal = boxSizingReliableVal = reliableMarginLeftVal = false;
pixelMarginRightVal = reliableMarginRightVal = true;
// Support: IE<9
@ -117,10 +125,15 @@ define( [
if ( window.getComputedStyle ) {
divStyle = window.getComputedStyle( div );
pixelPositionVal = ( divStyle || {} ).top !== "1%";
boxSizingReliableVal = ( divStyle || { height: "4px" } ).height === "4px";
reliableMarginLeftVal = ( divStyle || {} ).marginLeft === "2px";
boxSizingReliableVal = ( divStyle || { width: "4px" } ).width === "4px";
// Support: Android 4.0 - 4.3 only
// Some styles come back with percentage values, even though they shouldn't
div.style.marginRight = "50%";
pixelMarginRightVal = ( divStyle || { marginRight: "4px" } ).marginRight === "4px";
// Support: Android 2.3
// Support: Android 2.3 only
// Div with explicit width and no margin-right incorrectly
// gets computed margin-right based on width of container (#3333)
// WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right

3
test/data/offset/relative.html
View File

@ -8,6 +8,7 @@
body { margin: 1px; padding: 5px; }
div.relative { position: relative; top: 0; left: 0; margin: 1px; border: 2px solid #000; padding: 5px; width: 100px; height: 100px; background: #fff; overflow: hidden; }
#relative-2 { top: 20px; left: 20px; }
#relative-2-1 { margin: auto; width: 50px; }
#marker { position: absolute; border: 2px solid #000; width: 50px; height: 50px; background: #ccc; }
</style>
<script src="../../jquery.js"></script>
@ -24,7 +25,7 @@
</head>
<body>
<div id="relative-1" class="relative"><div id="relative-1-1" class="relative"><div id="relative-1-1-1" class="relative"></div></div></div>
<div id="relative-2" class="relative"></div>
<div id="relative-2" class="relative"><div id="relative-2-1" class="relative"></div></div>
<div id="marker"></div>
<p class="instructions">Click the white box to move the marker to it. Clicking the box also changes the position to absolute (if not already) and sets the position according to the position method.</p>
</body>

24
test/unit/css.js
View File

@ -754,17 +754,31 @@ QUnit.test( "internal ref to elem.runtimeStyle (bug #7608)", function( assert )
assert.ok( result, "elem.runtimeStyle does not throw exception" );
} );
QUnit.test( "marginRight computed style (bug #3333)", function( assert ) {
assert.expect( 1 );
QUnit.test( "computed margins (trac-3333; gh-2237)", function( assert ) {
assert.expect( 2 );
var $div = jQuery( "#foo" ),
$child = jQuery( "#en" );
var $div = jQuery( "#foo" );
$div.css( {
"width": "1px",
"marginRight": 0
} );
assert.equal( $div.css( "marginRight" ), "0px",
"marginRight correctly calculated with a width and display block" );
assert.equal( $div.css( "marginRight" ), "0px", "marginRight correctly calculated with a width and display block" );
} );
$div.css({
position: "absolute",
top: 0,
left: 0,
width: "100px"
});
$child.css({
width: "50px",
margin: "auto"
});
assert.equal( $child.css( "marginLeft" ), "25px", "auto margins are computed to pixels" );
});
QUnit.test( "box model properties incorrectly returning % instead of px, see #10639 and #12088", function( assert ) {
assert.expect( 2 );

8
test/unit/offset.js
View File

@ -187,7 +187,7 @@ testIframe( "offset/absolute", "absolute", function( $, window, document, assert
} );
testIframe( "offset/relative", "relative", function( $, window, document, assert ) {
assert.expect( 60 );
assert.expect( 64 );
var tests;
@ -195,7 +195,8 @@ testIframe( "offset/relative", "relative", function( $, window, document, assert
tests = [
{ "id": "#relative-1", "top": 7, "left": 7 },
{ "id": "#relative-1-1", "top": 15, "left": 15 },
{ "id": "#relative-2", "top": 142, "left": 27 }
{ "id": "#relative-2", "top": 142, "left": 27 },
{ "id": "#relative-2-1", "top": 149, "left": 52 }
];
jQuery.each( tests, function() {
assert.equal( $( this[ "id" ] ).offset().top, this[ "top" ], "jQuery('" + this[ "id" ] + "').offset().top" );
@ -206,7 +207,8 @@ testIframe( "offset/relative", "relative", function( $, window, document, assert
tests = [
{ "id": "#relative-1", "top": 6, "left": 6 },
{ "id": "#relative-1-1", "top": 5, "left": 5 },
{ "id": "#relative-2", "top": 141, "left": 26 }
{ "id": "#relative-2", "top": 141, "left": 26 },
{ "id": "#relative-2-1", "top": 5, "left": 5 }
];
jQuery.each( tests, function() {
assert.equal( $( this[ "id" ] ).position().top, this[ "top" ], "jQuery('" + this[ "id" ] + "').position().top" );

55
test/unit/support.js
View File

@ -106,6 +106,7 @@ testIframeWithCallback(
"radioValue": true,
"reliableHiddenOffsets": true,
"reliableMarginRight": true,
"reliableMarginLeft": true,
"style": true,
"submit": true
};
@ -139,6 +140,7 @@ testIframeWithCallback(
"radioValue": false,
"reliableHiddenOffsets": true,
"reliableMarginRight": true,
"reliableMarginLeft": true,
"style": true,
"submit": true
};
@ -172,6 +174,7 @@ testIframeWithCallback(
"radioValue": false,
"reliableHiddenOffsets": true,
"reliableMarginRight": true,
"reliableMarginLeft": true,
"style": true,
"submit": true
};
@ -205,6 +208,7 @@ testIframeWithCallback(
"radioValue": false,
"reliableHiddenOffsets": false,
"reliableMarginRight": true,
"reliableMarginLeft": false,
"style": false,
"submit": false
};
@ -241,6 +245,7 @@ testIframeWithCallback(
"radioValue": true,
"reliableHiddenOffsets": true,
"reliableMarginRight": true,
"reliableMarginLeft": true,
"style": true,
"submit": true
};
@ -274,6 +279,7 @@ testIframeWithCallback(
"radioValue": true,
"reliableHiddenOffsets": true,
"reliableMarginRight": true,
"reliableMarginLeft": true,
"style": true,
"submit": true
};
@ -307,6 +313,7 @@ testIframeWithCallback(
"radioValue": true,
"reliableHiddenOffsets": true,
"reliableMarginRight": true,
"reliableMarginLeft": true,
"style": true,
"submit": true
};
@ -340,6 +347,7 @@ testIframeWithCallback(
"radioValue": true,
"reliableHiddenOffsets": true,
"reliableMarginRight": true,
"reliableMarginLeft": false,
"style": true,
"submit": true
};
@ -373,6 +381,7 @@ testIframeWithCallback(
"radioValue": true,
"reliableHiddenOffsets": true,
"reliableMarginRight": true,
"reliableMarginLeft": true,
"style": true,
"submit": true
};
@ -406,6 +415,7 @@ testIframeWithCallback(
"radioValue": true,
"reliableHiddenOffsets": true,
"reliableMarginRight": true,
"reliableMarginLeft": true,
"style": true,
"submit": true
};
@ -439,6 +449,7 @@ testIframeWithCallback(
"radioValue": true,
"reliableHiddenOffsets": true,
"reliableMarginRight": true,
"reliableMarginLeft": false,
"style": true,
"submit": true
};
@ -472,32 +483,36 @@ testIframeWithCallback(
"radioValue": true,
"reliableHiddenOffsets": true,
"reliableMarginRight": false,
"reliableMarginLeft": true,
"style": true,
"submit": true
};
}
if ( expected ) {
QUnit.test( "Verify that the support tests resolve as expected per browser", function( assert ) {
var i, prop,
j = 0;
QUnit.test( "Verify that support tests resolve as expected per browser", function( assert ) {
if ( !expected ) {
assert.expect( 1 );
assert.ok( false, "Known client: " + userAgent );
}
for ( prop in computedSupport ) {
j++;
var i, prop,
j = 0;
for ( prop in computedSupport ) {
j++;
}
assert.expect( j );
for ( i in expected ) {
if ( jQuery.ajax || i !== "ajax" && i !== "cors" ) {
assert.equal( computedSupport[ i ], expected[ i ],
"jQuery.support['" + i + "']: " + computedSupport[ i ] +
", expected['" + i + "']: " + expected[ i ] );
} else {
assert.ok( true, "no ajax; skipping jQuery.support['" + i + "']" );
}
assert.expect( j );
for ( i in expected ) {
if ( jQuery.ajax || i !== "ajax" && i !== "cors" ) {
assert.equal( computedSupport[ i ], expected[ i ],
"jQuery.support['" + i + "']: " + computedSupport[ i ] +
", expected['" + i + "']: " + expected[ i ] );
} else {
assert.ok( true, "no ajax; skipping jQuery.support['" + i + "']" );
}
}
} );
}
}
});
} )();