mirror of
https://github.com/jquery/jquery.git
synced 2024-11-23 02:54:22 +00:00
Tests: Skip CSS custom properties tests in non-supporting browsers
Ref 619bf98d5b
This commit is contained in:
parent
619bf98d5b
commit
bcec54ee72
115
test/unit/css.js
115
test/unit/css.js
@ -1556,68 +1556,79 @@ QUnit.test( "Do not throw on frame elements from css method (#15098)", function(
|
|||||||
|
|
||||||
} )();
|
} )();
|
||||||
|
|
||||||
|
( function() {
|
||||||
|
var supportsCssVars,
|
||||||
|
div = jQuery( "<div>" ).appendTo( "#qunit-fixture" )[ 0 ];
|
||||||
|
|
||||||
QUnit.test( "css(--customProperty)", function( assert ) {
|
div.style.setProperty( "--prop", "value" );
|
||||||
jQuery( "#qunit-fixture" ).append(
|
supportsCssVars = getComputedStyle( div ).getPropertyValue( "--prop" );
|
||||||
"<style>\n" +
|
|
||||||
" .test__customProperties {\n" +
|
|
||||||
" --prop1:val1;\n" +
|
|
||||||
" --prop2: val2;\n" +
|
|
||||||
" --prop3:val3 ;\n" +
|
|
||||||
" --prop4:\"val4\";\n" +
|
|
||||||
" --prop5:'val5';\n" +
|
|
||||||
" }\n" +
|
|
||||||
"</style>"
|
|
||||||
);
|
|
||||||
|
|
||||||
var div = jQuery( "<div>" ).appendTo( "#qunit-fixture" ),
|
QUnit[ supportsCssVars ? "test" : "skip" ]( "css(--customProperty)", function( assert ) {
|
||||||
$elem = jQuery( "<div>" ).addClass( "test__customProperties" ).appendTo( "#qunit-fixture" ),
|
jQuery( "#qunit-fixture" ).append(
|
||||||
webkit = /\bsafari\b/i.test( navigator.userAgent ) &&
|
"<style>\n" +
|
||||||
!/\firefox\b/i.test( navigator.userAgent ) &&
|
" .test__customProperties {\n" +
|
||||||
!/\edge\b/i.test( navigator.userAgent ),
|
" --prop1:val1;\n" +
|
||||||
oldSafari = webkit && ( /\b9\.\d(\.\d+)* safari/i.test( navigator.userAgent ) ||
|
" --prop2: val2;\n" +
|
||||||
/\b10\.0(\.\d+)* safari/i.test( navigator.userAgent ) ),
|
" --prop3:val3 ;\n" +
|
||||||
expected = 10;
|
" --prop4:\"val4\";\n" +
|
||||||
|
" --prop5:'val5';\n" +
|
||||||
|
" }\n" +
|
||||||
|
"</style>"
|
||||||
|
);
|
||||||
|
|
||||||
if ( webkit ) {
|
var div = jQuery( "<div>" ).appendTo( "#qunit-fixture" ),
|
||||||
expected -= 2;
|
$elem = jQuery( "<div>" ).addClass( "test__customProperties" )
|
||||||
}
|
.appendTo( "#qunit-fixture" ),
|
||||||
if ( oldSafari ) {
|
webkit = /\bsafari\b/i.test( navigator.userAgent ) &&
|
||||||
expected -= 2;
|
!/\firefox\b/i.test( navigator.userAgent ) &&
|
||||||
}
|
!/\edge\b/i.test( navigator.userAgent ),
|
||||||
assert.expect( expected );
|
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;
|
||||||
|
|
||||||
div.css( "--color", "blue" );
|
if ( webkit ) {
|
||||||
assert.equal( div.css( "--color" ), "blue", "Modified CSS custom property using string" );
|
expected -= 2;
|
||||||
|
}
|
||||||
|
if ( oldSafari ) {
|
||||||
|
expected -= 2;
|
||||||
|
}
|
||||||
|
assert.expect( expected );
|
||||||
|
|
||||||
div.css( "--color", "yellow" );
|
div.css( "--color", "blue" );
|
||||||
assert.equal( div.css( "--color" ), "yellow", "Overwrite CSS custom property" );
|
assert.equal( div.css( "--color" ), "blue", "Modified CSS custom property using string" );
|
||||||
|
|
||||||
div.css( { "--color": "red" } );
|
div.css( "--color", "yellow" );
|
||||||
assert.equal( div.css( "--color" ), "red", "Modified CSS custom property using object" );
|
assert.equal( div.css( "--color" ), "yellow", "Overwrite CSS custom property" );
|
||||||
|
|
||||||
div.css( { "--mixedCase": "green" } );
|
div.css( { "--color": "red" } );
|
||||||
assert.equal( div.css( "--mixedCase" ), "green", "Modified CSS custom property with mixed case" );
|
assert.equal( div.css( "--color" ), "red", "Modified CSS custom property using object" );
|
||||||
|
|
||||||
div.css( { "--theme-dark": "purple" } );
|
div.css( { "--mixedCase": "green" } );
|
||||||
assert.equal( div.css( "--theme-dark" ), "purple", "Modified CSS custom property with dashed name" );
|
assert.equal( div.css( "--mixedCase" ), "green",
|
||||||
|
"Modified CSS custom property with mixed case" );
|
||||||
|
|
||||||
assert.equal( $elem.css( "--prop1" ), "val1", "Basic CSS custom property" );
|
div.css( { "--theme-dark": "purple" } );
|
||||||
|
assert.equal( div.css( "--theme-dark" ), "purple",
|
||||||
|
"Modified CSS custom property with dashed name" );
|
||||||
|
|
||||||
// Support: Safari 9.1-10.0 only
|
assert.equal( $elem.css( "--prop1" ), "val1", "Basic CSS custom property" );
|
||||||
// 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" );
|
|
||||||
}
|
|
||||||
|
|
||||||
// Support: Chrome 49-55, Safari 9.1-10.0
|
// Support: Safari 9.1-10.0 only
|
||||||
// Chrome treats single quotes as double ones.
|
// Safari collapses whitespaces & quotes. Ignore it.
|
||||||
// Safari treats double quotes as single ones.
|
if ( !oldSafari ) {
|
||||||
if ( !webkit ) {
|
assert.equal( $elem.css( "--prop2" ), " val2", "Preceding whitespace maintained" );
|
||||||
assert.equal( $elem.css( "--prop4" ), "\"val4\"", "Works with double quotes" );
|
assert.equal( $elem.css( "--prop3" ), "val3 ", "Following whitespace maintained" );
|
||||||
assert.equal( $elem.css( "--prop5" ), "'val5'", "Works with single quotes" );
|
}
|
||||||
}
|
|
||||||
} );
|
// Support: Chrome 49-55, Safari 9.1-10.0
|
||||||
|
// 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" );
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
} )();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user