Commit d88be043 authored by bruno.d@partner.samsung.com's avatar bruno.d@partner.samsung.com
Browse files

[css3-text] Implement CSS3 text-decoration shorthand

https://bugs.webkit.org/show_bug.cgi?id=92000

Implements the text-decoration shorthand (with -webkit- prefix), as specified by the CSS3 Text Decoration specification:
http://dev.w3.org/csswg/css-text-decor-3/#text-decoration-property

Backported from Blink:
https://src.chromium.org/viewvc/blink?revision=156266&view=revision

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@154338 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 904726e7
2013-08-20 Bruno de Oliveira Abinader <bruno.d@partner.samsung.com>
[css3-text] Implement CSS3 text-decoration shorthand
https://bugs.webkit.org/show_bug.cgi?id=92000
Reviewed by Darin Adler.
Added computed style tests for text-decoration shorthand.
* fast/css3-text/css3-text-decoration/getComputedStyle/getComputedStyle-text-decoration-shorthand-expected.txt: Added.
* fast/css3-text/css3-text-decoration/getComputedStyle/getComputedStyle-text-decoration-shorthand-ordering-expected.txt: Added.
* fast/css3-text/css3-text-decoration/getComputedStyle/getComputedStyle-text-decoration-shorthand-ordering.html: Added.
* fast/css3-text/css3-text-decoration/getComputedStyle/getComputedStyle-text-decoration-shorthand.html: Added.
2013-08-20 Daniel Bates <dabates@apple.com>
 
<https://webkit.org/b/120032> Add DRT test to ensure that AccessibilityObject::stringValue()
Test to make sure -webkit-text-decoration property is backwards compatible with CSS 2.1 and CSS 3 shorthand.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
Initial values:
PASS e.style.getPropertyCSSValue('-webkit-text-decoration') is null
PASS computedStyle.getPropertyCSSValue('-webkit-text-decoration').cssText is 'none solid rgb(0, 0, 0)'
PASS checkComputedStyleValue() is true
CSS2.1 backwards compatibility ("-webkit-text-decoration: underline overline line-through blink;"):
PASS e.style.getPropertyCSSValue('-webkit-text-decoration-line').cssText is 'underline overline line-through blink'
PASS computedStyle.getPropertyCSSValue('-webkit-text-decoration-line').cssText is 'underline overline line-through'
PASS computedStyle.getPropertyCSSValue('-webkit-text-decoration').cssText is 'underline overline line-through solid rgb(0, 0, 0)'
PASS checkComputedStyleValue() is true
CSS3 Shorthand ("-webkit-text-decoration: underline overline line-through blink dashed red;"):
PASS computedStyle.getPropertyCSSValue('-webkit-text-decoration').cssText is 'underline overline line-through dashed rgb(255, 0, 0)'
PASS computedStyle.getPropertyCSSValue('-webkit-text-decoration-line').cssText is 'underline overline line-through'
PASS computedStyle.getPropertyCSSValue('-webkit-text-decoration-style').cssText is 'dashed'
PASS computedStyle.getPropertyCSSValue('-webkit-text-decoration-color').cssText is 'rgb(255, 0, 0)'
PASS checkComputedStyleValue() is true
Omitting text decoration line resets to its initial value "none" ("-webkit-text-decoration: navy dotted;"):
PASS computedStyle.getPropertyCSSValue('-webkit-text-decoration').cssText is 'none dotted rgb(0, 0, 128)'
PASS computedStyle.getPropertyCSSValue('-webkit-text-decoration-line').cssText is 'none'
PASS computedStyle.getPropertyCSSValue('-webkit-text-decoration-style').cssText is 'dotted'
PASS computedStyle.getPropertyCSSValue('-webkit-text-decoration-color').cssText is 'rgb(0, 0, 128)'
PASS checkComputedStyleValue() is true
PASS successfullyParsed is true
TEST COMPLETE
Test to make sure -webkit-text-decoration longhand values are accepted in every possible ordering in shorthand.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
-line -style -color ordering (underline dashed red):
PASS e.style.getPropertyCSSValue('-webkit-text-decoration-line').cssText is 'underline'
PASS e.style.getPropertyCSSValue('-webkit-text-decoration-style').cssText is 'dashed'
PASS e.style.getPropertyCSSValue('-webkit-text-decoration-color').cssText is 'red'
-line -color -style ordering (overline blue dotted):
PASS e.style.getPropertyCSSValue('-webkit-text-decoration-line').cssText is 'overline'
PASS e.style.getPropertyCSSValue('-webkit-text-decoration-style').cssText is 'dotted'
PASS e.style.getPropertyCSSValue('-webkit-text-decoration-color').cssText is 'blue'
-style -line -color ordering (double line-through underline overline green):
PASS e.style.getPropertyCSSValue('-webkit-text-decoration-line').cssText is 'line-through underline overline'
PASS e.style.getPropertyCSSValue('-webkit-text-decoration-style').cssText is 'double'
PASS e.style.getPropertyCSSValue('-webkit-text-decoration-color').cssText is 'green'
-style -color -line ordering (wavy yellow line-through):
PASS e.style.getPropertyCSSValue('-webkit-text-decoration-line').cssText is 'line-through'
PASS e.style.getPropertyCSSValue('-webkit-text-decoration-style').cssText is 'wavy'
PASS e.style.getPropertyCSSValue('-webkit-text-decoration-color').cssText is 'yellow'
-color -line -style ordering (black underline solid):
PASS e.style.getPropertyCSSValue('-webkit-text-decoration-line').cssText is 'underline'
PASS e.style.getPropertyCSSValue('-webkit-text-decoration-style').cssText is 'solid'
PASS e.style.getPropertyCSSValue('-webkit-text-decoration-color').cssText is 'black'
-color style -line -style ordering (navy dashed overline):
PASS e.style.getPropertyCSSValue('-webkit-text-decoration-line').cssText is 'overline'
PASS e.style.getPropertyCSSValue('-webkit-text-decoration-style').cssText is 'dashed'
PASS e.style.getPropertyCSSValue('-webkit-text-decoration-color').cssText is 'navy'
PASS successfullyParsed is true
TEST COMPLETE
<!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 + "'");
}
description("Test to make sure -webkit-text-decoration longhand values are accepted in every possible ordering in 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("-line -style -color ordering (underline dashed red):");
e.style.webkitTextDecoration = 'underline dashed red';
testElementStyle("webkitTextDecorationLine", "-webkit-text-decoration-line", "underline");
testElementStyle("webkitTextDecorationStyle", "-webkit-text-decoration-style", "dashed");
testElementStyle("webkitTextDecorationColor", "-webkit-text-decoration-color", "red");
debug("");
debug("-line -color -style ordering (overline blue dotted):");
e.style.webkitTextDecoration = 'overline blue dotted';
testElementStyle("webkitTextDecorationLine", "-webkit-text-decoration-line", "overline");
testElementStyle("webkitTextDecorationStyle", "-webkit-text-decoration-style", "dotted");
testElementStyle("webkitTextDecorationColor", "-webkit-text-decoration-color", "blue");
debug("");
debug("-style -line -color ordering (double line-through underline overline green):");
e.style.webkitTextDecoration = 'double line-through underline overline green';
testElementStyle("webkitTextDecorationLine", "-webkit-text-decoration-line", "line-through underline overline");
testElementStyle("webkitTextDecorationStyle", "-webkit-text-decoration-style", "double");
testElementStyle("webkitTextDecorationColor", "-webkit-text-decoration-color", "green");
debug("");
debug("-style -color -line ordering (wavy yellow line-through):");
e.style.webkitTextDecoration = 'wavy yellow line-through';
testElementStyle("webkitTextDecorationLine", "-webkit-text-decoration-line", "line-through");
testElementStyle("webkitTextDecorationStyle", "-webkit-text-decoration-style", "wavy");
testElementStyle("webkitTextDecorationColor", "-webkit-text-decoration-color", "yellow");
debug("");
debug("-color -line -style ordering (black underline solid):");
e.style.webkitTextDecoration = 'black underline solid';
testElementStyle("webkitTextDecorationLine", "-webkit-text-decoration-line", "underline");
testElementStyle("webkitTextDecorationStyle", "-webkit-text-decoration-style", "solid");
testElementStyle("webkitTextDecorationColor", "-webkit-text-decoration-color", "black");
debug("");
debug("-color style -line -style ordering (navy dashed overline):");
e.style.webkitTextDecoration = 'navy dashed overline';
testElementStyle("webkitTextDecorationLine", "-webkit-text-decoration-line", "overline");
testElementStyle("webkitTextDecorationStyle", "-webkit-text-decoration-style", "dashed");
testElementStyle("webkitTextDecorationColor", "-webkit-text-decoration-color", "navy");
debug("");
document.body.removeChild(testContainer);
</script>
<script src="../../../js/resources/js-test-post.js"></script>
</body>
</html>
<!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('-webkit-text-decoration');
e.style.webkitTextDecoration = 'none';
e.style.webkitTextDecoration = before;
return (window.getComputedStyle(e, null).getPropertyValue('-webkit-text-decoration') == before);
}
description("Test to make sure -webkit-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('-webkit-text-decoration')");
testComputedStyle("webkitTextDecoration", "-webkit-text-decoration", "none solid rgb(0, 0, 0)");
shouldBe("checkComputedStyleValue()", "true");
debug('');
debug('CSS2.1 backwards compatibility ("-webkit-text-decoration: underline overline line-through blink;"):');
e.style.webkitTextDecoration = "underline overline line-through blink";
testElementStyle("webkitTextDecorationLine", "-webkit-text-decoration-line", "underline overline line-through blink");
testComputedStyle("webkitTextDecorationLine", "-webkit-text-decoration-line", "underline overline line-through");
testComputedStyle("webkitTextDecoration", "-webkit-text-decoration", "underline overline line-through solid rgb(0, 0, 0)");
shouldBe("checkComputedStyleValue()", "true");
debug('');
debug('CSS3 Shorthand ("-webkit-text-decoration: underline overline line-through blink dashed red;"):');
e.style.webkitTextDecoration = "underline overline line-through blink dashed red";
testComputedStyle("webkitTextDecoration", "-webkit-text-decoration", "underline overline line-through dashed rgb(255, 0, 0)");
testComputedStyle("webkitTextDecorationLine", "-webkit-text-decoration-line", "underline overline line-through");
testComputedStyle("webkitTextDecorationStyle", "-webkit-text-decoration-style", "dashed");
testComputedStyle("webkitTextDecorationColor", "-webkit-text-decoration-color", "rgb(255, 0, 0)");
shouldBe("checkComputedStyleValue()", "true");
debug('');
debug('Omitting text decoration line resets to its initial value "none" ("-webkit-text-decoration: navy dotted;"):');
e.style.webkitTextDecoration = "navy dotted";
testComputedStyle("webkitTextDecoration", "-webkit-text-decoration", "none dotted rgb(0, 0, 128)");
testComputedStyle("webkitTextDecorationLine", "-webkit-text-decoration-line", "none");
testComputedStyle("webkitTextDecorationStyle", "-webkit-text-decoration-style", "dotted");
testComputedStyle("webkitTextDecorationColor", "-webkit-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>
2013-08-20 Bruno de Oliveira Abinader <bruno.d@partner.samsung.com>
[css3-text] Implement CSS3 text-decoration shorthand
https://bugs.webkit.org/show_bug.cgi?id=92000
Reviewed by Darin Adler.
Implements the text-decoration shorthand (with -webkit- prefix), as specified by the CSS3 Text Decoration specification:
http://dev.w3.org/csswg/css-text-decor-3/#text-decoration-property
Backported from Blink:
https://src.chromium.org/viewvc/blink?revision=156266&view=revision
Tests: fast/css3-text/css3-text-decoration/getComputedStyle/getComputedStyle-text-decoration-shorthand-ordering.html
fast/css3-text/css3-text-decoration/getComputedStyle/getComputedStyle-text-decoration-shorthand.html
* css/CSSComputedStyleDeclaration.cpp:
(WebCore::ComputedStyleExtractor::propertyValue):
* css/CSSParser.cpp:
(WebCore::CSSParser::parseValue):
(WebCore::CSSParser::addTextDecorationProperty):
(WebCore::CSSParser::parseTextDecoration):
* css/CSSProperty.cpp:
(WebCore::CSSProperty::isInheritedProperty):
* css/CSSPropertyNames.in:
* css/StylePropertyShorthand.cpp:
(WebCore::webkitTextDecorationShorthand):
(WebCore::shorthandForProperty):
(WebCore::matchingShorthandsForLonghand):
* css/StylePropertyShorthand.h:
2013-08-20 Gavin Barraclough <barraclough@apple.com>
 
https://bugs.webkit.org/show_bug.cgi?id=120054
......@@ -2293,6 +2293,8 @@ PassRefPtr<CSSValue> ComputedStyleExtractor::propertyValue(CSSPropertyID propert
case CSSPropertyTextDecoration:
return renderTextDecorationFlagsToCSSValue(style->textDecoration());
#if ENABLE(CSS3_TEXT)
case CSSPropertyWebkitTextDecoration:
return getCSSPropertyValuesForShorthandProperties(webkitTextDecorationShorthand());
case CSSPropertyWebkitTextDecorationLine:
return renderTextDecorationFlagsToCSSValue(style->textDecoration());
case CSSPropertyWebkitTextDecorationStyle:
......
......@@ -2335,6 +2335,12 @@ bool CSSParser::parseValue(CSSPropertyID propId, bool important)
break;
}
#if ENABLE(CSS3_TEXT)
case CSSPropertyWebkitTextDecoration:
// [ <text-decoration-line> || <text-decoration-style> || <text-decoration-color> ] | inherit
return parseShorthand(CSSPropertyWebkitTextDecoration, webkitTextDecorationShorthand(), important);
#endif
case CSSPropertyTextDecoration:
case CSSPropertyWebkitTextDecorationsInEffect:
#if ENABLE(CSS3_TEXT)
......@@ -9522,7 +9528,7 @@ void CSSParser::addTextDecorationProperty(CSSPropertyID propId, PassRefPtr<CSSVa
{
#if ENABLE(CSS3_TEXT)
// The text-decoration-line property takes priority over text-decoration, unless the latter has important priority set.
if (propId == CSSPropertyTextDecoration && !important && m_currentShorthand == CSSPropertyInvalid) {
if (propId == CSSPropertyTextDecoration && !important && !inShorthand()) {
for (unsigned i = 0; i < m_parsedProperties.size(); ++i) {
if (m_parsedProperties[i].id() == CSSPropertyWebkitTextDecorationLine)
return;
......@@ -9535,7 +9541,7 @@ void CSSParser::addTextDecorationProperty(CSSPropertyID propId, PassRefPtr<CSSVa
bool CSSParser::parseTextDecoration(CSSPropertyID propId, bool important)
{
CSSParserValue* value = m_valueList->current();
if (value->id == CSSValueNone) {
if (value && value->id == CSSValueNone) {
addTextDecorationProperty(propId, cssValuePool().createIdentifierValue(CSSValueNone), important);
m_valueList->next();
return true;
......@@ -9559,7 +9565,8 @@ bool CSSParser::parseTextDecoration(CSSPropertyID propId, bool important)
value = m_valueList->next();
}
if (list->length() && isValid) {
// Values are either valid or in shorthand scope.
if (list->length() && (isValid || inShorthand())) {
addTextDecorationProperty(propId, list.release(), important);
return true;
}
......
......@@ -656,6 +656,7 @@ bool CSSProperty::isInheritedProperty(CSSPropertyID propertyID)
case CSSPropertyWebkitPerspectiveOriginX:
case CSSPropertyWebkitPerspectiveOriginY:
#if ENABLE(CSS3_TEXT)
case CSSPropertyWebkitTextDecoration:
case CSSPropertyWebkitTextDecorationLine:
case CSSPropertyWebkitTextDecorationStyle:
case CSSPropertyWebkitTextDecorationColor:
......
......@@ -380,6 +380,7 @@ z-index
-webkit-text-combine
-epub-text-combine = -webkit-text-combine
#if defined(ENABLE_CSS3_TEXT) && ENABLE_CSS3_TEXT
-webkit-text-decoration
-webkit-text-decoration-line
-webkit-text-decoration-style
-webkit-text-decoration-color
......
......@@ -457,6 +457,19 @@ const StylePropertyShorthand& webkitMaskRepeatShorthand()
return webkitMaskRepeatLonghands;
}
#if ENABLE(CSS3_TEXT)
const StylePropertyShorthand& webkitTextDecorationShorthand()
{
static const CSSPropertyID textDecorationProperties[] = {
CSSPropertyWebkitTextDecorationLine,
CSSPropertyWebkitTextDecorationStyle,
CSSPropertyWebkitTextDecorationColor
};
DEFINE_STATIC_LOCAL(StylePropertyShorthand, webkitTextDecorationLonghands, (CSSPropertyWebkitTextDecoration, textDecorationProperties, WTF_ARRAY_LENGTH(textDecorationProperties)));
return webkitTextDecorationLonghands;
}
#endif
const StylePropertyShorthand& webkitTextEmphasisShorthand()
{
static const CSSPropertyID textEmphasisProperties[] = {
......@@ -597,6 +610,10 @@ const StylePropertyShorthand& shorthandForProperty(CSSPropertyID propertyID)
return webkitMaskPositionShorthand();
case CSSPropertyWebkitMaskRepeat:
return webkitMaskRepeatShorthand();
#if ENABLE(CSS3_TEXT)
case CSSPropertyWebkitTextDecoration:
return webkitTextDecorationShorthand();
#endif
case CSSPropertyWebkitTextEmphasis:
return webkitTextEmphasisShorthand();
case CSSPropertyWebkitTextStroke:
......@@ -895,6 +912,14 @@ const Vector<const StylePropertyShorthand*> matchingShorthandsForLonghand(CSSPro
map.set(CSSPropertyWebkitMaskRepeatX, maskRepeat);
map.set(CSSPropertyWebkitMaskRepeatY, maskRepeat);
#if ENABLE(CSS3_TEXT)
Vector<const StylePropertyShorthand*, 3> textDecoration;
textDecoration.uncheckedAppend(&webkitTextDecorationShorthand());
map.set(CSSPropertyWebkitTextDecorationLine, textDecoration);
map.set(CSSPropertyWebkitTextDecorationStyle, textDecoration);
map.set(CSSPropertyWebkitTextDecorationColor, textDecoration);
#endif
Vector<const StylePropertyShorthand*, 1> textEmphasis;
textEmphasis.uncheckedAppend(&webkitTextEmphasisShorthand());
map.set(CSSPropertyWebkitTextEmphasisStyle, textEmphasis);
......
......@@ -116,6 +116,10 @@ const StylePropertyShorthand& webkitTransitionShorthand();
const StylePropertyShorthand& webkitTransformOriginShorthand();
const StylePropertyShorthand& widthShorthand();
#if ENABLE(CSS3_TEXT)
const StylePropertyShorthand& webkitTextDecorationShorthand();
#endif
// Returns an empty list if the property is not a shorthand.
const StylePropertyShorthand& shorthandForProperty(CSSPropertyID);
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment