OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <script src="../../../js/resources/js-test-pre.js"></script> |
| 5 </head> |
| 6 <body> |
| 7 <script> |
| 8 function testElementStyle(propertyJS, propertyCSS, value) |
| 9 { |
| 10 shouldBe("e.style.getPropertyCSSValue('" + propertyCSS + "').css
Text", "'" + value + "'"); |
| 11 } |
| 12 |
| 13 function testComputedStyle(propertyJS, propertyCSS, value) |
| 14 { |
| 15 computedStyle = window.getComputedStyle(e, null); |
| 16 shouldBe("computedStyle.getPropertyCSSValue('" + propertyCSS + "
').cssText", "'" + value + "'"); |
| 17 } |
| 18 |
| 19 function checkComputedStyleValue() { |
| 20 var before = window.getComputedStyle(e, null).getPropertyValue('
text-decoration'); |
| 21 e.style.textDecoration = 'none'; |
| 22 e.style.textDecoration = before; |
| 23 return (window.getComputedStyle(e, null).getPropertyValue('text-
decoration') == before); |
| 24 } |
| 25 |
| 26 description("Test to make sure text-decoration property is backwards
compatible with CSS 2.1 and CSS 3 shorthand.") |
| 27 |
| 28 var testContainer = document.createElement("div"); |
| 29 testContainer.contentEditable = true; |
| 30 document.body.appendChild(testContainer); |
| 31 |
| 32 testContainer.innerHTML = '<div id="test">hello world</div>'; |
| 33 |
| 34 var e = document.getElementById('test'); |
| 35 |
| 36 debug('Initial values:'); |
| 37 shouldBeNull("e.style.getPropertyCSSValue('text-decoration')"); |
| 38 testComputedStyle("textDecoration", "text-decoration", "none solid r
gb(0, 0, 0)"); |
| 39 shouldBe("checkComputedStyleValue()", "true"); |
| 40 debug(''); |
| 41 |
| 42 debug('CSS2.1 backwards compatibility ("text-decoration: underline o
verline line-through blink;"):'); |
| 43 e.style.textDecoration = "underline overline line-through blink"; |
| 44 testElementStyle("textDecorationLine", "text-decoration-line", "unde
rline overline line-through blink"); |
| 45 testComputedStyle("textDecorationLine", "text-decoration-line", "und
erline overline line-through"); |
| 46 testComputedStyle("textDecoration", "text-decoration", "underline ov
erline line-through solid rgb(0, 0, 0)"); |
| 47 shouldBe("checkComputedStyleValue()", "true"); |
| 48 debug(''); |
| 49 |
| 50 debug('CSS3 Shorthand ("text-decoration: underline overline line-thr
ough blink dashed red;"):'); |
| 51 e.style.textDecoration = "underline overline line-through blink dash
ed red"; |
| 52 testComputedStyle("textDecoration", "text-decoration", "underline ov
erline line-through dashed rgb(255, 0, 0)"); |
| 53 testComputedStyle("textDecorationLine", "text-decoration-line", "und
erline overline line-through"); |
| 54 testComputedStyle("textDecorationStyle", "text-decoration-style", "d
ashed"); |
| 55 testComputedStyle("textDecorationColor", "text-decoration-color", "r
gb(255, 0, 0)"); |
| 56 shouldBe("checkComputedStyleValue()", "true"); |
| 57 debug(''); |
| 58 |
| 59 debug('Omitting text decoration line resets to its initial value "no
ne" ("text-decoration: navy dotted;"):'); |
| 60 e.style.textDecoration = "navy dotted"; |
| 61 testComputedStyle("textDecoration", "text-decoration", "none dotted
rgb(0, 0, 128)"); |
| 62 testComputedStyle("textDecorationLine", "text-decoration-line", "non
e"); |
| 63 testComputedStyle("textDecorationStyle", "text-decoration-style", "d
otted"); |
| 64 testComputedStyle("textDecorationColor", "text-decoration-color", "r
gb(0, 0, 128)"); |
| 65 shouldBe("checkComputedStyleValue()", "true"); |
| 66 debug(''); |
| 67 |
| 68 document.body.removeChild(testContainer); |
| 69 </script> |
| 70 <script src="../../../js/resources/js-test-post.js"></script> |
| 71 </body> |
| 72 </html> |
OLD | NEW |