Changeset 147384 in webkit


Ignore:
Timestamp:
Apr 1, 2013 10:39:57 PM (11 years ago)
Author:
hmuller@adobe.com
Message:

[CSS Exclusions] shape-outside on floats fails to respect shape-margin's vertical extent
​https://bugs.webkit.org/show_bug.cgi?id=113600

Reviewed by Dirk Schulze.

Source/WebCore:

ExclusionShapeInsideInfo classes need to depend on the ExclusionShape's padded boundary and
ExclusionShapeOutsideInfo classes should depend on the ExclusionShape's margin boundary. Added
a virtual method to the ExclusionShapeInfo that returns the ExclusionShape's logical bounding box -
computedShapeLogicalBoundingBox() - and overrode that method in the subclasses to return the
value of the appropriate ExclusionShape method. Added shapeMarginLogicalBoundingBox() and
shapePaddingLogicalBoundingBox() methods to ExclusionShape and removed the shapeLogicalBoundingBox()
method, which did not take shape-margin or shape-padding into account.

Test: fast/exclusions/shape-outside-floats/shape-outside-floats-ellipse-margin-bottom.html

  • rendering/ExclusionPolygon.h: Defined the padding and margin bounding box virtual methods.
  • rendering/ExclusionRectangle.h: Defined the padding and margin bounding box virtual methods.
  • rendering/ExclusionShape.h: Added the padding and margin bounding box virtual abstract methods. Removed shapeLogicalBoundingBox().

(ExclusionShape):

  • rendering/ExclusionShapeInfo.h:

(WebCore::ExclusionShapeInfo::shapeLogicalTop): Now calls computedShapeLogicalBoundingBox().
(WebCore::ExclusionShapeInfo::shapeLogicalBottom): Ditto.
(WebCore::ExclusionShapeInfo::shapeLogicalLeft): Ditto.
(WebCore::ExclusionShapeInfo::shapeLogicalRight): Ditto.
(WebCore::ExclusionShapeInfo::shapeLogicalWidth): Ditto.
(WebCore::ExclusionShapeInfo::shapeLogicalHeight): Ditto.
(ExclusionShapeInfo): Added computedShapeLogicalBoundingBox().

  • rendering/ExclusionShapeInsideInfo.h:

(ExclusionShapeInsideInfo):
(WebCore::ExclusionShapeInsideInfo::computedShapeLogicalBoundingBox): Gets the padded shape's bounding box.

  • rendering/ExclusionShapeOutsideInfo.h:

(ExclusionShapeOutsideInfo):
(WebCore::ExclusionShapeOutsideInfo::computedShapeLogicalBoundingBox): Gets the margin shape's bounding box.

LayoutTests:

Corrected the expected values in the ellipse-margin-left and ellipse-margin-right tests because the
shape-outside float layout code now (correctly) takes into account the shape's margin boundary.

  • fast/exclusions/shape-outside-floats/shape-outside-floats-ellipse-margin-bottom-expected.html: Added.
  • fast/exclusions/shape-outside-floats/shape-outside-floats-ellipse-margin-bottom.html: Added.
  • fast/exclusions/shape-outside-floats/shape-outside-floats-ellipse-margin-left-expected.txt:
  • fast/exclusions/shape-outside-floats/shape-outside-floats-ellipse-margin-left.html:
  • fast/exclusions/shape-outside-floats/shape-outside-floats-ellipse-margin-right-expected.txt:
  • fast/exclusions/shape-outside-floats/shape-outside-floats-ellipse-margin-right.html:
Location:
trunk
Files:
2 added
12 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r147383 r147384  
     12013-04-01  Hans Muller  <hmuller@adobe.com>
     2
     3        [CSS Exclusions] shape-outside on floats fails to respect shape-margin's vertical extent
     4        https://bugs.webkit.org/show_bug.cgi?id=113600
     5
     6        Reviewed by Dirk Schulze.
     7
     8        Corrected the expected values in the ellipse-margin-left and ellipse-margin-right tests because the
     9        shape-outside float layout code now (correctly) takes into account the shape's margin boundary.
     10
     11        * fast/exclusions/shape-outside-floats/shape-outside-floats-ellipse-margin-bottom-expected.html: Added.
     12        * fast/exclusions/shape-outside-floats/shape-outside-floats-ellipse-margin-bottom.html: Added.
     13        * fast/exclusions/shape-outside-floats/shape-outside-floats-ellipse-margin-left-expected.txt:
     14        * fast/exclusions/shape-outside-floats/shape-outside-floats-ellipse-margin-left.html:
     15        * fast/exclusions/shape-outside-floats/shape-outside-floats-ellipse-margin-right-expected.txt:
     16        * fast/exclusions/shape-outside-floats/shape-outside-floats-ellipse-margin-right.html:
     17
    1182013-04-01  Adam Barth  <abarth@webkit.org>
    219

  • trunk/LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-ellipse-margin-left-expected.txt

    r147249 r147384  
    11PASS elementRect('s1').top is 0
    2 PASS elementRect('s1').left is 373
     2PASS elementRect('s1').left is 347
    33PASS elementRect('s2').top is 20
    4 PASS elementRect('s2').left is 397
     4PASS elementRect('s2').left is 390
    55PASS elementRect('s3').top is 40
    6 PASS elementRect('s3').left is 413
     6PASS elementRect('s3').left is 417
    77The left edges of the three black squares should follow the outer ellipse boundary and each square should appear on a subsequent line.
    88

  • trunk/LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-ellipse-margin-left.html

    r147249 r147384  
    3333    position: absolute;
    3434    display:block;
    35     top: 0px;
    36     left: 0px;
     35    top: -25px;
     36    left: -25px;
    3737    width: 500px;
    3838    height: 300px;
    … …  
    4646        <div id="float-left">
    4747            <svg id="svg-shape-ellipse" xmlns="http://www.w3.org/2000/">
    48                 <ellipse cx="200" cy="100" rx="200" ry="100" fill="green"></ellipse>
    49                 <ellipse cx="200" cy="100" rx="225" ry="125" fill="none" stroke="green"></ellipse>
     48                <ellipse cx="225" cy="125" rx="200" ry="100" fill="green"></ellipse>
     49                <ellipse cx="225" cy="125" rx="225" ry="125" fill="none" stroke="green"></ellipse>
    5050            </svg>
    5151        </div>
    … …  
    6464// You'll find the equation for the X intercept of an elliptical arc here (among other places):
    6565// http://hansmuller-webkit.blogspot.com/2012/07/computing-horizonal-rounded-rectangle.html
    66 //
    67 // Note also: only the "ellipse(200px, 100px, 200px, 100px)" itself fits within the container element.  The margin
    68 // ellipse extends above and to the left by another 25 pixels.  The +25 adjustment to Y accounts for this.
    69 
    7066
    7167function marginEllipseLeftXIntercept(y, cx, rx, ry)
    7268{
    73     return String( SubPixelLayout.roundLineLeft(cx + rx * Math.sqrt(1 - Math.pow((ry - (y + 25)) / ry, 2))) );
     69    return String( SubPixelLayout.roundLineLeft(cx + rx * Math.sqrt(1 - Math.pow((ry - y) / ry, 2))) );
    7470}
    7571
    … …  
    8076
    8177shouldBe("elementRect('s1').top", "0");
    82 shouldBe("elementRect('s1').left", marginEllipseLeftXIntercept(20, 200, 225, 125));
     78shouldBe("elementRect('s1').left", marginEllipseLeftXIntercept(20, 225, 225, 125));
    8379
    8480shouldBe("elementRect('s2').top", "20");
    85 shouldBe("elementRect('s2').left", marginEllipseLeftXIntercept(40, 200, 225, 125));
     81shouldBe("elementRect('s2').left", marginEllipseLeftXIntercept(40, 225, 225, 125));
    8682
    8783shouldBe("elementRect('s3').top", "40");
    88 shouldBe("elementRect('s3').left", marginEllipseLeftXIntercept(60, 200, 225, 125));
     84shouldBe("elementRect('s3').left", marginEllipseLeftXIntercept(60, 225, 225, 125));
    8985
    9086</script>

  • trunk/LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-ellipse-margin-right-expected.txt

    r147249 r147384  
    11PASS elementRect('s1').top is 0
    2 PASS elementRect('s1').right is 127
     2PASS elementRect('s1').right is 152
    33PASS elementRect('s2').top is 20
    4 PASS elementRect('s2').right is 102
     4PASS elementRect('s2').right is 110
    55PASS elementRect('s3').top is 40
    6 PASS elementRect('s3').right is 86
     6PASS elementRect('s3').right is 82
    77The right edges of the three black squares should follow the outer ellipse boundary and each square should appear on a subsequent line.
    88

  • trunk/LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-ellipse-margin-right.html

    r147249 r147384  
    3434    position: absolute;
    3535    display:block;
    36     top: 0px;
    37     left: -50px;
     36    top: -25px;
     37    left: -25px;
    3838    width: 500px;
    3939    height: 300px;
    … …  
    4747        <div id="float-right">
    4848            <svg id="svg-shape-ellipse" xmlns="http://www.w3.org/2000/">
    49                 <ellipse cx="250" cy="100" rx="200" ry="100" fill="green"></ellipse>
    50                 <ellipse cx="250" cy="100" rx="225" ry="125" fill="none" stroke="green"></ellipse>
     49                <ellipse cx="225" cy="125" rx="200" ry="100" fill="green"></ellipse>
     50                <ellipse cx="225" cy="125" rx="225" ry="125" fill="none" stroke="green"></ellipse>
    5151            </svg>
    5252        </div>
    … …  
    6565// You'll find the equation for the X intercept of an elliptical arc here (among other places):
    6666// http://hansmuller-webkit.blogspot.com/2012/07/computing-horizonal-rounded-rectangle.html
    67 //
    68 // Note also: only the "ellipse(200px, 100px, 200px, 100px)" itself fits within the container element.  The margin
    69 // ellipse extends above and to the left by another 25 pixels.  The +25 adjustment to Y accounts for this.
    70 
    7167
    7268function marginEllipseRightXIntercept(y, cx, rx, ry)
    7369{
    7470    var containerWidth = document.getElementById("container").getBoundingClientRect().width;
    75     return String( SubPixelLayout.roundLineRight(containerWidth - (cx + rx * Math.sqrt(1 - Math.pow((ry - (y + 25)) / ry, 2)))) );
     71    return String( SubPixelLayout.roundLineRight(containerWidth - (cx + rx * Math.sqrt(1 - Math.pow((ry - y) / ry, 2)))) );
    7672}
    7773
    … …  
    8278
    8379shouldBe("elementRect('s1').top", "0");
    84 shouldBe("elementRect('s1').right", marginEllipseRightXIntercept(20, 200, 225, 125));
     80shouldBe("elementRect('s1').right", marginEllipseRightXIntercept(20, 225, 225, 125));
    8581
    8682shouldBe("elementRect('s2').top", "20");
    87 shouldBe("elementRect('s2').right", marginEllipseRightXIntercept(40, 200, 225, 125));
     83shouldBe("elementRect('s2').right", marginEllipseRightXIntercept(40, 225, 225, 125));
    8884
    8985shouldBe("elementRect('s3').top", "40");
    90 shouldBe("elementRect('s3').right", marginEllipseRightXIntercept(60, 200, 225, 125));
     86shouldBe("elementRect('s3').right", marginEllipseRightXIntercept(60, 225, 225, 125));
    9187
    9288</script>

  • trunk/Source/WebCore/ChangeLog

    r147383 r147384  
     12013-04-01  Hans Muller  <hmuller@adobe.com>
     2
     3        [CSS Exclusions] shape-outside on floats fails to respect shape-margin's vertical extent
     4        https://bugs.webkit.org/show_bug.cgi?id=113600
     5
     6        Reviewed by Dirk Schulze.
     7
     8        ExclusionShapeInsideInfo classes need to depend on the ExclusionShape's padded boundary and
     9        ExclusionShapeOutsideInfo classes should depend on the ExclusionShape's margin boundary. Added
     10        a virtual method to the ExclusionShapeInfo that returns the ExclusionShape's logical bounding box -
     11        computedShapeLogicalBoundingBox() - and overrode that method in the subclasses to return the
     12        value of the appropriate ExclusionShape method. Added shapeMarginLogicalBoundingBox() and
     13        shapePaddingLogicalBoundingBox() methods to ExclusionShape and removed the shapeLogicalBoundingBox()
     14        method, which did not take shape-margin or shape-padding into account.
     15
     16        Test: fast/exclusions/shape-outside-floats/shape-outside-floats-ellipse-margin-bottom.html
     17
     18        * rendering/ExclusionPolygon.h: Defined the padding and margin bounding box virtual methods.
     19        * rendering/ExclusionRectangle.h: Defined the padding and margin bounding box virtual methods.
     20        * rendering/ExclusionShape.h: Added the padding and margin bounding box virtual abstract methods. Removed shapeLogicalBoundingBox().
     21        (ExclusionShape):
     22        * rendering/ExclusionShapeInfo.h:
     23        (WebCore::ExclusionShapeInfo::shapeLogicalTop): Now calls computedShapeLogicalBoundingBox().
     24        (WebCore::ExclusionShapeInfo::shapeLogicalBottom): Ditto.
     25        (WebCore::ExclusionShapeInfo::shapeLogicalLeft): Ditto.
     26        (WebCore::ExclusionShapeInfo::shapeLogicalRight): Ditto.
     27        (WebCore::ExclusionShapeInfo::shapeLogicalWidth): Ditto.
     28        (WebCore::ExclusionShapeInfo::shapeLogicalHeight): Ditto.
     29        (ExclusionShapeInfo): Added computedShapeLogicalBoundingBox().
     30        * rendering/ExclusionShapeInsideInfo.h:
     31        (ExclusionShapeInsideInfo):
     32        (WebCore::ExclusionShapeInsideInfo::computedShapeLogicalBoundingBox): Gets the padded shape's bounding box.
     33        * rendering/ExclusionShapeOutsideInfo.h:
     34        (ExclusionShapeOutsideInfo):
     35        (WebCore::ExclusionShapeOutsideInfo::computedShapeLogicalBoundingBox): Gets the margin shape's bounding box.
     36
    1372013-04-01  Adam Barth  <abarth@webkit.org>
    238

  • trunk/Source/WebCore/rendering/ExclusionPolygon.h

    r147111 r147384  
    8181    }
    8282
    83     virtual FloatRect shapeLogicalBoundingBox() const OVERRIDE { return m_polygon.boundingBox(); }
     83    virtual FloatRect shapeMarginLogicalBoundingBox() const OVERRIDE { return shapeMarginBounds().boundingBox(); }
     84    virtual FloatRect shapePaddingLogicalBoundingBox() const OVERRIDE { return shapePaddingBounds().boundingBox(); }
    8485    virtual bool isEmpty() const OVERRIDE { return m_polygon.isEmpty(); }
    8586    virtual void getExcludedIntervals(float logicalTop, float logicalHeight, SegmentList&) const OVERRIDE;

  • trunk/Source/WebCore/rendering/ExclusionRectangle.h

    r144258 r147384  
    6969    }
    7070
    71     virtual FloatRect shapeLogicalBoundingBox() const OVERRIDE { return m_bounds; }
     71    virtual FloatRect shapeMarginLogicalBoundingBox() const OVERRIDE { return shapeMarginBounds(); }
     72    virtual FloatRect shapePaddingLogicalBoundingBox() const OVERRIDE { return shapePaddingBounds(); }
    7273    virtual bool isEmpty() const OVERRIDE { return m_bounds.isEmpty(); }
    7374    virtual void getExcludedIntervals(float logicalTop, float logicalHeight, SegmentList&) const OVERRIDE;

  • trunk/Source/WebCore/rendering/ExclusionShape.h

    r144258 r147384  
    6666    float shapeMargin() const { return m_margin; }
    6767    float shapePadding() const { return m_padding; }
    68     virtual FloatRect shapeLogicalBoundingBox() const = 0;
     68    virtual FloatRect shapeMarginLogicalBoundingBox() const = 0;
     69    virtual FloatRect shapePaddingLogicalBoundingBox() const = 0;
    6970    virtual bool isEmpty() const = 0;
    7071    virtual void getIncludedIntervals(float logicalTop, float logicalHeight, SegmentList&) const = 0;

  • trunk/Source/WebCore/rendering/ExclusionShapeInfo.h

    r144776 r147384  
    8787    virtual bool computeSegmentsForLine(LayoutUnit lineTop, LayoutUnit lineHeight);
    8888
    89     LayoutUnit shapeLogicalTop() const { return floatLogicalTopToLayoutUnit(computedShape()->shapeLogicalBoundingBox().y()) + logicalTopOffset(); }
    90     LayoutUnit shapeLogicalBottom() const { return floatLogicalBottomToLayoutUnit(computedShape()->shapeLogicalBoundingBox().maxY()) + logicalTopOffset(); }
    91     LayoutUnit shapeLogicalLeft() const { return computedShape()->shapeLogicalBoundingBox().x() + logicalLeftOffset(); }
    92     LayoutUnit shapeLogicalRight() const { return computedShape()->shapeLogicalBoundingBox().maxX() + logicalLeftOffset(); }
    93     LayoutUnit shapeLogicalWidth() const { return computedShape()->shapeLogicalBoundingBox().width(); }
    94     LayoutUnit shapeLogicalHeight() const { return computedShape()->shapeLogicalBoundingBox().height(); }
     89    LayoutUnit shapeLogicalTop() const { return floatLogicalTopToLayoutUnit(computedShapeLogicalBoundingBox().y()) + logicalTopOffset(); }
     90    LayoutUnit shapeLogicalBottom() const { return floatLogicalBottomToLayoutUnit(computedShapeLogicalBoundingBox().maxY()) + logicalTopOffset(); }
     91    LayoutUnit shapeLogicalLeft() const { return computedShapeLogicalBoundingBox().x() + logicalLeftOffset(); }
     92    LayoutUnit shapeLogicalRight() const { return computedShapeLogicalBoundingBox().maxX() + logicalLeftOffset(); }
     93    LayoutUnit shapeLogicalWidth() const { return computedShapeLogicalBoundingBox().width(); }
     94    LayoutUnit shapeLogicalHeight() const { return computedShapeLogicalBoundingBox().height(); }
    9595
    9696    LayoutUnit logicalLineTop() const { return m_shapeLineTop + logicalTopOffset(); }
    … …  
    107107
    108108    const ExclusionShape* computedShape() const;
     109    virtual FloatRect computedShapeLogicalBoundingBox() const = 0;
    109110
    110111    // Use ceil and floor to ensure that the returned LayoutUnit value is within the shape's bounds.

  • trunk/Source/WebCore/rendering/ExclusionShapeInsideInfo.h

    r145610 r147384  
    9898    bool needsLayout() { return m_needsLayout; }
    9999
     100protected:
     101    virtual FloatRect computedShapeLogicalBoundingBox() const OVERRIDE { return computedShape()->shapePaddingLogicalBoundingBox(); }
     102
    100103private:
    101104    ExclusionShapeInsideInfo(const RenderBlock* renderer)

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

    r144776 r147384  
    5151    static PassOwnPtr<ExclusionShapeOutsideInfo> createInfo(const RenderBox* renderer) { return adoptPtr(new ExclusionShapeOutsideInfo(renderer)); }
    5252    static bool isEnabledFor(const RenderBox*);
     53
     54protected:
     55    virtual FloatRect computedShapeLogicalBoundingBox() const OVERRIDE { return computedShape()->shapeMarginLogicalBoundingBox(); }
     56
    5357private:
    5458    ExclusionShapeOutsideInfo(const RenderBox* renderer) : ExclusionShapeInfo<RenderBox, &RenderStyle::shapeOutside, &ExclusionShape::getExcludedIntervals>(renderer) { }
Note: See TracChangeset for help on using the changeset viewer.