Properly handle bottom margin on float with shape-outside
authorbjonesbe@adobe.com <bjonesbe@adobe.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 24 Sep 2013 19:02:59 +0000 (19:02 +0000)
committerbjonesbe@adobe.com <bjonesbe@adobe.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 24 Sep 2013 19:02:59 +0000 (19:02 +0000)
https://bugs.webkit.org/show_bug.cgi?id=121808

Reviewed by David Hyatt.

Source/WebCore:

When a float has a shape-outside, inline content must conform to the
shape, not to the margin box. Thus, if a float with shape-outside has
a bottom margin and the shape does not intrude into that margin, then
the inline content should ignore the margin. Before this patch, inline
content would drop below the margin box instead of obeying the shape.

Note that content that should clear the float still clears the margin
box, not the shape's contour.

Tests: csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-002.html
       csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-003.html
       csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-004.html

* rendering/LineWidth.cpp:
(WebCore::LineWidth::fitBelowFloats): Compute the logical bottom based
on the shape.
* rendering/RenderBlock.cpp:
(WebCore::RenderBlock::nextFloatLogicalBottomBelow): Add option to
compute the logical bottom based on the shape instead of on the margin
box.
* rendering/RenderBlock.h:

LayoutTests:

Import new tests for floats wish shape-outside and bottom margins.

* csswg/contributors/adobe/submitted/shapes/shape-outside/resources/w3c-import.log:
* csswg/contributors/adobe/submitted/shapes/shape-outside/resources/rounded-rectangle.js: Remove whitespace at ends of lines.
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-002.html: Added.
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-003-expected.html: Added.
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-003.html: Added.
* csswg/contributors/adobe/submitted/shapes/shape-outside/w3c-import.log:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@156346 268f45cc-cd09-0410-ab3c-d52691b4dbfc

13 files changed:
LayoutTests/ChangeLog
LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/resources/rounded-rectangle.js
LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/resources/w3c-import.log
LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-002.html [new file with mode: 0644]
LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-003-expected.html [new file with mode: 0644]
LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-003.html [new file with mode: 0644]
LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-004-expected.html [new file with mode: 0644]
LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-004.html [new file with mode: 0644]
LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/w3c-import.log
Source/WebCore/ChangeLog
Source/WebCore/rendering/LineWidth.cpp
Source/WebCore/rendering/RenderBlock.cpp
Source/WebCore/rendering/RenderBlock.h

index 0263785..cf1103c 100644 (file)
@@ -1,3 +1,19 @@
+2013-09-24  Bem Jones-Bey  <bjonesbe@adobe.com>
+
+        Properly handle bottom margin on float with shape-outside
+        https://bugs.webkit.org/show_bug.cgi?id=121808
+
+        Reviewed by David Hyatt.
+
+        Import new tests for floats wish shape-outside and bottom margins.
+
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/resources/w3c-import.log:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/resources/rounded-rectangle.js: Remove whitespace at ends of lines.
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-002.html: Added.
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-003-expected.html: Added.
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-003.html: Added.
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/w3c-import.log:
+
 2013-09-24  Denis Nomiyama  <d.nomiyama@samsung.com>
 
         [ATK] Missing WTR AccessibilityController::addNotificationListener implementation
index 0dd3563..d3900a7 100644 (file)
@@ -1,4 +1,4 @@
-function ellipseXIntercept(yi, rx, ry) 
+function ellipseXIntercept(yi, rx, ry)
 {
     return rx * Math.sqrt(1 - (yi * yi) / (ry * ry));
 }
@@ -38,10 +38,10 @@ function genLeftRoundedRectFloatShapeOutsideRefTest(args)
 {
     var leftRoundedRect = args.roundedRect;
     var leftRoundedRectIntervals = scanConvertRoundedRectangleOutside(leftRoundedRect, args.containerHeight, args.lineHeight);
-    var leftFloatDivs = leftRoundedRectIntervals.map(function(interval) { 
+    var leftFloatDivs = leftRoundedRectIntervals.map(function(interval) {
         var width = SubPixelLayout.snapToLayoutUnit(interval.right);
         var cls = "left-" + args.floatElementClassSuffix;
-        return '<div class="' + cls + '" style="width:' + width + 'px"></div>'; 
+        return '<div class="' + cls + '" style="width:' + width + 'px"></div>';
     });
     document.getElementById("left-" + args.insertElementIdSuffix).insertAdjacentHTML('afterend', leftFloatDivs.join("\n"));
 }
@@ -51,10 +51,10 @@ function genRightRoundedRectFloatShapeOutsideRefTest(args)
     var rightRoundedRect = Object.create(args.roundedRect);
     rightRoundedRect.x = args.containerWidth - args.roundedRect.width;
     var rightRoundedRectIntervals = scanConvertRoundedRectangleOutside(rightRoundedRect, args.containerHeight, args.lineHeight);
-    var rightFloatDivs = rightRoundedRectIntervals.map(function(interval) { 
+    var rightFloatDivs = rightRoundedRectIntervals.map(function(interval) {
         var width = args.containerWidth - SubPixelLayout.snapToLayoutUnit(interval.left);
         var cls = "right-" + args.floatElementClassSuffix;
-        return '<div class="' + cls + '" style="width:' + width + 'px"></div>'; 
+        return '<div class="' + cls + '" style="width:' + width + 'px"></div>';
     });
     document.getElementById("right-" + args.insertElementIdSuffix).insertAdjacentHTML('afterend', rightFloatDivs.join("\n"));
 }
index b62ac0f..50e7160 100644 (file)
@@ -8,7 +8,7 @@ Then run the Tools/Scripts/import-w3c-tests in Webkit to reimport
 Do NOT modify or remove this file
 
 ------------------------------------------------------------------------
-Last Import: 2013-09-20 11:30
+Last Import: 2013-09-24 10:40
 W3C Mercurial changeset: Not Available
 Test status at time of import: unknown
 ------------------------------------------------------------------------
diff --git a/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-002.html b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-002.html
new file mode 100644 (file)
index 0000000..99c6d7a
--- /dev/null
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<title>CSS Test: shape-outside on floats with a positive bottom margin</title>
+<link rel="author" title="Adobe" href="http://html.adobe.com/">
+<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
+<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#shape-margin-property">
+<link rel="match" href="shape-outside-floats-margin-001-ref.html">
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+    font: 20px/1 Ahem, sans-serif;
+    line-height: 20px;
+    width: 100px;
+    height: 40px;
+    border: 1px solid black;
+    color: green;
+    display: inline-block;
+    background-color: red;
+}
+
+#float-left {
+    float: left;
+    width: 100px;
+    height: 20px;
+    -webkit-shape-outside: rectangle(0, 0, 50%, 100%);
+    margin-bottom: 20px;
+    background-color: green;
+}
+
+#float-right {
+    float: right;
+    width: 100px;
+    height: 20px;
+    -webkit-shape-outside: rectangle(0, 0, 50%, 100%);
+    margin-bottom: 20px;
+    background-color: green;
+}
+</style>
+
+<body>
+    <p>This should display two green rectangles. You should not see any red.</p>
+    <div class="container">
+        <div id="float-left">
+        </div>
+        XXXXX
+    </div>
+    <div class="container">
+        <div id="float-right">
+        </div>
+        XXXXX
+    </div>
+</body>
diff --git a/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-003-expected.html b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-003-expected.html
new file mode 100644 (file)
index 0000000..6aba2ce
--- /dev/null
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<title>CSS Reference</title>
+<link rel="author" title="Adobe" href="http://html.adobe.com/">
+<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
+<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#shape-margin-property">
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+    font: 20px/1 Ahem, sans-serif;
+    line-height: 20px;
+    width: 100px;
+    height: 60px;
+    border: 1px solid black;
+    color: green;
+    display: inline-block;
+    background-color: red;
+}
+
+#float-left {
+    float: left;
+    width: 100px;
+    height: 20px;
+    background-color: green;
+}
+
+#float-right {
+    float: right;
+    width: 100px;
+    height: 20px;
+    background-color: green;
+}
+</style>
+
+<body>
+    <p>This should display two green rectangles. You should not see any red.</p>
+    <div class="container">
+        XXXXX
+        <div id="float-left">
+        </div>
+        XXXXX
+    </div>
+    <div class="container">
+        XXXXX
+        <div id="float-right">
+        </div>
+        XXXXX
+    </div>
+</body>
diff --git a/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-003.html b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-003.html
new file mode 100644 (file)
index 0000000..d9403d6
--- /dev/null
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<title>CSS Test: shape-outside on floats with a positive bottom margin</title>
+<link rel="author" title="Adobe" href="http://html.adobe.com/">
+<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
+<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#shape-margin-property">
+<link rel="match" href="shape-outside-floats-margin-003-ref.html">
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+    font: 20px/1 Ahem, sans-serif;
+    line-height: 20px;
+    width: 100px;
+    height: 60px;
+    border: 1px solid black;
+    color: green;
+    display: inline-block;
+    background-color: red;
+}
+
+#float-left {
+    float: left;
+    width: 100px;
+    height: 20px;
+    -webkit-shape-outside: rectangle(0, 0, 50%, 100%);
+    margin-top: 20px;
+    margin-bottom: 20px;
+    background-color: green;
+}
+
+#float-right {
+    float: right;
+    width: 100px;
+    height: 20px;
+    -webkit-shape-outside: rectangle(0, 0, 50%, 100%);
+    margin-top: 20px;
+    margin-bottom: 20px;
+    background-color: green;
+}
+</style>
+
+<body>
+    <p>This should display two green rectangles. You should not see any red.</p>
+    <div class="container">
+        <div id="float-left">
+        </div>
+        XXXXX XXXXX
+    </div>
+    <div class="container">
+        <div id="float-right">
+        </div>
+        XXXXX XXXXX
+    </div>
+</body>
diff --git a/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-004-expected.html b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-004-expected.html
new file mode 100644 (file)
index 0000000..a42bf08
--- /dev/null
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<title>CSS Reference</title>
+<link rel="author" title="Adobe" href="http://html.adobe.com/">
+<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
+<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#shape-margin-property">
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+    font: 20px/1 Ahem, sans-serif;
+    line-height: 20px;
+    width: 60px;
+    height: 100px;
+    border: 1px solid black;
+    color: green;
+    display: inline-block;
+    background-color: red;
+    -webkit-writing-mode: vertical-lr;
+}
+
+#float-left {
+    float: left;
+    width: 20px;
+    height: 100px;
+    background-color: green;
+}
+
+#float-right {
+    float: right;
+    width: 20px;
+    height: 100px;
+    background-color: green;
+}
+</style>
+
+<body>
+    <p>This should display two green rectangles. You should not see any red.</p>
+    <div class="container">
+        XXXXX
+        <div id="float-left">
+        </div>
+        XXXXX
+    </div>
+    <div class="container">
+        XXXXX
+        <div id="float-right">
+        </div>
+        XXXXX
+    </div>
+</body>
diff --git a/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-004.html b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-004.html
new file mode 100644 (file)
index 0000000..aadc9b3
--- /dev/null
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<title>CSS Test: shape-outside on floats with a positive bottom margin</title>
+<link rel="author" title="Adobe" href="http://html.adobe.com/">
+<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
+<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#shape-margin-property">
+<link rel="match" href="shape-outside-floats-margin-004-ref.html">
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+    font: 20px/1 Ahem, sans-serif;
+    line-height: 20px;
+    width: 60px;
+    height: 100px;
+    border: 1px solid black;
+    color: green;
+    display: inline-block;
+    background-color: red;
+    -webkit-writing-mode: vertical-lr;
+}
+
+#float-left {
+    float: left;
+    width: 20px;
+    height: 100px;
+    -webkit-shape-outside: rectangle(0, 0, 100%, 100%);
+    margin-right: 20px;
+    background-color: green;
+}
+
+#float-right {
+    float: right;
+    width: 20px;
+    height: 100px;
+    -webkit-shape-outside: rectangle(0, 0, 100%, 100%);
+    margin-right: 20px;
+    background-color: green;
+}
+</style>
+
+<body>
+    <p>This should display two green rectangles. You should not see any red.</p>
+    <div class="container">
+        XXXXX 
+        <div id="float-left">
+        </div>
+        XXXXX
+    </div>
+    <div class="container">
+        XXXXX 
+        <div id="float-right">
+        </div>
+        XXXXX
+    </div>
+</body>
index ba21edb..68d90cb 100644 (file)
@@ -8,7 +8,7 @@ Then run the Tools/Scripts/import-w3c-tests in Webkit to reimport
 Do NOT modify or remove this file
 
 ------------------------------------------------------------------------
-Last Import: 2013-09-20 11:30
+Last Import: 2013-09-24 10:40
 W3C Mercurial changeset: Not Available
 Test status at time of import: unknown
 ------------------------------------------------------------------------
@@ -42,6 +42,12 @@ List of files:
 /LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-000.html
 /LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-001-expected.html
 /LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-001.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-002-expected.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-002.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-003-expected.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-003.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-004-expected.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-004.html
 /LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-polygon-000-expected.html
 /LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-polygon-000.html
 /LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-polygon-001-expected.html
index 27e0d9b..99765ad 100644 (file)
@@ -1,3 +1,32 @@
+2013-09-24  Bem Jones-Bey  <bjonesbe@adobe.com>
+
+        Properly handle bottom margin on float with shape-outside
+        https://bugs.webkit.org/show_bug.cgi?id=121808
+
+        Reviewed by David Hyatt.
+
+        When a float has a shape-outside, inline content must conform to the
+        shape, not to the margin box. Thus, if a float with shape-outside has
+        a bottom margin and the shape does not intrude into that margin, then
+        the inline content should ignore the margin. Before this patch, inline
+        content would drop below the margin box instead of obeying the shape.
+        
+        Note that content that should clear the float still clears the margin
+        box, not the shape's contour.
+
+        Tests: csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-002.html
+               csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-003.html
+               csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-margin-004.html
+
+        * rendering/LineWidth.cpp:
+        (WebCore::LineWidth::fitBelowFloats): Compute the logical bottom based
+        on the shape.
+        * rendering/RenderBlock.cpp:
+        (WebCore::RenderBlock::nextFloatLogicalBottomBelow): Add option to
+        compute the logical bottom based on the shape instead of on the margin
+        box.
+        * rendering/RenderBlock.h:
+
 2013-09-24  Lorenzo Tilve  <ltilve@igalia.com>
 
         [GTK] Fix compilation problems when setting ENABLE_DRAG_SUPPORT = FALSE
index 56af3ff..b41c71b 100644 (file)
@@ -181,7 +181,7 @@ void LineWidth::fitBelowFloats()
     float newLineLeft = m_left;
     float newLineRight = m_right;
     while (true) {
-        floatLogicalBottom = m_block.nextFloatLogicalBottomBelow(lastFloatLogicalBottom);
+        floatLogicalBottom = m_block.nextFloatLogicalBottomBelow(lastFloatLogicalBottom, ShapeOutsideFloatShapeOffset);
         if (floatLogicalBottom <= lastFloatLogicalBottom)
             break;
 
index a584729..5a62ccd 100644 (file)
@@ -3737,7 +3737,7 @@ LayoutUnit RenderBlock::adjustLogicalRightOffsetForLine(LayoutUnit offsetFromFlo
     return right;
 }
 
-LayoutUnit RenderBlock::nextFloatLogicalBottomBelow(LayoutUnit logicalHeight) const
+LayoutUnit RenderBlock::nextFloatLogicalBottomBelow(LayoutUnit logicalHeight, ShapeOutsideFloatOffsetMode offsetMode) const
 {
     if (!m_floatingObjects)
         return logicalHeight;
@@ -3747,7 +3747,14 @@ LayoutUnit RenderBlock::nextFloatLogicalBottomBelow(LayoutUnit logicalHeight) co
     auto end = floatingObjectSet.end();
     for (auto it = floatingObjectSet.begin(); it != end; ++it) {
         FloatingObject* r = it->get();
-        LayoutUnit floatBottom = r->logicalBottom(isHorizontalWritingMode());
+        LayoutUnit floatBottom;
+#if ENABLE(CSS_SHAPES)
+        ShapeOutsideInfo* shapeOutside = r->renderer().shapeOutsideInfo();
+        if (offsetMode == ShapeOutsideFloatShapeOffset && shapeOutside)
+            floatBottom = r->logicalTop(isHorizontalWritingMode()) + marginBeforeForChild(&(r->renderer())) + shapeOutside->shapeLogicalBottom();
+        else
+#endif
+            floatBottom = r->logicalBottom(isHorizontalWritingMode());
         if (floatBottom > logicalHeight)
             bottom = min(floatBottom, bottom);
     }
index 92b6c17..617d30d 100644 (file)
@@ -682,7 +682,7 @@ private:
     LayoutUnit addOverhangingFloats(RenderBlock* child, bool makeChildPaintOtherFloats);
 
     LayoutUnit lowestFloatLogicalBottom(FloatingObject::Type = FloatingObject::FloatLeftRight) const; 
-    LayoutUnit nextFloatLogicalBottomBelow(LayoutUnit) const;
+    LayoutUnit nextFloatLogicalBottomBelow(LayoutUnit, ShapeOutsideFloatOffsetMode = ShapeOutsideFloatMarginBoxOffset) const;
 
     void updateLocalFloatingObjectsForPaintingContainer(RenderBox* floatToUpdate, bool& didFindPaintContainer);
     void updateFloatingObjectsPaintingContainer(RenderBox* floatToUpdate, bool& didFindPaintContainer);