From 219ccf5c5ffd751adb782335f0a36da79070f102 Mon Sep 17 00:00:00 2001 From: fecore1 <89127124+fecore1@users.noreply.github.com> Date: Thu, 23 Sep 2021 19:35:18 +0800 Subject: [PATCH] CSS: Trim whitespace surrounding CSS Custom Properties values The spec has recently changed and CSS Custom Properties values are trimmed now. This change makes jQuery polyfill that new behavior for all browsers. Ref w3c/csswg-drafts#774 Fixes gh-4926 Closes gh-4930 (partially cherry picked from commit efadfe991a5c287af561a9326bf1427d726c91c1) --- src/css.js | 7 ++--- src/css/curCSS.js | 11 +++++++- src/css/var/rcustomProp.js | 7 +++++ src/var/rtrimCSS.js | 12 +++++++++ src/var/whitespace.js | 8 ++++++ test/unit/css.js | 53 ++++++++++++++++++++------------------ 6 files changed, 69 insertions(+), 29 deletions(-) create mode 100644 src/css/var/rcustomProp.js create mode 100644 src/var/rtrimCSS.js create mode 100644 src/var/whitespace.js diff --git a/src/css.js b/src/css.js index a41cc2c92..225dd7b5b 100644 --- a/src/css.js +++ b/src/css.js @@ -5,6 +5,7 @@ define( [ "./core/nodeName", "./var/rcssNum", "./css/var/rnumnonpx", + "./css/var/rcustomProp", "./css/var/cssExpand", "./css/var/getStyles", "./css/var/swap", @@ -17,8 +18,9 @@ define( [ "./core/init", "./core/ready", "./selector" // contains -], function( jQuery, access, camelCase, nodeName, rcssNum, rnumnonpx, cssExpand, - getStyles, swap, curCSS, adjustCSS, addGetHookIf, support, finalPropName ) { +], function( jQuery, access, camelCase, nodeName, rcssNum, rnumnonpx, + rcustomProp, cssExpand, getStyles, swap, curCSS, adjustCSS, addGetHookIf, + support, finalPropName ) { "use strict"; @@ -28,7 +30,6 @@ var // except "table", "table-cell", or "table-caption" // See here for display values: https://developer.mozilla.org/en-US/docs/CSS/display rdisplayswap = /^(none|table(?!-c[ea]).+)/, - rcustomProp = /^--/, cssShow = { position: "absolute", visibility: "hidden", display: "block" }, cssNormalTransform = { letterSpacing: "0", diff --git a/src/css/curCSS.js b/src/css/curCSS.js index 98a594a77..118499f26 100644 --- a/src/css/curCSS.js +++ b/src/css/curCSS.js @@ -4,13 +4,17 @@ define( [ "./var/rboxStyle", "./var/rnumnonpx", "./var/getStyles", + "./var/rcustomProp", + "../var/rtrimCSS.js", "./support" -], function( jQuery, isAttached, rboxStyle, rnumnonpx, getStyles, support ) { +], function( jQuery, isAttached, rboxStyle, rnumnonpx, getStyles, + rcustomProp, rtrimCSS, support ) { "use strict"; function curCSS( elem, name, computed ) { var width, minWidth, maxWidth, ret, + isCustomProp = rcustomProp.test( name ), // Support: Firefox 51+ // Retrieving style before computed somehow @@ -26,6 +30,11 @@ function curCSS( elem, name, computed ) { if ( computed ) { ret = computed.getPropertyValue( name ) || computed[ name ]; + // trim whitespace for custom property (issue gh-4926) + if ( isCustomProp ) { + ret = ret.replace( rtrimCSS, "$1" ); + } + if ( ret === "" && !isAttached( elem ) ) { ret = jQuery.style( elem, name ); } diff --git a/src/css/var/rcustomProp.js b/src/css/var/rcustomProp.js new file mode 100644 index 000000000..6f01b85c3 --- /dev/null +++ b/src/css/var/rcustomProp.js @@ -0,0 +1,7 @@ +define( function() { + +"use strict"; + +return /^--/; + +} ); diff --git a/src/var/rtrimCSS.js b/src/var/rtrimCSS.js new file mode 100644 index 000000000..cfe1eead3 --- /dev/null +++ b/src/var/rtrimCSS.js @@ -0,0 +1,12 @@ +define( [ + "./whitespace" +], function( whitespace ) { + +"use strict"; + +return new RegExp( + "^" + whitespace + "+|((?:^|[^\\\\])(?:\\\\.)*)" + whitespace + "+$", + "g" +); + +} ); diff --git a/src/var/whitespace.js b/src/var/whitespace.js new file mode 100644 index 000000000..2a6059b09 --- /dev/null +++ b/src/var/whitespace.js @@ -0,0 +1,8 @@ +define( function() { + +"use strict"; + +// https://www.w3.org/TR/css3-selectors/#whitespace +return "[\\x20\\t\\r\\n\\f]"; + +} ); diff --git a/test/unit/css.js b/test/unit/css.js index 81401d158..84f8c381c 100644 --- a/test/unit/css.js +++ b/test/unit/css.js @@ -1745,9 +1745,16 @@ QUnit.test( "Do not throw on frame elements from css method (#15098)", function( " .test__customProperties {\n" + " --prop1:val1;\n" + " --prop2: val2;\n" + - " --prop3:val3 ;\n" + - " --prop4:\"val4\";\n" + - " --prop5:'val5';\n" + + " --prop3: val3;\n" + + " --prop4:val4 ;\n" + + " --prop5:val5 ;\n" + + " --prop6: val6 ;\n" + + " --prop7: val7 ;\n" + + " --prop8:\"val8\";\n" + + " --prop9:'val9';\n" + + " --prop10:\f\r\n\t val10 \f\r\n\t;\n" + + " --prop11:\u000C\u000D\u000A\u0009\u0020val11\u0020\u0009\u000A\u000D\u000C;\n" + + " --prop12:\u000Bval12\u000B;\n" + " }\n" + "" ); @@ -1755,18 +1762,10 @@ QUnit.test( "Do not throw on frame elements from css method (#15098)", function( var div = jQuery( "
" ).appendTo( "#qunit-fixture" ), $elem = jQuery( "
" ).addClass( "test__customProperties" ) .appendTo( "#qunit-fixture" ), - webkit = /\bsafari\b/i.test( navigator.userAgent ) && - !/\firefox\b/i.test( navigator.userAgent ) && - !/\edge\b/i.test( navigator.userAgent ), - oldSafari = webkit && ( /\b9\.\d(\.\d+)* safari/i.test( navigator.userAgent ) || - /\b10\.0(\.\d+)* safari/i.test( navigator.userAgent ) || - /iphone os (?:9|10)_/i.test( navigator.userAgent ) ), - expected = 10; - - if ( webkit ) { - expected -= 2; - } - if ( oldSafari ) { + webkitOrBlink = /\bsafari\b/i.test( navigator.userAgent ), + expected = 17; + + if ( webkitOrBlink ) { expected -= 2; } assert.expect( expected ); @@ -1792,20 +1791,24 @@ QUnit.test( "Do not throw on frame elements from css method (#15098)", function( assert.equal( $elem.css( "--prop1" ), "val1", "Basic CSS custom property" ); - // Support: Safari 9.1-10.0 only - // Safari collapses whitespaces & quotes. Ignore it. - if ( !oldSafari ) { - assert.equal( $elem.css( "--prop2" ), " val2", "Preceding whitespace maintained" ); - assert.equal( $elem.css( "--prop3" ), "val3 ", "Following whitespace maintained" ); - } + assert.equal( $elem.css( "--prop2" ), "val2", "Preceding whitespace trimmed" ); + assert.equal( $elem.css( "--prop3" ), "val3", "Multiple preceding whitespace trimmed" ); + assert.equal( $elem.css( "--prop4" ), "val4", "Following whitespace trimmed" ); + assert.equal( $elem.css( "--prop5" ), "val5", "Multiple Following whitespace trimmed" ); + assert.equal( $elem.css( "--prop6" ), "val6", "Preceding and Following whitespace trimmed" ); + assert.equal( $elem.css( "--prop7" ), "val7", "Multiple preceding and following whitespace trimmed" ); - // Support: Chrome 49-55, Safari 9.1-10.0 + // Support: Chrome <=49 - 73+, Safari <=9.1 - 12.1+ // Chrome treats single quotes as double ones. // Safari treats double quotes as single ones. - if ( !webkit ) { - assert.equal( $elem.css( "--prop4" ), "\"val4\"", "Works with double quotes" ); - assert.equal( $elem.css( "--prop5" ), "'val5'", "Works with single quotes" ); + if ( !webkitOrBlink ) { + assert.equal( $elem.css( "--prop8" ), "\"val8\"", "Works with double quotes" ); + assert.equal( $elem.css( "--prop9" ), "'val9'", "Works with single quotes" ); } + + assert.equal( $elem.css( "--prop10" ), "val10", "Multiple preceding and following escaped unicode whitespace trimmed" ); + assert.equal( $elem.css( "--prop11" ), "val11", "Multiple preceding and following unicode whitespace trimmed" ); + assert.equal( $elem.css( "--prop12" ), "\u000Bval12\u000B", "Multiple preceding and following non-CSS whitespace reserved" ); } ); QUnit[ supportsCssVars ? "test" : "skip" ]( "Don't append px to CSS vars", function( assert ) { -- 2.39.5