" ).appendTo(document.body).css({
"position": "absolute",
"top": 0,
"left": 10
});
jQuery.cssProps.top = "left";
equal( div.css("top"), "10px", "the fixed property is used when accessing the computed style");
div.css("top", "100px");
equal( div[0].style.left, "100px", "the fixed property is used when setting the style");
// cleanup jQuery.cssProps
jQuery.cssProps.top = undefined;
});
test("widows & orphans #8936", function () {
var $p = jQuery("
").appendTo("#qunit-fixture");
if ( "widows" in $p[0].style ) {
expect(4);
$p.css({
"widows": 0,
"orphans": 0
});
equal( $p.css("widows") || jQuery.style( $p[0], "widows" ), 0, "widows correctly start with value 0");
equal( $p.css("orphans") || jQuery.style( $p[0], "orphans" ), 0, "orphans correctly start with value 0");
$p.css({
"widows": 3,
"orphans": 3
});
equal( $p.css("widows") || jQuery.style( $p[0], "widows" ), 3, "widows correctly set to 3");
equal( $p.css("orphans") || jQuery.style( $p[0], "orphans" ), 3, "orphans correctly set to 3");
} else {
expect(1);
ok( true, "jQuery does not attempt to test for style props that definitely don't exist in older versions of IE");
}
$p.remove();
});
test("can't get css for disconnected in IE<9, see #10254 and #8388", function() {
expect( 2 );
var span, div;
span = jQuery( "" ).css( "background-image", "url(data/1x1.jpg)" );
notEqual( span.css( "background-image" ), null, "can't get background-image in IE<9, see #10254" );
div = jQuery( "
" ).css( "top", 10 );
equal( div.css( "top" ), "10px", "can't get top in IE<9, see #8388" );
});
test("can't get background-position in IE<9, see #10796", function() {
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;
expect( l );
for( ; i < l; i++ ) {
div.css( "background-position", units [ i ] );
ok( div.css( "background-position" ), "can't get background-position in IE<9, see #10796" );
}
});
test("percentage properties for bottom and right in IE<9 should not be incorrectly transformed to pixels, see #11311", function() {
expect( 1 );
var div = jQuery("
").appendTo( "#qunit-fixture" );
ok( window.getComputedStyle || div.css( "bottom" ) === "50%", "position properties get incorrectly transformed in IE<8, see #11311" );
});
if ( jQuery.fn.offset ) {
test("percentage properties for left and top should be transformed to pixels, see #9505", function() {
expect( 2 );
var parent = jQuery("
").appendTo( parent );
equal( div.css("top"), "100px", "position properties not transformed to pixels, see #9505" );
equal( div.css("left"), "100px", "position properties not transformed to pixels, see #9505" );
});
}
test("Do not append px (#9548, #12990)", function() {
expect( 2 );
var $div = jQuery("
").appendTo("#qunit-fixture");
$div.css( "fill-opacity", 1 );
equal( $div.css("fill-opacity"), 1, "Do not append px to 'fill-opacity'" );
$div.css( "column-count", 1 );
if ( $div.css("column-count") ) {
equal( $div.css("column-count"), 1, "Do not append px to 'column-count'" );
} else {
ok( true, "No support for column-count CSS property" );
}
});
test("css('width') and css('height') should respect box-sizing, see #11004", function() {
expect( 4 );
// Support: Firefox, Android 2.3 (Prefixed box-sizing versions).
var el_dis = jQuery("
test
"),
el = el_dis.clone().appendTo("#qunit-fixture");
equal( el.css("width"), el.css("width", el.css("width")).css("width"), "css('width') is not respecting box-sizing, see #11004");
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 #11004");
equal( el.css("height"), el.css("height", el.css("height")).css("height"), "css('height') is not respecting box-sizing, see #11004");
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 #11004");
});
testIframeWithCallback( "css('width') should work correctly before document ready (#14084)",
"css/cssWidthBeforeDocReady.html",
function( cssWidthBeforeDocReady ) {
expect( 1 );
strictEqual( cssWidthBeforeDocReady, "100px", "elem.css('width') works correctly before document ready" );
}
);
test("certain css values of 'normal' should be convertable to a number, see #8627", function() {
expect ( 2 );
var el = jQuery("
test
").appendTo("#qunit-fixture");
ok( jQuery.isNumeric( parseFloat( el.css("letterSpacing") ) ), "css('letterSpacing') not convertable to number, see #8627" );
ok( jQuery.isNumeric( parseFloat( el.css("fontWeight") ) ), "css('fontWeight') not convertable to number, see #8627" );
});
// only run this test in IE9
if ( document.documentMode === 9 ) {
test( ".css('filter') returns a string in IE9, see #12537", 1, function() {
equal( jQuery("
").css("filter"), "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#ECECEC)", "IE9 returns the correct value from css('filter')." );
});
}
test( "cssHooks - expand", function() {
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 );
deepEqual( result, expected, property + " expands properly with a number" );
jQuery.each( keys, function( _, key ) {
expected[ key ] = "10px";
});
result = hook.expand( "10px" );
deepEqual( result, expected, property + " expands properly with '10px'" );
expected[ keys[1] ] = expected[ keys[3] ] = "20px";
result = hook.expand( "10px 20px" );
deepEqual( result, expected, property + " expands properly with '10px 20px'" );
expected[ keys[2] ] = "30px";
result = hook.expand( "10px 20px 30px" );
deepEqual( result, expected, property + " expands properly with '10px 20px 30px'" );
expected[ keys[3] ] = "40px";
result = hook.expand( "10px 20px 30px 40px" );
deepEqual( result, expected, property + " expands properly with '10px 20px 30px 40px'" );
});
});
test( "css opacity consistency across browsers (#12685)", function() {
expect( 4 );
var el,
fixture = jQuery("#qunit-fixture");
// Append style element
jQuery("").appendTo( fixture );
el = jQuery("
").appendTo(fixture);
equal( Math.round( el.css("opacity") * 100 ), 10, "opacity from style sheet (filter:alpha with spaces)" );
el.removeClass("opacityWithSpaces_t12685").addClass("opacityNoSpaces_t12685");
equal( Math.round( el.css("opacity") * 100 ), 20, "opacity from style sheet (filter:alpha without spaces)" );
el.css( "opacity", 0.3 );
equal( Math.round( el.css("opacity") * 100 ), 30, "override opacity" );
el.css( "opacity", "" );
equal( Math.round( el.css("opacity") * 100 ), 20, "remove opacity override" );
});
test( ":visible/:hidden selectors", function() {
expect( 13 );
ok( jQuery("#nothiddendiv").is(":visible"), "Modifying CSS display: Assert element is visible" );
jQuery("#nothiddendiv").css({ display: "none" });
ok( !jQuery("#nothiddendiv").is(":visible"), "Modified CSS display: Assert element is hidden" );
jQuery("#nothiddendiv").css({"display": "block"});
ok( jQuery("#nothiddendiv").is(":visible"), "Modified CSS display: Assert element is visible");
ok( jQuery(window).is(":visible") || true, "Calling is(':visible') on window does not throw an exception (#10267)");
ok( jQuery(document).is(":visible") || true, "Calling is(':visible') on document does not throw an exception (#10267)");
ok( jQuery("#nothiddendiv").is(":visible"), "Modifying CSS display: Assert element is visible");
jQuery("#nothiddendiv").css("display", "none");
ok( !jQuery("#nothiddendiv").is(":visible"), "Modified CSS display: Assert element is hidden");
jQuery("#nothiddendiv").css("display", "block");
ok( jQuery("#nothiddendiv").is(":visible"), "Modified CSS display: Assert element is visible");
// ok( !jQuery("#siblingspan").is(":visible"), "Span with no content not visible (#13132)" );
// var $newDiv = jQuery("
").appendTo("#qunit-fixture");
// equal( $newDiv.find(":visible").length, 0, "Span with no content not visible (#13132)" );
// var $br = jQuery("
").appendTo("#qunit-fixture");
// ok( !$br.is(":visible"), "br element not visible (#10406)");
var $table = jQuery("#table");
$table.html("
cell | cell |
");
equal(jQuery("#table td:visible").length, 1, "hidden cell is not perceived as visible (#4512). Works on table elements");
$table.css("display", "none").html("
cell | cell |
");
equal(jQuery("#table td:visible").length, 0, "hidden cell children not perceived as visible (#4512)");
t( "Is Visible", "#qunit-fixture div:visible:lt(2)", ["foo", "nothiddendiv"] );
t( "Is Not Hidden", "#qunit-fixture:hidden", [] );
t( "Is Hidden", "#form input:hidden", ["hidden1","hidden2"] );
});
asyncTest( "Clearing a Cloned Element's Style Shouldn't Clear the Original Element's Style (#8908)", 24, function() {
var baseUrl = document.location.href.replace( /([^\/]*)$/, "" ),
styles = [{
name: "backgroundAttachment",
value: ["fixed"],
expected: [ "scroll" ]
},{
name: "backgroundColor",
value: [ "rgb(255, 0, 0)", "rgb(255,0,0)", "#ff0000" ],
expected: ["transparent"]
}, {
// Firefox returns auto's value
name: "backgroundImage",
value: [ "url('test.png')", "url(" + baseUrl + "test.png)", "url(\"" + baseUrl + "test.png\")" ],
expected: [ "none", "url(\"http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif\")" ]
}, {
name: "backgroundPosition",
value: ["5% 5%"],
expected: [ "0% 0%", "-1000px 0px", "-1000px 0%" ]
}, {
// Firefox returns no-repeat
name: "backgroundRepeat",
value: ["repeat-y"],
expected: [ "repeat", "no-repeat" ]
}, {
name: "backgroundClip",
value: ["padding-box"],
expected: ["border-box"]
}, {
name: "backgroundOrigin",
value: ["content-box"],
expected: ["padding-box"]
}, {
name: "backgroundSize",
value: ["80px 60px"],
expected: [ "auto auto" ]
}];
jQuery.each(styles, function( index, style ) {
var $clone, $clonedChildren,
$source = jQuery( "#firstp" ),
source = $source[ 0 ],
$children = $source.children();
style.expected = style.expected.concat( [ "", "auto" ] );
if ( source.style[ style.name ] === undefined ) {
ok( true, style.name + ": style isn't supported and therefore not an issue" );
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() {
notEqual( $clone.css( style.name ), style.value[ 0 ], "Cloned css was changed" );
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( "," ) );
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( start, 1000 );
});
asyncTest( "Make sure initialized display value for disconnected nodes is correct (#13310)", 4, function() {
var display = jQuery("#display").css("display"),
div = jQuery("
");
equal( div.css( "display", "inline" ).hide().show().appendTo("body").css( "display" ), "inline", "Initialized display value has returned" );
div.remove();
div.css( "display", "none" ).hide();
equal( jQuery._data( div[ 0 ], "olddisplay" ), undefined, "olddisplay is undefined after hiding a detached and hidden element" );
div.remove();
div.css( "display", "inline-block" ).hide().appendTo("body").fadeIn(function() {
equal( div.css( "display" ), "inline-block", "Initialized display value has returned" );
div.remove();
start();
});
equal( jQuery._data( jQuery("#display").css( "display", "inline" ).hide()[ 0 ], "olddisplay" ), display,
"display: * !Important value should used as initialized display" );
jQuery._removeData( jQuery("#display")[ 0 ] );
});
// Support: IE < 11, Safari < 7
// We have to jump through the hoops here in order to test work with "order" CSS property,
// that some browsers do not support. This test is not, strictly speaking, correct,
// but it's the best that we can do.
(function() {
var style = document.createElement( "div" ).style,
exist = "order" in style || "WebkitOrder" in style;
if ( exist ) {
test( "Don't append px to CSS \"order\" value (#14049)", 1, function() {
var $elem = jQuery( "
" );
$elem.css( "order", 2 );
equal( $elem.css( "order" ), "2", "2 on order" );
});
}
})();
}