[CSS Shapes] Clip shape-outside to the bottom of the margin box

https://bugs.webkit.org/show_bug.cgi?id=122562

Reviewed by Alexandru Chiculita.

Source/WebCore:

The spec says that a shape-outside shape must be clipped to the
margin box. This implements clipping the bottom of the shape to the
bottom of the margin box.

Test: csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-000.html
      csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001.html
      csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-002.html
      csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html

* rendering/RenderBlockFlow.cpp:
(WebCore::RenderBlockFlow::nextFloatLogicalBottomBelow):

LayoutTests:

Test that the shape is properly clipped to the bottom of the float.

* csswg/contributors/adobe/submitted/shapes/shape-outside/resources/w3c-import.log:
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-000-expected.html: Added.
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-000.html: Added.
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-expected.html: Added.
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001.html: Added.
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-002-expected.html: Added.
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-002.html: Added.
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003-expected.html: Added.
* csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html: Added.
* csswg/contributors/adobe/submitted/shapes/shape-outside/w3c-import.log:

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

diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index d01d08a..f81d07f 100644 (file)
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,23 @@
+2013-10-09  Bem Jones-Bey  <bjonesbe@adobe.com>
+
+        [CSS Shapes] Clip shape-outside to the bottom of the margin box
+        https://bugs.webkit.org/show_bug.cgi?id=122562
+
+        Reviewed by Alexandru Chiculita.
+
+        Test that the shape is properly clipped to the bottom of the float.
+
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/resources/w3c-import.log:
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-000-expected.html: Added.
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-000.html: Added.
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-expected.html: Added.
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001.html: Added.
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-002-expected.html: Added.
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-002.html: Added.
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003-expected.html: Added.
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html: Added.
+        * csswg/contributors/adobe/submitted/shapes/shape-outside/w3c-import.log:
+
 2013-10-09  Chris Fleizach  <cfleizach@apple.com>
 
         AX: VoiceOver double speaks all items in <li> nodes

diff --git a/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/resources/w3c-import.log b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/resources/w3c-import.log
index 813b979..4b5b718 100644 (file)
--- a/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/resources/w3c-import.log
+++ b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/resources/w3c-import.log
@@ -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-27 16:37
+Last Import: 2013-10-09 14:13
 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-clipped-000-expected.html b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-000-expected.html
new file mode 100644 (file)
index 0000000..2cd1e74
--- /dev/null
+++ b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-000-expected.html
@@ -0,0 +1,47 @@
+<!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/#relation-to-box-model-and-float-behavior">
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+    font: 50px/1 Ahem, sans-serif;
+    line-height: 50px;
+    width: 100px;
+    height: 100px;
+    border: 1px solid black;
+    color: green;
+    background-color: red;
+    display: inline-block;
+}
+
+#float-left {
+    float: left;
+    width: 100px;
+    height: 50px;
+    background-color: green;
+}
+
+#float-right {
+    float: right;
+    width: 100px;
+    height: 50px;
+    background-color: green;
+}
+</style>
+
+<body>
+    <p>This should display two green squares. You should not see any red.</p>
+    <div class="container">
+        <div id="float-left">
+        </div>
+        XX
+    </div>
+    <div class="container">
+        <div id="float-right">
+        </div>
+        XX
+    </div>
+</body>

diff --git a/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-000.html b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-000.html
new file mode 100644 (file)
index 0000000..361e385
--- /dev/null
+++ b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-000.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<title>CSS Test: shape-outside on floats shape clipped to bottom of margin box</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/#relation-to-box-model-and-float-behavior">
+<link rel="match" href="shape-outside-floats-clipped-000-ref.html">
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+    font: 50px/1 Ahem, sans-serif;
+    line-height: 50px;
+    width: 100px;
+    height: 100px;
+    border: 1px solid black;
+    color: green;
+    background-color: red;
+    display: inline-block;
+}
+
+#float-left {
+    float: left;
+    width: 100px;
+    height: 50px;
+    -webkit-shape-outside: rectangle(0, 0, 100%, 200%);
+    background-color: green;
+}
+
+#float-right {
+    float: right;
+    width: 100px;
+    height: 50px;
+    -webkit-shape-outside: rectangle(0, 0, 100%, 200%);
+    background-color: green;
+}
+</style>
+
+<body>
+    <p>This should display two green squares. You should not see any red.</p>
+    <div class="container">
+        <div id="float-left">
+        </div>
+        XX
+    </div>
+    <div class="container">
+        <div id="float-right">
+        </div>
+        XX
+    </div>
+</body>

diff --git a/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-expected.html b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-expected.html
new file mode 100644 (file)
index 0000000..2cd1e74
--- /dev/null
+++ b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-expected.html
@@ -0,0 +1,47 @@
+<!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/#relation-to-box-model-and-float-behavior">
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+    font: 50px/1 Ahem, sans-serif;
+    line-height: 50px;
+    width: 100px;
+    height: 100px;
+    border: 1px solid black;
+    color: green;
+    background-color: red;
+    display: inline-block;
+}
+
+#float-left {
+    float: left;
+    width: 100px;
+    height: 50px;
+    background-color: green;
+}
+
+#float-right {
+    float: right;
+    width: 100px;
+    height: 50px;
+    background-color: green;
+}
+</style>
+
+<body>
+    <p>This should display two green squares. You should not see any red.</p>
+    <div class="container">
+        <div id="float-left">
+        </div>
+        XX
+    </div>
+    <div class="container">
+        <div id="float-right">
+        </div>
+        XX
+    </div>
+</body>

diff --git a/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001.html b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001.html
new file mode 100644 (file)
index 0000000..2be30d2
--- /dev/null
+++ b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<title>CSS Test: shape-outside on floats shape clipped to bottom of margin box</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/#relation-to-box-model-and-float-behavior">
+<link rel="match" href="shape-outside-floats-clipped-000-ref.html">
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+    font: 50px/1 Ahem, sans-serif;
+    line-height: 50px;
+    width: 100px;
+    height: 100px;
+    border: 1px solid black;
+    color: green;
+    background-color: red;
+    display: inline-block;
+}
+
+#float-left {
+    float: left;
+    width: 100px;
+    height: 25px;
+    margin-bottom: 25px;
+    -webkit-shape-outside: rectangle(0, 0, 100%, 200%);
+    background-color: green;
+    color: green;
+    overflow: visible;
+}
+
+#float-right {
+    float: right;
+    width: 100px;
+    height: 25px;
+    margin-bottom: 25px;
+    -webkit-shape-outside: rectangle(0, 0, 100%, 200%);
+    background-color: green;
+    color: green;
+    overflow: visible;
+}
+</style>
+
+<body>
+    <p>This should display two green squares. You should not see any red.</p>
+    <div class="container">
+        <div id="float-left">
+            XX
+        </div>
+        XX
+    </div>
+    <div class="container">
+        <div id="float-right">
+            XX
+        </div>
+        XX
+    </div>
+</body>

diff --git a/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-002-expected.html b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-002-expected.html
new file mode 100644 (file)
index 0000000..2cd1e74
--- /dev/null
+++ b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-002-expected.html
@@ -0,0 +1,47 @@
+<!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/#relation-to-box-model-and-float-behavior">
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+    font: 50px/1 Ahem, sans-serif;
+    line-height: 50px;
+    width: 100px;
+    height: 100px;
+    border: 1px solid black;
+    color: green;
+    background-color: red;
+    display: inline-block;
+}
+
+#float-left {
+    float: left;
+    width: 100px;
+    height: 50px;
+    background-color: green;
+}
+
+#float-right {
+    float: right;
+    width: 100px;
+    height: 50px;
+    background-color: green;
+}
+</style>
+
+<body>
+    <p>This should display two green squares. You should not see any red.</p>
+    <div class="container">
+        <div id="float-left">
+        </div>
+        XX
+    </div>
+    <div class="container">
+        <div id="float-right">
+        </div>
+        XX
+    </div>
+</body>

diff --git a/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-002.html b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-002.html
new file mode 100644 (file)
index 0000000..0b8a844
--- /dev/null
+++ b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-002.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<title>CSS Test: shape-outside on floats shape clipped to bottom of margin box</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/#relation-to-box-model-and-float-behavior">
+<link rel="match" href="shape-outside-floats-clipped-000-ref.html">
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+    font: 50px/1 Ahem, sans-serif;
+    line-height: 50px;
+    width: 100px;
+    height: 100px;
+    border: 1px solid black;
+    color: green;
+    background-color: red;
+    display: inline-block;
+}
+
+#float-left {
+    float: left;
+    width: 100px;
+    height: 100px;
+    margin-bottom: -50px;
+    -webkit-shape-outside: rectangle(0, 0, 100%, 200%);
+    background-color: green;
+}
+
+#float-right {
+    float: right;
+    width: 100px;
+    height: 100px;
+    margin-bottom: -50px;
+    -webkit-shape-outside: rectangle(0, 0, 100%, 200%);
+    background-color: green;
+}
+</style>
+
+<body>
+    <p>This should display two green squares. You should not see any red.</p>
+    <div class="container">
+        <div id="float-left">
+        </div>
+        XX
+    </div>
+    <div class="container">
+        <div id="float-right">
+        </div>
+        XX
+    </div>
+</body>

diff --git a/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003-expected.html b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003-expected.html
new file mode 100644 (file)
index 0000000..2cd1e74
--- /dev/null
+++ b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003-expected.html
@@ -0,0 +1,47 @@
+<!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/#relation-to-box-model-and-float-behavior">
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+    font: 50px/1 Ahem, sans-serif;
+    line-height: 50px;
+    width: 100px;
+    height: 100px;
+    border: 1px solid black;
+    color: green;
+    background-color: red;
+    display: inline-block;
+}
+
+#float-left {
+    float: left;
+    width: 100px;
+    height: 50px;
+    background-color: green;
+}
+
+#float-right {
+    float: right;
+    width: 100px;
+    height: 50px;
+    background-color: green;
+}
+</style>
+
+<body>
+    <p>This should display two green squares. You should not see any red.</p>
+    <div class="container">
+        <div id="float-left">
+        </div>
+        XX
+    </div>
+    <div class="container">
+        <div id="float-right">
+        </div>
+        XX
+    </div>
+</body>

diff --git a/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html
new file mode 100644 (file)
index 0000000..fd401f0
--- /dev/null
+++ b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<title>CSS Test: shape-outside on floats shape clipped to bottom of margin box</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/#relation-to-box-model-and-float-behavior">
+<link rel="match" href="shape-outside-floats-clipped-000-ref.html">
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+    font: 50px/1 Ahem, sans-serif;
+    line-height: 50px;
+    width: 100px;
+    height: 100px;
+    border: 1px solid black;
+    color: green;
+    background-color: green;
+    display: inline-block;
+}
+
+#float-left {
+    float: left;
+    width: 100px;
+    height: 25px;
+    margin-top: 25px;
+    -webkit-shape-outside: rectangle(0, 0, 100%, 200%);
+    background-color: green;
+}
+
+#float-right {
+    float: right;
+    width: 100px;
+    height: 25px;
+    margin-top: 25px;
+    -webkit-shape-outside: rectangle(0, 0, 100%, 200%);
+    background-color: green;
+}
+</style>
+
+<body>
+    <p>This should display two green squares. You should not see any red.</p>
+    <div class="container">
+        <div id="float-left"></div>
+        XX
+    </div>
+    <div class="container">
+        <div id="float-right"></div>
+        XX
+    </div>
+</body>

diff --git a/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/w3c-import.log b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/w3c-import.log
index 3129bfc..5898149 100644 (file)
--- a/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/w3c-import.log
+++ b/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/w3c-import.log
@@ -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-27 16:37
+Last Import: 2013-10-09 14:13
 W3C Mercurial changeset: Not Available
 Test status at time of import: unknown
 ------------------------------------------------------------------------
@@ -22,6 +22,14 @@ List of files:
 /LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-000.html
 /LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-001-expected.html
 /LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-001.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-000-expected.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-000.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-expected.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-002-expected.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-002.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003-expected.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html
 /LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-ellipse-000-expected.html
 /LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-ellipse-000.html
 /LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-horizontal-rectangle-000-expected.html

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index 85c76ef..f87f171 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,22 @@
+2013-10-09  Bem Jones-Bey  <bjonesbe@adobe.com>
+
+        [CSS Shapes] Clip shape-outside to the bottom of the margin box
+        https://bugs.webkit.org/show_bug.cgi?id=122562
+
+        Reviewed by Alexandru Chiculita.
+
+        The spec says that a shape-outside shape must be clipped to the
+        margin box. This implements clipping the bottom of the shape to the
+        bottom of the margin box.
+
+        Test: csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-000.html
+              csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001.html
+              csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-002.html
+              csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html
+
+        * rendering/RenderBlockFlow.cpp:
+        (WebCore::RenderBlockFlow::nextFloatLogicalBottomBelow):
+
 2013-10-09  Sergio Correia  <sergio.correia@openbossa.org>
 
         [CoordinatedGraphics] ASSERTION FAILED: !m_flushingLayers (after r156291)

diff --git a/Source/WebCore/rendering/RenderBlockFlow.cpp b/Source/WebCore/rendering/RenderBlockFlow.cpp
index 64caf8e..1cd6c46 100644 (file)
--- a/Source/WebCore/rendering/RenderBlockFlow.cpp
+++ b/Source/WebCore/rendering/RenderBlockFlow.cpp
@@ -2030,14 +2030,16 @@ LayoutUnit RenderBlockFlow::nextFloatLogicalBottomBelow(LayoutUnit logicalHeight
     auto end = floatingObjectSet.end();
     for (auto it = floatingObjectSet.begin(); it != end; ++it) {
         FloatingObject* floatingObject = it->get();
-        LayoutUnit floatBottom;
+        LayoutUnit floatBottom = floatingObject->logicalBottom(isHorizontalWritingMode());
 #if ENABLE(CSS_SHAPES)
         ShapeOutsideInfo* shapeOutside = floatingObject->renderer().shapeOutsideInfo();
-        if (offsetMode == ShapeOutsideFloatShapeOffset && shapeOutside)
-            floatBottom = floatingObject->logicalTop(isHorizontalWritingMode()) + marginBeforeForChild(&(floatingObject->renderer())) + shapeOutside->shapeLogicalBottom();
-        else
+        if (offsetMode == ShapeOutsideFloatShapeOffset && shapeOutside) {
+            LayoutUnit shapeBottom = floatingObject->logicalTop(isHorizontalWritingMode()) + marginBeforeForChild(&(floatingObject->renderer())) + shapeOutside->shapeLogicalBottom();
+            // Use the shapeBottom unless it extends outside of the margin box, in which case it is clipped.
+            if (shapeBottom < floatBottom)
+                floatBottom = shapeBottom;
+        }
 #endif
-            floatBottom = floatingObject->logicalBottom(isHorizontalWritingMode());
         if (floatBottom > logicalHeight)
             bottom = min(floatBottom, bottom);
     }