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