2012-06-11 01:54:16 +00:00
if ( jQuery . css ) {
2015-08-16 06:59:58 +00:00
QUnit . module ( "css" , { teardown : moduleTeardown } ) ;
2009-04-20 17:05:18 +00:00
2015-08-16 06:59:58 +00:00
QUnit . test ( "css(String|Hash)" , function ( assert ) {
2015-08-16 03:45:28 +00:00
assert . expect ( 42 ) ;
2009-03-22 23:25:03 +00:00
2015-08-16 06:59:58 +00:00
assert . equal ( jQuery ( "#qunit-fixture" ) . css ( "display" ) , "block" , "Check for css property \"display\"" ) ;
2011-12-12 15:22:38 +00:00
2013-04-09 15:45:09 +00:00
var $child , div , div2 , width , height , child , prctval , checkval , old ;
2015-08-16 06:59:58 +00:00
$child = jQuery ( "#nothiddendivchild" ) . css ( { "width" : "20%" , "height" : "20%" } ) ;
assert . notEqual ( $child . css ( "width" ) , "20px" , "Retrieving a width percentage on the child of a hidden div returns percentage" ) ;
assert . notEqual ( $child . css ( "height" ) , "20px" , "Retrieving a height percentage on the child of a hidden div returns percentage" ) ;
2009-03-22 23:25:03 +00:00
2013-10-15 19:48:53 +00:00
div = jQuery ( "<div/>" ) ;
2010-10-22 04:28:33 +00:00
2010-11-10 04:29:26 +00:00
// These should be "auto" (or some better value)
// temporarily provide "0px" for backwards compat
2015-08-16 06:59:58 +00:00
assert . equal ( div . css ( "width" ) , "0px" , "Width on disconnected node." ) ;
assert . equal ( div . css ( "height" ) , "0px" , "Height on disconnected node." ) ;
2010-10-22 04:28:33 +00:00
2015-08-16 06:59:58 +00:00
div . css ( { "width" : 4 , "height" : 4 } ) ;
2010-10-22 04:28:33 +00:00
2015-08-16 06:59:58 +00:00
assert . equal ( div . css ( "width" ) , "4px" , "Width on disconnected node." ) ;
assert . equal ( div . css ( "height" ) , "4px" , "Height on disconnected node." ) ;
2010-10-22 04:28:33 +00:00
2015-08-16 06:59:58 +00:00
div2 = jQuery ( "<div style='display:none;'><input type='text' style='height:20px;'/><textarea style='height:20px;'/><div style='height:20px;'></div></div>" ) . appendTo ( "body" ) ;
2010-10-22 04:28:33 +00:00
2015-08-16 06:59:58 +00:00
assert . equal ( div2 . find ( "input" ) . css ( "height" ) , "20px" , "Height on hidden input." ) ;
assert . equal ( div2 . find ( "textarea" ) . css ( "height" ) , "20px" , "Height on hidden textarea." ) ;
assert . equal ( div2 . find ( "div" ) . css ( "height" ) , "20px" , "Height on hidden div." ) ;
2010-10-22 04:28:33 +00:00
2010-10-22 04:29:52 +00:00
div2 . remove ( ) ;
2012-04-23 19:05:12 +00:00
// handle negative numbers by setting to zero #11604
2015-08-16 06:59:58 +00:00
jQuery ( "#nothiddendiv" ) . css ( { "width" : 1 , "height" : 1 } ) ;
width = parseFloat ( jQuery ( "#nothiddendiv" ) . css ( "width" ) ) ;
height = parseFloat ( jQuery ( "#nothiddendiv" ) . css ( "height" ) ) ;
jQuery ( "#nothiddendiv" ) . css ( { "overflow" : "hidden" , "width" : - 1 , "height" : - 1 } ) ;
assert . equal ( parseFloat ( jQuery ( "#nothiddendiv" ) . css ( "width" ) ) , 0 , "Test negative width set to 0" ) ;
assert . equal ( parseFloat ( jQuery ( "#nothiddendiv" ) . css ( "height" ) ) , 0 , "Test negative height set to 0" ) ;
assert . equal ( jQuery ( "<div style='display: none;'/>" ) . css ( "display" ) , "none" , "Styles on disconnected nodes" ) ;
jQuery ( "#floatTest" ) . css ( { "float" : "right" } ) ;
assert . equal ( jQuery ( "#floatTest" ) . css ( "float" ) , "right" , "Modified CSS float using \"float\": Assert float is right" ) ;
jQuery ( "#floatTest" ) . css ( { "font-size" : "30px" } ) ;
assert . equal ( jQuery ( "#floatTest" ) . css ( "font-size" ) , "30px" , "Modified CSS font-size: Assert font-size is 30px" ) ;
jQuery . each ( "0,0.25,0.5,0.75,1" . split ( "," ) , function ( i , n ) {
jQuery ( "#foo" ) . css ( { "opacity" : n } ) ;
assert . equal ( jQuery ( "#foo" ) . css ( "opacity" ) , parseFloat ( n ) , "Assert opacity is " + parseFloat ( n ) + " as a String" ) ;
jQuery ( "#foo" ) . css ( { "opacity" : parseFloat ( n ) } ) ;
assert . equal ( jQuery ( "#foo" ) . css ( "opacity" ) , parseFloat ( n ) , "Assert opacity is " + parseFloat ( n ) + " as a Number" ) ;
} ) ;
jQuery ( "#foo" ) . css ( { "opacity" : "" } ) ;
assert . equal ( jQuery ( "#foo" ) . css ( "opacity" ) , "1" , "Assert opacity is 1 when set to an empty String" ) ;
2009-05-14 14:44:31 +00:00
2015-08-16 06:59:58 +00:00
assert . equal ( jQuery ( "#empty" ) . css ( "opacity" ) , "0" , "Assert opacity is accessible via filter property set in stylesheet in IE" ) ;
jQuery ( "#empty" ) . css ( { "opacity" : "1" } ) ;
assert . equal ( jQuery ( "#empty" ) . css ( "opacity" ) , "1" , "Assert opacity is taken from style attribute when set vs stylesheet in IE with filters" ) ;
2009-11-11 19:17:16 +00:00
2015-08-16 06:59:58 +00:00
div = jQuery ( "#nothiddendiv" ) ;
child = jQuery ( "#nothiddendivchild" ) ;
2009-11-11 19:17:16 +00:00
2015-08-16 06:59:58 +00:00
assert . equal ( parseInt ( div . css ( "fontSize" ) , 10 ) , 16 , "Verify fontSize px set." ) ;
assert . equal ( parseInt ( div . css ( "font-size" ) , 10 ) , 16 , "Verify fontSize px set." ) ;
assert . equal ( parseInt ( child . css ( "fontSize" ) , 10 ) , 16 , "Verify fontSize px set." ) ;
assert . equal ( parseInt ( child . css ( "font-size" ) , 10 ) , 16 , "Verify fontSize px set." ) ;
2009-11-11 19:17:16 +00:00
2015-08-16 06:59:58 +00:00
child . css ( "height" , "100%" ) ;
assert . equal ( child [ 0 ] . style . height , "100%" , "Make sure the height is being set correctly." ) ;
2010-09-21 21:12:42 +00:00
2015-08-16 06:59:58 +00:00
child . attr ( "class" , "em" ) ;
assert . equal ( parseInt ( child . css ( "fontSize" ) , 10 ) , 32 , "Verify fontSize em set." ) ;
2009-11-11 19:17:16 +00:00
2009-12-03 17:34:27 +00:00
// Have to verify this as the result depends upon the browser's CSS
// support for font-size percentages
2015-08-16 06:59:58 +00:00
child . attr ( "class" , "prct" ) ;
prctval = parseInt ( child . css ( "fontSize" ) , 10 ) ;
2013-04-09 15:45:09 +00:00
checkval = 0 ;
2009-12-03 17:34:27 +00:00
if ( prctval === 16 || prctval === 24 ) {
checkval = prctval ;
}
2015-08-16 03:45:28 +00:00
assert . equal ( prctval , checkval , "Verify fontSize % set." ) ;
2009-12-10 04:51:58 +00:00
2015-08-16 06:59:58 +00:00
assert . equal ( typeof child . css ( "width" ) , "string" , "Make sure that a string width is returned from css('width')." ) ;
2010-10-09 14:52:53 +00:00
2015-08-16 06:59:58 +00:00
old = child [ 0 ] . style . height ;
2010-10-09 14:52:53 +00:00
// Test NaN
2015-08-16 06:59:58 +00:00
child . css ( "height" , parseFloat ( "zoo" ) ) ;
assert . equal ( child [ 0 ] . style . height , old , "Make sure height isn't changed on NaN." ) ;
2010-10-09 14:52:53 +00:00
// Test null
2015-08-16 06:59:58 +00:00
child . css ( "height" , null ) ;
assert . equal ( child [ 0 ] . style . height , old , "Make sure height isn't changed on null." ) ;
2010-10-09 14:52:53 +00:00
2015-08-16 06:59:58 +00:00
old = child [ 0 ] . style . fontSize ;
2010-10-09 14:52:53 +00:00
// Test NaN
2015-08-16 06:59:58 +00:00
child . css ( "font-size" , parseFloat ( "zoo" ) ) ;
assert . equal ( child [ 0 ] . style . fontSize , old , "Make sure font-size isn't changed on NaN." ) ;
2010-10-09 14:52:53 +00:00
// Test null
2015-08-16 06:59:58 +00:00
child . css ( "font-size" , null ) ;
assert . equal ( child [ 0 ] . style . fontSize , old , "Make sure font-size isn't changed on null." ) ;
2013-10-15 19:48:53 +00:00
2015-08-16 03:45:28 +00:00
assert . strictEqual ( child . css ( "x-fake" ) , undefined , "Make sure undefined is returned from css(nonexistent)." ) ;
2013-10-15 19:48:53 +00:00
2015-08-16 06:59:58 +00:00
div = jQuery ( "<div/>" ) . css ( { position : "absolute" , "z-index" : 1000 } ) . appendTo ( "#qunit-fixture" ) ;
2015-08-16 03:45:28 +00:00
assert . strictEqual ( div . css ( "z-index" ) , "1000" ,
2013-10-15 19:48:53 +00:00
"Make sure that a string z-index is returned from css('z-index') (#14432)." ) ;
2015-08-16 06:59:58 +00:00
} ) ;
2009-03-22 23:25:03 +00:00
2015-08-16 03:45:28 +00:00
QUnit . test ( "css() explicit and relative values" , function ( assert ) {
assert . expect ( 29 ) ;
2015-07-29 15:10:04 +00:00
2015-08-16 06:59:58 +00:00
var $elem = jQuery ( "#nothiddendiv" ) ;
2011-04-04 23:48:24 +00:00
2015-08-16 06:59:58 +00:00
$elem . css ( { "width" : 1 , "height" : 1 , "paddingLeft" : "1px" , "opacity" : 1 } ) ;
assert . equal ( $elem . css ( "width" ) , "1px" , "Initial css set or width/height works (hash)" ) ;
assert . equal ( $elem . css ( "paddingLeft" ) , "1px" , "Initial css set of paddingLeft works (hash)" ) ;
assert . equal ( $elem . css ( "opacity" ) , "1" , "Initial css set of opacity works (hash)" ) ;
2011-04-04 23:48:24 +00:00
2015-08-16 06:59:58 +00:00
$elem . css ( { width : "+=9" } ) ;
assert . equal ( $elem . css ( "width" ) , "10px" , "'+=9' on width (hash)" ) ;
2011-04-04 23:48:24 +00:00
2015-08-16 06:59:58 +00:00
$elem . css ( { "width" : "-=9" } ) ;
assert . equal ( $elem . css ( "width" ) , "1px" , "'-=9' on width (hash)" ) ;
2011-04-04 23:48:24 +00:00
2015-08-16 06:59:58 +00:00
$elem . css ( { "width" : "+=9px" } ) ;
assert . equal ( $elem . css ( "width" ) , "10px" , "'+=9px' on width (hash)" ) ;
2011-04-04 23:48:24 +00:00
2015-08-16 06:59:58 +00:00
$elem . css ( { "width" : "-=9px" } ) ;
assert . equal ( $elem . css ( "width" ) , "1px" , "'-=9px' on width (hash)" ) ;
2011-04-04 23:48:24 +00:00
$elem . css ( "width" , "+=9" ) ;
2015-08-16 06:59:58 +00:00
assert . equal ( $elem . css ( "width" ) , "10px" , "'+=9' on width (params)" ) ;
2011-04-04 23:48:24 +00:00
$elem . css ( "width" , "-=9" ) ;
2015-08-16 06:59:58 +00:00
assert . equal ( $elem . css ( "width" ) , "1px" , "'-=9' on width (params)" ) ;
2011-04-04 23:48:24 +00:00
$elem . css ( "width" , "+=9px" ) ;
2015-08-16 06:59:58 +00:00
assert . equal ( $elem . css ( "width" ) , "10px" , "'+=9px' on width (params)" ) ;
2011-04-04 23:48:24 +00:00
$elem . css ( "width" , "-=9px" ) ;
2015-08-16 06:59:58 +00:00
assert . equal ( $elem . css ( "width" ) , "1px" , "'-=9px' on width (params)" ) ;
2011-08-16 22:00:44 +00:00
$elem . css ( "width" , "-=-9px" ) ;
2015-08-16 06:59:58 +00:00
assert . equal ( $elem . css ( "width" ) , "10px" , "'-=-9px' on width (params)" ) ;
2011-08-16 22:00:44 +00:00
$elem . css ( "width" , "+=-9px" ) ;
2015-08-16 06:59:58 +00:00
assert . equal ( $elem . css ( "width" ) , "1px" , "'+=-9px' on width (params)" ) ;
2011-05-13 16:09:49 +00:00
2015-08-16 06:59:58 +00:00
$elem . css ( { "paddingLeft" : "+=4" } ) ;
assert . equal ( $elem . css ( "paddingLeft" ) , "5px" , "'+=4' on paddingLeft (hash)" ) ;
2011-05-13 16:09:49 +00:00
2015-08-16 06:59:58 +00:00
$elem . css ( { "paddingLeft" : "-=4" } ) ;
assert . equal ( $elem . css ( "paddingLeft" ) , "1px" , "'-=4' on paddingLeft (hash)" ) ;
2011-05-13 16:09:49 +00:00
2015-08-16 06:59:58 +00:00
$elem . css ( { "paddingLeft" : "+=4px" } ) ;
assert . equal ( $elem . css ( "paddingLeft" ) , "5px" , "'+=4px' on paddingLeft (hash)" ) ;
2011-05-13 16:09:49 +00:00
2015-08-16 06:59:58 +00:00
$elem . css ( { "paddingLeft" : "-=4px" } ) ;
assert . equal ( $elem . css ( "paddingLeft" ) , "1px" , "'-=4px' on paddingLeft (hash)" ) ;
2011-05-13 16:09:49 +00:00
2015-08-16 06:59:58 +00:00
$elem . css ( { "padding-left" : "+=4" } ) ;
assert . equal ( $elem . css ( "paddingLeft" ) , "5px" , "'+=4' on padding-left (hash)" ) ;
2011-05-13 16:09:49 +00:00
2015-08-16 06:59:58 +00:00
$elem . css ( { "padding-left" : "-=4" } ) ;
assert . equal ( $elem . css ( "paddingLeft" ) , "1px" , "'-=4' on padding-left (hash)" ) ;
2011-05-13 16:09:49 +00:00
2015-08-16 06:59:58 +00:00
$elem . css ( { "padding-left" : "+=4px" } ) ;
assert . equal ( $elem . css ( "paddingLeft" ) , "5px" , "'+=4px' on padding-left (hash)" ) ;
2011-05-13 16:09:49 +00:00
2015-08-16 06:59:58 +00:00
$elem . css ( { "padding-left" : "-=4px" } ) ;
assert . equal ( $elem . css ( "paddingLeft" ) , "1px" , "'-=4px' on padding-left (hash)" ) ;
2011-05-13 16:09:49 +00:00
$elem . css ( "paddingLeft" , "+=4" ) ;
2015-08-16 06:59:58 +00:00
assert . equal ( $elem . css ( "paddingLeft" ) , "5px" , "'+=4' on paddingLeft (params)" ) ;
2011-05-13 16:09:49 +00:00
$elem . css ( "paddingLeft" , "-=4" ) ;
2015-08-16 06:59:58 +00:00
assert . equal ( $elem . css ( "paddingLeft" ) , "1px" , "'-=4' on paddingLeft (params)" ) ;
2011-05-13 16:09:49 +00:00
$elem . css ( "padding-left" , "+=4px" ) ;
2015-08-16 06:59:58 +00:00
assert . equal ( $elem . css ( "paddingLeft" ) , "5px" , "'+=4px' on padding-left (params)" ) ;
2011-05-13 16:09:49 +00:00
$elem . css ( "padding-left" , "-=4px" ) ;
2015-08-16 06:59:58 +00:00
assert . equal ( $elem . css ( "paddingLeft" ) , "1px" , "'-=4px' on padding-left (params)" ) ;
2011-05-13 16:09:49 +00:00
2015-08-16 06:59:58 +00:00
$elem . css ( { "opacity" : "-=0.5" } ) ;
assert . equal ( $elem . css ( "opacity" ) , "0.5" , "'-=0.5' on opacity (hash)" ) ;
2011-05-13 16:09:49 +00:00
2015-08-16 06:59:58 +00:00
$elem . css ( { "opacity" : "+=0.5" } ) ;
assert . equal ( $elem . css ( "opacity" ) , "1" , "'+=0.5' on opacity (hash)" ) ;
2011-05-13 16:09:49 +00:00
$elem . css ( "opacity" , "-=0.5" ) ;
2015-08-16 06:59:58 +00:00
assert . equal ( $elem . css ( "opacity" ) , "0.5" , "'-=0.5' on opacity (params)" ) ;
2011-05-13 16:09:49 +00:00
$elem . css ( "opacity" , "+=0.5" ) ;
2015-08-16 06:59:58 +00:00
assert . equal ( $elem . css ( "opacity" ) , "1" , "'+=0.5' on opacity (params)" ) ;
} ) ;
2011-04-04 18:21:15 +00:00
2015-08-16 03:45:28 +00:00
QUnit . test ( "css() non-px relative values (gh-1711)" , function ( assert ) {
2016-01-06 22:00:50 +00:00
assert . expect ( 16 ) ;
2015-07-29 15:10:04 +00:00
2015-02-04 13:10:14 +00:00
var cssCurrent ,
units = { } ,
$child = jQuery ( "#nothiddendivchild" ) ,
add = function ( prop , val , unit ) {
2015-03-17 03:05:36 +00:00
var difference ,
adjustment = ( val < 0 ? "-=" : "+=" ) + Math . abs ( val ) + unit ,
message = prop + ": " + adjustment ,
cssOld = cssCurrent ,
expected = cssOld + val * units [ prop ] [ unit ] ;
// Apply change
$child . css ( prop , adjustment ) ;
cssCurrent = parseFloat ( $child . css ( prop ) ) ;
2015-03-17 03:05:36 +00:00
// Require a difference of no more than one pixel
2015-03-17 03:05:36 +00:00
difference = Math . abs ( cssCurrent - expected ) ;
2015-03-17 03:05:36 +00:00
if ( difference <= 1 ) {
2015-08-16 03:45:28 +00:00
assert . ok ( true , message ) ;
2015-03-17 03:05:36 +00:00
// ...or fail with actual and expected values
} else {
2015-08-16 03:45:28 +00:00
assert . ok ( false , message + " (actual " + cssCurrent + ", expected " + expected + ")" ) ;
2015-03-17 03:05:36 +00:00
}
2015-02-04 13:10:14 +00:00
} ,
getUnits = function ( prop ) {
units [ prop ] = {
"px" : 1 ,
"em" : parseFloat ( $child . css ( prop , "100em" ) . css ( prop ) ) / 100 ,
"pt" : parseFloat ( $child . css ( prop , "100pt" ) . css ( prop ) ) / 100 ,
"pc" : parseFloat ( $child . css ( prop , "100pc" ) . css ( prop ) ) / 100 ,
"cm" : parseFloat ( $child . css ( prop , "100cm" ) . css ( prop ) ) / 100 ,
"mm" : parseFloat ( $child . css ( prop , "100mm" ) . css ( prop ) ) / 100 ,
2015-08-16 06:59:58 +00:00
"%" : parseFloat ( $child . css ( prop , "100%" ) . css ( prop ) ) / 100
2015-02-04 13:10:14 +00:00
} ;
} ;
2015-08-16 06:59:58 +00:00
jQuery ( "#nothiddendiv" ) . css ( { height : 1 , padding : 0 , width : 400 } ) ;
$child . css ( { height : 1 , padding : 0 } ) ;
2015-02-04 13:10:14 +00:00
getUnits ( "width" ) ;
cssCurrent = parseFloat ( $child . css ( "width" , "50%" ) . css ( "width" ) ) ;
add ( "width" , 25 , "%" ) ;
add ( "width" , - 50 , "%" ) ;
add ( "width" , 10 , "em" ) ;
add ( "width" , 10 , "pt" ) ;
add ( "width" , - 2.3 , "pt" ) ;
add ( "width" , 5 , "pc" ) ;
add ( "width" , - 5 , "em" ) ;
add ( "width" , + 2 , "cm" ) ;
add ( "width" , - 15 , "mm" ) ;
add ( "width" , 21 , "px" ) ;
getUnits ( "lineHeight" ) ;
cssCurrent = parseFloat ( $child . css ( "lineHeight" , "1em" ) . css ( "lineHeight" ) ) ;
add ( "lineHeight" , 2 , "em" ) ;
add ( "lineHeight" , - 10 , "px" ) ;
add ( "lineHeight" , 20 , "pt" ) ;
add ( "lineHeight" , 30 , "pc" ) ;
add ( "lineHeight" , 1 , "cm" ) ;
add ( "lineHeight" , - 20 , "mm" ) ;
2016-01-06 22:00:50 +00:00
// Opera 12 does something funky for this one
// Just disabling for 2.2
// add( "lineHeight", 50, "%" );
2015-08-16 06:59:58 +00:00
} ) ;
2015-02-04 13:10:14 +00:00
2015-08-16 06:59:58 +00:00
QUnit . test ( "css(String, Object)" , function ( assert ) {
2015-08-16 03:45:28 +00:00
assert . expect ( 19 ) ;
2013-04-09 15:45:09 +00:00
var j , div , display , ret , success ;
2009-03-22 23:25:03 +00:00
2015-08-16 06:59:58 +00:00
jQuery ( "#floatTest" ) . css ( "float" , "left" ) ;
assert . equal ( jQuery ( "#floatTest" ) . css ( "float" ) , "left" , "Modified CSS float using \"float\": Assert float is left" ) ;
jQuery ( "#floatTest" ) . css ( "font-size" , "20px" ) ;
assert . equal ( jQuery ( "#floatTest" ) . css ( "font-size" ) , "20px" , "Modified CSS font-size: Assert font-size is 20px" ) ;
2009-03-22 23:25:03 +00:00
2015-08-16 06:59:58 +00:00
jQuery . each ( "0,0.25,0.5,0.75,1" . split ( "," ) , function ( i , n ) {
jQuery ( "#foo" ) . css ( "opacity" , n ) ;
assert . equal ( jQuery ( "#foo" ) . css ( "opacity" ) , parseFloat ( n ) , "Assert opacity is " + parseFloat ( n ) + " as a String" ) ;
jQuery ( "#foo" ) . css ( "opacity" , parseFloat ( n ) ) ;
assert . equal ( jQuery ( "#foo" ) . css ( "opacity" ) , parseFloat ( n ) , "Assert opacity is " + parseFloat ( n ) + " as a Number" ) ;
} ) ;
jQuery ( "#foo" ) . css ( "opacity" , "" ) ;
assert . equal ( jQuery ( "#foo" ) . css ( "opacity" ) , "1" , "Assert opacity is 1 when set to an empty String" ) ;
2009-03-22 23:25:03 +00:00
// using contents will get comments regular, text, and comment nodes
2015-08-16 06:59:58 +00:00
j = jQuery ( "#nonnodes" ) . contents ( ) ;
j . css ( "overflow" , "visible" ) ;
assert . equal ( j . css ( "overflow" ) , "visible" , "Check node,textnode,comment css works" ) ;
2015-11-16 20:25:05 +00:00
// Opera sometimes doesn't update 'display' correctly, see #2037
jQuery ( "#t2037" ) [ 0 ] . innerHTML = jQuery ( "#t2037" ) [ 0 ] . innerHTML ;
2015-08-16 06:59:58 +00:00
assert . equal ( jQuery ( "#t2037 .hidden" ) . css ( "display" ) , "none" , "Make sure browser thinks it is hidden" ) ;
2010-09-28 15:53:09 +00:00
2015-08-16 06:59:58 +00:00
div = jQuery ( "#nothiddendiv" ) ;
display = div . css ( "display" ) ;
ret = div . css ( "display" , undefined ) ;
2010-09-28 15:53:09 +00:00
2015-08-16 03:45:28 +00:00
assert . equal ( ret , div , "Make sure setting undefined returns the original set." ) ;
2015-08-16 06:59:58 +00:00
assert . equal ( div . css ( "display" ) , display , "Make sure that the display wasn't changed." ) ;
2010-10-09 14:42:01 +00:00
2013-04-09 15:45:09 +00:00
success = true ;
2010-10-09 14:42:01 +00:00
try {
2014-03-09 23:59:14 +00:00
jQuery ( "#foo" ) . css ( "backgroundColor" , "rgba(0, 0, 0, 0.1)" ) ;
2010-10-09 14:42:01 +00:00
}
2015-08-16 06:59:58 +00:00
catch ( e ) {
2010-10-09 14:42:01 +00:00
success = false ;
}
2015-08-16 03:45:28 +00:00
assert . ok ( success , "Setting RGBA values does not throw Error (#5509)" ) ;
2014-03-09 23:59:14 +00:00
jQuery ( "#foo" ) . css ( "font" , "7px/21px sans-serif" ) ;
2015-08-16 03:45:28 +00:00
assert . strictEqual ( jQuery ( "#foo" ) . css ( "line-height" ) , "21px" ,
2014-03-09 23:59:14 +00:00
"Set font shorthand property (#14759)" ) ;
2015-08-16 06:59:58 +00:00
} ) ;
2009-03-22 23:25:03 +00:00
2015-08-16 03:45:28 +00:00
QUnit . test ( "css(String, Object) with negative values" , function ( assert ) {
assert . expect ( 4 ) ;
2014-12-20 09:08:44 +00:00
jQuery ( "#nothiddendiv" ) . css ( "margin-top" , "-10px" ) ;
jQuery ( "#nothiddendiv" ) . css ( "margin-left" , "-10px" ) ;
2015-08-16 03:45:28 +00:00
assert . equal ( jQuery ( "#nothiddendiv" ) . css ( "margin-top" ) , "-10px" , "Ensure negative top margins work." ) ;
assert . equal ( jQuery ( "#nothiddendiv" ) . css ( "margin-left" ) , "-10px" , "Ensure negative left margins work." ) ;
2014-12-20 09:08:44 +00:00
jQuery ( "#nothiddendiv" ) . css ( "position" , "absolute" ) ;
jQuery ( "#nothiddendiv" ) . css ( "top" , "-20px" ) ;
jQuery ( "#nothiddendiv" ) . css ( "left" , "-20px" ) ;
2015-08-16 03:45:28 +00:00
assert . equal ( jQuery ( "#nothiddendiv" ) . css ( "top" ) , "-20px" , "Ensure negative top values work." ) ;
assert . equal ( jQuery ( "#nothiddendiv" ) . css ( "left" ) , "-20px" , "Ensure negative left values work." ) ;
2015-08-16 06:59:58 +00:00
} ) ;
2014-12-20 09:08:44 +00:00
2015-08-16 03:45:28 +00:00
QUnit . test ( "css(Array)" , function ( assert ) {
assert . expect ( 2 ) ;
2012-12-11 13:06:48 +00:00
var expectedMany = {
"overflow" : "visible" ,
"width" : "16px"
} ,
expectedSingle = {
"width" : "16px"
} ,
2015-08-16 06:59:58 +00:00
elem = jQuery ( "<div></div>" ) . appendTo ( "#qunit-fixture" ) ;
2012-12-11 13:06:48 +00:00
2015-08-16 06:59:58 +00:00
assert . deepEqual ( elem . css ( expectedMany ) . css ( [ "overflow" , "width" ] ) , expectedMany , "Getting multiple element array" ) ;
assert . deepEqual ( elem . css ( expectedSingle ) . css ( [ "width" ] ) , expectedSingle , "Getting single element array" ) ;
} ) ;
2012-12-11 13:06:48 +00:00
2015-08-16 06:59:58 +00:00
QUnit . test ( "css(String, Function)" , function ( assert ) {
assert . expect ( 3 ) ;
2010-12-30 06:34:48 +00:00
2013-04-09 15:45:09 +00:00
var index ,
2015-08-16 06:59:58 +00:00
sizes = [ "10px" , "20px" , "30px" ] ;
2010-12-30 06:34:48 +00:00
2015-08-16 06:59:58 +00:00
jQuery ( "<div id='cssFunctionTest'><div class='cssFunction'></div>" +
2010-12-30 06:34:48 +00:00
"<div class='cssFunction'></div>" +
2015-08-16 06:59:58 +00:00
"<div class='cssFunction'></div></div>" )
. appendTo ( "body" ) ;
2010-12-30 06:34:48 +00:00
2013-04-09 15:45:09 +00:00
index = 0 ;
2010-12-30 06:34:48 +00:00
2015-08-16 06:59:58 +00:00
jQuery ( "#cssFunctionTest div" ) . css ( "font-size" , function ( ) {
var size = sizes [ index ] ;
2010-01-07 18:44:53 +00:00
index ++ ;
return size ;
2015-08-16 06:59:58 +00:00
} ) ;
2010-12-30 06:34:48 +00:00
2010-01-07 18:44:53 +00:00
index = 0 ;
2010-12-30 06:34:48 +00:00
2015-08-16 06:59:58 +00:00
jQuery ( "#cssFunctionTest div" ) . each ( function ( ) {
var computedSize = jQuery ( this ) . css ( "font-size" ) ,
expectedSize = sizes [ index ] ;
2015-08-16 03:45:28 +00:00
assert . equal ( computedSize , expectedSize , "Div #" + index + " should be " + expectedSize ) ;
2010-01-07 18:44:53 +00:00
index ++ ;
2015-08-16 06:59:58 +00:00
} ) ;
2010-01-07 18:44:53 +00:00
2015-08-16 06:59:58 +00:00
jQuery ( "#cssFunctionTest" ) . remove ( ) ;
} ) ;
2009-07-12 18:31:26 +00:00
2015-08-16 06:59:58 +00:00
QUnit . test ( "css(String, Function) with incoming value" , function ( assert ) {
assert . expect ( 3 ) ;
2010-12-30 06:34:48 +00:00
2013-04-09 15:45:09 +00:00
var index ,
2015-08-16 06:59:58 +00:00
sizes = [ "10px" , "20px" , "30px" ] ;
2010-12-30 06:34:48 +00:00
2015-08-16 06:59:58 +00:00
jQuery ( "<div id='cssFunctionTest'><div class='cssFunction'></div>" +
2010-12-30 06:34:48 +00:00
"<div class='cssFunction'></div>" +
2015-08-16 06:59:58 +00:00
"<div class='cssFunction'></div></div>" )
. appendTo ( "body" ) ;
2010-12-30 06:34:48 +00:00
2013-04-09 15:45:09 +00:00
index = 0 ;
2010-12-30 06:34:48 +00:00
2015-08-16 06:59:58 +00:00
jQuery ( "#cssFunctionTest div" ) . css ( "font-size" , function ( ) {
var size = sizes [ index ] ;
2010-01-07 18:52:20 +00:00
index ++ ;
return size ;
2015-08-16 06:59:58 +00:00
} ) ;
2010-12-30 06:34:48 +00:00
2010-01-07 18:52:20 +00:00
index = 0 ;
2010-12-30 06:34:48 +00:00
2015-08-16 06:59:58 +00:00
jQuery ( "#cssFunctionTest div" ) . css ( "font-size" , function ( i , computedSize ) {
var expectedSize = sizes [ index ] ;
2015-08-16 03:45:28 +00:00
assert . equal ( computedSize , expectedSize , "Div #" + index + " should be " + expectedSize ) ;
2010-01-07 18:52:20 +00:00
index ++ ;
return computedSize ;
2015-08-16 06:59:58 +00:00
} ) ;
2010-01-07 18:52:20 +00:00
2015-08-16 06:59:58 +00:00
jQuery ( "#cssFunctionTest" ) . remove ( ) ;
} ) ;
2010-01-07 18:52:20 +00:00
2015-08-16 06:59:58 +00:00
QUnit . test ( "css(Object) where values are Functions" , function ( assert ) {
assert . expect ( 3 ) ;
2010-12-30 06:34:48 +00:00
2013-04-09 15:45:09 +00:00
var index ,
2015-08-16 06:59:58 +00:00
sizes = [ "10px" , "20px" , "30px" ] ;
2010-12-30 06:34:48 +00:00
2015-08-16 06:59:58 +00:00
jQuery ( "<div id='cssFunctionTest'><div class='cssFunction'></div>" +
2010-12-30 06:34:48 +00:00
"<div class='cssFunction'></div>" +
2015-08-16 06:59:58 +00:00
"<div class='cssFunction'></div></div>" )
. appendTo ( "body" ) ;
2010-01-07 18:44:53 +00:00
2013-04-09 15:45:09 +00:00
index = 0 ;
2010-12-30 06:34:48 +00:00
2015-08-16 06:59:58 +00:00
jQuery ( "#cssFunctionTest div" ) . css ( { "fontSize" : function ( ) {
var size = sizes [ index ] ;
2010-01-07 18:44:53 +00:00
index ++ ;
return size ;
2015-08-16 06:59:58 +00:00
} } ) ;
2010-12-30 06:34:48 +00:00
2010-01-07 18:44:53 +00:00
index = 0 ;
2010-12-30 06:34:48 +00:00
2015-08-16 06:59:58 +00:00
jQuery ( "#cssFunctionTest div" ) . each ( function ( ) {
var computedSize = jQuery ( this ) . css ( "font-size" ) ,
expectedSize = sizes [ index ] ;
2015-08-16 03:45:28 +00:00
assert . equal ( computedSize , expectedSize , "Div #" + index + " should be " + expectedSize ) ;
2010-01-07 18:44:53 +00:00
index ++ ;
2015-08-16 06:59:58 +00:00
} ) ;
2010-12-30 06:34:48 +00:00
2015-08-16 06:59:58 +00:00
jQuery ( "#cssFunctionTest" ) . remove ( ) ;
} ) ;
2009-07-12 18:31:26 +00:00
2015-08-16 06:59:58 +00:00
QUnit . test ( "css(Object) where values are Functions with incoming values" , function ( assert ) {
assert . expect ( 3 ) ;
2010-12-30 06:34:48 +00:00
2013-04-09 15:45:09 +00:00
var index ,
2015-08-16 06:59:58 +00:00
sizes = [ "10px" , "20px" , "30px" ] ;
2010-12-30 06:34:48 +00:00
2015-08-16 06:59:58 +00:00
jQuery ( "<div id='cssFunctionTest'><div class='cssFunction'></div>" +
2010-12-30 06:34:48 +00:00
"<div class='cssFunction'></div>" +
2015-08-16 06:59:58 +00:00
"<div class='cssFunction'></div></div>" )
. appendTo ( "body" ) ;
2010-01-07 18:52:20 +00:00
2013-04-09 15:45:09 +00:00
index = 0 ;
2010-12-30 06:34:48 +00:00
2015-08-16 06:59:58 +00:00
jQuery ( "#cssFunctionTest div" ) . css ( { "fontSize" : function ( ) {
var size = sizes [ index ] ;
2010-01-07 18:52:20 +00:00
index ++ ;
return size ;
2015-08-16 06:59:58 +00:00
} } ) ;
2010-12-30 06:34:48 +00:00
2010-01-07 18:52:20 +00:00
index = 0 ;
2010-12-30 06:34:48 +00:00
2015-08-16 06:59:58 +00:00
jQuery ( "#cssFunctionTest div" ) . css ( { "font-size" : function ( i , computedSize ) {
var expectedSize = sizes [ index ] ;
2015-08-16 03:45:28 +00:00
assert . equal ( computedSize , expectedSize , "Div #" + index + " should be " + expectedSize ) ;
2010-01-07 18:52:20 +00:00
index ++ ;
return computedSize ;
2015-08-16 06:59:58 +00:00
} } ) ;
2010-12-30 06:34:48 +00:00
2015-08-16 06:59:58 +00:00
jQuery ( "#cssFunctionTest" ) . remove ( ) ;
} ) ;
2010-01-07 18:52:20 +00:00
2015-08-16 06:59:58 +00:00
QUnit . test ( "show(); hide()" , function ( assert ) {
2012-05-29 02:25:04 +00:00
2015-08-16 03:45:28 +00:00
assert . expect ( 4 ) ;
2013-12-11 16:34:05 +00:00
var hiddendiv , div ;
2013-04-09 15:45:09 +00:00
2015-08-16 06:59:58 +00:00
hiddendiv = jQuery ( "div.hidden" ) ;
2012-05-29 02:25:04 +00:00
hiddendiv . hide ( ) ;
2015-11-11 17:50:37 +00:00
assert . equal ( hiddendiv . css ( "display" ) , "none" , "Non-detached div hidden" ) ;
2012-05-29 02:25:04 +00:00
hiddendiv . show ( ) ;
2015-11-11 17:50:37 +00:00
assert . equal ( hiddendiv . css ( "display" ) , "block" , "Pre-hidden div shown" ) ;
2012-05-29 02:25:04 +00:00
2015-08-16 06:59:58 +00:00
div = jQuery ( "<div>" ) . hide ( ) ;
assert . equal ( div . css ( "display" ) , "none" , "Detached div hidden" ) ;
div . appendTo ( "#qunit-fixture" ) . show ( ) ;
2015-11-11 17:50:37 +00:00
assert . equal ( div . css ( "display" ) , "block" , "Pre-hidden div shown" ) ;
2012-05-29 02:25:04 +00:00
2015-08-16 06:59:58 +00:00
} ) ;
2013-12-11 16:34:05 +00:00
2015-08-16 06:59:58 +00:00
QUnit . test ( "show();" , function ( assert ) {
2013-12-11 16:34:05 +00:00
2015-08-16 03:45:28 +00:00
assert . expect ( 18 ) ;
2012-05-29 02:25:04 +00:00
2015-11-11 17:50:37 +00:00
var hiddendiv , div , pass , old , test ;
hiddendiv = jQuery ( "div.hidden" ) ;
2012-05-29 02:25:04 +00:00
2015-08-16 06:59:58 +00:00
assert . equal ( jQuery . css ( hiddendiv [ 0 ] , "display" ) , "none" , "hiddendiv is display: none" ) ;
2012-05-29 02:25:04 +00:00
2015-08-16 06:59:58 +00:00
hiddendiv . css ( "display" , "block" ) ;
assert . equal ( jQuery . css ( hiddendiv [ 0 ] , "display" ) , "block" , "hiddendiv is display: block" ) ;
2012-05-29 02:25:04 +00:00
hiddendiv . show ( ) ;
2015-08-16 06:59:58 +00:00
assert . equal ( jQuery . css ( hiddendiv [ 0 ] , "display" ) , "block" , "hiddendiv is display: block" ) ;
2012-05-29 02:25:04 +00:00
2015-08-16 06:59:58 +00:00
hiddendiv . css ( "display" , "" ) ;
2012-05-29 02:25:04 +00:00
2013-04-09 15:45:09 +00:00
pass = true ;
2015-08-16 06:59:58 +00:00
div = jQuery ( "#qunit-fixture div" ) ;
div . show ( ) . each ( function ( ) {
2013-04-09 15:45:09 +00:00
if ( this . style . display === "none" ) {
2012-06-21 19:30:24 +00:00
pass = false ;
}
2015-08-16 06:59:58 +00:00
} ) ;
2015-08-16 03:45:28 +00:00
assert . ok ( pass , "Show" ) ;
2012-05-29 02:25:04 +00:00
2015-11-11 17:50:37 +00:00
// #show-tests * is set display: none in CSS
jQuery ( "#qunit-fixture" ) . append ( "<div id='show-tests'><div><p><a href='#'></a></p><code></code><pre></pre><span></span></div><table><thead><tr><th></th></tr></thead><tbody><tr><td></td></tr></tbody></table><ul><li></li></ul></div><table id='test-table'></table>" ) ;
2012-05-29 02:25:04 +00:00
2015-08-16 06:59:58 +00:00
old = jQuery ( "#test-table" ) . show ( ) . css ( "display" ) !== "table" ;
jQuery ( "#test-table" ) . remove ( ) ;
2012-05-29 02:25:04 +00:00
2013-04-09 15:45:09 +00:00
test = {
2015-08-16 06:59:58 +00:00
"div" : "block" ,
"p" : "block" ,
"a" : "inline" ,
"code" : "inline" ,
"pre" : "block" ,
"span" : "inline" ,
"table" : old ? "block" : "table" ,
"thead" : old ? "block" : "table-header-group" ,
"tbody" : old ? "block" : "table-row-group" ,
"tr" : old ? "block" : "table-row" ,
"th" : old ? "block" : "table-cell" ,
"td" : old ? "block" : "table-cell" ,
"ul" : "block" ,
"li" : old ? "block" : "list-item"
2012-05-29 02:25:04 +00:00
} ;
2015-08-16 06:59:58 +00:00
jQuery . each ( test , function ( selector , expected ) {
var elem = jQuery ( selector , "#show-tests" ) . show ( ) ;
assert . equal ( elem . css ( "display" ) , expected , "Show using correct display type for " + selector ) ;
} ) ;
2012-05-29 02:25:04 +00:00
// Make sure that showing or hiding a text node doesn't cause an error
2015-08-16 06:59:58 +00:00
jQuery ( "<div>test</div> text <span>test</span>" ) . show ( ) . remove ( ) ;
jQuery ( "<div>test</div> text <span>test</span>" ) . hide ( ) . remove ( ) ;
} ) ;
2012-05-29 02:25:04 +00:00
2015-08-16 06:59:58 +00:00
QUnit . test ( "show() resolves correct default display for detached nodes" , function ( assert ) {
2015-11-11 17:50:37 +00:00
assert . expect ( 13 ) ;
2012-05-29 02:25:04 +00:00
2015-11-11 17:50:37 +00:00
var div , span , tr , trDisplay ;
2012-05-29 02:25:04 +00:00
2015-08-16 06:59:58 +00:00
div = jQuery ( "<div class='hidden'>" ) ;
div . show ( ) . appendTo ( "#qunit-fixture" ) ;
2015-11-11 17:50:37 +00:00
assert . equal ( div . css ( "display" ) , "block" , "Make sure a detached, pre-hidden( through stylesheets ) div is visible." ) ;
2012-05-29 02:25:04 +00:00
2015-11-11 17:50:37 +00:00
div = jQuery ( "<div style='display: none'>" ) ;
2015-08-16 06:59:58 +00:00
div . show ( ) . appendTo ( "#qunit-fixture" ) ;
2015-11-11 17:50:37 +00:00
assert . equal ( div . css ( "display" ) , "block" , "Make sure a detached, pre-hidden( through inline style ) div is visible." ) ;
2012-05-29 02:25:04 +00:00
2015-08-16 06:59:58 +00:00
span = jQuery ( "<span class='hidden'/>" ) ;
span . show ( ) . appendTo ( "#qunit-fixture" ) ;
2015-11-11 17:50:37 +00:00
assert . equal ( span . css ( "display" ) , "inline" , "Make sure a detached, pre-hidden( through stylesheets ) span has default display." ) ;
span = jQuery ( "<span style='display: inline'/>" ) ;
span . show ( ) . appendTo ( "#qunit-fixture" ) ;
assert . equal ( span . css ( "display" ) , "inline" , "Make sure a detached, pre-hidden( through inline style ) span has default display." ) ;
div = jQuery ( "<div><div class='hidden'></div></div>" ) . children ( "div" ) ;
div . show ( ) . appendTo ( "#qunit-fixture" ) ;
assert . equal ( div . css ( "display" ) , "block" , "Make sure a detached, pre-hidden( through stylesheets ) div inside another visible div is visible." ) ;
div = jQuery ( "<div><div style='display: none'></div></div>" ) . children ( "div" ) ;
div . show ( ) . appendTo ( "#qunit-fixture" ) ;
assert . equal ( div . css ( "display" ) , "block" , "Make sure a detached, pre-hidden( through inline style ) div inside another visible div is visible." ) ;
2012-05-29 02:25:04 +00:00
2015-08-16 06:59:58 +00:00
div = jQuery ( "div.hidden" ) ;
2012-05-29 02:25:04 +00:00
div . detach ( ) . show ( ) ;
2015-11-11 17:50:37 +00:00
assert . equal ( div . css ( "display" ) , "block" , "Make sure a detached( through detach() ), pre-hidden div is visible." ) ;
2012-05-29 02:25:04 +00:00
div . remove ( ) ;
2015-11-11 17:50:37 +00:00
span = jQuery ( "<span>" ) ;
2015-08-16 06:59:58 +00:00
span . appendTo ( "#qunit-fixture" ) . detach ( ) . show ( ) . appendTo ( "#qunit-fixture" ) ;
2015-11-11 17:50:37 +00:00
assert . equal ( span . css ( "display" ) , "inline" , "Make sure a detached( through detach() ), pre-hidden span has default display." ) ;
2012-05-29 02:25:04 +00:00
span . remove ( ) ;
2015-11-11 17:50:37 +00:00
div = jQuery ( "<div>" ) ;
2015-08-16 06:59:58 +00:00
div . show ( ) . appendTo ( "#qunit-fixture" ) ;
2015-11-11 17:50:37 +00:00
assert . ok ( ! ! div . get ( 0 ) . style . display , "Make sure not hidden div has a inline style." ) ;
2012-07-02 15:30:22 +00:00
div . remove ( ) ;
2012-05-29 02:25:04 +00:00
2015-11-11 17:50:37 +00:00
div = jQuery ( document . createElement ( "div" ) ) ;
2015-08-16 06:59:58 +00:00
div . show ( ) . appendTo ( "#qunit-fixture" ) ;
2015-11-11 17:50:37 +00:00
assert . equal ( div . css ( "display" ) , "block" , "Make sure a pre-created element has default display." ) ;
div . remove ( ) ;
2012-05-29 02:25:04 +00:00
2015-08-16 06:59:58 +00:00
div = jQuery ( "<div style='display: inline'/>" ) ;
div . show ( ) . appendTo ( "#qunit-fixture" ) ;
2015-11-11 17:50:37 +00:00
assert . equal ( div . css ( "display" ) , "inline" , "Make sure that element has same display when it was created." ) ;
2012-07-02 15:30:22 +00:00
div . remove ( ) ;
2012-09-28 20:56:49 +00:00
2015-08-16 06:59:58 +00:00
tr = jQuery ( "<tr/>" ) ;
jQuery ( "#table" ) . append ( tr ) ;
2015-11-11 17:50:37 +00:00
trDisplay = tr . css ( "display" ) ;
2012-09-28 20:56:49 +00:00
tr . detach ( ) . hide ( ) . show ( ) ;
2015-11-11 17:50:37 +00:00
assert . equal ( tr [ 0 ] . style . display , trDisplay , "For detached tr elements, display should always be like for attached trs" ) ;
2012-09-28 20:56:49 +00:00
tr . remove ( ) ;
2015-08-16 06:59:58 +00:00
span = jQuery ( "<span/>" ) . hide ( ) . show ( ) ;
2015-11-11 17:50:37 +00:00
assert . equal ( span [ 0 ] . style . display , "inline" , "For detached span elements, display should always be inline" ) ;
2012-09-28 20:56:49 +00:00
span . remove ( ) ;
2015-08-16 06:59:58 +00:00
} ) ;
2012-05-29 02:25:04 +00:00
2015-10-09 19:52:29 +00:00
QUnit . test ( "hide hidden elements (bug #7141)" , function ( assert ) {
assert . expect ( 3 ) ;
var div = jQuery ( "<div style='display:none'></div>" ) . 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 ( ) ;
} ) ;
2015-11-11 17:50:37 +00:00
QUnit . test ( "show() resolves correct default display #10227" , 4 , function ( assert ) {
var html = jQuery ( document . documentElement ) ,
body = jQuery ( "body" ) ;
body . append ( "<p class='ddisplay'>a<style>body{display:none}</style></p>" ) ;
assert . equal ( body . css ( "display" ) , "none" , "Initial display for body element: none" ) ;
body . show ( ) ;
assert . equal ( body . css ( "display" ) , "block" , "Correct display for body element: block" ) ;
body . append ( "<p class='ddisplay'>a<style>html{display:none}</style></p>" ) ;
assert . equal ( html . css ( "display" ) , "none" , "Initial display for html element: none" ) ;
html . show ( ) ;
assert . equal ( html . css ( "display" ) , "block" , "Correct display for html element: block" ) ;
jQuery ( ".ddisplay" ) . remove ( ) ;
} ) ;
2015-10-09 19:52:29 +00:00
2015-11-11 17:50:37 +00:00
QUnit . test ( "show() resolves correct default display when iframe display:none #12904" , function ( assert ) {
assert . expect ( 2 ) ;
var ddisplay = jQuery (
"<p id='ddisplay'>a<style>p{display:none}iframe{display:none !important}</style></p>"
) . appendTo ( "body" ) ;
assert . equal ( ddisplay . css ( "display" ) , "none" , "Initial display: none" ) ;
ddisplay . show ( ) ;
assert . equal ( ddisplay . css ( "display" ) , "block" , "Correct display: block" ) ;
ddisplay . remove ( ) ;
} ) ;
QUnit . test ( "toggle()" , function ( assert ) {
2015-08-16 06:59:58 +00:00
assert . expect ( 9 ) ;
2015-11-11 17:50:37 +00:00
2013-04-09 15:45:09 +00:00
var div , oldHide ,
2015-08-16 06:59:58 +00:00
x = jQuery ( "#foo" ) ;
2012-07-26 01:58:59 +00:00
2015-08-16 06:59:58 +00:00
assert . ok ( x . is ( ":visible" ) , "is visible" ) ;
2012-05-29 02:25:04 +00:00
x . toggle ( ) ;
2015-08-16 06:59:58 +00:00
assert . ok ( x . is ( ":hidden" ) , "is hidden" ) ;
2012-05-29 02:25:04 +00:00
x . toggle ( ) ;
2015-08-16 06:59:58 +00:00
assert . ok ( x . is ( ":visible" ) , "is visible again" ) ;
2012-05-29 02:25:04 +00:00
2015-08-16 06:59:58 +00:00
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" ) ;
2012-07-26 01:58:59 +00:00
2015-08-16 06:59:58 +00:00
div = jQuery ( "<div style='display:none'><div></div></div>" ) . appendTo ( "#qunit-fixture" ) ;
x = div . find ( "div" ) ;
2015-08-16 03:45:28 +00:00
assert . strictEqual ( x . toggle ( ) . css ( "display" ) , "none" , "is hidden" ) ;
assert . strictEqual ( x . toggle ( ) . css ( "display" ) , "block" , "is visible" ) ;
2012-07-26 01:58:59 +00:00
2012-07-26 01:24:49 +00:00
// Ensure hide() is called when toggled (#12148)
2013-04-09 15:45:09 +00:00
oldHide = jQuery . fn . hide ;
2012-07-26 01:24:49 +00:00
jQuery . fn . hide = function ( ) {
2015-08-16 03:45:28 +00:00
assert . ok ( true , name + " method called on toggle" ) ;
2012-07-26 01:24:49 +00:00
return oldHide . apply ( this , arguments ) ;
} ;
x . toggle ( name === "show" ) ;
jQuery . fn . hide = oldHide ;
2015-08-16 06:59:58 +00:00
} ) ;
2012-05-29 02:25:04 +00:00
2015-08-16 06:59:58 +00:00
QUnit . test ( "jQuery.css(elem, 'height') doesn't clear radio buttons (bug #1095)" , function ( assert ) {
assert . expect ( 4 ) ;
2009-03-22 23:25:03 +00:00
2015-08-16 06:59:58 +00:00
var $checkedtest = jQuery ( "#checkedtest" ) ;
jQuery . css ( $checkedtest [ 0 ] , "height" ) ;
2013-02-19 04:52:29 +00:00
2015-08-16 06:59:58 +00:00
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." ) ;
} ) ;
2010-10-05 18:23:10 +00:00
2015-08-16 06:59:58 +00:00
QUnit . test ( "internal ref to elem.runtimeStyle (bug #7608)" , function ( assert ) {
assert . expect ( 1 ) ;
2011-01-18 00:55:40 +00:00
var result = true ;
2011-10-22 20:08:14 +00:00
2011-01-10 18:17:08 +00:00
try {
2015-08-16 06:59:58 +00:00
jQuery ( "#foo" ) . css ( { "width" : "0%" } ) . css ( "width" ) ;
} catch ( e ) {
2011-01-10 18:17:08 +00:00
result = false ;
}
2015-08-16 03:45:28 +00:00
assert . ok ( result , "elem.runtimeStyle does not throw exception" ) ;
2015-08-16 06:59:58 +00:00
} ) ;
2011-03-24 19:41:46 +00:00
2015-05-08 03:16:18 +00:00
QUnit . test ( "computed margins (trac-3333; gh-2237)" , function ( assert ) {
assert . expect ( 2 ) ;
var $div = jQuery ( "#foo" ) ,
$child = jQuery ( "#en" ) ;
2011-03-24 19:41:46 +00:00
2015-08-16 06:59:58 +00:00
$div . css ( {
2012-07-05 19:52:13 +00:00
"width" : "1px" ,
"marginRight" : 0
2015-08-16 06:59:58 +00:00
} ) ;
2015-05-08 03:16:18 +00:00
assert . equal ( $div . css ( "marginRight" ) , "0px" ,
"marginRight correctly calculated with a width and display block" ) ;
2015-11-11 17:50:37 +00:00
$div . css ( {
2015-05-08 03:16:18 +00:00
position : "absolute" ,
top : 0 ,
left : 0 ,
width : "100px"
2015-11-11 17:50:37 +00:00
} ) ;
$child . css ( {
2015-05-08 03:16:18 +00:00
width : "50px" ,
margin : "auto"
2015-11-11 17:50:37 +00:00
} ) ;
2015-05-08 03:16:18 +00:00
assert . equal ( $child . css ( "marginLeft" ) , "25px" , "auto margins are computed to pixels" ) ;
2015-11-11 17:50:37 +00:00
} ) ;
2011-04-12 04:17:07 +00:00
2015-08-16 06:59:58 +00:00
QUnit . test ( "box model properties incorrectly returning % instead of px, see #10639 and #12088" , function ( assert ) {
2015-08-16 03:45:28 +00:00
assert . expect ( 2 ) ;
2012-10-15 16:11:20 +00:00
2015-08-16 06:59:58 +00:00
var container = jQuery ( "<div/>" ) . width ( 400 ) . appendTo ( "#qunit-fixture" ) ,
el = jQuery ( "<div/>" ) . css ( { "width" : "50%" , "marginRight" : "50%" } ) . appendTo ( container ) ,
el2 = jQuery ( "<div/>" ) . css ( { "width" : "50%" , "minWidth" : "300px" , "marginLeft" : "25%" } ) . appendTo ( container ) ;
2012-07-23 01:58:23 +00:00
2015-08-16 06:59:58 +00:00
assert . equal ( el . css ( "marginRight" ) , "200px" , "css('marginRight') returning % instead of px, see #10639" ) ;
assert . equal ( el2 . css ( "marginLeft" ) , "100px" , "css('marginLeft') returning incorrect pixel value, see #12088" ) ;
} ) ;
2012-07-23 01:58:23 +00:00
2015-08-16 06:59:58 +00:00
QUnit . test ( "jQuery.cssProps behavior, (bug #8402)" , function ( assert ) {
2015-08-16 03:45:28 +00:00
assert . expect ( 2 ) ;
2012-10-15 16:11:20 +00:00
2015-08-16 06:59:58 +00:00
var div = jQuery ( "<div>" ) . appendTo ( document . body ) . css ( {
2012-07-05 19:52:13 +00:00
"position" : "absolute" ,
"top" : 0 ,
"left" : 10
2015-08-16 06:59:58 +00:00
} ) ;
2011-04-11 18:33:52 +00:00
jQuery . cssProps . top = "left" ;
2015-08-16 06:59:58 +00:00
assert . equal ( div . css ( "top" ) , "10px" , "the fixed property is used when accessing the computed style" ) ;
div . css ( "top" , "100px" ) ;
assert . equal ( div [ 0 ] . style . left , "100px" , "the fixed property is used when setting the style" ) ;
2011-04-11 18:33:52 +00:00
// cleanup jQuery.cssProps
jQuery . cssProps . top = undefined ;
2015-08-16 06:59:58 +00:00
} ) ;
2011-04-22 04:02:08 +00:00
2015-08-16 06:59:58 +00:00
QUnit . test ( "widows & orphans #8936" , function ( assert ) {
2011-04-22 04:02:08 +00:00
2015-08-16 06:59:58 +00:00
var $p = jQuery ( "<p>" ) . appendTo ( "#qunit-fixture" ) ;
2011-04-22 04:02:08 +00:00
2015-08-16 03:45:28 +00:00
assert . expect ( 2 ) ;
2013-09-07 00:46:55 +00:00
2015-08-16 06:59:58 +00:00
$p . css ( {
2013-09-07 00:46:55 +00:00
"widows" : 3 ,
"orphans" : 3
2015-08-16 06:59:58 +00:00
} ) ;
2013-09-07 00:46:55 +00:00
2015-08-16 06:59:58 +00:00
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" ) ;
2011-04-22 04:02:08 +00:00
$p . remove ( ) ;
2015-08-16 06:59:58 +00:00
} ) ;
2011-06-14 19:59:22 +00:00
2015-08-16 06:59:58 +00:00
QUnit . test ( "can't get css for disconnected in IE<9, see #10254 and #8388" , function ( assert ) {
2015-08-16 03:45:28 +00:00
assert . expect ( 2 ) ;
2013-04-09 15:45:09 +00:00
var span , div ;
span = jQuery ( "<span/>" ) . css ( "background-image" , "url(data/1x1.jpg)" ) ;
2015-08-16 03:45:28 +00:00
assert . notEqual ( span . css ( "background-image" ) , null , "can't get background-image in IE<9, see #10254" ) ;
2011-10-22 20:08:14 +00:00
2013-04-09 15:45:09 +00:00
div = jQuery ( "<div/>" ) . css ( "top" , 10 ) ;
2015-08-16 03:45:28 +00:00
assert . equal ( div . css ( "top" ) , "10px" , "can't get top in IE<9, see #8388" ) ;
2015-08-16 06:59:58 +00:00
} ) ;
2011-10-22 20:08:14 +00:00
2016-01-27 16:36:34 +00:00
QUnit . test ( "Ensure styles are retrieving from parsed html on document fragments" , function ( assert ) {
assert . expect ( 1 ) ;
var $span = jQuery (
jQuery . parseHTML ( "<span style=\"font-family: Cuprum,sans-serif; font-size: 14px; color: #999999;\">some text</span>" )
) ;
assert . equal ( $span . css ( "font-size" ) , "14px" , "Font-size retrievable on parsed HTML node" ) ;
} ) ;
2015-08-16 06:59:58 +00:00
QUnit . test ( "can't get background-position in IE<9, see #10796" , function ( assert ) {
2011-12-06 21:44:32 +00:00
var div = jQuery ( "<div/>" ) . appendTo ( "#qunit-fixture" ) ,
units = [
"0 0" ,
"12px 12px" ,
"13px 12em" ,
"12em 13px" ,
"12em center" ,
"+12em center" ,
"12.2em center" ,
2012-06-21 19:30:24 +00:00
"center center"
2011-12-06 21:44:32 +00:00
] ,
l = units . length ,
i = 0 ;
2015-08-16 03:45:28 +00:00
assert . expect ( l ) ;
2011-12-06 21:44:32 +00:00
2015-08-16 06:59:58 +00:00
for ( ; i < l ; i ++ ) {
2011-12-06 21:44:32 +00:00
div . css ( "background-position" , units [ i ] ) ;
2015-08-16 03:45:28 +00:00
assert . ok ( div . css ( "background-position" ) , "can't get background-position in IE<9, see #10796" ) ;
2011-12-06 21:44:32 +00:00
}
2015-08-16 06:59:58 +00:00
} ) ;
2011-12-06 21:44:32 +00:00
2012-06-16 01:20:41 +00:00
if ( jQuery . fn . offset ) {
2015-08-16 06:59:58 +00:00
QUnit . test ( "percentage properties for left and top should be transformed to pixels, see #9505" , function ( assert ) {
2015-08-16 03:45:28 +00:00
assert . expect ( 2 ) ;
2015-08-16 06:59:58 +00:00
var parent = jQuery ( "<div style='position:relative;width:200px;height:200px;margin:0;padding:0;border-width:0'></div>" ) . appendTo ( "#qunit-fixture" ) ,
div = jQuery ( "<div style='position: absolute; width: 20px; height: 20px; top:50%; left:50%'></div>" ) . appendTo ( parent ) ;
2012-06-16 01:20:41 +00:00
2015-08-16 06:59:58 +00:00
assert . equal ( div . css ( "top" ) , "100px" , "position properties not transformed to pixels, see #9505" ) ;
assert . equal ( div . css ( "left" ) , "100px" , "position properties not transformed to pixels, see #9505" ) ;
} ) ;
2012-06-16 01:20:41 +00:00
}
2015-12-30 07:40:08 +00:00
QUnit . test ( "Do not append px (#9548, #12990, #2792)" , function ( assert ) {
assert . expect ( 3 ) ;
2012-12-01 22:11:56 +00:00
2015-08-16 06:59:58 +00:00
var $div = jQuery ( "<div>" ) . appendTo ( "#qunit-fixture" ) ;
2012-10-15 16:11:20 +00:00
2012-12-01 22:11:56 +00:00
$div . css ( "fill-opacity" , 1 ) ;
2015-08-16 06:59:58 +00:00
2014-02-13 23:57:27 +00:00
// Support: Android 2.3 (no support for fill-opacity)
2015-12-30 07:40:08 +00:00
if ( $div . css ( "fill-opacity" ) !== undefined ) {
2015-08-16 03:45:28 +00:00
assert . equal ( $div . css ( "fill-opacity" ) , 1 , "Do not append px to 'fill-opacity'" ) ;
2014-02-13 23:57:27 +00:00
} else {
2015-08-16 03:45:28 +00:00
assert . ok ( true , "No support for fill-opacity CSS property" ) ;
2014-02-13 23:57:27 +00:00
}
2012-12-01 22:11:56 +00:00
$div . css ( "column-count" , 1 ) ;
2015-12-30 07:40:08 +00:00
if ( $div . css ( "column-count" ) !== undefined ) {
2015-08-16 06:59:58 +00:00
assert . equal ( $div . css ( "column-count" ) , 1 , "Do not append px to 'column-count'" ) ;
2012-12-01 22:11:56 +00:00
} else {
2015-08-16 03:45:28 +00:00
assert . ok ( true , "No support for column-count CSS property" ) ;
2012-12-01 22:11:56 +00:00
}
2015-12-30 07:40:08 +00:00
$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" ) ;
}
2015-08-16 06:59:58 +00:00
} ) ;
2011-12-07 01:32:26 +00:00
2015-08-16 06:59:58 +00:00
QUnit . test ( "css('width') and css('height') should respect box-sizing, see #11004" , function ( assert ) {
2015-08-16 03:45:28 +00:00
assert . expect ( 4 ) ;
2012-10-15 16:31:27 +00:00
2015-11-16 20:25:05 +00:00
// Support: Firefox<29, Android 2.3 (Prefixed box-sizing versions).
var el _dis = jQuery ( "<div style='width:300px;height:300px;margin:2px;padding:2px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;'>test</div>" ) ,
el = el _dis . clone ( ) . appendTo ( "#qunit-fixture" ) ;
2012-05-21 17:44:19 +00:00
2015-08-16 06:59:58 +00:00
assert . equal ( el . css ( "width" ) , el . css ( "width" , el . css ( "width" ) ) . css ( "width" ) , "css('width') is not respecting box-sizing, see #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 #11004" ) ;
assert . equal ( el . css ( "height" ) , el . css ( "height" , el . css ( "height" ) ) . css ( "height" ) , "css('height') is not respecting box-sizing, see #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 #11004" ) ;
} ) ;
2012-04-10 21:18:00 +00:00
2015-08-16 03:45:28 +00:00
testIframeWithCallback (
"css('width') should work correctly before document ready (#14084)" ,
2013-08-26 22:54:13 +00:00
"css/cssWidthBeforeDocReady.html" ,
2015-08-16 03:45:28 +00:00
function ( cssWidthBeforeDocReady , assert ) {
assert . expect ( 1 ) ;
assert . strictEqual ( cssWidthBeforeDocReady , "100px" , "elem.css('width') works correctly before document ready" ) ;
2013-08-26 22:54:13 +00:00
}
) ;
2013-08-21 22:33:57 +00:00
2015-08-16 06:59:58 +00:00
QUnit . test ( "certain css values of 'normal' should be convertable to a number, see #8627" , function ( assert ) {
2015-09-08 00:26:29 +00:00
assert . expect ( 3 ) ;
2012-10-15 16:11:20 +00:00
2015-08-16 06:59:58 +00:00
var el = jQuery ( "<div style='letter-spacing:normal;font-weight:normal;'>test</div>" ) . appendTo ( "#qunit-fixture" ) ;
2012-06-06 23:03:10 +00:00
2015-08-16 06:59:58 +00:00
assert . ok ( jQuery . isNumeric ( parseFloat ( el . css ( "letterSpacing" ) ) ) , "css('letterSpacing') not convertable to number, see #8627" ) ;
assert . ok ( jQuery . isNumeric ( parseFloat ( el . css ( "fontWeight" ) ) ) , "css('fontWeight') not convertable to number, see #8627" ) ;
2015-08-16 03:45:28 +00:00
assert . equal ( typeof el . css ( "fontWeight" ) , "string" , ".css() returns a string" ) ;
2015-08-16 06:59:58 +00:00
} ) ;
2012-06-06 23:03:10 +00:00
2012-09-30 21:41:42 +00:00
// only run this test in IE9
if ( document . documentMode === 9 ) {
2015-08-16 03:45:28 +00:00
QUnit . test ( ".css('filter') returns a string in IE9, see #12537" , function ( assert ) {
assert . expect ( 1 ) ;
2015-07-29 15:10:04 +00:00
2015-08-16 06:59:58 +00:00
assert . equal ( jQuery ( "<div style='-ms-filter:\"progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#ECECEC)\";'></div>" ) . css ( "filter" ) , "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#ECECEC)" , "IE9 returns the correct value from css('filter')." ) ;
} ) ;
2012-09-30 21:41:42 +00:00
}
2015-08-16 03:45:28 +00:00
QUnit . test ( "cssHooks - expand" , function ( assert ) {
assert . expect ( 15 ) ;
2011-12-09 01:01:23 +00:00
var result ,
properties = {
margin : [ "marginTop" , "marginRight" , "marginBottom" , "marginLeft" ] ,
2015-08-16 06:59:58 +00:00
borderWidth : [ "borderTopWidth" , "borderRightWidth" , "borderBottomWidth" , "borderLeftWidth" ] ,
2011-12-09 01:01:23 +00:00
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 ;
2015-08-16 06:59:58 +00:00
} ) ;
2011-12-09 01:01:23 +00:00
result = hook . expand ( 10 ) ;
2015-08-16 03:45:28 +00:00
assert . deepEqual ( result , expected , property + " expands properly with a number" ) ;
2011-12-09 01:01:23 +00:00
jQuery . each ( keys , function ( _ , key ) {
expected [ key ] = "10px" ;
2015-08-16 06:59:58 +00:00
} ) ;
2011-12-09 01:01:23 +00:00
result = hook . expand ( "10px" ) ;
2015-08-16 03:45:28 +00:00
assert . deepEqual ( result , expected , property + " expands properly with '10px'" ) ;
2011-12-09 01:01:23 +00:00
2015-08-16 06:59:58 +00:00
expected [ keys [ 1 ] ] = expected [ keys [ 3 ] ] = "20px" ;
2011-12-09 01:01:23 +00:00
result = hook . expand ( "10px 20px" ) ;
2015-08-16 03:45:28 +00:00
assert . deepEqual ( result , expected , property + " expands properly with '10px 20px'" ) ;
2011-12-09 01:01:23 +00:00
2015-08-16 06:59:58 +00:00
expected [ keys [ 2 ] ] = "30px" ;
2011-12-09 01:01:23 +00:00
result = hook . expand ( "10px 20px 30px" ) ;
2015-08-16 03:45:28 +00:00
assert . deepEqual ( result , expected , property + " expands properly with '10px 20px 30px'" ) ;
2011-12-09 01:01:23 +00:00
2015-08-16 06:59:58 +00:00
expected [ keys [ 3 ] ] = "40px" ;
2011-12-09 01:01:23 +00:00
result = hook . expand ( "10px 20px 30px 40px" ) ;
2015-08-16 03:45:28 +00:00
assert . deepEqual ( result , expected , property + " expands properly with '10px 20px 30px 40px'" ) ;
2011-12-09 01:01:23 +00:00
2015-08-16 06:59:58 +00:00
} ) ;
2011-12-09 01:01:23 +00:00
2015-08-16 06:59:58 +00:00
} ) ;
2012-06-11 01:54:16 +00:00
2015-08-16 03:45:28 +00:00
QUnit . test ( "css opacity consistency across browsers (#12685)" , function ( assert ) {
assert . expect ( 4 ) ;
2012-10-22 03:40:37 +00:00
2013-04-09 15:45:09 +00:00
var el ,
2015-08-16 06:59:58 +00:00
fixture = jQuery ( "#qunit-fixture" ) ;
2013-04-09 15:45:09 +00:00
// Append style element
2015-08-16 06:59:58 +00:00
jQuery ( "<style>.opacityWithSpaces_t12685 { opacity: 0.1; filter: alpha(opacity = 10); } .opacityNoSpaces_t12685 { opacity: 0.2; filter: alpha(opacity=20); }</style>" ) . appendTo ( fixture ) ;
2013-04-09 15:45:09 +00:00
2015-08-16 06:59:58 +00:00
el = jQuery ( "<div class='opacityWithSpaces_t12685'></div>" ) . appendTo ( fixture ) ;
2013-01-21 21:14:56 +00:00
2015-08-16 06:59:58 +00:00
assert . equal ( Math . round ( el . css ( "opacity" ) * 100 ) , 10 , "opacity from style sheet (filter:alpha with spaces)" ) ;
el . removeClass ( "opacityWithSpaces_t12685" ) . addClass ( "opacityNoSpaces_t12685" ) ;
assert . equal ( Math . round ( el . css ( "opacity" ) * 100 ) , 20 , "opacity from style sheet (filter:alpha without spaces)" ) ;
2013-01-21 21:14:56 +00:00
el . css ( "opacity" , 0.3 ) ;
2015-08-16 06:59:58 +00:00
assert . equal ( Math . round ( el . css ( "opacity" ) * 100 ) , 30 , "override opacity" ) ;
2013-01-21 21:14:56 +00:00
el . css ( "opacity" , "" ) ;
2015-08-16 06:59:58 +00:00
assert . equal ( Math . round ( el . css ( "opacity" ) * 100 ) , 20 , "remove opacity override" ) ;
} ) ;
2013-01-21 21:14:56 +00:00
2015-11-10 18:26:15 +00:00
QUnit [ jQuery . find . compile ? "test" : "skip" ] ( ":visible/:hidden selectors" , function ( assert ) {
2015-08-16 03:45:28 +00:00
assert . expect ( 17 ) ;
2014-07-17 23:53:57 +00:00
2015-05-12 13:58:55 +00:00
var $div , $table , $a ;
2013-01-21 21:14:56 +00:00
2015-08-16 06:59:58 +00:00
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 (#10267)." ) ;
assert . ok ( ! jQuery ( document ) . is ( ":visible" ) , "Calling is(':visible') on document does not throw an exception (#10267)." ) ;
2013-01-21 21:14:56 +00:00
2015-08-16 06:59:58 +00:00
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" ) ;
2013-01-21 21:14:56 +00:00
2015-08-16 03:45:28 +00:00
assert . ok ( jQuery ( "#siblingspan" ) . is ( ":visible" ) , "Span with no content is visible" ) ;
2015-05-08 22:27:54 +00:00
$div = jQuery ( "<div><span></span></div>" ) . appendTo ( "#qunit-fixture" ) ;
2015-08-16 03:45:28 +00:00
assert . equal ( $div . find ( ":visible" ) . length , 1 , "Span with no content is visible" ) ;
2015-05-08 22:27:54 +00:00
$div . css ( { width : 0 , height : 0 , overflow : "hidden" } ) ;
2015-08-16 03:45:28 +00:00
assert . ok ( $div . is ( ":visible" ) , "Div with width and height of 0 is still visible (gh-2227)" ) ;
2015-05-08 22:27:54 +00:00
2015-05-12 13:58:55 +00:00
// Safari 6-7 and iOS 6-7 report 0 width for br elements
// When newer browsers propagate, re-enable this test
// $br = jQuery( "<br/>" ).appendTo( "#qunit-fixture" );
// ok( $br.is( ":visible" ), "br element is visible" );
2013-01-21 21:14:56 +00:00
2015-08-16 06:59:58 +00:00
$table = jQuery ( "#table" ) ;
$table . html ( "<tr><td style='display:none'>cell</td><td>cell</td></tr>" ) ;
assert . equal ( jQuery ( "#table td:visible" ) . length , 1 , "hidden cell is not perceived as visible (#4512). Works on table elements" ) ;
$table . css ( "display" , "none" ) . html ( "<tr><td>cell</td><td>cell</td></tr>" ) ;
assert . equal ( jQuery ( "#table td:visible" ) . length , 0 , "hidden cell children not perceived as visible (#4512)" ) ;
2013-01-21 23:03:07 +00:00
2015-09-08 00:26:29 +00:00
assert . t ( "Is Visible" , "#qunit-fixture div:visible:lt(2)" , [ "foo" , "nothiddendiv" ] ) ;
assert . t ( "Is Not Hidden" , "#qunit-fixture:hidden" , [ ] ) ;
2015-11-11 17:50:37 +00:00
assert . t ( "Is Hidden" , "#form input:hidden" , [ "hidden1" , "hidden2" ] ) ;
2015-05-08 22:27:54 +00:00
$a = jQuery ( "<a href='#'><h1>Header</h1></a>" ) . appendTo ( "#qunit-fixture" ) ;
2015-08-16 03:45:28 +00:00
assert . ok ( $a . is ( ":visible" ) , "Anchor tag with flow content is visible (gh-2227)" ) ;
2015-08-16 06:59:58 +00:00
} ) ;
2012-10-22 03:40:37 +00:00
2015-08-16 03:45:28 +00:00
QUnit . test ( "Keep the last style if the new one isn't recognized by the browser (#14836)" , function ( assert ) {
assert . expect ( 2 ) ;
2014-03-09 23:59:14 +00:00
var el ;
2014-03-10 18:53:50 +00:00
el = jQuery ( "<div></div>" ) . css ( "position" , "absolute" ) . css ( "position" , "fake value" ) ;
2015-08-16 03:45:28 +00:00
assert . equal ( el . css ( "position" ) , "absolute" , "The old style is kept when setting an unrecognized value" ) ;
2014-03-10 18:53:50 +00:00
el = jQuery ( "<div></div>" ) . css ( "position" , "absolute" ) . css ( "position" , " " ) ;
2015-08-16 03:45:28 +00:00
assert . equal ( el . css ( "position" ) , "absolute" , "The old style is kept when setting to a space" ) ;
2015-08-16 06:59:58 +00:00
} ) ;
2014-03-09 23:59:14 +00:00
2015-08-16 03:45:28 +00:00
QUnit . test ( "Reset the style if set to an empty string" , function ( assert ) {
assert . expect ( 1 ) ;
2014-03-10 18:53:50 +00:00
var el = jQuery ( "<div></div>" ) . css ( "position" , "absolute" ) . css ( "position" , "" ) ;
2015-08-16 06:59:58 +00:00
2014-03-10 18:53:50 +00:00
// Some browsers return an empty string; others "static". Both those cases mean the style
// was reset successfully so accept them both.
2015-08-16 03:45:28 +00:00
assert . equal ( el . css ( "position" ) || "static" , "static" ,
2014-03-10 18:53:50 +00:00
"The style can be reset by setting to an empty string" ) ;
2015-08-16 06:59:58 +00:00
} ) ;
2013-09-29 16:06:32 +00:00
2015-09-08 00:26:29 +00:00
QUnit . test (
"Clearing a Cloned Element's Style Shouldn't Clear the Original Element's Style (#8908)" ,
24 ,
function ( assert ) {
var baseUrl = document . location . href . replace ( /([^\/]*)$/ , "" ) ;
var done = assert . async ( ) ;
var styles = [ {
name : "backgroundAttachment" ,
value : [ "fixed" ] ,
expected : [ "scroll" ]
2015-11-11 17:50:37 +00:00
} , {
2015-09-08 00:26:29 +00:00
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 ) {
assert . ok ( true , style . name + ": style isn't supported and therefore not an issue" ) ;
assert . ok ( true ) ;
return true ;
}
2012-11-18 22:03:38 +00:00
2015-09-08 00:26:29 +00:00
$source . css ( style . name , style . value [ 0 ] ) ;
$children . css ( style . name , style . value [ 0 ] ) ;
2012-11-18 22:03:38 +00:00
2015-09-08 00:26:29 +00:00
$clone = $source . clone ( ) ;
$clonedChildren = $clone . children ( ) ;
2012-11-18 22:03:38 +00:00
2015-09-08 00:26:29 +00:00
$clone . css ( style . name , "" ) ;
$clonedChildren . css ( style . name , "" ) ;
2012-11-18 22:03:38 +00:00
2015-09-08 00:26:29 +00:00
window . setTimeout ( function ( ) {
assert . notEqual ( $clone . css ( style . name ) , style . value [ 0 ] , "Cloned css was changed" ) ;
2013-01-08 02:08:47 +00:00
2015-09-08 00:26:29 +00:00
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 ( "," ) ) ;
2012-11-18 22:03:38 +00:00
2015-09-08 00:26:29 +00:00
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 ) ;
} ) ;
2012-11-18 22:03:38 +00:00
2015-09-08 00:26:29 +00:00
window . setTimeout ( done , 1000 ) ;
}
) ;
2012-11-18 22:03:38 +00:00
2015-11-11 17:50:37 +00:00
QUnit . test ( "Make sure initialized display value for disconnected nodes is correct (#13310)" , 4 , function ( assert ) {
var done = assert . async ( ) ;
var display = jQuery ( "#display" ) . css ( "display" ) ,
div = jQuery ( "<div/>" ) ;
assert . equal ( div . css ( "display" , "inline" ) . hide ( ) . show ( ) . appendTo ( "body" ) . css ( "display" ) , "inline" , "Initialized display value has returned" ) ;
div . remove ( ) ;
div . css ( "display" , "none" ) . hide ( ) ;
assert . 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 ( ) {
assert . equal ( div . css ( "display" ) , "inline-block" , "Initialized display value has returned" ) ;
div . remove ( ) ;
done ( ) ;
} ) ;
assert . 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 ] ) ;
} ) ;
2015-11-11 16:56:11 +00:00
QUnit . test ( "show() after hide() should always set display to initial value (#14750)" , function ( assert ) {
assert . expect ( 1 ) ;
var div = jQuery ( "<div />" ) ,
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" ) ;
} ) ;
2015-07-27 20:14:48 +00:00
// Support: IE < 11
2013-08-07 21:10:35 +00:00
// We have to jump through the hoops here in order to test work with "order" CSS property,
2013-08-19 18:16:16 +00:00
// that some browsers do not support. This test is not, strictly speaking, correct,
2013-08-07 21:10:35 +00:00
// but it's the best that we can do.
2015-08-16 06:59:58 +00:00
( function ( ) {
2013-08-07 21:10:35 +00:00
var style = document . createElement ( "div" ) . style ,
2013-08-19 17:53:31 +00:00
exist = "order" in style || "WebkitOrder" in style ;
2013-08-07 21:10:35 +00:00
if ( exist ) {
2015-08-16 03:45:28 +00:00
QUnit . test ( "Don't append px to CSS \"order\" value (#14049)" , function ( assert ) {
assert . expect ( 1 ) ;
2015-07-29 15:10:04 +00:00
2013-08-07 21:10:35 +00:00
var $elem = jQuery ( "<div/>" ) ;
$elem . css ( "order" , 2 ) ;
2015-08-16 03:45:28 +00:00
assert . equal ( $elem . css ( "order" ) , "2" , "2 on order" ) ;
2015-08-16 06:59:58 +00:00
} ) ;
2013-08-07 21:10:35 +00:00
}
2015-08-16 06:59:58 +00:00
} ) ( ) ;
2014-05-18 16:47:37 +00:00
2015-08-16 03:45:28 +00:00
QUnit . test ( "Do not throw on frame elements from css method (#15098)" , function ( assert ) {
assert . expect ( 1 ) ;
2015-07-29 15:10:04 +00:00
2014-05-18 16:47:37 +00:00
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 ( "<!doctype html><html><body><div>Hi</div></body></html>" ) ;
frameDoc . close ( ) ;
frameWrapDiv . style . display = "none" ;
try {
jQuery ( frameDoc . body ) . css ( "direction" ) ;
2015-08-16 03:45:28 +00:00
assert . ok ( true , "It didn't throw" ) ;
2014-05-18 16:47:37 +00:00
} catch ( _ ) {
2015-08-16 03:45:28 +00:00
assert . ok ( false , "It did throw" ) ;
2014-05-18 16:47:37 +00:00
}
2015-08-16 06:59:58 +00:00
} ) ;
2015-05-11 21:23:09 +00:00
( function ( ) {
var vendorPrefixes = [ "Webkit" , "Moz" , "ms" ] ;
function resetCssPropsFor ( name ) {
delete jQuery . cssProps [ name ] ;
jQuery . each ( vendorPrefixes , function ( index , prefix ) {
delete jQuery . cssProps [ prefix + name [ 0 ] . toUpperCase ( ) + name . slice ( 1 ) ] ;
} ) ;
}
2015-08-16 03:45:28 +00:00
QUnit . test ( "Don't default to a cached previously used wrong prefixed name (gh-2015)" , function ( assert ) {
2015-08-16 06:59:58 +00:00
2015-05-11 21:23:09 +00:00
// 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 ;
}
} ) ;
}
2015-08-16 03:45:28 +00:00
assert . expect ( ! ! appearanceName + ! ! transformName + 1 ) ;
2015-05-11 21:23:09 +00:00
resetCssPropsFor ( "appearance" ) ;
resetCssPropsFor ( "transform" ) ;
elem = jQuery ( "<div/>" )
. 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 ) {
2015-08-16 03:45:28 +00:00
assert . equal ( elemStyle [ appearanceName ] , "none" , "setting properly-prefixed appearance" ) ;
2015-05-11 21:23:09 +00:00
}
if ( transformName ) {
2015-08-16 03:45:28 +00:00
assert . equal ( elemStyle [ transformName ] , transformVal , "setting properly-prefixed transform" ) ;
2015-05-11 21:23:09 +00:00
}
2015-08-16 03:45:28 +00:00
assert . equal ( elemStyle [ "undefined" ] , undefined , "Nothing writes to node.style.undefined" ) ;
2015-05-11 21:23:09 +00:00
} ) ;
2015-11-11 17:50:37 +00:00
QUnit . test ( "Don't detect fake set properties on a node when caching the prefixed version" ,
function ( assert ) {
assert . expect ( 1 ) ;
2015-05-11 21:23:09 +00:00
2015-11-11 17:50:37 +00:00
var elem = jQuery ( "<div/>" ) ,
style = elem [ 0 ] . style ;
style . MozFakeProperty = "old value" ;
elem . css ( "fakeProperty" , "new value" ) ;
2015-05-11 21:23:09 +00:00
2015-11-11 17:50:37 +00:00
assert . equal ( style . MozFakeProperty , "old value" , "Fake prefixed property is not cached" ) ;
}
) ;
2015-05-11 21:23:09 +00:00
} ) ( ) ;
2012-06-11 01:54:16 +00:00
}