Changeset 291244 in webkit


Ignore:
Timestamp:
Mar 14, 2022 12:18:11 PM (4 months ago)
Author:
Oriol Brufau
Message:

[css] Implement 'text-decoration' as a shorthand.
​https://bugs.webkit.org/show_bug.cgi?id=237175

Reviewed by Darin Adler.

Source/WebCore:

The 'text-decoration' property was considered to be a longhand, sharing
a computed value with 'text-decoration-line'.

This patch switches 'text-decoration' to be shorthand instead.
According to the CSS Text Decoration spec, the longhands should be
'text-decoration-line', 'text-decoration-thickness',
'text-decoration-style' and 'text-decoration-color'.
I tried that in ​https://commits.webkit.org/r290756, but it got reverted
because of a performance regression. So as a first step, here I'm making
'text-decoration-line' be the only longhand.

There is a bunch of editing code that was getting/setting/removing
'text-decoration' as a longhand, so I'm switching that to instead
use 'text-decoration-line'.

Tests: fast/css/getComputedStyle/computed-style.html

fast/css/getComputedStyle/computed-style-without-renderer.html
fast/css/getComputedStyle/getComputedStyle-text-decoration.html
fast/css3-text/css3-text-decoration/getComputedStyle/getComputedStyle-text-decoration-shorthand.html
imported/w3c/web-platform-tests/css/css-cascade/all-prop-initial-xml.html
imported/w3c/web-platform-tests/css/css-variables/variable-presentation-attribute.html
imported/w3c/web-platform-tests/css/cssom/getComputedStyle-detached-subtree.html
svg/css/getComputedStyle-basic.xhtml

  • css/CSSProperties.json:
  • css/StyleProperties.cpp:

(WebCore::StyleProperties::getPropertyValue const):
(WebCore::StyleProperties::asText const):

  • css/parser/CSSPropertyParser.cpp:

(WebCore::CSSPropertyParser::parseSingleValue):
(WebCore::CSSPropertyParser::parseShorthand):

  • editing/EditingStyle.cpp:

(WebCore::HTMLTextDecorationEquivalent::HTMLTextDecorationEquivalent):
(WebCore::EditingStyle::init):
(WebCore::EditingStyle::styleWithResolvedTextDecorations const):
(WebCore::EditingStyle::collapseTextDecorationProperties):
(WebCore::textDecorationValueList):
(WebCore::EditingStyle::conflictsWithInlineStyleOfElement const):
(WebCore::EditingStyle::styleIsPresentInComputedStyleOfNode const):
(WebCore::EditingStyle::mergeStyle):
(WebCore::reconcileTextDecorationProperties):
(WebCore::StyleChange::StyleChange):
(WebCore::StyleChange::extractTextStyles):
(WebCore::extractPropertiesNotIn):

  • editing/cocoa/HTMLConverter.mm:

(HTMLConverterCaches::propertyValueForNode):
(HTMLConverter::computedAttributesForElement):

  • editing/ios/EditorIOS.mm:

(WebCore::Editor::removeUnchangeableStyles):

  • editing/markup.cpp:

(WebCore::serializePreservingVisualAppearanceInternal):

  • style/PropertyAllowlist.cpp:

(WebCore::Style::isValidCueStyleProperty):

LayoutTests:

Update tests to take into account that 'text-decoration' is a shorthand.

  • fast/css/getComputedStyle/computed-style-expected.txt:
  • fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
  • fast/css/getComputedStyle/getComputedStyle-text-decoration-expected.txt:
  • fast/css/getComputedStyle/getComputedStyle-text-decoration.html:
  • fast/css/getComputedStyle/resources/property-names.js:
  • fast/css3-text/css3-text-decoration/getComputedStyle/getComputedStyle-text-decoration-shorthand-expected.txt:
  • fast/css3-text/css3-text-decoration/getComputedStyle/getComputedStyle-text-decoration-shorthand.html:
  • svg/css/getComputedStyle-basic-expected.txt:
Location:
trunk
Files:
18 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r291236 r291244  
     12022-03-14  Oriol Brufau  <obrufau@igalia.com>
     2
     3        [css] Implement 'text-decoration' as a shorthand.
     4        https://bugs.webkit.org/show_bug.cgi?id=237175
     5
     6        Reviewed by Darin Adler.
     7
     8        Update tests to take into account that 'text-decoration' is a shorthand.
     9
     10        * fast/css/getComputedStyle/computed-style-expected.txt:
     11        * fast/css/getComputedStyle/computed-style-without-renderer-expected.txt:
     12        * fast/css/getComputedStyle/getComputedStyle-text-decoration-expected.txt:
     13        * fast/css/getComputedStyle/getComputedStyle-text-decoration.html:
     14        * fast/css/getComputedStyle/resources/property-names.js:
     15        * fast/css3-text/css3-text-decoration/getComputedStyle/getComputedStyle-text-decoration-shorthand-expected.txt:
     16        * fast/css3-text/css3-text-decoration/getComputedStyle/getComputedStyle-text-decoration-shorthand.html:
     17        * svg/css/getComputedStyle-basic-expected.txt:
     18
    1192022-03-14  Antoine Quint  <graouts@webkit.org>
    220

  • trunk/LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt

    r290772 r291244  
    174174text-anchor: start;
    175175text-combine-upright: none;
    176 text-decoration: none;
     176text-decoration-color: rgb(0, 0, 0);
     177text-decoration-line: none;
     178text-decoration-style: solid;
     179text-decoration-thickness: auto;
    177180text-emphasis-color: rgb(0, 0, 0);
    178181text-emphasis-position: over right;

  • trunk/LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt

    r290772 r291244  
    173173text-anchor: start
    174174text-combine-upright: none
    175 text-decoration: none
     175text-decoration-color: rgb(0, 0, 0)
     176text-decoration-line: none
     177text-decoration-style: solid
     178text-decoration-thickness: auto
    176179text-emphasis-color: rgb(0, 0, 0)
    177180text-emphasis-position: over right

  • trunk/LayoutTests/fast/css/getComputedStyle/getComputedStyle-text-decoration-expected.txt

    r290772 r291244  
    55
    66Initial value:
    7 PASS e.style.getPropertyCSSValue('text-decoration') is null
    8 PASS computedStyle.textDecoration is 'none'
    9 PASS computedStyle.getPropertyCSSValue('text-decoration').toString() is '[object CSSPrimitiveValue]'
    10 PASS computedStyle.getPropertyCSSValue('text-decoration').cssText is 'none'
     7PASS e.style.textDecoration is ''
     8PASS e.style.getPropertyValue('text-decoration') is ''
     9PASS e.style.getPropertyCSSValue('text-decoration') is null
     10PASS e.style.textDecorationLine is ''
     11PASS e.style.getPropertyValue('text-decoration-line') is ''
     12PASS e.style.getPropertyCSSValue('text-decoration-line') is null
     13PASS computedStyle.textDecoration is 'none'
     14PASS computedStyle.getPropertyValue('text-decoration') is 'none'
     15PASS computedStyle.getPropertyCSSValue('text-decoration').toString() is '[object CSSPrimitiveValue]'
     16PASS computedStyle.getPropertyCSSValue('text-decoration').cssText is 'none'
     17PASS computedStyle.textDecorationLine is 'none'
     18PASS computedStyle.getPropertyValue('text-decoration-line') is 'none'
     19PASS computedStyle.getPropertyCSSValue('text-decoration-line').toString() is '[object CSSPrimitiveValue]'
     20PASS computedStyle.getPropertyCSSValue('text-decoration-line').cssText is 'none'
    1121
    1222Initial value (explicit):
    1323PASS e.style.textDecoration is 'initial'
    14 PASS e.style.getPropertyCSSValue('text-decoration').toString() is '[object CSSValue]'
    15 PASS e.style.getPropertyCSSValue('text-decoration').cssText is 'initial'
    16 PASS computedStyle.textDecoration is 'none'
    17 PASS computedStyle.getPropertyCSSValue('text-decoration').toString() is '[object CSSPrimitiveValue]'
    18 PASS computedStyle.getPropertyCSSValue('text-decoration').cssText is 'none'
     24PASS e.style.getPropertyValue('text-decoration') is 'initial'
     25PASS e.style.getPropertyCSSValue('text-decoration') is null
     26PASS e.style.textDecorationLine is 'initial'
     27PASS e.style.getPropertyValue('text-decoration-line') is 'initial'
     28PASS e.style.getPropertyCSSValue('text-decoration-line').toString() is '[object CSSValue]'
     29PASS e.style.getPropertyCSSValue('text-decoration-line').cssText is 'initial'
     30PASS computedStyle.textDecoration is 'none'
     31PASS computedStyle.getPropertyValue('text-decoration') is 'none'
     32PASS computedStyle.getPropertyCSSValue('text-decoration').toString() is '[object CSSPrimitiveValue]'
     33PASS computedStyle.getPropertyCSSValue('text-decoration').cssText is 'none'
     34PASS computedStyle.textDecorationLine is 'none'
     35PASS computedStyle.getPropertyValue('text-decoration-line') is 'none'
     36PASS computedStyle.getPropertyCSSValue('text-decoration-line').toString() is '[object CSSPrimitiveValue]'
     37PASS computedStyle.getPropertyCSSValue('text-decoration-line').cssText is 'none'
    1938
    2039Value 'none':
    2140PASS e.style.textDecoration is 'none'
    22 PASS e.style.getPropertyCSSValue('text-decoration').toString() is '[object CSSPrimitiveValue]'
    23 PASS e.style.getPropertyCSSValue('text-decoration').cssText is 'none'
    24 PASS computedStyle.textDecoration is 'none'
    25 PASS computedStyle.getPropertyCSSValue('text-decoration').toString() is '[object CSSPrimitiveValue]'
    26 PASS computedStyle.getPropertyCSSValue('text-decoration').cssText is 'none'
     41PASS e.style.getPropertyValue('text-decoration') is 'none'
     42PASS e.style.getPropertyCSSValue('text-decoration') is null
     43PASS e.style.textDecorationLine is 'none'
     44PASS e.style.getPropertyValue('text-decoration-line') is 'none'
     45PASS e.style.getPropertyCSSValue('text-decoration-line').toString() is '[object CSSPrimitiveValue]'
     46PASS e.style.getPropertyCSSValue('text-decoration-line').cssText is 'none'
     47PASS computedStyle.textDecoration is 'none'
     48PASS computedStyle.getPropertyValue('text-decoration') is 'none'
     49PASS computedStyle.getPropertyCSSValue('text-decoration').toString() is '[object CSSPrimitiveValue]'
     50PASS computedStyle.getPropertyCSSValue('text-decoration').cssText is 'none'
     51PASS computedStyle.textDecorationLine is 'none'
     52PASS computedStyle.getPropertyValue('text-decoration-line') is 'none'
     53PASS computedStyle.getPropertyCSSValue('text-decoration-line').toString() is '[object CSSPrimitiveValue]'
     54PASS computedStyle.getPropertyCSSValue('text-decoration-line').cssText is 'none'
    2755
    2856Value 'underline':
    2957PASS e.style.textDecoration is 'underline'
    30 PASS e.style.getPropertyCSSValue('text-decoration').toString() is '[object CSSValueList]'
    31 PASS e.style.getPropertyCSSValue('text-decoration').cssText is 'underline'
     58PASS e.style.getPropertyValue('text-decoration') is 'underline'
     59PASS e.style.getPropertyCSSValue('text-decoration') is null
     60PASS e.style.textDecorationLine is 'underline'
     61PASS e.style.getPropertyValue('text-decoration-line') is 'underline'
     62PASS e.style.getPropertyCSSValue('text-decoration-line').toString() is '[object CSSValueList]'
     63PASS e.style.getPropertyCSSValue('text-decoration-line').cssText is 'underline'
    3264PASS computedStyle.textDecoration is 'underline'
     65PASS computedStyle.getPropertyValue('text-decoration') is 'underline'
    3366PASS computedStyle.getPropertyCSSValue('text-decoration').toString() is '[object CSSValueList]'
    3467PASS computedStyle.getPropertyCSSValue('text-decoration').cssText is 'underline'
     68PASS computedStyle.textDecorationLine is 'underline'
     69PASS computedStyle.getPropertyValue('text-decoration-line') is 'underline'
     70PASS computedStyle.getPropertyCSSValue('text-decoration-line').toString() is '[object CSSValueList]'
     71PASS computedStyle.getPropertyCSSValue('text-decoration-line').cssText is 'underline'
    3572
    3673Value 'overline':
    3774PASS e.style.textDecoration is 'overline'
    38 PASS e.style.getPropertyCSSValue('text-decoration').toString() is '[object CSSValueList]'
    39 PASS e.style.getPropertyCSSValue('text-decoration').cssText is 'overline'
     75PASS e.style.getPropertyValue('text-decoration') is 'overline'
     76PASS e.style.getPropertyCSSValue('text-decoration') is null
     77PASS e.style.textDecorationLine is 'overline'
     78PASS e.style.getPropertyValue('text-decoration-line') is 'overline'
     79PASS e.style.getPropertyCSSValue('text-decoration-line').toString() is '[object CSSValueList]'
     80PASS e.style.getPropertyCSSValue('text-decoration-line').cssText is 'overline'
    4081PASS computedStyle.textDecoration is 'overline'
     82PASS computedStyle.getPropertyValue('text-decoration') is 'overline'
    4183PASS computedStyle.getPropertyCSSValue('text-decoration').toString() is '[object CSSValueList]'
    4284PASS computedStyle.getPropertyCSSValue('text-decoration').cssText is 'overline'
     85PASS computedStyle.textDecorationLine is 'overline'
     86PASS computedStyle.getPropertyValue('text-decoration-line') is 'overline'
     87PASS computedStyle.getPropertyCSSValue('text-decoration-line').toString() is '[object CSSValueList]'
     88PASS computedStyle.getPropertyCSSValue('text-decoration-line').cssText is 'overline'
    4389
    4490Value 'line-through':
    4591PASS e.style.textDecoration is 'line-through'
    46 PASS e.style.getPropertyCSSValue('text-decoration').toString() is '[object CSSValueList]'
    47 PASS e.style.getPropertyCSSValue('text-decoration').cssText is 'line-through'
     92PASS e.style.getPropertyValue('text-decoration') is 'line-through'
     93PASS e.style.getPropertyCSSValue('text-decoration') is null
     94PASS e.style.textDecorationLine is 'line-through'
     95PASS e.style.getPropertyValue('text-decoration-line') is 'line-through'
     96PASS e.style.getPropertyCSSValue('text-decoration-line').toString() is '[object CSSValueList]'
     97PASS e.style.getPropertyCSSValue('text-decoration-line').cssText is 'line-through'
    4898PASS computedStyle.textDecoration is 'line-through'
     99PASS computedStyle.getPropertyValue('text-decoration') is 'line-through'
    49100PASS computedStyle.getPropertyCSSValue('text-decoration').toString() is '[object CSSValueList]'
    50101PASS computedStyle.getPropertyCSSValue('text-decoration').cssText is 'line-through'
     102PASS computedStyle.textDecorationLine is 'line-through'
     103PASS computedStyle.getPropertyValue('text-decoration-line') is 'line-through'
     104PASS computedStyle.getPropertyCSSValue('text-decoration-line').toString() is '[object CSSValueList]'
     105PASS computedStyle.getPropertyCSSValue('text-decoration-line').cssText is 'line-through'
    51106
    52107Value 'underline overline line-through':
    53108PASS e.style.textDecoration is 'underline overline line-through'
    54 PASS e.style.getPropertyCSSValue('text-decoration').toString() is '[object CSSValueList]'
    55 PASS e.style.getPropertyCSSValue('text-decoration').cssText is 'underline overline line-through'
     109PASS e.style.getPropertyValue('text-decoration') is 'underline overline line-through'
     110PASS e.style.getPropertyCSSValue('text-decoration') is null
     111PASS e.style.textDecorationLine is 'underline overline line-through'
     112PASS e.style.getPropertyValue('text-decoration-line') is 'underline overline line-through'
     113PASS e.style.getPropertyCSSValue('text-decoration-line').toString() is '[object CSSValueList]'
     114PASS e.style.getPropertyCSSValue('text-decoration-line').cssText is 'underline overline line-through'
    56115PASS computedStyle.textDecoration is 'underline overline line-through'
     116PASS computedStyle.getPropertyValue('text-decoration') is 'underline overline line-through'
    57117PASS computedStyle.getPropertyCSSValue('text-decoration').toString() is '[object CSSValueList]'
    58118PASS computedStyle.getPropertyCSSValue('text-decoration').cssText is 'underline overline line-through'
     119PASS computedStyle.textDecorationLine is 'underline overline line-through'
     120PASS computedStyle.getPropertyValue('text-decoration-line') is 'underline overline line-through'
     121PASS computedStyle.getPropertyCSSValue('text-decoration-line').toString() is '[object CSSValueList]'
     122PASS computedStyle.getPropertyCSSValue('text-decoration-line').cssText is 'underline overline line-through'
    59123
    60124Value 'blink' (valid but ignored):
    61125PASS e.style.textDecoration is 'blink'
    62 PASS e.style.getPropertyCSSValue('text-decoration').toString() is '[object CSSValueList]'
    63 PASS e.style.getPropertyCSSValue('text-decoration').cssText is 'blink'
    64 PASS computedStyle.textDecoration is 'none'
    65 PASS computedStyle.getPropertyCSSValue('text-decoration').toString() is '[object CSSPrimitiveValue]'
    66 PASS computedStyle.getPropertyCSSValue('text-decoration').cssText is 'none'
     126PASS e.style.getPropertyValue('text-decoration') is 'blink'
     127PASS e.style.getPropertyCSSValue('text-decoration') is null
     128PASS e.style.textDecorationLine is 'blink'
     129PASS e.style.getPropertyValue('text-decoration-line') is 'blink'
     130PASS e.style.getPropertyCSSValue('text-decoration-line').toString() is '[object CSSValueList]'
     131PASS e.style.getPropertyCSSValue('text-decoration-line').cssText is 'blink'
     132PASS computedStyle.textDecoration is 'none'
     133PASS computedStyle.getPropertyValue('text-decoration') is 'none'
     134PASS computedStyle.getPropertyCSSValue('text-decoration').toString() is '[object CSSPrimitiveValue]'
     135PASS computedStyle.getPropertyCSSValue('text-decoration').cssText is 'none'
     136PASS computedStyle.textDecorationLine is 'none'
     137PASS computedStyle.getPropertyValue('text-decoration-line') is 'none'
     138PASS computedStyle.getPropertyCSSValue('text-decoration-line').toString() is '[object CSSPrimitiveValue]'
     139PASS computedStyle.getPropertyCSSValue('text-decoration-line').cssText is 'none'
    67140
    68141Value '':
    69 PASS e.style.getPropertyCSSValue('text-decoration') is null
    70 PASS computedStyle.textDecoration is 'none'
    71 PASS computedStyle.getPropertyCSSValue('text-decoration').toString() is '[object CSSPrimitiveValue]'
    72 PASS computedStyle.getPropertyCSSValue('text-decoration').cssText is 'none'
     142PASS e.style.textDecoration is ''
     143PASS e.style.getPropertyValue('text-decoration') is ''
     144PASS e.style.getPropertyCSSValue('text-decoration') is null
     145PASS e.style.textDecorationLine is ''
     146PASS e.style.getPropertyValue('text-decoration-line') is ''
     147PASS e.style.getPropertyCSSValue('text-decoration-line') is null
     148PASS computedStyle.textDecoration is 'none'
     149PASS computedStyle.getPropertyValue('text-decoration') is 'none'
     150PASS computedStyle.getPropertyCSSValue('text-decoration').toString() is '[object CSSPrimitiveValue]'
     151PASS computedStyle.getPropertyCSSValue('text-decoration').cssText is 'none'
     152PASS computedStyle.textDecorationLine is 'none'
     153PASS computedStyle.getPropertyValue('text-decoration-line') is 'none'
     154PASS computedStyle.getPropertyCSSValue('text-decoration-line').toString() is '[object CSSPrimitiveValue]'
     155PASS computedStyle.getPropertyCSSValue('text-decoration-line').cssText is 'none'
    73156
    74157Parent gets 'underline' value:
    75158PASS e.style.textDecoration is 'underline'
    76 PASS e.style.getPropertyCSSValue('text-decoration').toString() is '[object CSSValueList]'
    77 PASS e.style.getPropertyCSSValue('text-decoration').cssText is 'underline'
     159PASS e.style.getPropertyValue('text-decoration') is 'underline'
     160PASS e.style.getPropertyCSSValue('text-decoration') is null
     161PASS e.style.textDecorationLine is 'underline'
     162PASS e.style.getPropertyValue('text-decoration-line') is 'underline'
     163PASS e.style.getPropertyCSSValue('text-decoration-line').toString() is '[object CSSValueList]'
     164PASS e.style.getPropertyCSSValue('text-decoration-line').cssText is 'underline'
    78165PASS computedStyle.textDecoration is 'underline'
     166PASS computedStyle.getPropertyValue('text-decoration') is 'underline'
    79167PASS computedStyle.getPropertyCSSValue('text-decoration').toString() is '[object CSSValueList]'
    80168PASS computedStyle.getPropertyCSSValue('text-decoration').cssText is 'underline'
     169PASS computedStyle.textDecorationLine is 'underline'
     170PASS computedStyle.getPropertyValue('text-decoration-line') is 'underline'
     171PASS computedStyle.getPropertyCSSValue('text-decoration-line').toString() is '[object CSSValueList]'
     172PASS computedStyle.getPropertyCSSValue('text-decoration-line').cssText is 'underline'
    81173
    82174Ancestor should explicitly inherit value from parent when 'inherit' value is used:
    83175PASS e.style.textDecoration is 'inherit'
    84 PASS e.style.getPropertyCSSValue('text-decoration').toString() is '[object CSSValue]'
    85 PASS e.style.getPropertyCSSValue('text-decoration').cssText is 'inherit'
     176PASS e.style.getPropertyValue('text-decoration') is 'inherit'
     177PASS e.style.getPropertyCSSValue('text-decoration') is null
     178PASS e.style.textDecorationLine is 'inherit'
     179PASS e.style.getPropertyValue('text-decoration-line') is 'inherit'
     180PASS e.style.getPropertyCSSValue('text-decoration-line').toString() is '[object CSSValue]'
     181PASS e.style.getPropertyCSSValue('text-decoration-line').cssText is 'inherit'
    86182PASS computedStyle.textDecoration is 'underline'
     183PASS computedStyle.getPropertyValue('text-decoration') is 'underline'
    87184PASS computedStyle.getPropertyCSSValue('text-decoration').toString() is '[object CSSValueList]'
    88185PASS computedStyle.getPropertyCSSValue('text-decoration').cssText is 'underline'
     186PASS computedStyle.textDecorationLine is 'underline'
     187PASS computedStyle.getPropertyValue('text-decoration-line') is 'underline'
     188PASS computedStyle.getPropertyCSSValue('text-decoration-line').toString() is '[object CSSValueList]'
     189PASS computedStyle.getPropertyCSSValue('text-decoration-line').cssText is 'underline'
    89190
    90191Ancestor should not implicitly inherit value from parent (i.e. when value is void):
    91 PASS e.style.getPropertyCSSValue('text-decoration') is null
    92 PASS computedStyle.textDecoration is 'none'
    93 PASS computedStyle.getPropertyCSSValue('text-decoration').toString() is '[object CSSPrimitiveValue]'
    94 PASS computedStyle.getPropertyCSSValue('text-decoration').cssText is 'none'
     192PASS e.style.textDecoration is ''
     193PASS e.style.getPropertyValue('text-decoration') is ''
     194PASS e.style.getPropertyCSSValue('text-decoration') is null
     195PASS e.style.textDecorationLine is ''
     196PASS e.style.getPropertyValue('text-decoration-line') is ''
     197PASS e.style.getPropertyCSSValue('text-decoration-line') is null
     198PASS computedStyle.textDecoration is 'none'
     199PASS computedStyle.getPropertyValue('text-decoration') is 'none'
     200PASS computedStyle.getPropertyCSSValue('text-decoration').toString() is '[object CSSPrimitiveValue]'
     201PASS computedStyle.getPropertyCSSValue('text-decoration').cssText is 'none'
     202PASS computedStyle.textDecorationLine is 'none'
     203PASS computedStyle.getPropertyValue('text-decoration-line') is 'none'
     204PASS computedStyle.getPropertyCSSValue('text-decoration-line').toString() is '[object CSSPrimitiveValue]'
     205PASS computedStyle.getPropertyCSSValue('text-decoration-line').cssText is 'none'
    95206
    96207PASS successfullyParsed is true

  • trunk/LayoutTests/fast/css/getComputedStyle/getComputedStyle-text-decoration.html

    r290772 r291244  
    66<body>
    77<script>
    8 function testElementStyle(propertyJS, propertyCSS, type, value)
     8function testElementStyle(type, value)
    99{
    1010    if (type != null) {
    11         shouldBe("e.style." + propertyJS, "'" + value + "'");
    12         shouldBe("e.style.getPropertyCSSValue('" + propertyCSS + "').toString()", "'" + type + "'");
    13         shouldBe("e.style.getPropertyCSSValue('" + propertyCSS + "').cssText", "'" + value + "'");
    14     } else
    15         shouldBeNull("e.style.getPropertyCSSValue('" + propertyCSS + "')");
     11        shouldBe("e.style.textDecoration", "'" + value + "'");
     12        shouldBe("e.style.getPropertyValue('text-decoration')", "'" + value + "'");
     13        shouldBeNull("e.style.getPropertyCSSValue('text-decoration')");
     14
     15        shouldBe("e.style.textDecorationLine", "'" + value + "'");
     16        shouldBe("e.style.getPropertyValue('text-decoration-line')", "'" + value + "'");
     17        shouldBe("e.style.getPropertyCSSValue('text-decoration-line').toString()", "'" + type + "'");
     18        shouldBe("e.style.getPropertyCSSValue('text-decoration-line').cssText", "'" + value + "'");
     19    } else {
     20        shouldBe("e.style.textDecoration", "''");
     21        shouldBe("e.style.getPropertyValue('text-decoration')", "''");
     22        shouldBeNull("e.style.getPropertyCSSValue('text-decoration')");
     23
     24        shouldBe("e.style.textDecorationLine", "''");
     25        shouldBe("e.style.getPropertyValue('text-decoration-line')", "''");
     26        shouldBeNull("e.style.getPropertyCSSValue('text-decoration-line')");
     27    }
    1628}
    1729
    18 function testComputedStyle(propertyJS, propertyCSS, type, value)
     30function testComputedStyle(type, value)
    1931{
    2032    computedStyle = window.getComputedStyle(e, null);
    21     shouldBe("computedStyle." + propertyJS, "'" + value + "'");
    22     shouldBe("computedStyle.getPropertyCSSValue('" + propertyCSS + "').toString()", "'" + type + "'");
    23     shouldBe("computedStyle.getPropertyCSSValue('" + propertyCSS + "').cssText", "'" + value + "'");
     33
     34    shouldBe("computedStyle.textDecoration", "'" + value + "'");
     35    shouldBe("computedStyle.getPropertyValue('text-decoration')", "'" + value + "'");
     36    shouldBe("computedStyle.getPropertyCSSValue('text-decoration').toString()", "'" + type + "'");
     37    shouldBe("computedStyle.getPropertyCSSValue('text-decoration').cssText", "'" + value + "'");
     38
     39    shouldBe("computedStyle.textDecorationLine", "'" + value + "'");
     40    shouldBe("computedStyle.getPropertyValue('text-decoration-line')", "'" + value + "'");
     41    shouldBe("computedStyle.getPropertyCSSValue('text-decoration-line').toString()", "'" + type + "'");
     42    shouldBe("computedStyle.getPropertyCSSValue('text-decoration-line').cssText", "'" + value + "'");
    2443}
    2544
    … …  
    3352debug("Initial value:");
    3453e = document.getElementById('test');
    35 testElementStyle("textDecoration", "text-decoration", null, '');
    36 testComputedStyle("textDecoration", "text-decoration", "[object CSSPrimitiveValue]", "none");
     54testElementStyle(null, '');
     55testComputedStyle("[object CSSPrimitiveValue]", "none");
    3756debug('');
    3857
    3958debug("Initial value (explicit):");
    4059e.style.textDecoration = 'initial';
    41 testElementStyle("textDecoration", "text-decoration", "[object CSSValue]", "initial");
    42 testComputedStyle("textDecoration", "text-decoration", "[object CSSPrimitiveValue]", "none");
     60testElementStyle("[object CSSValue]", "initial");
     61testComputedStyle("[object CSSPrimitiveValue]", "none");
    4362debug('');
    4463
    4564debug("Value 'none':");
    4665e.style.textDecoration = 'none';
    47 testElementStyle("textDecoration", "text-decoration", "[object CSSPrimitiveValue]", "none");
    48 testComputedStyle("textDecoration", "text-decoration", "[object CSSPrimitiveValue]", "none");
     66testElementStyle("[object CSSPrimitiveValue]", "none");
     67testComputedStyle("[object CSSPrimitiveValue]", "none");
    4968debug('');
    5069
    5170debug("Value 'underline':");
    5271e.style.textDecoration = 'underline';
    53 testElementStyle("textDecoration", "text-decoration", "[object CSSValueList]", "underline");
    54 testComputedStyle("textDecoration", "text-decoration", "[object CSSValueList]", "underline");
     72testElementStyle("[object CSSValueList]", "underline");
     73testComputedStyle("[object CSSValueList]", "underline");
    5574debug('');
    5675
    5776debug("Value 'overline':");
    5877e.style.textDecoration = 'overline';
    59 testElementStyle("textDecoration", "text-decoration", "[object CSSValueList]", "overline");
    60 testComputedStyle("textDecoration", "text-decoration", "[object CSSValueList]", "overline");
     78testElementStyle("[object CSSValueList]", "overline");
     79testComputedStyle("[object CSSValueList]", "overline");
    6180debug('');
    6281
    6382debug("Value 'line-through':");
    6483e.style.textDecoration = 'line-through';
    65 testElementStyle("textDecoration", "text-decoration", "[object CSSValueList]", "line-through");
    66 testComputedStyle("textDecoration", "text-decoration", "[object CSSValueList]", "line-through");
     84testElementStyle("[object CSSValueList]", "line-through");
     85testComputedStyle("[object CSSValueList]", "line-through");
    6786debug('');
    6887
    6988debug("Value 'underline overline line-through':");
    7089e.style.textDecoration = 'underline overline line-through';
    71 testElementStyle("textDecoration", "text-decoration", "[object CSSValueList]", "underline overline line-through");
    72 testComputedStyle("textDecoration", "text-decoration", "[object CSSValueList]", "underline overline line-through");
     90testElementStyle("[object CSSValueList]", "underline overline line-through");
     91testComputedStyle("[object CSSValueList]", "underline overline line-through");
    7392debug('');
    7493
    7594debug("Value 'blink' (valid but ignored):");
    7695e.style.textDecoration = 'blink';
    77 testElementStyle("textDecoration", "text-decoration", "[object CSSValueList]", "blink");
    78 testComputedStyle("textDecoration", "text-decoration", "[object CSSPrimitiveValue]", "none");
     96testElementStyle("[object CSSValueList]", "blink");
     97testComputedStyle("[object CSSPrimitiveValue]", "none");
    7998debug('');
    8099
    81100debug("Value '':");
    82101e.style.textDecoration = '';
    83 testElementStyle("textDecoration", "text-decoration", null, '');
    84 testComputedStyle("textDecoration", "text-decoration", "[object CSSPrimitiveValue]", "none");
     102testElementStyle(null, '');
     103testComputedStyle("[object CSSPrimitiveValue]", "none");
    85104debug('');
    86105
    … …  
    88107debug("Parent gets 'underline' value:");
    89108e = document.getElementById('test-parent');
    90 testElementStyle("textDecoration", "text-decoration", "[object CSSValueList]", "underline");
    91 testComputedStyle("textDecoration", "text-decoration", "[object CSSValueList]", "underline");
     109testElementStyle("[object CSSValueList]", "underline");
     110testComputedStyle("[object CSSValueList]", "underline");
    92111debug('');
    93112
    94113debug("Ancestor should explicitly inherit value from parent when 'inherit' value is used:");
    95114e = document.getElementById('test-ancestor');
    96 testElementStyle("textDecoration", "text-decoration", "[object CSSValue]", "inherit");
    97 testComputedStyle("textDecoration", "text-decoration", "[object CSSValueList]", "underline");
     115testElementStyle("[object CSSValue]", "inherit");
     116testComputedStyle("[object CSSValueList]", "underline");
    98117debug('');
    99118
    100119debug("Ancestor should not implicitly inherit value from parent (i.e. when value is void):");
    101120e.style.textDecoration = '';
    102 testElementStyle("textDecoration", "text-decoration", null, '');
    103 testComputedStyle("textDecoration", "text-decoration", "[object CSSPrimitiveValue]", "none");
     121testElementStyle(null, '');
     122testComputedStyle("[object CSSPrimitiveValue]", "none");
    104123debug('');
    105124

  • trunk/LayoutTests/fast/css/getComputedStyle/resources/property-names.js

    r290772 r291244  
    258258    "text-align": true,
    259259    "text-anchor": true,
    260     "text-decoration": true,
     260    "text-decoration-color": true,
     261    "text-decoration-line": true,
     262    "text-decoration-style": true,
     263    "text-decoration-thickness": true,
    261264    "text-indent": true,
    262265    "text-overflow": true,

  • trunk/LayoutTests/fast/css3-text/css3-text-decoration/getComputedStyle/getComputedStyle-text-decoration-shorthand-expected.txt

    r290772 r291244  
    66Initial values:
    77PASS e.style.getPropertyCSSValue('-webkit-text-decoration') is null
    8 PASS computedStyle.getPropertyCSSValue('-webkit-text-decoration').cssText is 'none solid rgb(0, 0, 0)'
    9 PASS checkComputedStyleValue() is true
     8PASS computedStyle.getPropertyValue('-webkit-text-decoration') is 'none solid rgb(0, 0, 0)'
     9PASS checkComputedStyleValue('webkitTextDecoration', '-webkit-text-decoration') is true
    1010
    1111CSS2.1 backwards compatibility ("-webkit-text-decoration: underline overline line-through blink;"):
    12 PASS e.style.getPropertyCSSValue('-webkit-text-decoration-line').cssText is 'underline overline line-through blink'
    13 PASS computedStyle.getPropertyCSSValue('-webkit-text-decoration-line').cssText is 'underline overline line-through'
    14 PASS computedStyle.getPropertyCSSValue('-webkit-text-decoration').cssText is 'underline overline line-through solid rgb(0, 0, 0)'
    15 PASS checkComputedStyleValue() is true
     12PASS e.style.getPropertyValue('-webkit-text-decoration-line') is 'underline overline line-through blink'
     13PASS computedStyle.getPropertyValue('-webkit-text-decoration-line') is 'underline overline line-through'
     14PASS computedStyle.getPropertyValue('-webkit-text-decoration') is 'underline overline line-through solid rgb(0, 0, 0)'
     15PASS checkComputedStyleValue('webkitTextDecoration', '-webkit-text-decoration') is true
    1616
    1717CSS3 Shorthand ("-webkit-text-decoration: underline overline line-through blink dashed red;"):
    18 PASS computedStyle.getPropertyCSSValue('-webkit-text-decoration').cssText is 'underline overline line-through dashed rgb(255, 0, 0)'
    19 PASS computedStyle.getPropertyCSSValue('-webkit-text-decoration-line').cssText is 'underline overline line-through'
    20 PASS computedStyle.getPropertyCSSValue('-webkit-text-decoration-style').cssText is 'dashed'
    21 PASS computedStyle.getPropertyCSSValue('-webkit-text-decoration-color').cssText is 'rgb(255, 0, 0)'
    22 PASS checkComputedStyleValue() is true
     18PASS computedStyle.getPropertyValue('-webkit-text-decoration') is 'underline overline line-through dashed rgb(255, 0, 0)'
     19PASS computedStyle.getPropertyValue('-webkit-text-decoration-line') is 'underline overline line-through'
     20PASS computedStyle.getPropertyValue('-webkit-text-decoration-style') is 'dashed'
     21PASS computedStyle.getPropertyValue('-webkit-text-decoration-color') is 'rgb(255, 0, 0)'
     22PASS checkComputedStyleValue('webkitTextDecoration', '-webkit-text-decoration') is true
    2323
    2424Omitting text decoration line resets to its initial value "none" ("-webkit-text-decoration: navy dotted;"):
    25 PASS computedStyle.getPropertyCSSValue('-webkit-text-decoration').cssText is 'none dotted rgb(0, 0, 128)'
    26 PASS computedStyle.getPropertyCSSValue('-webkit-text-decoration-line').cssText is 'none'
    27 PASS computedStyle.getPropertyCSSValue('-webkit-text-decoration-style').cssText is 'dotted'
    28 PASS computedStyle.getPropertyCSSValue('-webkit-text-decoration-color').cssText is 'rgb(0, 0, 128)'
    29 PASS checkComputedStyleValue() is true
     25PASS computedStyle.getPropertyValue('-webkit-text-decoration') is 'none dotted rgb(0, 0, 128)'
     26PASS computedStyle.getPropertyValue('-webkit-text-decoration-line') is 'none'
     27PASS computedStyle.getPropertyValue('-webkit-text-decoration-style') is 'dotted'
     28PASS computedStyle.getPropertyValue('-webkit-text-decoration-color') is 'rgb(0, 0, 128)'
     29PASS checkComputedStyleValue('webkitTextDecoration', '-webkit-text-decoration') is true
     30
     31CSS2.1 backwards compatibility of non-prefixed shorthand ("text-decoration: underline overline line-through blink;"):
     32PASS e.style.getPropertyValue('text-decoration') is 'underline overline line-through blink'
     33PASS e.style.getPropertyValue('text-decoration-line') is 'underline overline line-through blink'
     34PASS e.style.getPropertyValue('text-decoration-thickness') is ''
     35PASS e.style.getPropertyValue('text-decoration-style') is ''
     36PASS e.style.getPropertyValue('text-decoration-color') is ''
     37PASS computedStyle.getPropertyValue('text-decoration') is 'underline overline line-through'
     38PASS computedStyle.getPropertyValue('text-decoration-line') is 'underline overline line-through'
     39PASS computedStyle.getPropertyValue('text-decoration-thickness') is 'auto'
     40PASS computedStyle.getPropertyValue('text-decoration-style') is 'solid'
     41PASS computedStyle.getPropertyValue('text-decoration-color') is 'rgb(0, 0, 0)'
     42PASS checkComputedStyleValue('textDecoration', 'text-decoration') is true
     43
     44Setting CSS3 longhands to initial values ("text-decoration-line: none; text-decoration-thickness: auto; text-decoration-style: solid; text-decoration-color: currentcolor;"):
     45PASS e.style.getPropertyValue('text-decoration') is 'none'
     46PASS e.style.getPropertyValue('text-decoration-line') is 'none'
     47PASS e.style.getPropertyValue('text-decoration-thickness') is 'auto'
     48PASS e.style.getPropertyValue('text-decoration-style') is 'solid'
     49PASS e.style.getPropertyValue('text-decoration-color') is 'currentcolor'
     50PASS computedStyle.getPropertyValue('text-decoration') is 'none'
     51PASS computedStyle.getPropertyValue('text-decoration-line') is 'none'
     52PASS computedStyle.getPropertyValue('text-decoration-thickness') is 'auto'
     53PASS computedStyle.getPropertyValue('text-decoration-style') is 'solid'
     54PASS computedStyle.getPropertyValue('text-decoration-color') is 'rgb(0, 0, 0)'
     55PASS checkComputedStyleValue('textDecoration', 'text-decoration') is true
     56
     57Setting CSS3 longhands to values backwards compatibile with CSS2.1 ("text-decoration-line: underline overline line-through blink; text-decoration-thickness: auto; text-decoration-style: solid; text-decoration-color: currentcolor;"):
     58PASS e.style.getPropertyValue('text-decoration') is 'underline overline line-through blink'
     59PASS e.style.getPropertyValue('text-decoration-line') is 'underline overline line-through blink'
     60PASS e.style.getPropertyValue('text-decoration-thickness') is 'auto'
     61PASS e.style.getPropertyValue('text-decoration-style') is 'solid'
     62PASS e.style.getPropertyValue('text-decoration-color') is 'currentcolor'
     63PASS computedStyle.getPropertyValue('text-decoration') is 'underline overline line-through'
     64PASS computedStyle.getPropertyValue('text-decoration-line') is 'underline overline line-through'
     65PASS computedStyle.getPropertyValue('text-decoration-thickness') is 'auto'
     66PASS computedStyle.getPropertyValue('text-decoration-style') is 'solid'
     67PASS computedStyle.getPropertyValue('text-decoration-color') is 'rgb(0, 0, 0)'
     68PASS checkComputedStyleValue('textDecoration', 'text-decoration') is true
     69
     70Setting CSS3 longhands to values not backwards compatibile with CSS2.1 ("text-decoration-line: underline overline line-through blink; text-decoration-thickness: 16px; text-decoration-style: dotted; text-decoration-color: blue;"):
     71PASS e.style.getPropertyValue('text-decoration') is 'underline overline line-through blink'
     72PASS e.style.getPropertyValue('text-decoration-line') is 'underline overline line-through blink'
     73PASS e.style.getPropertyValue('text-decoration-thickness') is '16px'
     74PASS e.style.getPropertyValue('text-decoration-style') is 'dotted'
     75PASS e.style.getPropertyValue('text-decoration-color') is 'blue'
     76PASS computedStyle.getPropertyValue('text-decoration') is 'underline overline line-through'
     77PASS computedStyle.getPropertyValue('text-decoration-line') is 'underline overline line-through'
     78PASS computedStyle.getPropertyValue('text-decoration-thickness') is '16px'
     79PASS computedStyle.getPropertyValue('text-decoration-style') is 'dotted'
     80PASS computedStyle.getPropertyValue('text-decoration-color') is 'rgb(0, 0, 255)'
     81PASS checkComputedStyleValue('textDecoration', 'text-decoration') is true
    3082
    3183PASS successfullyParsed is true

  • trunk/LayoutTests/fast/css3-text/css3-text-decoration/getComputedStyle/getComputedStyle-text-decoration-shorthand.html

    r290772 r291244  
    88            function testElementStyle(propertyJS, propertyCSS, value)
    99            {
    10                 shouldBe("e.style.getPropertyCSSValue('" + propertyCSS + "').cssText", "'" + value + "'");
     10                shouldBe("e.style.getPropertyValue('" + propertyCSS + "')", "'" + value + "'");
    1111            }
    1212
    … …  
    1414            {
    1515                computedStyle = window.getComputedStyle(e, null);
    16                 shouldBe("computedStyle.getPropertyCSSValue('" + propertyCSS + "').cssText", "'" + value + "'");
     16                shouldBe("computedStyle.getPropertyValue('" + propertyCSS + "')", "'" + value + "'");
    1717            }
    1818
    19             function checkComputedStyleValue() {
    20                 var before = window.getComputedStyle(e, null).getPropertyValue('-webkit-text-decoration');
    21                 e.style.webkitTextDecoration = 'none';
    22                 e.style.webkitTextDecoration = before;
    23                 return (window.getComputedStyle(e, null).getPropertyValue('-webkit-text-decoration') == before);
     19            function checkComputedStyleValue(propertyJS, propertyCSS) {
     20                var before = window.getComputedStyle(e, null).getPropertyValue(propertyCSS);
     21                e.style[propertyJS] = 'none';
     22                e.style[propertyJS] = before;
     23                return (window.getComputedStyle(e, null).getPropertyValue(propertyCSS) == before);
    2424            }
    2525
    … …  
    3737            shouldBeNull("e.style.getPropertyCSSValue('-webkit-text-decoration')");
    3838            testComputedStyle("webkitTextDecoration", "-webkit-text-decoration", "none solid rgb(0, 0, 0)");
    39             shouldBe("checkComputedStyleValue()", "true");
     39            shouldBe("checkComputedStyleValue('webkitTextDecoration', '-webkit-text-decoration')", "true");
    4040            debug('');
    4141
    … …  
    4545            testComputedStyle("webkitTextDecorationLine", "-webkit-text-decoration-line", "underline overline line-through");
    4646            testComputedStyle("webkitTextDecoration", "-webkit-text-decoration", "underline overline line-through solid rgb(0, 0, 0)");
    47             shouldBe("checkComputedStyleValue()", "true");
     47            shouldBe("checkComputedStyleValue('webkitTextDecoration', '-webkit-text-decoration')", "true");
    4848            debug('');
    4949
    … …  
    5454            testComputedStyle("webkitTextDecorationStyle", "-webkit-text-decoration-style", "dashed");
    5555            testComputedStyle("webkitTextDecorationColor", "-webkit-text-decoration-color", "rgb(255, 0, 0)");
    56             shouldBe("checkComputedStyleValue()", "true");
     56            shouldBe("checkComputedStyleValue('webkitTextDecoration', '-webkit-text-decoration')", "true");
    5757            debug('');
    5858
    … …  
    6363            testComputedStyle("webkitTextDecorationStyle", "-webkit-text-decoration-style", "dotted");
    6464            testComputedStyle("webkitTextDecorationColor", "-webkit-text-decoration-color", "rgb(0, 0, 128)");
    65             shouldBe("checkComputedStyleValue()", "true");
     65            shouldBe("checkComputedStyleValue('webkitTextDecoration', '-webkit-text-decoration')", "true");
     66            debug('');
     67
     68            debug('CSS2.1 backwards compatibility of non-prefixed shorthand ("text-decoration: underline overline line-through blink;"):');
     69            e.style.cssText = "text-decoration: underline overline line-through blink";
     70            testElementStyle("textDecoration", "text-decoration", "underline overline line-through blink");
     71            testElementStyle("textDecorationLine", "text-decoration-line", "underline overline line-through blink");
     72            testElementStyle("textDecorationThickness", "text-decoration-thickness", "");
     73            testElementStyle("textDecorationStyle", "text-decoration-style", "");
     74            testElementStyle("textDecorationColor", "text-decoration-color", "");
     75            testComputedStyle("textDecoration", "text-decoration", "underline overline line-through");
     76            testComputedStyle("textDecorationLine", "text-decoration-line", "underline overline line-through");
     77            testComputedStyle("textDecorationThickness", "text-decoration-thickness", "auto");
     78            testComputedStyle("textDecorationStyle", "text-decoration-style", "solid");
     79            testComputedStyle("textDecorationColor", "text-decoration-color", "rgb(0, 0, 0)");
     80            shouldBe("checkComputedStyleValue('textDecoration', 'text-decoration')", "true");
     81            debug('');
     82
     83            debug('Setting CSS3 longhands to initial values ("text-decoration-line: none; text-decoration-thickness: auto; text-decoration-style: solid; text-decoration-color: currentcolor;"):');
     84            e.style.cssText = "text-decoration-line: none; text-decoration-thickness: auto; text-decoration-style: solid; text-decoration-color: currentcolor;";
     85            testElementStyle("textDecoration", "text-decoration", "none");
     86            testElementStyle("textDecorationLine", "text-decoration-line", "none");
     87            testElementStyle("textDecorationThickness", "text-decoration-thickness", "auto");
     88            testElementStyle("textDecorationStyle", "text-decoration-style", "solid");
     89            testElementStyle("textDecorationColor", "text-decoration-color", "currentcolor");
     90            testComputedStyle("textDecoration", "text-decoration", "none");
     91            testComputedStyle("textDecorationLine", "text-decoration-line", "none");
     92            testComputedStyle("textDecorationThickness", "text-decoration-thickness", "auto");
     93            testComputedStyle("textDecorationStyle", "text-decoration-style", "solid");
     94            testComputedStyle("textDecorationColor", "text-decoration-color", "rgb(0, 0, 0)");
     95            shouldBe("checkComputedStyleValue('textDecoration', 'text-decoration')", "true");
     96            debug('');
     97
     98            debug('Setting CSS3 longhands to values backwards compatibile with CSS2.1 ("text-decoration-line: underline overline line-through blink; text-decoration-thickness: auto; text-decoration-style: solid; text-decoration-color: currentcolor;"):');
     99            e.style.cssText = "text-decoration-line: underline overline line-through blink; text-decoration-thickness: auto; text-decoration-style: solid; text-decoration-color: currentcolor;";
     100            testElementStyle("textDecoration", "text-decoration", "underline overline line-through blink");
     101            testElementStyle("textDecorationLine", "text-decoration-line", "underline overline line-through blink");
     102            testElementStyle("textDecorationThickness", "text-decoration-thickness", "auto");
     103            testElementStyle("textDecorationStyle", "text-decoration-style", "solid");
     104            testElementStyle("textDecorationColor", "text-decoration-color", "currentcolor");
     105            testComputedStyle("textDecoration", "text-decoration", "underline overline line-through");
     106            testComputedStyle("textDecorationLine", "text-decoration-line", "underline overline line-through");
     107            testComputedStyle("textDecorationThickness", "text-decoration-thickness", "auto");
     108            testComputedStyle("textDecorationStyle", "text-decoration-style", "solid");
     109            testComputedStyle("textDecorationColor", "text-decoration-color", "rgb(0, 0, 0)");
     110            shouldBe("checkComputedStyleValue('textDecoration', 'text-decoration')", "true");
     111            debug('');
     112
     113            debug('Setting CSS3 longhands to values not backwards compatibile with CSS2.1 ("text-decoration-line: underline overline line-through blink; text-decoration-thickness: 16px; text-decoration-style: dotted; text-decoration-color: blue;"):');
     114            e.style.cssText = "text-decoration-line: underline overline line-through blink; text-decoration-thickness: 16px; text-decoration-style: dotted; text-decoration-color: blue;";
     115            testElementStyle("textDecoration", "text-decoration", "underline overline line-through blink");
     116            testElementStyle("textDecorationLine", "text-decoration-line", "underline overline line-through blink");
     117            testElementStyle("textDecorationThickness", "text-decoration-thickness", "16px");
     118            testElementStyle("textDecorationStyle", "text-decoration-style", "dotted");
     119            testElementStyle("textDecorationColor", "text-decoration-color", "blue");
     120            testComputedStyle("textDecoration", "text-decoration", "underline overline line-through");
     121            testComputedStyle("textDecorationLine", "text-decoration-line", "underline overline line-through");
     122            testComputedStyle("textDecorationThickness", "text-decoration-thickness", "16px");
     123            testComputedStyle("textDecorationStyle", "text-decoration-style", "dotted");
     124            testComputedStyle("textDecorationColor", "text-decoration-color", "rgb(0, 0, 255)");
     125            shouldBe("checkComputedStyleValue('textDecoration', 'text-decoration')", "true");
    66126            debug('');
    67127

  • trunk/LayoutTests/svg/css/getComputedStyle-basic-expected.txt

    r290772 r291244  
    345345rect: style.getPropertyValue(text-combine-upright) : none
    346346rect: style.getPropertyCSSValue(text-combine-upright) : [object CSSPrimitiveValue]
    347 rect: style.getPropertyValue(text-decoration) : none
    348 rect: style.getPropertyCSSValue(text-decoration) : [object CSSPrimitiveValue]
     347rect: style.getPropertyValue(text-decoration-color) : rgb(0, 0, 0)
     348rect: style.getPropertyCSSValue(text-decoration-color) : [object CSSPrimitiveValue]
     349rect: style.getPropertyValue(text-decoration-line) : none
     350rect: style.getPropertyCSSValue(text-decoration-line) : [object CSSPrimitiveValue]
     351rect: style.getPropertyValue(text-decoration-style) : solid
     352rect: style.getPropertyCSSValue(text-decoration-style) : [object CSSPrimitiveValue]
     353rect: style.getPropertyValue(text-decoration-thickness) : auto
     354rect: style.getPropertyCSSValue(text-decoration-thickness) : [object CSSPrimitiveValue]
    349355rect: style.getPropertyValue(text-emphasis-color) : rgb(0, 0, 0)
    350356rect: style.getPropertyCSSValue(text-emphasis-color) : [object CSSPrimitiveValue]
    … …  
    855861g: style.getPropertyValue(text-combine-upright) : none
    856862g: style.getPropertyCSSValue(text-combine-upright) : [object CSSPrimitiveValue]
    857 g: style.getPropertyValue(text-decoration) : none
    858 g: style.getPropertyCSSValue(text-decoration) : [object CSSPrimitiveValue]
     863g: style.getPropertyValue(text-decoration-color) : rgb(0, 0, 0)
     864g: style.getPropertyCSSValue(text-decoration-color) : [object CSSPrimitiveValue]
     865g: style.getPropertyValue(text-decoration-line) : none
     866g: style.getPropertyCSSValue(text-decoration-line) : [object CSSPrimitiveValue]
     867g: style.getPropertyValue(text-decoration-style) : solid
     868g: style.getPropertyCSSValue(text-decoration-style) : [object CSSPrimitiveValue]
     869g: style.getPropertyValue(text-decoration-thickness) : auto
     870g: style.getPropertyCSSValue(text-decoration-thickness) : [object CSSPrimitiveValue]
    859871g: style.getPropertyValue(text-emphasis-color) : rgb(0, 0, 0)
    860872g: style.getPropertyCSSValue(text-emphasis-color) : [object CSSPrimitiveValue]

  • trunk/Source/WebCore/ChangeLog

    r291241 r291244  
     12022-03-14  Oriol Brufau  <obrufau@igalia.com>
     2
     3        [css] Implement 'text-decoration' as a shorthand.
     4        https://bugs.webkit.org/show_bug.cgi?id=237175
     5
     6        Reviewed by Darin Adler.
     7
     8        The 'text-decoration' property was considered to be a longhand, sharing
     9        a computed value with 'text-decoration-line'.
     10
     11        This patch switches 'text-decoration' to be shorthand instead.
     12        According to the CSS Text Decoration spec, the longhands should be
     13        'text-decoration-line', 'text-decoration-thickness',
     14        'text-decoration-style' and 'text-decoration-color'.
     15        I tried that in https://commits.webkit.org/r290756, but it got reverted
     16        because of a performance regression. So as a first step, here I'm making
     17        'text-decoration-line' be the only longhand.
     18
     19        There is a bunch of editing code that was getting/setting/removing
     20        'text-decoration' as a longhand, so I'm switching that to instead
     21        use 'text-decoration-line'.
     22
     23        Tests: fast/css/getComputedStyle/computed-style.html
     24               fast/css/getComputedStyle/computed-style-without-renderer.html
     25               fast/css/getComputedStyle/getComputedStyle-text-decoration.html
     26               fast/css3-text/css3-text-decoration/getComputedStyle/getComputedStyle-text-decoration-shorthand.html
     27               imported/w3c/web-platform-tests/css/css-cascade/all-prop-initial-xml.html
     28               imported/w3c/web-platform-tests/css/css-variables/variable-presentation-attribute.html
     29               imported/w3c/web-platform-tests/css/cssom/getComputedStyle-detached-subtree.html
     30               svg/css/getComputedStyle-basic.xhtml
     31
     32        * css/CSSProperties.json:
     33        * css/StyleProperties.cpp:
     34        (WebCore::StyleProperties::getPropertyValue const):
     35        (WebCore::StyleProperties::asText const):
     36        * css/parser/CSSPropertyParser.cpp:
     37        (WebCore::CSSPropertyParser::parseSingleValue):
     38        (WebCore::CSSPropertyParser::parseShorthand):
     39        * editing/EditingStyle.cpp:
     40        (WebCore::HTMLTextDecorationEquivalent::HTMLTextDecorationEquivalent):
     41        (WebCore::EditingStyle::init):
     42        (WebCore::EditingStyle::styleWithResolvedTextDecorations const):
     43        (WebCore::EditingStyle::collapseTextDecorationProperties):
     44        (WebCore::textDecorationValueList):
     45        (WebCore::EditingStyle::conflictsWithInlineStyleOfElement const):
     46        (WebCore::EditingStyle::styleIsPresentInComputedStyleOfNode const):
     47        (WebCore::EditingStyle::mergeStyle):
     48        (WebCore::reconcileTextDecorationProperties):
     49        (WebCore::StyleChange::StyleChange):
     50        (WebCore::StyleChange::extractTextStyles):
     51        (WebCore::extractPropertiesNotIn):
     52        * editing/cocoa/HTMLConverter.mm:
     53        (HTMLConverterCaches::propertyValueForNode):
     54        (HTMLConverter::computedAttributesForElement):
     55        * editing/ios/EditorIOS.mm:
     56        (WebCore::Editor::removeUnchangeableStyles):
     57        * editing/markup.cpp:
     58        (WebCore::serializePreservingVisualAppearanceInternal):
     59        * style/PropertyAllowlist.cpp:
     60        (WebCore::Style::isValidCueStyleProperty):
     61
    1622022-03-14  Tim Nguyen  <ntim@apple.com>
    263

  • trunk/Source/WebCore/css/CSSProperties.json

    r290884 r291244  
    46164616        },
    46174617        "text-decoration": {
    4618             "values": [
    4619                 "underline",
    4620                 "overline",
    4621                 "line-through",
    4622                 {
    4623                     "value": "blink",
    4624                     "status": "not considering"
    4625                 }
    4626             ],
    4627             "codegen-properties": {
    4628                 "converter": "TextDecoration"
     4618            "codegen-properties": {
     4619                "longhands": [
     4620                    "text-decoration-line"
     4621                ]
    46294622            },
    46304623            "specification": {
    … …  
    68556848                ]
    68566849            },
     6850            "values": [
     6851                "underline",
     6852                "overline",
     6853                "line-through",
     6854                {
     6855                    "value": "blink",
     6856                    "status": "not considering"
     6857                }
     6858            ],
    68576859            "specification": {
    68586860                "category": "css-text-decor",

  • trunk/Source/WebCore/css/StyleProperties.cpp

    r290772 r291244  
    276276    case CSSPropertyFontVariant:
    277277        return fontVariantValue();
     278    case CSSPropertyTextDecoration:
     279        if (auto line = getPropertyCSSValue(CSSPropertyTextDecorationLine))
     280            return line->cssText();
     281        return String();
     282    case CSSPropertyWebkitTextDecoration:
     283        return getShorthandValue(webkitTextDecorationShorthand());
    278284    case CSSPropertyTextDecorationSkip:
    279285        return textDecorationSkipValue();
    … …  
    14341440                shorthandPropertyID = CSSPropertyScrollPaddingInline;
    14351441                break;
     1442            case CSSPropertyTextDecorationLine:
     1443                shorthandPropertyID = CSSPropertyTextDecoration;
     1444                break;
    14361445            case CSSPropertyTransitionProperty:
    14371446            case CSSPropertyTransitionDuration:

  • trunk/Source/WebCore/css/parser/CSSPropertyParser.cpp

    r290884 r291244  
    44744474            return nullptr;
    44754475        return consumeFilter(m_range, m_context, AllowedFilterFunctions::ColorFilters);
    4476     case CSSPropertyTextDecoration:
    44774476    case CSSPropertyWebkitTextDecorationsInEffect:
    44784477    case CSSPropertyTextDecorationLine:
    … …  
    62866285    case CSSPropertyTransition:
    62876286        return consumeAnimationShorthand(transitionShorthandForParsing(), important);
    6288     case CSSPropertyTextDecoration:
     6287    case CSSPropertyTextDecoration: {
     6288        auto line = consumeTextDecorationLine(m_range);
     6289        if (!line || !m_range.atEnd())
     6290            return false;
     6291        addProperty(CSSPropertyTextDecorationLine, property, line.releaseNonNull(), important);
     6292        return true;
     6293    }
    62896294    case CSSPropertyWebkitTextDecoration:
    62906295        // FIXME-NEWPARSER: We need to unprefix -line/-style/-color ASAP and get rid

  • trunk/Source/WebCore/editing/EditingStyle.cpp

    r290772 r291244  
    9595    // Non-inheritable properties
    9696    CSSPropertyBackgroundColor,
    97     CSSPropertyTextDecoration,
     97    CSSPropertyTextDecorationLine,
    9898};
    9999
    … …  
    221221public:
    222222    HTMLTextDecorationEquivalent(CSSValueID primitiveValue, const QualifiedName& tagName)
    223         : HTMLElementEquivalent(CSSPropertyTextDecoration, primitiveValue, tagName)
     223        : HTMLElementEquivalent(CSSPropertyTextDecorationLine, primitiveValue, tagName)
    224224        , m_isUnderline(primitiveValue == CSSValueUnderline)
    225225    {
    … …  
    236236        auto& mutableStyle = *style.m_mutableStyle;
    237237        return mutableStyle.getPropertyCSSValue(CSSPropertyWebkitTextDecorationsInEffect)
    238             || mutableStyle.getPropertyCSSValue(CSSPropertyTextDecoration);
     238            || mutableStyle.getPropertyCSSValue(CSSPropertyTextDecorationLine);
    239239    }
    240240
    … …  
    248248        RefPtr<CSSValue> styleValue = style.m_mutableStyle->getPropertyCSSValue(CSSPropertyWebkitTextDecorationsInEffect);
    249249        if (!styleValue)
    250             styleValue = style.m_mutableStyle->getPropertyCSSValue(CSSPropertyTextDecoration);
     250            styleValue = style.m_mutableStyle->getPropertyCSSValue(CSSPropertyTextDecorationLine);
    251251        return is<CSSValueList>(styleValue) && downcast<CSSValueList>(*styleValue).hasValue(m_primitiveValue.get());
    252252    }
    … …  
    511511            m_mutableStyle->setProperty(CSSPropertyBackgroundColor, value->cssText());
    512512        if (RefPtr<CSSValue> value = computedStyleAtPosition.propertyValue(CSSPropertyWebkitTextDecorationsInEffect)) {
    513             m_mutableStyle->setProperty(CSSPropertyTextDecoration, value->cssText());
     513            m_mutableStyle->setProperty(CSSPropertyTextDecorationLine, value->cssText());
    514514            m_mutableStyle->removeProperty(CSSPropertyWebkitTextDecorationsInEffect);
    515515        }
    … …  
    596596
    597597    if (valueList->length())
    598         style->setProperty(CSSPropertyTextDecoration, valueList.ptr());
     598        style->setProperty(CSSPropertyTextDecorationLine, valueList.ptr());
    599599    else
    600         style->setProperty(CSSPropertyTextDecoration, CSSValuePool::singleton().createIdentifierValue(CSSValueNone));
     600        style->setProperty(CSSPropertyTextDecorationLine, CSSValuePool::singleton().createIdentifierValue(CSSValueNone));
    601601
    602602    return style;
    … …  
    780780
    781781    if (textDecorationsInEffect->isValueList())
    782         m_mutableStyle->setProperty(CSSPropertyTextDecoration, textDecorationsInEffect->cssText(), m_mutableStyle->propertyIsImportant(CSSPropertyTextDecoration));
     782        m_mutableStyle->setProperty(CSSPropertyTextDecorationLine, textDecorationsInEffect->cssText(), m_mutableStyle->propertyIsImportant(CSSPropertyTextDecorationLine));
    783783    else
    784         m_mutableStyle->removeProperty(CSSPropertyTextDecoration);
     784        m_mutableStyle->removeProperty(CSSPropertyTextDecorationLine);
    785785    m_mutableStyle->removeProperty(CSSPropertyWebkitTextDecorationsInEffect);
    786786}
    … …  
    788788// CSS properties that create a visual difference only when applied to text.
    789789static const CSSPropertyID textOnlyProperties[] = {
    790     CSSPropertyTextDecoration,
     790    CSSPropertyTextDecorationLine,
    791791    CSSPropertyWebkitTextDecorationsInEffect,
    792792    CSSPropertyFontStyle,
    … …  
    853853static RefPtr<CSSValueList> textDecorationValueList(const StyleProperties& properties)
    854854{
    855     RefPtr<CSSValue> value = properties.getPropertyCSSValue(CSSPropertyTextDecoration);
     855    RefPtr<CSSValue> value = properties.getPropertyCSSValue(CSSPropertyTextDecorationLine);
    856856    if (!is<CSSValueList>(value))
    857857        return nullptr;
    … …  
    897897                conflicts = true;
    898898                if (newValueList->length())
    899                     newInlineStyle->setProperty(CSSPropertyTextDecoration, WTFMove(newValueList));
     899                    newInlineStyle->setProperty(CSSPropertyTextDecorationLine, WTFMove(newValueList));
    900900                else
    901                     newInlineStyle->removeProperty(CSSPropertyTextDecoration);
     901                    newInlineStyle->removeProperty(CSSPropertyTextDecorationLine);
    902902
    903903                if (extractedStyle) {
    904                     bool isImportant = inlineStyle->propertyIsImportant(CSSPropertyTextDecoration);
    905                     extractedStyle->setProperty(CSSPropertyTextDecoration, extractedValueList->cssText(), isImportant);
     904                    bool isImportant = inlineStyle->propertyIsImportant(CSSPropertyTextDecorationLine);
     905                    extractedStyle->setProperty(CSSPropertyTextDecorationLine, extractedValueList->cssText(), isImportant);
    906906                }
    907907            }
    … …  
    917917            continue;
    918918
    919         if (propertyID == CSSPropertyWebkitTextDecorationsInEffect && inlineStyle->getPropertyCSSValue(CSSPropertyTextDecoration)) {
     919        if (propertyID == CSSPropertyWebkitTextDecorationsInEffect && inlineStyle->getPropertyCSSValue(CSSPropertyTextDecorationLine)) {
    920920            if (!newInlineStyle)
    921921                return true;
    922922            conflicts = true;
    923             newInlineStyle->removeProperty(CSSPropertyTextDecoration);
     923            newInlineStyle->removeProperty(CSSPropertyTextDecorationLine);
    924924            if (extractedStyle)
    925                 extractedStyle->setProperty(CSSPropertyTextDecoration, inlineStyle->getPropertyValue(CSSPropertyTextDecoration), inlineStyle->propertyIsImportant(CSSPropertyTextDecoration));
     925                extractedStyle->setProperty(CSSPropertyTextDecorationLine, inlineStyle->getPropertyValue(CSSPropertyTextDecorationLine), inlineStyle->propertyIsImportant(CSSPropertyTextDecorationLine));
    926926        }
    927927
    … …  
    10501050        bool hasUnderline = false;
    10511051        bool hasLineThrough = false;
    1052         if (RefPtr<CSSValue> value = computedStyle.propertyValue(CSSPropertyTextDecoration)) {
     1052        if (RefPtr<CSSValue> value = computedStyle.propertyValue(CSSPropertyTextDecorationLine)) {
    10531053            if (value->isValueList()) {
    10541054                auto& cssValuePool = CSSValuePool::singleton();
    … …  
    12841284
    12851285        // text decorations never override values.
    1286         if ((property.id() == CSSPropertyTextDecoration || property.id() == CSSPropertyWebkitTextDecorationsInEffect)
     1286        if ((property.id() == CSSPropertyTextDecorationLine || property.id() == CSSPropertyWebkitTextDecorationsInEffect)
    12871287            && is<CSSValueList>(*property.value()) && value) {
    12881288            if (is<CSSValueList>(*value)) {
    … …  
    16891689{   
    16901690    RefPtr<CSSValue> textDecorationsInEffect = style->getPropertyCSSValue(CSSPropertyWebkitTextDecorationsInEffect);
    1691     RefPtr<CSSValue> textDecoration = style->getPropertyCSSValue(CSSPropertyTextDecoration);
     1691    RefPtr<CSSValue> textDecoration = style->getPropertyCSSValue(CSSPropertyTextDecorationLine);
    16921692    // We shouldn't have both text-decoration and -webkit-text-decorations-in-effect because that wouldn't make sense.
    16931693    ASSERT(!textDecorationsInEffect || !textDecoration);
    16941694    if (textDecorationsInEffect) {
    1695         style->setProperty(CSSPropertyTextDecoration, textDecorationsInEffect->cssText());
     1695        style->setProperty(CSSPropertyTextDecorationLine, textDecorationsInEffect->cssText());
    16961696        style->removeProperty(CSSPropertyWebkitTextDecorationsInEffect);
    16971697        textDecoration = textDecorationsInEffect;
    … …  
    17001700    // If text-decoration is set to "none", remove the property because we don't want to add redundant "text-decoration: none".
    17011701    if (textDecoration && !textDecoration->isValueList())
    1702         style->removeProperty(CSSPropertyTextDecoration);
     1702        style->removeProperty(CSSPropertyTextDecorationLine);
    17031703}
    17041704
    … …  
    17351735        RefPtr<CSSValue> value = computedStyle.propertyValue(CSSPropertyWebkitTextDecorationsInEffect);
    17361736        if (!is<CSSValueList>(value))
    1737             value = computedStyle.propertyValue(CSSPropertyTextDecoration);
     1737            value = computedStyle.propertyValue(CSSPropertyTextDecorationLine);
    17381738
    17391739        RefPtr<CSSValueList> valueList;
    … …  
    17541754            if (shouldAddStrikeThrough && !hasLineThrough)
    17551755                valueList->append(WTFMove(lineThrough));
    1756             mutableStyle->setProperty(CSSPropertyTextDecoration, valueList.get());
     1756            mutableStyle->setProperty(CSSPropertyTextDecorationLine, valueList.get());
    17571757        } else {
    17581758            m_applyUnderline = shouldAddUnderline && !hasUnderline;
    … …  
    18161816    // Assuming reconcileTextDecorationProperties has been called, there should not be -webkit-text-decorations-in-effect
    18171817    // Furthermore, text-decoration: none has been trimmed so that text-decoration property is always a CSSValueList.
    1818     RefPtr<CSSValue> textDecoration = style.getPropertyCSSValue(CSSPropertyTextDecoration);
     1818    RefPtr<CSSValue> textDecoration = style.getPropertyCSSValue(CSSPropertyTextDecorationLine);
    18191819    if (is<CSSValueList>(textDecoration)) {
    18201820        auto& cssValuePool = CSSValuePool::singleton();
    … …  
    18291829
    18301830        // If trimTextDecorations, delete underline and line-through
    1831         setTextDecorationProperty(style, newTextDecoration.get(), CSSPropertyTextDecoration);
     1831        setTextDecorationProperty(style, newTextDecoration.get(), CSSPropertyTextDecorationLine);
    18321832    }
    18331833
    … …  
    18981898
    18991899    RefPtr<CSSValue> baseTextDecorationsInEffect = extractPropertyValue(baseStyle, CSSPropertyWebkitTextDecorationsInEffect);
    1900     diffTextDecorations(mutableStyle, CSSPropertyTextDecoration, baseTextDecorationsInEffect.get());
     1900    diffTextDecorations(mutableStyle, CSSPropertyTextDecorationLine, baseTextDecorationsInEffect.get());
    19011901    diffTextDecorations(mutableStyle, CSSPropertyWebkitTextDecorationsInEffect, baseTextDecorationsInEffect.get());
    19021902

  • trunk/Source/WebCore/editing/cocoa/HTMLConverter.mm

    r290772 r291244  
    642642        inherit = true;
    643643        break;
    644     case CSSPropertyTextDecoration:
     644    case CSSPropertyTextDecorationLine:
    645645        if (element.hasTagName(uTag) || element.hasTagName(insTag))
    646646            return "underline";
    … …  
    10381038    }
    10391039
    1040     String textDecoration = _caches->propertyValueForNode(element, CSSPropertyTextDecoration);
     1040    String textDecoration = _caches->propertyValueForNode(element, CSSPropertyTextDecorationLine);
    10411041    if (textDecoration.length()) {
    10421042        if (textDecoration.contains("underline"))

  • trunk/Source/WebCore/editing/ios/EditorIOS.mm

    r290005 r291244  
    160160    defaultStyle->removeProperty(CSSPropertyFontVariantCaps);
    161161    // FIXME: we should handle also pasted quoted text, strikethrough, etc. <rdar://problem/9255115>
    162     defaultStyle->removeProperty(CSSPropertyTextDecoration);
     162    defaultStyle->removeProperty(CSSPropertyTextDecorationLine);
    163163    defaultStyle->removeProperty(CSSPropertyWebkitTextDecorationsInEffect); // implements underline
    164164

  • trunk/Source/WebCore/editing/markup.cpp

    r290772 r291244  
    936936                    // This assertion is caused at least when we select all text of a <body> element whose
    937937                    // 'text-decoration' property is "inherit", and copy it.
    938                     if (!propertyMissingOrEqualToNone(fullySelectedRootStyle->style(), CSSPropertyTextDecoration))
    939                         fullySelectedRootStyle->style()->setProperty(CSSPropertyTextDecoration, CSSValueNone);
     938                    if (!propertyMissingOrEqualToNone(fullySelectedRootStyle->style(), CSSPropertyTextDecorationLine))
     939                        fullySelectedRootStyle->style()->setProperty(CSSPropertyTextDecorationLine, CSSValueNone);
    940940                    if (!propertyMissingOrEqualToNone(fullySelectedRootStyle->style(), CSSPropertyWebkitTextDecorationsInEffect))
    941941                        fullySelectedRootStyle->style()->setProperty(CSSPropertyWebkitTextDecorationsInEffect, CSSValueNone);

  • trunk/Source/WebCore/style/PropertyAllowlist.cpp

    r291037 r291244  
    134134    case CSSPropertyVisibility:
    135135    case CSSPropertyWhiteSpace:
    136     case CSSPropertyTextDecoration:
     136    case CSSPropertyTextDecorationLine:
    137137    case CSSPropertyTextShadow:
    138138    case CSSPropertyBorderStyle:
Note: See TracChangeset for help on using the changeset viewer.