Changeset 145847 in webkit


Ignore:
Timestamp:
Mar 14, 2013 2:10:44 PM (11 years ago)
Author:
commit-queue@webkit.org
Message:

[CSS Exclusions] shape-outside on floats for rounded rectangle shapes
https://bugs.webkit.org/show_bug.cgi?id=100299

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

Adding tests for rounded rectangles. The code already supports them,
but that was more of a happy accident. These tests makes it more
likely to stay that way.

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

(xOutset): Function to determine the offset for the outside shape.
(generateShapeOutsideOnFloat): Generate a shape outside on a float.
(generateSimulatedShapeOutsideOnFloat): Simulate a shape outside on a

float using a large number of smaller floats.

  • fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-expected.html: Added.
  • fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle.html: Added.
Location:
trunk/LayoutTests
Files:
2 added
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r145844 r145847  
     12013-03-14  Bem Jones-Bey  <bjonesbe@adobe.com>
     2
     3        [CSS Exclusions] shape-outside on floats for rounded rectangle shapes
     4        https://bugs.webkit.org/show_bug.cgi?id=100299
     5
     6        Reviewed by Dirk Schulze.
     7
     8        Adding tests for rounded rectangles. The code already supports them,
     9        but that was more of a happy accident. These tests makes it more
     10        likely to stay that way.
     11
     12        * fast/exclusions/resources/rounded-rectangle.js:
     13        (xOutset): Function to determine the offset for the outside shape.
     14        (generateShapeOutsideOnFloat): Generate a shape outside on a float.
     15        (generateSimulatedShapeOutsideOnFloat): Simulate a shape outside on a
     16            float using a large number of smaller floats.
     17        * fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle-expected.html: Added.
     18        * fast/exclusions/shape-outside-floats/shape-outside-floats-simple-rounded-rectangle.html: Added.
     19
    1202013-03-14  Robert Flack  <flackr@chromium.org>
    221
  • trunk/LayoutTests/fast/exclusions/resources/rounded-rectangle.js

    r133384 r145847  
    1515        var yFromEllipseCenter = Math.max((dimensions.shapeRadiusY - lineTop), lineBottom - (dimensions.shapeHeight - dimensions.shapeRadiusY));
    1616        left = dimensions.shapeRadiusX - xFromEllipseCenter(yFromEllipseCenter, dimensions.shapeRadiusX, dimensions.shapeRadiusY);
     17    }
     18    return left;
     19}
     20
     21function xOutset(dimensions, lineTop, lineBottom) {
     22    var left = 0;
     23    if (lineTop < dimensions.shapeHeight && lineBottom > dimensions.shapeHeight)
     24        lineBottom = dimensions.shapeHeight;
     25    if (lineTop < dimensions.shapeHeight && (lineTop < dimensions.shapeRadiusY || lineBottom > dimensions.shapeHeight - dimensions.shapeRadiusY)) {
     26        var yFromEllipseCenter;
     27        if (lineBottom < dimensions.shapeRadiusY) {
     28            yFromEllipseCenter = lineBottom - dimensions.shapeRadiusY;
     29            left = dimensions.shapeRadiusX - xFromEllipseCenter(yFromEllipseCenter, dimensions.shapeRadiusX, dimensions.shapeRadiusY);
     30        } else if (lineTop > dimensions.shapeHeight - dimensions.shapeRadiusY) {
     31            yFromEllipseCenter = lineTop - (dimensions.shapeHeight - dimensions.shapeRadiusY);
     32            left = dimensions.shapeRadiusX - xFromEllipseCenter(yFromEllipseCenter, dimensions.shapeRadiusX, dimensions.shapeRadiusY);
     33        }
    1734    }
    1835    return left;
     
    113130    element.appendChild(p);
    114131}
     132
     133function 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 + "; }");
     143    simulateShapeOutline(elementId, stylesheet, dimensions);
     144}
     145
     146// Note that this does not attempt to simulate where the float content would be
     147// if the shape's X and Y are not 0.
     148function generateSimulatedShapeOutsideOnFloat(elementId, stylesheet, dimensions, floatValue, lineHeight) {
     149    var simpleRectangle = dimensions.shapeRadiusX == 0 || dimensions.shapeRadiusY == 0;
     150    var floatHeight = simpleRectangle ? dimensions.shapeHeight : lineHeight;
     151
     152    stylesheet.insertRule("#" + elementId + " { float: " + floatValue + " }");
     153    stylesheet.insertRule("." + elementId + "-float { "
     154            + "height: " + floatHeight + "px; "
     155            + "float: " + floatValue + ";"
     156            + "clear: " + floatValue + "; }");
     157
     158    var element = document.getElementById(elementId);
     159    var simulationHTML = "";
     160
     161    for (var y = 0; y < dimensions.shapeHeight; y+= floatHeight) {
     162        var outset = simpleRectangle ? 0 : xOutset(dimensions, y, y + lineHeight);
     163
     164        var width = dimensions.shapeWidth - outset;
     165
     166        simulationHTML += '<div class="' + elementId + '-float" style="width:' + width + 'px"></div>\n';
     167    }
     168
     169    element.insertAdjacentHTML('afterend', simulationHTML);
     170    if (floatValue == "right") {
     171        dimensions.shapeX = -dimensions.shapeWidth;
     172    }
     173    simulateShapeOutline(elementId, stylesheet, dimensions);
     174}
Note: See TracChangeset for help on using the changeset viewer.