diff --git a/src/jquery/css.js b/src/jquery/css.js index 77aa10b6..f04b3649 100644 --- a/src/jquery/css.js +++ b/src/jquery/css.js @@ -81,10 +81,33 @@ if ( jQueryVersionSince( "3.4.0" ) && typeof Proxy !== "undefined" ) { } ); } -// Create a dummy jQuery.cssNumber if missing. It won't be used by jQuery but -// it will prevent code adding new keys to it unconditionally from crashing. +// In jQuery >=4 where jQuery.cssNumber is missing fill it with the latest 3.x version: +// https://github.com/jquery/jquery/blob/3.6.0/src/css.js#L212-L233 +// This way, number values for the CSS properties below won't start triggering +// Migrate warnings when jQuery gets updated to >=4.0.0 (gh-438). if ( !jQuery.cssNumber ) { - jQuery.cssNumber = {}; + jQuery.cssNumber = { + animationIterationCount: true, + columnCount: true, + fillOpacity: true, + flexGrow: true, + flexShrink: true, + fontWeight: true, + gridArea: true, + gridColumn: true, + gridColumnEnd: true, + gridColumnStart: true, + gridRow: true, + gridRowEnd: true, + gridRowStart: true, + lineHeight: true, + opacity: true, + order: true, + orphans: true, + widows: true, + zIndex: true, + zoom: true + }; } function isAutoPx( prop ) { diff --git a/test/css.js b/test/css.js index 4d2c1415..c8627fd7 100644 --- a/test/css.js +++ b/test/css.js @@ -62,7 +62,7 @@ QUnit.test( "jQuery.css with arrays", function( assert ) { QUnit.test( "jQuery.css with numbers", function( assert ) { var jQuery3OrOlder = compareVersions( jQuery.fn.jquery, "4.0.0" ) < 0, - whitelist = [ + allowlist = [ "margin", "marginTop", "marginRight", @@ -95,7 +95,7 @@ QUnit.test( "jQuery.css with numbers", function( assert ) { "borderLeftWidth" ]; - assert.expect( jQuery3OrOlder ? 7 : 6 ); + assert.expect( jQuery3OrOlder ? 8 : 7 ); function kebabCase( string ) { return string.replace( /[A-Z]/g, function( match ) { @@ -127,8 +127,8 @@ QUnit.test( "jQuery.css with numbers", function( assert ) { } ); } ); - expectNoWarning( assert, "Number value (whitelisted props)", function() { - whitelist.forEach( function( prop ) { + expectNoWarning( assert, "Number value (allowlisted props)", function() { + allowlist.forEach( function( prop ) { jQuery( "
" ).css( prop, 1 ); jQuery( "
" ).css( kebabCase( prop ), 1 ); } ); @@ -147,6 +147,14 @@ QUnit.test( "jQuery.css with numbers", function( assert ) { } } ); + // z-index is tested explicitly as raw jQuery 4.0 will not have `jQuery.cssNumber` + // so iterating over it won't find anything and we'd like to ensure number values + // are not warned against for safe CSS props like z-index (gh-438). + expectNoWarning( assert, "z-index", function() { + jQuery( "
" ).css( "z-index", 1 ); + jQuery( "
" ).css( kebabCase( "zIndex" ), 1 ); + } ); + } ); QUnit.test( "jQuery.cssNumber", function( assert ) {