[CSS Shapes] Support block content with inline content around floats in shape-inside
authorzoltan@webkit.org <zoltan@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 3 Oct 2013 18:24:59 +0000 (18:24 +0000)
committerzoltan@webkit.org <zoltan@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 3 Oct 2013 18:24:59 +0000 (18:24 +0000)
https://bugs.webkit.org/show_bug.cgi?id=121616

Reviewed by David Hyatt.

In r156022 and r156364, I added support for floats inside shape-inside with inline content. This change extends
the existing implementation to support block content with inline content (paragraphs). I added an extra text for
positioning a float inside shape-inside without text content around it.

Source/WebCore:

Tests: fast/shapes/shape-inside/shape-inside-left-float-in-lower-left-triangle-block-content.html
       fast/shapes/shape-inside/shape-inside-left-float-in-lower-right-triangle-block-content.html
       fast/shapes/shape-inside/shape-inside-left-float-in-lower-right-triangle.html
       fast/shapes/shape-inside/shape-inside-left-float-in-upper-left-triangle-block-content.html
       fast/shapes/shape-inside/shape-inside-left-float-in-upper-right-triangle-block-content.html

* rendering/FloatingObjects.h:
(WebCore::FloatingObject::logicalSize): Add new function to return the FloatingObject logical size.
* rendering/LineWidth.cpp:
(WebCore::LineWidth::fitBelowFloats): When the lineBreaker code pushes down the content below the floating object,
we need to update the segments if we are in a shape-inside.
* rendering/RenderBlock.cpp:
(WebCore::RenderBlock::computeLogicalLocationForFloat): Do the positioning based on the float actual size, and use the
recent shapeInsideInfo. (Calling layoutShapeInsideInfo which deals with the layoutStates also instead of shapeInsideInfo.)
* rendering/RenderBlock.h:
* rendering/RenderBlockLineLayout.cpp:
(WebCore::RenderBlock::adjustLogicalLineTopAndLogicalHeightIfNeeded): If we don't have inline content we still need to positionize
our float content in a shape-inside.
(WebCore::updateSegmentsForShapes): Use the right coordinates for block content with inline content.

LayoutTests:

* fast/shapes/shape-inside/shape-inside-left-float-in-lower-left-triangle-block-content-expected.html: Added.
* fast/shapes/shape-inside/shape-inside-left-float-in-lower-left-triangle-block-content.html: Added.
* fast/shapes/shape-inside/shape-inside-left-float-in-lower-right-triangle-block-content-expected.html: Added.
* fast/shapes/shape-inside/shape-inside-left-float-in-lower-right-triangle-block-content.html: Added.
* fast/shapes/shape-inside/shape-inside-left-float-in-lower-right-triangle-expected.html: Added.
* fast/shapes/shape-inside/shape-inside-left-float-in-lower-right-triangle.html: Added.
* fast/shapes/shape-inside/shape-inside-left-float-in-upper-left-triangle-block-content-expected.html: Added.
* fast/shapes/shape-inside/shape-inside-left-float-in-upper-left-triangle-block-content.html: Added.
* fast/shapes/shape-inside/shape-inside-left-float-in-upper-right-triangle-block-content-expected.html: Added.
* fast/shapes/shape-inside/shape-inside-left-float-in-upper-right-triangle-block-content.html: Added.

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

17 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-lower-left-triangle-block-content-expected.html [new file with mode: 0644]
LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-lower-left-triangle-block-content.html [new file with mode: 0644]
LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-lower-right-triangle-block-content-expected.html [new file with mode: 0644]
LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-lower-right-triangle-block-content.html [new file with mode: 0644]
LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-lower-right-triangle-expected.html [new file with mode: 0644]
LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-lower-right-triangle.html [new file with mode: 0644]
LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-upper-left-triangle-block-content-expected.html [new file with mode: 0644]
LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-upper-left-triangle-block-content.html [new file with mode: 0644]
LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-upper-right-triangle-block-content-expected.html [new file with mode: 0644]
LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-upper-right-triangle-block-content.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/FloatingObjects.h
Source/WebCore/rendering/LineWidth.cpp
Source/WebCore/rendering/RenderBlock.cpp
Source/WebCore/rendering/RenderBlock.h
Source/WebCore/rendering/RenderBlockLineLayout.cpp

index 5b4a3fe..e07d6be 100644 (file)
@@ -1,3 +1,25 @@
+2013-10-03  Zoltan Horvath  <zoltan@webkit.org>
+
+        [CSS Shapes] Support block content with inline content around floats in shape-inside
+        https://bugs.webkit.org/show_bug.cgi?id=121616
+
+        Reviewed by David Hyatt.
+
+        In r156022 and r156364, I added support for floats inside shape-inside with inline content. This change extends
+        the existing implementation to support block content with inline content (paragraphs). I added an extra text for
+        positioning a float inside shape-inside without text content around it.
+
+        * fast/shapes/shape-inside/shape-inside-left-float-in-lower-left-triangle-block-content-expected.html: Added.
+        * fast/shapes/shape-inside/shape-inside-left-float-in-lower-left-triangle-block-content.html: Added.
+        * fast/shapes/shape-inside/shape-inside-left-float-in-lower-right-triangle-block-content-expected.html: Added.
+        * fast/shapes/shape-inside/shape-inside-left-float-in-lower-right-triangle-block-content.html: Added.
+        * fast/shapes/shape-inside/shape-inside-left-float-in-lower-right-triangle-expected.html: Added.
+        * fast/shapes/shape-inside/shape-inside-left-float-in-lower-right-triangle.html: Added.
+        * fast/shapes/shape-inside/shape-inside-left-float-in-upper-left-triangle-block-content-expected.html: Added.
+        * fast/shapes/shape-inside/shape-inside-left-float-in-upper-left-triangle-block-content.html: Added.
+        * fast/shapes/shape-inside/shape-inside-left-float-in-upper-right-triangle-block-content-expected.html: Added.
+        * fast/shapes/shape-inside/shape-inside-left-float-in-upper-right-triangle-block-content.html: Added.
+
 2013-10-03  Tim Horton  <timothy_horton@apple.com>
 
         Add test expectation for one more test having color space issues after r156793.
diff --git a/LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-lower-left-triangle-block-content-expected.html b/LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-lower-left-triangle-block-content-expected.html
new file mode 100644 (file)
index 0000000..89d46c9
--- /dev/null
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+    #polygon-svg-shape {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        width: 200px;
+        height: 200px;
+    }
+    #shape-inside {
+        font: 20px Ahem, sans-serif;
+        line-height: 20px;
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        padding-top: 20px;
+    }
+    #float {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        width: 50px;
+        height: 50px;
+        float: left;
+        margin-top: 50px;
+        background-color: yellow;
+    }
+    #side-of-float {
+        position: absolute;
+        top: 70px;
+        left: 50px;
+        width: 20px;
+    }
+    #below-float {
+        width: 200px;
+        margin-top: 90px;
+
+    }
+    #overflow {
+        width: 200px;
+        margin-top: 10px;
+    }
+</style>
+</head>
+<body>
+    <svg id="polygon-svg-shape" xmlns="http://www.w3.org/2000/svg">
+        <polygon points="0,0 200,200 0,200" fill="#636363"></polygon>
+    </svg>
+    <div id="shape-inside">
+        X
+        <div id="float"></div>
+        <div id="side-of-float">X<br/>X</div>
+        <div id="below-float">X<br/><br>XXXXXXX</div>
+        <div id="overflow">X X X X X X</div>
+    </div>
+
+    <p style="margin-top: 250px;">
+        There is a triangle shape-inside (represented by the matching filled SVG polygon), the shape-inside contains a 50x50px yellow float left,
+        the float should be at the very left and top position inside the triangle shape where it fits first. The block content with inline content
+        (paragraphs) should start before the yellow rectangle and then wrap around it. The overflow should be pushed under the triangle shape-inside.
+    </p>
+    <p>Bug <a href="http://webkit.org/b/121616">121616</a>: [CSS Shapes] Support block content with inline content around floats in shape-inside</p>
+</body>
+</html>
diff --git a/LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-lower-left-triangle-block-content.html b/LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-lower-left-triangle-block-content.html
new file mode 100644 (file)
index 0000000..336a2ba
--- /dev/null
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+    #polygon-svg-shape {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+    }
+    #shape-inside {
+        font: 20px Ahem, sans-serif;
+        line-height: 20px;
+        width: 200px;
+        height: 200px;
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        -webkit-shape-inside: polygon(0px 0px, 200px 200px, 0px 200px);
+    }
+    #float {
+        width: 50px;
+        height: 50px;
+        float: left;
+        background-color: yellow;
+    }
+</style>
+</head>
+<body>
+    <svg id="polygon-svg-shape" xmlns="http://www.w3.org/2000/svg">
+        <polygon points="0,0 200,200 0,200" fill="#636363"></polygon>
+    </svg>
+    <div id="shape-inside">X
+        <div id="float"></div>X X</p>X<p>XXXXXXX <p>X X X X X X</p>
+    </div>
+    <p style="margin-top: 250px;">
+    There is a triangle shape-inside (represented by the matching filled SVG polygon), the shape-inside contains a 50x50px yellow float left,
+    the float should be at the very left and top position inside the triangle shape where it fits first. The block content with inline content
+    (paragraphs) should start before the yellow rectangle and then wrap around it. The overflow should be pushed under the triangle shape-inside.
+    </p>
+    <p>Bug <a href="http://webkit.org/b/121616">121616</a>: [CSS Shapes] Support block content with inline content around floats in shape-inside</p>
+</body>
+</html>
diff --git a/LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-lower-right-triangle-block-content-expected.html b/LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-lower-right-triangle-block-content-expected.html
new file mode 100644 (file)
index 0000000..95c9c8b
--- /dev/null
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+    #polygon-svg-shape {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        width: 200px;
+        height: 200px;
+    }
+    #shape-inside {
+        font: 20px Ahem, sans-serif;
+        line-height: 20px;
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        text-align: right;
+        padding-top: 20px;
+        width: 200px;
+        height: 200px;
+    }
+    #float {
+        width: 50px;
+        height: 50px;
+        float: right;
+        margin-top: 10px;
+        background-color: yellow;
+    }
+    #overflow {
+        width: 200px;
+        text-align: left;
+    }
+</style>
+</head>
+<body>
+    <svg id="polygon-svg-shape" xmlns="http://www.w3.org/2000/svg">
+        <polygon points="200,0 200,200 0,200" fill="#636363"></polygon>
+    </svg>
+    <div id="shape-inside">
+        X<br/>
+        <div id="float"></div>
+        <br/><br/><br/>X X &nbsp;<br/><br/>
+        XXXXXXX<br/><br/>
+        X X X X X<br/>
+        <div id="overflow">X X X X X X</div>
+    </div>
+
+    <p style="margin-top: 250px;">
+        There is a triangle shape-inside (represented by the matching filled SVG polygon), the shape-inside contains a 50x50px yellow float left,
+        the float should be at the very left and top position inside the triangle shape where it fits first. The block content with inline content
+        (paragraphs) should start before the yellow rectangle and then wrap around it. The overflow should be pushed under the triangle shape-inside.
+    </p>
+    <p>Bug <a href="http://webkit.org/b/121616">121616</a>: [CSS Shapes] Support block content with inline content around floats in shape-inside</p>
+</body>
+</html>
diff --git a/LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-lower-right-triangle-block-content.html b/LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-lower-right-triangle-block-content.html
new file mode 100644 (file)
index 0000000..eaf4ba4
--- /dev/null
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+    #polygon-svg-shape {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+    }
+    #shape-inside {
+        font: 20px Ahem, sans-serif;
+        line-height: 20px;
+        width: 200px;
+        height: 200px;
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        -webkit-shape-inside: polygon(200px 0px, 200px 200px, 0px 200px);
+    }
+    #float {
+        width: 50px;
+        height: 50px;
+        float: left;
+        background-color: yellow;
+    }
+</style>
+</head>
+<body>
+    <svg id="polygon-svg-shape" xmlns="http://www.w3.org/2000/svg">
+        <polygon points="200,0 200,200 0,200" fill="#636363"></polygon>
+    </svg>
+    <div id="shape-inside">X
+        <div id="float"></div><p>X X</p><p>XXXXXXX <p>X X X X X X X X X X X</p>
+    </div>
+    <p style="margin-top: 250px;">
+    There is a triangle shape-inside (represented by the matching filled SVG polygon), the shape-inside contains a 50x50px yellow float left,
+    the float should be at the very left and top position inside the triangle shape where it fits first. The block content with inline content
+    (paragraphs) should start before the yellow rectangle and then wrap around it. The overflow should be pushed under the triangle shape-inside.
+    </p>
+    <p>Bug <a href="http://webkit.org/b/121616">121616</a>: [CSS Shapes] Support block content with inline content around floats in shape-inside</p>
+</body>
+</html>
diff --git a/LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-lower-right-triangle-expected.html b/LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-lower-right-triangle-expected.html
new file mode 100644 (file)
index 0000000..6b8b76e
--- /dev/null
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+    #polygon-svg-shape {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        width: 200px;
+        height: 200px;
+    }
+    #shape-inside {
+        position: absolute;
+        left: 150px;
+        top: 50px;
+        width: 50px;
+        height: 50px;
+        float: left;
+        background-color: yellow;
+    }
+</style>
+</head>
+<body>
+    <svg id="polygon-svg-shape" xmlns="http://www.w3.org/2000/svg">
+        <polygon points="200,0 200,200 0,200" fill="#636363"></polygon>
+    </svg>
+    <div id="shape-inside">
+    </div>
+
+    <p style="margin-top: 250px;">
+        There is a triangle shape-inside (represented by the matching filled SVG polygon), the shape-inside contains a 50x50px yellow float left,
+        the float should be at the very left and top position inside the triangle shape where it fits first.
+    </p>
+    <p>Bug <a href="http://webkit.org/b/121616">121616</a>: [CSS Shapes] Support block content with inline content around floats in shape-inside</p>
+</body>
+</html>
diff --git a/LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-lower-right-triangle.html b/LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-lower-right-triangle.html
new file mode 100644 (file)
index 0000000..4981559
--- /dev/null
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+    #polygon-svg-shape {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+    }
+    #shape-inside {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        left: 0px;
+        top: 0px;
+        -webkit-shape-inside: polygon(200px 0px, 200px 200px, 0px 200px);
+    }
+    #float {
+        width: 50px;
+        height: 50px;
+        float: left;
+        background-color: yellow;
+    }
+</style>
+</head>
+<body>
+    <svg id="polygon-svg-shape" xmlns="http://www.w3.org/2000/svg">
+        <polygon points="200,0 200,200 0,200" fill="#636363"></polygon>
+    </svg>
+    <div id="shape-inside">
+        <div id="float"></div>
+    </div>
+    <p style="margin-top: 250px;">
+        There is a triangle shape-inside (represented by the matching filled SVG polygon), the shape-inside contains a 50x50px yellow float left,
+        the float should be at the very left and top position inside the triangle shape where it fits first.
+    </p>
+    <p>Bug <a href="http://webkit.org/b/121616">121616</a>: [CSS Shapes] Support block content with inline content around floats in shape-inside</p>
+</body>
+</html>
diff --git a/LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-upper-left-triangle-block-content-expected.html b/LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-upper-left-triangle-block-content-expected.html
new file mode 100644 (file)
index 0000000..894aa7e
--- /dev/null
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<head>
+<style>
+    #polygon-svg-shape {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        width: 200px;
+        height: 200px;
+    }
+    #shape-inside {
+        font: 20px Ahem, sans-serif;
+        line-height: 20px;
+        position: absolute;
+        left: 0px;
+        top: 0px;
+    }
+    #float {
+        width: 50px;
+        height: 50px;
+        float: left;
+        background-color: yellow;
+    }
+</style>
+</head>
+<body>
+    <svg id="polygon-svg-shape" xmlns="http://www.w3.org/2000/svg">
+        <polygon points="0,0 200,0 0,200" fill="#636363"></polygon>
+    </svg>
+    <div id="shape-inside">
+        X<br/><br/>
+        <div id="float"></div>
+        XXXX<br/><br/>
+        X<br/><br/>
+        X<br/><br/>
+        X<br/><br/>
+        X X X X X<br/>
+        X
+    </div>
+    <p style="margin-top: 250px;">
+        There is a triangle shape-inside (represented by the matching filled SVG polygon), the shape-inside contains a 50x50px yellow float left,
+        the float should be at the very left and top position inside the triangle shape where it fits first. The block content with inline content
+        (paragraphs) should start before the yellow rectangle and then wrap around it. The overflow should be pushed under the triangle shape-inside.
+    </p>
+    <p>Bug <a href="http://webkit.org/b/121616">121616</a>: [CSS Shapes] Support block content with inline content around floats in shape-inside</p>
+</body>
+</html>
diff --git a/LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-upper-left-triangle-block-content.html b/LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-upper-left-triangle-block-content.html
new file mode 100644 (file)
index 0000000..34015b6
--- /dev/null
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+    #polygon-svg-shape {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+    }
+    #shape-inside {
+        font: 20px Ahem, sans-serif;
+        line-height: 20px;
+        width: 200px;
+        height: 200px;
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        -webkit-shape-inside: polygon(0px 0px, 200px 0px, 0px 200px);
+    }
+    #float {
+        width: 50px;
+        height: 50px;
+        float: left;
+        background-color: yellow;
+    }
+</style>
+</head>
+<body>
+    <svg id="polygon-svg-shape" xmlns="http://www.w3.org/2000/svg">
+        <polygon points="0,0 200,0 0,200" fill="#636363"></polygon>
+    </svg>
+    <div id="shape-inside">A<p>
+        <div id="float"></div><p>XXXX</p><p>X <p>X</p> X</p><p> X X X X X X</p>
+    </div>
+    <p style="margin-top: 250px;">
+      There is a triangle shape-inside (represented by the matching filled SVG polygon), the shape-inside contains a 50x50px yellow float left,
+      the float should be at the very left and top position inside the triangle shape where it fits first. The block content with inline content
+      (paragraphs) should start before the yellow rectangle and then wrap around it. The overflow should be pushed under the triangle shape-inside.
+    </p>
+    <p>Bug <a href="http://webkit.org/b/121616">121616</a>: [CSS Shapes] Support block content with inline content around floats in shape-inside</p>
+</body>
+</html>
diff --git a/LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-upper-right-triangle-block-content-expected.html b/LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-upper-right-triangle-block-content-expected.html
new file mode 100644 (file)
index 0000000..6982c20
--- /dev/null
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+    #polygon-svg-shape {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        width: 200px;
+        height: 200px;
+    }
+    #shape-inside {
+        font: 20px Ahem, sans-serif;
+        line-height: 20px;
+        -webkit-font-smoothing: none;
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        text-align: right;
+    }
+    #float {
+        width: 50px;
+        height: 50px;
+        float: left;
+        margin-left: 50px;
+        background-color: yellow;
+    }
+    #overflow {
+        width: 200px;
+        margin-top: 40px;
+        text-align: left;
+    }
+</style>
+</head>
+<body>
+    <svg id="polygon-svg-shape" xmlns="http://www.w3.org/2000/svg">
+        <polygon points="0,0 200,0 200,200" fill="#636363"></polygon>
+    </svg>
+    <div id="shape-inside">
+        <div id="float"></div>
+        <br/>X&nbsp;&nbsp;&nbsp;&nbsp;<br/><br/>
+        X X X&nbsp;<br/><br/>
+        XXXX<br/><br/>
+        X&nbsp;<br/>
+        <div id="overflow">X X X X X X</div>
+    </div>
+    <p style="margin-top: 250px;">
+      There is a triangle shape-inside (represented by the matching filled SVG polygon), the shape-inside contains a 50x50px yellow float left,
+      the float should be at the very left and top position inside the triangle shape where it fits first. The block content with inline content
+      (paragraphs) should wrap around the float inside the shape. The overflow should be pushed under the triangle shape-inside.
+    </p>
+    <p>Bug <a href="http://webkit.org/b/121616">121616</a>: [CSS Shapes] Support block content with inline content around floats in shape-inside</p>
+</body>
+</html>
diff --git a/LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-upper-right-triangle-block-content.html b/LayoutTests/fast/shapes/shape-inside/shape-inside-left-float-in-upper-right-triangle-block-content.html
new file mode 100644 (file)
index 0000000..125f165
--- /dev/null
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+    #polygon-svg-shape {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+    }
+    #shape-inside {
+        font: 20px Ahem, sans-serif;
+        -webkit-font-smoothing: none;
+        line-height: 20px;
+        width: 200px;
+        height: 200px;
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        -webkit-shape-inside: polygon(0px 0px, 200px 0px, 200px 200px);
+    }
+    #float {
+        width: 50px;
+        height: 50px;
+        float: left;
+        background-color: yellow;
+    }
+</style>
+</head>
+<body>
+    <svg id="polygon-svg-shape" xmlns="http://www.w3.org/2000/svg">
+        <polygon points="0,0 200,0 200,200" fill="#636363"></polygon>
+    </svg>
+    <div id="shape-inside">
+        <div id="float"></div><p>X</p><p>X X X <p>XXXX</p> X</p><p> X X X X X X</p>
+    </div>
+    <p style="margin-top: 250px;">
+      There is a triangle shape-inside (represented by the matching filled SVG polygon), the shape-inside contains a 50x50px yellow float left,
+      the float should be at the very left and top position inside the triangle shape where it fits first. The block content with inline content
+      (paragraphs) should wrap around the float inside the shape. The overflow should be pushed under the triangle shape-inside.
+    </p>
+    <p>Bug <a href="http://webkit.org/b/121616">121616</a>: [CSS Shapes] Support block content with inline content around floats in shape-inside</p>
+</body>
+</html>
index 6016f7f..b45197d 100644 (file)
@@ -1,3 +1,34 @@
+2013-10-03  Zoltan Horvath  <zoltan@webkit.org>
+
+        [CSS Shapes] Support block content with inline content around floats in shape-inside
+        https://bugs.webkit.org/show_bug.cgi?id=121616
+
+        Reviewed by David Hyatt.
+
+        In r156022 and r156364, I added support for floats inside shape-inside with inline content. This change extends
+        the existing implementation to support block content with inline content (paragraphs). I added an extra text for
+        positioning a float inside shape-inside without text content around it.
+
+        Tests: fast/shapes/shape-inside/shape-inside-left-float-in-lower-left-triangle-block-content.html
+               fast/shapes/shape-inside/shape-inside-left-float-in-lower-right-triangle-block-content.html
+               fast/shapes/shape-inside/shape-inside-left-float-in-lower-right-triangle.html
+               fast/shapes/shape-inside/shape-inside-left-float-in-upper-left-triangle-block-content.html
+               fast/shapes/shape-inside/shape-inside-left-float-in-upper-right-triangle-block-content.html
+
+        * rendering/FloatingObjects.h:
+        (WebCore::FloatingObject::logicalSize): Add new function to return the FloatingObject logical size.
+        * rendering/LineWidth.cpp:
+        (WebCore::LineWidth::fitBelowFloats): When the lineBreaker code pushes down the content below the floating object,
+        we need to update the segments if we are in a shape-inside.
+        * rendering/RenderBlock.cpp:
+        (WebCore::RenderBlock::computeLogicalLocationForFloat): Do the positioning based on the float actual size, and use the
+        recent shapeInsideInfo. (Calling layoutShapeInsideInfo which deals with the layoutStates also instead of shapeInsideInfo.)
+        * rendering/RenderBlock.h:
+        * rendering/RenderBlockLineLayout.cpp:
+        (WebCore::RenderBlock::adjustLogicalLineTopAndLogicalHeightIfNeeded): If we don't have inline content we still need to positionize
+        our float content in a shape-inside.
+        (WebCore::updateSegmentsForShapes): Use the right coordinates for block content with inline content.
+
 2013-10-03  Brady Eidson  <beidson@apple.com>
 
         Move IDBFactoryBackend creation to DatabaseStrategy.
index fa12085..cbf38ac 100644 (file)
@@ -92,6 +92,7 @@ public:
     LayoutUnit logicalRight(bool isHorizontalWritingMode) const { return isHorizontalWritingMode ? maxX() : maxY(); }
     LayoutUnit logicalWidth(bool isHorizontalWritingMode) const { return isHorizontalWritingMode ? width() : height(); }
     LayoutUnit logicalHeight(bool isHorizontalWritingMode) const { return isHorizontalWritingMode ? height() : width(); }
+    LayoutSize logicalSize(bool isHorizontalWritingMode) const { return isHorizontalWritingMode ? LayoutSize(width(), height()) : LayoutSize(height(), width()); }
 
     int pixelSnappedLogicalTop(bool isHorizontalWritingMode) const { return isHorizontalWritingMode ? frameRect().pixelSnappedY() : frameRect().pixelSnappedX(); }
     int pixelSnappedLogicalBottom(bool isHorizontalWritingMode) const { return isHorizontalWritingMode ? frameRect().pixelSnappedMaxY() : frameRect().pixelSnappedMaxX(); }
index f824685..54f4b86 100644 (file)
@@ -206,6 +206,18 @@ void LineWidth::fitBelowFloats()
         newLineRight = m_block.logicalRightOffsetForLine(floatLogicalBottom, shouldIndentText());
         newLineWidth = max(0.0f, newLineRight - newLineLeft);
         lastFloatLogicalBottom = floatLogicalBottom;
+
+#if ENABLE(CSS_SHAPES)
+        // FIXME: This code should be refactored to incorporate with the code above.
+        ShapeInsideInfo* shapeInsideInfo = m_block.layoutShapeInsideInfo();
+        if (shapeInsideInfo) {
+            LayoutUnit logicalOffsetFromShapeContainer = m_block.logicalOffsetFromShapeAncestorContainer(shapeInsideInfo->owner()).height();
+            LayoutUnit lineHeight = m_block.lineHeight(false, m_block.isHorizontalWritingMode() ? HorizontalLine : VerticalLine, PositionOfInteriorLineBoxes);
+            shapeInsideInfo->updateSegmentsForLine(lastFloatLogicalBottom + logicalOffsetFromShapeContainer, lineHeight);
+            updateCurrentShapeSegment();
+            updateAvailableWidth();
+        }
+#endif
         if (newLineWidth >= m_uncommittedWidth)
             break;
     }
index 3ba36e7..1fc280a 100644 (file)
@@ -3365,10 +3365,10 @@ LayoutPoint RenderBlock::computeLogicalLocationForFloat(const FloatingObject* fl
     LayoutUnit logicalRightOffset; // Constant part of right offset.
 #if ENABLE(CSS_SHAPES)
     // FIXME Bug 102948: This only works for shape outside directly set on this block.
-    ShapeInsideInfo* shapeInsideInfo = this->shapeInsideInfo();
+    ShapeInsideInfo* shapeInsideInfo = this->layoutShapeInsideInfo();
     // FIXME: Implement behavior for right floats.
     if (shapeInsideInfo) {
-        LayoutSize floatLogicalSize = LayoutSize(floatingObject->logicalWidth(isHorizontalWritingMode()), floatingObject->logicalHeight(isHorizontalWritingMode()));
+        LayoutSize floatLogicalSize = LayoutSize(childBox->logicalWidth(), childBox->logicalHeight());
         // FIXME: If the float doesn't fit in the shape we should push it under the content box
         logicalTopOffset = shapeInsideInfo->computeFirstFitPositionForFloat(floatLogicalSize);
         if (logicalHeight() > logicalTopOffset)
index cd70b85..d2e0e56 100644 (file)
@@ -443,6 +443,7 @@ public:
     void markShapeInsideDescendantsForLayout();
     ShapeInsideInfo* layoutShapeInsideInfo() const;
     bool allowsShapeInsideInfoSharing() const { return !isInline() && !isFloating(); }
+    LayoutSize logicalOffsetFromShapeAncestorContainer(const RenderBlock* container) const;
     virtual void imageChanged(WrappedImagePtr, const IntRect* = 0) OVERRIDE;
 #endif
 
@@ -545,7 +546,6 @@ private:
     void computeShapeSize();
     void updateShapeInsideInfoAfterStyleChange(const ShapeValue*, const ShapeValue* oldShape);
     void relayoutShapeDescendantIfMoved(RenderBlock* child, LayoutSize offset);
-    LayoutSize logicalOffsetFromShapeAncestorContainer(const RenderBlock* container) const;
 #endif
 
     virtual const char* renderName() const OVERRIDE;
index 7540d06..a5279d4 100644 (file)
@@ -1478,6 +1478,14 @@ void RenderBlock::updateShapeAndSegmentsForCurrentLineInFlowThread(ShapeInsideIn
 bool RenderBlock::adjustLogicalLineTopAndLogicalHeightIfNeeded(ShapeInsideInfo* shapeInsideInfo, LayoutUnit absoluteLogicalTop, LineLayoutState& layoutState, InlineBidiResolver& resolver, FloatingObject* lastFloatFromPreviousLine, InlineIterator& end, WordMeasurements& wordMeasurements)
 {
     LayoutUnit adjustedLogicalLineTop = adjustLogicalLineTop(shapeInsideInfo, resolver.position(), end, wordMeasurements);
+
+    if (shapeInsideInfo && !wordMeasurements.size() && containsFloats()) {
+        lastFloatFromPreviousLine = m_floatingObjects->set().last().get();
+        LayoutUnit floatLogicalTopOffset = shapeInsideInfo->computeFirstFitPositionForFloat(lastFloatFromPreviousLine->logicalSize(isHorizontalWritingMode()));
+        if (logicalHeight() < floatLogicalTopOffset)
+            adjustedLogicalLineTop = floatLogicalTopOffset;
+    }
+
     if (!adjustedLogicalLineTop)
         return false;
 
@@ -2649,12 +2657,13 @@ static void updateSegmentsForShapes(RenderBlock* block, const FloatingObject* la
     ASSERT(lastFloatFromPreviousLine);
 
     ShapeInsideInfo* shapeInsideInfo = block->layoutShapeInsideInfo();
-    if (!shapeInsideInfo)
+    if (!lastFloatFromPreviousLine->isPlaced() || !shapeInsideInfo)
         return;
 
     bool isHorizontalWritingMode = block->isHorizontalWritingMode();
+    LayoutUnit logicalOffsetFromShapeContainer = block->logicalOffsetFromShapeAncestorContainer(shapeInsideInfo->owner()).height();
 
-    LayoutUnit lineLogicalTop = block->logicalHeight();
+    LayoutUnit lineLogicalTop = block->logicalHeight() + logicalOffsetFromShapeContainer;
     LayoutUnit lineLogicalHeight = block->lineHeight(isFirstLine, isHorizontalWritingMode ? HorizontalLine : VerticalLine, PositionOfInteriorLineBoxes);
     LayoutUnit lineLogicalBottom = lineLogicalTop + lineLogicalHeight;
 
@@ -2674,10 +2683,12 @@ static void updateSegmentsForShapes(RenderBlock* block, const FloatingObject* la
 
     if (block->logicalHeight() < floatLogicalTop) {
         shapeInsideInfo->adjustLogicalLineTop(minSegmentWidth + floatLogicalWidth);
-        block->setLogicalHeight(shapeInsideInfo->logicalLineTop());
+        block->setLogicalHeight(shapeInsideInfo->logicalLineTop() - logicalOffsetFromShapeContainer);
     }
 
-    shapeInsideInfo->updateSegmentsForLine(block->logicalHeight(), lineLogicalHeight);
+    lineLogicalTop = block->logicalHeight() + logicalOffsetFromShapeContainer;
+
+    shapeInsideInfo->updateSegmentsForLine(lineLogicalTop, lineLogicalHeight);
     width.updateCurrentShapeSegment();
     width.updateAvailableWidth();
 }