Index: LayoutTests/fast/css3-text/css3-text-decoration/getComputedStyle/getComputedStyle-text-decoration-shorthand.html |
diff --git a/LayoutTests/fast/css3-text/css3-text-decoration/getComputedStyle/getComputedStyle-text-decoration-shorthand.html b/LayoutTests/fast/css3-text/css3-text-decoration/getComputedStyle/getComputedStyle-text-decoration-shorthand.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..c4608098e2c7180c239ae2fdcc94410e99e7eecd |
--- /dev/null |
+++ b/LayoutTests/fast/css3-text/css3-text-decoration/getComputedStyle/getComputedStyle-text-decoration-shorthand.html |
@@ -0,0 +1,72 @@ |
+<!DOCTYPE html> |
+<html> |
+ <head> |
+ <script src="../../../js/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('text-decoration'); |
+ e.style.textDecoration = 'none'; |
+ e.style.textDecoration = before; |
+ return (window.getComputedStyle(e, null).getPropertyValue('text-decoration') == before); |
+ } |
+ |
+ description("Test to make sure 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('text-decoration')"); |
+ testComputedStyle("textDecoration", "text-decoration", "none solid rgb(0, 0, 0)"); |
+ shouldBe("checkComputedStyleValue()", "true"); |
+ debug(''); |
+ |
+ debug('CSS2.1 backwards compatibility ("text-decoration: underline overline line-through blink;"):'); |
+ e.style.textDecoration = "underline overline line-through blink"; |
+ testElementStyle("textDecorationLine", "text-decoration-line", "underline overline line-through blink"); |
+ testComputedStyle("textDecorationLine", "text-decoration-line", "underline overline line-through"); |
+ testComputedStyle("textDecoration", "text-decoration", "underline overline line-through solid rgb(0, 0, 0)"); |
+ shouldBe("checkComputedStyleValue()", "true"); |
+ debug(''); |
+ |
+ debug('CSS3 Shorthand ("text-decoration: underline overline line-through blink dashed red;"):'); |
+ e.style.textDecoration = "underline overline line-through blink dashed red"; |
+ testComputedStyle("textDecoration", "text-decoration", "underline overline line-through dashed rgb(255, 0, 0)"); |
+ testComputedStyle("textDecorationLine", "text-decoration-line", "underline overline line-through"); |
+ testComputedStyle("textDecorationStyle", "text-decoration-style", "dashed"); |
+ testComputedStyle("textDecorationColor", "text-decoration-color", "rgb(255, 0, 0)"); |
+ shouldBe("checkComputedStyleValue()", "true"); |
+ debug(''); |
+ |
+ debug('Omitting text decoration line resets to its initial value "none" ("text-decoration: navy dotted;"):'); |
+ e.style.textDecoration = "navy dotted"; |
+ testComputedStyle("textDecoration", "text-decoration", "none dotted rgb(0, 0, 128)"); |
+ testComputedStyle("textDecorationLine", "text-decoration-line", "none"); |
+ testComputedStyle("textDecorationStyle", "text-decoration-style", "dotted"); |
+ testComputedStyle("textDecorationColor", "text-decoration-color", "rgb(0, 0, 128)"); |
+ shouldBe("checkComputedStyleValue()", "true"); |
+ debug(''); |
+ |
+ document.body.removeChild(testContainer); |
+ </script> |
+ <script src="../../../js/resources/js-test-post.js"></script> |
+ </body> |
+</html> |