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 efadfe991a)

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",

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 );
 		}

src/css/var/rcustomProp.js

@@ -0,0 +1,7 @@
+define( function() {
+
+"use strict";
+
+return /^--/;
+
+} );

src/var/rtrimCSS.js

@@ -0,0 +1,12 @@
+define( [
+	"./whitespace"
+], function( whitespace ) {
+
+"use strict";
+
+return new RegExp(
+	"^" + whitespace + "+|((?:^|[^\\\\])(?:\\\\.)*)" + whitespace + "+$",
+	"g"
+);
+
+} );

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]";
+
+} );

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" +
 			"</style>"
 		);
@@ -1755,18 +1762,10 @@ QUnit.test( "Do not throw on frame elements from css method (#15098)", function(
 		var div = jQuery( "<div>" ).appendTo( "#qunit-fixture" ),
 			$elem = jQuery( "<div>" ).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;
+			webkitOrBlink = /\bsafari\b/i.test( navigator.userAgent ),
+			expected = 17;
 
-		if ( webkit ) {
-			expected -= 2;
-		}
-		if ( oldSafari ) {
+		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 ) {