Changeset 159979 in webkit


Ignore:
Timestamp:
Dec 2, 2013 4:10:21 PM (10 years ago)
Author:
Bem Jones-Bey
Message:

[css shapes] Layout support for new circle shape syntax
https://bugs.webkit.org/show_bug.cgi?id=124619

Reviewed by Dirk Schulze.

Source/WebCore:

Implement support for doing layout with the new circle shape syntax,
inclduing basic animation support.

Tests: fast/shapes/shape-outside-floats/shape-outside-floats-circle-000.html

fast/shapes/shape-outside-floats/shape-outside-floats-circle-001.html
fast/shapes/shape-outside-floats/shape-outside-floats-circle-002.html
fast/shapes/shape-outside-floats/shape-outside-floats-circle-003.html
fast/shapes/shape-outside-floats/shape-outside-floats-circle-004.html
fast/shapes/shape-outside-floats/shape-outside-floats-circle-005.html

  • css/BasicShapeFunctions.cpp:

(WebCore::floatValueForCenterCoordinate): Used by both the CSS Shapes

layout code and the clip path code.

  • css/BasicShapeFunctions.h:
  • css/CSSBasicShapes.cpp:

(WebCore::buildCircleString): Update to use appendLiteral, and remove

call to reserveCapacity - if we find that it's actually slow when
doing performance tests, we can hopefully do something smarter and
less ugly than that.

  • css/CSSParser.cpp:

(WebCore::CSSParser::parseShapeRadius): Fix a logic error that caused

the radius keywords not to work properly.

  • rendering/shapes/Shape.cpp:

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

  • rendering/style/BasicShapes.cpp:

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

cannot be interpolated.

(WebCore::BasicShapeCircle::floatValueForRadiusInBox): Convert circle

radius keywords to a float value.

(WebCore::BasicShapeCircle::path):
(WebCore::BasicShapeCircle::blend):

  • rendering/style/BasicShapes.h:

(WebCore::BasicShapeCenterCoordinate::canBlend):
(WebCore::BasicShapeRadius::canBlend):

LayoutTests:

Add a few tests for the new circle syntax. The old tests in
LayoutTests/csswg will be removed when the old syntax is removed.

Also update existing shape-inside, animation, and clip-path tests to
test the new syntax.

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

(parseBasicShape):

  • LayoutTests/animations/resources/animation-test-helpers.js:
  • LayoutTests/css3/masking/clip-path-animation-expected.txt:
  • LayoutTests/css3/masking/clip-path-animation.html:
  • LayoutTests/css3/masking/clip-path-circle-filter.html:
  • LayoutTests/css3/masking/clip-path-circle-overflow-hidden.html:
  • LayoutTests/css3/masking/clip-path-circle-overflow.html:
  • LayoutTests/css3/masking/clip-path-circle-relative-overflow.html:
  • LayoutTests/css3/masking/clip-path-circle.html:
  • LayoutTests/css3/masking/clip-path-restore.html:
  • LayoutTests/fast/shapes/parsing/parsing-shape-inside-expected.txt:
  • LayoutTests/fast/shapes/parsing/parsing-shape-outside-expected.txt:
  • LayoutTests/fast/shapes/parsing/parsing-test-utils.js:
  • LayoutTests/fast/shapes/shape-inside/shape-inside-animation-expected.txt:
  • LayoutTests/fast/shapes/shape-inside/shape-inside-animation.html:
  • LayoutTests/fast/shapes/shape-inside/shape-inside-calc-crash-expected.txt:
  • LayoutTests/fast/shapes/shape-inside/shape-inside-calc-crash.html:
  • LayoutTests/fast/shapes/shape-inside/shape-inside-circle-padding.html:
  • LayoutTests/fast/shapes/shape-inside/shape-inside-circle.html:
  • LayoutTests/fast/shapes/shape-inside/shape-inside-dynamic-nested.html:
  • LayoutTests/fast/shapes/shape-inside/shape-inside-empty-expected.html:
  • LayoutTests/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-circle-000-expected.html: Added.
  • fast/shapes/shape-outside-floats/shape-outside-floats-circle-000.html: Added.
  • fast/shapes/shape-outside-floats/shape-outside-floats-circle-001-expected.html: Added.
  • fast/shapes/shape-outside-floats/shape-outside-floats-circle-001.html: Added.
  • fast/shapes/shape-outside-floats/shape-outside-floats-circle-002-expected.html: Added.
  • fast/shapes/shape-outside-floats/shape-outside-floats-circle-002.html: Added.
  • fast/shapes/shape-outside-floats/shape-outside-floats-circle-003-expected.html: Added.
  • fast/shapes/shape-outside-floats/shape-outside-floats-circle-003.html: Added.
  • fast/shapes/shape-outside-floats/shape-outside-floats-circle-004-expected.html: Added.
  • fast/shapes/shape-outside-floats/shape-outside-floats-circle-004.html: Added.
  • fast/shapes/shape-outside-floats/shape-outside-floats-circle-005-expected.html: Added.
  • fast/shapes/shape-outside-floats/shape-outside-floats-circle-005.html: Added.
Location:
trunk
Files:
12 added
32 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r159975 r159979  
     12013-12-02  Bem Jones-Bey  <bjonesbe@adobe.com>
     2
     3        [css shapes] Layout support for new circle shape syntax
     4        https://bugs.webkit.org/show_bug.cgi?id=124619
     5
     6        Reviewed by Dirk Schulze.
     7
     8        Add a few tests for the new circle syntax. The old tests in
     9        LayoutTests/csswg will be removed when the old syntax is removed.
     10
     11        Also update existing shape-inside, animation, and clip-path tests to
     12        test the new syntax.
     13
     14        * animations/resources/animation-test-helpers.js:
     15        (parseBasicShape):
     16        * LayoutTests/animations/resources/animation-test-helpers.js:
     17        * LayoutTests/css3/masking/clip-path-animation-expected.txt:
     18        * LayoutTests/css3/masking/clip-path-animation.html:
     19        * LayoutTests/css3/masking/clip-path-circle-filter.html:
     20        * LayoutTests/css3/masking/clip-path-circle-overflow-hidden.html:
     21        * LayoutTests/css3/masking/clip-path-circle-overflow.html:
     22        * LayoutTests/css3/masking/clip-path-circle-relative-overflow.html:
     23        * LayoutTests/css3/masking/clip-path-circle.html:
     24        * LayoutTests/css3/masking/clip-path-restore.html:
     25        * LayoutTests/fast/shapes/parsing/parsing-shape-inside-expected.txt:
     26        * LayoutTests/fast/shapes/parsing/parsing-shape-outside-expected.txt:
     27        * LayoutTests/fast/shapes/parsing/parsing-test-utils.js:
     28        * LayoutTests/fast/shapes/shape-inside/shape-inside-animation-expected.txt:
     29        * LayoutTests/fast/shapes/shape-inside/shape-inside-animation.html:
     30        * LayoutTests/fast/shapes/shape-inside/shape-inside-calc-crash-expected.txt:
     31        * LayoutTests/fast/shapes/shape-inside/shape-inside-calc-crash.html:
     32        * LayoutTests/fast/shapes/shape-inside/shape-inside-circle-padding.html:
     33        * LayoutTests/fast/shapes/shape-inside/shape-inside-circle.html:
     34        * LayoutTests/fast/shapes/shape-inside/shape-inside-dynamic-nested.html:
     35        * LayoutTests/fast/shapes/shape-inside/shape-inside-empty-expected.html:
     36        * LayoutTests/fast/shapes/shape-inside/shape-inside-empty.html:
     37        * fast/shapes/shape-outside-floats/shape-outside-animation-expected.txt:
     38        * fast/shapes/shape-outside-floats/shape-outside-animation.html:
     39        * fast/shapes/shape-outside-floats/shape-outside-floats-circle-000-expected.html: Added.
     40        * fast/shapes/shape-outside-floats/shape-outside-floats-circle-000.html: Added.
     41        * fast/shapes/shape-outside-floats/shape-outside-floats-circle-001-expected.html: Added.
     42        * fast/shapes/shape-outside-floats/shape-outside-floats-circle-001.html: Added.
     43        * fast/shapes/shape-outside-floats/shape-outside-floats-circle-002-expected.html: Added.
     44        * fast/shapes/shape-outside-floats/shape-outside-floats-circle-002.html: Added.
     45        * fast/shapes/shape-outside-floats/shape-outside-floats-circle-003-expected.html: Added.
     46        * fast/shapes/shape-outside-floats/shape-outside-floats-circle-003.html: Added.
     47        * fast/shapes/shape-outside-floats/shape-outside-floats-circle-004-expected.html: Added.
     48        * fast/shapes/shape-outside-floats/shape-outside-floats-circle-004.html: Added.
     49        * fast/shapes/shape-outside-floats/shape-outside-floats-circle-005-expected.html: Added.
     50        * fast/shapes/shape-outside-floats/shape-outside-floats-circle-005.html: Added.
     51
    1522013-12-02  Alexey Proskuryakov  <ap@apple.com>
    253
  • trunk/LayoutTests/animations/resources/animation-test-helpers.js

    r156916 r159979  
    217217        break;
    218218    case "circle":
    219         matches = s.match("circle\\((.*)\\s*,\\s*(.*)\\s*,\\s*(.*)\\)");
     219        matches = s.match("circle\\((.*)\\s+at\\s+(.*)\\s+(.*)\\)");
    220220        break;
    221221    case "ellipse":
  • trunk/LayoutTests/css3/masking/clip-path-animation-expected.txt

    r155105 r159979  
    11   
    22PASS - "webkitClipPath" property for "rectangle-box" element at 1s saw something close to: rectangle(10%, 10%, 80%, 80%, 0px, 0px)
    3 PASS - "webkitClipPath" property for "circle-box" element at 1s saw something close to: circle(35%, 35%, 35%)
     3PASS - "webkitClipPath" property for "circle-box" element at 1s saw something close to: circle(35% at 35% 35%)
    44PASS - "webkitClipPath" property for "ellipse-box" element at 1s saw something close to: ellipse(35%, 35%, 35%, 30%)
    55PASS - "webkitClipPath" property for "polygon-box" element at 1s saw something close to: polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)
  • trunk/LayoutTests/css3/masking/clip-path-animation.html

    r155105 r159979  
    3838
    3939    @-webkit-keyframes circle-anim {
    40         from { -webkit-clip-path: circle(50%, 50%, 50%); }
    41         to   { -webkit-clip-path: circle(20%, 20%, 20%); }
     40        from { -webkit-clip-path: circle(50% at 50% 50%); }
     41        to   { -webkit-clip-path: circle(20% at 20% 20%); }
    4242    }
    4343
     
    6464      // [animation-name, time, element-id, property, expected-value, tolerance]
    6565      ["rectangle-anim",  1, "rectangle-box", "webkitClipPath", "rectangle(10%, 10%, 80%, 80%, 0px, 0px)", 0.05],
    66       ["circle-anim",  1, "circle-box", "webkitClipPath", "circle(35%, 35%, 35%)", 0.05],
     66      ["circle-anim",  1, "circle-box", "webkitClipPath", "circle(35% at 35% 35%)", 0.05],
    6767      ["ellipse-anim",  1, "ellipse-box", "webkitClipPath", "ellipse(35%, 35%, 35%, 30%)", 0.05],
    6868      ["polygon-anim",  1, "polygon-box", "webkitClipPath", "polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)", 0.05],
  • trunk/LayoutTests/css3/masking/clip-path-circle-filter.html

    r127608 r159979  
    88    background-color: green;
    99    -webkit-filter: blur(5px);
    10     -webkit-clip-path: circle(100px, 100px, 90px);
     10    -webkit-clip-path: circle(90px at 100px 100px);
    1111}
    1212</style>
  • trunk/LayoutTests/css3/masking/clip-path-circle-overflow-hidden.html

    r127608 r159979  
    77        height: 200px;
    88        overflow: hidden;
    9         -webkit-clip-path: circle(100px, 100px, 100px);
     9        -webkit-clip-path: circle(100px at 100px 100px);
    1010 }
    1111 .child {
  • trunk/LayoutTests/css3/masking/clip-path-circle-overflow.html

    r127608 r159979  
    88    background-color: green;
    99    border: 20px solid black;
    10     -webkit-clip-path: circle(130px, 130px, 130px);
     10    -webkit-clip-path: circle(130px at 130px 130px);
    1111}
    1212</style>
  • trunk/LayoutTests/css3/masking/clip-path-circle-relative-overflow.html

    r127608 r159979  
    88    background-color: green;
    99    border: 20px solid black;
    10     -webkit-clip-path: circle(50%, 50%, 50%);
     10    -webkit-clip-path: circle(50% at 50% 50%);
    1111}
    1212</style>
  • trunk/LayoutTests/css3/masking/clip-path-circle.html

    r127608 r159979  
    77    height: 200px;
    88    background-color: green;
    9     -webkit-clip-path: circle(100px, 100px, 100px);
     9    -webkit-clip-path: circle(100px at 100px 100px);
    1010}
    1111</style>
  • trunk/LayoutTests/css3/masking/clip-path-restore.html

    r129215 r159979  
    1010    height: 200px;
    1111    background-color: green;
    12     -webkit-clip-path: circle(100px, 100px, 100px);
     12    -webkit-clip-path: circle(100px at 100px 100px);
    1313}
    1414.red-marker {
  • trunk/LayoutTests/fast/shapes/parsing/parsing-shape-inside-expected.txt

    r159968 r159979  
    2828PASS getCSSText("-webkit-shape-inside", "circle()") is "circle()"
    2929PASS getComputedStyleValue("-webkit-shape-inside", "circle()") is "circle(closest-side at 50% 50%)"
     30PASS getCSSText("-webkit-shape-inside", "circle(farthest-side)") is "circle(farthest-side)"
     31PASS getComputedStyleValue("-webkit-shape-inside", "circle(farthest-side)") is "circle(farthest-side at 50% 50%)"
     32PASS getCSSText("-webkit-shape-inside", "circle(closest-side)") is "circle(closest-side)"
     33PASS getComputedStyleValue("-webkit-shape-inside", "circle(closest-side)") is "circle(closest-side at 50% 50%)"
    3034PASS getCSSText("-webkit-shape-inside", "circle(10px)") is "circle(10px)"
    3135PASS getComputedStyleValue("-webkit-shape-inside", "circle(10px)") is "circle(10px at 50% 50%)"
  • trunk/LayoutTests/fast/shapes/parsing/parsing-shape-outside-expected.txt

    r159968 r159979  
    2828PASS getCSSText("-webkit-shape-outside", "circle()") is "circle()"
    2929PASS getComputedStyleValue("-webkit-shape-outside", "circle()") is "circle(closest-side at 50% 50%)"
     30PASS getCSSText("-webkit-shape-outside", "circle(farthest-side)") is "circle(farthest-side)"
     31PASS getComputedStyleValue("-webkit-shape-outside", "circle(farthest-side)") is "circle(farthest-side at 50% 50%)"
     32PASS getCSSText("-webkit-shape-outside", "circle(closest-side)") is "circle(closest-side)"
     33PASS getComputedStyleValue("-webkit-shape-outside", "circle(closest-side)") is "circle(closest-side at 50% 50%)"
    3034PASS getCSSText("-webkit-shape-outside", "circle(10px)") is "circle(10px)"
    3135PASS getComputedStyleValue("-webkit-shape-outside", "circle(10px)") is "circle(10px at 50% 50%)"
  • trunk/LayoutTests/fast/shapes/parsing/parsing-test-utils.js

    r159968 r159979  
    2222
    2323    ["circle()", "circle()", "circle(closest-side at 50% 50%)"],
     24    ["circle(farthest-side)", "circle(farthest-side)", "circle(farthest-side at 50% 50%)"],
     25    ["circle(closest-side)", "circle(closest-side)", "circle(closest-side at 50% 50%)"],
    2426    ["circle(10px)", "circle(10px)", "circle(10px at 50% 50%)"],
    2527    ["circle(10px at 10px)", "circle(10px at 10px 50%)"],
  • trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-animation-expected.txt

    r152800 r159979  
    11Moving Text Moving Text Moving Text Moving Text
    22PASS - "webkitShapeInside" property for "rectangle-box" element at 1s saw something close to: rectangle(10%, 10%, 80%, 80%, 0px, 0px)
    3 PASS - "webkitShapeInside" property for "circle-box" element at 1s saw something close to: circle(35%, 35%, 35%)
     3PASS - "webkitShapeInside" property for "circle-box" element at 1s saw something close to: circle(35% at 35% 35%)
    44PASS - "webkitShapeInside" property for "ellipse-box" element at 1s saw something close to: ellipse(35%, 35%, 35%, 30%)
    55PASS - "webkitShapeInside" property for "polygon-box" element at 1s saw something close to: polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)
  • trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-animation.html

    r154500 r159979  
    3434
    3535    @-webkit-keyframes circle-anim {
    36         from { -webkit-shape-inside: circle(50%, 50%, 50%); }
    37         to   { -webkit-shape-inside: circle(20%, 20%, 20%); }
     36        from { -webkit-shape-inside: circle(50% at 50% 50%); }
     37        to   { -webkit-shape-inside: circle(20% at 20% 20%); }
    3838    }
    3939
     
    5454      // [animation-name, time, element-id, property, expected-value, tolerance]
    5555      ["rectangle-anim",  1, "rectangle-box", "webkitShapeInside", "rectangle(10%, 10%, 80%, 80%, 0px, 0px)", 0.05],
    56       ["circle-anim",  1, "circle-box", "webkitShapeInside", "circle(35%, 35%, 35%)", 0.05],
     56      ["circle-anim",  1, "circle-box", "webkitShapeInside", "circle(35% at 35% 35%)", 0.05],
    5757      ["ellipse-anim",  1, "ellipse-box", "webkitShapeInside", "ellipse(35%, 35%, 35%, 30%)", 0.05],
    5858      ["polygon-anim",  1, "polygon-box", "webkitShapeInside", "polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)", 0.05],
  • trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-calc-crash-expected.txt

    r156586 r159979  
    1 PASS window.getComputedStyle(document.getElementById('shape-inside'))['-webkit-shape-inside'] is 'circle(30%, 50%, 50%)'
     1PASS window.getComputedStyle(document.getElementById('shape-inside'))['-webkit-shape-inside'] is 'circle(50% at 30% 50%)'
    22This test should not crash
    33Hello
  • trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-calc-crash.html

    r156586 r159979  
    88<script>
    99window.onload = function() {
    10     shouldBe("window.getComputedStyle(document.getElementById('shape-inside'))['-webkit-shape-inside']", "'circle(30%, 50%, 50%)'");
     10    shouldBe("window.getComputedStyle(document.getElementById('shape-inside'))['-webkit-shape-inside']", "'circle(50% at 30% 50%)'");
    1111};
    1212</script>
    1313<style>
    1414#shape-inside {
    15     -webkit-shape-inside: circle(calc(50% - 20%), 50%, 50%);
     15    -webkit-shape-inside: circle(50% at calc(50% - 20%) 50%);
    1616}
    1717</style>
  • trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-circle-padding.html

    r154500 r159979  
    1010        width: 400px;
    1111        height: 400px;
    12         -webkit-shape-inside: circle(200px, 200px, 150px);
     12        -webkit-shape-inside: circle(150px at 200px 200px);
    1313        -webkit-shape-padding: 50px;
    1414        font: 141.42px/1 Ahem, sans-serif;
  • trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-circle.html

    r154500 r159979  
    1010        width: 400px;
    1111        height: 400px;
    12         -webkit-shape-inside: circle(200px, 200px, 100px);
     12        -webkit-shape-inside: circle(100px at 200px 200px);
    1313        font: 141.42px/1 Ahem, sans-serif;
    1414
  • trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-dynamic-nested.html

    r154500 r159979  
    5656    }
    5757    .inside-alt {
    58         -webkit-shape-inside: circle(50%, 50%, 50%);
     58        -webkit-shape-inside: circle(50% at 50% 50%);
    5959    }
    6060    .outside {
     
    6262    }
    6363    .outside-alt {
    64         -webkit-shape-inside: circle(50%, 50%, 50%);
     64        -webkit-shape-inside: circle(50% at 50% 50%);
    6565    }
    6666</style>
  • trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-empty-expected.html

    r159792 r159979  
    2222    </div>
    2323    <div>
    24         <p>This text should be pushed down below the green rectangle. (There is a circle(0px, 0px, 0px) shape-inside CSS property on the green rectangle.)</p>
     24        <p>This text should be pushed down below the green rectangle. (There is a circle(0px at 0px 0px) shape-inside CSS property on the green rectangle.)</p>
    2525    </div>
    2626    <div>
  • trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-empty.html

    r159792 r159979  
    2020
    2121    #shape-inside-circle-radius0 {
    22         -webkit-shape-inside: circle(0px, 0px, 0px);
     22        -webkit-shape-inside: circle(0px at 0px 0px);
    2323    }
    2424
     
    4949    </p>
    5050    <p id="shape-inside-circle-radius0">
    51         This text should be pushed down below the green rectangle. (There is a circle(0px, 0px, 0px) shape-inside CSS property on the green rectangle.)
     51        This text should be pushed down below the green rectangle. (There is a circle(0px at 0px 0px) shape-inside CSS property on the green rectangle.)
    5252    </p>
    5353    <p id="shape-inside-ellipse-radiusX0">
  • trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation-expected.txt

    r156916 r159979  
    44Moving Text
    55PASS - "webkitShapeOutside" property for "rectangle-box" element at 1s saw something close to: rectangle(10%, 10%, 80%, 80%, 0px, 0px)
    6 PASS - "webkitShapeOutside" property for "circle-box" element at 1s saw something close to: circle(35%, 35%, 35%)
     6PASS - "webkitShapeOutside" property for "circle-box" element at 1s saw something close to: circle(35% at 35% 35%)
    77PASS - "webkitShapeOutside" property for "ellipse-box" element at 1s saw something close to: ellipse(35%, 35%, 35%, 30%)
    88PASS - "webkitShapeOutside" property for "polygon-box" element at 1s saw something close to: polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)
  • trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation.html

    r156916 r159979  
    3838
    3939    @-webkit-keyframes circle-anim {
    40         from { -webkit-shape-outside: circle(50%, 50%, 50%); }
    41         to   { -webkit-shape-outside: circle(20%, 20%, 20%); }
     40        from { -webkit-shape-outside: circle(50% at 50% 50%); }
     41        to   { -webkit-shape-outside: circle(20% at 20% 20%); }
    4242    }
    4343
     
    5858      // [animation-name, time, element-id, property, expected-value, tolerance]
    5959      ["rectangle-anim",  1, "rectangle-box", "webkitShapeOutside", "rectangle(10%, 10%, 80%, 80%, 0px, 0px)", 0.05],
    60       ["circle-anim",  1, "circle-box", "webkitShapeOutside", "circle(35%, 35%, 35%)", 0.05],
     60      ["circle-anim",  1, "circle-box", "webkitShapeOutside", "circle(35% at 35% 35%)", 0.05],
    6161      ["ellipse-anim",  1, "ellipse-box", "webkitShapeOutside", "ellipse(35%, 35%, 35%, 30%)", 0.05],
    6262      ["polygon-anim",  1, "polygon-box", "webkitShapeOutside", "polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)", 0.05],
  • trunk/Source/WebCore/ChangeLog

    r159975 r159979  
     12013-12-02  Bem Jones-Bey  <bjonesbe@adobe.com>
     2
     3        [css shapes] Layout support for new circle shape syntax
     4        https://bugs.webkit.org/show_bug.cgi?id=124619
     5
     6        Reviewed by Dirk Schulze.
     7
     8        Implement support for doing layout with the new circle shape syntax,
     9        inclduing basic animation support.
     10
     11        Tests: fast/shapes/shape-outside-floats/shape-outside-floats-circle-000.html
     12               fast/shapes/shape-outside-floats/shape-outside-floats-circle-001.html
     13               fast/shapes/shape-outside-floats/shape-outside-floats-circle-002.html
     14               fast/shapes/shape-outside-floats/shape-outside-floats-circle-003.html
     15               fast/shapes/shape-outside-floats/shape-outside-floats-circle-004.html
     16               fast/shapes/shape-outside-floats/shape-outside-floats-circle-005.html
     17
     18        * css/BasicShapeFunctions.cpp:
     19        (WebCore::floatValueForCenterCoordinate): Used by both the CSS Shapes
     20            layout code and the clip path code.
     21        * css/BasicShapeFunctions.h:
     22        * css/CSSBasicShapes.cpp:
     23        (WebCore::buildCircleString): Update to use appendLiteral, and remove
     24            call to reserveCapacity - if we find that it's actually slow when
     25            doing performance tests, we can hopefully do something smarter and
     26            less ugly than that.
     27        * css/CSSParser.cpp:
     28        (WebCore::CSSParser::parseShapeRadius): Fix a logic error that caused
     29            the radius keywords not to work properly.
     30        * rendering/shapes/Shape.cpp:
     31        (WebCore::Shape::createShape): Convert new circle to a layout shape.
     32        * rendering/style/BasicShapes.cpp:
     33        (WebCore::BasicShape::canBlend): Ignore circles with values that
     34            cannot be interpolated.
     35        (WebCore::BasicShapeCircle::floatValueForRadiusInBox): Convert circle
     36            radius keywords to a float value.
     37        (WebCore::BasicShapeCircle::path):
     38        (WebCore::BasicShapeCircle::blend):
     39        * rendering/style/BasicShapes.h:
     40        (WebCore::BasicShapeCenterCoordinate::canBlend):
     41        (WebCore::BasicShapeRadius::canBlend):
     42
    1432013-12-02  Alexey Proskuryakov  <ap@apple.com>
    244
  • trunk/Source/WebCore/css/BasicShapeFunctions.cpp

    r159968 r159979  
    451451    return basicShape.release();
    452452}
    453 }
     453
     454float floatValueForCenterCoordinate(const BasicShapeCenterCoordinate& center, float boxDimension)
     455{
     456    float offset = floatValueForLength(center.length(), boxDimension);
     457    switch (center.keyword()) {
     458    case BasicShapeCenterCoordinate::None:
     459        return offset;
     460    case BasicShapeCenterCoordinate::Top:
     461    case BasicShapeCenterCoordinate::Left:
     462        return offset;
     463    case BasicShapeCenterCoordinate::Bottom:
     464    case BasicShapeCenterCoordinate::Right:
     465        return boxDimension - offset;
     466    }
     467
     468    ASSERT_NOT_REACHED();
     469    return 0;
     470}
     471
     472}
  • trunk/Source/WebCore/css/BasicShapeFunctions.h

    r159526 r159979  
    4646PassRefPtr<CSSPrimitiveValue> valueForBox(BasicShape::ReferenceBox);
    4747BasicShape::ReferenceBox boxForValue(const CSSPrimitiveValue*);
     48
     49float floatValueForCenterCoordinate(const BasicShapeCenterCoordinate&, float);
    4850}
     51
    4952#endif
  • trunk/Source/WebCore/css/CSSBasicShapes.cpp

    r159968 r159979  
    103103    char separator[] = " ";
    104104    StringBuilder result;
    105     // Compute the required capacity in advance to reduce allocations.
    106     result.reserveCapacity((sizeof(opening) - 1) + (3 * (sizeof(separator) - 1)) + 1 + radius.length() + sizeof(at) + centerX.length() + centerY.length());
    107     result.append(opening);
     105    result.appendLiteral(opening);
    108106    if (!radius.isNull())
    109107        result.append(radius);
     
    111109    if (!centerX.isNull() || !centerY.isNull()) {
    112110        if (!radius.isNull())
    113             result.append(separator);
    114         result.append(at);
    115         result.append(separator);
     111            result.appendLiteral(separator);
     112        result.appendLiteral(at);
     113        result.appendLiteral(separator);
    116114        result.append(centerX);
    117         result.append(separator);
     115        result.appendLiteral(separator);
    118116        result.append(centerY);
    119117    }
    120     result.append(")");
    121     if (box.length()) {
    122         result.append(separator);
     118    result.appendLiteral(")");
     119    if (box.length()) {
     120        result.appendLiteral(separator);
    123121        result.append(box);
    124122    }
  • trunk/Source/WebCore/css/CSSParser.cpp

    r159968 r159979  
    55765576PassRefPtr<CSSPrimitiveValue> CSSParser::parseShapeRadius(CSSParserValue* value)
    55775577{
    5578     if (value->id == CSSValueClosestSide && value->id == CSSValueFarthestSide)
     5578    if (value->id == CSSValueClosestSide || value->id == CSSValueFarthestSide)
    55795579        return cssValuePool().createIdentifierValue(value->id);
    55805580
  • trunk/Source/WebCore/rendering/shapes/Shape.cpp

    r159954 r159979  
    152152
    153153    case BasicShape::BasicShapeCircleType: {
    154         // FIXME implement layout. bug 124619
    155         shape = createRectangleShape(FloatRect(0, 0, boxWidth, boxHeight), FloatSize(0, 0));
     154        const BasicShapeCircle* circle = static_cast<const BasicShapeCircle*>(basicShape);
     155        float centerX = floatValueForCenterCoordinate(circle->centerX(), boxWidth);
     156        float centerY = floatValueForCenterCoordinate(circle->centerY(), boxHeight);
     157        float radius = circle->floatValueForRadiusInBox(boxWidth, boxHeight);
     158        FloatPoint logicalCenter = physicalPointToLogical(FloatPoint(centerX, centerY), logicalBoxSize.height(), writingMode);
     159
     160        shape = createShapeCircle(logicalCenter, radius);
    156161        break;
    157162    }
  • trunk/Source/WebCore/rendering/style/BasicShapes.cpp

    r159968 r159979  
    3232#include "BasicShapes.h"
    3333
     34#include "BasicShapeFunctions.h"
    3435#include "FloatRect.h"
    3536#include "LengthFunctions.h"
     
    4849        && static_cast<const BasicShapePolygon*>(this)->values().size() != static_cast<const BasicShapePolygon*>(other)->values().size())
    4950        return false;
     51
     52    // Circles with keywords for radii or center coordinates cannot be animated.
     53    if (type() == BasicShape::BasicShapeCircleType) {
     54        const BasicShapeCircle* thisCircle = static_cast<const BasicShapeCircle*>(this);
     55        const BasicShapeCircle* otherCircle = static_cast<const BasicShapeCircle*>(other);
     56        if (!thisCircle->radius().canBlend(otherCircle->radius())
     57            || !thisCircle->centerX().canBlend(otherCircle->centerX())
     58            || !thisCircle->centerY().canBlend(otherCircle->centerY()))
     59            return false;
     60    }
    5061
    5162    return true;
     
    111122}
    112123
     124float BasicShapeCircle::floatValueForRadiusInBox(float boxWidth, float boxHeight) const
     125{
     126    if (m_radius.type() == BasicShapeRadius::Value)
     127        return floatValueForLength(m_radius.value(), sqrtf((boxWidth * boxWidth + boxHeight * boxHeight) / 2));
     128
     129    float centerX = floatValueForCenterCoordinate(m_centerX, boxWidth);
     130    float centerY = floatValueForCenterCoordinate(m_centerY, boxHeight);
     131
     132    if (m_radius.type() == BasicShapeRadius::ClosestSide)
     133        return std::min(std::min(centerX, boxWidth - centerX), std::min(centerY, boxHeight - centerY));
     134
     135    // If radius.type() == BasicShapeRadius::FarthestSide.
     136    return std::max(std::max(centerX, boxWidth - centerX), std::max(centerY, boxHeight - centerY));
     137}
     138
    113139void BasicShapeCircle::path(Path& path, const FloatRect& boundingBox)
    114140{
    115141    ASSERT(path.isEmpty());
    116     // FIXME Complete implementation of path. Bug 124619.
    117     // Compute closest-side and farthest-side from boundingBox.
    118     // Compute top, left, bottom, right from boundingBox.
    119     if (m_radius.type() != BasicShapeRadius::Value)
    120         return;
    121     if (m_centerX.keyword() != BasicShapeCenterCoordinate::None || m_centerY.keyword() != BasicShapeCenterCoordinate::None)
    122         return;
    123 
    124     float diagonal = sqrtf((boundingBox.width() * boundingBox.width() + boundingBox.height() * boundingBox.height()) / 2);
    125     float centerX = floatValueForLength(m_centerX.length(), boundingBox.width());
    126     float centerY = floatValueForLength(m_centerY.length(), boundingBox.height());
    127     float radius = floatValueForLength(m_radius.value(), diagonal);
     142
     143    float centerX = floatValueForCenterCoordinate(m_centerX, boundingBox.width());
     144    float centerY = floatValueForCenterCoordinate(m_centerY, boundingBox.height());
     145    float radius = floatValueForRadiusInBox(boundingBox.width(), boundingBox.height());
    128146    path.addEllipse(FloatRect(
    129147        centerX - radius + boundingBox.x(),
     
    139157    const BasicShapeCircle* o = static_cast<const BasicShapeCircle*>(other);
    140158    RefPtr<BasicShapeCircle> result =  BasicShapeCircle::create();
    141 
    142     if (m_radius.type() != BasicShapeRadius::Value || o->radius().type() != BasicShapeRadius::Value) {
    143         result->setCenterX(o->centerX());
    144         result->setCenterY(o->centerY());
    145         result->setRadius(o->radius());
    146         return result;
    147     }
    148159
    149160    result->setCenterX(m_centerX.blend(o->centerX(), progress));
  • trunk/Source/WebCore/rendering/style/BasicShapes.h

    r159968 r159979  
    145145    const Length& length() const { return m_length; }
    146146
     147    bool canBlend(const BasicShapeCenterCoordinate& other) const
     148    {
     149        // FIXME determine how to interpolate between keywords. See bug 125108.
     150        return m_keyword == None && other.keyword() == None;
     151    }
     152
    147153    BasicShapeCenterCoordinate blend(const BasicShapeCenterCoordinate& other, double progress) const
    148154    {
     
    173179    Type type() const { return m_type; }
    174180
     181    bool canBlend(const BasicShapeRadius& other) const
     182    {
     183        // FIXME determine how to interpolate between keywords. See bug 125108.
     184        return m_type == Value && other.type() == Value;
     185    }
     186
    175187    BasicShapeRadius blend(const BasicShapeRadius& other, double progress) const
    176188    {
     
    194206    const BasicShapeCenterCoordinate& centerY() const { return m_centerY; }
    195207    const BasicShapeRadius& radius() const { return m_radius; }
     208    float floatValueForRadiusInBox(float boxWidth, float boxHeight) const;
    196209
    197210    void setCenterX(BasicShapeCenterCoordinate centerX) { m_centerX = std::move(centerX); }
Note: See TracChangeset for help on using the changeset viewer.