Skip to content

Commit 219ccf5

Browse files
fecore1mgol
fecore1
authored and
mgol
committed
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 efadfe9)
1 parent 9340649 commit 219ccf5

File tree

6 files changed

+69
-29
lines changed

6 files changed

+69
-29
lines changed

‎src/css.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ define( [
55
"./core/nodeName",
66
"./var/rcssNum",
77
"./css/var/rnumnonpx",
8+
"./css/var/rcustomProp",
89
"./css/var/cssExpand",
910
"./css/var/getStyles",
1011
"./css/var/swap",
@@ -17,8 +18,9 @@ define( [
1718
"./core/init",
1819
"./core/ready",
1920
"./selector" // contains
20-
], function( jQuery, access, camelCase, nodeName, rcssNum, rnumnonpx, cssExpand,
21-
getStyles, swap, curCSS, adjustCSS, addGetHookIf, support, finalPropName ) {
21+
], function( jQuery, access, camelCase, nodeName, rcssNum, rnumnonpx,
22+
rcustomProp, cssExpand, getStyles, swap, curCSS, adjustCSS, addGetHookIf,
23+
support, finalPropName ) {
2224

2325
"use strict";
2426

@@ -28,7 +30,6 @@ var
2830
// except "table", "table-cell", or "table-caption"
2931
// See here for display values: https://developer.mozilla.org/en-US/docs/CSS/display
3032
rdisplayswap = /^(none|table(?!-c[ea]).+)/,
31-
rcustomProp = /^--/,
3233
cssShow = { position: "absolute", visibility: "hidden", display: "block" },
3334
cssNormalTransform = {
3435
letterSpacing: "0",

‎src/css/curCSS.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,17 @@ define( [
44
"./var/rboxStyle",
55
"./var/rnumnonpx",
66
"./var/getStyles",
7+
"./var/rcustomProp",
8+
"../var/rtrimCSS.js",
79
"./support"
8-
], function( jQuery, isAttached, rboxStyle, rnumnonpx, getStyles, support ) {
10+
], function( jQuery, isAttached, rboxStyle, rnumnonpx, getStyles,
11+
rcustomProp, rtrimCSS, support ) {
912

1013
"use strict";
1114

1215
function curCSS( elem, name, computed ) {
1316
var width, minWidth, maxWidth, ret,
17+
isCustomProp = rcustomProp.test( name ),
1418

1519
// Support: Firefox 51+
1620
// Retrieving style before computed somehow
@@ -26,6 +30,11 @@ function curCSS( elem, name, computed ) {
2630
if ( computed ) {
2731
ret = computed.getPropertyValue( name ) || computed[ name ];
2832

33+
// trim whitespace for custom property (issue gh-4926)
34+
if ( isCustomProp ) {
35+
ret = ret.replace( rtrimCSS, "$1" );
36+
}
37+
2938
if ( ret === "" && !isAttached( elem ) ) {
3039
ret = jQuery.style( elem, name );
3140
}

‎src/css/var/rcustomProp.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
define( function() {
2+
3+
"use strict";
4+
5+
return /^--/;
6+
7+
} );

‎src/var/rtrimCSS.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
define( [
2+
"./whitespace"
3+
], function( whitespace ) {
4+
5+
"use strict";
6+
7+
return new RegExp(
8+
"^" + whitespace + "+|((?:^|[^\\\\])(?:\\\\.)*)" + whitespace + "+$",
9+
"g"
10+
);
11+
12+
} );

‎src/var/whitespace.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
define( function() {
2+
3+
"use strict";
4+
5+
// https://www.w3.org/TR/css3-selectors/#whitespace
6+
return "[\\x20\\t\\r\\n\\f]";
7+
8+
} );

‎test/unit/css.js‎

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1745,28 +1745,27 @@ QUnit.test( "Do not throw on frame elements from css method (#15098)", function(
17451745
" .test__customProperties {\n" +
17461746
" --prop1:val1;\n" +
17471747
" --prop2: val2;\n" +
1748-
" --prop3:val3 ;\n" +
1749-
" --prop4:\"val4\";\n" +
1750-
" --prop5:'val5';\n" +
1748+
" --prop3: val3;\n" +
1749+
" --prop4:val4 ;\n" +
1750+
" --prop5:val5 ;\n" +
1751+
" --prop6: val6 ;\n" +
1752+
" --prop7: val7 ;\n" +
1753+
" --prop8:\"val8\";\n" +
1754+
" --prop9:'val9';\n" +
1755+
" --prop10:\f\r\n\t val10 \f\r\n\t;\n" +
1756+
" --prop11:\u000C\u000D\u000A\u0009\u0020val11\u0020\u0009\u000A\u000D\u000C;\n" +
1757+
" --prop12:\u000Bval12\u000B;\n" +
17511758
" }\n" +
17521759
"</style>"
17531760
);
17541761

17551762
var div = jQuery( "<div>" ).appendTo( "#qunit-fixture" ),
17561763
$elem = jQuery( "<div>" ).addClass( "test__customProperties" )
17571764
.appendTo( "#qunit-fixture" ),
1758-
webkit = /\bsafari\b/i.test( navigator.userAgent ) &&
1759-
!/\firefox\b/i.test( navigator.userAgent ) &&
1760-
!/\edge\b/i.test( navigator.userAgent ),
1761-
oldSafari = webkit && ( /\b9\.\d(\.\d+)* safari/i.test( navigator.userAgent ) ||
1762-
/\b10\.0(\.\d+)* safari/i.test( navigator.userAgent ) ||
1763-
/iphone os (?:9|10)_/i.test( navigator.userAgent ) ),
1764-
expected = 10;
1765-
1766-
if ( webkit ) {
1767-
expected -= 2;
1768-
}
1769-
if ( oldSafari ) {
1765+
webkitOrBlink = /\bsafari\b/i.test( navigator.userAgent ),
1766+
expected = 17;
1767+
1768+
if ( webkitOrBlink ) {
17701769
expected -= 2;
17711770
}
17721771
assert.expect( expected );
@@ -1792,20 +1791,24 @@ QUnit.test( "Do not throw on frame elements from css method (#15098)", function(
17921791

17931792
assert.equal( $elem.css( "--prop1" ), "val1", "Basic CSS custom property" );
17941793

1795-
// Support: Safari 9.1-10.0 only
1796-
// Safari collapses whitespaces & quotes. Ignore it.
1797-
if ( !oldSafari ) {
1798-
assert.equal( $elem.css( "--prop2" ), " val2", "Preceding whitespace maintained" );
1799-
assert.equal( $elem.css( "--prop3" ), "val3 ", "Following whitespace maintained" );
1800-
}
1794+
assert.equal( $elem.css( "--prop2" ), "val2", "Preceding whitespace trimmed" );
1795+
assert.equal( $elem.css( "--prop3" ), "val3", "Multiple preceding whitespace trimmed" );
1796+
assert.equal( $elem.css( "--prop4" ), "val4", "Following whitespace trimmed" );
1797+
assert.equal( $elem.css( "--prop5" ), "val5", "Multiple Following whitespace trimmed" );
1798+
assert.equal( $elem.css( "--prop6" ), "val6", "Preceding and Following whitespace trimmed" );
1799+
assert.equal( $elem.css( "--prop7" ), "val7", "Multiple preceding and following whitespace trimmed" );
18011800

1802-
// Support: Chrome 49-55, Safari 9.1-10.0
1801+
// Support: Chrome <=49 - 73+, Safari <=9.1 - 12.1+
18031802
// Chrome treats single quotes as double ones.
18041803
// Safari treats double quotes as single ones.
1805-
if ( !webkit ) {
1806-
assert.equal( $elem.css( "--prop4" ), "\"val4\"", "Works with double quotes" );
1807-
assert.equal( $elem.css( "--prop5" ), "'val5'", "Works with single quotes" );
1804+
if ( !webkitOrBlink ) {
1805+
assert.equal( $elem.css( "--prop8" ), "\"val8\"", "Works with double quotes" );
1806+
assert.equal( $elem.css( "--prop9" ), "'val9'", "Works with single quotes" );
18081807
}
1808+
1809+
assert.equal( $elem.css( "--prop10" ), "val10", "Multiple preceding and following escaped unicode whitespace trimmed" );
1810+
assert.equal( $elem.css( "--prop11" ), "val11", "Multiple preceding and following unicode whitespace trimmed" );
1811+
assert.equal( $elem.css( "--prop12" ), "\u000Bval12\u000B", "Multiple preceding and following non-CSS whitespace reserved" );
18091812
} );
18101813

18111814
QUnit[ supportsCssVars ? "test" : "skip" ]( "Don't append px to CSS vars", function( assert ) {

0 commit comments

Comments
 (0)