OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <style> | |
5 #test { | |
6 font-family: arial; | |
7 } | |
8 #test > div > span, #test > header > span { | |
9 display: inline-block; | |
10 width: 20ex; | |
11 } | |
12 #test > header { | |
13 font-weight: bold; | |
14 border-bottom: 1px solid black; | |
15 } | |
16 </style> | |
17 </head> | |
18 <body> | |
19 <section id="test"> | |
20 <header><span>Assigned</span><span>Computed</span><span>Result</span
></header> | |
21 </section> | |
22 <section> | |
23 <p> | |
24 Tests that all supported <code>font-stretch</code> values | |
25 are correctly parsed, recognized and returned from | |
26 <code>getComputedStyle</code>. | |
27 </p> | |
28 <p> | |
29 Also tests that a few invalid <code>font-stretch</code> | |
30 values are ignored as expected. | |
31 </p> | |
32 </section> | |
33 <script> | |
34 if (self.testRunner) | |
35 testRunner.dumpAsText(); | |
36 | |
37 function createElement(tagName, opt_style, opt_textContent) | |
38 { | |
39 var element = document.createElement(tagName); | |
40 element.style.cssText = opt_style || ''; | |
41 if (opt_textContent) | |
42 element.appendChild(document.createTextNode(opt_textContent)
); | |
43 return element; | |
44 } | |
45 function testValues(containerElement, values, isValid) | |
46 { | |
47 | |
48 for (var value, i = 0; value = values[i]; i++) { | |
49 var testElement = createElement('div'); | |
50 var style = 'font-stretch: ' + value + '; font-weight: bold;
'; | |
51 testElement.appendChild(createElement('span', style, value))
; | |
52 containerElement.appendChild(testElement); | |
53 var style = window.getComputedStyle(testElement.firstChild); | |
54 testElement.appendChild(createElement('span', undefined, sty
le.fontStretch)); | |
55 var result; | |
56 if (style.fontStretch == value && isValid) | |
57 result = 'PASS'; | |
58 else if (style.fontStretch == 'normal' && !isValid) | |
59 result = 'PASS'; | |
60 else | |
61 result = 'FAIL'; | |
62 testElement.appendChild(createElement('span', undefined, res
ult)); | |
63 } | |
64 } | |
65 var stretchValues = [ | |
66 'normal', 'ultra-condensed', 'extra-condensed', | |
67 'condensed', 'semi-condensed', 'semi-expanded', | |
68 'expanded', 'extra-expanded', 'ultra-expanded' | |
69 ]; | |
70 var invalidValues = [ | |
71 'bold', 'semi-normal', 'very-condensed', | |
72 'compact', 'foobar', '900' | |
73 ]; | |
74 var containerElement = document.getElementById('test'); | |
75 testValues(containerElement, stretchValues, true); | |
76 containerElement.appendChild(createElement('div', 'border-bottom: 1p
x solid black')); | |
77 testValues(containerElement, invalidValues, false); | |
78 </script> | |
79 </body> | |
80 </html> | |
OLD | NEW |