[css3-text] Implement text-decoration property shorthand

LayoutTests/fast/css3-text/css3-text-decoration/getComputedStyle/script-tests/getComputedStyle-text-decoration-shorthand.js

Index: LayoutTests/fast/css3-text/css3-text-decoration/getComputedStyle/script-tests/getComputedStyle-text-decoration-shorthand.js
diff --git a/LayoutTests/fast/css3-text/css3-text-decoration/getComputedStyle/script-tests/getComputedStyle-text-decoration-shorthand.js b/LayoutTests/fast/css3-text/css3-text-decoration/getComputedStyle/script-tests/getComputedStyle-text-decoration-shorthand.js
new file mode 100644
index 0000000000000000000000000000000000000000..b07d44b89ecfb0138320ed0068d103e699545b8c
--- /dev/null
+++ b/LayoutTests/fast/css3-text/css3-text-decoration/getComputedStyle/script-tests/getComputedStyle-text-decoration-shorthand.js
@@ -0,0 +1,80 @@
+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</div>';
+
+debug('Initial values:');
+var e = document.getElementById('test');
+shouldBeNull("e.style.getPropertyCSSValue('text-decoration')");
+
+var computedStyle = window.getComputedStyle(e, null);
+shouldBe("computedStyle.getPropertyCSSValue('text-decoration').toString()", "'[object CSSValueList]'");
+shouldBe("computedStyle.getPropertyCSSValue('text-decoration').cssText", "'none solid rgb(0, 0, 0)'");
+
+debug('');
+
+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);
+}
+
+debug('CSS2.1 backwards compatibility ("text-decoration: underline overline line-through blink;"):');
+e.style.textDecoration = "underline overline line-through blink";
+shouldBe("e.style.getPropertyCSSValue('text-decoration-line').toString()", "'[object CSSValueList]'");
+shouldBe("e.style.getPropertyCSSValue('text-decoration-line').cssText", "'underline overline line-through blink'");
+shouldBe("e.style.getPropertyCSSValue('text-decoration-style').toString()", "'[object CSSValue]'");
+shouldBe("e.style.getPropertyCSSValue('text-decoration-style').cssText", "'initial'");
+shouldBe("e.style.getPropertyCSSValue('text-decoration-color').toString()", "'[object CSSValue]'");
+shouldBe("e.style.getPropertyCSSValue('text-decoration-color').cssText", "'initial'");
+
+computedStyle = window.getComputedStyle(e, null);
+shouldBe("computedStyle.getPropertyCSSValue('text-decoration').toString()", "'[object CSSValueList]'");
+shouldBe("computedStyle.getPropertyCSSValue('text-decoration').cssText", "'underline overline line-through solid rgb(0, 0, 0)'");
+shouldBe("computedStyle.getPropertyCSSValue('text-decoration-line').toString()", "'[object CSSValueList]'");
+shouldBe("computedStyle.getPropertyCSSValue('text-decoration-line').cssText", "'underline overline line-through'");
+shouldBe("computedStyle.getPropertyCSSValue('text-decoration-style').toString()", "'[object CSSPrimitiveValue]'");
+shouldBe("computedStyle.getPropertyCSSValue('text-decoration-style').cssText", "'solid'");
+shouldBe("computedStyle.getPropertyCSSValue('text-decoration-color').toString()", "'[object CSSPrimitiveValue]'");
+shouldBe("computedStyle.getPropertyCSSValue('text-decoration-color').cssText", "'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";
+shouldBeNull("e.style.getPropertyCSSValue('text-decoration')");
+shouldBe("e.style.getPropertyCSSValue('text-decoration-line').cssText", "'underline overline line-through blink'");
+shouldBe("e.style.getPropertyCSSValue('text-decoration-style').cssText", "'dashed'");
+shouldBe("e.style.getPropertyCSSValue('text-decoration-color').cssText", "'red'");
+

[Julien - ping for review, 2013/07/27 01:46:35]

The unconsistencies and copy and pasting in test makes me sad, can't we have a
testing function that takes care of testing all the values all the time?

[abinader, 2013/07/28 04:21:52]

Agreed, I already had implemented such types of testing functions previously and
forgot to use them (like the one from the link below):

https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit...

I'll update the layout test to clean this up.

+computedStyle = window.getComputedStyle(e, null);
+shouldBe("computedStyle.getPropertyCSSValue('text-decoration').toString()", "'[object CSSValueList]'");
+shouldBe("computedStyle.getPropertyCSSValue('text-decoration').cssText", "'underline overline line-through dashed rgb(255, 0, 0)'");
+shouldBe("computedStyle.getPropertyCSSValue('text-decoration-line').toString()", "'[object CSSValueList]'");
+shouldBe("computedStyle.getPropertyCSSValue('text-decoration-line').cssText", "'underline overline line-through'");
+shouldBe("computedStyle.getPropertyCSSValue('text-decoration-style').cssText", "'dashed'");
+shouldBe("computedStyle.getPropertyCSSValue('text-decoration-color').cssText", "'rgb(255, 0, 0)'");
+shouldBe("checkComputedStyleValue()", "true");
+debug('');
+
+debug('Omitting text decoration color and/or style fallbacks to their initial values ("text-decoration: underline;"):');
+e.style.textDecoration = "underline";
+shouldBeNull("e.style.getPropertyCSSValue('text-decoration')");
+shouldBe("e.style.getPropertyCSSValue('text-decoration-line').cssText", "'underline'");
+shouldBe("e.style.getPropertyCSSValue('text-decoration-style').cssText", "'initial'");
+shouldBe("e.style.getPropertyCSSValue('text-decoration-color').cssText", "'initial'");
+
+computedStyle = window.getComputedStyle(e, null);
+shouldBe("computedStyle.getPropertyCSSValue('text-decoration').toString()", "'[object CSSValueList]'");
+shouldBe("computedStyle.getPropertyCSSValue('text-decoration').cssText", "'underline solid rgb(0, 0, 0)'");
+shouldBe("computedStyle.getPropertyCSSValue('text-decoration-line').cssText", "'underline'");
+shouldBe("computedStyle.getPropertyCSSValue('text-decoration-style').cssText", "'solid'");
+shouldBe("computedStyle.getPropertyCSSValue('text-decoration-color').cssText", "'rgb(0, 0, 0)'");
+shouldBe("checkComputedStyleValue()", "true");
+debug('');
+
+document.body.removeChild(testContainer);