mirror of
https://github.com/jquery/jquery.git
synced 2026-02-01 14:44:58 -05:00
CSS: Don't cache unrecognized CSS property names
This prevents jQuery from caching a prefixed property name if provided
directly by the user, e.g. the following code:
elem.css( "msTransform", "translate(5px, 2px)" );
should not prevent one from from later setting the transition directly:
elem.css( "transform", "translate(5px, 2px)" );
on a browser not understanding the unprefixed version which is the case
for Safari 8 & transform.
(cherry-picked from d471842b3e)
Fixes gh-2015
Closes gh-2298
This commit is contained in:
16
src/css.js
16
src/css.js
@@ -39,32 +39,30 @@ var
|
||||
fontWeight: "400"
|
||||
},
|
||||
|
||||
cssPrefixes = [ "Webkit", "Moz", "ms" ];
|
||||
cssPrefixes = [ "Webkit", "Moz", "ms" ],
|
||||
emptyStyle = document.createElement( "div" ).style;
|
||||
|
||||
// BuildExclude
|
||||
curCSS = curCSS.curCSS;
|
||||
|
||||
// return a css property mapped to a potentially vendor prefixed property
|
||||
function vendorPropName( style, name ) {
|
||||
function vendorPropName( name ) {
|
||||
|
||||
// shortcut for names that are not vendor prefixed
|
||||
if ( name in style ) {
|
||||
if ( name in emptyStyle ) {
|
||||
return name;
|
||||
}
|
||||
|
||||
// check for vendor prefixed names
|
||||
var capName = name[ 0 ].toUpperCase() + name.slice( 1 ),
|
||||
origName = name,
|
||||
i = cssPrefixes.length;
|
||||
|
||||
while ( i-- ) {
|
||||
name = cssPrefixes[ i ] + capName;
|
||||
if ( name in style ) {
|
||||
if ( name in emptyStyle ) {
|
||||
return name;
|
||||
}
|
||||
}
|
||||
|
||||
return origName;
|
||||
}
|
||||
|
||||
function setPositiveNumber( elem, value, subtract ) {
|
||||
@@ -209,7 +207,7 @@ jQuery.extend({
|
||||
style = elem.style;
|
||||
|
||||
name = jQuery.cssProps[ origName ] ||
|
||||
( jQuery.cssProps[ origName ] = vendorPropName( style, origName ) );
|
||||
( jQuery.cssProps[ origName ] = vendorPropName( origName ) || origName );
|
||||
|
||||
// gets hook for the prefixed version
|
||||
// followed by the unprefixed version
|
||||
@@ -273,7 +271,7 @@ jQuery.extend({
|
||||
|
||||
// Make sure that we're working with the right name
|
||||
name = jQuery.cssProps[ origName ] ||
|
||||
( jQuery.cssProps[ origName ] = vendorPropName( elem.style, origName ) );
|
||||
( jQuery.cssProps[ origName ] = vendorPropName( origName ) || origName );
|
||||
|
||||
// gets hook for the prefixed version
|
||||
// followed by the unprefixed version
|
||||
|
||||
@@ -1187,4 +1187,84 @@ test( "get upper case alpha opacity in IE8", 1, function() {
|
||||
fixture.removeChild( div );
|
||||
});
|
||||
|
||||
|
||||
( function() {
|
||||
var vendorPrefixes = [ "Webkit", "Moz", "ms" ];
|
||||
|
||||
function resetCssPropsFor( name ) {
|
||||
delete jQuery.cssProps[ name ];
|
||||
jQuery.each( vendorPrefixes, function( index, prefix ) {
|
||||
delete jQuery.cssProps[ prefix + name[ 0 ].toUpperCase() + name.slice( 1 ) ];
|
||||
} );
|
||||
}
|
||||
|
||||
test( "Don't default to a cached previously used wrong prefixed name (gh-2015)", function() {
|
||||
// Note: this test needs a property we know is only supported in a prefixed version
|
||||
// by at least one of our main supported browsers. This may get out of date so let's
|
||||
// use -(webkit|moz)-appearance as well as those two are not on a standards track.
|
||||
var appearanceName, transformName, elem, elemStyle,
|
||||
transformVal = "translate(5px, 2px)",
|
||||
emptyStyle = document.createElement( "div" ).style;
|
||||
|
||||
if ( "appearance" in emptyStyle ) {
|
||||
appearanceName = "appearance";
|
||||
} else {
|
||||
jQuery.each( vendorPrefixes, function( index, prefix ) {
|
||||
var prefixedProp = prefix + "Appearance";
|
||||
if ( prefixedProp in emptyStyle ) {
|
||||
appearanceName = prefixedProp;
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
if ( "transform" in emptyStyle ) {
|
||||
transformName = "transform";
|
||||
} else {
|
||||
jQuery.each( vendorPrefixes, function( index, prefix ) {
|
||||
var prefixedProp = prefix + "Transform";
|
||||
if ( prefixedProp in emptyStyle ) {
|
||||
transformName = prefixedProp;
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
expect( !!appearanceName + !!transformName + 1 );
|
||||
|
||||
resetCssPropsFor( "appearance" );
|
||||
resetCssPropsFor( "transform" );
|
||||
|
||||
elem = jQuery( "<div/>" )
|
||||
.css( {
|
||||
msAppearance: "none",
|
||||
appearance: "none",
|
||||
|
||||
// Only the ms prefix is used to make sure we haven't e.g. set
|
||||
// webkitTransform ourselves in the test.
|
||||
msTransform: transformVal,
|
||||
transform: transformVal
|
||||
} );
|
||||
elemStyle = elem[ 0 ].style;
|
||||
|
||||
if ( appearanceName ) {
|
||||
equal( elemStyle[ appearanceName ], "none", "setting properly-prefixed appearance" );
|
||||
}
|
||||
if ( transformName ) {
|
||||
equal( elemStyle[ transformName ], transformVal, "setting properly-prefixed transform" );
|
||||
}
|
||||
equal( elemStyle[ "undefined" ], undefined, "Nothing writes to node.style.undefined" );
|
||||
} );
|
||||
|
||||
test( "Don't detect fake set properties on a node when caching the prefixed version", function() {
|
||||
expect( 1 );
|
||||
|
||||
var elem = jQuery( "<div/>" ),
|
||||
style = elem[ 0 ].style;
|
||||
style.MozFakeProperty = "old value";
|
||||
elem.css( "fakeProperty", "new value" );
|
||||
|
||||
equal( style.MozFakeProperty, "old value", "Fake prefixed property is not cached" );
|
||||
} );
|
||||
|
||||
} )();
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user