tests.js 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450
  1. "use strict";
  2. var util = require('util');
  3. var cssstyle = require('../lib/CSSStyleDeclaration');
  4. var camelToDashed = require('../lib/parsers').camelToDashed;
  5. /**
  6. * These are the required properties
  7. * see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties
  8. **/
  9. var properties = [ 'azimuth', 'background', 'backgroundAttachment', 'backgroundColor', 'backgroundImage', 'backgroundPosition', 'backgroundRepeat', 'border', 'borderCollapse', 'borderColor', 'borderSpacing', 'borderStyle', 'borderTop', 'borderRight', 'borderBottom', 'borderLeft', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'borderTopStyle', 'borderRightStyle', 'borderBottomStyle', 'borderLeftStyle', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'borderWidth', 'bottom', 'captionSide', 'clear', 'clip', 'color', 'content', 'counterIncrement', 'counterReset', 'cue', 'cueAfter', 'cueBefore', 'cursor', 'direction', 'display', 'elevation', 'emptyCells', 'cssFloat', 'font', 'fontFamily', 'fontSize', 'fontSizeAdjust', 'fontStretch', 'fontStyle', 'fontVariant', 'fontWeight', 'height', 'left', 'letterSpacing', 'lineHeight', 'listStyle', 'listStyleImage', 'listStylePosition', 'listStyleType', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'markerOffset', 'marks', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'orphans', 'outline', 'outlineColor', 'outlineStyle', 'outlineWidth', 'overflow', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'page', 'pageBreakAfter', 'pageBreakBefore', 'pageBreakInside', 'pause', 'pauseAfter', 'pauseBefore', 'pitch', 'pitchRange', 'playDuring', 'position', 'quotes', 'richness', 'right', 'size', 'speak', 'speakHeader', 'speakNumeral', 'speakPunctuation', 'speechRate', 'stress', 'tableLayout', 'textAlign', 'textDecoration', 'textIndent', 'textShadow', 'textTransform', 'top', 'unicodeBidi', 'verticalAlign', 'visibility', 'voiceFamily', 'volume', 'whiteSpace', 'widows', 'width', 'wordSpacing', 'zIndex'];
  10. var dashed_properties = properties.map(function (property) {
  11. return camelToDashed(property);
  12. });
  13. module.exports = {
  14. 'Verify Has Properties': function (test) {
  15. var style = new cssstyle.CSSStyleDeclaration();
  16. test.expect(properties.length * 2);
  17. properties.forEach(function (property) {
  18. test.ok(style.__lookupGetter__(property), 'missing ' + property + ' property');
  19. test.ok(style.__lookupSetter__(property), 'missing ' + property + ' property');
  20. });
  21. test.done();
  22. },
  23. 'Verify Has Dashed Properties': function (test) {
  24. var style = new cssstyle.CSSStyleDeclaration();
  25. test.expect(dashed_properties.length * 2);
  26. dashed_properties.forEach(function (property) {
  27. test.ok(style.__lookupGetter__(property), 'missing ' + property + ' property');
  28. test.ok(style.__lookupSetter__(property), 'missing ' + property + ' property');
  29. });
  30. test.done();
  31. },
  32. 'Verify Has Functions': function (test) {
  33. var style = new cssstyle.CSSStyleDeclaration();
  34. test.expect(6);
  35. test.ok(typeof style.getPropertyValue === 'function', 'missing getPropertyValue()');
  36. test.ok(typeof style.getPropertyCSSValue === 'function', 'missing getPropertyCSSValue()');
  37. test.ok(typeof style.removeProperty === 'function', 'missing removeProperty()');
  38. test.ok(typeof style.getPropertyPriority === 'function', 'missing getPropertyPriority()');
  39. test.ok(typeof style.setProperty === 'function', 'missing setProperty()');
  40. test.ok(typeof style.item === 'function', 'missing item()');
  41. test.done();
  42. },
  43. 'Verify Has Special Properties': function (test) {
  44. var style = new cssstyle.CSSStyleDeclaration();
  45. test.expect(5);
  46. test.ok(style.__lookupGetter__('cssText'), 'missing cssText getter');
  47. test.ok(style.__lookupSetter__('cssText'), 'missing cssText setter');
  48. test.ok(style.__lookupGetter__('length'), 'missing length getter');
  49. test.ok(style.__lookupSetter__('length'), 'missing length setter');
  50. test.ok(style.__lookupGetter__('parentRule'), 'missing parentRule getter');
  51. test.done();
  52. },
  53. 'Test From Style String': function (test) {
  54. var style = new cssstyle.CSSStyleDeclaration();
  55. test.expect(8);
  56. style.cssText = 'color: blue; background-color: red; width: 78%; height: 50vh;';
  57. test.ok(4 === style.length, 'length is not 4');
  58. test.ok('color: blue; background-color: red; width: 78%; height: 50vh;' === style.cssText, 'cssText is wrong');
  59. test.ok('blue' === style.getPropertyValue('color'), "getPropertyValue('color') failed");
  60. test.ok('color' === style.item(0), 'item(0) failed');
  61. test.ok('background-color' === style[1], 'style[1] failed');
  62. test.ok('red' === style.backgroundColor, 'style.backgroundColor failed with "' + style.backgroundColor + '"');
  63. style.cssText = '';
  64. test.ok('' === style.cssText, 'cssText is not empty');
  65. test.ok(0 === style.length, 'length is not 0');
  66. test.done();
  67. },
  68. 'Test From Properties': function (test) {
  69. var style = new cssstyle.CSSStyleDeclaration();
  70. test.expect(11);
  71. style.color = 'blue';
  72. test.ok(1 === style.length, 'length is not 1');
  73. test.ok('color' === style[0], 'style[0] is not color');
  74. test.ok('color: blue;' === style.cssText, 'cssText is wrong');
  75. test.ok('color' === style.item(0), 'item(0) is not color');
  76. test.ok('blue' === style.color, 'color is not blue');
  77. style.backgroundColor = 'red';
  78. test.ok(2 === style.length, 'length is not 2');
  79. test.ok('color' === style[0], 'style[0] is not color');
  80. test.ok('background-color' === style[1], 'style[1] is not background-color');
  81. test.ok('color: blue; background-color: red;' === style.cssText, 'cssText is wrong');
  82. test.ok('red' === style.backgroundColor, 'backgroundColor is not red');
  83. style.removeProperty('color');
  84. test.ok('background-color' === style[0], 'style[0] is not background-color');
  85. test.done();
  86. },
  87. 'Test Shorthand Properties': function (test) {
  88. var style = new cssstyle.CSSStyleDeclaration();
  89. test.expect(11);
  90. style.background = 'blue url(http://www.example.com/some_img.jpg)';
  91. test.ok('blue' === style.backgroundColor, 'backgroundColor is not blue');
  92. test.ok('url(http://www.example.com/some_img.jpg)' === style.backgroundImage, 'backgroundImage is wrong');
  93. test.ok('blue url(http://www.example.com/some_img.jpg)' === style.background, 'background is different');
  94. style.border = '0 solid black';
  95. test.ok('0px' === style.borderWidth, 'borderWidth is not 0px');
  96. test.ok('solid' === style.borderStyle, 'borderStyle is not solid');
  97. test.ok('black' === style.borderColor, 'borderColor is not black');
  98. test.ok('0px' === style.borderTopWidth, 'borderTopWidth is not 0px');
  99. test.ok('solid' === style.borderLeftStyle, 'borderLeftStyle is not solid');
  100. test.ok('black' === style.borderBottomColor, 'borderBottomColor is not black');
  101. style.font = '12em monospace';
  102. test.ok('12em' === style.fontSize, 'fontSize is not 12em');
  103. test.ok('monospace' === style.fontFamily, 'fontFamily is not monospace');
  104. test.done();
  105. },
  106. 'Test width and height Properties and null and empty strings': function (test) {
  107. var style = new cssstyle.CSSStyleDeclaration();
  108. test.expect(9);
  109. style.height = 6;
  110. test.ok('' === style.height, 'height does not remain unset');
  111. style.width = 0;
  112. test.ok('0px' === style.width, 'width is not 0px');
  113. style.height = '34%';
  114. test.ok('34%' === style.height, 'height is not 34%');
  115. style.height = '100vh';
  116. test.ok('100vh' === style.height, 'height is not 100vh');
  117. style.height = '100vw';
  118. test.ok('100vw' === style.height, 'height is not 100vw');
  119. style.height = '';
  120. test.ok(style.length === 1, 'length is not 1');
  121. test.ok('width: 0px;' === style.cssText, 'cssText is not "width: 0px;"');
  122. style.width = null;
  123. test.ok(style.length === 0, 'length is not 0');
  124. test.ok('' === style.cssText, 'cssText is not empty string');
  125. test.done();
  126. },
  127. 'Test Implicit Properties': function (test) {
  128. var style = new cssstyle.CSSStyleDeclaration();
  129. test.expect(7);
  130. style.borderWidth = 0;
  131. test.ok(1 === style.length, 'length is not 1');
  132. test.ok('0px' === style.borderWidth, 'borderWidth is not 0px');
  133. test.ok('0px' === style.borderTopWidth, 'borderTopWidth is not 0px');
  134. test.ok('0px' === style.borderBottomWidth, 'borderBottomWidth is not 0px');
  135. test.ok('0px' === style.borderLeftWidth, 'borderLeftWidth is not 0px');
  136. test.ok('0px' === style.borderRightWidth, 'borderRightWidth is not 0px');
  137. test.ok('border-width: 0px;' === style.cssText, 'cssText is not "border-width: 0px", "' + style.cssText + '"');
  138. test.done();
  139. },
  140. 'Test Top, Left, Right, Bottom Properties': function (test) {
  141. var style = new cssstyle.CSSStyleDeclaration();
  142. test.expect(6);
  143. style.top = 0;
  144. style.left = '0%';
  145. style.right = '5em';
  146. style.bottom = '12pt';
  147. test.ok('0px' === style.top, 'top is not 0px');
  148. test.ok('0%' === style.left, 'left is not 0%');
  149. test.ok('5em' === style.right, 'right is not 5em');
  150. test.ok('12pt' === style.bottom, 'bottom is not 12pt');
  151. test.ok(4 === style.length, 'length is not 4');
  152. test.ok('top: 0px; left: 0%; right: 5em; bottom: 12pt;' === style.cssText, 'text is not "top: 0px; left: 0%; right: 5em; bottom: 12pt;"');
  153. test.done();
  154. },
  155. 'Test Clear and Clip Properties': function (test) {
  156. var style = new cssstyle.CSSStyleDeclaration();
  157. test.expect(10);
  158. style.clear = 'none';
  159. test.ok('none' === style.clear, 'clear is not none');
  160. style.clear = 'lfet'; // intentionally wrong
  161. test.ok('none' === style.clear, 'clear is not still none');
  162. style.clear = 'left';
  163. test.ok('left' === style.clear, 'clear is not left');
  164. style.clear = 'right';
  165. test.ok('right' === style.clear, 'clear is not right');
  166. style.clear = 'both';
  167. test.ok('both' === style.clear, 'clear is not both');
  168. style.clip = 'elipse(5px, 10px)';
  169. test.ok('' === style.clip, 'clip should not be set');
  170. test.ok(1 === style.length, 'length is not 1');
  171. style.clip = 'rect(0, 3Em, 2pt, 50%)';
  172. test.ok('rect(0px, 3em, 2pt, 50%)' === style.clip, 'clip is not "rect(0px, 3em, 2pt, 50%)", "' + style.clip + '"');
  173. test.ok(2 === style.length, 'length is not 2');
  174. test.ok('clear: both; clip: rect(0px, 3em, 2pt, 50%);' === style.cssText, 'cssText is not "clear: both; clip: rect(0px, 3em, 2pt, 50%);"');
  175. test.done();
  176. },
  177. 'Test colors': function (test) {
  178. var style = new cssstyle.CSSStyleDeclaration();
  179. test.expect(4);
  180. style.color = 'rgba(0,0,0,0)';
  181. test.ok('rgba(0, 0, 0, 0)' === style.color, 'color is not rgba(0, 0, 0, 0)');
  182. style.color = 'rgba(5%, 10%, 20%, 0.4)';
  183. test.ok('rgba(12, 25, 51, 0.4)' === style.color, 'color is not rgba(12, 25, 51, 0.4)');
  184. style.color = 'rgb(33%, 34%, 33%)';
  185. test.ok('rgb(84, 86, 84)' === style.color, 'color is not rgb(84, 86, 84)');
  186. style.color = 'rgba(300, 200, 100, 1.5)';
  187. test.ok('rgb(255, 200, 100)' === style.color, 'color is not rgb(255, 200, 100) ' + style.color);
  188. test.done();
  189. },
  190. 'Test short hand properties with embedded spaces': function (test) {
  191. var style = new cssstyle.CSSStyleDeclaration();
  192. test.expect(4);
  193. style.background = 'rgb(0, 0, 0) url(/something/somewhere.jpg)';
  194. test.ok('rgb(0, 0, 0)' === style.backgroundColor, 'backgroundColor is not rgb(0, 0, 0): ' + style.backgroundColor);
  195. test.ok('url(/something/somewhere.jpg)' === style.backgroundImage, 'backgroundImage is not url(/something/somewhere.jpg): ' + style.backgroundImage);
  196. test.ok('background: rgb(0, 0, 0) url(/something/somewhere.jpg);' === style.cssText, 'cssText is not correct: ' + style.cssText);
  197. style = new cssstyle.CSSStyleDeclaration();
  198. style.border = ' 1px solid black ';
  199. test.ok('1px solid black' === style.border, 'multiple spaces not properly parsed: ' + style.border);
  200. test.done();
  201. },
  202. 'Setting shorthand properties to an empty string should clear all dependent properties': function (test) {
  203. var style = new cssstyle.CSSStyleDeclaration();
  204. test.expect(2);
  205. style.borderWidth = '1px';
  206. test.ok('border-width: 1px;' === style.cssText, 'cssText is not "border-width: 1px;": ' + style.cssText);
  207. style.border = '';
  208. test.ok('' === style.cssText, 'cssText is not "": ' + style.cssText);
  209. test.done();
  210. },
  211. 'Setting implicit properties to an empty string should clear all dependent properties': function (test) {
  212. var style = new cssstyle.CSSStyleDeclaration();
  213. test.expect(2);
  214. style.borderTopWidth = '1px';
  215. test.ok('border-top-width: 1px;' === style.cssText, 'cssText is not "border-top-width: 1px;": ' + style.cssText);
  216. style.borderWidth = '';
  217. test.ok('' === style.cssText, 'cssText is not "": ' + style.cssText);
  218. test.done();
  219. },
  220. 'Setting a shorthand property, whose shorthands are implicit properties, to an empty string should clear all dependent properties': function (test) {
  221. var style = new cssstyle.CSSStyleDeclaration();
  222. test.expect(4);
  223. style.borderTopWidth = '1px';
  224. test.ok('border-top-width: 1px;' === style.cssText, 'cssText is not "border-top-width: 1px;": ' + style.cssText);
  225. style.border = '';
  226. test.ok('' === style.cssText, 'cssText is not "": ' + style.cssText);
  227. style.borderTop = '1px solid black';
  228. test.ok('border-top: 1px solid black;' === style.cssText, 'cssText is not "border-top: 1px solid black;": ' + style.cssText);
  229. style.border = '';
  230. test.ok('' === style.cssText, 'cssText is not "": ' + style.cssText);
  231. test.done();
  232. },
  233. 'Setting border values to "none" should clear dependent values': function (test) {
  234. var style = new cssstyle.CSSStyleDeclaration();
  235. test.expect(8);
  236. style.borderTopWidth = '1px';
  237. test.ok('border-top-width: 1px;' === style.cssText, 'cssText is not "border-top-width: 1px;": ' + style.cssText);
  238. style.border = 'none';
  239. test.ok('' === style.cssText, 'cssText is not "": ' + style.cssText);
  240. style.borderTopWidth = '1px';
  241. test.ok('border-top-width: 1px;' === style.cssText, 'cssText is not "border-top-width: 1px;": ' + style.cssText);
  242. style.borderTopStyle = 'none';
  243. test.ok('' === style.cssText, 'cssText is not "": ' + style.cssText);
  244. style.borderTopWidth = '1px';
  245. test.ok('border-top-width: 1px;' === style.cssText, 'cssText is not "border-top-width: 1px;": ' + style.cssText);
  246. style.borderTop = 'none';
  247. test.ok('' === style.cssText, 'cssText is not "": ' + style.cssText);
  248. style.borderTopWidth = '1px';
  249. style.borderLeftWidth = '1px';
  250. test.ok('border-top-width: 1px; border-left-width: 1px;' === style.cssText, 'cssText is not "border-top-width: 1px; border-left-width: 1px;": ' + style.cssText);
  251. style.borderTop = 'none';
  252. test.ok('border-left-width: 1px;' === style.cssText, 'cssText is not "border-left-width: 1px;": ' + style.cssText);
  253. test.done();
  254. },
  255. 'Setting border to 0 should be okay': function (test) {
  256. var style = new cssstyle.CSSStyleDeclaration();
  257. test.expect(1);
  258. style.border = 0;
  259. test.ok('border: 0px;' === style.cssText, 'cssText is not "border: 0px;": ' + style.cssText);
  260. test.done();
  261. },
  262. 'Setting values implicit and shorthand properties via cssText and setProperty should propagate to dependent properties': function (test) {
  263. var style = new cssstyle.CSSStyleDeclaration();
  264. test.expect(4);
  265. style.cssText = 'border: 1px solid black;';
  266. test.ok('border: 1px solid black;' === style.cssText, 'cssText is not "border: 1px solid black;": ' + style.cssText);
  267. test.ok('1px solid black' === style.borderTop, 'borderTop is not "1px solid black": ' + style.borderTop);
  268. style.border = '';
  269. test.ok('' === style.cssText, 'cssText is not "": ' + style.cssText);
  270. style.setProperty('border', '1px solid black');
  271. test.ok('border: 1px solid black;' === style.cssText, 'cssText is not "border: 1px solid black;": ' + style.cssText);
  272. test.done();
  273. },
  274. 'Setting opacity should work': function (test) {
  275. var style = new cssstyle.CSSStyleDeclaration();
  276. test.expect(3);
  277. style.setProperty('opacity', 0.75);
  278. test.ok('opacity: 0.75;' === style.cssText, 'cssText is not "opacity: 0.75;": ' + style.cssText);
  279. style.opacity = '0.50';
  280. test.ok('opacity: 0.5;' === style.cssText, 'cssText is not "opacity: 0.5;": ' + style.cssText);
  281. style.opacity = 1.0;
  282. test.ok('opacity: 1;' === style.cssText, 'cssText is not "opacity: 1;": ' + style.cssText);
  283. test.done();
  284. },
  285. 'Width and height of auto should work': function (test) {
  286. var style = new cssstyle.CSSStyleDeclaration();
  287. test.expect(4);
  288. style.width = "auto";
  289. test.equal(style.cssText,'width: auto;', 'cssText is not "width: auto;": ' + style.cssText);
  290. test.equal(style.width,'auto', 'width is not "auto": ' + style.width);
  291. style = new cssstyle.CSSStyleDeclaration();
  292. style.height = "auto";
  293. test.equal(style.cssText,'height: auto;', 'cssText is not "height: auto;": ' + style.cssText);
  294. test.equal(style.height,'auto', 'height is not "auto": ' + style.height);
  295. test.done();
  296. },
  297. 'Padding and margin should set/clear shorthand properties': function (test) {
  298. var style = new cssstyle.CSSStyleDeclaration();
  299. var parts = ["Top","Right","Bottom","Left"];
  300. var testParts = function (name,v,V) {
  301. style[name] = v;
  302. for (var i = 0; i < 4; i++) {
  303. var part = name + parts[i];
  304. test.equal(V[i],style[part], part + ' is not "' + V[i] + '": "' + style[part] + '"');
  305. }
  306. test.equal(v,style[name], name + ' is not "' + v + '": "' + style[name] + '"');
  307. style[name] = "";
  308. };
  309. test.expect(50);
  310. testParts("padding","1px",["1px","1px","1px","1px"]);
  311. testParts("padding","1px 2%",["1px","2%","1px","2%"]);
  312. testParts("padding","1px 2px 3px",["1px","2px","3px","2px"]);
  313. testParts("padding","1px 2px 3px 4px",["1px","2px","3px","4px"]);
  314. style.paddingTop = style.paddingRight = style.paddingBottom = style.paddingLeft = "1px";
  315. testParts("padding","",["","","",""]);
  316. testParts("margin","1px",["1px","1px","1px","1px"]);
  317. testParts("margin","1px auto",["1px","auto","1px","auto"]);
  318. testParts("margin","1px 2% 3px",["1px","2%","3px","2%"]);
  319. testParts("margin","1px 2px 3px 4px",["1px","2px","3px","4px"]);
  320. style.marginTop = style.marginRight = style.marginBottom = style.marginLeft = "1px";
  321. testParts("margin","",["","","",""]);
  322. test.done();
  323. },
  324. 'Padding and margin shorthands should set main properties': function (test) {
  325. var style = new cssstyle.CSSStyleDeclaration();
  326. var parts = ["Top","Right","Bottom","Left"];
  327. var testParts = function (name,v,V) {
  328. var expect;
  329. for (var i = 0; i < 4; i++) {
  330. style[name] = v;
  331. style[name+parts[i]] = V;
  332. expect = v.split(/ /);
  333. expect[i] = V;
  334. expect = expect.join(" ");
  335. test.equal(expect,style[name], name + ' is not "' + expect + '": "' + style[name] + '"');
  336. }
  337. };
  338. test.expect(12);
  339. testParts("padding","1px 2px 3px 4px","10px");
  340. testParts("margin","1px 2px 3px 4px","10px");
  341. testParts("margin","1px 2px 3px 4px","auto");
  342. test.done();
  343. },
  344. 'Setting a value to 0 should return the string value': function (test) {
  345. var style = new cssstyle.CSSStyleDeclaration();
  346. test.expect(1);
  347. style.setProperty('fill-opacity', 0);
  348. test.ok('0' === style.fillOpacity, 'fillOpacity is not "0": ' + style.fillOpacity);
  349. test.done();
  350. },
  351. 'onChange callback should be called when the cssText changes': function (test) {
  352. var style = new cssstyle.CSSStyleDeclaration(function (cssText) {
  353. test.ok('opacity: 0;' === cssText, 'cssText is not "opacity: 0;": ' + cssText);
  354. test.done();
  355. });
  356. test.expect(1);
  357. style.setProperty('opacity', 0);
  358. },
  359. 'Setting float should work the same as cssFloat': function (test) {
  360. var style = new cssstyle.CSSStyleDeclaration();
  361. test.expect(1);
  362. style.float = 'left';
  363. test.ok('left' === style.cssFloat, 'cssFloat is not "left": ' + style.cssFloat);
  364. test.done();
  365. },
  366. 'Setting improper css to cssText should not throw': function (test) {
  367. var style = new cssstyle.CSSStyleDeclaration();
  368. test.expect(2);
  369. style.cssText = 'color: ';
  370. test.ok('' === style.cssText, 'cssText wasn\'t cleared: ' + style.cssText);
  371. style.color = 'black';
  372. style.cssText = 'float: ';
  373. test.ok('' === style.cssText, 'cssText wasn\'t cleared: ' + style.cssText);
  374. test.done();
  375. },
  376. 'Make sure url parsing works with quotes': function (test) {
  377. var style = new cssstyle.CSSStyleDeclaration();
  378. test.expect(3);
  379. style.backgroundImage = 'url(http://some/url/here1.png)';
  380. test.ok('url(http://some/url/here1.png)' === style.backgroundImage, 'background-image wasn\'t url(http://some/url/here1.png): ' + style.backgroundImage);
  381. style.backgroundImage = 'url(\'http://some/url/here2.png\')';
  382. test.ok('url(http://some/url/here2.png)' === style.backgroundImage, 'background-image wasn\'t url(http://some/url/here2.png): ' + style.backgroundImage);
  383. style.backgroundImage = 'url("http://some/url/here3.png")';
  384. test.ok('url(http://some/url/here3.png)' === style.backgroundImage, 'background-image wasn\'t url(http://some/url/here3.png): ' + style.backgroundImage);
  385. test.done();
  386. },
  387. 'Make sure setting 0 to a padding or margin works': function (test) {
  388. var style = new cssstyle.CSSStyleDeclaration();
  389. test.expect(2);
  390. style.padding = 0;
  391. test.equal(style.cssText, 'padding: 0px;', 'padding is not 0px');
  392. style.margin = '1em';
  393. style.marginTop = '0'
  394. test.equal(style.marginTop, '0px', 'margin-top is not 0px');
  395. test.done();
  396. },
  397. 'Make sure setting ex units to a padding or margin works': function (test) {
  398. var style = new cssstyle.CSSStyleDeclaration();
  399. test.expect(2);
  400. style.padding = '1ex';
  401. test.equal(style.cssText, 'padding: 1ex;', 'padding is not 1ex');
  402. style.margin = '1em';
  403. style.marginTop = '0.5ex'
  404. test.equal(style.marginTop, '0.5ex', 'margin-top is not 0.5ex');
  405. test.done();
  406. },
  407. 'Make sure setting null to background works': function (test) {
  408. var style = new cssstyle.CSSStyleDeclaration();
  409. test.expect(2);
  410. style.background = 'red';
  411. test.equal(style.cssText, 'background: red;', 'background is not red');
  412. style.background = null;
  413. test.equal(style.cssText, '', 'cssText is not empty');
  414. test.done();
  415. },
  416. 'Flex properties should keep their values': function (test) {
  417. var style = new cssstyle.CSSStyleDeclaration();
  418. test.expect(2);
  419. style.flexDirection = 'column';
  420. test.equal(style.cssText, 'flex-direction: column;', 'flex-direction is not column');
  421. style.flexDirection = 'row';
  422. test.equal(style.cssText, 'flex-direction: row;', 'flex-direction is not column');
  423. test.done();
  424. },
  425. 'Make sure camelCase properties are not assigned with `.setProperty()`': function(test) {
  426. var style = new cssstyle.CSSStyleDeclaration();
  427. test.expect(1);
  428. style.setProperty('fontSize', '12px');
  429. test.equal(style.cssText, '', 'cssText is not empty');
  430. test.done();
  431. },
  432. 'Make sure casing is ignored in `.setProperty()`': function(test) {
  433. var style = new cssstyle.CSSStyleDeclaration();
  434. test.expect(2);
  435. style.setProperty('FoNt-SiZe', '12px');
  436. test.equal(style.fontSize, '12px', 'font-size: 12px');
  437. test.equal(style.getPropertyValue('font-size'), '12px', 'font-size: 12px');
  438. test.done();
  439. },
  440. 'Support non string entries in border-spacing': function (test) {
  441. var style = new cssstyle.CSSStyleDeclaration();
  442. test.expect(1);
  443. style.borderSpacing = 0;
  444. test.equal(style.cssText, 'border-spacing: 0px;', 'border-spacing is not 0');
  445. test.done();
  446. }
  447. };