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 |