Changeset 160007 in webkit


Ignore:
Timestamp:
Dec 3, 2013 9:18:01 AM (10 years ago)
Author:
rwlbuis@webkit.org
Message:

[css shapes] layout for new ellipse syntax
​https://bugs.webkit.org/show_bug.cgi?id=124621

Source/WebCore:

Reviewed by Dirk Schulze.

Implement support for doing layout with the new ellipse shape syntax,
including basic animation support.

Test: fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000.html

  • rendering/shapes/Shape.cpp:

(WebCore::Shape::createShape): Convert new ellipse to a layout shape.

  • rendering/style/BasicShapes.cpp:

(WebCore::BasicShape::canBlend): Ignore ellipses with values that

cannot be interpolated.

(WebCore::BasicShapeEllipse::floatValueForRadiusInBox): Helper function to calculate

either radiusX or radiusY, shared by clip-path and shape code paths.

(WebCore::BasicShapeEllipse::path):

  • rendering/style/BasicShapes.h:

LayoutTests:

Add a new test for the new ellipse syntax. Also update existing shape-inside, animation, and clip-path tests to
test the new ellipse syntax for clipping and shape-inside.

Reviewed by Dirk Schulze.

  • animations/resources/animation-test-helpers.js:

(parseBasicShape):

  • css3/masking/clip-path-animation-expected.txt:
  • css3/masking/clip-path-animation.html:
  • css3/masking/clip-path-ellipse.html:
  • fast/shapes/shape-inside/shape-inside-animation-expected.txt:
  • fast/shapes/shape-inside/shape-inside-animation.html:
  • fast/shapes/shape-inside/shape-inside-ellipse-padding.html:
  • fast/shapes/shape-inside/shape-inside-ellipse.html:
  • fast/shapes/shape-inside/shape-inside-empty-expected.html:
  • fast/shapes/shape-inside/shape-inside-empty.html:
  • fast/shapes/shape-outside-floats/shape-outside-animation-expected.txt:
  • fast/shapes/shape-outside-floats/shape-outside-animation.html:
  • fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000-expected.html: Added.
  • fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000.html: Added.
Location:
trunk
Files:
2 added
17 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r160005 r160007  
     12013-12-03  Rob Buis  <rob.buis@samsung.com>
     2
     3        [css shapes] layout for new ellipse syntax
     4        https://bugs.webkit.org/show_bug.cgi?id=124621
     5
     6        Add a new test for the new ellipse syntax. Also update existing shape-inside, animation, and clip-path tests to
     7        test the new ellipse syntax for clipping and shape-inside.
     8
     9        Reviewed by Dirk Schulze.
     10
     11        * animations/resources/animation-test-helpers.js:
     12        (parseBasicShape):
     13        * css3/masking/clip-path-animation-expected.txt:
     14        * css3/masking/clip-path-animation.html:
     15        * css3/masking/clip-path-ellipse.html:
     16        * fast/shapes/shape-inside/shape-inside-animation-expected.txt:
     17        * fast/shapes/shape-inside/shape-inside-animation.html:
     18        * fast/shapes/shape-inside/shape-inside-ellipse-padding.html:
     19        * fast/shapes/shape-inside/shape-inside-ellipse.html:
     20        * fast/shapes/shape-inside/shape-inside-empty-expected.html:
     21        * fast/shapes/shape-inside/shape-inside-empty.html:
     22        * fast/shapes/shape-outside-floats/shape-outside-animation-expected.txt:
     23        * fast/shapes/shape-outside-floats/shape-outside-animation.html:
     24        * fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000-expected.html: Added.
     25        * fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000.html: Added.
     26
    1272013-12-03  Frédéric Wang  <fred.wang@free.fr>
    228

  • trunk/LayoutTests/animations/resources/animation-test-helpers.js

    r159979 r160007  
    220220        break;
    221221    case "ellipse":
    222         matches = s.match("ellipse\\((.*)\\s*,\\s*(.*)\\s*,\\s*(.*)\\,\\s*(.*)\\)");
     222        matches = s.match("ellipse\\((.*)\\s+(.*)\\s+at\\s+(.*)\\s+(.*)\\)");
    223223        break;
    224224    case "polygon":

  • trunk/LayoutTests/css3/masking/clip-path-animation-expected.txt

    r159979 r160007  
    22PASS - "webkitClipPath" property for "rectangle-box" element at 1s saw something close to: rectangle(10%, 10%, 80%, 80%, 0px, 0px)
    33PASS - "webkitClipPath" property for "circle-box" element at 1s saw something close to: circle(35% at 35% 35%)
    4 PASS - "webkitClipPath" property for "ellipse-box" element at 1s saw something close to: ellipse(35%, 35%, 35%, 30%)
     4PASS - "webkitClipPath" property for "ellipse-box" element at 1s saw something close to: ellipse(35% 30% at 35% 35%)
    55PASS - "webkitClipPath" property for "polygon-box" element at 1s saw something close to: polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)
    66PASS - "webkitClipPath" property for "none-box" element at 1s saw something close to: polygon(nonzero, 20% 20%, 80% 20%, 80% 80%, 20% 80%)

  • trunk/LayoutTests/css3/masking/clip-path-animation.html

    r159979 r160007  
    4343
    4444    @-webkit-keyframes ellipse-anim {
    45         from { -webkit-clip-path: ellipse(50%, 50%, 50%, 40%); }
    46         to   { -webkit-clip-path: ellipse(20%, 20%, 20%, 20%); }
     45        from { -webkit-clip-path: ellipse(50% 40% at 50% 50%); }
     46        to   { -webkit-clip-path: ellipse(20% 20% at 20% 20%); }
    4747    }
    4848
    … …  
    6565      ["rectangle-anim",  1, "rectangle-box", "webkitClipPath", "rectangle(10%, 10%, 80%, 80%, 0px, 0px)", 0.05],
    6666      ["circle-anim",  1, "circle-box", "webkitClipPath", "circle(35% at 35% 35%)", 0.05],
    67       ["ellipse-anim",  1, "ellipse-box", "webkitClipPath", "ellipse(35%, 35%, 35%, 30%)", 0.05],
     67      ["ellipse-anim",  1, "ellipse-box", "webkitClipPath", "ellipse(35% 30% at 35% 35%)", 0.05],
    6868      ["polygon-anim",  1, "polygon-box", "webkitClipPath", "polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)", 0.05],
    6969      ["none-anim",  1, "none-box", "webkitClipPath", "polygon(nonzero, 20% 20%, 80% 20%, 80% 80%, 20% 80%)", 0],

  • trunk/LayoutTests/css3/masking/clip-path-ellipse.html

    r127608 r160007  
    77    height: 200px;
    88    background-color: green;
    9     -webkit-clip-path: ellipse(100px, 100px, 100px, 75px);
     9    -webkit-clip-path: ellipse(100px 75px at 100px 100px);
    1010}
    1111</style>

  • trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-animation-expected.txt

    r159979 r160007  
    22PASS - "webkitShapeInside" property for "rectangle-box" element at 1s saw something close to: rectangle(10%, 10%, 80%, 80%, 0px, 0px)
    33PASS - "webkitShapeInside" property for "circle-box" element at 1s saw something close to: circle(35% at 35% 35%)
    4 PASS - "webkitShapeInside" property for "ellipse-box" element at 1s saw something close to: ellipse(35%, 35%, 35%, 30%)
     4PASS - "webkitShapeInside" property for "ellipse-box" element at 1s saw something close to: ellipse(35% 30% at 35% 35%)
    55PASS - "webkitShapeInside" property for "polygon-box" element at 1s saw something close to: polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)
    66

  • trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-animation.html

    r159979 r160007  
    3939
    4040    @-webkit-keyframes ellipse-anim {
    41         from { -webkit-shape-inside: ellipse(50%, 50%, 50%, 40%); }
    42         to   { -webkit-shape-inside: ellipse(20%, 20%, 20%, 20%); }
     41        from { -webkit-shape-inside: ellipse(50% 40% at 50% 50%); }
     42        to   { -webkit-shape-inside: ellipse(20% 20% at 20% 20%); }
    4343    }
    4444
    … …  
    5555      ["rectangle-anim",  1, "rectangle-box", "webkitShapeInside", "rectangle(10%, 10%, 80%, 80%, 0px, 0px)", 0.05],
    5656      ["circle-anim",  1, "circle-box", "webkitShapeInside", "circle(35% at 35% 35%)", 0.05],
    57       ["ellipse-anim",  1, "ellipse-box", "webkitShapeInside", "ellipse(35%, 35%, 35%, 30%)", 0.05],
     57      ["ellipse-anim",  1, "ellipse-box", "webkitShapeInside", "ellipse(35% 30% at 35% 35%)", 0.05],
    5858      ["polygon-anim",  1, "polygon-box", "webkitShapeInside", "polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)", 0.05],
    5959    ];

  • trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-ellipse-padding.html

    r154500 r160007  
    1010        width: 500px;
    1111        height: 500px;
    12         -webkit-shape-inside: ellipse(220px, 220px, 250px, 150px);
     12        -webkit-shape-inside: ellipse(250px 150px at 220px 220px);
    1313        -webkit-shape-padding: 50px;
    1414        font: 178px/1 Ahem, sans-serif;

  • trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-ellipse.html

    r154500 r160007  
    1313        width: 500px;
    1414        height: 500px;
    15         -webkit-shape-inside: ellipse(220px, 220px, 200px, 100px);
     15        -webkit-shape-inside: ellipse(200px 100px at 220px 220px);
    1616        font: 178px/1 Ahem, sans-serif;
    1717        color: green;

  • trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-empty-expected.html

    r159979 r160007  
    2525    </div>
    2626    <div>
    27         <p>This text should be pushed down below the green rectangle. (There is an ellipse(0px, 0px, 0px, 1em) shape-inside CSS property on the green rectangle.)</p>
     27        <p>This text should be pushed down below the green rectangle. (There is an ellipse(0px 1em at 0px 0px) shape-inside CSS property on the green rectangle.)</p>
    2828    </div>
    2929    <div>
    30         <p>This text should be pushed down below the green rectangle. (There is an ellipse(0px, 0px, 1em, 0px) shape-inside CSS property on the green rectangle.)</p>
     30        <p>This text should be pushed down below the green rectangle. (There is an ellipse(1em 0px at 0px 0px) shape-inside CSS property on the green rectangle.)</p>
    3131    </div>
    3232    <div>

  • trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-empty.html

    r159979 r160007  
    2424
    2525    #shape-inside-ellipse-radiusX0 {
    26         -webkit-shape-inside: ellipse(0px, 0px, 0px, 1em);
     26        -webkit-shape-inside: ellipse(0px 1em at 0px 0px);
    2727    }
    2828
    2929    #shape-inside-ellipse-radiusY0 {
    30         -webkit-shape-inside: ellipse(0px, 0px, 1em, 0px);
     30        -webkit-shape-inside: ellipse(1em 0px at 0px 0px);
    3131    }
    3232
    … …  
    5252    </p>
    5353    <p id="shape-inside-ellipse-radiusX0">
    54         This text should be pushed down below the green rectangle. (There is an ellipse(0px, 0px, 0px, 1em) shape-inside CSS property on the green rectangle.)
     54        This text should be pushed down below the green rectangle. (There is an ellipse(0px 1em at 0px 0px) shape-inside CSS property on the green rectangle.)
    5555    </p>
    5656    <p id="shape-inside-ellipse-radiusY0">
    57         This text should be pushed down below the green rectangle. (There is an ellipse(0px, 0px, 1em, 0px) shape-inside CSS property on the green rectangle.)
     57        This text should be pushed down below the green rectangle. (There is an ellipse(1em 0px at 0px 0px) shape-inside CSS property on the green rectangle.)
    5858    </p>
    5959    <p id="shape-inside-polygon-1vertex">

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

    r159979 r160007  
    55PASS - "webkitShapeOutside" property for "rectangle-box" element at 1s saw something close to: rectangle(10%, 10%, 80%, 80%, 0px, 0px)
    66PASS - "webkitShapeOutside" property for "circle-box" element at 1s saw something close to: circle(35% at 35% 35%)
    7 PASS - "webkitShapeOutside" property for "ellipse-box" element at 1s saw something close to: ellipse(35%, 35%, 35%, 30%)
     7PASS - "webkitShapeOutside" property for "ellipse-box" element at 1s saw something close to: ellipse(35% 30% at 35% 35%)
    88PASS - "webkitShapeOutside" property for "polygon-box" element at 1s saw something close to: polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)
    99

  • trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation.html

    r159979 r160007  
    4343
    4444    @-webkit-keyframes ellipse-anim {
    45         from { -webkit-shape-outside: ellipse(50%, 50%, 50%, 40%); }
    46         to   { -webkit-shape-outside: ellipse(20%, 20%, 20%, 20%); }
     45        from { -webkit-shape-outside: ellipse(50% 40% at 50% 50%); }
     46        to   { -webkit-shape-outside: ellipse(20% 20% at 20% 20%); }
    4747    }
    4848
    … …  
    5959      ["rectangle-anim",  1, "rectangle-box", "webkitShapeOutside", "rectangle(10%, 10%, 80%, 80%, 0px, 0px)", 0.05],
    6060      ["circle-anim",  1, "circle-box", "webkitShapeOutside", "circle(35% at 35% 35%)", 0.05],
    61       ["ellipse-anim",  1, "ellipse-box", "webkitShapeOutside", "ellipse(35%, 35%, 35%, 30%)", 0.05],
     61      ["ellipse-anim",  1, "ellipse-box", "webkitShapeOutside", "ellipse(35% 30% at 35% 35%)", 0.05],
    6262      ["polygon-anim",  1, "polygon-box", "webkitShapeOutside", "polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)", 0.05],
    6363    ];

  • trunk/Source/WebCore/ChangeLog

    r160005 r160007  
     12013-12-03  Rob Buis  <rob.buis@samsung.com>
     2
     3        [css shapes] layout for new ellipse syntax
     4        https://bugs.webkit.org/show_bug.cgi?id=124621
     5
     6        Reviewed by Dirk Schulze.
     7
     8        Implement support for doing layout with the new ellipse shape syntax,
     9        including basic animation support.
     10
     11        Test: fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000.html
     12
     13        * rendering/shapes/Shape.cpp:
     14        (WebCore::Shape::createShape): Convert new ellipse to a layout shape.
     15        * rendering/style/BasicShapes.cpp:
     16        (WebCore::BasicShape::canBlend): Ignore ellipses with values that
     17            cannot be interpolated.
     18        (WebCore::BasicShapeEllipse::floatValueForRadiusInBox): Helper function to calculate
     19            either radiusX or radiusY, shared by clip-path and shape code paths.
     20        (WebCore::BasicShapeEllipse::path):
     21        * rendering/style/BasicShapes.h:
     22
    1232013-12-03  Frédéric Wang  <fred.wang@free.fr>
    224

  • trunk/Source/WebCore/rendering/shapes/Shape.cpp

    r159979 r160007  
    176176
    177177    case BasicShape::BasicShapeEllipseType: {
    178         // FIXME: Layout implementation needed. See bug https://bugs.webkit.org/show_bug.cgi?id=125079
    179         shape = createRectangleShape(FloatRect(0, 0, boxWidth, boxHeight), FloatSize());
     178        const BasicShapeEllipse* ellipse = static_cast<const BasicShapeEllipse*>(basicShape);
     179        float centerX = floatValueForCenterCoordinate(ellipse->centerX(), boxWidth);
     180        float centerY = floatValueForCenterCoordinate(ellipse->centerY(), boxHeight);
     181        float radiusX = ellipse->floatValueForRadiusInBox(ellipse->radiusX(), centerX, boxWidth);
     182        float radiusY = ellipse->floatValueForRadiusInBox(ellipse->radiusY(), centerY, boxHeight);
     183        FloatPoint logicalCenter = physicalPointToLogical(FloatPoint(centerX, centerY), logicalBoxSize.height(), writingMode);
     184
     185        shape = createShapeEllipse(logicalCenter, FloatSize(radiusX, radiusY));
    180186        break;
    181187    }

  • trunk/Source/WebCore/rendering/style/BasicShapes.cpp

    r159979 r160007  
    6060    }
    6161
    62     return true;
     62    // Ellipses with keywords for radii or center coordinates cannot be animated.
     63    if (type() != BasicShape::BasicShapeEllipseType)
     64        return true;
     65
     66    const BasicShapeEllipse* thisEllipse = static_cast<const BasicShapeEllipse*>(this);
     67    const BasicShapeEllipse* otherEllipse = static_cast<const BasicShapeEllipse*>(other);
     68    if (!thisEllipse->radiusX().canBlend(otherEllipse->radiusX())
     69        || !thisEllipse->radiusY().canBlend(otherEllipse->radiusY())
     70        || !thisEllipse->centerX().canBlend(otherEllipse->centerX())
     71        || !thisEllipse->centerY().canBlend(otherEllipse->centerY()))
     72        return false;
    6373}
    6474
    … …  
    192202}
    193203
     204float BasicShapeEllipse::floatValueForRadiusInBox(const BasicShapeRadius& radius, float center, float boxWidthOrHeight) const
     205{
     206    if (radius.type() == BasicShapeRadius::Value)
     207        return floatValueForLength(radius.value(), boxWidthOrHeight);
     208
     209    if (radius.type() == BasicShapeRadius::ClosestSide)
     210        return std::min(center, boxWidthOrHeight - center);
     211
     212    ASSERT(radius.type() == BasicShapeRadius::FarthestSide);
     213    return std::max(center, boxWidthOrHeight - center);
     214}
     215
    194216void BasicShapeEllipse::path(Path& path, const FloatRect& boundingBox)
    195217{
    196218    ASSERT(path.isEmpty());
    197     // FIXME: The implementation of path is incomplete. See https://bugs.webkit.org/show_bug.cgi?id=125079
    198     // Compute closest-side and farthest-side from boundingBox.
    199     // Compute top, left, bottom, right from boundingBox.
    200     if (m_radiusX.type() != BasicShapeRadius::Value || m_radiusY.type() != BasicShapeRadius::Value)
    201         return;
    202     if (m_centerX.keyword() != BasicShapeCenterCoordinate::None || m_centerY.keyword() != BasicShapeCenterCoordinate::None)
    203         return;
    204 
    205     float diagonal = sqrtf((boundingBox.width() * boundingBox.width() + boundingBox.height() * boundingBox.height()) / 2);
    206     float centerX = floatValueForLength(m_centerX.length(), boundingBox.width());
    207     float centerY = floatValueForLength(m_centerY.length(), boundingBox.height());
    208     float radiusX = floatValueForLength(m_radiusX.value(), diagonal);
    209     float radiusY = floatValueForLength(m_radiusY.value(), diagonal);
     219
     220    float centerX = floatValueForCenterCoordinate(m_centerX, boundingBox.width());
     221    float centerY = floatValueForCenterCoordinate(m_centerY, boundingBox.height());
     222    float radiusX = floatValueForRadiusInBox(m_radiusX, centerX, boundingBox.width());
     223    float radiusY = floatValueForRadiusInBox(m_radiusY, centerY, boundingBox.height());
    210224    path.addEllipse(FloatRect(
    211225        centerX - radiusX + boundingBox.x(),

  • trunk/Source/WebCore/rendering/style/BasicShapes.h

    r159979 r160007  
    256256    const BasicShapeRadius& radiusX() const { return m_radiusX; }
    257257    const BasicShapeRadius& radiusY() const { return m_radiusY; }
     258    float floatValueForRadiusInBox(const BasicShapeRadius&, float center, float boxWidthOrHeight) const;
    258259
    259260    void setCenterX(BasicShapeCenterCoordinate centerX) { m_centerX = std::move(centerX); }
Note: See TracChangeset for help on using the changeset viewer.