Changeset 169406 in webkit


Ignore:
Timestamp:
May 27, 2014 5:28:52 PM (10 years ago)
Author:
zoltan@webkit.org
Message:

[CSS Shapes] serialization of the computed value should omit the default radii
​https://bugs.webkit.org/show_bug.cgi?id=132747

Reviewed by Darin Adler.

Source/WebCore:
We should omit closest-side value, whereever is possible. Specification:
​http://www.w3.org/TR/2014/CR-css-shapes-1-20140320/#basic-shape-computed-values
This change aligns the behavior to the specification.

Added new test cases for the shape-outside parsing tests.

  • css/CSSBasicShapes.cpp:

(WebCore::buildCircleString):
(WebCore::CSSBasicShapeCircle::cssText):
(WebCore::CSSBasicShapeEllipse::cssText):

LayoutTests:

  • fast/shapes/parsing/parsing-shape-outside-expected.txt:
  • fast/shapes/parsing/parsing-test-utils.js:
Location:
trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r169404 r169406  
     12014-05-27  Zoltan Horvath  <zoltan@webkit.org>
     2
     3        [CSS Shapes] serialization of the computed value should omit the default radii
     4        https://bugs.webkit.org/show_bug.cgi?id=132747
     5
     6        Reviewed by Darin Adler.
     7
     8        * fast/shapes/parsing/parsing-shape-outside-expected.txt:
     9        * fast/shapes/parsing/parsing-test-utils.js:
     10
    1112014-05-27  Alex Christensen  <achristensen@webkit.org>
    212

  • trunk/LayoutTests/fast/shapes/parsing/parsing-shape-outside-expected.txt

    r167936 r169406  
    7171PASS getComputedStyleValue("-webkit-shape-outside", "inset(10px 10px 10px 10px round calc(25%*3 - 10in))") is "inset(10px round calc(75% - 960px))"
    7272PASS getCSSText("-webkit-shape-outside", "circle()") is "circle(at 50% 50%)"
    73 PASS getComputedStyleValue("-webkit-shape-outside", "circle()") is "circle(closest-side at 50% 50%)"
     73PASS getComputedStyleValue("-webkit-shape-outside", "circle()") is "circle(at 50% 50%)"
    7474PASS getCSSText("-webkit-shape-outside", "circle(farthest-side)") is "circle(farthest-side at 50% 50%)"
    7575PASS getComputedStyleValue("-webkit-shape-outside", "circle(farthest-side)") is "circle(farthest-side at 50% 50%)"
    76 PASS getCSSText("-webkit-shape-outside", "circle(closest-side)") is "circle(closest-side at 50% 50%)"
    77 PASS getComputedStyleValue("-webkit-shape-outside", "circle(closest-side)") is "circle(closest-side at 50% 50%)"
     76PASS getCSSText("-webkit-shape-outside", "circle()") is "circle(at 50% 50%)"
     77PASS getComputedStyleValue("-webkit-shape-outside", "circle()") is "circle(at 50% 50%)"
     78PASS getCSSText("-webkit-shape-outside", "circle(closest-side at 50px 50px)") is "circle(at 50px 50px)"
     79PASS getComputedStyleValue("-webkit-shape-outside", "circle(closest-side at 50px 50px)") is "circle(at 50px 50px)"
    7880PASS getCSSText("-webkit-shape-outside", "circle(10px)") is "circle(10px at 50% 50%)"
    7981PASS getComputedStyleValue("-webkit-shape-outside", "circle(10px)") is "circle(10px at 50% 50%)"
    … …  
    8385PASS getComputedStyleValue("-webkit-shape-outside", "circle(10px at 10px 10px)") is "circle(10px at 10px 10px)"
    8486PASS getCSSText("-webkit-shape-outside", "circle(at 10px)") is "circle(at 10px 50%)"
    85 PASS getComputedStyleValue("-webkit-shape-outside", "circle(at 10px)") is "circle(closest-side at 10px 50%)"
     87PASS getComputedStyleValue("-webkit-shape-outside", "circle(at 10px)") is "circle(at 10px 50%)"
    8688PASS getCSSText("-webkit-shape-outside", "circle(at 10px 10px)") is "circle(at 10px 10px)"
    87 PASS getComputedStyleValue("-webkit-shape-outside", "circle(at 10px 10px)") is "circle(closest-side at 10px 10px)"
     89PASS getComputedStyleValue("-webkit-shape-outside", "circle(at 10px 10px)") is "circle(at 10px 10px)"
    8890PASS getCSSText("-webkit-shape-outside", "circle(at top left)") is "circle(at 0% 0%)"
    89 PASS getComputedStyleValue("-webkit-shape-outside", "circle(at top left)") is "circle(closest-side at 0% 0%)"
     91PASS getComputedStyleValue("-webkit-shape-outside", "circle(at top left)") is "circle(at 0% 0%)"
    9092PASS getCSSText("-webkit-shape-outside", "circle(at right bottom)") is "circle(at 100% 100%)"
    91 PASS getComputedStyleValue("-webkit-shape-outside", "circle(at right bottom)") is "circle(closest-side at 100% 100%)"
     93PASS getComputedStyleValue("-webkit-shape-outside", "circle(at right bottom)") is "circle(at 100% 100%)"
    9294PASS getCSSText("-webkit-shape-outside", "circle(10px at left top 10px)") is "circle(10px at 0% 10px)"
    9395PASS getComputedStyleValue("-webkit-shape-outside", "circle(10px at left top 10px)") is "circle(10px at 0% 10px)"
    … …  
    101103PASS getComputedStyleValue("-webkit-shape-outside", "circle(10px at right 10px bottom 10px)") is "circle(10px at right 10px bottom 10px)"
    102104PASS getCSSText("-webkit-shape-outside", "ellipse()") is "ellipse(at 50% 50%)"
    103 PASS getComputedStyleValue("-webkit-shape-outside", "ellipse()") is "ellipse(closest-side closest-side at 50% 50%)"
     105PASS getComputedStyleValue("-webkit-shape-outside", "ellipse()") is "ellipse(at 50% 50%)"
    104106PASS getCSSText("-webkit-shape-outside", "ellipse(10px)") is "ellipse(10px at 50% 50%)"
    105 PASS getComputedStyleValue("-webkit-shape-outside", "ellipse(10px)") is "ellipse(10px closest-side at 50% 50%)"
     107PASS getComputedStyleValue("-webkit-shape-outside", "ellipse(10px)") is "ellipse(10px at 50% 50%)"
    106108PASS getCSSText("-webkit-shape-outside", "ellipse(10px 20px)") is "ellipse(10px 20px at 50% 50%)"
    107109PASS getComputedStyleValue("-webkit-shape-outside", "ellipse(10px 20px)") is "ellipse(10px 20px at 50% 50%)"
    108110PASS getCSSText("-webkit-shape-outside", "ellipse(10px at 10px)") is "ellipse(10px at 10px 50%)"
    109 PASS getComputedStyleValue("-webkit-shape-outside", "ellipse(10px at 10px)") is "ellipse(10px closest-side at 10px 50%)"
     111PASS getComputedStyleValue("-webkit-shape-outside", "ellipse(10px at 10px)") is "ellipse(10px at 10px 50%)"
    110112PASS getCSSText("-webkit-shape-outside", "ellipse(10px 20px at 10px)") is "ellipse(10px 20px at 10px 50%)"
    111113PASS getComputedStyleValue("-webkit-shape-outside", "ellipse(10px 20px at 10px)") is "ellipse(10px 20px at 10px 50%)"
    112114PASS getCSSText("-webkit-shape-outside", "ellipse(10px at 10px 10px)") is "ellipse(10px at 10px 10px)"
    113 PASS getComputedStyleValue("-webkit-shape-outside", "ellipse(10px at 10px 10px)") is "ellipse(10px closest-side at 10px 10px)"
     115PASS getComputedStyleValue("-webkit-shape-outside", "ellipse(10px at 10px 10px)") is "ellipse(10px at 10px 10px)"
    114116PASS getCSSText("-webkit-shape-outside", "ellipse(at 10px)") is "ellipse(at 10px 50%)"
    115 PASS getComputedStyleValue("-webkit-shape-outside", "ellipse(at 10px)") is "ellipse(closest-side closest-side at 10px 50%)"
     117PASS getComputedStyleValue("-webkit-shape-outside", "ellipse(at 10px)") is "ellipse(at 10px 50%)"
    116118PASS getCSSText("-webkit-shape-outside", "ellipse(at 10px 10px)") is "ellipse(at 10px 10px)"
    117 PASS getComputedStyleValue("-webkit-shape-outside", "ellipse(at 10px 10px)") is "ellipse(closest-side closest-side at 10px 10px)"
     119PASS getComputedStyleValue("-webkit-shape-outside", "ellipse(at 10px 10px)") is "ellipse(at 10px 10px)"
    118120PASS getCSSText("-webkit-shape-outside", "ellipse(at top left)") is "ellipse(at 0% 0%)"
    119 PASS getComputedStyleValue("-webkit-shape-outside", "ellipse(at top left)") is "ellipse(closest-side closest-side at 0% 0%)"
     121PASS getComputedStyleValue("-webkit-shape-outside", "ellipse(at top left)") is "ellipse(at 0% 0%)"
    120122PASS getCSSText("-webkit-shape-outside", "ellipse(at right bottom)") is "ellipse(at 100% 100%)"
    121 PASS getComputedStyleValue("-webkit-shape-outside", "ellipse(at right bottom)") is "ellipse(closest-side closest-side at 100% 100%)"
     123PASS getComputedStyleValue("-webkit-shape-outside", "ellipse(at right bottom)") is "ellipse(at 100% 100%)"
    122124PASS getCSSText("-webkit-shape-outside", "ellipse(10px at left top 10px)") is "ellipse(10px at 0% 10px)"
    123 PASS getComputedStyleValue("-webkit-shape-outside", "ellipse(10px at left top 10px)") is "ellipse(10px closest-side at 0% 10px)"
     125PASS getComputedStyleValue("-webkit-shape-outside", "ellipse(10px at left top 10px)") is "ellipse(10px at 0% 10px)"
    124126PASS getCSSText("-webkit-shape-outside", "ellipse(10px at top 10px left 10px)") is "ellipse(10px at 10px 10px)"
    125 PASS getComputedStyleValue("-webkit-shape-outside", "ellipse(10px at top 10px left 10px)") is "ellipse(10px closest-side at 10px 10px)"
     127PASS getComputedStyleValue("-webkit-shape-outside", "ellipse(10px at top 10px left 10px)") is "ellipse(10px at 10px 10px)"
    126128PASS getCSSText("-webkit-shape-outside", "ellipse(10px at right 10px bottom 10px)") is "ellipse(10px at right 10px bottom 10px)"
    127 PASS getComputedStyleValue("-webkit-shape-outside", "ellipse(10px at right 10px bottom 10px)") is "ellipse(10px closest-side at right 10px bottom 10px)"
     129PASS getComputedStyleValue("-webkit-shape-outside", "ellipse(10px at right 10px bottom 10px)") is "ellipse(10px at right 10px bottom 10px)"
    128130PASS getCSSText("-webkit-shape-outside", "ellipse(10px 20px at left top 10px)") is "ellipse(10px 20px at 0% 10px)"
    129131PASS getComputedStyleValue("-webkit-shape-outside", "ellipse(10px 20px at left top 10px)") is "ellipse(10px 20px at 0% 10px)"
    … …  
    136138PASS getCSSText("-webkit-shape-outside", "ellipse(10px 10px at right 0px bottom 0px)") is "ellipse(10px 10px at 100% 100%)"
    137139PASS getComputedStyleValue("-webkit-shape-outside", "ellipse(10px 10px at right 0px bottom 0px)") is "ellipse(10px 10px at 100% 100%)"
     140PASS getCSSText("-webkit-shape-outside", "ellipse(closest-side closest-side at 50px 50px)") is "ellipse(at 50px 50px)"
     141PASS getComputedStyleValue("-webkit-shape-outside", "ellipse(closest-side closest-side at 50px 50px)") is "ellipse(at 50px 50px)"
     142PASS getCSSText("-webkit-shape-outside", "ellipse(farthest-side farthest-side at 50px 50px)") is "ellipse(farthest-side farthest-side at 50px 50px)"
     143PASS getComputedStyleValue("-webkit-shape-outside", "ellipse(farthest-side farthest-side at 50px 50px)") is "ellipse(farthest-side farthest-side at 50px 50px)"
     144PASS getCSSText("-webkit-shape-outside", "ellipse(closest-side farthest-side at 50px 50px)") is "ellipse(closest-side farthest-side at 50px 50px)"
     145PASS getComputedStyleValue("-webkit-shape-outside", "ellipse(closest-side farthest-side at 50px 50px)") is "ellipse(closest-side farthest-side at 50px 50px)"
     146PASS getCSSText("-webkit-shape-outside", "ellipse(farthest-side closest-side at 50px 50px)") is "ellipse(farthest-side at 50px 50px)"
     147PASS getComputedStyleValue("-webkit-shape-outside", "ellipse(farthest-side closest-side at 50px 50px)") is "ellipse(farthest-side at 50px 50px)"
    138148PASS getCSSText("-webkit-shape-outside", "polygon(10px 20px, 30px 40px, 40px 50px)") is "polygon(10px 20px, 30px 40px, 40px 50px)"
    139149PASS getComputedStyleValue("-webkit-shape-outside", "polygon(10px 20px, 30px 40px, 40px 50px)") is "polygon(10px 20px, 30px 40px, 40px 50px)"

  • trunk/LayoutTests/fast/shapes/parsing/parsing-test-utils.js

    r167936 r169406  
    4242    ["inset(10px 10px 10px 10px round calc(25%*3 - 10in))", "inset(10px round calc(75% - 10in))", "inset(10px round calc(75% - 960px))"],
    4343
    44     ["circle()", "circle(at 50% 50%)", "circle(closest-side at 50% 50%)"],
     44    ["circle()", "circle(at 50% 50%)", "circle(at 50% 50%)"],
    4545    ["circle(farthest-side)", "circle(farthest-side at 50% 50%)", "circle(farthest-side at 50% 50%)"],
    46     ["circle(closest-side)", "circle(closest-side at 50% 50%)", "circle(closest-side at 50% 50%)"],
     46    ["circle()", "circle(at 50% 50%)", "circle(at 50% 50%)"],
     47    ["circle(closest-side at 50px 50px)", "circle(at 50px 50px)", "circle(at 50px 50px)"],
    4748    ["circle(10px)", "circle(10px at 50% 50%)", "circle(10px at 50% 50%)"],
    4849    ["circle(10px at 10px)", "circle(10px at 10px 50%)"],
    4950    "circle(10px at 10px 10px)",
    50     ["circle(at 10px)", "circle(at 10px 50%)", "circle(closest-side at 10px 50%)"],
    51     ["circle(at 10px 10px)", "circle(at 10px 10px)", "circle(closest-side at 10px 10px)"],
    52     ["circle(at top left)", "circle(at 0% 0%)", "circle(closest-side at 0% 0%)"],
    53     ["circle(at right bottom)", "circle(at 100% 100%)", "circle(closest-side at 100% 100%)"],
     51    ["circle(at 10px)", "circle(at 10px 50%)", "circle(at 10px 50%)"],
     52    ["circle(at 10px 10px)", "circle(at 10px 10px)", "circle(at 10px 10px)"],
     53    ["circle(at top left)", "circle(at 0% 0%)", "circle(at 0% 0%)"],
     54    ["circle(at right bottom)", "circle(at 100% 100%)", "circle(at 100% 100%)"],
    5455    ["circle(10px at left top 10px)", "circle(10px at 0% 10px)", "circle(10px at 0% 10px)"],
    5556    ["circle(10px at top 10px left 10px)", "circle(10px at 10px 10px)", "circle(10px at 10px 10px)"],
    … …  
    5859    ["circle(10px at right 10px bottom 10px)", "circle(10px at right 10px bottom 10px)"],
    5960
    60     ["ellipse()", "ellipse(at 50% 50%)", "ellipse(closest-side closest-side at 50% 50%)"],
    61     ["ellipse(10px)", "ellipse(10px at 50% 50%)", "ellipse(10px closest-side at 50% 50%)"],
     61
     62    ["ellipse()", "ellipse(at 50% 50%)", "ellipse(at 50% 50%)"],
     63    ["ellipse(10px)", "ellipse(10px at 50% 50%)", "ellipse(10px at 50% 50%)"],
    6264    ["ellipse(10px 20px)", "ellipse(10px 20px at 50% 50%)", "ellipse(10px 20px at 50% 50%)"],
    63     ["ellipse(10px at 10px)", "ellipse(10px at 10px 50%)", "ellipse(10px closest-side at 10px 50%)"],
     65    ["ellipse(10px at 10px)", "ellipse(10px at 10px 50%)", "ellipse(10px at 10px 50%)"],
    6466    ["ellipse(10px 20px at 10px)", "ellipse(10px 20px at 10px 50%)"],
    65     ["ellipse(10px at 10px 10px)", "ellipse(10px at 10px 10px)", "ellipse(10px closest-side at 10px 10px)"],
    66     ["ellipse(at 10px)", "ellipse(at 10px 50%)", "ellipse(closest-side closest-side at 10px 50%)"],
    67     ["ellipse(at 10px 10px)", "ellipse(at 10px 10px)", "ellipse(closest-side closest-side at 10px 10px)"],
    68     ["ellipse(at top left)", "ellipse(at 0% 0%)", "ellipse(closest-side closest-side at 0% 0%)"],
    69     ["ellipse(at right bottom)", "ellipse(at 100% 100%)", "ellipse(closest-side closest-side at 100% 100%)"],
    70     ["ellipse(10px at left top 10px)", "ellipse(10px at 0% 10px)", "ellipse(10px closest-side at 0% 10px)"],
    71     ["ellipse(10px at top 10px left 10px)", "ellipse(10px at 10px 10px)", "ellipse(10px closest-side at 10px 10px)"],
    72     ["ellipse(10px at right 10px bottom 10px)", "ellipse(10px at right 10px bottom 10px)", "ellipse(10px closest-side at right 10px bottom 10px)"],
     67    ["ellipse(10px at 10px 10px)", "ellipse(10px at 10px 10px)", "ellipse(10px at 10px 10px)"],
     68    ["ellipse(at 10px)", "ellipse(at 10px 50%)", "ellipse(at 10px 50%)"],
     69    ["ellipse(at 10px 10px)", "ellipse(at 10px 10px)", "ellipse(at 10px 10px)"],
     70    ["ellipse(at top left)", "ellipse(at 0% 0%)", "ellipse(at 0% 0%)"],
     71    ["ellipse(at right bottom)", "ellipse(at 100% 100%)", "ellipse(at 100% 100%)"],
     72    ["ellipse(10px at left top 10px)", "ellipse(10px at 0% 10px)", "ellipse(10px at 0% 10px)"],
     73    ["ellipse(10px at top 10px left 10px)", "ellipse(10px at 10px 10px)", "ellipse(10px at 10px 10px)"],
     74    ["ellipse(10px at right 10px bottom 10px)", "ellipse(10px at right 10px bottom 10px)", "ellipse(10px at right 10px bottom 10px)"],
    7375    ["ellipse(10px 20px at left top 10px)", "ellipse(10px 20px at 0% 10px)", "ellipse(10px 20px at 0% 10px)"],
    7476    ["ellipse(10px 20px at top 10px left 10px)", "ellipse(10px 20px at 10px 10px)", "ellipse(10px 20px at 10px 10px)"],
    … …  
    7678    ["ellipse(10px 10px at right 10% bottom 10%)", "ellipse(10px 10px at 90% 90%)"],
    7779    ["ellipse(10px 10px at right 0px bottom 0px)", "ellipse(10px 10px at 100% 100%)"],
     80    ["ellipse(closest-side closest-side at 50px 50px)", "ellipse(at 50px 50px)", "ellipse(at 50px 50px)"],
     81    ["ellipse(farthest-side farthest-side at 50px 50px)", "ellipse(farthest-side farthest-side at 50px 50px)", "ellipse(farthest-side farthest-side at 50px 50px)"],
     82    ["ellipse(closest-side farthest-side at 50px 50px)", "ellipse(closest-side farthest-side at 50px 50px)", "ellipse(closest-side farthest-side at 50px 50px)"],
     83    ["ellipse(farthest-side closest-side at 50px 50px)", "ellipse(farthest-side at 50px 50px)", "ellipse(farthest-side at 50px 50px)"],
    7884
    7985    ["polygon(10px 20px, 30px 40px, 40px 50px)", "polygon(10px 20px, 30px 40px, 40px 50px)"],

  • trunk/Source/WebCore/ChangeLog

    r169402 r169406  
     12014-05-27  Zoltan Horvath  <zoltan@webkit.org>
     2
     3        [CSS Shapes] serialization of the computed value should omit the default radii
     4        https://bugs.webkit.org/show_bug.cgi?id=132747
     5
     6        Reviewed by Darin Adler.
     7
     8        We should omit closest-side value, whereever is possible. Specification:
     9        http://www.w3.org/TR/2014/CR-css-shapes-1-20140320/#basic-shape-computed-values
     10        This change aligns the behavior to the specification.
     11
     12        Added new test cases for the shape-outside parsing tests.
     13
     14        * css/CSSBasicShapes.cpp:
     15        (WebCore::buildCircleString):
     16        (WebCore::CSSBasicShapeCircle::cssText):
     17        (WebCore::CSSBasicShapeEllipse::cssText):
     18
    1192014-05-27  Commit Queue  <commit-queue@webkit.org>
    220

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

    r167132 r169406  
    8989    StringBuilder result;
    9090    result.appendLiteral(opening);
    91     if (!radius.isNull()) 
     91    if (!radius.isNull())
    9292        result.append(radius);
    9393
    … …  
    114114    RefPtr<CSSPrimitiveValue> normalizedCY = buildSerializablePositionOffset(m_centerY, CSSValueTop);
    115115
    116     return buildCircleString(m_radius ? m_radius->cssText() : String(),
     116    String radius;
     117    if (m_radius && m_radius->getValueID() != CSSValueClosestSide)
     118        radius = m_radius->cssText();
     119
     120    return buildCircleString(radius,
    117121        serializePositionOffset(*normalizedCX->getPairValue(), *normalizedCY->getPairValue()),
    118122        serializePositionOffset(*normalizedCY->getPairValue(), *normalizedCX->getPairValue()),
    … …  
    173177    RefPtr<CSSPrimitiveValue> normalizedCY = buildSerializablePositionOffset(m_centerY, CSSValueTop);
    174178
    175     return buildEllipseString(m_radiusX ? m_radiusX->cssText() : String(),
    176         m_radiusY ? m_radiusY->cssText() : String(),
     179    String radiusX;
     180    String radiusY;
     181    if (m_radiusX) {
     182        bool shouldSerializeRadiusXValue = m_radiusX->getValueID() != CSSValueClosestSide;
     183        bool shouldSerializeRadiusYValue = false;
     184
     185        if (m_radiusY) {
     186            shouldSerializeRadiusYValue = m_radiusY->getValueID() != CSSValueClosestSide;
     187            if (shouldSerializeRadiusYValue)
     188                radiusY = m_radiusY->cssText();
     189        }
     190        if (shouldSerializeRadiusXValue || (!shouldSerializeRadiusXValue && shouldSerializeRadiusYValue))
     191            radiusX = m_radiusX->cssText();
     192    }
     193    return buildEllipseString(radiusX, radiusY,
    177194        serializePositionOffset(*normalizedCX->getPairValue(), *normalizedCY->getPairValue()),
    178195        serializePositionOffset(*normalizedCY->getPairValue(), *normalizedCX->getPairValue()),
Note: See TracChangeset for help on using the changeset viewer.