OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
tkent
2016/11/03 13:40:51
cssom/ is a new directory. We should skip.
| |
2 <meta charset="utf-8"> | |
3 <title>CSSOM serialize values</title> | |
4 <meta name="author" title="Josh Matthews" href="mailto:josh@joshmatthews.net"> | |
5 <script src="/resources/testharness.js"></script> | |
6 <script src="/resources/testharnessreport.js"></script> | |
7 <body> | |
8 <div id="log"></div> | |
9 <div id="parent"></div> | |
10 <script> | |
11 function iterable(values) { | |
12 var i = 0; | |
13 return function() { | |
14 if (i < values.length) { | |
15 return values[i++]; | |
16 } | |
17 return null; | |
18 } | |
19 } | |
20 | |
21 function color() { | |
22 var colors = ['black', 'red', 'rgb(50, 75, 100)', 'rgba(5, 7, 10, 0.5)']; | |
23 return iterable(colors); | |
24 } | |
25 | |
26 function percentage() { | |
27 var values = ["5%", {actual: ".5%", serialized: "0.5%"}]; | |
28 return iterable(values); | |
29 } | |
30 | |
31 function negative_percentage() { | |
32 var values = ["-5%", {actual: "-.5%", serialized: "-0.5%"}]; | |
33 return iterable(values); | |
34 } | |
35 | |
36 function length() { | |
37 var values = ["0px", "1px", {actual: ".1em", serialized: "0.1em"}]; | |
38 return iterable(values); | |
39 } | |
40 | |
41 function negative_length() { | |
42 var values = [{actual: "-0px", serialized: "0px"}, | |
43 "-1px", {actual: "-.1em", serialized: "-0.1em"}]; | |
44 return iterable(values); | |
45 } | |
46 | |
47 function degree() { | |
48 var values = ["87deg"]; | |
49 return iterable(values); | |
50 } | |
51 | |
52 function uri() { | |
53 var values = ["url(\"http://localhost/\")", | |
54 {actual: "url(http://localhost/)", | |
55 serialized: "url(\"http://localhost/\")"}]; | |
56 return iterable(values); | |
57 } | |
58 | |
59 function border_style() { | |
60 var values = ['none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'gr oove', 'ridge', | |
61 'inset', 'outset']; | |
62 return iterable(values); | |
63 } | |
64 | |
65 function border_style_without_hidden() { | |
66 var values = ['none', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ri dge', | |
67 'inset', 'outset']; | |
68 return iterable(values); | |
69 } | |
70 | |
71 function integer() { | |
72 var values = ['0', '101', '-51']; | |
73 return iterable(values); | |
74 } | |
75 | |
76 function nonzero_positive_integer() { | |
77 var values = ['101']; | |
78 return iterable(values); | |
79 } | |
80 | |
81 function shape() { | |
82 var values = ['rect(1em, auto, 0.5px, 2000em)']; | |
83 return iterable(values); | |
84 } | |
85 | |
86 function string() { | |
87 var values = ['"string"', {actual: "'string'", serialized: '"string"'}]; | |
88 return iterable(values); | |
89 } | |
90 | |
91 function counter() { | |
92 var values = [{actual: 'counter(par-num)', | |
93 serialized: 'counter(par-num, decimal)'}, | |
94 'counter(par-num, upper-roman)']; | |
95 return iterable(values); | |
96 } | |
97 | |
98 function attr() { | |
99 var values = ['attr(foo-bar)', 'attr(foo_bar)']; | |
100 return iterable(values); | |
101 } | |
102 | |
103 function family_name() { | |
104 var values = ['Arial', {actual: "'Lucida Grande'", serialized: '"Lucida Gr ande"'}]; | |
105 return iterable(values); | |
106 } | |
107 | |
108 function generic_family() { | |
109 var values = ['serif', 'sans-serif']; | |
110 return iterable(values); | |
111 } | |
112 | |
113 function absolute_size() { | |
114 var values = ['xx-small', 'x-small', 'small', 'medium', 'large', 'x-large' , 'xx-large']; | |
115 return iterable(values); | |
116 } | |
117 | |
118 function relative_size() { | |
119 var values = ['larger', 'smaller']; | |
120 return iterable(values); | |
121 } | |
122 | |
123 function number() { | |
124 var values = ['0', {'actual': '-0', serialized: '0'}, '1000', '-5123', '0. 9', '-0.09']; | |
125 return iterable(values); | |
126 } | |
127 | |
128 function positive_number() { | |
129 var values = ['0', {'actual': '-0', serialized: '0'}, '1000', '0.9']; | |
130 return iterable(values); | |
131 } | |
132 | |
133 function generate_inline_style(name, value) { | |
134 if (value) { | |
135 return {'declaration': name + ": " + value.actual, | |
136 'value': value.actual, | |
137 'result': value.expected}; | |
138 } | |
139 return null; | |
140 } | |
141 | |
142 function create_result(actual, expected) { | |
143 return {actual: actual, expected: expected} | |
144 } | |
145 | |
146 function all_values(values) { | |
147 var results = []; | |
148 for (var i = 0; i < values.length; i++) { | |
149 var value = values[i]; | |
150 if (typeof value == "function") { | |
151 var f = value(); | |
152 var result; | |
153 while ((result = f()) != null) { | |
154 if (typeof result == "object" && 'serialized' in result) { | |
155 results.push(create_result(result.actual, result.serialized)); | |
156 } else { | |
157 results.push(create_result(result, result)); | |
158 } | |
159 } | |
160 } else if (typeof value == "string") { | |
161 results.push(create_result(value, value)); | |
162 } else if (value instanceof Array) { | |
163 var subresults = []; | |
164 for (var j = 0; j < value.length; j++) { | |
165 var subresult = all_values(value[j], true); | |
166 if (!(subresult instanceof Array)) { | |
167 subresult = [subresult]; | |
168 } | |
169 subresults.push(subresult); | |
170 } | |
171 if (subresults.length > 1) { | |
172 function choose_slices(vecs) { | |
173 if (vecs.length == 1) { | |
174 return vecs[0].map(function(v) { return [v]; }); | |
175 } | |
176 var slice_results = []; | |
177 var rest = choose_slices(vecs.slice(1, vecs.length)); | |
178 for (var a = 0; a < vecs[0].length; a++) { | |
179 for (var b = 0; b < rest.length; b++) { | |
180 var result = vecs[0][a]; | |
181 slice_results.push([result].concat(rest[b])); | |
182 } | |
183 } | |
184 return slice_results; | |
185 } | |
186 | |
187 subresults = choose_slices(subresults).map(function (a) { | |
188 var actual = a.map(function(a) { return a.actual }); | |
189 var expected = a.map(function(a) { return a.expected }); | |
190 return create_result(actual.join(' '), expected.join(' ')) | |
191 }); | |
192 } | |
193 for (var j = 0; j < subresults.length; j++) { | |
194 results = results.concat(subresults[j]); | |
195 } | |
196 } else if (value instanceof Object && 'serialized' in value) { | |
197 results.push(create_result(value.actual, value.serialized)); | |
198 } else if (typeof value == "number") { | |
199 results.push(create_result(value.toString(), value.toString())); | |
200 } else { | |
201 throw "unexpected value type: " + typeof(value); | |
202 } | |
203 } | |
204 return results; | |
205 } | |
206 | |
207 function create_value_generator(property) { | |
208 var results = all_values(property.values); | |
209 return iterable(results); | |
210 } | |
211 | |
212 function to_idl(property) { | |
213 return property.replace(/-\w/g, function(x){return x[1].toUpperCase()}); | |
214 } | |
215 | |
216 function run_individual_test(property, generator, initial) { | |
217 var elem = document.createElement('div'); | |
218 document.getElementById('parent').appendChild(elem); | |
219 var test_data = generator(); | |
220 var style = generate_inline_style(property, test_data); | |
221 if (!style) { | |
222 return false; | |
223 } | |
224 var t = async_test(style.declaration); | |
225 | |
226 t.add_cleanup(function() { | |
227 document.getElementById('parent').removeChild(elem); | |
228 }); | |
229 | |
230 t.step(function() { | |
231 elem.setAttribute('style', style.declaration); | |
232 var expected = style.result; | |
233 var serialized = elem.style[to_idl(property)]; | |
234 assert_equals(serialized, expected, property + ' raw inline style declar ation'); | |
235 elem.setAttribute('style', ''); | |
236 elem.style[to_idl(property)] = style.value; | |
237 assert_equals(elem.style[to_idl(property)], expected, property + ' style property'); | |
238 }); | |
239 t.done(); | |
240 return true; | |
241 } | |
242 | |
243 function test_property(property) { | |
244 var generator = create_value_generator(property[1]); | |
245 while (run_individual_test(property[0], generator, property[1].initial)) { | |
246 } | |
247 } | |
248 | |
249 var properties = [ | |
250 ['background-attachment', { | |
251 'values': ['scroll', 'fixed', 'inherit'], | |
252 'initial': 'scroll', | |
253 }], | |
254 ['background-color', { | |
255 'values': [color, 'transparent', 'inherit'], | |
256 'initial': 'transparent', | |
257 }], | |
258 ['background-image', { | |
259 'values': [uri, 'none', 'inherit'], | |
260 'initial': 'none', | |
261 }], | |
262 ['background-position', { | |
263 'values': [[[percentage, negative_percentage, length, negative_length, | |
264 'left', 'center', 'right'], | |
265 [percentage, negative_percentage, length, negative_length, | |
266 'top', 'center', 'bottom']], | |
267 'inherit'], | |
268 'initial': '0% 0%', | |
269 }], | |
270 ['background-repeat', { | |
271 'values': ['repeat', 'repeat-x', 'repeat-y', 'no-repeat', 'inherit'], | |
272 'initial': 'repeat', | |
273 }], | |
274 //background | |
275 ['border-collapse', { | |
276 'values': ['collapse', 'separate', 'inherit'], | |
277 'initial': 'separate', | |
278 }], | |
279 //border-color | |
280 ['border-spacing', { | |
281 'values': [length, 'inherit'], | |
282 'initial': '0', | |
283 }], | |
284 //border-style | |
285 //border-top, border-right, border-bottom, border-left | |
286 ['border-top-color', { | |
287 'values': [color, 'transparent', 'inherit'], | |
288 'initial': 'black', //FIXME | |
289 }], | |
290 ['border-right-color', { | |
291 'values': [color, 'transparent', 'inherit'], | |
292 'initial': 'black', //FIXME | |
293 }], | |
294 ['border-bottom-color', { | |
295 'values': [color, 'transparent', 'inherit'], | |
296 'initial': 'black', //FIXME | |
297 }], | |
298 ['border-left-color', { | |
299 'values': [color, 'transparent', 'inherit'], | |
300 'initial': 'black', //FIXME | |
301 }], | |
302 ['border-top-style', { | |
303 'values': [border_style, 'inherit'], | |
304 'initial': null, | |
305 }], | |
306 ['border-right-style', { | |
307 'values': [border_style, 'inherit'], | |
308 'initial': null, | |
309 }], | |
310 ['border-bottom-style', { | |
311 'values': [border_style, 'inherit'], | |
312 'initial': null, | |
313 }], | |
314 ['border-left-style', { | |
315 'values': [border_style, 'inherit'], | |
316 'initial': null, | |
317 }], | |
318 ['border-top-width', { | |
319 'values': ['thin', 'medium', 'thick', length, 'inherit'], | |
320 'initial': 'medium', | |
321 }], | |
322 ['border-right-width', { | |
323 'values': ['thin', 'medium', 'thick', length, 'inherit'], | |
324 'initial': 'medium', | |
325 }], | |
326 ['border-bottom-width', { | |
327 'values': ['thin', 'medium', 'thick', length, 'inherit'], | |
328 'initial': 'medium', | |
329 }], | |
330 ['border-left-width', { | |
331 'values': ['thin', 'medium', 'thick', length, 'inherit'], | |
332 'initial': 'medium', | |
333 }], | |
334 //border-width | |
335 //border | |
336 ['bottom', { | |
337 'values': [length, percentage, 'auto', 'inherit'], | |
338 'initial': 'auto', | |
339 }], | |
340 ['caption-side', { | |
341 'values': ['top', 'bottom', 'inherit'], | |
342 'initial': 'top', | |
343 }], | |
344 ['clear', { | |
345 'values': ['none', 'left', 'right', 'both', 'inherit'], | |
346 'initial': 'none', | |
347 }], | |
348 ['clip', { | |
349 'values': [shape, 'auto', 'inherit'], | |
350 'initial': 'auto', | |
351 }], | |
352 ['color', { | |
353 'values': [color, 'inherit'], | |
354 'initial': 'black', //FIXME depends on user agent | |
355 }], | |
356 ['content', { | |
357 'values': ['normal', 'none', string, uri, counter, attr, 'inherit'], //F IXME | |
358 'initial': 'normal', | |
359 }], | |
360 //counter-increment | |
361 //counter-reset | |
362 ['cursor', { | |
363 'values': [ 'auto', 'crosshair', 'default', 'pointer', 'move', 'e-resize ', 'ne-resize', | |
364 'nw-resize', 'n-resize', 'se-resize', 'sw-resize', 's-resize ', 'w-resize', | |
365 'text', 'wait', 'help', 'progress', 'inherit'], | |
366 'initial': 'auto', | |
367 }], | |
368 ['direction', { | |
369 'values': ['ltr', 'rtl', 'inherit'], | |
370 'initial': 'ltr', | |
371 }], | |
372 ['display', { | |
373 'values': ['inline', 'block', 'list-item', 'inline-block', 'table', 'inl ine-table', | |
374 'table-row-group', 'table-header-group', 'table-footer-group' , 'table-row', | |
375 'table-column-group', 'table-column', 'table-cell', 'table-ca ption', 'none', | |
376 'inherit'], | |
377 'initial': 'inline', | |
378 }], | |
379 ['empty-cells', { | |
380 'values': ['show', 'hide', 'inherit'], | |
381 'initial': 'show', | |
382 }], | |
383 ['float', { | |
384 'values': ['left', 'right', 'none', 'inherit'], | |
385 'initial': 'none', | |
386 'property': 'cssFloat', | |
387 }], | |
388 ['font-family', { | |
389 'values': [family_name, generic_family, 'inherit'], | |
390 'initial': 'sans-serif', //FIXME depends on user agent | |
391 }], | |
392 ['font-size', { | |
393 'values': [absolute_size, relative_size, length, percentage, 'inherit'], | |
394 'initial': 'medium', | |
395 }], | |
396 ['font-style', { | |
397 'values': ['normal', 'italic', 'oblique', 'inherit'], | |
398 'initial': 'normal', | |
399 }], | |
400 ['font-variant', { | |
401 'values': ['normal', 'small-caps', 'inherit'], | |
402 'initial': 'normal', | |
403 }], | |
404 ['font-weight', { | |
405 'values': ['normal', 'bold', 'bolder', 'lighter', 100, 200, 300, 400, 50 0, 600, | |
406 700, 800, 900, 'inherit'], | |
407 'initial': 'normal', | |
408 }], | |
409 //font | |
410 ['height', { | |
411 'values': [length, percentage, 'auto', 'inherit'], | |
412 'initial': 'auto', | |
413 }], | |
414 ['left', { | |
415 'values': [length, percentage, 'auto', 'inherit'], | |
416 'initial': 'auto', | |
417 }], | |
418 ['letter-spacing', { | |
419 'values': ['normal', length, 'inherit'], | |
420 'initial': 'normal', | |
421 }], | |
422 ['line-height', { | |
423 'values': ['normal', positive_number, length, percentage, 'inherit'], | |
424 'initial': 'normal', | |
425 }], | |
426 ['list-style-image', { | |
427 'values': [uri, 'none', 'inherit'], | |
428 'initial': 'none', | |
429 }], | |
430 ['list-style-position', { | |
431 'values': ['inside', 'outside', 'inherit'], | |
432 'initial': 'outside', | |
433 }], | |
434 ['list-style-type', { | |
435 'values': ['disc', 'circle', 'square', 'decimal', 'decimal-leading-zero' , 'lower-roman', | |
436 'upper-roman', 'lower-greek', 'lower-latin', 'upper-latin', ' armenian', 'georgian', | |
437 'lower-alpha', 'upper-alpha', 'none', 'inherit'], | |
438 'initial': 'disc', | |
439 }], | |
440 //list-style | |
441 ['margin-right', { | |
442 'values': [length, percentage, 'auto', 'inherit'], | |
443 'initial': 0, | |
444 }], | |
445 ['margin-left', { | |
446 'values': [length, percentage, 'auto', 'inherit'], | |
447 'initial': 0, | |
448 }], | |
449 ['margin-top', { | |
450 'values': [length, percentage, 'auto', 'inherit'], | |
451 'initial': 0, | |
452 }], | |
453 ['margin-bottom', { | |
454 'values': [length, percentage, 'auto', 'inherit'], | |
455 'initial': 0, | |
456 }], | |
457 //margin | |
458 ['max-height', { | |
459 'values': [length, percentage, 'none', 'inherit'], | |
460 'initial': 'none', | |
461 }], | |
462 ['max-width', { | |
463 'values': [length, percentage, 'none', 'inherit'], | |
464 'initial': 'none', | |
465 }], | |
466 ['min-height', { | |
467 'values': [length, percentage, 'inherit'], | |
468 'initial': 0, | |
469 }], | |
470 ['min-width', { | |
471 'values': [length, percentage, 'inherit'], | |
472 'initial': 0, | |
473 }], | |
474 ['orphans', { | |
475 'values': [nonzero_positive_integer, 'inherit'], | |
476 'initial': 2, | |
477 }], | |
478 ['outline-color', { | |
479 'values': [color, 'invert', 'inherit'], | |
480 'initial': 'invert', | |
481 }], | |
482 ['outline-style', { | |
483 'values': [border_style_without_hidden, 'inherit'], | |
484 'initial': 'none', | |
485 }], | |
486 ['outline-width', { | |
487 'values': ['thin', 'medium', 'thick', length, 'inherit'], | |
488 'initial': 'medium', | |
489 }], | |
490 //outline | |
491 ['overflow', { | |
492 'values': ['visible', 'hidden', 'scroll', 'auto', 'inherit'], | |
493 'initial': 'visible', | |
494 }], | |
495 ['padding-top', { | |
496 'values': [length, percentage, 'inherit'], | |
497 'initial': 0, | |
498 }], | |
499 ['padding-right', { | |
500 'values': [length, percentage, 'inherit'], | |
501 'initial': 0, | |
502 }], | |
503 ['padding-bottom', { | |
504 'values': [length, percentage, 'inherit'], | |
505 'initial': 0, | |
506 }], | |
507 ['padding-left', { | |
508 'values': [length, percentage, 'inherit'], | |
509 'initial': 0, | |
510 }], | |
511 //padding | |
512 ['page-break-after', { | |
513 'values': ['auto', 'always', 'avoid', 'left', 'right', 'inherit'], | |
514 'initial': 'auto', | |
515 }], | |
516 ['page-break-before', { | |
517 'values': ['auto', 'always', 'avoid', 'left', 'right', 'inherit'], | |
518 'initial': 'auto', | |
519 }], | |
520 ['page-break-inside', { | |
521 'values': ['avoid', 'auto', 'inherit'], | |
522 'initial': 'auto', | |
523 }], | |
524 ['position', { | |
525 'values': ['static', 'relative', 'absolute', 'fixed', 'inherit'], | |
526 'initial': 'static', | |
527 }], | |
528 //FIXME quotes | |
529 ['right', { | |
530 'values': [length, percentage, 'auto', 'inherit'], | |
531 'initial': 'auto', | |
532 }], | |
533 ['table-layout', { | |
534 'values': ['auto', 'fixed', 'inherit'], | |
535 'initial': 'auto', | |
536 }], | |
537 ['text-align', { | |
538 'values': ['left', 'right', 'center', 'justify', 'inherit'], | |
539 'initial': null, | |
540 }], | |
541 ['text-decoration', { | |
542 'values': ['none', 'underline', 'overline', 'line-through', 'blink', 'in herit'], | |
543 'initial': 'none', | |
544 }], | |
545 ['text-indent', { | |
546 'values': [length, percentage, 'inherit'], | |
547 'initial': 0, | |
548 }], | |
549 ['text-transform', { | |
550 'values': ['capitalize', 'uppercase', 'lowercase', 'none', 'inherit'], | |
551 'initial': 'none', | |
552 }], | |
553 ['top', { | |
554 'values': [length, percentage, 'auto', 'inherit'], | |
555 'initial': 'auto', | |
556 }], | |
557 ['unicode-bidi', { | |
558 'values': ['normal', 'embed', 'bidi-override', 'inherit'], | |
559 'initial': 'normal', | |
560 }], | |
561 ['vertical-align', { | |
562 'values': ['baseline', 'sub', 'super', 'top', 'text-top', 'middle', 'bot tom', 'text-bottom', | |
563 percentage, length, 'inherit'], | |
564 'initial': 'baseline', | |
565 }], | |
566 ['visibility', { | |
567 'values': ['visible', 'hidden', 'collapse', 'inherit'], | |
568 'initial': 'visible', | |
569 }], | |
570 ['white-space', { | |
571 'values': ['normal', 'pre', 'nowrap', 'pre-wrap', 'pre-line', 'inherit'] , | |
572 'initial': 'normal', | |
573 }], | |
574 ['widows', { | |
575 'values': [nonzero_positive_integer, 'inherit'], | |
576 'initial': 2, | |
577 }], | |
578 ['width', { | |
579 'values': [length, percentage, 'auto', 'inherit'], | |
580 'initial': 'auto', | |
581 }], | |
582 ['word-spacing', { | |
583 'values': ['normal', length, 'inherit'], | |
584 'initial': 'normal', | |
585 }], | |
586 ['z-index', { | |
587 'values': ['auto', integer, 'inherit'], | |
588 'initial': 'auto', | |
589 }], | |
590 ] | |
591 | |
592 for (var index = 0; index < properties.length; index++) { | |
593 test_property(properties[index]); | |
594 } | |
595 </script> | |
596 </body> | |
OLD | NEW |