CSS: Return `undefined` for whitespace-only CSS variable values (#5120)

The spec requires that CSS variable values are trimmed. In browsers that do
this - mainly, Safari, but also Firefox if the value only has leading
whitespace - we currently return undefined; in other browsers, we return
an empty string as the logic to fall back to undefined happens before
trimming.

This commit adds another explicit callback to `undefined` to have it consistent
across browsers.

Also, more explicit comments about behaviors we need to work around in various
browsers have been added.

Closes gh-5120
Ref gh-5106

1 files changed, 24 insertions, 4 deletions

diff --git a/src/css/curCSS.js b/src/css/curCSS.js
index 25b4630a5..72c3db9f5 100644
--- a/src/css/curCSS.js
+++ b/src/css/curCSS.js
@@ -12,17 +12,37 @@ function curCSS( elem, name, computed ) {
 
 	// getPropertyValue is needed for `.css('--customProperty')` (gh-3144)
 	if ( computed ) {
-		ret = computed.getPropertyValue( name ) || computed[ name ];
 
-		// trim whitespace for custom property (issue gh-4926)
-		if ( isCustomProp && ret !== undefined ) {
+		// Support: IE <=9 - 11+
+		// IE only supports `"float"` in `getPropertyValue`; in computed styles
+		// it's only available as `"cssFloat"`. We no longer modify properties
+		// sent to `.css()` apart from camelCasing, so we need to check both.
+		// Normally, this would create difference in behavior: if
+		// `getPropertyValue` returns an empty string, the value returned
+		// by `.css()` would be `undefined`. This is usually the case for
+		// disconnected elements. However, in IE even disconnected elements
+		// with no styles return `"none"` for `getPropertyValue( "float" )`
+		ret = computed.getPropertyValue( name ) || computed[ name ];
 
+		if ( isCustomProp && ret ) {
+
+			// Support: Firefox 105+, Chrome <=105+
+			// Spec requires trimming whitespace for custom properties (gh-4926).
+			// Firefox only trims leading whitespace. Chrome just collapses
+			// both leading & trailing whitespace to a single space.
+			//
+			// Fall back to `undefined` if empty string returned.
+			// This collapses a missing definition with property defined
+			// and set to an empty string but there's no standard API
+			// allowing us to differentiate them without a performance penalty
+			// and returning `undefined` aligns with older jQuery.
+			//
 			// rtrim treats U+000D CARRIAGE RETURN and U+000C FORM FEED
 			// as whitespace while CSS does not, but this is not a problem
 			// because CSS preprocessing replaces them with U+000A LINE FEED
 			// (which *is* CSS whitespace)
 			// https://www.w3.org/TR/css-syntax-3/#input-preprocessing
-			ret = ret.replace( rtrim, "$1" );
+			ret = ret.replace( rtrim, "$1" ) || undefined;
 		}
 
 		if ( ret === "" && !isAttached( elem ) ) {