Chromium Code Reviews Chromium Code Reviews
Issue 20262002:
[css3-text] Implement text-decoration property shorthand (Closed)
Base URL: svn://svn.chromium.org/blink/trunk| 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"); |
|
Julien - ping for review
2013/08/07 17:10:00
The specification allows any order for <text-decor
abinader
2013/08/07 17:24:04
Sure we can :-) Shall we append it to this patch o
Julien - ping for review
2013/08/07 18:14:54
This patch please, it's bad form to land a change
|
| + debug(''); |
| + |
| + document.body.removeChild(testContainer); |
| + </script> |
| + <script src="../../../js/resources/js-test-post.js"></script> |
| + </body> |
| +</html> |
