From 8fae21200e80647fec4389995c4879948d11ad66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82=C4=99biowski-Owczarek?= Date: Mon, 29 Apr 2019 21:06:53 +0200 Subject: [PATCH] Data: Separate data & css/effects camelCase implementations The camelCase implementation used by the data module no longer turns `-ms-foo` into `msFoo` but to `MsFoo` now. This is because `data` is supposed to be a generic utility not specifically bound to CSS use cases. Fixes gh-3355 Closes gh-4365 --- src/core/camelCase.js | 9 +++------ src/css.js | 8 ++++---- src/css/cssCamelCase.js | 20 ++++++++++++++++++++ src/deprecated.js | 6 +++--- src/effects.js | 8 ++++---- test/unit/css.js | 15 +++++++++++++++ test/unit/data.js | 20 +++++++++++++++++++- 7 files changed, 68 insertions(+), 18 deletions(-) create mode 100644 src/css/cssCamelCase.js diff --git a/src/core/camelCase.js b/src/core/camelCase.js index 799fb3752..95de46866 100644 --- a/src/core/camelCase.js +++ b/src/core/camelCase.js @@ -3,19 +3,16 @@ define( [], function() { "use strict"; // Matches dashed string for camelizing -var rmsPrefix = /^-ms-/, - rdashAlpha = /-([a-z])/g; +var rdashAlpha = /-([a-z])/g; // Used by camelCase as callback to replace() function fcamelCase( all, letter ) { return letter.toUpperCase(); } -// Convert dashed to camelCase; used by the css and data modules -// Support: IE <=9 - 11, Edge 12 - 15 -// Microsoft forgot to hump their vendor prefix (#9572) +// Convert dashed to camelCase function camelCase( string ) { - return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase ); + return string.replace( rdashAlpha, fcamelCase ); } return camelCase; diff --git a/src/css.js b/src/css.js index d6354a310..f9277bf6c 100644 --- a/src/css.js +++ b/src/css.js @@ -1,11 +1,11 @@ define( [ "./core", "./core/access", - "./core/camelCase", "./var/rcssNum", "./css/var/rnumnonpx", "./css/var/cssExpand", "./css/isAutoPx", + "./css/cssCamelCase", "./css/var/getStyles", "./css/var/swap", "./css/curCSS", @@ -17,7 +17,7 @@ define( [ "./core/init", "./core/ready", "./selector" // contains -], function( jQuery, access, camelCase, rcssNum, rnumnonpx, cssExpand, isAutoPx, +], function( jQuery, access, rcssNum, rnumnonpx, cssExpand, isAutoPx, cssCamelCase, getStyles, swap, curCSS, adjustCSS, addGetHookIf, support, finalPropName ) { "use strict"; @@ -213,7 +213,7 @@ jQuery.extend( { // Make sure that we're working with the right name var ret, type, hooks, - origName = camelCase( name ), + origName = cssCamelCase( name ), isCustomProp = rcustomProp.test( name ), style = elem.style; @@ -281,7 +281,7 @@ jQuery.extend( { css: function( elem, name, extra, styles ) { var val, num, hooks, - origName = camelCase( name ), + origName = cssCamelCase( name ), isCustomProp = rcustomProp.test( name ); // Make sure that we're working with the right name. We don't diff --git a/src/css/cssCamelCase.js b/src/css/cssCamelCase.js new file mode 100644 index 000000000..9b5c328ad --- /dev/null +++ b/src/css/cssCamelCase.js @@ -0,0 +1,20 @@ +define( [ + "../core/camelCase" +], function( camelCase ) { + +"use strict"; + +// Matches dashed string for camelizing +var rmsPrefix = /^-ms-/; + +// Convert dashed to camelCase, handle vendor prefixes. +// Used by the css & effects modules. +// Support: IE <=9 - 11+, Edge 12 - 18+ +// Microsoft forgot to hump their vendor prefix (#9572) +function cssCamelCase( string ) { + return camelCase( string.replace( rmsPrefix, "ms-" ) ); +} + +return cssCamelCase; + +} ); diff --git a/src/deprecated.js b/src/deprecated.js index c11b0d332..e24de4818 100644 --- a/src/deprecated.js +++ b/src/deprecated.js @@ -1,14 +1,14 @@ define( [ "./core", "./core/nodeName", - "./core/camelCase", "./core/toType", + "./css/cssCamelCase", "./var/isFunction", "./var/isWindow", "./var/slice", "./event/alias" -], function( jQuery, nodeName, camelCase, toType, isFunction, isWindow, slice ) { +], function( jQuery, nodeName, toType, cssCamelCase, isFunction, isWindow, slice ) { "use strict"; @@ -76,7 +76,7 @@ jQuery.parseJSON = JSON.parse; jQuery.nodeName = nodeName; jQuery.isFunction = isFunction; jQuery.isWindow = isWindow; -jQuery.camelCase = camelCase; +jQuery.camelCase = cssCamelCase; jQuery.type = toType; jQuery.now = Date.now; diff --git a/src/effects.js b/src/effects.js index a778de106..c9332f7d7 100644 --- a/src/effects.js +++ b/src/effects.js @@ -1,6 +1,5 @@ define( [ "./core", - "./core/camelCase", "./var/document", "./var/isFunction", "./var/rcssNum", @@ -9,6 +8,7 @@ define( [ "./css/var/isHiddenWithinTree", "./css/var/swap", "./css/adjustCSS", + "./css/cssCamelCase", "./data/var/dataPriv", "./css/showHide", @@ -19,8 +19,8 @@ define( [ "./manipulation", "./css", "./effects/Tween" -], function( jQuery, camelCase, document, isFunction, rcssNum, rnothtmlwhite, cssExpand, - isHiddenWithinTree, swap, adjustCSS, dataPriv, showHide ) { +], function( jQuery, document, isFunction, rcssNum, rnothtmlwhite, cssExpand, + isHiddenWithinTree, swap, adjustCSS, cssCamelCase, dataPriv, showHide ) { "use strict"; @@ -261,7 +261,7 @@ function propFilter( props, specialEasing ) { // camelCase, specialEasing and expand cssHook pass for ( index in props ) { - name = camelCase( index ); + name = cssCamelCase( index ); easing = specialEasing[ name ]; value = props[ index ]; if ( Array.isArray( value ) ) { diff --git a/test/unit/css.js b/test/unit/css.js index 20a5a77bc..150f5b908 100644 --- a/test/unit/css.js +++ b/test/unit/css.js @@ -1885,3 +1885,18 @@ QUnit.test( "Do not throw on frame elements from css method (#15098)", function( } )(); } + +// Support: IE 11+ +if ( document.documentMode ) { + // Make sure explicitly provided IE vendor prefix (`-ms-`) is not converted + // to a non-working `Ms` prefix in JavaScript. + QUnit.test( "IE vendor prefixes are not mangled", function( assert ) { + assert.expect( 1 ); + + var div = jQuery( "
" ).appendTo( "#qunit-fixture" ); + + div.css( "-ms-grid-row", "1" ); + + assert.strictEqual( div.css( "-ms-grid-row" ), "1", "IE vendor prefixing" ); + } ); +} diff --git a/test/unit/data.js b/test/unit/data.js index 32605cff8..849b86ee3 100644 --- a/test/unit/data.js +++ b/test/unit/data.js @@ -722,10 +722,28 @@ QUnit.test( ".data supports interoperable hyphenated/camelCase get/set of proper "2-num-start": { key: "2NumStart", value: true + }, + + // Vendor prefixes are not treated in a special way. + "-ms-foo": { + key: "MsFoo", + value: true + }, + "-moz-foo": { + key: "MozFoo", + value: true + }, + "-webkit-foo": { + key: "WebkitFoo", + value: true + }, + "-fake-foo": { + key: "FakeFoo", + value: true } }; - assert.expect( 24 ); + assert.expect( 32 ); jQuery.each( datas, function( key, val ) { div.data( key, val.value );