source: frontend/node_modules/cssstyle/lib/CSSStyleDeclaration.test.js

Last change on this file was 9af201e, checked in by MBK <marija.karapandzova@…>, 11 days ago

Fix frontend appearance
  • Property mode set to 100644
File size: 21.2 KB
Line 
1'use strict';
2
3var { CSSStyleDeclaration } = require('./CSSStyleDeclaration');
4
5var allProperties = require('./allProperties');
6var allExtraProperties = require('./allExtraProperties');
7var implementedProperties = require('./implementedProperties');
8var parsers = require('./parsers');
9
10var dashedProperties = [...allProperties, ...allExtraProperties];
11var allowedProperties = dashedProperties.map(parsers.dashedToCamelCase);
12implementedProperties = Array.from(implementedProperties).map(parsers.dashedToCamelCase);
13var invalidProperties = implementedProperties.filter(prop => !allowedProperties.includes(prop));
14
15describe('CSSStyleDeclaration', () => {
16 test('has only valid properties implemented', () => {
17 expect(invalidProperties.length).toEqual(0);
18 });
19
20 test('has all properties', () => {
21 var style = new CSSStyleDeclaration();
22 allProperties.forEach(property => {
23 expect(style.__lookupGetter__(property)).toBeTruthy();
24 expect(style.__lookupSetter__(property)).toBeTruthy();
25 });
26 });
27
28 test('has dashed properties', () => {
29 var style = new CSSStyleDeclaration();
30 dashedProperties.forEach(property => {
31 expect(style.__lookupGetter__(property)).toBeTruthy();
32 expect(style.__lookupSetter__(property)).toBeTruthy();
33 });
34 });
35
36 test('has all functions', () => {
37 var style = new CSSStyleDeclaration();
38
39 expect(typeof style.item).toEqual('function');
40 expect(typeof style.getPropertyValue).toEqual('function');
41 expect(typeof style.setProperty).toEqual('function');
42 expect(typeof style.getPropertyPriority).toEqual('function');
43 expect(typeof style.removeProperty).toEqual('function');
44
45 // TODO - deprecated according to MDN and not implemented at all, can we remove?
46 expect(typeof style.getPropertyCSSValue).toEqual('function');
47 });
48
49 test('has special properties', () => {
50 var style = new CSSStyleDeclaration();
51
52 expect(style.__lookupGetter__('cssText')).toBeTruthy();
53 expect(style.__lookupSetter__('cssText')).toBeTruthy();
54 expect(style.__lookupGetter__('length')).toBeTruthy();
55 expect(style.__lookupSetter__('length')).toBeTruthy();
56 expect(style.__lookupGetter__('parentRule')).toBeTruthy();
57 });
58
59 test('from style string', () => {
60 var style = new CSSStyleDeclaration();
61 style.cssText = 'color: blue; background-color: red; width: 78%; height: 50vh;';
62 expect(style.length).toEqual(4);
63 expect(style.cssText).toEqual('color: blue; background-color: red; width: 78%; height: 50vh;');
64 expect(style.getPropertyValue('color')).toEqual('blue');
65 expect(style.item(0)).toEqual('color');
66 expect(style[1]).toEqual('background-color');
67 expect(style.backgroundColor).toEqual('red');
68 style.cssText = '';
69 expect(style.cssText).toEqual('');
70 expect(style.length).toEqual(0);
71 });
72
73 test('from properties', () => {
74 var style = new CSSStyleDeclaration();
75 style.color = 'blue';
76 expect(style.length).toEqual(1);
77 expect(style[0]).toEqual('color');
78 expect(style.cssText).toEqual('color: blue;');
79 expect(style.item(0)).toEqual('color');
80 expect(style.color).toEqual('blue');
81 style.backgroundColor = 'red';
82 expect(style.length).toEqual(2);
83 expect(style[0]).toEqual('color');
84 expect(style[1]).toEqual('background-color');
85 expect(style.cssText).toEqual('color: blue; background-color: red;');
86 expect(style.backgroundColor).toEqual('red');
87 style.removeProperty('color');
88 expect(style[0]).toEqual('background-color');
89 });
90
91 test('shorthand properties', () => {
92 var style = new CSSStyleDeclaration();
93 style.background = 'blue url(http://www.example.com/some_img.jpg)';
94 expect(style.backgroundColor).toEqual('blue');
95 expect(style.backgroundImage).toEqual('url(http://www.example.com/some_img.jpg)');
96 expect(style.background).toEqual('blue url(http://www.example.com/some_img.jpg)');
97 style.border = '0 solid black';
98 expect(style.borderWidth).toEqual('0px');
99 expect(style.borderStyle).toEqual('solid');
100 expect(style.borderColor).toEqual('black');
101 expect(style.borderTopWidth).toEqual('0px');
102 expect(style.borderLeftStyle).toEqual('solid');
103 expect(style.borderBottomColor).toEqual('black');
104 style.font = '12em monospace';
105 expect(style.fontSize).toEqual('12em');
106 expect(style.fontFamily).toEqual('monospace');
107 });
108
109 test('width and height properties and null and empty strings', () => {
110 var style = new CSSStyleDeclaration();
111 style.height = 6;
112 expect(style.height).toEqual('');
113 style.width = 0;
114 expect(style.width).toEqual('0px');
115 style.height = '34%';
116 expect(style.height).toEqual('34%');
117 style.height = '100vh';
118 expect(style.height).toEqual('100vh');
119 style.height = '100vw';
120 expect(style.height).toEqual('100vw');
121 style.height = '';
122 expect(1).toEqual(style.length);
123 expect(style.cssText).toEqual('width: 0px;');
124 style.width = null;
125 expect(0).toEqual(style.length);
126 expect(style.cssText).toEqual('');
127 });
128
129 test('implicit properties', () => {
130 var style = new CSSStyleDeclaration();
131 style.borderWidth = 0;
132 expect(style.length).toEqual(1);
133 expect(style.borderWidth).toEqual('0px');
134 expect(style.borderTopWidth).toEqual('0px');
135 expect(style.borderBottomWidth).toEqual('0px');
136 expect(style.borderLeftWidth).toEqual('0px');
137 expect(style.borderRightWidth).toEqual('0px');
138 expect(style.cssText).toEqual('border-width: 0px;');
139 });
140
141 test('top, left, right, bottom properties', () => {
142 var style = new CSSStyleDeclaration();
143 style.top = 0;
144 style.left = '0%';
145 style.right = '5em';
146 style.bottom = '12pt';
147 expect(style.top).toEqual('0px');
148 expect(style.left).toEqual('0%');
149 expect(style.right).toEqual('5em');
150 expect(style.bottom).toEqual('12pt');
151 expect(style.length).toEqual(4);
152 expect(style.cssText).toEqual('top: 0px; left: 0%; right: 5em; bottom: 12pt;');
153 });
154
155 test('clear and clip properties', () => {
156 var style = new CSSStyleDeclaration();
157 style.clear = 'none';
158 expect(style.clear).toEqual('none');
159 style.clear = 'lfet';
160 expect(style.clear).toEqual('none');
161 style.clear = 'left';
162 expect(style.clear).toEqual('left');
163 style.clear = 'right';
164 expect(style.clear).toEqual('right');
165 style.clear = 'both';
166 expect(style.clear).toEqual('both');
167 style.clip = 'elipse(5px, 10px)';
168 expect(style.clip).toEqual('');
169 expect(style.length).toEqual(1);
170 style.clip = 'rect(0, 3Em, 2pt, 50%)';
171 expect(style.clip).toEqual('rect(0px, 3em, 2pt, 50%)');
172 expect(style.length).toEqual(2);
173 expect(style.cssText).toEqual('clear: both; clip: rect(0px, 3em, 2pt, 50%);');
174 });
175
176 test('colors', () => {
177 var style = new CSSStyleDeclaration();
178 style.color = 'rgba(0,0,0,0)';
179 expect(style.color).toEqual('rgba(0, 0, 0, 0)');
180 style.color = 'rgba(5%, 10%, 20%, 0.4)';
181 expect(style.color).toEqual('rgba(12, 25, 51, 0.4)');
182 style.color = 'rgb(33%, 34%, 33%)';
183 expect(style.color).toEqual('rgb(84, 86, 84)');
184 style.color = 'rgba(300, 200, 100, 1.5)';
185 expect(style.color).toEqual('rgb(255, 200, 100)');
186 style.color = 'hsla(0, 1%, 2%, 0.5)';
187 expect(style.color).toEqual('rgba(5, 5, 5, 0.5)');
188 style.color = 'hsl(0, 1%, 2%)';
189 expect(style.color).toEqual('rgb(5, 5, 5)');
190 style.color = 'rebeccapurple';
191 expect(style.color).toEqual('rebeccapurple');
192 style.color = 'transparent';
193 expect(style.color).toEqual('transparent');
194 style.color = 'currentcolor';
195 expect(style.color).toEqual('currentcolor');
196 style.color = '#ffffffff';
197 expect(style.color).toEqual('rgba(255, 255, 255, 1)');
198 style.color = '#fffa';
199 expect(style.color).toEqual('rgba(255, 255, 255, 0.667)');
200 style.color = '#ffffff66';
201 expect(style.color).toEqual('rgba(255, 255, 255, 0.4)');
202 });
203
204 test('short hand properties with embedded spaces', () => {
205 var style = new CSSStyleDeclaration();
206 style.background = 'rgb(0, 0, 0) url(/something/somewhere.jpg)';
207 expect(style.backgroundColor).toEqual('rgb(0, 0, 0)');
208 expect(style.backgroundImage).toEqual('url(/something/somewhere.jpg)');
209 expect(style.cssText).toEqual('background: rgb(0, 0, 0) url(/something/somewhere.jpg);');
210 style = new CSSStyleDeclaration();
211 style.border = ' 1px solid black ';
212 expect(style.border).toEqual('1px solid black');
213 });
214
215 test('setting shorthand properties to an empty string should clear all dependent properties', () => {
216 var style = new CSSStyleDeclaration();
217 style.borderWidth = '1px';
218 expect(style.cssText).toEqual('border-width: 1px;');
219 style.border = '';
220 expect(style.cssText).toEqual('');
221 });
222
223 test('setting implicit properties to an empty string should clear all dependent properties', () => {
224 var style = new CSSStyleDeclaration();
225 style.borderTopWidth = '1px';
226 expect(style.cssText).toEqual('border-top-width: 1px;');
227 style.borderWidth = '';
228 expect(style.cssText).toEqual('');
229 });
230
231 test('setting a shorthand property, whose shorthands are implicit properties, to an empty string should clear all dependent properties', () => {
232 var style = new CSSStyleDeclaration();
233 style.borderTopWidth = '1px';
234 expect(style.cssText).toEqual('border-top-width: 1px;');
235 style.border = '';
236 expect(style.cssText).toEqual('');
237 style.borderTop = '1px solid black';
238 expect(style.cssText).toEqual('border-top: 1px solid black;');
239 style.border = '';
240 expect(style.cssText).toEqual('');
241 });
242
243 test('setting border values to "none" should clear dependent values', () => {
244 var style = new CSSStyleDeclaration();
245 style.borderTopWidth = '1px';
246 expect(style.cssText).toEqual('border-top-width: 1px;');
247 style.border = 'none';
248 expect(style.cssText).toEqual('');
249 style.borderTopWidth = '1px';
250 expect(style.cssText).toEqual('border-top-width: 1px;');
251 style.borderTopStyle = 'none';
252 expect(style.cssText).toEqual('');
253 style.borderTopWidth = '1px';
254 expect(style.cssText).toEqual('border-top-width: 1px;');
255 style.borderTop = 'none';
256 expect(style.cssText).toEqual('');
257 style.borderTopWidth = '1px';
258 style.borderLeftWidth = '1px';
259 expect(style.cssText).toEqual('border-top-width: 1px; border-left-width: 1px;');
260 style.borderTop = 'none';
261 expect(style.cssText).toEqual('border-left-width: 1px;');
262 });
263
264 test('setting border to 0 should be okay', () => {
265 var style = new CSSStyleDeclaration();
266 style.border = 0;
267 expect(style.cssText).toEqual('border: 0px;');
268 });
269
270 test('setting values implicit and shorthand properties via csstext and setproperty should propagate to dependent properties', () => {
271 var style = new CSSStyleDeclaration();
272 style.cssText = 'border: 1px solid black;';
273 expect(style.cssText).toEqual('border: 1px solid black;');
274 expect(style.borderTop).toEqual('1px solid black');
275 style.border = '';
276 expect(style.cssText).toEqual('');
277 style.setProperty('border', '1px solid black');
278 expect(style.cssText).toEqual('border: 1px solid black;');
279 });
280
281 test('setting opacity should work', () => {
282 var style = new CSSStyleDeclaration();
283 style.setProperty('opacity', 0.75);
284 expect(style.cssText).toEqual('opacity: 0.75;');
285 style.opacity = '0.50';
286 expect(style.cssText).toEqual('opacity: 0.5;');
287 style.opacity = 1;
288 expect(style.cssText).toEqual('opacity: 1;');
289 });
290
291 test('width and height of auto should work', () => {
292 var style = new CSSStyleDeclaration();
293 style.width = 'auto';
294 expect(style.cssText).toEqual('width: auto;');
295 expect(style.width).toEqual('auto');
296 style = new CSSStyleDeclaration();
297 style.height = 'auto';
298 expect(style.cssText).toEqual('height: auto;');
299 expect(style.height).toEqual('auto');
300 });
301
302 test('padding and margin should set/clear shorthand properties', () => {
303 var style = new CSSStyleDeclaration();
304 var parts = ['Top', 'Right', 'Bottom', 'Left'];
305 var testParts = function(name, v, V) {
306 style[name] = v;
307 for (var i = 0; i < 4; i++) {
308 var part = name + parts[i];
309 expect(style[part]).toEqual(V[i]);
310 }
311
312 expect(style[name]).toEqual(v);
313 style[name] = '';
314 };
315 testParts('padding', '1px', ['1px', '1px', '1px', '1px']);
316 testParts('padding', '1px 2%', ['1px', '2%', '1px', '2%']);
317 testParts('padding', '1px 2px 3px', ['1px', '2px', '3px', '2px']);
318 testParts('padding', '1px 2px 3px 4px', ['1px', '2px', '3px', '4px']);
319 style.paddingTop = style.paddingRight = style.paddingBottom = style.paddingLeft = '1px';
320 testParts('padding', '', ['', '', '', '']);
321 testParts('margin', '1px', ['1px', '1px', '1px', '1px']);
322 testParts('margin', '1px auto', ['1px', 'auto', '1px', 'auto']);
323 testParts('margin', '1px 2% 3px', ['1px', '2%', '3px', '2%']);
324 testParts('margin', '1px 2px 3px 4px', ['1px', '2px', '3px', '4px']);
325 style.marginTop = style.marginRight = style.marginBottom = style.marginLeft = '1px';
326 testParts('margin', '', ['', '', '', '']);
327 });
328
329 test('padding and margin shorthands should set main properties', () => {
330 var style = new CSSStyleDeclaration();
331 var parts = ['Top', 'Right', 'Bottom', 'Left'];
332 var testParts = function(name, v, V) {
333 var expected;
334 for (var i = 0; i < 4; i++) {
335 style[name] = v;
336 style[name + parts[i]] = V;
337 expected = v.split(/ /);
338 expected[i] = V;
339 expected = expected.join(' ');
340
341 expect(style[name]).toEqual(expected);
342 }
343 };
344 testParts('padding', '1px 2px 3px 4px', '10px');
345 testParts('margin', '1px 2px 3px 4px', '10px');
346 testParts('margin', '1px 2px 3px 4px', 'auto');
347 });
348
349 test('setting a value to 0 should return the string value', () => {
350 var style = new CSSStyleDeclaration();
351 style.setProperty('fill-opacity', 0);
352 expect(style.fillOpacity).toEqual('0');
353 });
354
355 test('onchange callback should be called when the csstext changes', () => {
356 var style = new CSSStyleDeclaration(function(cssText) {
357 expect(cssText).toEqual('opacity: 0;');
358 });
359 style.setProperty('opacity', 0);
360 });
361
362 test('setting float should work the same as cssfloat', () => {
363 var style = new CSSStyleDeclaration();
364 style.float = 'left';
365 expect(style.cssFloat).toEqual('left');
366 });
367
368 test('setting improper css to csstext should not throw', () => {
369 var style = new CSSStyleDeclaration();
370 style.cssText = 'color: ';
371 expect(style.cssText).toEqual('');
372 style.color = 'black';
373 style.cssText = 'float: ';
374 expect(style.cssText).toEqual('');
375 });
376
377 test('url parsing works with quotes', () => {
378 var style = new CSSStyleDeclaration();
379 style.backgroundImage = 'url(http://some/url/here1.png)';
380 expect(style.backgroundImage).toEqual('url(http://some/url/here1.png)');
381 style.backgroundImage = "url('http://some/url/here2.png')";
382 expect(style.backgroundImage).toEqual('url(http://some/url/here2.png)');
383 style.backgroundImage = 'url("http://some/url/here3.png")';
384 expect(style.backgroundImage).toEqual('url(http://some/url/here3.png)');
385 });
386
387 test('setting 0 to a padding or margin works', () => {
388 var style = new CSSStyleDeclaration();
389 style.padding = 0;
390 expect(style.cssText).toEqual('padding: 0px;');
391 style.margin = '1em';
392 style.marginTop = '0';
393 expect(style.marginTop).toEqual('0px');
394 });
395
396 test('setting ex units to a padding or margin works', () => {
397 var style = new CSSStyleDeclaration();
398 style.padding = '1ex';
399 expect(style.cssText).toEqual('padding: 1ex;');
400 style.margin = '1em';
401 style.marginTop = '0.5ex';
402 expect(style.marginTop).toEqual('0.5ex');
403 });
404
405 test('setting null to background works', () => {
406 var style = new CSSStyleDeclaration();
407 style.background = 'red';
408 expect(style.cssText).toEqual('background: red;');
409 style.background = null;
410 expect(style.cssText).toEqual('');
411 });
412
413 test('flex properties should keep their values', () => {
414 var style = new CSSStyleDeclaration();
415 style.flexDirection = 'column';
416 expect(style.cssText).toEqual('flex-direction: column;');
417 style.flexDirection = 'row';
418 expect(style.cssText).toEqual('flex-direction: row;');
419 });
420
421 test('camelcase properties are not assigned with `.setproperty()`', () => {
422 var style = new CSSStyleDeclaration();
423 style.setProperty('fontSize', '12px');
424 expect(style.cssText).toEqual('');
425 });
426
427 test('casing is ignored in `.setproperty()`', () => {
428 var style = new CSSStyleDeclaration();
429 style.setProperty('FoNt-SiZe', '12px');
430 expect(style.fontSize).toEqual('12px');
431 expect(style.getPropertyValue('font-size')).toEqual('12px');
432 });
433
434 test('support non string entries in border-spacing', () => {
435 var style = new CSSStyleDeclaration();
436 style.borderSpacing = 0;
437 expect(style.cssText).toEqual('border-spacing: 0px;');
438 });
439
440 test('float should be valid property for `.setproperty()`', () => {
441 var style = new CSSStyleDeclaration();
442 style.setProperty('float', 'left');
443 expect(style.float).toEqual('left');
444 expect(style.getPropertyValue('float')).toEqual('left');
445 });
446
447 test('flex-shrink works', () => {
448 var style = new CSSStyleDeclaration();
449 style.setProperty('flex-shrink', 0);
450 expect(style.getPropertyValue('flex-shrink')).toEqual('0');
451 style.setProperty('flex-shrink', 1);
452 expect(style.getPropertyValue('flex-shrink')).toEqual('1');
453 expect(style.cssText).toEqual('flex-shrink: 1;');
454 });
455
456 test('flex-grow works', () => {
457 var style = new CSSStyleDeclaration();
458 style.setProperty('flex-grow', 2);
459 expect(style.getPropertyValue('flex-grow')).toEqual('2');
460 expect(style.cssText).toEqual('flex-grow: 2;');
461 });
462
463 test('flex-basis works', () => {
464 var style = new CSSStyleDeclaration();
465 style.setProperty('flex-basis', 0);
466 expect(style.getPropertyValue('flex-basis')).toEqual('0px');
467 style.setProperty('flex-basis', '250px');
468 expect(style.getPropertyValue('flex-basis')).toEqual('250px');
469 style.setProperty('flex-basis', '10em');
470 expect(style.getPropertyValue('flex-basis')).toEqual('10em');
471 style.setProperty('flex-basis', '30%');
472 expect(style.getPropertyValue('flex-basis')).toEqual('30%');
473 expect(style.cssText).toEqual('flex-basis: 30%;');
474 });
475
476 test('shorthand flex works', () => {
477 var style = new CSSStyleDeclaration();
478 style.setProperty('flex', 'none');
479 expect(style.getPropertyValue('flex-grow')).toEqual('0');
480 expect(style.getPropertyValue('flex-shrink')).toEqual('0');
481 expect(style.getPropertyValue('flex-basis')).toEqual('auto');
482 style.removeProperty('flex');
483 style.removeProperty('flex-basis');
484 style.setProperty('flex', 'auto');
485 expect(style.getPropertyValue('flex-grow')).toEqual('');
486 expect(style.getPropertyValue('flex-shrink')).toEqual('');
487 expect(style.getPropertyValue('flex-basis')).toEqual('auto');
488 style.removeProperty('flex');
489 style.setProperty('flex', '0 1 250px');
490 expect(style.getPropertyValue('flex')).toEqual('0 1 250px');
491 expect(style.getPropertyValue('flex-grow')).toEqual('0');
492 expect(style.getPropertyValue('flex-shrink')).toEqual('1');
493 expect(style.getPropertyValue('flex-basis')).toEqual('250px');
494 style.removeProperty('flex');
495 style.setProperty('flex', '2');
496 expect(style.getPropertyValue('flex-grow')).toEqual('2');
497 expect(style.getPropertyValue('flex-shrink')).toEqual('');
498 expect(style.getPropertyValue('flex-basis')).toEqual('');
499 style.removeProperty('flex');
500 style.setProperty('flex', '20%');
501 expect(style.getPropertyValue('flex-grow')).toEqual('');
502 expect(style.getPropertyValue('flex-shrink')).toEqual('');
503 expect(style.getPropertyValue('flex-basis')).toEqual('20%');
504 style.removeProperty('flex');
505 style.setProperty('flex', '2 2');
506 expect(style.getPropertyValue('flex-grow')).toEqual('2');
507 expect(style.getPropertyValue('flex-shrink')).toEqual('2');
508 expect(style.getPropertyValue('flex-basis')).toEqual('');
509 style.removeProperty('flex');
510 });
511
512 test('font-size get a valid value', () => {
513 var style = new CSSStyleDeclaration();
514 const invalidValue = '1r5px';
515 style.cssText = 'font-size: 15px';
516 expect(1).toEqual(style.length);
517 style.cssText = `font-size: ${invalidValue}`;
518 expect(0).toEqual(style.length);
519 expect(undefined).toEqual(style[0]);
520 });
521
522 test('getPropertyValue for custom properties in cssText', () => {
523 const style = new CSSStyleDeclaration();
524 style.cssText = '--foo: red';
525
526 expect(style.getPropertyValue('--foo')).toEqual('red');
527 });
528
529 test('getPropertyValue for custom properties with setProperty', () => {
530 const style = new CSSStyleDeclaration();
531 style.setProperty('--bar', 'blue');
532
533 expect(style.getPropertyValue('--bar')).toEqual('blue');
534 });
535
536 test('getPropertyValue for custom properties with object setter', () => {
537 const style = new CSSStyleDeclaration();
538 style['--baz'] = 'yellow';
539
540 expect(style.getPropertyValue('--baz')).toEqual('');
541 });
542
543 test('custom properties are case-sensitive', () => {
544 const style = new CSSStyleDeclaration();
545 style.cssText = '--fOo: purple';
546
547 expect(style.getPropertyValue('--foo')).toEqual('');
548 expect(style.getPropertyValue('--fOo')).toEqual('purple');
549 });
550
551 test('supports calc', () => {
552 const style = new CSSStyleDeclaration();
553 style.setProperty('width', 'calc(100% - 100px)');
554 expect(style.getPropertyValue('width')).toEqual('calc(100% - 100px)');
555 });
556});
Note: See TracBrowser for help on using the repository browser.