tests.js 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669
  1. 'use strict';
  2. var cssstyle = require('../lib/CSSStyleDeclaration');
  3. var { dashedToCamelCase } = require('../lib/parsers');
  4. var dashedProperties = [
  5. ...require('../lib/allProperties'),
  6. ...require('../lib/allExtraProperties'),
  7. ];
  8. var allowedProperties = dashedProperties.map(dashedToCamelCase);
  9. var implementedProperties = Array.from(require('../lib/implementedProperties')).map(
  10. dashedToCamelCase
  11. );
  12. var invalidProperties = implementedProperties.filter(function(property) {
  13. return !allowedProperties.includes(property);
  14. });
  15. module.exports = {
  16. 'Verify Has Only Valid Properties Implemented': function(test) {
  17. test.expect(1);
  18. test.ok(
  19. invalidProperties.length === 0,
  20. invalidProperties.length +
  21. ' invalid properties implemented: ' +
  22. Array.from(invalidProperties).join(', ')
  23. );
  24. test.done();
  25. },
  26. 'Verify Has All Properties': function(test) {
  27. var style = new cssstyle.CSSStyleDeclaration();
  28. test.expect(allowedProperties.length * 2);
  29. allowedProperties.forEach(function(property) {
  30. test.ok(style.__lookupGetter__(property), 'missing ' + property + ' property');
  31. test.ok(style.__lookupSetter__(property), 'missing ' + property + ' property');
  32. });
  33. test.done();
  34. },
  35. 'Verify Has All Dashed Properties': function(test) {
  36. var style = new cssstyle.CSSStyleDeclaration();
  37. test.expect(dashedProperties.length * 2);
  38. dashedProperties.forEach(function(property) {
  39. test.ok(style.__lookupGetter__(property), 'missing ' + property + ' property');
  40. test.ok(style.__lookupSetter__(property), 'missing ' + property + ' property');
  41. });
  42. test.done();
  43. },
  44. 'Verify Has Functions': function(test) {
  45. var style = new cssstyle.CSSStyleDeclaration();
  46. test.expect(6);
  47. test.ok(typeof style.getPropertyValue === 'function', 'missing getPropertyValue()');
  48. test.ok(typeof style.getPropertyCSSValue === 'function', 'missing getPropertyCSSValue()');
  49. test.ok(typeof style.removeProperty === 'function', 'missing removeProperty()');
  50. test.ok(typeof style.getPropertyPriority === 'function', 'missing getPropertyPriority()');
  51. test.ok(typeof style.setProperty === 'function', 'missing setProperty()');
  52. test.ok(typeof style.item === 'function', 'missing item()');
  53. test.done();
  54. },
  55. 'Verify Has Special Properties': function(test) {
  56. var style = new cssstyle.CSSStyleDeclaration();
  57. test.expect(5);
  58. test.ok(style.__lookupGetter__('cssText'), 'missing cssText getter');
  59. test.ok(style.__lookupSetter__('cssText'), 'missing cssText setter');
  60. test.ok(style.__lookupGetter__('length'), 'missing length getter');
  61. test.ok(style.__lookupSetter__('length'), 'missing length setter');
  62. test.ok(style.__lookupGetter__('parentRule'), 'missing parentRule getter');
  63. test.done();
  64. },
  65. 'Test From Style String': function(test) {
  66. var style = new cssstyle.CSSStyleDeclaration();
  67. test.expect(8);
  68. style.cssText = 'color: blue; background-color: red; width: 78%; height: 50vh;';
  69. test.ok(4 === style.length, 'length is not 4');
  70. test.ok(
  71. 'color: blue; background-color: red; width: 78%; height: 50vh;' === style.cssText,
  72. 'cssText is wrong'
  73. );
  74. test.ok('blue' === style.getPropertyValue('color'), "getPropertyValue('color') failed");
  75. test.ok('color' === style.item(0), 'item(0) failed');
  76. test.ok('background-color' === style[1], 'style[1] failed');
  77. test.ok(
  78. 'red' === style.backgroundColor,
  79. 'style.backgroundColor failed with "' + style.backgroundColor + '"'
  80. );
  81. style.cssText = '';
  82. test.ok('' === style.cssText, 'cssText is not empty');
  83. test.ok(0 === style.length, 'length is not 0');
  84. test.done();
  85. },
  86. 'Test From Properties': function(test) {
  87. var style = new cssstyle.CSSStyleDeclaration();
  88. test.expect(11);
  89. style.color = 'blue';
  90. test.ok(1 === style.length, 'length is not 1');
  91. test.ok('color' === style[0], 'style[0] is not color');
  92. test.ok('color: blue;' === style.cssText, 'cssText is wrong');
  93. test.ok('color' === style.item(0), 'item(0) is not color');
  94. test.ok('blue' === style.color, 'color is not blue');
  95. style.backgroundColor = 'red';
  96. test.ok(2 === style.length, 'length is not 2');
  97. test.ok('color' === style[0], 'style[0] is not color');
  98. test.ok('background-color' === style[1], 'style[1] is not background-color');
  99. test.ok('color: blue; background-color: red;' === style.cssText, 'cssText is wrong');
  100. test.ok('red' === style.backgroundColor, 'backgroundColor is not red');
  101. style.removeProperty('color');
  102. test.ok('background-color' === style[0], 'style[0] is not background-color');
  103. test.done();
  104. },
  105. 'Test Shorthand Properties': function(test) {
  106. var style = new cssstyle.CSSStyleDeclaration();
  107. test.expect(11);
  108. style.background = 'blue url(http://www.example.com/some_img.jpg)';
  109. test.ok('blue' === style.backgroundColor, 'backgroundColor is not blue');
  110. test.ok(
  111. 'url(http://www.example.com/some_img.jpg)' === style.backgroundImage,
  112. 'backgroundImage is wrong'
  113. );
  114. test.ok(
  115. 'blue url(http://www.example.com/some_img.jpg)' === style.background,
  116. 'background is different'
  117. );
  118. style.border = '0 solid black';
  119. test.ok('0px' === style.borderWidth, 'borderWidth is not 0px');
  120. test.ok('solid' === style.borderStyle, 'borderStyle is not solid');
  121. test.ok('black' === style.borderColor, 'borderColor is not black');
  122. test.ok('0px' === style.borderTopWidth, 'borderTopWidth is not 0px');
  123. test.ok('solid' === style.borderLeftStyle, 'borderLeftStyle is not solid');
  124. test.ok('black' === style.borderBottomColor, 'borderBottomColor is not black');
  125. style.font = '12em monospace';
  126. test.ok('12em' === style.fontSize, 'fontSize is not 12em');
  127. test.ok('monospace' === style.fontFamily, 'fontFamily is not monospace');
  128. test.done();
  129. },
  130. 'Test width and height Properties and null and empty strings': function(test) {
  131. var style = new cssstyle.CSSStyleDeclaration();
  132. test.expect(9);
  133. style.height = 6;
  134. test.ok('' === style.height, 'height does not remain unset');
  135. style.width = 0;
  136. test.ok('0px' === style.width, 'width is not 0px');
  137. style.height = '34%';
  138. test.ok('34%' === style.height, 'height is not 34%');
  139. style.height = '100vh';
  140. test.ok('100vh' === style.height, 'height is not 100vh');
  141. style.height = '100vw';
  142. test.ok('100vw' === style.height, 'height is not 100vw');
  143. style.height = '';
  144. test.ok(style.length === 1, 'length is not 1');
  145. test.ok('width: 0px;' === style.cssText, 'cssText is not "width: 0px;"');
  146. style.width = null;
  147. test.ok(style.length === 0, 'length is not 0');
  148. test.ok('' === style.cssText, 'cssText is not empty string');
  149. test.done();
  150. },
  151. 'Test Implicit Properties': function(test) {
  152. var style = new cssstyle.CSSStyleDeclaration();
  153. test.expect(7);
  154. style.borderWidth = 0;
  155. test.ok(1 === style.length, 'length is not 1');
  156. test.ok('0px' === style.borderWidth, 'borderWidth is not 0px');
  157. test.ok('0px' === style.borderTopWidth, 'borderTopWidth is not 0px');
  158. test.ok('0px' === style.borderBottomWidth, 'borderBottomWidth is not 0px');
  159. test.ok('0px' === style.borderLeftWidth, 'borderLeftWidth is not 0px');
  160. test.ok('0px' === style.borderRightWidth, 'borderRightWidth is not 0px');
  161. test.ok(
  162. 'border-width: 0px;' === style.cssText,
  163. 'cssText is not "border-width: 0px", "' + style.cssText + '"'
  164. );
  165. test.done();
  166. },
  167. 'Test Top, Left, Right, Bottom Properties': function(test) {
  168. var style = new cssstyle.CSSStyleDeclaration();
  169. test.expect(6);
  170. style.top = 0;
  171. style.left = '0%';
  172. style.right = '5em';
  173. style.bottom = '12pt';
  174. test.ok('0px' === style.top, 'top is not 0px');
  175. test.ok('0%' === style.left, 'left is not 0%');
  176. test.ok('5em' === style.right, 'right is not 5em');
  177. test.ok('12pt' === style.bottom, 'bottom is not 12pt');
  178. test.ok(4 === style.length, 'length is not 4');
  179. test.ok(
  180. 'top: 0px; left: 0%; right: 5em; bottom: 12pt;' === style.cssText,
  181. 'text is not "top: 0px; left: 0%; right: 5em; bottom: 12pt;"'
  182. );
  183. test.done();
  184. },
  185. 'Test Clear and Clip Properties': function(test) {
  186. var style = new cssstyle.CSSStyleDeclaration();
  187. test.expect(10);
  188. style.clear = 'none';
  189. test.ok('none' === style.clear, 'clear is not none');
  190. style.clear = 'lfet'; // intentionally wrong
  191. test.ok('none' === style.clear, 'clear is not still none');
  192. style.clear = 'left';
  193. test.ok('left' === style.clear, 'clear is not left');
  194. style.clear = 'right';
  195. test.ok('right' === style.clear, 'clear is not right');
  196. style.clear = 'both';
  197. test.ok('both' === style.clear, 'clear is not both');
  198. style.clip = 'elipse(5px, 10px)';
  199. test.ok('' === style.clip, 'clip should not be set');
  200. test.ok(1 === style.length, 'length is not 1');
  201. style.clip = 'rect(0, 3Em, 2pt, 50%)';
  202. test.ok(
  203. 'rect(0px, 3em, 2pt, 50%)' === style.clip,
  204. 'clip is not "rect(0px, 3em, 2pt, 50%)", "' + style.clip + '"'
  205. );
  206. test.ok(2 === style.length, 'length is not 2');
  207. test.ok(
  208. 'clear: both; clip: rect(0px, 3em, 2pt, 50%);' === style.cssText,
  209. 'cssText is not "clear: both; clip: rect(0px, 3em, 2pt, 50%);"'
  210. );
  211. test.done();
  212. },
  213. 'Test colors': function(test) {
  214. var style = new cssstyle.CSSStyleDeclaration();
  215. test.expect(9);
  216. style.color = 'rgba(0,0,0,0)';
  217. test.ok('rgba(0, 0, 0, 0)' === style.color, 'color is not rgba(0, 0, 0, 0)');
  218. style.color = 'rgba(5%, 10%, 20%, 0.4)';
  219. test.ok('rgba(12, 25, 51, 0.4)' === style.color, 'color is not rgba(12, 25, 51, 0.4)');
  220. style.color = 'rgb(33%, 34%, 33%)';
  221. test.ok('rgb(84, 86, 84)' === style.color, 'color is not rgb(84, 86, 84)');
  222. style.color = 'rgba(300, 200, 100, 1.5)';
  223. test.ok('rgb(255, 200, 100)' === style.color, 'color is not rgb(255, 200, 100) ' + style.color);
  224. style.color = 'hsla(0, 1%, 2%, 0.5)';
  225. test.ok(
  226. 'hsla(0, 1%, 2%, 0.5)' === style.color,
  227. 'color is not hsla(0, 1%, 2%, 0.5) ' + style.color
  228. );
  229. style.color = 'hsl(0, 1%, 2%)';
  230. test.ok('hsl(0, 1%, 2%)' === style.color, 'color is not hsl(0, 1%, 2%) ' + style.color);
  231. style.color = 'rebeccapurple';
  232. test.ok('rebeccapurple' === style.color, 'color is not rebeccapurple ' + style.color);
  233. style.color = 'transparent';
  234. test.ok('transparent' === style.color, 'color is not transparent ' + style.color);
  235. style.color = 'currentcolor';
  236. test.ok('currentcolor' === style.color, 'color is not currentcolor ' + style.color);
  237. test.done();
  238. },
  239. 'Test short hand properties with embedded spaces': function(test) {
  240. var style = new cssstyle.CSSStyleDeclaration();
  241. test.expect(4);
  242. style.background = 'rgb(0, 0, 0) url(/something/somewhere.jpg)';
  243. test.ok(
  244. 'rgb(0, 0, 0)' === style.backgroundColor,
  245. 'backgroundColor is not rgb(0, 0, 0): ' + style.backgroundColor
  246. );
  247. test.ok(
  248. 'url(/something/somewhere.jpg)' === style.backgroundImage,
  249. 'backgroundImage is not url(/something/somewhere.jpg): ' + style.backgroundImage
  250. );
  251. test.ok(
  252. 'background: rgb(0, 0, 0) url(/something/somewhere.jpg);' === style.cssText,
  253. 'cssText is not correct: ' + style.cssText
  254. );
  255. style = new cssstyle.CSSStyleDeclaration();
  256. style.border = ' 1px solid black ';
  257. test.ok(
  258. '1px solid black' === style.border,
  259. 'multiple spaces not properly parsed: ' + style.border
  260. );
  261. test.done();
  262. },
  263. 'Setting shorthand properties to an empty string should clear all dependent properties': function(
  264. test
  265. ) {
  266. var style = new cssstyle.CSSStyleDeclaration();
  267. test.expect(2);
  268. style.borderWidth = '1px';
  269. test.ok(
  270. 'border-width: 1px;' === style.cssText,
  271. 'cssText is not "border-width: 1px;": ' + style.cssText
  272. );
  273. style.border = '';
  274. test.ok('' === style.cssText, 'cssText is not "": ' + style.cssText);
  275. test.done();
  276. },
  277. 'Setting implicit properties to an empty string should clear all dependent properties': function(
  278. test
  279. ) {
  280. var style = new cssstyle.CSSStyleDeclaration();
  281. test.expect(2);
  282. style.borderTopWidth = '1px';
  283. test.ok(
  284. 'border-top-width: 1px;' === style.cssText,
  285. 'cssText is not "border-top-width: 1px;": ' + style.cssText
  286. );
  287. style.borderWidth = '';
  288. test.ok('' === style.cssText, 'cssText is not "": ' + style.cssText);
  289. test.done();
  290. },
  291. 'Setting a shorthand property, whose shorthands are implicit properties, to an empty string should clear all dependent properties': function(
  292. test
  293. ) {
  294. var style = new cssstyle.CSSStyleDeclaration();
  295. test.expect(4);
  296. style.borderTopWidth = '1px';
  297. test.ok(
  298. 'border-top-width: 1px;' === style.cssText,
  299. 'cssText is not "border-top-width: 1px;": ' + style.cssText
  300. );
  301. style.border = '';
  302. test.ok('' === style.cssText, 'cssText is not "": ' + style.cssText);
  303. style.borderTop = '1px solid black';
  304. test.ok(
  305. 'border-top: 1px solid black;' === style.cssText,
  306. 'cssText is not "border-top: 1px solid black;": ' + style.cssText
  307. );
  308. style.border = '';
  309. test.ok('' === style.cssText, 'cssText is not "": ' + style.cssText);
  310. test.done();
  311. },
  312. 'Setting border values to "none" should clear dependent values': function(test) {
  313. var style = new cssstyle.CSSStyleDeclaration();
  314. test.expect(8);
  315. style.borderTopWidth = '1px';
  316. test.ok(
  317. 'border-top-width: 1px;' === style.cssText,
  318. 'cssText is not "border-top-width: 1px;": ' + style.cssText
  319. );
  320. style.border = 'none';
  321. test.ok('' === style.cssText, 'cssText is not "": ' + style.cssText);
  322. style.borderTopWidth = '1px';
  323. test.ok(
  324. 'border-top-width: 1px;' === style.cssText,
  325. 'cssText is not "border-top-width: 1px;": ' + style.cssText
  326. );
  327. style.borderTopStyle = 'none';
  328. test.ok('' === style.cssText, 'cssText is not "": ' + style.cssText);
  329. style.borderTopWidth = '1px';
  330. test.ok(
  331. 'border-top-width: 1px;' === style.cssText,
  332. 'cssText is not "border-top-width: 1px;": ' + style.cssText
  333. );
  334. style.borderTop = 'none';
  335. test.ok('' === style.cssText, 'cssText is not "": ' + style.cssText);
  336. style.borderTopWidth = '1px';
  337. style.borderLeftWidth = '1px';
  338. test.ok(
  339. 'border-top-width: 1px; border-left-width: 1px;' === style.cssText,
  340. 'cssText is not "border-top-width: 1px; border-left-width: 1px;": ' + style.cssText
  341. );
  342. style.borderTop = 'none';
  343. test.ok(
  344. 'border-left-width: 1px;' === style.cssText,
  345. 'cssText is not "border-left-width: 1px;": ' + style.cssText
  346. );
  347. test.done();
  348. },
  349. 'Setting border to 0 should be okay': function(test) {
  350. var style = new cssstyle.CSSStyleDeclaration();
  351. test.expect(1);
  352. style.border = 0;
  353. test.ok('border: 0px;' === style.cssText, 'cssText is not "border: 0px;": ' + style.cssText);
  354. test.done();
  355. },
  356. 'Setting values implicit and shorthand properties via cssText and setProperty should propagate to dependent properties': function(
  357. test
  358. ) {
  359. var style = new cssstyle.CSSStyleDeclaration();
  360. test.expect(4);
  361. style.cssText = 'border: 1px solid black;';
  362. test.ok(
  363. 'border: 1px solid black;' === style.cssText,
  364. 'cssText is not "border: 1px solid black;": ' + style.cssText
  365. );
  366. test.ok(
  367. '1px solid black' === style.borderTop,
  368. 'borderTop is not "1px solid black": ' + style.borderTop
  369. );
  370. style.border = '';
  371. test.ok('' === style.cssText, 'cssText is not "": ' + style.cssText);
  372. style.setProperty('border', '1px solid black');
  373. test.ok(
  374. 'border: 1px solid black;' === style.cssText,
  375. 'cssText is not "border: 1px solid black;": ' + style.cssText
  376. );
  377. test.done();
  378. },
  379. 'Setting opacity should work': function(test) {
  380. var style = new cssstyle.CSSStyleDeclaration();
  381. test.expect(3);
  382. style.setProperty('opacity', 0.75);
  383. test.ok(
  384. 'opacity: 0.75;' === style.cssText,
  385. 'cssText is not "opacity: 0.75;": ' + style.cssText
  386. );
  387. style.opacity = '0.50';
  388. test.ok('opacity: 0.5;' === style.cssText, 'cssText is not "opacity: 0.5;": ' + style.cssText);
  389. style.opacity = 1.0;
  390. test.ok('opacity: 1;' === style.cssText, 'cssText is not "opacity: 1;": ' + style.cssText);
  391. test.done();
  392. },
  393. 'Width and height of auto should work': function(test) {
  394. var style = new cssstyle.CSSStyleDeclaration();
  395. test.expect(4);
  396. style.width = 'auto';
  397. test.equal(style.cssText, 'width: auto;', 'cssText is not "width: auto;": ' + style.cssText);
  398. test.equal(style.width, 'auto', 'width is not "auto": ' + style.width);
  399. style = new cssstyle.CSSStyleDeclaration();
  400. style.height = 'auto';
  401. test.equal(style.cssText, 'height: auto;', 'cssText is not "height: auto;": ' + style.cssText);
  402. test.equal(style.height, 'auto', 'height is not "auto": ' + style.height);
  403. test.done();
  404. },
  405. 'Padding and margin should set/clear shorthand properties': function(test) {
  406. var style = new cssstyle.CSSStyleDeclaration();
  407. var parts = ['Top', 'Right', 'Bottom', 'Left'];
  408. var testParts = function(name, v, V) {
  409. style[name] = v;
  410. for (var i = 0; i < 4; i++) {
  411. var part = name + parts[i];
  412. test.equal(V[i], style[part], part + ' is not "' + V[i] + '": "' + style[part] + '"');
  413. }
  414. test.equal(v, style[name], name + ' is not "' + v + '": "' + style[name] + '"');
  415. style[name] = '';
  416. };
  417. test.expect(50);
  418. testParts('padding', '1px', ['1px', '1px', '1px', '1px']);
  419. testParts('padding', '1px 2%', ['1px', '2%', '1px', '2%']);
  420. testParts('padding', '1px 2px 3px', ['1px', '2px', '3px', '2px']);
  421. testParts('padding', '1px 2px 3px 4px', ['1px', '2px', '3px', '4px']);
  422. style.paddingTop = style.paddingRight = style.paddingBottom = style.paddingLeft = '1px';
  423. testParts('padding', '', ['', '', '', '']);
  424. testParts('margin', '1px', ['1px', '1px', '1px', '1px']);
  425. testParts('margin', '1px auto', ['1px', 'auto', '1px', 'auto']);
  426. testParts('margin', '1px 2% 3px', ['1px', '2%', '3px', '2%']);
  427. testParts('margin', '1px 2px 3px 4px', ['1px', '2px', '3px', '4px']);
  428. style.marginTop = style.marginRight = style.marginBottom = style.marginLeft = '1px';
  429. testParts('margin', '', ['', '', '', '']);
  430. test.done();
  431. },
  432. 'Padding and margin shorthands should set main properties': function(test) {
  433. var style = new cssstyle.CSSStyleDeclaration();
  434. var parts = ['Top', 'Right', 'Bottom', 'Left'];
  435. var testParts = function(name, v, V) {
  436. var expect;
  437. for (var i = 0; i < 4; i++) {
  438. style[name] = v;
  439. style[name + parts[i]] = V;
  440. expect = v.split(/ /);
  441. expect[i] = V;
  442. expect = expect.join(' ');
  443. test.equal(expect, style[name], name + ' is not "' + expect + '": "' + style[name] + '"');
  444. }
  445. };
  446. test.expect(12);
  447. testParts('padding', '1px 2px 3px 4px', '10px');
  448. testParts('margin', '1px 2px 3px 4px', '10px');
  449. testParts('margin', '1px 2px 3px 4px', 'auto');
  450. test.done();
  451. },
  452. 'Setting a value to 0 should return the string value': function(test) {
  453. var style = new cssstyle.CSSStyleDeclaration();
  454. test.expect(1);
  455. style.setProperty('fill-opacity', 0);
  456. test.ok('0' === style.fillOpacity, 'fillOpacity is not "0": ' + style.fillOpacity);
  457. test.done();
  458. },
  459. 'onChange callback should be called when the cssText changes': function(test) {
  460. var style = new cssstyle.CSSStyleDeclaration(function(cssText) {
  461. test.ok('opacity: 0;' === cssText, 'cssText is not "opacity: 0;": ' + cssText);
  462. test.done();
  463. });
  464. test.expect(1);
  465. style.setProperty('opacity', 0);
  466. },
  467. 'Setting float should work the same as cssFloat': function(test) {
  468. var style = new cssstyle.CSSStyleDeclaration();
  469. test.expect(1);
  470. style.float = 'left';
  471. test.ok('left' === style.cssFloat, 'cssFloat is not "left": ' + style.cssFloat);
  472. test.done();
  473. },
  474. 'Setting improper css to cssText should not throw': function(test) {
  475. var style = new cssstyle.CSSStyleDeclaration();
  476. test.expect(2);
  477. style.cssText = 'color: ';
  478. test.ok('' === style.cssText, "cssText wasn't cleared: " + style.cssText);
  479. style.color = 'black';
  480. style.cssText = 'float: ';
  481. test.ok('' === style.cssText, "cssText wasn't cleared: " + style.cssText);
  482. test.done();
  483. },
  484. 'Make sure url parsing works with quotes': function(test) {
  485. var style = new cssstyle.CSSStyleDeclaration();
  486. test.expect(3);
  487. style.backgroundImage = 'url(http://some/url/here1.png)';
  488. test.ok(
  489. 'url(http://some/url/here1.png)' === style.backgroundImage,
  490. "background-image wasn't url(http://some/url/here1.png): " + style.backgroundImage
  491. );
  492. style.backgroundImage = "url('http://some/url/here2.png')";
  493. test.ok(
  494. 'url(http://some/url/here2.png)' === style.backgroundImage,
  495. "background-image wasn't url(http://some/url/here2.png): " + style.backgroundImage
  496. );
  497. style.backgroundImage = 'url("http://some/url/here3.png")';
  498. test.ok(
  499. 'url(http://some/url/here3.png)' === style.backgroundImage,
  500. "background-image wasn't url(http://some/url/here3.png): " + style.backgroundImage
  501. );
  502. test.done();
  503. },
  504. 'Make sure setting 0 to a padding or margin works': function(test) {
  505. var style = new cssstyle.CSSStyleDeclaration();
  506. test.expect(2);
  507. style.padding = 0;
  508. test.equal(style.cssText, 'padding: 0px;', 'padding is not 0px');
  509. style.margin = '1em';
  510. style.marginTop = '0';
  511. test.equal(style.marginTop, '0px', 'margin-top is not 0px');
  512. test.done();
  513. },
  514. 'Make sure setting ex units to a padding or margin works': function(test) {
  515. var style = new cssstyle.CSSStyleDeclaration();
  516. test.expect(2);
  517. style.padding = '1ex';
  518. test.equal(style.cssText, 'padding: 1ex;', 'padding is not 1ex');
  519. style.margin = '1em';
  520. style.marginTop = '0.5ex';
  521. test.equal(style.marginTop, '0.5ex', 'margin-top is not 0.5ex');
  522. test.done();
  523. },
  524. 'Make sure setting null to background works': function(test) {
  525. var style = new cssstyle.CSSStyleDeclaration();
  526. test.expect(2);
  527. style.background = 'red';
  528. test.equal(style.cssText, 'background: red;', 'background is not red');
  529. style.background = null;
  530. test.equal(style.cssText, '', 'cssText is not empty');
  531. test.done();
  532. },
  533. 'Flex properties should keep their values': function(test) {
  534. var style = new cssstyle.CSSStyleDeclaration();
  535. test.expect(2);
  536. style.flexDirection = 'column';
  537. test.equal(style.cssText, 'flex-direction: column;', 'flex-direction is not column');
  538. style.flexDirection = 'row';
  539. test.equal(style.cssText, 'flex-direction: row;', 'flex-direction is not column');
  540. test.done();
  541. },
  542. 'Make sure camelCase properties are not assigned with `.setProperty()`': function(test) {
  543. var style = new cssstyle.CSSStyleDeclaration();
  544. test.expect(1);
  545. style.setProperty('fontSize', '12px');
  546. test.equal(style.cssText, '', 'cssText is not empty');
  547. test.done();
  548. },
  549. 'Make sure casing is ignored in `.setProperty()`': function(test) {
  550. var style = new cssstyle.CSSStyleDeclaration();
  551. test.expect(2);
  552. style.setProperty('FoNt-SiZe', '12px');
  553. test.equal(style.fontSize, '12px', 'font-size: 12px');
  554. test.equal(style.getPropertyValue('font-size'), '12px', 'font-size: 12px');
  555. test.done();
  556. },
  557. 'Support non string entries in border-spacing': function(test) {
  558. var style = new cssstyle.CSSStyleDeclaration();
  559. test.expect(1);
  560. style.borderSpacing = 0;
  561. test.equal(style.cssText, 'border-spacing: 0px;', 'border-spacing is not 0');
  562. test.done();
  563. },
  564. 'Float should be valid property for `.setProperty()`': function(test) {
  565. var style = new cssstyle.CSSStyleDeclaration();
  566. test.expect(2);
  567. style.setProperty('float', 'left');
  568. test.equal(style.float, 'left');
  569. test.equal(style.getPropertyValue('float'), 'left', 'float: left');
  570. test.done();
  571. },
  572. 'Make sure flex-shrink works': function(test) {
  573. var style = new cssstyle.CSSStyleDeclaration();
  574. test.expect(3);
  575. style.setProperty('flex-shrink', 0);
  576. test.equal(style.getPropertyValue('flex-shrink'), '0', 'flex-shrink is not 0');
  577. style.setProperty('flex-shrink', 1);
  578. test.equal(style.getPropertyValue('flex-shrink'), '1', 'flex-shrink is not 1');
  579. test.equal(style.cssText, 'flex-shrink: 1;', 'flex-shrink cssText is incorrect');
  580. test.done();
  581. },
  582. 'Make sure flex-grow works': function(test) {
  583. var style = new cssstyle.CSSStyleDeclaration();
  584. test.expect(2);
  585. style.setProperty('flex-grow', 2);
  586. test.equal(style.getPropertyValue('flex-grow'), '2', 'flex-grow is not 2');
  587. test.equal(style.cssText, 'flex-grow: 2;', 'flex-grow cssText is incorrect');
  588. test.done();
  589. },
  590. 'Make sure flex-basis works': function(test) {
  591. var style = new cssstyle.CSSStyleDeclaration();
  592. test.expect(5);
  593. style.setProperty('flex-basis', 0);
  594. test.equal(style.getPropertyValue('flex-basis'), '0px', 'flex-basis is not 0px');
  595. style.setProperty('flex-basis', '250px');
  596. test.equal(style.getPropertyValue('flex-basis'), '250px', 'flex-basis is not 250px');
  597. style.setProperty('flex-basis', '10em');
  598. test.equal(style.getPropertyValue('flex-basis'), '10em', 'flex-basis is not 10em');
  599. style.setProperty('flex-basis', '30%');
  600. test.equal(style.getPropertyValue('flex-basis'), '30%', 'flex-basis is not 30%');
  601. test.equal(style.cssText, 'flex-basis: 30%;', 'flex-basis cssText is incorrect');
  602. test.done();
  603. },
  604. 'Make sure shorthand flex works': function(test) {
  605. var style = new cssstyle.CSSStyleDeclaration();
  606. test.expect(19);
  607. style.setProperty('flex', 'none');
  608. test.equal(style.getPropertyValue('flex-grow'), '0', 'flex-grow is not 0 if flex: none;');
  609. test.equal(style.getPropertyValue('flex-shrink'), '0', 'flex-shrink is not 0 if flex: none;');
  610. test.equal(
  611. style.getPropertyValue('flex-basis'),
  612. 'auto',
  613. 'flex-basis is not `auto` if flex: none;'
  614. );
  615. style.removeProperty('flex');
  616. style.removeProperty('flex-basis');
  617. style.setProperty('flex', 'auto');
  618. test.equal(style.getPropertyValue('flex-grow'), '', 'flex-grow is not empty if flex: auto;');
  619. test.equal(
  620. style.getPropertyValue('flex-shrink'),
  621. '',
  622. 'flex-shrink is not empty if flex: auto;'
  623. );
  624. test.equal(
  625. style.getPropertyValue('flex-basis'),
  626. 'auto',
  627. 'flex-basis is not `auto` if flex: auto;'
  628. );
  629. style.removeProperty('flex');
  630. style.setProperty('flex', '0 1 250px');
  631. test.equal(style.getPropertyValue('flex'), '0 1 250px', 'flex value is not `0 1 250px`');
  632. test.equal(style.getPropertyValue('flex-grow'), '0', 'flex-grow is not 0');
  633. test.equal(style.getPropertyValue('flex-shrink'), '1', 'flex-shrink is not 1');
  634. test.equal(style.getPropertyValue('flex-basis'), '250px', 'flex-basis is not 250px');
  635. style.removeProperty('flex');
  636. style.setProperty('flex', '2');
  637. test.equal(style.getPropertyValue('flex-grow'), '2', 'flex-grow is not 2');
  638. test.equal(style.getPropertyValue('flex-shrink'), '', 'flex-shrink is not empty');
  639. test.equal(style.getPropertyValue('flex-basis'), '', 'flex-basis is not empty');
  640. style.removeProperty('flex');
  641. style.setProperty('flex', '20%');
  642. test.equal(style.getPropertyValue('flex-grow'), '', 'flex-grow is not empty');
  643. test.equal(style.getPropertyValue('flex-shrink'), '', 'flex-shrink is not empty');
  644. test.equal(style.getPropertyValue('flex-basis'), '20%', 'flex-basis is not 20%');
  645. style.removeProperty('flex');
  646. style.setProperty('flex', '2 2');
  647. test.equal(style.getPropertyValue('flex-grow'), '2', 'flex-grow is not 2');
  648. test.equal(style.getPropertyValue('flex-shrink'), '2', 'flex-shrink is not 2');
  649. test.equal(style.getPropertyValue('flex-basis'), '', 'flex-basis is not empty');
  650. style.removeProperty('flex');
  651. test.done();
  652. },
  653. };