Нема описа

css.js 65KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838
  1. if ( jQuery.css ) {
  2. QUnit.module( "css", { afterEach: moduleTeardown } );
  3. QUnit.test( "css(String|Hash)", function( assert ) {
  4. assert.expect( 42 );
  5. assert.equal( jQuery( "#qunit-fixture" ).css( "display" ), "block", "Check for css property \"display\"" );
  6. var $child, div, div2, width, height, child, prctval, checkval, old;
  7. $child = jQuery( "#nothiddendivchild" ).css( { "width": "20%", "height": "20%" } );
  8. assert.notEqual( $child.css( "width" ), "20px", "Retrieving a width percentage on the child of a hidden div returns percentage" );
  9. assert.notEqual( $child.css( "height" ), "20px", "Retrieving a height percentage on the child of a hidden div returns percentage" );
  10. div = jQuery( "<div></div>" );
  11. // These should be "auto" (or some better value)
  12. // temporarily provide "0px" for backwards compat
  13. assert.equal( div.css( "width" ), "0px", "Width on disconnected node." );
  14. assert.equal( div.css( "height" ), "0px", "Height on disconnected node." );
  15. div.css( { "width": 4, "height": 4 } );
  16. assert.equal( div.css( "width" ), "4px", "Width on disconnected node." );
  17. assert.equal( div.css( "height" ), "4px", "Height on disconnected node." );
  18. div2 = jQuery( "<div style='display:none;'><input type='text' style='height:20px;'/><textarea style='height:20px;'></textarea><div style='height:20px;'></div></div>" ).appendTo( "body" );
  19. assert.equal( div2.find( "input" ).css( "height" ), "20px", "Height on hidden input." );
  20. assert.equal( div2.find( "textarea" ).css( "height" ), "20px", "Height on hidden textarea." );
  21. assert.equal( div2.find( "div" ).css( "height" ), "20px", "Height on hidden div." );
  22. div2.remove();
  23. // handle negative numbers by setting to zero #11604
  24. jQuery( "#nothiddendiv" ).css( { "width": 1, "height": 1 } );
  25. width = parseFloat( jQuery( "#nothiddendiv" ).css( "width" ) );
  26. height = parseFloat( jQuery( "#nothiddendiv" ).css( "height" ) );
  27. jQuery( "#nothiddendiv" ).css( { "overflow":"hidden", "width": -1, "height": -1 } );
  28. assert.equal( parseFloat( jQuery( "#nothiddendiv" ).css( "width" ) ), 0, "Test negative width set to 0" );
  29. assert.equal( parseFloat( jQuery( "#nothiddendiv" ).css( "height" ) ), 0, "Test negative height set to 0" );
  30. assert.equal( jQuery( "<div style='display: none;'></div>" ).css( "display" ), "none", "Styles on disconnected nodes" );
  31. jQuery( "#floatTest" ).css( { "float": "right" } );
  32. assert.equal( jQuery( "#floatTest" ).css( "float" ), "right", "Modified CSS float using \"float\": Assert float is right" );
  33. jQuery( "#floatTest" ).css( { "font-size": "30px" } );
  34. assert.equal( jQuery( "#floatTest" ).css( "font-size" ), "30px", "Modified CSS font-size: Assert font-size is 30px" );
  35. jQuery.each( "0,0.25,0.5,0.75,1".split( "," ), function( i, n ) {
  36. jQuery( "#foo" ).css( { "opacity": n } );
  37. assert.equal( jQuery( "#foo" ).css( "opacity" ), parseFloat( n ), "Assert opacity is " + parseFloat( n ) + " as a String" );
  38. jQuery( "#foo" ).css( { "opacity": parseFloat( n ) } );
  39. assert.equal( jQuery( "#foo" ).css( "opacity" ), parseFloat( n ), "Assert opacity is " + parseFloat( n ) + " as a Number" );
  40. } );
  41. jQuery( "#foo" ).css( { "opacity": "" } );
  42. assert.equal( jQuery( "#foo" ).css( "opacity" ), "1", "Assert opacity is 1 when set to an empty String" );
  43. assert.equal( jQuery( "#empty" ).css( "opacity" ), "0", "Assert opacity is accessible" );
  44. jQuery( "#empty" ).css( { "opacity": "1" } );
  45. assert.equal( jQuery( "#empty" ).css( "opacity" ), "1", "Assert opacity is taken from style attribute when set" );
  46. div = jQuery( "#nothiddendiv" );
  47. child = jQuery( "#nothiddendivchild" );
  48. assert.equal( parseInt( div.css( "fontSize" ), 10 ), 16, "Verify fontSize px set." );
  49. assert.equal( parseInt( div.css( "font-size" ), 10 ), 16, "Verify fontSize px set." );
  50. assert.equal( parseInt( child.css( "fontSize" ), 10 ), 16, "Verify fontSize px set." );
  51. assert.equal( parseInt( child.css( "font-size" ), 10 ), 16, "Verify fontSize px set." );
  52. child.css( "height", "100%" );
  53. assert.equal( child[ 0 ].style.height, "100%", "Make sure the height is being set correctly." );
  54. child.attr( "class", "em" );
  55. assert.equal( parseInt( child.css( "fontSize" ), 10 ), 32, "Verify fontSize em set." );
  56. // Have to verify this as the result depends upon the browser's CSS
  57. // support for font-size percentages
  58. child.attr( "class", "prct" );
  59. prctval = parseInt( child.css( "fontSize" ), 10 );
  60. checkval = 0;
  61. if ( prctval === 16 || prctval === 24 ) {
  62. checkval = prctval;
  63. }
  64. assert.equal( prctval, checkval, "Verify fontSize % set." );
  65. assert.equal( typeof child.css( "width" ), "string", "Make sure that a string width is returned from css('width')." );
  66. old = child[ 0 ].style.height;
  67. // Test NaN
  68. child.css( "height", parseFloat( "zoo" ) );
  69. assert.equal( child[ 0 ].style.height, old, "Make sure height isn't changed on NaN." );
  70. // Test null
  71. child.css( "height", null );
  72. assert.equal( child[ 0 ].style.height, old, "Make sure height isn't changed on null." );
  73. old = child[ 0 ].style.fontSize;
  74. // Test NaN
  75. child.css( "font-size", parseFloat( "zoo" ) );
  76. assert.equal( child[ 0 ].style.fontSize, old, "Make sure font-size isn't changed on NaN." );
  77. // Test null
  78. child.css( "font-size", null );
  79. assert.equal( child[ 0 ].style.fontSize, old, "Make sure font-size isn't changed on null." );
  80. assert.strictEqual( child.css( "x-fake" ), undefined, "Make sure undefined is returned from css(nonexistent)." );
  81. div = jQuery( "<div></div>" ).css( { position: "absolute", "z-index": 1000 } ).appendTo( "#qunit-fixture" );
  82. assert.strictEqual( div.css( "z-index" ), "1000",
  83. "Make sure that a string z-index is returned from css('z-index') (#14432)." );
  84. } );
  85. QUnit.test( "css() explicit and relative values", function( assert ) {
  86. assert.expect( 29 );
  87. var $elem = jQuery( "#nothiddendiv" );
  88. $elem.css( { "width": 1, "height": 1, "paddingLeft": "1px", "opacity": 1 } );
  89. assert.equal( $elem.css( "width" ), "1px", "Initial css set or width/height works (hash)" );
  90. assert.equal( $elem.css( "paddingLeft" ), "1px", "Initial css set of paddingLeft works (hash)" );
  91. assert.equal( $elem.css( "opacity" ), "1", "Initial css set of opacity works (hash)" );
  92. $elem.css( { width: "+=9" } );
  93. assert.equal( $elem.css( "width" ), "10px", "'+=9' on width (hash)" );
  94. $elem.css( { "width": "-=9" } );
  95. assert.equal( $elem.css( "width" ), "1px", "'-=9' on width (hash)" );
  96. $elem.css( { "width": "+=9px" } );
  97. assert.equal( $elem.css( "width" ), "10px", "'+=9px' on width (hash)" );
  98. $elem.css( { "width": "-=9px" } );
  99. assert.equal( $elem.css( "width" ), "1px", "'-=9px' on width (hash)" );
  100. $elem.css( "width", "+=9" );
  101. assert.equal( $elem.css( "width" ), "10px", "'+=9' on width (params)" );
  102. $elem.css( "width", "-=9" );
  103. assert.equal( $elem.css( "width" ), "1px", "'-=9' on width (params)" );
  104. $elem.css( "width", "+=9px" );
  105. assert.equal( $elem.css( "width" ), "10px", "'+=9px' on width (params)" );
  106. $elem.css( "width", "-=9px" );
  107. assert.equal( $elem.css( "width" ), "1px", "'-=9px' on width (params)" );
  108. $elem.css( "width", "-=-9px" );
  109. assert.equal( $elem.css( "width" ), "10px", "'-=-9px' on width (params)" );
  110. $elem.css( "width", "+=-9px" );
  111. assert.equal( $elem.css( "width" ), "1px", "'+=-9px' on width (params)" );
  112. $elem.css( { "paddingLeft": "+=4" } );
  113. assert.equal( $elem.css( "paddingLeft" ), "5px", "'+=4' on paddingLeft (hash)" );
  114. $elem.css( { "paddingLeft": "-=4" } );
  115. assert.equal( $elem.css( "paddingLeft" ), "1px", "'-=4' on paddingLeft (hash)" );
  116. $elem.css( { "paddingLeft": "+=4px" } );
  117. assert.equal( $elem.css( "paddingLeft" ), "5px", "'+=4px' on paddingLeft (hash)" );
  118. $elem.css( { "paddingLeft": "-=4px" } );
  119. assert.equal( $elem.css( "paddingLeft" ), "1px", "'-=4px' on paddingLeft (hash)" );
  120. $elem.css( { "padding-left": "+=4" } );
  121. assert.equal( $elem.css( "paddingLeft" ), "5px", "'+=4' on padding-left (hash)" );
  122. $elem.css( { "padding-left": "-=4" } );
  123. assert.equal( $elem.css( "paddingLeft" ), "1px", "'-=4' on padding-left (hash)" );
  124. $elem.css( { "padding-left": "+=4px" } );
  125. assert.equal( $elem.css( "paddingLeft" ), "5px", "'+=4px' on padding-left (hash)" );
  126. $elem.css( { "padding-left": "-=4px" } );
  127. assert.equal( $elem.css( "paddingLeft" ), "1px", "'-=4px' on padding-left (hash)" );
  128. $elem.css( "paddingLeft", "+=4" );
  129. assert.equal( $elem.css( "paddingLeft" ), "5px", "'+=4' on paddingLeft (params)" );
  130. $elem.css( "paddingLeft", "-=4" );
  131. assert.equal( $elem.css( "paddingLeft" ), "1px", "'-=4' on paddingLeft (params)" );
  132. $elem.css( "padding-left", "+=4px" );
  133. assert.equal( $elem.css( "paddingLeft" ), "5px", "'+=4px' on padding-left (params)" );
  134. $elem.css( "padding-left", "-=4px" );
  135. assert.equal( $elem.css( "paddingLeft" ), "1px", "'-=4px' on padding-left (params)" );
  136. $elem.css( { "opacity": "-=0.5" } );
  137. assert.equal( $elem.css( "opacity" ), "0.5", "'-=0.5' on opacity (hash)" );
  138. $elem.css( { "opacity": "+=0.5" } );
  139. assert.equal( $elem.css( "opacity" ), "1", "'+=0.5' on opacity (hash)" );
  140. $elem.css( "opacity", "-=0.5" );
  141. assert.equal( $elem.css( "opacity" ), "0.5", "'-=0.5' on opacity (params)" );
  142. $elem.css( "opacity", "+=0.5" );
  143. assert.equal( $elem.css( "opacity" ), "1", "'+=0.5' on opacity (params)" );
  144. } );
  145. QUnit.test( "css() non-px relative values (gh-1711)", function( assert ) {
  146. assert.expect( 17 );
  147. var cssCurrent,
  148. units = {},
  149. $child = jQuery( "#nothiddendivchild" ),
  150. add = function( prop, val, unit ) {
  151. var difference,
  152. adjustment = ( val < 0 ? "-=" : "+=" ) + Math.abs( val ) + unit,
  153. message = prop + ": " + adjustment,
  154. cssOld = cssCurrent,
  155. expected = cssOld + val * units[ prop ][ unit ];
  156. // Apply change
  157. $child.css( prop, adjustment );
  158. cssCurrent = parseFloat( $child.css( prop ) );
  159. message += " (actual " + round( cssCurrent, 2 ) + "px, expected " +
  160. round( expected, 2 ) + "px)";
  161. // Require a difference of no more than one pixel
  162. difference = Math.abs( cssCurrent - expected );
  163. assert.ok( difference <= 1, message );
  164. },
  165. getUnits = function( prop ) {
  166. units[ prop ] = {
  167. "px": 1,
  168. "em": parseFloat( $child.css( prop, "100em" ).css( prop ) ) / 100,
  169. "pt": parseFloat( $child.css( prop, "100pt" ).css( prop ) ) / 100,
  170. "pc": parseFloat( $child.css( prop, "100pc" ).css( prop ) ) / 100,
  171. "cm": parseFloat( $child.css( prop, "100cm" ).css( prop ) ) / 100,
  172. "mm": parseFloat( $child.css( prop, "100mm" ).css( prop ) ) / 100,
  173. "%": parseFloat( $child.css( prop, "500%" ).css( prop ) ) / 500
  174. };
  175. },
  176. round = function( num, fractionDigits ) {
  177. var base = Math.pow( 10, fractionDigits );
  178. return Math.round( num * base ) / base;
  179. };
  180. jQuery( "#nothiddendiv" ).css( { height: 1, padding: 0, width: 400 } );
  181. $child.css( { height: 1, padding: 0 } );
  182. getUnits( "width" );
  183. cssCurrent = parseFloat( $child.css( "width", "50%" ).css( "width" ) );
  184. add( "width", 25, "%" );
  185. add( "width", -50, "%" );
  186. add( "width", 10, "em" );
  187. add( "width", 10, "pt" );
  188. add( "width", -2.3, "pt" );
  189. add( "width", 5, "pc" );
  190. add( "width", -5, "em" );
  191. add( "width", +2, "cm" );
  192. add( "width", -15, "mm" );
  193. add( "width", 21, "px" );
  194. getUnits( "lineHeight" );
  195. cssCurrent = parseFloat( $child.css( "lineHeight", "1em" ).css( "lineHeight" ) );
  196. add( "lineHeight", 50, "%" );
  197. add( "lineHeight", 2, "em" );
  198. add( "lineHeight", -10, "px" );
  199. add( "lineHeight", 20, "pt" );
  200. add( "lineHeight", 30, "pc" );
  201. add( "lineHeight", 1, "cm" );
  202. add( "lineHeight", -44, "mm" );
  203. } );
  204. QUnit.test( "css() mismatched relative values with bounded styles (gh-2144)", function( assert ) {
  205. assert.expect( 1 );
  206. var right,
  207. $container = jQuery( "<div></div>" )
  208. .css( { position: "absolute", width: "400px", fontSize: "4px" } )
  209. .appendTo( "#qunit-fixture" ),
  210. $el = jQuery( "<div></div>" )
  211. .css( { position: "absolute", left: "50%", right: "50%" } )
  212. .appendTo( $container );
  213. $el.css( "right", "-=25em" );
  214. assert.equal( Math.round( parseFloat( $el.css( "right" ) ) ), 100,
  215. "Constraints do not interfere with unit conversion" );
  216. } );
  217. QUnit.test( "css(String, Object)", function( assert ) {
  218. assert.expect( 19 );
  219. var j, div, display, ret, success;
  220. jQuery( "#floatTest" ).css( "float", "left" );
  221. assert.equal( jQuery( "#floatTest" ).css( "float" ), "left", "Modified CSS float using \"float\": Assert float is left" );
  222. jQuery( "#floatTest" ).css( "font-size", "20px" );
  223. assert.equal( jQuery( "#floatTest" ).css( "font-size" ), "20px", "Modified CSS font-size: Assert font-size is 20px" );
  224. jQuery.each( "0,0.25,0.5,0.75,1".split( "," ), function( i, n ) {
  225. jQuery( "#foo" ).css( "opacity", n );
  226. assert.equal( jQuery( "#foo" ).css( "opacity" ), parseFloat( n ), "Assert opacity is " + parseFloat( n ) + " as a String" );
  227. jQuery( "#foo" ).css( "opacity", parseFloat( n ) );
  228. assert.equal( jQuery( "#foo" ).css( "opacity" ), parseFloat( n ), "Assert opacity is " + parseFloat( n ) + " as a Number" );
  229. } );
  230. jQuery( "#foo" ).css( "opacity", "" );
  231. assert.equal( jQuery( "#foo" ).css( "opacity" ), "1", "Assert opacity is 1 when set to an empty String" );
  232. // using contents will get comments regular, text, and comment nodes
  233. j = jQuery( "#nonnodes" ).contents();
  234. j.css( "overflow", "visible" );
  235. assert.equal( j.css( "overflow" ), "visible", "Check node,textnode,comment css works" );
  236. assert.equal( jQuery( "#t2037 .hidden" ).css( "display" ), "none", "Make sure browser thinks it is hidden" );
  237. div = jQuery( "#nothiddendiv" );
  238. display = div.css( "display" );
  239. ret = div.css( "display", undefined );
  240. assert.equal( ret, div, "Make sure setting undefined returns the original set." );
  241. assert.equal( div.css( "display" ), display, "Make sure that the display wasn't changed." );
  242. success = true;
  243. try {
  244. jQuery( "#foo" ).css( "backgroundColor", "rgba(0, 0, 0, 0.1)" );
  245. }
  246. catch ( e ) {
  247. success = false;
  248. }
  249. assert.ok( success, "Setting RGBA values does not throw Error (#5509)" );
  250. jQuery( "#foo" ).css( "font", "7px/21px sans-serif" );
  251. assert.strictEqual( jQuery( "#foo" ).css( "line-height" ), "21px",
  252. "Set font shorthand property (#14759)" );
  253. } );
  254. QUnit.test( "css(String, Object) with negative values", function( assert ) {
  255. assert.expect( 4 );
  256. jQuery( "#nothiddendiv" ).css( "margin-top", "-10px" );
  257. jQuery( "#nothiddendiv" ).css( "margin-left", "-10px" );
  258. assert.equal( jQuery( "#nothiddendiv" ).css( "margin-top" ), "-10px", "Ensure negative top margins work." );
  259. assert.equal( jQuery( "#nothiddendiv" ).css( "margin-left" ), "-10px", "Ensure negative left margins work." );
  260. jQuery( "#nothiddendiv" ).css( "position", "absolute" );
  261. jQuery( "#nothiddendiv" ).css( "top", "-20px" );
  262. jQuery( "#nothiddendiv" ).css( "left", "-20px" );
  263. assert.equal( jQuery( "#nothiddendiv" ).css( "top" ), "-20px", "Ensure negative top values work." );
  264. assert.equal( jQuery( "#nothiddendiv" ).css( "left" ), "-20px", "Ensure negative left values work." );
  265. } );
  266. QUnit.test( "css(Array)", function( assert ) {
  267. assert.expect( 2 );
  268. var expectedMany = {
  269. "overflow": "visible",
  270. "width": "16px"
  271. },
  272. expectedSingle = {
  273. "width": "16px"
  274. },
  275. elem = jQuery( "<div></div>" ).appendTo( "#qunit-fixture" );
  276. assert.deepEqual( elem.css( expectedMany ).css( [ "overflow", "width" ] ), expectedMany, "Getting multiple element array" );
  277. assert.deepEqual( elem.css( expectedSingle ).css( [ "width" ] ), expectedSingle, "Getting single element array" );
  278. } );
  279. QUnit.test( "css(String, Function)", function( assert ) {
  280. assert.expect( 3 );
  281. var index,
  282. sizes = [ "10px", "20px", "30px" ];
  283. jQuery( "<div id='cssFunctionTest'><div class='cssFunction'></div>" +
  284. "<div class='cssFunction'></div>" +
  285. "<div class='cssFunction'></div></div>" )
  286. .appendTo( "body" );
  287. index = 0;
  288. jQuery( "#cssFunctionTest div" ).css( "font-size", function() {
  289. var size = sizes[ index ];
  290. index++;
  291. return size;
  292. } );
  293. index = 0;
  294. jQuery( "#cssFunctionTest div" ).each( function() {
  295. var computedSize = jQuery( this ).css( "font-size" ),
  296. expectedSize = sizes[ index ];
  297. assert.equal( computedSize, expectedSize, "Div #" + index + " should be " + expectedSize );
  298. index++;
  299. } );
  300. jQuery( "#cssFunctionTest" ).remove();
  301. } );
  302. QUnit.test( "css(String, Function) with incoming value", function( assert ) {
  303. assert.expect( 3 );
  304. var index,
  305. sizes = [ "10px", "20px", "30px" ];
  306. jQuery( "<div id='cssFunctionTest'><div class='cssFunction'></div>" +
  307. "<div class='cssFunction'></div>" +
  308. "<div class='cssFunction'></div></div>" )
  309. .appendTo( "body" );
  310. index = 0;
  311. jQuery( "#cssFunctionTest div" ).css( "font-size", function() {
  312. var size = sizes[ index ];
  313. index++;
  314. return size;
  315. } );
  316. index = 0;
  317. jQuery( "#cssFunctionTest div" ).css( "font-size", function( i, computedSize ) {
  318. var expectedSize = sizes[ index ];
  319. assert.equal( computedSize, expectedSize, "Div #" + index + " should be " + expectedSize );
  320. index++;
  321. return computedSize;
  322. } );
  323. jQuery( "#cssFunctionTest" ).remove();
  324. } );
  325. QUnit.test( "css(Object) where values are Functions", function( assert ) {
  326. assert.expect( 3 );
  327. var index,
  328. sizes = [ "10px", "20px", "30px" ];
  329. jQuery( "<div id='cssFunctionTest'><div class='cssFunction'></div>" +
  330. "<div class='cssFunction'></div>" +
  331. "<div class='cssFunction'></div></div>" )
  332. .appendTo( "body" );
  333. index = 0;
  334. jQuery( "#cssFunctionTest div" ).css( { "fontSize": function() {
  335. var size = sizes[ index ];
  336. index++;
  337. return size;
  338. } } );
  339. index = 0;
  340. jQuery( "#cssFunctionTest div" ).each( function() {
  341. var computedSize = jQuery( this ).css( "font-size" ),
  342. expectedSize = sizes[ index ];
  343. assert.equal( computedSize, expectedSize, "Div #" + index + " should be " + expectedSize );
  344. index++;
  345. } );
  346. jQuery( "#cssFunctionTest" ).remove();
  347. } );
  348. QUnit.test( "css(Object) where values are Functions with incoming values", function( assert ) {
  349. assert.expect( 3 );
  350. var index,
  351. sizes = [ "10px", "20px", "30px" ];
  352. jQuery( "<div id='cssFunctionTest'><div class='cssFunction'></div>" +
  353. "<div class='cssFunction'></div>" +
  354. "<div class='cssFunction'></div></div>" )
  355. .appendTo( "body" );
  356. index = 0;
  357. jQuery( "#cssFunctionTest div" ).css( { "fontSize": function() {
  358. var size = sizes[ index ];
  359. index++;
  360. return size;
  361. } } );
  362. index = 0;
  363. jQuery( "#cssFunctionTest div" ).css( { "font-size": function( i, computedSize ) {
  364. var expectedSize = sizes[ index ];
  365. assert.equal( computedSize, expectedSize, "Div #" + index + " should be " + expectedSize );
  366. index++;
  367. return computedSize;
  368. } } );
  369. jQuery( "#cssFunctionTest" ).remove();
  370. } );
  371. // .show(), .hide(), can be excluded from the build
  372. if ( jQuery.fn.show && jQuery.fn.hide ) {
  373. QUnit.test( "show()", function( assert ) {
  374. assert.expect( 18 );
  375. var hiddendiv, div, pass, test;
  376. hiddendiv = jQuery( "div.hidden" );
  377. assert.equal( jQuery.css( hiddendiv[ 0 ], "display" ), "none", "hiddendiv is display: none" );
  378. hiddendiv.css( "display", "block" );
  379. assert.equal( jQuery.css( hiddendiv[ 0 ], "display" ), "block", "hiddendiv is display: block" );
  380. hiddendiv.show();
  381. assert.equal( jQuery.css( hiddendiv[ 0 ], "display" ), "block", "hiddendiv is display: block" );
  382. hiddendiv.css( "display", "" );
  383. pass = true;
  384. div = jQuery( "#qunit-fixture div" );
  385. div.show().each( function() {
  386. if ( this.style.display === "none" ) {
  387. pass = false;
  388. }
  389. } );
  390. assert.ok( pass, "Show" );
  391. jQuery(
  392. "<div id='show-tests'>" +
  393. "<div><p><a href='#'></a></p><code></code><pre></pre><span></span></div>" +
  394. "<table><thead><tr><th></th></tr></thead><tbody><tr><td></td></tr></tbody></table>" +
  395. "<ul><li></li></ul></div>"
  396. ).appendTo( "#qunit-fixture" ).find( "*" ).css( "display", "none" );
  397. test = {
  398. "div": "block",
  399. "p": "block",
  400. "a": "inline",
  401. "code": "inline",
  402. "pre": "block",
  403. "span": "inline",
  404. "table": "table",
  405. "thead": "table-header-group",
  406. "tbody": "table-row-group",
  407. "tr": "table-row",
  408. "th": "table-cell",
  409. "td": "table-cell",
  410. "ul": "block",
  411. "li": "list-item"
  412. };
  413. jQuery.each( test, function( selector, expected ) {
  414. var elem = jQuery( selector, "#show-tests" ).show();
  415. assert.equal( elem.css( "display" ), expected, "Show using correct display type for " + selector );
  416. } );
  417. // Make sure that showing or hiding a text node doesn't cause an error
  418. jQuery( "<div>test</div> text <span>test</span>" ).show().remove();
  419. jQuery( "<div>test</div> text <span>test</span>" ).hide().remove();
  420. } );
  421. QUnit.test( "show/hide detached nodes", function( assert ) {
  422. assert.expect( 19 );
  423. var div, span, tr;
  424. div = jQuery( "<div>" ).hide();
  425. assert.equal( div.css( "display" ), "none", "hide() updates inline style of a detached div" );
  426. div.appendTo( "#qunit-fixture" );
  427. assert.equal( div.css( "display" ), "none",
  428. "A hidden-while-detached div is hidden after attachment" );
  429. div.show();
  430. assert.equal( div.css( "display" ), "block",
  431. "A hidden-while-detached div can be shown after attachment" );
  432. div = jQuery( "<div class='hidden'>" );
  433. div.show().appendTo( "#qunit-fixture" );
  434. assert.equal( div.css( "display" ), "none",
  435. "A shown-while-detached div can be hidden by the CSS cascade" );
  436. div = jQuery( "<div><div class='hidden'></div></div>" ).children( "div" );
  437. div.show().appendTo( "#qunit-fixture" );
  438. assert.equal( div.css( "display" ), "none",
  439. "A shown-while-detached div inside a visible div can be hidden by the CSS cascade" );
  440. span = jQuery( "<span class='hidden'></span>" );
  441. span.show().appendTo( "#qunit-fixture" );
  442. assert.equal( span.css( "display" ), "none",
  443. "A shown-while-detached span can be hidden by the CSS cascade" );
  444. div = jQuery( "div.hidden" );
  445. div.detach().show();
  446. assert.ok( !div[ 0 ].style.display,
  447. "show() does not update inline style of a cascade-hidden-before-detach div" );
  448. div.appendTo( "#qunit-fixture" );
  449. assert.equal( div.css( "display" ), "none",
  450. "A shown-while-detached cascade-hidden div is hidden after attachment" );
  451. div.remove();
  452. span = jQuery( "<span class='hidden'></span>" );
  453. span.appendTo( "#qunit-fixture" ).detach().show().appendTo( "#qunit-fixture" );
  454. assert.equal( span.css( "display" ), "none",
  455. "A shown-while-detached cascade-hidden span is hidden after attachment" );
  456. span.remove();
  457. div = jQuery( document.createElement( "div" ) );
  458. div.show().appendTo( "#qunit-fixture" );
  459. assert.ok( !div[ 0 ].style.display, "A shown-while-detached div has no inline style" );
  460. assert.equal( div.css( "display" ), "block",
  461. "A shown-while-detached div has default display after attachment" );
  462. div.remove();
  463. div = jQuery( "<div style='display: none'>" );
  464. div.show();
  465. assert.equal( div[ 0 ].style.display, "",
  466. "show() updates inline style of a detached inline-hidden div" );
  467. div.appendTo( "#qunit-fixture" );
  468. assert.equal( div.css( "display" ), "block",
  469. "A shown-while-detached inline-hidden div has default display after attachment" );
  470. div = jQuery( "<div><div style='display: none'></div></div>" ).children( "div" );
  471. div.show().appendTo( "#qunit-fixture" );
  472. assert.equal( div.css( "display" ), "block",
  473. "A shown-while-detached inline-hidden div inside a visible div has default display " +
  474. "after attachment" );
  475. span = jQuery( "<span style='display: none'></span>" );
  476. span.show();
  477. assert.equal( span[ 0 ].style.display, "",
  478. "show() updates inline style of a detached inline-hidden span" );
  479. span.appendTo( "#qunit-fixture" );
  480. assert.equal( span.css( "display" ), "inline",
  481. "A shown-while-detached inline-hidden span has default display after attachment" );
  482. div = jQuery( "<div style='display: inline'></div>" );
  483. div.show().appendTo( "#qunit-fixture" );
  484. assert.equal( div.css( "display" ), "inline",
  485. "show() does not update inline style of a detached inline-visible div" );
  486. div.remove();
  487. tr = jQuery( "<tr></tr>" );
  488. jQuery( "#table" ).append( tr );
  489. tr.detach().hide().show();
  490. assert.ok( !tr[ 0 ].style.display, "Not-hidden detached tr elements have no inline style" );
  491. tr.remove();
  492. span = jQuery( "<span></span>" ).hide().show();
  493. assert.ok( !span[ 0 ].style.display, "Not-hidden detached span elements have no inline style" );
  494. span.remove();
  495. } );
  496. QUnit[
  497. document.body.attachShadow && document.body.getRootNode ?
  498. "test" :
  499. "skip"
  500. ]( "show/hide shadow child nodes", function( assert ) {
  501. assert.expect( 28 );
  502. jQuery( "<div id='shadowHost'></div>" ).appendTo( "#qunit-fixture" );
  503. var shadowHost = document.querySelector( "#shadowHost" );
  504. var shadowRoot = shadowHost.attachShadow( { mode: "open" } );
  505. shadowRoot.innerHTML = "" +
  506. "<style>.hidden{display: none;}</style>" +
  507. "<div class='hidden' id='shadowdiv'>" +
  508. " <p class='hidden' id='shadowp'>" +
  509. " <a href='#' class='hidden' id='shadowa'></a>" +
  510. " </p>" +
  511. " <code class='hidden' id='shadowcode'></code>" +
  512. " <pre class='hidden' id='shadowpre'></pre>" +
  513. " <span class='hidden' id='shadowspan'></span>" +
  514. "</div>" +
  515. "<table class='hidden' id='shadowtable'>" +
  516. " <thead class='hidden' id='shadowthead'>" +
  517. " <tr class='hidden' id='shadowtr'>" +
  518. " <th class='hidden' id='shadowth'></th>" +
  519. " </tr>" +
  520. " </thead>" +
  521. " <tbody class='hidden' id='shadowtbody'>" +
  522. " <tr class='hidden'>" +
  523. " <td class='hidden' id='shadowtd'></td>" +
  524. " </tr>" +
  525. " </tbody>" +
  526. "</table>" +
  527. "<ul class='hidden' id='shadowul'>" +
  528. " <li class='hidden' id='shadowli'></li>" +
  529. "</ul>";
  530. var test = {
  531. "div": "block",
  532. "p": "block",
  533. "a": "inline",
  534. "code": "inline",
  535. "pre": "block",
  536. "span": "inline",
  537. "table": "table",
  538. "thead": "table-header-group",
  539. "tbody": "table-row-group",
  540. "tr": "table-row",
  541. "th": "table-cell",
  542. "td": "table-cell",
  543. "ul": "block",
  544. "li": "list-item"
  545. };
  546. jQuery.each( test, function( selector, expected ) {
  547. var shadowChild = shadowRoot.querySelector( "#shadow" + selector );
  548. var $shadowChild = jQuery( shadowChild );
  549. assert.strictEqual( $shadowChild.css( "display" ), "none", "is hidden" );
  550. $shadowChild.show();
  551. assert.strictEqual( $shadowChild.css( "display" ), expected, "Show using correct display type for " + selector );
  552. } );
  553. } );
  554. QUnit.test( "hide hidden elements (bug #7141)", function( assert ) {
  555. assert.expect( 3 );
  556. var div = jQuery( "<div style='display:none'></div>" ).appendTo( "#qunit-fixture" );
  557. assert.equal( div.css( "display" ), "none", "Element is hidden by default" );
  558. div.hide();
  559. assert.ok( !jQuery._data( div, "olddisplay" ), "olddisplay is undefined after hiding an already-hidden element" );
  560. div.show();
  561. assert.equal( div.css( "display" ), "block", "Show a double-hidden element" );
  562. div.remove();
  563. } );
  564. QUnit.test( "show() after hide() should always set display to initial value (#14750)", function( assert ) {
  565. assert.expect( 1 );
  566. var div = jQuery( "<div></div>" ),
  567. fixture = jQuery( "#qunit-fixture" );
  568. fixture.append( div );
  569. div.css( "display", "inline" ).hide().show().css( "display", "list-item" ).hide().show();
  570. assert.equal( div.css( "display" ), "list-item", "should get last set display value" );
  571. } );
  572. QUnit.test( "show/hide 3.0, default display", function( assert ) {
  573. assert.expect( 36 );
  574. var i,
  575. $elems = jQuery( "<div></div>" )
  576. .appendTo( "#qunit-fixture" )
  577. .html( "<div data-expected-display='block'></div>" +
  578. "<span data-expected-display='inline'></span>" +
  579. "<ul><li data-expected-display='list-item'></li></ul>" )
  580. .find( "[data-expected-display]" );
  581. $elems.each( function() {
  582. var $elem = jQuery( this ),
  583. name = this.nodeName,
  584. expected = this.getAttribute( "data-expected-display" ),
  585. sequence = [];
  586. if ( this.className ) {
  587. name += "." + this.className;
  588. }
  589. if ( this.getAttribute( "style" ) ) {
  590. name += "[style='" + this.getAttribute( "style" ) + "']";
  591. }
  592. name += " ";
  593. for ( i = 0; i < 3; i++ ) {
  594. sequence.push( ".show()" );
  595. $elem.show();
  596. assert.equal( $elem.css( "display" ), expected,
  597. name + sequence.join( "" ) + " computed" );
  598. assert.equal( this.style.display, "", name + sequence.join( "" ) + " inline" );
  599. sequence.push( ".hide()" );
  600. $elem.hide();
  601. assert.equal( $elem.css( "display" ), "none",
  602. name + sequence.join( "" ) + " computed" );
  603. assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
  604. }
  605. } );
  606. } );
  607. QUnit.test( "show/hide 3.0, default body display", function( assert ) {
  608. assert.expect( 2 );
  609. var hideBody = supportjQuery( "<style>body{display:none}</style>" ).appendTo( document.head ),
  610. body = jQuery( document.body );
  611. assert.equal( body.css( "display" ), "none", "Correct initial display" );
  612. body.show();
  613. assert.equal( body.css( "display" ), "block", "Correct display after .show()" );
  614. hideBody.remove();
  615. } );
  616. QUnit.test( "show/hide 3.0, cascade display", function( assert ) {
  617. assert.expect( 36 );
  618. var i,
  619. $elems = jQuery( "<div></div>" )
  620. .appendTo( "#qunit-fixture" )
  621. .html( "<span class='block'></span><div class='inline'></div><div class='list-item'></div>" )
  622. .children();
  623. $elems.each( function() {
  624. var $elem = jQuery( this ),
  625. name = this.nodeName,
  626. sequence = [];
  627. if ( this.className ) {
  628. name += "." + this.className;
  629. }
  630. if ( this.getAttribute( "style" ) ) {
  631. name += "[style='" + this.getAttribute( "style" ) + "']";
  632. }
  633. name += " ";
  634. for ( i = 0; i < 3; i++ ) {
  635. sequence.push( ".show()" );
  636. $elem.show();
  637. assert.equal( $elem.css( "display" ), this.className,
  638. name + sequence.join( "" ) + " computed" );
  639. assert.equal( this.style.display, "", name + sequence.join( "" ) + " inline" );
  640. sequence.push( ".hide()" );
  641. $elem.hide();
  642. assert.equal( $elem.css( "display" ), "none",
  643. name + sequence.join( "" ) + " computed" );
  644. assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
  645. }
  646. } );
  647. } );
  648. QUnit.test( "show/hide 3.0, inline display", function( assert ) {
  649. assert.expect( 96 );
  650. var i,
  651. $elems = jQuery( "<div></div>" )
  652. .appendTo( "#qunit-fixture" )
  653. .html( "<span data-expected-display='block' style='display:block'></span>" +
  654. "<span class='list-item' data-expected-display='block' style='display:block'></span>" +
  655. "<div data-expected-display='inline' style='display:inline'></div>" +
  656. "<div class='list-item' data-expected-display='inline' style='display:inline'></div>" +
  657. "<ul>" +
  658. "<li data-expected-display='block' style='display:block'></li>" +
  659. "<li class='inline' data-expected-display='block' style='display:block'></li>" +
  660. "<li data-expected-display='inline' style='display:inline'></li>" +
  661. "<li class='block' data-expected-display='inline' style='display:inline'></li>" +
  662. "</ul>" )
  663. .find( "[data-expected-display]" );
  664. $elems.each( function() {
  665. var $elem = jQuery( this ),
  666. name = this.nodeName,
  667. expected = this.getAttribute( "data-expected-display" ),
  668. sequence = [];
  669. if ( this.className ) {
  670. name += "." + this.className;
  671. }
  672. if ( this.getAttribute( "style" ) ) {
  673. name += "[style='" + this.getAttribute( "style" ) + "']";
  674. }
  675. name += " ";
  676. for ( i = 0; i < 3; i++ ) {
  677. sequence.push( ".show()" );
  678. $elem.show();
  679. assert.equal( $elem.css( "display" ), expected,
  680. name + sequence.join( "" ) + " computed" );
  681. assert.equal( this.style.display, expected, name + sequence.join( "" ) + " inline" );
  682. sequence.push( ".hide()" );
  683. $elem.hide();
  684. assert.equal( $elem.css( "display" ), "none",
  685. name + sequence.join( "" ) + " computed" );
  686. assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
  687. }
  688. } );
  689. } );
  690. QUnit.test( "show/hide 3.0, cascade hidden", function( assert ) {
  691. assert.expect( 72 );
  692. var i,
  693. $elems = jQuery( "<div></div>" )
  694. .appendTo( "#qunit-fixture" )
  695. .html( "<div class='hidden' data-expected-display='block'></div>" +
  696. "<div class='hidden' data-expected-display='block' style='display:none'></div>" +
  697. "<span class='hidden' data-expected-display='inline'></span>" +
  698. "<span class='hidden' data-expected-display='inline' style='display:none'></span>" +
  699. "<ul>" +
  700. "<li class='hidden' data-expected-display='list-item'></li>" +
  701. "<li class='hidden' data-expected-display='list-item' style='display:none'></li>" +
  702. "</ul>" )
  703. .find( "[data-expected-display]" );
  704. $elems.each( function() {
  705. var $elem = jQuery( this ),
  706. name = this.nodeName,
  707. expected = this.getAttribute( "data-expected-display" ),
  708. sequence = [];
  709. if ( this.className ) {
  710. name += "." + this.className;
  711. }
  712. if ( this.getAttribute( "style" ) ) {
  713. name += "[style='" + this.getAttribute( "style" ) + "']";
  714. }
  715. name += " ";
  716. for ( i = 0; i < 3; i++ ) {
  717. sequence.push( ".hide()" );
  718. $elem.hide();
  719. assert.equal( $elem.css( "display" ), "none",
  720. name + sequence.join( "" ) + " computed" );
  721. assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
  722. sequence.push( ".show()" );
  723. $elem.show();
  724. assert.equal( $elem.css( "display" ), expected,
  725. name + sequence.join( "" ) + " computed" );
  726. assert.equal( this.style.display, expected, name + sequence.join( "" ) + " inline" );
  727. }
  728. } );
  729. } );
  730. QUnit.test( "show/hide 3.0, inline hidden", function( assert ) {
  731. assert.expect( 84 );
  732. var i,
  733. $elems = jQuery( "<div></div>" )
  734. .appendTo( "#qunit-fixture" )
  735. .html( "<span data-expected-display='inline' style='display:none'></span>" +
  736. "<span class='list-item' data-expected-display='list-item' style='display:none'></span>" +
  737. "<div data-expected-display='block' style='display:none'></div>" +
  738. "<div class='list-item' data-expected-display='list-item' style='display:none'></div>" +
  739. "<ul>" +
  740. "<li data-expected-display='list-item' style='display:none'></li>" +
  741. "<li class='block' data-expected-display='block' style='display:none'></li>" +
  742. "<li class='inline' data-expected-display='inline' style='display:none'></li>" +
  743. "</ul>" )
  744. .find( "[data-expected-display]" );
  745. $elems.each( function() {
  746. var $elem = jQuery( this ),
  747. name = this.nodeName,
  748. expected = this.getAttribute( "data-expected-display" ),
  749. sequence = [];
  750. if ( this.className ) {
  751. name += "." + this.className;
  752. }
  753. if ( this.getAttribute( "style" ) ) {
  754. name += "[style='" + this.getAttribute( "style" ) + "']";
  755. }
  756. name += " ";
  757. for ( i = 0; i < 3; i++ ) {
  758. sequence.push( ".hide()" );
  759. $elem.hide();
  760. assert.equal( $elem.css( "display" ), "none",
  761. name + sequence.join( "" ) + " computed" );
  762. assert.equal( this.style.display, "none", name + sequence.join( "" ) + " inline" );
  763. sequence.push( ".show()" );
  764. $elem.show();
  765. assert.equal( $elem.css( "display" ), expected,
  766. name + sequence.join( "" ) + " computed" );
  767. assert.equal( this.style.display, "", name + sequence.join( "" ) + " inline" );
  768. }
  769. } );
  770. } );
  771. }
  772. QUnit[ jQuery.find.compile && jQuery.fn.toggle ? "test" : "skip" ]( "toggle()", function( assert ) {
  773. assert.expect( 9 );
  774. var div, oldHide,
  775. x = jQuery( "#foo" );
  776. assert.ok( x.is( ":visible" ), "is visible" );
  777. x.toggle();
  778. assert.ok( x.is( ":hidden" ), "is hidden" );
  779. x.toggle();
  780. assert.ok( x.is( ":visible" ), "is visible again" );
  781. x.toggle( true );
  782. assert.ok( x.is( ":visible" ), "is visible" );
  783. x.toggle( false );
  784. assert.ok( x.is( ":hidden" ), "is hidden" );
  785. x.toggle( true );
  786. assert.ok( x.is( ":visible" ), "is visible again" );
  787. div = jQuery( "<div style='display:none'><div></div></div>" ).appendTo( "#qunit-fixture" );
  788. x = div.find( "div" );
  789. assert.strictEqual( x.toggle().css( "display" ), "none", "is hidden" );
  790. assert.strictEqual( x.toggle().css( "display" ), "block", "is visible" );
  791. // Ensure hide() is called when toggled (#12148)
  792. oldHide = jQuery.fn.hide;
  793. jQuery.fn.hide = function() {
  794. assert.ok( true, name + " method called on toggle" );
  795. return oldHide.apply( this, arguments );
  796. };
  797. x.toggle( name === "show" );
  798. jQuery.fn.hide = oldHide;
  799. } );
  800. QUnit[ jQuery.find.compile && jQuery.fn.toggle ? "test" : "skip" ]( "detached toggle()", function( assert ) {
  801. assert.expect( 6 );
  802. var detached = jQuery( "<p><a></a><p>" ).find( "*" ).addBack(),
  803. hiddenDetached = jQuery( "<p><a></a></p>" ).find( "*" ).addBack().css( "display", "none" ),
  804. cascadeHiddenDetached = jQuery( "<p><a></a></p>" ).find( "*" ).addBack().addClass( "hidden" );
  805. detached.toggle();
  806. detached.appendTo( "#qunit-fixture" );
  807. assert.equal( detached[ 0 ].style.display, "none", "detached element" );
  808. assert.equal( detached[ 1 ].style.display, "none", "element in detached tree" );
  809. hiddenDetached.toggle();
  810. hiddenDetached.appendTo( "#qunit-fixture" );
  811. assert.equal( hiddenDetached[ 0 ].style.display, "", "detached, hidden element" );
  812. assert.equal( hiddenDetached[ 1 ].style.display, "", "hidden element in detached tree" );
  813. cascadeHiddenDetached.toggle();
  814. cascadeHiddenDetached.appendTo( "#qunit-fixture" );
  815. assert.equal( cascadeHiddenDetached[ 0 ].style.display, "none",
  816. "detached, cascade-hidden element" );
  817. assert.equal( cascadeHiddenDetached[ 1 ].style.display, "none",
  818. "cascade-hidden element in detached tree" );
  819. } );
  820. QUnit[ jQuery.find.compile && jQuery.fn.toggle &&
  821. document.body.attachShadow && document.body.getRootNode ?
  822. "test" :
  823. "skip"
  824. ]( "shadow toggle()", function( assert ) {
  825. assert.expect( 4 );
  826. jQuery( "<div id='shadowHost'></div>" ).appendTo( "#qunit-fixture" );
  827. var shadowHost = document.querySelector( "#shadowHost" );
  828. var shadowRoot = shadowHost.attachShadow( { mode: "open" } );
  829. shadowRoot.innerHTML = "" +
  830. "<style>.hidden{display: none;}</style>" +
  831. "<div id='shadowHiddenChild' class='hidden'></div>" +
  832. "<div id='shadowChild'></div>";
  833. var shadowChild = shadowRoot.querySelector( "#shadowChild" );
  834. var shadowHiddenChild = shadowRoot.querySelector( "#shadowHiddenChild" );
  835. var $shadowChild = jQuery( shadowChild );
  836. assert.strictEqual( $shadowChild.css( "display" ), "block", "is visible" );
  837. $shadowChild.toggle();
  838. assert.strictEqual( $shadowChild.css( "display" ), "none", "is hidden" );
  839. $shadowChild = jQuery( shadowHiddenChild );
  840. assert.strictEqual( $shadowChild.css( "display" ), "none", "is hidden" );
  841. $shadowChild.toggle();
  842. assert.strictEqual( $shadowChild.css( "display" ), "block", "is visible" );
  843. } );
  844. QUnit.test( "jQuery.css(elem, 'height') doesn't clear radio buttons (bug #1095)", function( assert ) {
  845. assert.expect( 4 );
  846. var $checkedtest = jQuery( "#checkedtest" );
  847. jQuery.css( $checkedtest[ 0 ], "height" );
  848. assert.ok( jQuery( "input[type='radio']", $checkedtest ).first().attr( "checked" ), "Check first radio still checked." );
  849. assert.ok( !jQuery( "input[type='radio']", $checkedtest ).last().attr( "checked" ), "Check last radio still NOT checked." );
  850. assert.ok( jQuery( "input[type='checkbox']", $checkedtest ).first().attr( "checked" ), "Check first checkbox still checked." );
  851. assert.ok( !jQuery( "input[type='checkbox']", $checkedtest ).last().attr( "checked" ), "Check last checkbox still NOT checked." );
  852. } );
  853. QUnit.test( "internal ref to elem.runtimeStyle (bug #7608)", function( assert ) {
  854. assert.expect( 1 );
  855. var result = true;
  856. try {
  857. jQuery( "#foo" ).css( { "width": "0%" } ).css( "width" );
  858. } catch ( e ) {
  859. result = false;
  860. }
  861. assert.ok( result, "elem.runtimeStyle does not throw exception" );
  862. } );
  863. QUnit.test( "computed margins (trac-3333; gh-2237)", function( assert ) {
  864. assert.expect( 2 );
  865. var $div = jQuery( "#foo" ),
  866. $child = jQuery( "#en" );
  867. $div.css( {
  868. "width": "1px",
  869. "marginRight": 0
  870. } );
  871. assert.equal( $div.css( "marginRight" ), "0px",
  872. "marginRight correctly calculated with a width and display block" );
  873. $div.css( {
  874. position: "absolute",
  875. top: 0,
  876. left: 0,
  877. width: "100px"
  878. } );
  879. $child.css( {
  880. width: "50px",
  881. margin: "auto"
  882. } );
  883. assert.equal( $child.css( "marginLeft" ), "25px", "auto margins are computed to pixels" );
  884. } );
  885. QUnit.test( "box model properties incorrectly returning % instead of px, see #10639 and #12088", function( assert ) {
  886. assert.expect( 2 );
  887. var container = jQuery( "<div></div>" ).width( 400 ).appendTo( "#qunit-fixture" ),
  888. el = jQuery( "<div></div>" ).css( { "width": "50%", "marginRight": "50%" } ).appendTo( container ),
  889. el2 = jQuery( "<div></div>" ).css( { "width": "50%", "minWidth": "300px", "marginLeft": "25%" } ).appendTo( container );
  890. assert.equal( el.css( "marginRight" ), "200px", "css('marginRight') returning % instead of px, see #10639" );
  891. assert.equal( el2.css( "marginLeft" ), "100px", "css('marginLeft') returning incorrect pixel value, see #12088" );
  892. } );
  893. QUnit.test( "jQuery.cssProps behavior, (bug #8402)", function( assert ) {
  894. assert.expect( 2 );
  895. var div = jQuery( "<div>" ).appendTo( document.body ).css( {
  896. "position": "absolute",
  897. "top": 0,
  898. "left": 10
  899. } );
  900. jQuery.cssProps.top = "left";
  901. assert.equal( div.css( "top" ), "10px", "the fixed property is used when accessing the computed style" );
  902. div.css( "top", "100px" );
  903. assert.equal( div[ 0 ].style.left, "100px", "the fixed property is used when setting the style" );
  904. // cleanup jQuery.cssProps
  905. jQuery.cssProps.top = undefined;
  906. } );
  907. QUnit.test( "widows & orphans #8936", function( assert ) {
  908. var $p = jQuery( "<p>" ).appendTo( "#qunit-fixture" );
  909. assert.expect( 2 );
  910. $p.css( {
  911. "widows": 3,
  912. "orphans": 3
  913. } );
  914. assert.equal( $p.css( "widows" ) || jQuery.style( $p[ 0 ], "widows" ), 3, "widows correctly set to 3" );
  915. assert.equal( $p.css( "orphans" ) || jQuery.style( $p[ 0 ], "orphans" ), 3, "orphans correctly set to 3" );
  916. $p.remove();
  917. } );
  918. QUnit.test( "can't get css for disconnected in IE<9, see #10254 and #8388", function( assert ) {
  919. assert.expect( 2 );
  920. var span, div;
  921. span = jQuery( "<span></span>" ).css( "background-image", "url(" + baseURL + "1x1.jpg)" );
  922. assert.notEqual( span.css( "background-image" ), null, "can't get background-image in IE<9, see #10254" );
  923. div = jQuery( "<div></div>" ).css( "top", 10 );
  924. assert.equal( div.css( "top" ), "10px", "can't get top in IE<9, see #8388" );
  925. } );
  926. QUnit.test( "Ensure styles are retrieving from parsed html on document fragments", function( assert ) {
  927. assert.expect( 1 );
  928. var $span = jQuery(
  929. jQuery.parseHTML( "<span style=\"font-family: Cuprum,sans-serif; font-size: 14px; color: #999999;\">some text</span>" )
  930. );
  931. assert.equal( $span.css( "font-size" ), "14px", "Font-size retrievable on parsed HTML node" );
  932. } );
  933. QUnit.test( "can't get background-position in IE<9, see #10796", function( assert ) {
  934. var div = jQuery( "<div></div>" ).appendTo( "#qunit-fixture" ),
  935. units = [
  936. "0 0",
  937. "12px 12px",
  938. "13px 12em",
  939. "12em 13px",
  940. "12em center",
  941. "+12em center",
  942. "12.2em center",
  943. "center center"
  944. ],
  945. l = units.length,
  946. i = 0;
  947. assert.expect( l );
  948. for ( ; i < l; i++ ) {
  949. div.css( "background-position", units [ i ] );
  950. assert.ok( div.css( "background-position" ), "can't get background-position in IE<9, see #10796" );
  951. }
  952. } );
  953. if ( jQuery.fn.offset ) {
  954. QUnit.test( "percentage properties for left and top should be transformed to pixels, see #9505", function( assert ) {
  955. assert.expect( 2 );
  956. var parent = jQuery( "<div style='position:relative;width:200px;height:200px;margin:0;padding:0;border-width:0'></div>" ).appendTo( "#qunit-fixture" ),
  957. div = jQuery( "<div style='position: absolute; width: 20px; height: 20px; top:50%; left:50%'></div>" ).appendTo( parent );
  958. assert.equal( div.css( "top" ), "100px", "position properties not transformed to pixels, see #9505" );
  959. assert.equal( div.css( "left" ), "100px", "position properties not transformed to pixels, see #9505" );
  960. } );
  961. }
  962. QUnit.test( "Do not append px (#9548, #12990, #2792)", function( assert ) {
  963. assert.expect( 3 );
  964. var $div = jQuery( "<div>" ).appendTo( "#qunit-fixture" );
  965. $div.css( "fill-opacity", 1 );
  966. assert.equal( $div.css( "fill-opacity" ), 1, "Do not append px to 'fill-opacity'" );
  967. $div.css( "column-count", 1 );
  968. if ( $div.css( "column-count" ) !== undefined ) {
  969. assert.equal( $div.css( "column-count" ), 1, "Do not append px to 'column-count'" );
  970. } else {
  971. assert.ok( true, "No support for column-count CSS property" );
  972. }
  973. $div.css( "animation-iteration-count", 2 );
  974. if ( $div.css( "animation-iteration-count" ) !== undefined ) {
  975. // if $div.css( "animation-iteration-count" ) return "1",
  976. // it actually return the default value of animation-iteration-count
  977. assert.equal( $div.css( "animation-iteration-count" ), 2, "Do not append px to 'animation-iteration-count'" );
  978. } else {
  979. assert.ok( true, "No support for animation-iteration-count CSS property" );
  980. }
  981. } );
  982. QUnit[
  983. jQuery( "<div/>" )[ 0 ].style.gridArea === "" ?
  984. "test" :
  985. "skip"
  986. ]( "Do not append px to CSS Grid-related properties (gh-4007)", function( assert ) {
  987. assert.expect( 12 );
  988. var prop, value, subProp, subValue, $div,
  989. gridProps = {
  990. "grid-area": {
  991. "grid-row-start": "2",
  992. "grid-row-end": "auto",
  993. "grid-column-start": "auto",
  994. "grid-column-end": "auto"
  995. },
  996. "grid-column": {
  997. "grid-column-start": "2",
  998. "grid-column-end": "auto"
  999. },
  1000. "grid-column-end": true,
  1001. "grid-column-start": true,
  1002. "grid-row": {
  1003. "grid-row-start": "2",
  1004. "grid-row-end": "auto"
  1005. },
  1006. "grid-row-end": true,
  1007. "grid-row-start": true
  1008. };
  1009. for ( prop in gridProps ) {
  1010. $div = jQuery( "<div></div>" ).appendTo( "#qunit-fixture" );
  1011. $div.css( prop, 2 );
  1012. value = gridProps[ prop ];
  1013. if ( typeof value === "object" ) {
  1014. for ( subProp in value ) {
  1015. subValue = value[ subProp ];
  1016. assert.equal( $div.css( subProp ), subValue,
  1017. "Do not append px to '" + prop + "' (retrieved " + subProp + ")" );
  1018. }
  1019. } else {
  1020. assert.equal( $div.css( prop ), "2", "Do not append px to '" + prop + "'" );
  1021. }
  1022. $div.remove();
  1023. }
  1024. } );
  1025. QUnit.test( "css('width') and css('height') should respect box-sizing, see #11004", function( assert ) {
  1026. assert.expect( 4 );
  1027. var el_dis = jQuery( "<div style='width:300px;height:300px;margin:2px;padding:2px;box-sizing:border-box;'>test</div>" ),
  1028. el = el_dis.clone().appendTo( "#qunit-fixture" );
  1029. assert.equal( el.css( "width" ), el.css( "width", el.css( "width" ) ).css( "width" ), "css('width') is not respecting box-sizing, see #11004" );
  1030. 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" );
  1031. assert.equal( el.css( "height" ), el.css( "height", el.css( "height" ) ).css( "height" ), "css('height') is not respecting box-sizing, see #11004" );
  1032. 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" );
  1033. } );
  1034. QUnit.test( "table rows width/height should be unaffected by inline styles", function( assert ) {
  1035. assert.expect( 2 );
  1036. var table = jQuery(
  1037. "<table>\n" +
  1038. " <tr id=\"row\" style=\"height: 1px; width: 1px;\">\n" +
  1039. " <td>\n" +
  1040. " <div style=\"height: 100px; width: 100px;\"></div>\n" +
  1041. " </div>\n" +
  1042. " </tr>\n" +
  1043. "</table>"
  1044. );
  1045. var tr = table.find( "tr" );
  1046. table.appendTo( "#qunit-fixture" );
  1047. assert.ok( parseInt( tr.css( "width" ) ) > 10, "tr width unaffected by inline style" );
  1048. assert.ok( parseInt( tr.css( "height" ) ) > 10, "tr height unaffected by inline style" );
  1049. } );
  1050. testIframe(
  1051. "css('width') should work correctly before document ready (#14084)",
  1052. "css/cssWidthBeforeDocReady.html",
  1053. function( assert, jQuery, window, document, cssWidthBeforeDocReady ) {
  1054. assert.expect( 1 );
  1055. assert.strictEqual( cssWidthBeforeDocReady, "100px", "elem.css('width') works correctly before document ready" );
  1056. }
  1057. );
  1058. testIframe(
  1059. "css('width') should work correctly with browser zooming",
  1060. "css/cssWidthBrowserZoom.html",
  1061. function( assert, jQuery, window, document, widthBeforeSet, widthAfterSet ) {
  1062. assert.expect( 2 );
  1063. assert.strictEqual( widthBeforeSet, "100px", "elem.css('width') works correctly with browser zoom" );
  1064. assert.strictEqual( widthAfterSet, "100px", "elem.css('width', val) works correctly with browser zoom" );
  1065. }
  1066. );
  1067. ( function() {
  1068. var supportsFractionalGBCR,
  1069. qunitFixture = document.getElementById( "qunit-fixture" ),
  1070. div = document.createElement( "div" );
  1071. div.style.width = "3.3px";
  1072. qunitFixture.appendChild( div );
  1073. supportsFractionalGBCR = div.getBoundingClientRect().width.toFixed( 1 ) === "3.3";
  1074. qunitFixture.removeChild( div );
  1075. QUnit.test( "css('width') and css('height') should return fractional values for nodes in the document", function( assert ) {
  1076. if ( !supportsFractionalGBCR ) {
  1077. assert.expect( 1 );
  1078. assert.ok( true, "This browser doesn't support fractional values in getBoundingClientRect()" );
  1079. return;
  1080. }
  1081. assert.expect( 2 );
  1082. var el = jQuery( "<div class='test-div'></div>" ).appendTo( "#qunit-fixture" );
  1083. jQuery( "<style>.test-div { width: 33.3px; height: 88.8px; }</style>" ).appendTo( "#qunit-fixture" );
  1084. assert.equal( Number( el.css( "width" ).replace( /px$/, "" ) ).toFixed( 1 ), "33.3",
  1085. "css('width') should return fractional values" );
  1086. assert.equal( Number( el.css( "height" ).replace( /px$/, "" ) ).toFixed( 1 ), "88.8",
  1087. "css('height') should return fractional values" );
  1088. } );
  1089. QUnit.test( "css('width') and css('height') should return fractional values for disconnected nodes", function( assert ) {
  1090. if ( !supportsFractionalGBCR ) {
  1091. assert.expect( 1 );
  1092. assert.ok( true, "This browser doesn't support fractional values in getBoundingClientRect()" );
  1093. return;
  1094. }
  1095. assert.expect( 2 );
  1096. var el = jQuery( "<div style='width: 33.3px; height: 88.8px;'></div>" );
  1097. assert.equal( Number( el.css( "width" ).replace( /px$/, "" ) ).toFixed( 1 ), "33.3",
  1098. "css('width') should return fractional values" );
  1099. assert.equal( Number( el.css( "height" ).replace( /px$/, "" ) ).toFixed( 1 ), "88.8",
  1100. "css('height') should return fractional values" );
  1101. } );
  1102. } )();
  1103. QUnit.test( "certain css values of 'normal' should be convertable to a number, see #8627", function( assert ) {
  1104. assert.expect( 3 );
  1105. var el = jQuery( "<div style='letter-spacing:normal;font-weight:normal;'>test</div>" ).appendTo( "#qunit-fixture" );
  1106. assert.ok( !isNaN( parseFloat( el.css( "letterSpacing" ) ) ), "css('letterSpacing') not convertable to number, see #8627" );
  1107. assert.ok( !isNaN( parseFloat( el.css( "fontWeight" ) ) ), "css('fontWeight') not convertable to number, see #8627" );
  1108. assert.equal( typeof el.css( "fontWeight" ), "string", ".css() returns a string" );
  1109. } );
  1110. // Support: IE 9 only
  1111. // Only run this test in IE9
  1112. if ( document.documentMode === 9 ) {
  1113. QUnit.test( ".css('filter') returns a string in IE9, see #12537", function( assert ) {
  1114. assert.expect( 1 );
  1115. 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')." );
  1116. } );
  1117. }
  1118. QUnit.test( "cssHooks - expand", function( assert ) {
  1119. assert.expect( 15 );
  1120. var result,
  1121. properties = {
  1122. margin: [ "marginTop", "marginRight", "marginBottom", "marginLeft" ],
  1123. borderWidth: [ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ],
  1124. padding: [ "paddingTop", "paddingRight", "paddingBottom", "paddingLeft" ]
  1125. };
  1126. jQuery.each( properties, function( property, keys ) {
  1127. var hook = jQuery.cssHooks[ property ],
  1128. expected = {};
  1129. jQuery.each( keys, function( _, key ) {
  1130. expected[ key ] = 10;
  1131. } );
  1132. result = hook.expand( 10 );
  1133. assert.deepEqual( result, expected, property + " expands properly with a number" );
  1134. jQuery.each( keys, function( _, key ) {
  1135. expected[ key ] = "10px";
  1136. } );
  1137. result = hook.expand( "10px" );
  1138. assert.deepEqual( result, expected, property + " expands properly with '10px'" );
  1139. expected[ keys[ 1 ] ] = expected[ keys[ 3 ] ] = "20px";
  1140. result = hook.expand( "10px 20px" );
  1141. assert.deepEqual( result, expected, property + " expands properly with '10px 20px'" );
  1142. expected[ keys[ 2 ] ] = "30px";
  1143. result = hook.expand( "10px 20px 30px" );
  1144. assert.deepEqual( result, expected, property + " expands properly with '10px 20px 30px'" );
  1145. expected[ keys[ 3 ] ] = "40px";
  1146. result = hook.expand( "10px 20px 30px 40px" );
  1147. assert.deepEqual( result, expected, property + " expands properly with '10px 20px 30px 40px'" );
  1148. } );
  1149. } );
  1150. QUnit.test( "css opacity consistency across browsers (#12685)", function( assert ) {
  1151. assert.expect( 3 );
  1152. var el,
  1153. fixture = jQuery( "#qunit-fixture" );
  1154. // Append style element
  1155. jQuery( "<style>.opacity_t12685 { opacity: 0.1; }</style>" ).appendTo( fixture );
  1156. el = jQuery( "<div class='opacity_t12685'></div>" ).appendTo( fixture );
  1157. assert.equal( Math.round( el.css( "opacity" ) * 100 ), 10, "opacity from style sheet" );
  1158. el.css( "opacity", 0.3 );
  1159. assert.equal( Math.round( el.css( "opacity" ) * 100 ), 30, "override opacity" );
  1160. el.css( "opacity", "" );
  1161. assert.equal( Math.round( el.css( "opacity" ) * 100 ), 10, "remove opacity override" );
  1162. } );
  1163. QUnit[ jQuery.find.compile ? "test" : "skip" ]( ":visible/:hidden selectors", function( assert ) {
  1164. assert.expect( 17 );
  1165. var $div, $table, $a;
  1166. assert.ok( jQuery( "#nothiddendiv" ).is( ":visible" ), "Modifying CSS display: Assert element is visible" );
  1167. jQuery( "#nothiddendiv" ).css( { display: "none" } );
  1168. assert.ok( !jQuery( "#nothiddendiv" ).is( ":visible" ), "Modified CSS display: Assert element is hidden" );
  1169. jQuery( "#nothiddendiv" ).css( { "display": "block" } );
  1170. assert.ok( jQuery( "#nothiddendiv" ).is( ":visible" ), "Modified CSS display: Assert element is visible" );
  1171. assert.ok( !jQuery( window ).is( ":visible" ), "Calling is(':visible') on window does not throw an exception (#10267)." );
  1172. assert.ok( !jQuery( document ).is( ":visible" ), "Calling is(':visible') on document does not throw an exception (#10267)." );
  1173. assert.ok( jQuery( "#nothiddendiv" ).is( ":visible" ), "Modifying CSS display: Assert element is visible" );
  1174. jQuery( "#nothiddendiv" ).css( "display", "none" );
  1175. assert.ok( !jQuery( "#nothiddendiv" ).is( ":visible" ), "Modified CSS display: Assert element is hidden" );
  1176. jQuery( "#nothiddendiv" ).css( "display", "block" );
  1177. assert.ok( jQuery( "#nothiddendiv" ).is( ":visible" ), "Modified CSS display: Assert element is visible" );
  1178. assert.ok( jQuery( "#siblingspan" ).is( ":visible" ), "Span with no content is visible" );
  1179. $div = jQuery( "<div><span></span></div>" ).appendTo( "#qunit-fixture" );
  1180. assert.equal( $div.find( ":visible" ).length, 1, "Span with no content is visible" );
  1181. $div.css( { width: 0, height: 0, overflow: "hidden" } );
  1182. assert.ok( $div.is( ":visible" ), "Div with width and height of 0 is still visible (gh-2227)" );
  1183. // Safari 6-7 and iOS 6-7 report 0 width for br elements
  1184. // When newer browsers propagate, re-enable this test
  1185. // $br = jQuery( "<br/>" ).appendTo( "#qunit-fixture" );
  1186. // assert.ok( $br.is( ":visible" ), "br element is visible" );
  1187. $table = jQuery( "#table" );
  1188. $table.html( "<tr><td style='display:none'>cell</td><td>cell</td></tr>" );
  1189. assert.equal( jQuery( "#table td:visible" ).length, 1, "hidden cell is not perceived as visible (#4512). Works on table elements" );
  1190. $table.css( "display", "none" ).html( "<tr><td>cell</td><td>cell</td></tr>" );
  1191. assert.equal( jQuery( "#table td:visible" ).length, 0, "hidden cell children not perceived as visible (#4512)" );
  1192. assert.t( "Is Visible", "#qunit-fixture div:visible:lt(2)", [ "foo", "nothiddendiv" ] );
  1193. assert.t( "Is Not Hidden", "#qunit-fixture:hidden", [] );
  1194. assert.t( "Is Hidden", "#form input:hidden", [ "hidden1", "hidden2" ] );
  1195. $a = jQuery( "<a href='#'><h1>Header</h1></a>" ).appendTo( "#qunit-fixture" );
  1196. assert.ok( $a.is( ":visible" ), "Anchor tag with flow content is visible (gh-2227)" );
  1197. } );
  1198. QUnit.test( "Keep the last style if the new one isn't recognized by the browser (#14836)", function( assert ) {
  1199. assert.expect( 1 );
  1200. var el = jQuery( "<div></div>" ).css( "position", "absolute" ).css( "position", "fake value" );
  1201. assert.equal( el.css( "position" ), "absolute", "The old style is kept when setting an unrecognized value" );
  1202. } );
  1203. // Support: Edge 14 - 16 only
  1204. // Edge collapses whitespace-only values when setting a style property and
  1205. // there is no easy way for us to work around it. Just skip the test there
  1206. // and hope for the better future.
  1207. QUnit[ /\bedge\/16\./i.test( navigator.userAgent ) ? "skip" : "test" ](
  1208. "Keep the last style if the new one is a non-empty whitespace (gh-3204)",
  1209. function( assert ) {
  1210. assert.expect( 1 );
  1211. var el = jQuery( "<div></div>" ).css( "position", "absolute" ).css( "position", " " );
  1212. assert.equal( el.css( "position" ), "absolute", "The old style is kept when setting to a space" );
  1213. } );
  1214. QUnit.test( "Reset the style if set to an empty string", function( assert ) {
  1215. assert.expect( 1 );
  1216. var el = jQuery( "<div></div>" ).css( "position", "absolute" ).css( "position", "" );
  1217. // Some browsers return an empty string; others "static". Both those cases mean the style
  1218. // was reset successfully so accept them both.
  1219. assert.equal( el.css( "position" ) || "static", "static",
  1220. "The style can be reset by setting to an empty string" );
  1221. } );
  1222. QUnit.test(
  1223. "Clearing a Cloned Element's Style Shouldn't Clear the Original Element's Style (#8908)",
  1224. function( assert ) {
  1225. assert.expect( 24 );
  1226. var done = assert.async();
  1227. var styles = [ {
  1228. name: "backgroundAttachment",
  1229. value: [ "fixed" ],
  1230. expected: [ "scroll" ]
  1231. }, {
  1232. name: "backgroundColor",
  1233. value: [ "rgb(255, 0, 0)", "rgb(255,0,0)", "#ff0000" ],
  1234. expected: [ "transparent" ]
  1235. }, {
  1236. // Firefox returns auto's value
  1237. name: "backgroundImage",
  1238. value: [ "url('test.png')", "url(" + baseURL + "test.png)", "url(\"" + baseURL + "test.png\")" ],
  1239. expected: [ "none", "url(\"http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif\")" ]
  1240. }, {
  1241. name: "backgroundPosition",
  1242. value: [ "5% 5%" ],
  1243. expected: [ "0% 0%", "-1000px 0px", "-1000px 0%" ]
  1244. }, {
  1245. // Firefox returns no-repeat
  1246. name: "backgroundRepeat",
  1247. value: [ "repeat-y" ],
  1248. expected: [ "repeat", "no-repeat" ]
  1249. }, {
  1250. name: "backgroundClip",
  1251. value: [ "padding-box" ],
  1252. expected: [ "border-box" ]
  1253. }, {
  1254. name: "backgroundOrigin",
  1255. value: [ "content-box" ],
  1256. expected: [ "padding-box" ]
  1257. }, {
  1258. name: "backgroundSize",
  1259. value: [ "80px 60px" ],
  1260. expected: [ "auto auto" ]
  1261. } ];
  1262. jQuery.each( styles, function( index, style ) {
  1263. var $clone, $clonedChildren,
  1264. $source = jQuery( "#firstp" ),
  1265. source = $source[ 0 ],
  1266. $children = $source.children();
  1267. style.expected = style.expected.concat( [ "", "auto" ] );
  1268. if ( source.style[ style.name ] === undefined ) {
  1269. assert.ok( true, style.name + ": style isn't supported and therefore not an issue" );
  1270. assert.ok( true );
  1271. return true;
  1272. }
  1273. $source.css( style.name, style.value[ 0 ] );
  1274. $children.css( style.name, style.value[ 0 ] );
  1275. $clone = $source.clone();
  1276. $clonedChildren = $clone.children();
  1277. $clone.css( style.name, "" );
  1278. $clonedChildren.css( style.name, "" );
  1279. window.setTimeout( function() {
  1280. assert.notEqual( $clone.css( style.name ), style.value[ 0 ], "Cloned css was changed" );
  1281. assert.ok( jQuery.inArray( $source.css( style.name ) !== -1, style.value ),
  1282. "Clearing clone.css() doesn't affect source.css(): " + style.name +
  1283. "; result: " + $source.css( style.name ) +
  1284. "; expected: " + style.value.join( "," ) );
  1285. assert.ok( jQuery.inArray( $children.css( style.name ) !== -1, style.value ),
  1286. "Clearing clonedChildren.css() doesn't affect children.css(): " + style.name +
  1287. "; result: " + $children.css( style.name ) +
  1288. "; expected: " + style.value.join( "," ) );
  1289. }, 100 );
  1290. } );
  1291. window.setTimeout( done, 1000 );
  1292. }
  1293. );
  1294. // Support: IE <=10 only
  1295. // We have to jump through the hoops here in order to test work with "order" CSS property,
  1296. // that some browsers do not support. This test is not, strictly speaking, correct,
  1297. // but it's the best that we can do.
  1298. ( function() {
  1299. var style = document.createElement( "div" ).style,
  1300. exist = "order" in style || "WebkitOrder" in style;
  1301. if ( exist ) {
  1302. QUnit.test( "Don't append px to CSS \"order\" value (#14049)", function( assert ) {
  1303. assert.expect( 1 );
  1304. var $elem = jQuery( "<div></div>" );
  1305. $elem.css( "order", 2 );
  1306. assert.equal( $elem.css( "order" ), "2", "2 on order" );
  1307. } );
  1308. }
  1309. } )();
  1310. QUnit.test( "Do not throw on frame elements from css method (#15098)", function( assert ) {
  1311. assert.expect( 1 );
  1312. var frameWin, frameDoc,
  1313. frameElement = document.createElement( "iframe" ),
  1314. frameWrapDiv = document.createElement( "div" );
  1315. frameWrapDiv.appendChild( frameElement );
  1316. document.body.appendChild( frameWrapDiv );
  1317. frameWin = frameElement.contentWindow;
  1318. frameDoc = frameWin.document;
  1319. frameDoc.open();
  1320. frameDoc.write( "<!doctype html><html><body><div>Hi</div></body></html>" );
  1321. frameDoc.close();
  1322. frameWrapDiv.style.display = "none";
  1323. try {
  1324. jQuery( frameDoc.body ).css( "direction" );
  1325. assert.ok( true, "It didn't throw" );
  1326. } catch ( _ ) {
  1327. assert.ok( false, "It did throw" );
  1328. }
  1329. } );
  1330. ( function() {
  1331. var vendorPrefixes = [ "Webkit", "Moz", "ms" ];
  1332. function resetCssPropsFor( name ) {
  1333. delete jQuery.cssProps[ name ];
  1334. jQuery.each( vendorPrefixes, function( index, prefix ) {
  1335. delete jQuery.cssProps[ prefix + name[ 0 ].toUpperCase() + name.slice( 1 ) ];
  1336. } );
  1337. }
  1338. QUnit.test( "Don't default to a cached previously used wrong prefixed name (gh-2015)", function( assert ) {
  1339. // Note: this test needs a property we know is only supported in a prefixed version
  1340. // by at least one of our main supported browsers. This may get out of date so let's
  1341. // use -(webkit|moz)-appearance as well as those two are not on a standards track.
  1342. var appearanceName, transformName, elem, elemStyle,
  1343. transformVal = "translate(5px, 2px)",
  1344. emptyStyle = document.createElement( "div" ).style;
  1345. if ( "appearance" in emptyStyle ) {
  1346. appearanceName = "appearance";
  1347. } else {
  1348. jQuery.each( vendorPrefixes, function( index, prefix ) {
  1349. var prefixedProp = prefix + "Appearance";
  1350. if ( prefixedProp in emptyStyle ) {
  1351. appearanceName = prefixedProp;
  1352. }
  1353. } );
  1354. }
  1355. if ( "transform" in emptyStyle ) {
  1356. transformName = "transform";
  1357. } else {
  1358. jQuery.each( vendorPrefixes, function( index, prefix ) {
  1359. var prefixedProp = prefix + "Transform";
  1360. if ( prefixedProp in emptyStyle ) {
  1361. transformName = prefixedProp;
  1362. }
  1363. } );
  1364. }
  1365. assert.expect( !!appearanceName + !!transformName + 1 );
  1366. resetCssPropsFor( "appearance" );
  1367. resetCssPropsFor( "transform" );
  1368. elem = jQuery( "<div></div>" )
  1369. .css( {
  1370. msAppearance: "none",
  1371. appearance: "none",
  1372. // Only the ms prefix is used to make sure we haven't e.g. set
  1373. // webkitTransform ourselves in the test.
  1374. msTransform: transformVal,
  1375. transform: transformVal
  1376. } );
  1377. elemStyle = elem[ 0 ].style;
  1378. if ( appearanceName ) {
  1379. assert.equal( elemStyle[ appearanceName ], "none", "setting properly-prefixed appearance" );
  1380. }
  1381. if ( transformName ) {
  1382. assert.equal( elemStyle[ transformName ], transformVal, "setting properly-prefixed transform" );
  1383. }
  1384. assert.equal( elemStyle[ "undefined" ], undefined, "Nothing writes to node.style.undefined" );
  1385. } );
  1386. QUnit.test( "Don't detect fake set properties on a node when caching the prefixed version", function( assert ) {
  1387. assert.expect( 1 );
  1388. var elem = jQuery( "<div></div>" ),
  1389. style = elem[ 0 ].style;
  1390. style.MozFakeProperty = "old value";
  1391. elem.css( "fakeProperty", "new value" );
  1392. assert.equal( style.MozFakeProperty, "old value", "Fake prefixed property is not cached" );
  1393. } );
  1394. } )();
  1395. ( function() {
  1396. var supportsCssVars,
  1397. elem = jQuery( "<div>" ).appendTo( document.body ),
  1398. div = elem[ 0 ];
  1399. div.style.setProperty( "--prop", "value" );
  1400. supportsCssVars = !!getComputedStyle( div ).getPropertyValue( "--prop" );
  1401. elem.remove();
  1402. QUnit[ supportsCssVars ? "test" : "skip" ]( "css(--customProperty)", function( assert ) {
  1403. jQuery( "#qunit-fixture" ).append(
  1404. "<style>\n" +
  1405. " .test__customProperties {\n" +
  1406. " --prop1:val1;\n" +
  1407. " --prop2: val2;\n" +
  1408. " --prop3:val3 ;\n" +
  1409. " --prop4:\"val4\";\n" +
  1410. " --prop5:'val5';\n" +
  1411. " }\n" +
  1412. "</style>"
  1413. );
  1414. var div = jQuery( "<div>" ).appendTo( "#qunit-fixture" ),
  1415. $elem = jQuery( "<div>" ).addClass( "test__customProperties" )
  1416. .appendTo( "#qunit-fixture" ),
  1417. webkit = /\bsafari\b/i.test( navigator.userAgent ) &&
  1418. !/\firefox\b/i.test( navigator.userAgent ) &&
  1419. !/\edge\b/i.test( navigator.userAgent ),
  1420. oldSafari = webkit && ( /\b9\.\d(\.\d+)* safari/i.test( navigator.userAgent ) ||
  1421. /\b10\.0(\.\d+)* safari/i.test( navigator.userAgent ) ||
  1422. /iphone os (?:9|10)_/i.test( navigator.userAgent ) ),
  1423. expected = 10;
  1424. if ( webkit ) {
  1425. expected -= 2;
  1426. }
  1427. if ( oldSafari ) {
  1428. expected -= 2;
  1429. }
  1430. assert.expect( expected );
  1431. div.css( "--color", "blue" );
  1432. assert.equal( div.css( "--color" ), "blue", "Modified CSS custom property using string" );
  1433. div.css( "--color", "yellow" );
  1434. assert.equal( div.css( "--color" ), "yellow", "Overwrite CSS custom property" );
  1435. div.css( { "--color": "red" } );
  1436. assert.equal( div.css( "--color" ), "red", "Modified CSS custom property using object" );
  1437. div.css( { "--mixedCase": "green" } );
  1438. div.css( { "--mixed-case": "red" } );
  1439. assert.equal( div.css( "--mixedCase" ), "green",
  1440. "Modified CSS custom property with mixed case" );
  1441. div.css( { "--theme-dark": "purple" } );
  1442. div.css( { "--themeDark": "red" } );
  1443. assert.equal( div.css( "--theme-dark" ), "purple",
  1444. "Modified CSS custom property with dashed name" );
  1445. assert.equal( $elem.css( "--prop1" ), "val1", "Basic CSS custom property" );
  1446. // Support: Safari 9.1-10.0 only
  1447. // Safari collapses whitespaces & quotes. Ignore it.
  1448. if ( !oldSafari ) {
  1449. assert.equal( $elem.css( "--prop2" ), " val2", "Preceding whitespace maintained" );
  1450. assert.equal( $elem.css( "--prop3" ), "val3 ", "Following whitespace maintained" );
  1451. }
  1452. // Support: Chrome 49-55, Safari 9.1-10.0
  1453. // Chrome treats single quotes as double ones.
  1454. // Safari treats double quotes as single ones.
  1455. if ( !webkit ) {
  1456. assert.equal( $elem.css( "--prop4" ), "\"val4\"", "Works with double quotes" );
  1457. assert.equal( $elem.css( "--prop5" ), "'val5'", "Works with single quotes" );
  1458. }
  1459. } );
  1460. QUnit[ supportsCssVars ? "test" : "skip" ]( "Don't append px to CSS vars", function( assert ) {
  1461. assert.expect( 3 );
  1462. var $div = jQuery( "<div>" ).appendTo( "#qunit-fixture" );
  1463. $div
  1464. .css( "--a", 3 )
  1465. .css( "--line-height", 4 )
  1466. .css( "--lineHeight", 5 );
  1467. assert.equal( $div.css( "--a" ), "3", "--a: 3" );
  1468. assert.equal( $div.css( "--line-height" ), "4", "--line-height: 4" );
  1469. assert.equal( $div.css( "--lineHeight" ), "5", "--lineHeight: 5" );
  1470. } );
  1471. } )();
  1472. }