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

Commit bcec54e

Browse files
mgolmgol
committed
Tests: Skip CSS custom properties tests in non-supporting browsers
Ref 619bf98
1 parent 619bf98 commit bcec54e

File tree

1 file changed

+66
-55
lines changed

1 file changed

+66
-55
lines changed

‎test/unit/css.js‎

Lines changed: 66 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1556,68 +1556,79 @@ QUnit.test( "Do not throw on frame elements from css method (#15098)", function(
15561556

15571557
} )();
15581558

1559+
( function() {
1560+
var supportsCssVars,
1561+
div = jQuery( "<div>" ).appendTo( "#qunit-fixture" )[ 0 ];
1562+
1563+
div.style.setProperty( "--prop", "value" );
1564+
supportsCssVars = getComputedStyle( div ).getPropertyValue( "--prop" );
1565+
1566+
QUnit[ supportsCssVars ? "test" : "skip" ]( "css(--customProperty)", function( assert ) {
1567+
jQuery( "#qunit-fixture" ).append(
1568+
"<style>\n" +
1569+
" .test__customProperties {\n" +
1570+
" --prop1:val1;\n" +
1571+
" --prop2: val2;\n" +
1572+
" --prop3:val3 ;\n" +
1573+
" --prop4:\"val4\";\n" +
1574+
" --prop5:'val5';\n" +
1575+
" }\n" +
1576+
"</style>"
1577+
);
1578+
1579+
var div = jQuery( "<div>" ).appendTo( "#qunit-fixture" ),
1580+
$elem = jQuery( "<div>" ).addClass( "test__customProperties" )
1581+
.appendTo( "#qunit-fixture" ),
1582+
webkit = /\bsafari\b/i.test( navigator.userAgent ) &&
1583+
!/\firefox\b/i.test( navigator.userAgent ) &&
1584+
!/\edge\b/i.test( navigator.userAgent ),
1585+
oldSafari = webkit && ( /\b9\.\d(\.\d+)* safari/i.test( navigator.userAgent ) ||
1586+
/\b10\.0(\.\d+)* safari/i.test( navigator.userAgent ) ||
1587+
/iphone os (?:9|10)_/i.test( navigator.userAgent ) ),
1588+
expected = 10;
1589+
1590+
if ( webkit ) {
1591+
expected -= 2;
1592+
}
1593+
if ( oldSafari ) {
1594+
expected -= 2;
1595+
}
1596+
assert.expect( expected );
15591597

1560-
QUnit.test( "css(--customProperty)", function( assert ) {
1561-
jQuery( "#qunit-fixture" ).append(
1562-
"<style>\n" +
1563-
" .test__customProperties {\n" +
1564-
" --prop1:val1;\n" +
1565-
" --prop2: val2;\n" +
1566-
" --prop3:val3 ;\n" +
1567-
" --prop4:\"val4\";\n" +
1568-
" --prop5:'val5';\n" +
1569-
" }\n" +
1570-
"</style>"
1571-
);
1572-
1573-
var div = jQuery( "<div>" ).appendTo( "#qunit-fixture" ),
1574-
$elem = jQuery( "<div>" ).addClass( "test__customProperties" ).appendTo( "#qunit-fixture" ),
1575-
webkit = /\bsafari\b/i.test( navigator.userAgent ) &&
1576-
!/\firefox\b/i.test( navigator.userAgent ) &&
1577-
!/\edge\b/i.test( navigator.userAgent ),
1578-
oldSafari = webkit && ( /\b9\.\d(\.\d+)* safari/i.test( navigator.userAgent ) ||
1579-
/\b10\.0(\.\d+)* safari/i.test( navigator.userAgent ) ),
1580-
expected = 10;
1581-
1582-
if ( webkit ) {
1583-
expected -= 2;
1584-
}
1585-
if ( oldSafari ) {
1586-
expected -= 2;
1587-
}
1588-
assert.expect( expected );
1589-
1590-
div.css( "--color", "blue" );
1591-
assert.equal( div.css( "--color" ), "blue", "Modified CSS custom property using string" );
1598+
div.css( "--color", "blue" );
1599+
assert.equal( div.css( "--color" ), "blue", "Modified CSS custom property using string" );
15921600

1593-
div.css( "--color", "yellow" );
1594-
assert.equal( div.css( "--color" ), "yellow", "Overwrite CSS custom property" );
1601+
div.css( "--color", "yellow" );
1602+
assert.equal( div.css( "--color" ), "yellow", "Overwrite CSS custom property" );
15951603

1596-
div.css( { "--color": "red" } );
1597-
assert.equal( div.css( "--color" ), "red", "Modified CSS custom property using object" );
1604+
div.css( { "--color": "red" } );
1605+
assert.equal( div.css( "--color" ), "red", "Modified CSS custom property using object" );
15981606

1599-
div.css( { "--mixedCase": "green" } );
1600-
assert.equal( div.css( "--mixedCase" ), "green", "Modified CSS custom property with mixed case" );
1607+
div.css( { "--mixedCase": "green" } );
1608+
assert.equal( div.css( "--mixedCase" ), "green",
1609+
"Modified CSS custom property with mixed case" );
16011610

1602-
div.css( { "--theme-dark": "purple" } );
1603-
assert.equal( div.css( "--theme-dark" ), "purple", "Modified CSS custom property with dashed name" );
1611+
div.css( { "--theme-dark": "purple" } );
1612+
assert.equal( div.css( "--theme-dark" ), "purple",
1613+
"Modified CSS custom property with dashed name" );
16041614

1605-
assert.equal( $elem.css( "--prop1" ), "val1", "Basic CSS custom property" );
1615+
assert.equal( $elem.css( "--prop1" ), "val1", "Basic CSS custom property" );
16061616

1607-
// Support: Safari 9.1-10.0 only
1608-
// Safari collapses whitespaces & quotes. Ignore it.
1609-
if ( !oldSafari ) {
1610-
assert.equal( $elem.css( "--prop2" ), " val2", "Preceding whitespace maintained" );
1611-
assert.equal( $elem.css( "--prop3" ), "val3 ", "Following whitespace maintained" );
1612-
}
1617+
// Support: Safari 9.1-10.0 only
1618+
// Safari collapses whitespaces & quotes. Ignore it.
1619+
if ( !oldSafari ) {
1620+
assert.equal( $elem.css( "--prop2" ), " val2", "Preceding whitespace maintained" );
1621+
assert.equal( $elem.css( "--prop3" ), "val3 ", "Following whitespace maintained" );
1622+
}
16131623

1614-
// Support: Chrome 49-55, Safari 9.1-10.0
1615-
// Chrome treats single quotes as double ones.
1616-
// Safari treats double quotes as single ones.
1617-
if ( !webkit ) {
1618-
assert.equal( $elem.css( "--prop4" ), "\"val4\"", "Works with double quotes" );
1619-
assert.equal( $elem.css( "--prop5" ), "'val5'", "Works with single quotes" );
1620-
}
1621-
} );
1624+
// Support: Chrome 49-55, Safari 9.1-10.0
1625+
// Chrome treats single quotes as double ones.
1626+
// Safari treats double quotes as single ones.
1627+
if ( !webkit ) {
1628+
assert.equal( $elem.css( "--prop4" ), "\"val4\"", "Works with double quotes" );
1629+
assert.equal( $elem.css( "--prop5" ), "'val5'", "Works with single quotes" );
1630+
}
1631+
} );
1632+
} )();
16221633

16231634
}

0 commit comments

Comments
 (0)