Changeset 145982 in webkit


Ignore:
Timestamp:
Mar 15, 2013 9:40:04 PM (11 years ago)
Author:
commit-queue@webkit.org
Message:

[CSS Exclusions] shape-outside on floats for circle and ellipse shapes
​https://bugs.webkit.org/show_bug.cgi?id=98673

Source/WebCore:

Patch by Bem Jones-Bey <Bem Jones-Bey> on 2013-03-15
Reviewed by Dirk Schulze.

Enable circles and ellipses for shape-outside on floats. Most of the
code already supports them, just needed to turn them on and add tests.

Tests: fast/exclusions/shape-outside-floats/shape-outside-floats-simple-circle.html

fast/exclusions/shape-outside-floats/shape-outside-floats-simple-ellipse.html

  • rendering/ExclusionShapeOutsideInfo.cpp:

(WebCore::ExclusionShapeOutsideInfo::isEnabledFor): Enable circles and

ellipses. Also add a check for if the RenderBox is floating, since
that test should have been there all along, as shape outside is
only supported on floats for now.

LayoutTests:

Patch by Bem Jones-Bey <Bem Jones-Bey> on 2013-03-15
Reviewed by Dirk Schulze.

Tests for circles and ellipses on floats.

  • fast/exclusions/resources/rounded-rectangle.js:

(defined): Helper function to test and see if a js value is defined.
(convertToRoundedRect): Convert a circle or ellipse dimensions to a rounded rect.
(generateShapeOutsideOnFloat): Add ability to generate circles and

ellipses, since they are just special cases of rounded rectangles.

(generateSimulatedShapeOutsideOnFloat): Add ability to simulate

circles and ellipses, by treating them as rounded rectangles. Also
fix minor style issue with an if statement.

(xOutset): Remove unneeded condition in if statement.

  • fast/exclusions/shape-outside-floats/shape-outside-floats-simple-circle-expected.html: Added.
  • fast/exclusions/shape-outside-floats/shape-outside-floats-simple-circle.html: Added.
  • fast/exclusions/shape-outside-floats/shape-outside-floats-simple-ellipse-expected.html: Added.
  • fast/exclusions/shape-outside-floats/shape-outside-floats-simple-ellipse.html: Added.
Location:
trunk
Files:
4 added
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r145980 r145982  
     12013-03-15  Bem Jones-Bey  <bjonesbe@adobe.com>
     2
     3        [CSS Exclusions] shape-outside on floats for circle and ellipse shapes
     4        https://bugs.webkit.org/show_bug.cgi?id=98673
     5
     6        Reviewed by Dirk Schulze.
     7       
     8        Tests for circles and ellipses on floats.
     9
     10        * fast/exclusions/resources/rounded-rectangle.js:
     11        (defined): Helper function to test and see if a js value is defined.
     12        (convertToRoundedRect): Convert a circle or ellipse dimensions to a rounded rect.
     13        (generateShapeOutsideOnFloat): Add ability to generate circles and
     14            ellipses, since they are just special cases of rounded rectangles.
     15        (generateSimulatedShapeOutsideOnFloat): Add ability to simulate
     16            circles and ellipses, by treating them as rounded rectangles. Also
     17            fix minor style issue with an if statement.
     18        (xOutset): Remove unneeded condition in if statement.
     19        * fast/exclusions/shape-outside-floats/shape-outside-floats-simple-circle-expected.html: Added.
     20        * fast/exclusions/shape-outside-floats/shape-outside-floats-simple-circle.html: Added.
     21        * fast/exclusions/shape-outside-floats/shape-outside-floats-simple-ellipse-expected.html: Added.
     22        * fast/exclusions/shape-outside-floats/shape-outside-floats-simple-ellipse.html: Added.
     23
    1242013-03-15  Simon Fraser  <simon.fraser@apple.com>
    225

  • trunk/LayoutTests/fast/exclusions/resources/rounded-rectangle.js

    r145847 r145982  
    11if (window.internals)
    22    window.internals.settings.setCSSExclusionsEnabled(true);
     3
     4function defined(value) { return typeof value !== "undefined"; }
     5
     6function convertToRoundedRect(dimensions) {
     7    if (defined(dimensions.shapeCenterX) && defined(dimensions.shapeCenterY)) {
     8        if (defined(dimensions.shapeRadius)) {
     9            // Convert a circle.
     10            dimensions.shapeX = dimensions.shapeCenterX - dimensions.shapeRadius;
     11            dimensions.shapeY = dimensions.shapeCenterY - dimensions.shapeRadius;
     12            dimensions.shapeWidth = dimensions.shapeRadius * 2;
     13            dimensions.shapeHeight = dimensions.shapeRadius * 2;
     14            dimensions.shapeRadiusX = dimensions.shapeRadius;
     15            dimensions.shapeRadiusY = dimensions.shapeRadius;
     16        } else {
     17            // Convert an ellipse.
     18            dimensions.shapeX = dimensions.shapeCenterX - dimensions.shapeRadiusX;
     19            dimensions.shapeY = dimensions.shapeCenterY - dimensions.shapeRadiusY;
     20            dimensions.shapeWidth = dimensions.shapeRadiusX * 2;
     21            dimensions.shapeHeight = dimensions.shapeRadiusY * 2;
     22        }
     23    }
     24    // Otherwise, we have a rounded rect, so no conversion is needed.
     25}
    326
    427function xFromEllipseCenter(yFromEllipseCenter, radiusX, radiusY) {
    … …  
    2144function xOutset(dimensions, lineTop, lineBottom) {
    2245    var left = 0;
    23     if (lineTop < dimensions.shapeHeight && lineBottom > dimensions.shapeHeight)
     46    if (lineBottom > dimensions.shapeHeight)
    2447        lineBottom = dimensions.shapeHeight;
    2548    if (lineTop < dimensions.shapeHeight && (lineTop < dimensions.shapeRadiusY || lineBottom > dimensions.shapeHeight - dimensions.shapeRadiusY)) {
    … …  
    132155
    133156function generateShapeOutsideOnFloat(elementId, stylesheet, dimensions, floatValue, lineHeight) {
    134     stylesheet.insertRule("#" + elementId + " { "
    135         + "-webkit-shape-outside: rectangle("
    136         + dimensions.shapeX + "px, "
    137         + dimensions.shapeY + "px, "
    138         + dimensions.shapeWidth + "px, "
    139         + dimensions.shapeHeight + "px, "
    140         + dimensions.shapeRadiusX + "px, "
    141         + dimensions.shapeRadiusY + "px); "
    142         + "float: " + floatValue + "; }");
     157    if (defined(dimensions.shapeCenterX) && defined(dimensions.shapeCenterY)) { // circle or ellipse
     158        if (defined(dimensions.shapeRadius)) {
     159            stylesheet.insertRule("#" + elementId + " { "
     160                + "-webkit-shape-outside: circle("
     161                + dimensions.shapeCenterX + "px, "
     162                + dimensions.shapeCenterY + "px, "
     163                + dimensions.shapeRadius + "px); "
     164                + "float: " + floatValue + "; }");
     165        } else {
     166            stylesheet.insertRule("#" + elementId + " { "
     167                + "-webkit-shape-outside: ellipse("
     168                + dimensions.shapeCenterX + "px, "
     169                + dimensions.shapeCenterY + "px, "
     170                + dimensions.shapeRadiusX + "px, "
     171                + dimensions.shapeRadiusY + "px); "
     172                + "float: " + floatValue + "; }");
     173        }
     174    } else {
     175        stylesheet.insertRule("#" + elementId + " { "
     176            + "-webkit-shape-outside: rectangle("
     177            + dimensions.shapeX + "px, "
     178            + dimensions.shapeY + "px, "
     179            + dimensions.shapeWidth + "px, "
     180            + dimensions.shapeHeight + "px, "
     181            + dimensions.shapeRadiusX + "px, "
     182            + dimensions.shapeRadiusY + "px); "
     183            + "float: " + floatValue + "; }");
     184    }
     185    convertToRoundedRect(dimensions);
    143186    simulateShapeOutline(elementId, stylesheet, dimensions);
    144187}
    … …  
    147190// if the shape's X and Y are not 0.
    148191function generateSimulatedShapeOutsideOnFloat(elementId, stylesheet, dimensions, floatValue, lineHeight) {
     192    convertToRoundedRect(dimensions);
     193
    149194    var simpleRectangle = dimensions.shapeRadiusX == 0 || dimensions.shapeRadiusY == 0;
    150195    var floatHeight = simpleRectangle ? dimensions.shapeHeight : lineHeight;
    … …  
    168213
    169214    element.insertAdjacentHTML('afterend', simulationHTML);
    170     if (floatValue == "right") {
     215    if (floatValue == "right")
    171216        dimensions.shapeX = -dimensions.shapeWidth;
    172     }
    173     simulateShapeOutline(elementId, stylesheet, dimensions);
    174 }
     217    simulateShapeOutline(elementId, stylesheet, dimensions);
     218}

  • trunk/Source/WebCore/ChangeLog

    r145977 r145982  
     12013-03-15  Bem Jones-Bey  <bjonesbe@adobe.com>
     2
     3        [CSS Exclusions] shape-outside on floats for circle and ellipse shapes
     4        https://bugs.webkit.org/show_bug.cgi?id=98673
     5
     6        Reviewed by Dirk Schulze.
     7
     8        Enable circles and ellipses for shape-outside on floats. Most of the
     9        code already supports them, just needed to turn them on and add tests.
     10
     11        Tests: fast/exclusions/shape-outside-floats/shape-outside-floats-simple-circle.html
     12               fast/exclusions/shape-outside-floats/shape-outside-floats-simple-ellipse.html
     13
     14        * rendering/ExclusionShapeOutsideInfo.cpp:
     15        (WebCore::ExclusionShapeOutsideInfo::isEnabledFor): Enable circles and
     16            ellipses. Also add a check for if the RenderBox is floating, since
     17            that test should have been there all along, as shape outside is
     18            only supported on floats for now.
     19
    1202013-03-15  Christian Biesinger  <cbiesinger@chromium.org>
    221

  • trunk/Source/WebCore/rendering/ExclusionShapeOutsideInfo.cpp

    r144776 r145982  
    3939bool ExclusionShapeOutsideInfo::isEnabledFor(const RenderBox* box)
    4040{
    41     // FIXME: Enable shape outside for non-rectangular shapes! (bug 98664)
    4241    ExclusionShapeValue* value = box->style()->shapeOutside();
    43     return value && (value->type() == ExclusionShapeValue::SHAPE)
    44         && (
    45             (value->shape()->type() == BasicShape::BASIC_SHAPE_RECTANGLE)
    46             || (value->shape()->type() == BasicShape::BASIC_SHAPE_POLYGON)
    47         );
     42    return (box->isFloating() && value && value->type() == ExclusionShapeValue::SHAPE) ? value->shape() : 0;
    4843}
    4944
Note: See TracChangeset for help on using the changeset viewer.