" );
div.show().appendTo( "#qunit-fixture" );
assert.equal( div.css( "display" ), "none",
"A shown-while-detached div can be hidden by the CSS cascade" );
div = jQuery( "
" ).children( "div" );
div.show().appendTo( "#qunit-fixture" );
assert.equal( div.css( "display" ), "none",
"A shown-while-detached div inside a visible div can be hidden by the CSS cascade" );
span = jQuery( "
" );
span.show().appendTo( "#qunit-fixture" );
assert.equal( span.css( "display" ), "none",
"A shown-while-detached span can be hidden by the CSS cascade" );
div = jQuery( "div.hidden" );
div.detach().show();
assert.ok( !div[ 0 ].style.display,
"show() does not update inline style of a cascade-hidden-before-detach div" );
div.appendTo( "#qunit-fixture" );
assert.equal( div.css( "display" ), "none",
"A shown-while-detached cascade-hidden div is hidden after attachment" );
div.remove();
span = jQuery( "
" );
span.appendTo( "#qunit-fixture" ).detach().show().appendTo( "#qunit-fixture" );
assert.equal( span.css( "display" ), "none",
"A shown-while-detached cascade-hidden span is hidden after attachment" );
span.remove();
div = jQuery( document.createElement( "div" ) );
div.show().appendTo( "#qunit-fixture" );
assert.ok( !div[ 0 ].style.display, "A shown-while-detached div has no inline style" );
assert.equal( div.css( "display" ), "block",
"A shown-while-detached div has default display after attachment" );
div.remove();
div = jQuery( "
" );
div.show();
assert.equal( div[ 0 ].style.display, "",
"show() updates inline style of a detached inline-hidden div" );
div.appendTo( "#qunit-fixture" );
assert.equal( div.css( "display" ), "block",
"A shown-while-detached inline-hidden div has default display after attachment" );
div = jQuery( "
" ).children( "div" );
div.show().appendTo( "#qunit-fixture" );
assert.equal( div.css( "display" ), "block",
"A shown-while-detached inline-hidden div inside a visible div has default display " +
"after attachment" );
span = jQuery( "
" );
span.show();
assert.equal( span[ 0 ].style.display, "",
"show() updates inline style of a detached inline-hidden span" );
span.appendTo( "#qunit-fixture" );
assert.equal( span.css( "display" ), "inline",
"A shown-while-detached inline-hidden span has default display after attachment" );
div = jQuery( "
" );
div.show().appendTo( "#qunit-fixture" );
assert.equal( div.css( "display" ), "inline",
"show() does not update inline style of a detached inline-visible div" );
div.remove();
tr = jQuery( "
|
" );
jQuery( "#table" ).append( tr );
tr.detach().hide().show();
assert.ok( !tr[ 0 ].style.display, "Not-hidden detached tr elements have no inline style" );
tr.remove();
span = jQuery( "
" ).hide().show();
assert.ok( !span[ 0 ].style.display, "Not-hidden detached span elements have no inline style" );
span.remove();
} );
// Support: IE 11+
// IE doesn't support Shadow DOM.
QUnit.testUnlessIE(
"show/hide shadow child nodes", function( assert ) {
assert.expect( 28 );
jQuery( "
" ).appendTo( "#qunit-fixture" );
var shadowHost = document.querySelector( "#shadowHost" );
var shadowRoot = shadowHost.attachShadow( { mode: "open" } );
shadowRoot.innerHTML = "" +
"" +
"
" +
"
" +
" " +
"
" +
"
" +
"
" +
"
" +
"
" +
"
" +
" " +
" " +
" | " +
"
" +
" " +
" " +
" " +
" | " +
"
" +
" " +
"
" +
"
";
var test = {
"div": "block",
"p": "block",
"a": "inline",
"code": "inline",
"pre": "block",
"span": "inline",
"table": "table",
"thead": "table-header-group",
"tbody": "table-row-group",
"tr": "table-row",
"th": "table-cell",
"td": "table-cell",
"ul": "block",
"li": "list-item"
};
jQuery.each( test, function( selector, expected ) {
var shadowChild = shadowRoot.querySelector( "#shadow" + selector );
var $shadowChild = jQuery( shadowChild );
assert.strictEqual( $shadowChild.css( "display" ), "none", "is hidden" );
$shadowChild.show();
assert.strictEqual( $shadowChild.css( "display" ), expected, "Show using correct display type for " + selector );
} );
} );
QUnit.test( "hide hidden elements (bug trac-7141)", function( assert ) {
assert.expect( 3 );
var div = jQuery( "
" ).appendTo( "#qunit-fixture" );
assert.equal( div.css( "display" ), "none", "Element is hidden by default" );
div.hide();
assert.ok( !jQuery._data( div, "olddisplay" ), "olddisplay is undefined after hiding an already-hidden element" );
div.show();
assert.equal( div.css( "display" ), "block", "Show a double-hidden element" );
div.remove();
} );
QUnit.test( "show() after hide() should always set display to initial value (trac-14750)", function( assert ) {
assert.expect( 1 );
var div = jQuery( "
" ),
fixture = jQuery( "#qunit-fixture" );
fixture.append( div );
div.css( "display", "inline" ).hide().show().css( "display", "list-item" ).hide().show();
assert.equal( div.css( "display" ), "list-item", "should get last set display value" );
} );
QUnit.test( "show/hide 3.0, default display", function( assert ) {
assert.expect( 36 );
var i,
$elems = jQuery( "
" )
.appendTo( "#qunit-fixture" )
.html( "
" +
"
" +
"
" )
.find( "[data-expected-display]" );
$elems.each( function() {
var $elem = jQuery( this ),
name = this.nodeName,
expected = this.getAttribute( "data-expected-display" ),
sequence = [];
if ( this.className ) {
name += "." + this.className;
}
if ( this.getAttribute( "style" ) ) {
name += "[style='" + this.getAttribute( "style" ) + "']";
}
name += " ";
for ( i = 0; i < 3; i++ ) {
sequence.push( ".show()" );
$elem.show();
assert.equal( $elem.css( "display" ), expected,
name + sequence.join( "" ) + " computed" );
assert.equal( this.style.display, "", name + sequence.join( "" ) + " inline" );
sequence.push( ".hide()" );
$elem.hide();
assert.equal( $elem.css( "display" ), "none",
name + sequence.join( "" ) + " computed" );
assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
}
} );
} );
QUnit.test( "show/hide 3.0, default body display", function( assert ) {
assert.expect( 2 );
var hideBody = supportjQuery( "" ).appendTo( document.head ),
body = jQuery( document.body );
assert.equal( body.css( "display" ), "none", "Correct initial display" );
body.show();
assert.equal( body.css( "display" ), "block", "Correct display after .show()" );
hideBody.remove();
} );
QUnit.test( "show/hide 3.0, cascade display", function( assert ) {
assert.expect( 36 );
var i,
$elems = jQuery( "
" )
.appendTo( "#qunit-fixture" )
.html( "
" )
.children();
$elems.each( function() {
var $elem = jQuery( this ),
name = this.nodeName,
sequence = [];
if ( this.className ) {
name += "." + this.className;
}
if ( this.getAttribute( "style" ) ) {
name += "[style='" + this.getAttribute( "style" ) + "']";
}
name += " ";
for ( i = 0; i < 3; i++ ) {
sequence.push( ".show()" );
$elem.show();
assert.equal( $elem.css( "display" ), this.className,
name + sequence.join( "" ) + " computed" );
assert.equal( this.style.display, "", name + sequence.join( "" ) + " inline" );
sequence.push( ".hide()" );
$elem.hide();
assert.equal( $elem.css( "display" ), "none",
name + sequence.join( "" ) + " computed" );
assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
}
} );
} );
QUnit.test( "show/hide 3.0, inline display", function( assert ) {
assert.expect( 96 );
var i,
$elems = jQuery( "
" )
.appendTo( "#qunit-fixture" )
.html( "
" +
"
" +
"
" +
"
" +
"
" +
"" +
"" +
"" +
"" +
"
" )
.find( "[data-expected-display]" );
$elems.each( function() {
var $elem = jQuery( this ),
name = this.nodeName,
expected = this.getAttribute( "data-expected-display" ),
sequence = [];
if ( this.className ) {
name += "." + this.className;
}
if ( this.getAttribute( "style" ) ) {
name += "[style='" + this.getAttribute( "style" ) + "']";
}
name += " ";
for ( i = 0; i < 3; i++ ) {
sequence.push( ".show()" );
$elem.show();
assert.equal( $elem.css( "display" ), expected,
name + sequence.join( "" ) + " computed" );
assert.equal( this.style.display, expected, name + sequence.join( "" ) + " inline" );
sequence.push( ".hide()" );
$elem.hide();
assert.equal( $elem.css( "display" ), "none",
name + sequence.join( "" ) + " computed" );
assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
}
} );
} );
QUnit.test( "show/hide 3.0, cascade hidden", function( assert ) {
assert.expect( 72 );
var i,
$elems = jQuery( "
" )
.appendTo( "#qunit-fixture" )
.html( "
" +
"
" +
"
" +
"
" +
"
" )
.find( "[data-expected-display]" );
$elems.each( function() {
var $elem = jQuery( this ),
name = this.nodeName,
expected = this.getAttribute( "data-expected-display" ),
sequence = [];
if ( this.className ) {
name += "." + this.className;
}
if ( this.getAttribute( "style" ) ) {
name += "[style='" + this.getAttribute( "style" ) + "']";
}
name += " ";
for ( i = 0; i < 3; i++ ) {
sequence.push( ".hide()" );
$elem.hide();
assert.equal( $elem.css( "display" ), "none",
name + sequence.join( "" ) + " computed" );
assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
sequence.push( ".show()" );
$elem.show();
assert.equal( $elem.css( "display" ), expected,
name + sequence.join( "" ) + " computed" );
assert.equal( this.style.display, expected, name + sequence.join( "" ) + " inline" );
}
} );
} );
QUnit.test( "show/hide 3.0, inline hidden", function( assert ) {
assert.expect( 84 );
var i,
$elems = jQuery( "
" )
.appendTo( "#qunit-fixture" )
.html( "
" +
"
" +
"
" +
"
" +
"
" )
.find( "[data-expected-display]" );
$elems.each( function() {
var $elem = jQuery( this ),
name = this.nodeName,
expected = this.getAttribute( "data-expected-display" ),
sequence = [];
if ( this.className ) {
name += "." + this.className;
}
if ( this.getAttribute( "style" ) ) {
name += "[style='" + this.getAttribute( "style" ) + "']";
}
name += " ";
for ( i = 0; i < 3; i++ ) {
sequence.push( ".hide()" );
$elem.hide();
assert.equal( $elem.css( "display" ), "none",
name + sequence.join( "" ) + " computed" );
assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
sequence.push( ".show()" );
$elem.show();
assert.equal( $elem.css( "display" ), expected,
name + sequence.join( "" ) + " computed" );
assert.equal( this.style.display, "", name + sequence.join( "" ) + " inline" );
}
} );
} );
QUnit[ QUnit.jQuerySelectors ? "test" : "skip" ]( "toggle()", function( assert ) {
assert.expect( 9 );
var div, oldHide,
x = jQuery( "#foo" );
assert.ok( x.is( ":visible" ), "is visible" );
x.toggle();
assert.ok( x.is( ":hidden" ), "is hidden" );
x.toggle();
assert.ok( x.is( ":visible" ), "is visible again" );
x.toggle( true );
assert.ok( x.is( ":visible" ), "is visible" );
x.toggle( false );
assert.ok( x.is( ":hidden" ), "is hidden" );
x.toggle( true );
assert.ok( x.is( ":visible" ), "is visible again" );
div = jQuery( "
" ).appendTo( "#qunit-fixture" );
x = div.find( "div" );
assert.strictEqual( x.toggle().css( "display" ), "none", "is hidden" );
assert.strictEqual( x.toggle().css( "display" ), "block", "is visible" );
// Ensure hide() is called when toggled (trac-12148)
oldHide = jQuery.fn.hide;
jQuery.fn.hide = function() {
assert.ok( true, name + " method called on toggle" );
return oldHide.apply( this, arguments );
};
x.toggle( name === "show" );
jQuery.fn.hide = oldHide;
} );
QUnit[ QUnit.jQuerySelectors ? "test" : "skip" ]( "detached toggle()", function( assert ) {
assert.expect( 6 );
var detached = jQuery( "
" ).find( "*" ).addBack(),
hiddenDetached = jQuery( "
" ).find( "*" ).addBack().css( "display", "none" ),
cascadeHiddenDetached = jQuery( "
" ).find( "*" ).addBack().addClass( "hidden" );
detached.toggle();
detached.appendTo( "#qunit-fixture" );
assert.equal( detached[ 0 ].style.display, "none", "detached element" );
assert.equal( detached[ 1 ].style.display, "none", "element in detached tree" );
hiddenDetached.toggle();
hiddenDetached.appendTo( "#qunit-fixture" );
assert.equal( hiddenDetached[ 0 ].style.display, "", "detached, hidden element" );
assert.equal( hiddenDetached[ 1 ].style.display, "", "hidden element in detached tree" );
cascadeHiddenDetached.toggle();
cascadeHiddenDetached.appendTo( "#qunit-fixture" );
assert.equal( cascadeHiddenDetached[ 0 ].style.display, "none",
"detached, cascade-hidden element" );
assert.equal( cascadeHiddenDetached[ 1 ].style.display, "none",
"cascade-hidden element in detached tree" );
} );
QUnit[ QUnit.jQuerySelectors && !QUnit.isIE ? "test" : "skip" ](
"shadow toggle()", function( assert ) {
assert.expect( 4 );
jQuery( "
" ).appendTo( "#qunit-fixture" );
var shadowHost = document.querySelector( "#shadowHost" );
var shadowRoot = shadowHost.attachShadow( { mode: "open" } );
shadowRoot.innerHTML = "" +
"" +
"
" +
"
";
var shadowChild = shadowRoot.querySelector( "#shadowChild" );
var shadowHiddenChild = shadowRoot.querySelector( "#shadowHiddenChild" );
var $shadowChild = jQuery( shadowChild );
assert.strictEqual( $shadowChild.css( "display" ), "block", "is visible" );
$shadowChild.toggle();
assert.strictEqual( $shadowChild.css( "display" ), "none", "is hidden" );
$shadowChild = jQuery( shadowHiddenChild );
assert.strictEqual( $shadowChild.css( "display" ), "none", "is hidden" );
$shadowChild.toggle();
assert.strictEqual( $shadowChild.css( "display" ), "block", "is visible" );
} );
QUnit.test( "jQuery.css(elem, 'height') doesn't clear radio buttons (bug trac-1095)", function( assert ) {
assert.expect( 4 );
var $checkedtest = jQuery( "#checkedtest" );
jQuery.css( $checkedtest[ 0 ], "height" );
assert.ok( jQuery( "input[type='radio']", $checkedtest ).first().attr( "checked" ), "Check first radio still checked." );
assert.ok( !jQuery( "input[type='radio']", $checkedtest ).last().attr( "checked" ), "Check last radio still NOT checked." );
assert.ok( jQuery( "input[type='checkbox']", $checkedtest ).first().attr( "checked" ), "Check first checkbox still checked." );
assert.ok( !jQuery( "input[type='checkbox']", $checkedtest ).last().attr( "checked" ), "Check last checkbox still NOT checked." );
} );
QUnit.test( "internal ref to elem.runtimeStyle (bug trac-7608)", function( assert ) {
assert.expect( 1 );
var result = true;
try {
jQuery( "#foo" ).css( { "width": "0%" } ).css( "width" );
} catch ( e ) {
result = false;
}
assert.ok( result, "elem.runtimeStyle does not throw exception" );
} );
QUnit.test( "computed margins (trac-3333; gh-2237)", function( assert ) {
assert.expect( 2 );
var $div = jQuery( "#foo" ),
$child = jQuery( "#en" );
$div.css( {
"width": "1px",
"marginRight": 0
} );
assert.equal( $div.css( "marginRight" ), "0px",
"marginRight correctly calculated with a width and display block" );
$div.css( {
position: "absolute",
top: 0,
left: 0,
width: "100px"
} );
$child.css( {
width: "50px",
margin: "auto"
} );
assert.equal( $child.css( "marginLeft" ), "25px", "auto margins are computed to pixels" );
} );
QUnit.test( "box model properties incorrectly returning % instead of px, see trac-10639 and trac-12088", function( assert ) {
assert.expect( 2 );
var container = jQuery( "
" ).width( 400 ).appendTo( "#qunit-fixture" ),
el = jQuery( "
" ).css( { "width": "50%", "marginRight": "50%" } ).appendTo( container ),
el2 = jQuery( "
" ).css( { "width": "50%", "minWidth": "300px", "marginLeft": "25%" } ).appendTo( container );
assert.equal( el.css( "marginRight" ), "200px", "css('marginRight') returning % instead of px, see trac-10639" );
assert.equal( el2.css( "marginLeft" ), "100px", "css('marginLeft') returning incorrect pixel value, see trac-12088" );
} );
QUnit.test( "widows & orphans trac-8936", function( assert ) {
var $p = jQuery( "
" ).appendTo( "#qunit-fixture" );
assert.expect( 2 );
$p.css( {
"widows": 3,
"orphans": 3
} );
assert.equal( $p.css( "widows" ) || jQuery.style( $p[ 0 ], "widows" ), 3, "widows correctly set to 3" );
assert.equal( $p.css( "orphans" ) || jQuery.style( $p[ 0 ], "orphans" ), 3, "orphans correctly set to 3" );
$p.remove();
} );
QUnit.test( "can't get css for disconnected in IE<9, see trac-10254 and trac-8388", function( assert ) {
assert.expect( 2 );
var span, div;
span = jQuery( "" ).css( "background-image", "url(" + baseURL + "1x1.jpg)" );
assert.notEqual( span.css( "background-image" ), null, "can't get background-image in IE<9, see trac-10254" );
div = jQuery( "
" ).css( "top", 10 );
assert.equal( div.css( "top" ), "10px", "can't get top in IE<9, see trac-8388" );
} );
QUnit.test( "Ensure styles are retrieving from parsed html on document fragments", function( assert ) {
assert.expect( 1 );
var $span = jQuery(
jQuery.parseHTML( "
some text" )
);
assert.equal( $span.css( "font-size" ), "14px", "Font-size retrievable on parsed HTML node" );
} );
QUnit.test( "can't get background-position in IE<9, see trac-10796", function( assert ) {
var div = jQuery( "
" ).appendTo( "#qunit-fixture" ),
units = [
"0 0",
"12px 12px",
"13px 12em",
"12em 13px",
"12em center",
"+12em center",
"12.2em center",
"center center"
],
l = units.length,
i = 0;
assert.expect( l );
for ( ; i < l; i++ ) {
div.css( "background-position", units [ i ] );
assert.ok( div.css( "background-position" ), "can't get background-position in IE<9, see trac-10796" );
}
} );
if ( includesModule( "offset" ) ) {
QUnit.test( "percentage properties for left and top should be transformed to pixels, see trac-9505", function( assert ) {
assert.expect( 2 );
var parent = jQuery( "
" ).appendTo( "#qunit-fixture" ),
div = jQuery( "
" ).appendTo( parent );
assert.equal( div.css( "top" ), "100px", "position properties not transformed to pixels, see trac-9505" );
assert.equal( div.css( "left" ), "100px", "position properties not transformed to pixels, see trac-9505" );
} );
}
QUnit.test( "Do not append px (trac-9548, trac-12990, gh-2792)", function( assert ) {
assert.expect( 4 );
var $div = jQuery( "
" ).appendTo( "#qunit-fixture" );
$div.css( "fill-opacity", 1 );
assert.equal( $div.css( "fill-opacity" ), 1, "Do not append px to 'fill-opacity'" );
$div.css( "font-size", "27px" );
$div.css( "line-height", 2 );
assert.equal( $div.css( "line-height" ), "54px", "Do not append px to 'line-height'" );
$div.css( "column-count", 1 );
if ( $div.css( "column-count" ) !== undefined ) {
assert.equal( $div.css( "column-count" ), 1, "Do not append px to 'column-count'" );
} else {
assert.ok( true, "No support for column-count CSS property" );
}
$div.css( "animation-iteration-count", 2 );
if ( $div.css( "animation-iteration-count" ) !== undefined ) {
// if $div.css( "animation-iteration-count" ) return "1",
// it actually return the default value of animation-iteration-count
assert.equal( $div.css( "animation-iteration-count" ), 2, "Do not append px to 'animation-iteration-count'" );
} else {
assert.ok( true, "No support for animation-iteration-count CSS property" );
}
} );
// IE doesn't support the standard version of CSS Grid.
QUnit.testUnlessIE( "Do not append px to CSS Grid-related properties (gh-4007)",
function( assert ) {
assert.expect( 12 );
var prop, value, subProp, subValue, $div,
gridProps = {
"grid-area": {
"grid-row-start": "2",
"grid-row-end": "auto",
"grid-column-start": "auto",
"grid-column-end": "auto"
},
"grid-column": {
"grid-column-start": "2",
"grid-column-end": "auto"
},
"grid-column-end": true,
"grid-column-start": true,
"grid-row": {
"grid-row-start": "2",
"grid-row-end": "auto"
},
"grid-row-end": true,
"grid-row-start": true
};
for ( prop in gridProps ) {
$div = jQuery( "
" ).appendTo( "#qunit-fixture" );
$div.css( prop, 2 );
value = gridProps[ prop ];
if ( typeof value === "object" ) {
for ( subProp in value ) {
subValue = value[ subProp ];
assert.equal( $div.css( subProp ), subValue,
"Do not append px to '" + prop + "' (retrieved " + subProp + ")" );
}
} else {
assert.equal( $div.css( prop ), "2", "Do not append px to '" + prop + "'" );
}
$div.remove();
}
} );
QUnit.test( "Do not append px to most properties not accepting integer values", function( assert ) {
assert.expect( 3 );
var $div = jQuery( "
" ).appendTo( "#qunit-fixture" );
$div.css( "font-size", "27px" );
$div.css( "font-size", 2 );
assert.equal( $div.css( "font-size" ), "27px", "Do not append px to 'font-size'" );
$div.css( "fontSize", 2 );
assert.equal( $div.css( "fontSize" ), "27px", "Do not append px to 'fontSize'" );
$div.css( "letter-spacing", "2px" );
$div.css( "letter-spacing", 3 );
assert.equal( $div.css( "letter-spacing" ), "2px", "Do not append px to 'letter-spacing'" );
} );
QUnit.test( "Append px to whitelisted properties", function( assert ) {
var prop,
$div = jQuery( "
" ).appendTo( "#qunit-fixture" ),
whitelist = {
margin: "marginTop",
marginTop: undefined,
marginRight: undefined,
marginBottom: undefined,
marginLeft: undefined,
padding: "paddingTop",
paddingTop: undefined,
paddingRight: undefined,
paddingBottom: undefined,
paddingLeft: undefined,
top: undefined,
right: undefined,
bottom: undefined,
left: undefined,
width: undefined,
height: undefined,
minWidth: undefined,
minHeight: undefined,
maxWidth: undefined,
maxHeight: undefined,
border: "borderTopWidth",
borderWidth: "borderTopWidth",
borderTop: "borderTopWidth",
borderTopWidth: undefined,
borderRight: "borderRightWidth",
borderRightWidth: undefined,
borderBottom: "borderBottomWidth",
borderBottomWidth: undefined,
borderLeft: "borderLeftWidth",
borderLeftWidth: undefined
};
assert.expect( ( Object.keys( whitelist ).length ) * 2 );
for ( prop in whitelist ) {
var propToCheck = whitelist[ prop ] || prop,
kebabProp = prop.replace( /[A-Z]/g, function( match ) {
return "-" + match.toLowerCase();
} ),
kebabPropToCheck = propToCheck.replace( /[A-Z]/g, function( match ) {
return "-" + match.toLowerCase();
} );
$div.css( prop, 3 )
.css( "position", "absolute" )
.css( "border-style", "solid" );
assert.equal( $div.css( propToCheck ), "3px", "Append px to '" + prop + "'" );
$div.css( kebabProp, 3 )
.css( "position", "absolute" )
.css( "border-style", "solid" );
assert.equal( $div.css( kebabPropToCheck ), "3px", "Append px to '" + kebabProp + "'" );
}
} );
QUnit.test( "css('width') and css('height') should respect box-sizing, see trac-11004", function( assert ) {
assert.expect( 4 );
var el_dis = jQuery( "
test
" ),
el = el_dis.clone().appendTo( "#qunit-fixture" );
assert.equal( el.css( "width" ), el.css( "width", el.css( "width" ) ).css( "width" ), "css('width') is not respecting box-sizing, see trac-11004" );
assert.equal( el_dis.css( "width" ), el_dis.css( "width", el_dis.css( "width" ) ).css( "width" ), "css('width') is not respecting box-sizing for disconnected element, see trac-11004" );
assert.equal( el.css( "height" ), el.css( "height", el.css( "height" ) ).css( "height" ), "css('height') is not respecting box-sizing, see trac-11004" );
assert.equal( el_dis.css( "height" ), el_dis.css( "height", el_dis.css( "height" ) ).css( "height" ), "css('height') is not respecting box-sizing for disconnected element, see trac-11004" );
} );
QUnit.test( "table rows width/height should be unaffected by inline styles", function( assert ) {
assert.expect( 2 );
var table = jQuery(
"
\n" +
" \n" +
" \n" +
" \n" +
" \n" +
" |
\n" +
"
"
);
var tr = table.find( "tr" );
table.appendTo( "#qunit-fixture" );
assert.ok( parseInt( tr.css( "width" ) ) > 10, "tr width unaffected by inline style" );
assert.ok( parseInt( tr.css( "height" ) ) > 10, "tr height unaffected by inline style" );
} );
testIframe(
"css('width') should work correctly before document ready (trac-14084)",
"css/cssWidthBeforeDocReady.html",
function( assert, jQuery, window, document, cssWidthBeforeDocReady ) {
assert.expect( 1 );
assert.strictEqual( cssWidthBeforeDocReady, "100px", "elem.css('width') works correctly before document ready" );
}
);
testIframe(
"css('width') should work correctly with browser zooming",
"css/cssWidthBrowserZoom.html",
function( assert, jQuery, window, document, widthBeforeSet, widthAfterSet ) {
assert.expect( 2 );
assert.strictEqual( widthBeforeSet, "100px", "elem.css('width') works correctly with browser zoom" );
assert.strictEqual( widthAfterSet, "100px", "elem.css('width', val) works correctly with browser zoom" );
}
);
QUnit.testUnlessIE( "css('width') and css('height') should return fractional values for nodes in the document", function( assert ) {
assert.expect( 2 );
var el = jQuery( "
" ).appendTo( "#qunit-fixture" );
jQuery( "" ).appendTo( "#qunit-fixture" );
assert.equal( Number( el.css( "width" ).replace( /px$/, "" ) ).toFixed( 1 ), "33.3",
"css('width') should return fractional values" );
assert.equal( Number( el.css( "height" ).replace( /px$/, "" ) ).toFixed( 1 ), "88.8",
"css('height') should return fractional values" );
} );
QUnit.testUnlessIE( "css('width') and css('height') should return fractional values for disconnected nodes", function( assert ) {
assert.expect( 2 );
var el = jQuery( "
" );
assert.equal( Number( el.css( "width" ).replace( /px$/, "" ) ).toFixed( 1 ), "33.3",
"css('width') should return fractional values" );
assert.equal( Number( el.css( "height" ).replace( /px$/, "" ) ).toFixed( 1 ), "88.8",
"css('height') should return fractional values" );
} );
QUnit.test( "certain css values of 'normal' should be convertible to a number, see trac-8627", function( assert ) {
assert.expect( 3 );
var el = jQuery( "
test
" ).appendTo( "#qunit-fixture" );
assert.ok( !isNaN( parseFloat( el.css( "letterSpacing" ) ) ), "css('letterSpacing') not convertible to number, see trac-8627" );
assert.ok( !isNaN( parseFloat( el.css( "fontWeight" ) ) ), "css('fontWeight') not convertible to number, see trac-8627" );
assert.equal( typeof el.css( "fontWeight" ), "string", ".css() returns a string" );
} );
QUnit.test( "cssHooks - expand", function( assert ) {
assert.expect( 15 );
var result,
properties = {
margin: [ "marginTop", "marginRight", "marginBottom", "marginLeft" ],
borderWidth: [ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ],
padding: [ "paddingTop", "paddingRight", "paddingBottom", "paddingLeft" ]
};
jQuery.each( properties, function( property, keys ) {
var hook = jQuery.cssHooks[ property ],
expected = {};
jQuery.each( keys, function( _, key ) {
expected[ key ] = 10;
} );
result = hook.expand( 10 );
assert.deepEqual( result, expected, property + " expands properly with a number" );
jQuery.each( keys, function( _, key ) {
expected[ key ] = "10px";
} );
result = hook.expand( "10px" );
assert.deepEqual( result, expected, property + " expands properly with '10px'" );
expected[ keys[ 1 ] ] = expected[ keys[ 3 ] ] = "20px";
result = hook.expand( "10px 20px" );
assert.deepEqual( result, expected, property + " expands properly with '10px 20px'" );
expected[ keys[ 2 ] ] = "30px";
result = hook.expand( "10px 20px 30px" );
assert.deepEqual( result, expected, property + " expands properly with '10px 20px 30px'" );
expected[ keys[ 3 ] ] = "40px";
result = hook.expand( "10px 20px 30px 40px" );
assert.deepEqual( result, expected, property + " expands properly with '10px 20px 30px 40px'" );
} );
} );
QUnit.test( "css opacity consistency across browsers (trac-12685)", function( assert ) {
assert.expect( 3 );
var el,
fixture = jQuery( "#qunit-fixture" );
// Append style element
jQuery( "" ).appendTo( fixture );
el = jQuery( "
" ).appendTo( fixture );
assert.equal( Math.round( el.css( "opacity" ) * 100 ), 10, "opacity from style sheet" );
el.css( "opacity", 0.3 );
assert.equal( Math.round( el.css( "opacity" ) * 100 ), 30, "override opacity" );
el.css( "opacity", "" );
assert.equal( Math.round( el.css( "opacity" ) * 100 ), 10, "remove opacity override" );
} );
QUnit[ QUnit.jQuerySelectors ? "test" : "skip" ]( ":visible/:hidden selectors", function( assert ) {
assert.expect( 18 );
var $div, $table, $a, $br;
assert.ok( jQuery( "#nothiddendiv" ).is( ":visible" ), "Modifying CSS display: Assert element is visible" );
jQuery( "#nothiddendiv" ).css( { display: "none" } );
assert.ok( !jQuery( "#nothiddendiv" ).is( ":visible" ), "Modified CSS display: Assert element is hidden" );
jQuery( "#nothiddendiv" ).css( { "display": "block" } );
assert.ok( jQuery( "#nothiddendiv" ).is( ":visible" ), "Modified CSS display: Assert element is visible" );
assert.ok( !jQuery( window ).is( ":visible" ), "Calling is(':visible') on window does not throw an exception (trac-10267)." );
assert.ok( !jQuery( document ).is( ":visible" ), "Calling is(':visible') on document does not throw an exception (trac-10267)." );
assert.ok( jQuery( "#nothiddendiv" ).is( ":visible" ), "Modifying CSS display: Assert element is visible" );
jQuery( "#nothiddendiv" ).css( "display", "none" );
assert.ok( !jQuery( "#nothiddendiv" ).is( ":visible" ), "Modified CSS display: Assert element is hidden" );
jQuery( "#nothiddendiv" ).css( "display", "block" );
assert.ok( jQuery( "#nothiddendiv" ).is( ":visible" ), "Modified CSS display: Assert element is visible" );
assert.ok( jQuery( "#siblingspan" ).is( ":visible" ), "Span with no content is visible" );
$div = jQuery( "
" ).appendTo( "#qunit-fixture" );
assert.equal( $div.find( ":visible" ).length, 1, "Span with no content is visible" );
$div.css( { width: 0, height: 0, overflow: "hidden" } );
assert.ok( $div.is( ":visible" ), "Div with width and height of 0 is still visible (gh-2227)" );
$br = jQuery( "
" ).appendTo( "#qunit-fixture" );
assert.ok( $br.is( ":visible" ), "br element is visible" );
$table = jQuery( "#table" );
$table.html( "
cell | cell |
" );
assert.equal( jQuery( "#table td:visible" ).length, 1, "hidden cell is not perceived as visible (trac-4512). Works on table elements" );
$table.css( "display", "none" ).html( "
cell | cell |
" );
assert.equal( jQuery( "#table td:visible" ).length, 0, "hidden cell children not perceived as visible (trac-4512)" );
if ( QUnit.jQuerySelectorsPos ) {
assert.t( "Is Visible", "#qunit-fixture div:visible:lt(2)", [ "foo", "nothiddendiv" ] );
} else {
assert.ok( "skip", "Positional selectors are not supported" );
}
assert.t( "Is Not Hidden", "#qunit-fixture:hidden", [] );
assert.t( "Is Hidden", "#form input:hidden", [ "hidden1", "hidden2" ] );
$a = jQuery( "
Header
" ).appendTo( "#qunit-fixture" );
assert.ok( $a.is( ":visible" ), "Anchor tag with flow content is visible (gh-2227)" );
} );
QUnit.test( "Keep the last style if the new one isn't recognized by the browser (trac-14836)", function( assert ) {
assert.expect( 1 );
var el = jQuery( "
" ).css( "position", "absolute" ).css( "position", "fake value" );
assert.equal( el.css( "position" ), "absolute", "The old style is kept when setting an unrecognized value" );
} );
QUnit.test(
"Keep the last style if the new one is a non-empty whitespace (gh-3204)",
function( assert ) {
assert.expect( 1 );
var el = jQuery( "
" ).css( "position", "absolute" ).css( "position", " " );
assert.equal( el.css( "position" ), "absolute", "The old style is kept when setting to a space" );
} );
QUnit.test( "Reset the style if set to an empty string", function( assert ) {
assert.expect( 1 );
var el = jQuery( "
" ).css( "position", "absolute" ).css( "position", "" );
// Some browsers return an empty string; others "static". Both those cases mean the style
// was reset successfully so accept them both.
assert.equal( el.css( "position" ) || "static", "static",
"The style can be reset by setting to an empty string" );
} );
QUnit.test(
"Clearing a Cloned Element's Style Shouldn't Clear the Original Element's Style (trac-8908)",
function( assert ) {
assert.expect( 24 );
var done = assert.async();
var styles = [ {
name: "backgroundAttachment",
value: [ "fixed" ]
}, {
name: "backgroundColor",
value: [ "rgb(255, 0, 0)", "rgb(255,0,0)", "#ff0000" ]
}, {
// Firefox returns auto's value
name: "backgroundImage",
value: [ "url('test.png')", "url(" + baseURL + "test.png)", "url(\"" + baseURL + "test.png\")" ]
}, {
name: "backgroundPosition",
value: [ "5% 5%" ]
}, {
// Firefox returns no-repeat
name: "backgroundRepeat",
value: [ "repeat-y" ]
}, {
name: "backgroundClip",
value: [ "padding-box" ]
}, {
name: "backgroundOrigin",
value: [ "content-box" ]
}, {
name: "backgroundSize",
value: [ "80px 60px" ]
} ];
jQuery.each( styles, function( index, style ) {
var $clone, $clonedChildren,
$source = jQuery( "#firstp" ),
source = $source[ 0 ],
$children = $source.children();
if ( source.style[ style.name ] === undefined ) {
assert.ok( true, style.name + ": style isn't supported and therefore not an issue" );
assert.ok( true );
return true;
}
$source.css( style.name, style.value[ 0 ] );
$children.css( style.name, style.value[ 0 ] );
$clone = $source.clone();
$clonedChildren = $clone.children();
$clone.css( style.name, "" );
$clonedChildren.css( style.name, "" );
window.setTimeout( function() {
assert.notEqual( $clone.css( style.name ), style.value[ 0 ], "Cloned css was changed" );
assert.ok( jQuery.inArray( $source.css( style.name ) !== -1, style.value ),
"Clearing clone.css() doesn't affect source.css(): " + style.name +
"; result: " + $source.css( style.name ) +
"; expected: " + style.value.join( "," ) );
assert.ok( jQuery.inArray( $children.css( style.name ) !== -1, style.value ),
"Clearing clonedChildren.css() doesn't affect children.css(): " + style.name +
"; result: " + $children.css( style.name ) +
"; expected: " + style.value.join( "," ) );
}, 100 );
} );
window.setTimeout( done, 1000 );
}
);
QUnit.test( "Don't append px to CSS \"order\" value (trac-14049)", function( assert ) {
assert.expect( 1 );
var $elem = jQuery( "
" );
$elem.css( "order", 2 );
assert.equal( $elem.css( "order" ), "2", "2 on order" );
} );
QUnit.test( "Do not throw on frame elements from css method (trac-15098)", function( assert ) {
assert.expect( 1 );
var frameWin, frameDoc,
frameElement = document.createElement( "iframe" ),
frameWrapDiv = document.createElement( "div" );
frameWrapDiv.appendChild( frameElement );
document.body.appendChild( frameWrapDiv );
frameWin = frameElement.contentWindow;
frameDoc = frameWin.document;
frameDoc.open();
frameDoc.write( "
Hi
" );
frameDoc.close();
frameWrapDiv.style.display = "none";
try {
jQuery( frameDoc.body ).css( "direction" );
assert.ok( true, "It didn't throw" );
} catch ( _ ) {
assert.ok( false, "It did throw" );
}
} );
( function() {
var vendorPrefixes = [ "Webkit", "Moz", "ms" ];
QUnit.test( "Don't default to a cached previously used wrong prefixed name (gh-2015)", function( assert ) {
// Note: this test needs a property we know is only supported in a prefixed version
// by at least one of our main supported browsers. This may get out of date so let's
// use -(webkit|moz)-appearance as well as those two are not on a standards track.
var appearanceName, transformName, elem, elemStyle,
transformVal = "translate(5px, 2px)",
emptyStyle = document.createElement( "div" ).style;
if ( "appearance" in emptyStyle ) {
appearanceName = "appearance";
} else {
jQuery.each( vendorPrefixes, function( index, prefix ) {
var prefixedProp = prefix + "Appearance";
if ( prefixedProp in emptyStyle ) {
appearanceName = prefixedProp;
}
} );
}
if ( "transform" in emptyStyle ) {
transformName = "transform";
} else {
jQuery.each( vendorPrefixes, function( index, prefix ) {
var prefixedProp = prefix + "Transform";
if ( prefixedProp in emptyStyle ) {
transformName = prefixedProp;
}
} );
}
assert.expect( !!appearanceName + !!transformName + 1 );
elem = jQuery( "
" )
.css( {
msAppearance: "none",
appearance: "none",
// Only the ms prefix is used to make sure we haven't e.g. set
// webkitTransform ourselves in the test.
msTransform: transformVal,
transform: transformVal
} );
elemStyle = elem[ 0 ].style;
if ( appearanceName ) {
assert.equal( elemStyle[ appearanceName ], "none", "setting properly-prefixed appearance" );
}
if ( transformName ) {
assert.equal( elemStyle[ transformName ], transformVal, "setting properly-prefixed transform" );
}
assert.equal( elemStyle[ "undefined" ], undefined, "Nothing writes to node.style.undefined" );
} );
QUnit.test( "Don't detect fake set properties on a node when caching the prefixed version", function( assert ) {
assert.expect( 1 );
var elem = jQuery( "
" ),
style = elem[ 0 ].style;
style.MozFakeProperty = "old value";
elem.css( "fakeProperty", "new value" );
assert.equal( style.MozFakeProperty, "old value", "Fake prefixed property is not cached" );
} );
} )();
// IE doesn't support CSS variables.
QUnit.testUnlessIE( "css(--customProperty)", function( assert ) {
jQuery( "#qunit-fixture" ).append(
""
);
var div = jQuery( "
" ).appendTo( "#qunit-fixture" ),
$elem = jQuery( "
" ).addClass( "test__customProperties" )
.appendTo( "#qunit-fixture" ),
webkitOrBlink = /\webkit\b/i.test( navigator.userAgent ),
expected = 20;
if ( webkitOrBlink ) {
expected -= 2;
}
assert.expect( expected );
div.css( "--color", "blue" );
assert.equal( div.css( "--color" ), "blue", "Modified CSS custom property using string" );
div.css( "--color", "yellow" );
assert.equal( div.css( "--color" ), "yellow", "Overwrite CSS custom property" );
div.css( { "--color": "red" } );
assert.equal( div.css( "--color" ), "red", "Modified CSS custom property using object" );
div.css( { "--mixedCase": "green" } );
div.css( { "--mixed-case": "red" } );
assert.equal( div.css( "--mixedCase" ), "green",
"Modified CSS custom property with mixed case" );
div.css( { "--theme-dark": "purple" } );
div.css( { "--themeDark": "red" } );
assert.equal( div.css( "--theme-dark" ), "purple",
"Modified CSS custom property with dashed name" );
assert.equal( $elem.css( "--prop1" ), "val1", "Basic CSS custom property" );
assert.equal( $elem.css( "--prop2" ), "val2", "Preceding whitespace trimmed" );
assert.equal( $elem.css( "--prop3" ), "val3", "Multiple preceding whitespace trimmed" );
assert.equal( $elem.css( "--prop4" ), "val4", "Following whitespace trimmed" );
assert.equal( $elem.css( "--prop5" ), "val5", "Multiple Following whitespace trimmed" );
assert.equal( $elem.css( "--prop6" ), "val6", "Preceding and Following whitespace trimmed" );
assert.equal( $elem.css( "--prop7" ), "val7", "Multiple preceding and following whitespace trimmed" );
// Support: Chrome <=49 - 73+, Safari <=9.1 - 12.1+
// Chrome treats single quotes as double ones.
// Safari treats double quotes as single ones.
if ( !webkitOrBlink ) {
assert.equal( $elem.css( "--prop8" ), "\"val8\"", "Works with double quotes" );
assert.equal( $elem.css( "--prop9" ), "'val9'", "Works with single quotes" );
}
assert.equal( $elem.css( "--prop10" ), "val10", "Multiple preceding and following escaped unicode whitespace trimmed" );
assert.equal( $elem.css( "--prop11" ), "val11", "Multiple preceding and following unicode whitespace trimmed" );
assert.equal( $elem.css( "--prop12" ), "\u000Bval12\u000B", "Multiple preceding and following non-CSS whitespace reserved" );
assert.equal( $elem.css( "--space" ), undefined );
assert.equal( $elem.css( "--empty" ), undefined );
assert.equal( $elem.css( "--nonexistent" ), undefined );
} );
// IE doesn't support CSS variables.
QUnit.testUnlessIE( "Don't append px to CSS vars", function( assert ) {
assert.expect( 3 );
var $div = jQuery( "
" ).appendTo( "#qunit-fixture" );
$div
.css( "--a", 3 )
.css( "--line-height", 4 )
.css( "--lineHeight", 5 );
assert.equal( $div.css( "--a" ), "3", "--a: 3" );
assert.equal( $div.css( "--line-height" ), "4", "--line-height: 4" );
assert.equal( $div.css( "--lineHeight" ), "5", "--lineHeight: 5" );
} );
// Support: IE 11+
// This test requires Grid to be *not supported* to work.
if ( QUnit.isIE ) {
// Make sure explicitly provided IE vendor prefix (`-ms-`) is not converted
// to a non-working `Ms` prefix in JavaScript.
QUnit.test( "IE vendor prefixes are not mangled", function( assert ) {
assert.expect( 1 );
var div = jQuery( "
" ).appendTo( "#qunit-fixture" );
div.css( "-ms-grid-row", "1" );
assert.strictEqual( div.css( "-ms-grid-row" ), "1", "IE vendor prefixing" );
} );
}
}