| 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 |