🌐 AI搜索 & 代理 主页
Skip to content

Commit d2df468

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 jquerygh-4926 Closes jquerygh-4930 (partially cherry picked from efadfe9)
1 parent 924b515 commit d2df468

File tree

6 files changed

+70
-29
lines changed

6 files changed

+70
-29
lines changed

‎src/css.js‎

Lines changed: 2 additions & 2 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,7 +18,7 @@ define( [
1718
"./core/init",
1819
"./core/ready",
1920
"./selector" // contains
20-
], function( jQuery, access, camelCase, nodeName, rcssNum, rnumnonpx, cssExpand,
21+
], function( jQuery, access, camelCase, nodeName, rcssNum, rnumnonpx, rcustomProp, cssExpand,
2122
getStyles, swap, curCSS, adjustCSS, addGetHookIf, support, finalPropName ) {
2223

2324
"use strict";
@@ -28,7 +29,6 @@ var
2829
// except "table", "table-cell", or "table-caption"
2930
// See here for display values: https://developer.mozilla.org/en-US/docs/CSS/display
3031
rdisplayswap = /^(none|table(?!-c[ea]).+)/,
31-
rcustomProp = /^--/,
3232
cssShow = { position: "absolute", visibility: "hidden", display: "block" },
3333
cssNormalTransform = {
3434
letterSpacing: "0",

‎src/css/curCSS.js‎

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

1013
"use strict";
1114

@@ -16,16 +19,23 @@ function curCSS( elem, name, computed ) {
1619
// Retrieving style before computed somehow
1720
// fixes an issue with getting wrong values
1821
// on detached elements
19-
style = elem.style;
22+
style = elem.style,
23+
24+
isCustomProp = rcustomProp.test( name );
2025

2126
computed = computed || getStyles( elem );
2227

2328
// getPropertyValue is needed for:
2429
// .css('filter') (IE 9 only, #12537)
25-
// .css('--customProperty) (#3144)
30+
// .css('--customProperty) (gh-3144)
2631
if ( computed ) {
2732
ret = computed.getPropertyValue( name ) || computed[ name ];
2833

34+
// trim whitespace for custom property (issue gh-4926)
35+
if ( isCustomProp ) {
36+
ret = ret.replace( rtrim, "$1" );
37+
}
38+
2939
if ( ret === "" && !isAttached( elem ) ) {
3040
ret = jQuery.style( elem, name );
3141
}
@@ -55,7 +65,7 @@ function curCSS( elem, name, computed ) {
5565

5666
return ret !== undefined ?
5767

58-
// Support: IE <=9 - 11 only
68+
// Support: IE <=9 - 11+
5969
// IE returns zIndex value as an integer.
6070
ret + "" :
6171
ret;

‎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/rtrim.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
define( [
2+
"./whitespace.js"
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: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1745,28 +1745,28 @@ 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 ) &&
1765+
webkitOrBlink = /\bsafari\b/i.test( navigator.userAgent ) &&
17601766
!/\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;
1767+
expected = 17;
17651768

1766-
if ( webkit ) {
1767-
expected -= 2;
1768-
}
1769-
if ( oldSafari ) {
1769+
if ( webkitOrBlink ) {
17701770
expected -= 2;
17711771
}
17721772
assert.expect( expected );
@@ -1792,20 +1792,24 @@ QUnit.test( "Do not throw on frame elements from css method (#15098)", function(
17921792

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

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-
}
1795+
assert.equal( $elem.css( "--prop2" ), "val2", "Preceding whitespace trimmed" );
1796+
assert.equal( $elem.css( "--prop3" ), "val3", "Multiple preceding whitespace trimmed" );
1797+
assert.equal( $elem.css( "--prop4" ), "val4", "Following whitespace trimmed" );
1798+
assert.equal( $elem.css( "--prop5" ), "val5", "Multiple Following whitespace trimmed" );
1799+
assert.equal( $elem.css( "--prop6" ), "val6", "Preceding and Following whitespace trimmed" );
1800+
assert.equal( $elem.css( "--prop7" ), "val7", "Multiple preceding and following whitespace trimmed" );
18011801

1802-
// Support: Chrome 49-55, Safari 9.1-10.0
1802+
// Support: Chrome <=49 - 73+, Safari <=9.1 - 12.1+
18031803
// Chrome treats single quotes as double ones.
18041804
// 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" );
1805+
if ( !webkitOrBlink ) {
1806+
assert.equal( $elem.css( "--prop8" ), "\"val8\"", "Works with double quotes" );
1807+
assert.equal( $elem.css( "--prop9" ), "'val9'", "Works with single quotes" );
18081808
}
1809+
1810+
assert.equal( $elem.css( "--prop10" ), "val10", "Multiple preceding and following escaped unicode whitespace trimmed" );
1811+
assert.equal( $elem.css( "--prop11" ), "val11", "Multiple preceding and following unicode whitespace trimmed" );
1812+
assert.equal( $elem.css( "--prop12" ), "\u000Bval12\u000B", "Multiple preceding and following non-CSS whitespace reserved" );
18091813
} );
18101814

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

0 commit comments

Comments
 (0)