| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../../../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <script> |
| function testElementStyle(propertyJS, propertyCSS, value) |
| { |
| shouldBe("e.style.getPropertyCSSValue('" + propertyCSS + "').cssText", "'" + value + "'"); |
| } |
| |
| function testComputedStyle(propertyJS, propertyCSS, value) |
| { |
| computedStyle = window.getComputedStyle(e, null); |
| shouldBe("computedStyle.getPropertyCSSValue('" + propertyCSS + "').cssText", "'" + value + "'"); |
| } |
| |
| function checkComputedStyleValue() { |
| var before = window.getComputedStyle(e, null).getPropertyValue('-webkit-text-decoration'); |
| e.style.webkitTextDecoration = 'none'; |
| e.style.webkitTextDecoration = before; |
| return (window.getComputedStyle(e, null).getPropertyValue('-webkit-text-decoration') == before); |
| } |
| |
| description("Test to make sure -webkit-text-decoration property is backwards compatible with CSS 2.1 and CSS 3 shorthand.") |
| |
| var testContainer = document.createElement("div"); |
| testContainer.contentEditable = true; |
| document.body.appendChild(testContainer); |
| |
| testContainer.innerHTML = '<div id="test">hello world</div>'; |
| |
| var e = document.getElementById('test'); |
| |
| debug('Initial values:'); |
| shouldBeNull("e.style.getPropertyCSSValue('-webkit-text-decoration')"); |
| testComputedStyle("webkitTextDecoration", "-webkit-text-decoration", "none solid rgb(0, 0, 0)"); |
| shouldBe("checkComputedStyleValue()", "true"); |
| debug(''); |
| |
| debug('CSS2.1 backwards compatibility ("-webkit-text-decoration: underline overline line-through blink;"):'); |
| e.style.webkitTextDecoration = "underline overline line-through blink"; |
| testElementStyle("webkitTextDecorationLine", "-webkit-text-decoration-line", "underline overline line-through blink"); |
| testComputedStyle("webkitTextDecorationLine", "-webkit-text-decoration-line", "underline overline line-through"); |
| testComputedStyle("webkitTextDecoration", "-webkit-text-decoration", "underline overline line-through solid rgb(0, 0, 0)"); |
| shouldBe("checkComputedStyleValue()", "true"); |
| debug(''); |
| |
| debug('CSS3 Shorthand ("-webkit-text-decoration: underline overline line-through blink dashed red;"):'); |
| e.style.webkitTextDecoration = "underline overline line-through blink dashed red"; |
| testComputedStyle("webkitTextDecoration", "-webkit-text-decoration", "underline overline line-through dashed rgb(255, 0, 0)"); |
| testComputedStyle("webkitTextDecorationLine", "-webkit-text-decoration-line", "underline overline line-through"); |
| testComputedStyle("webkitTextDecorationStyle", "-webkit-text-decoration-style", "dashed"); |
| testComputedStyle("webkitTextDecorationColor", "-webkit-text-decoration-color", "rgb(255, 0, 0)"); |
| shouldBe("checkComputedStyleValue()", "true"); |
| debug(''); |
| |
| debug('Omitting text decoration line resets to its initial value "none" ("-webkit-text-decoration: navy dotted;"):'); |
| e.style.webkitTextDecoration = "navy dotted"; |
| testComputedStyle("webkitTextDecoration", "-webkit-text-decoration", "none dotted rgb(0, 0, 128)"); |
| testComputedStyle("webkitTextDecorationLine", "-webkit-text-decoration-line", "none"); |
| testComputedStyle("webkitTextDecorationStyle", "-webkit-text-decoration-style", "dotted"); |
| testComputedStyle("webkitTextDecorationColor", "-webkit-text-decoration-color", "rgb(0, 0, 128)"); |
| shouldBe("checkComputedStyleValue()", "true"); |
| debug(''); |
| |
| document.body.removeChild(testContainer); |
| </script> |
| <script src="../../../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
