Tests: Skip CSS custom properties tests in non-supporting browsers

Ref 619bf98d5b
This commit is contained in:
Michał Gołębiowski 2017-03-07 16:13:26 +01:00
parent 619bf98d5b
commit bcec54ee72

View File

@ -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" );
}
} );
} )();
} }