Skip to content
Permalink
Browse files
[CSS Shapes] line height grows around polygon and incorrectly causes …
…text to wrap to next line

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

Reviewed by Bem Jones-Bey.

Source/WebCore:
Corrected an earlier PolygonShape fix https://bugs.webkit.org/show_bug.cgi?id=132132
When the top or bottom of a layout line is coincident with a polygon edge vertex, we
only consider it an intersection if the edge extends into the line.

Test: fast/shapes/shape-outside-floats/shape-outside-edge-case.html

* rendering/shapes/PolygonShape.cpp:
(WebCore::OffsetPolygonEdge::clippedEdgeXRange):

LayoutTests:
* fast/shapes/shape-outside-floats/shape-outside-edge-case-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-edge-case.html: Added.


Canonical link: https://commits.webkit.org/150952@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@168778 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
Hans Muller committed May 14, 2014
1 parent 8c03245 commit c9bd63e087857bb7073c24ce877a7e57670ad92d
Showing 5 changed files with 109 additions and 1 deletion.
@@ -1,3 +1,13 @@
2014-05-13 Hans Muller <hmuller@adobe.com>

[CSS Shapes] line height grows around polygon and incorrectly causes text to wrap to next line
https://bugs.webkit.org/show_bug.cgi?id=131622

Reviewed by Bem Jones-Bey.

* fast/shapes/shape-outside-floats/shape-outside-edge-case-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-edge-case.html: Added.

2014-05-13 Myles C. Maxfield <litherum@gmail.com>

Text decorations do not contribute to visual overflow
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<style>
#content {
font: 50px/1 Ahem, sans-serif;
-webkit-font-smoothing: antialiased;
color: green;
width: 300px;
border: 1px solid black;
}
#right-shape {
float: right;
width: 50px;
height: 50px;
background-color: blue;
}
#left-shape {
float: left;
width: 50px;
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<p>The blue squares on the left and right should be surrounded by three green squares.</p>
<div id="content">
<div style="text-align: right">
X<br>
<div id="right-shape"></div>
X<br>X
</div>
X<br>
<div id="left-shape"></div>
X<br>X
</div>
</body>
</html>
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<style>
#content {
font: 50px/1 Ahem, sans-serif;
-webkit-font-smoothing: antialiased;
color: green;
width: 300px;
border: 1px solid black;
}
#right-shape {
float: right;
width: 50px;
height: 50px;
background-color: blue;
margin-left: 50px; /* effectively overridden by shape-outside */
-webkit-shape-outside: content-box polygon(0 0, 50px 0, 50px 50px, 0 50px);
}
#left-shape {
float: left;
width: 50px;
height: 50px;
background-color: blue;
margin-right: 50px; /* effectively overridden by shape-outside */
-webkit-shape-outside: content-box polygon(0 0, 50px 0, 50px 50px, 0 50px);
}
</style>
</head>
<body>
<p>The blue squares on the left and right should be surrounded by three green squares.</p>
<div id="content">
<div style="text-align: right">
X<br>
<div id="right-shape"></div>
X<br>X
</div>
X<br>
<div id="left-shape"></div>
X<br>X
</div>
</body>
</html>
@@ -1,3 +1,19 @@
2014-05-13 Hans Muller <hmuller@adobe.com>

[CSS Shapes] line height grows around polygon and incorrectly causes text to wrap to next line
https://bugs.webkit.org/show_bug.cgi?id=131622

Reviewed by Bem Jones-Bey.

Corrected an earlier PolygonShape fix https://bugs.webkit.org/show_bug.cgi?id=132132
When the top or bottom of a layout line is coincident with a polygon edge vertex, we
only consider it an intersection if the edge extends into the line.

Test: fast/shapes/shape-outside-floats/shape-outside-edge-case.html

* rendering/shapes/PolygonShape.cpp:
(WebCore::OffsetPolygonEdge::clippedEdgeXRange):

2014-05-13 Beth Dakin <bdakin@apple.com>

m_layerForOverhangAreas is sometimes not positioned correctly when topContentInset
@@ -66,7 +66,7 @@ float OffsetPolygonEdge::xIntercept(float y) const

FloatShapeInterval OffsetPolygonEdge::clippedEdgeXRange(float y1, float y2) const
{
if (!overlapsYRange(y1, y2) || (y1 == maxY() && vertex2().y() < vertex1().y()))
if (!overlapsYRange(y1, y2) || (y1 == maxY() && minY() <= y1) || (y2 == minY() && maxY() >= y2))
return FloatShapeInterval();

if (isWithinYRange(y1, y2))

0 comments on commit c9bd63e

Please sign in to comment.