cssstyle 1.2.1 → 2.0.0

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