Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(276)

Unified Diff: LayoutTests/fast/css3-text/css3-text-decoration/getComputedStyle/getComputedStyle-text-decoration-shorthand.html

Issue 23111004: Re-land "[css3-text] Implement text-decoration property shorthand" (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Rebased after Alexis' function name changes in CSSComputedStyleDeclaration.cpp Created 7 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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>

Powered by Google App Engine
This is Rietveld 408576698