Skip to content

GitLab

T
tangled
Commit 2bab7a6d authored by rob.buis@samsung.com's avatar rob.buis@samsung.com
Browse files
Options

[CSS Shapes] Import and fix polygon shapes reftests 

Import these polygon shapes reftests and fix them.
Note that these tests should be imported at some point.

This is based on http://trac.webkit.org/changeset/172973 by Zoltan Horvath <zoltan@webkit.org>.

From the WebKit patch commit log:
We didn't respect the shape-margin before a positioned polygon, since we checked
the shape-margin for only 1 vertex for a polygon edge. This patch fixes the behavior,
removes the tests from the skipped list and updates 1 test, which was incorrect.

Review URL: https://codereview.chromium.org/510513002

git-svn-id: svn://svn.chromium.org/blink/trunk@181504 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent 7ccffb8e
Hide whitespace changes
Inline Side-by-side
Showing with 397 additions and 1 deletion
third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-polygon-012-expected.html 0 → 100644
View file @ 2bab7a6d
<!DOCTYPE html>
<html>
<head>
<title>CSS Reference File</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
</head>
<style>
body {
margin: 0;
}
#green-square {
position: absolute;
top: 50px;
left: 10px;
width: 240px;
height: 240px;
background-color: green;
}
</style>
<body>
<p>The test passes if there is green square and no red.</p>
<div id="green-square"></div>
</body>
</html>
\ No newline at end of file
third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-polygon-012.html 0 → 100644
View file @ 2bab7a6d
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: right float, polygon + margin-box + shape-margin</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#margin-box">
<link rel="match" href="reference/shape-outside-polygon-010-ref.html">
<meta name="flags" content="ahem" />
<meta name="assert" content="The test verifies that text wraps around a
right float with a shape-outside defined as
an polygon from the margin box with a shape margin.">
</head>
<style>
body {
margin: 0;
}
#container {
position: absolute;
top: 50px;
left: 10px;
font-size: 20px;
font-family: Ahem;
line-height: 20px;
width: 240px;
height: 240px;
background-color: red;
color: green;
}
#test-shape {
float: right;
width: 140px;
height: 140px;
margin: 10px;
border: 10px solid transparent;
padding: 10px;
shape-margin: 20px;
shape-outside: margin-box polygon(20% 20%, 90% 20%, 90% 80%, 50% 80%, 50% 70%, 70% 70%, 70% 40%, 20% 40%);
}
.ref-shape {
position: absolute;
background-color: green;
}
#ref-1 {
top: 70px;
left: 70px;
width: 180px;
height: 80px;
}
#ref-2 {
top: 150px;
left: 150px;
width: 100px;
height: 20px;
}
#ref-3 {
top: 170px;
left: 130px;
width: 120px;
height: 60px;
}
</style>
<body>
<p>The test passes if there is green square and no red.</p>
<div id="container">
<div id="test-shape"></div>
XXXXXXXXXXXX XXX XXX XXX XXX XXXXxXX XXXXXX XXXXXX XXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX
</div>
<div id="ref-1" class="ref-shape"></div>
<div id="ref-2" class="ref-shape"></div>
<div id="ref-3" class="ref-shape"></div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-polygon-013-expected.html 0 → 100644
View file @ 2bab7a6d
<!DOCTYPE html>
<html>
<head>
<title>CSS Reference File</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
</head>
<style>
body {
margin: 0;
}
#green-square {
position: absolute;
top: 50px;
left: 10px;
width: 240px;
height: 240px;
background-color: green;
}
</style>
<body>
<p>The test passes if there is green square and no red.</p>
<div id="green-square"></div>
</body>
</html>
\ No newline at end of file
third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-polygon-013.html 0 → 100644
View file @ 2bab7a6d
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: right float, polygon + border-box + shape-margin</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#border-box">
<link rel="match" href="reference/shape-outside-polygon-010-ref.html">
<meta name="flags" content="ahem" />
<meta name="assert" content="The test verifies that text wraps around a
right float with a shape-outside defined as
an polygon from the border box with a shape margin.">
</head>
<style>
body {
margin: 0;
}
#container {
position: absolute;
top: 50px;
left: 10px;
font-size: 20px;
font-family: Ahem;
line-height: 20px;
width: 240px;
height: 240px;
background-color: red;
color: green;
}
#test-shape {
float: right;
width: 160px;
height: 160px;
margin: 10px;
border: 10px solid transparent;
padding: 10px;
shape-margin: 10px;
shape-outside: border-box polygon(20% 20%, 100% 20%, 100% 90%, 50% 90%, 50% 70%, 70% 70%, 70% 40%, 20% 40%);
}
.ref-shape {
position: absolute;
background-color: green;
}
#ref-1 {
top: 90px;
left: 70px;
width: 180px;
height: 60px;
}
#ref-2 {
top: 150px;
left: 170px;
width: 80px;
height: 40px;
}
#ref-3 {
top: 190px;
left: 130px;
width: 120px;
height: 60px;
}
</style>
<body>
<p>The test passes if there is green square and no red.</p>
<div id="container">
<div id="test-shape"></div>
XXXXXXXXXXXX XXXXXXXXXXXX XXX XXX XXX XXXXXXXX XXXXXXXX XXXXXX XXXXXX XXXXXX XXXXXXXXXXXX XXXXXXXXXXXX
</div>
<div id="ref-1" class="ref-shape"></div>
<div id="ref-2" class="ref-shape"></div>
<div id="ref-3" class="ref-shape"></div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-polygon-014-expected.html 0 → 100644
View file @ 2bab7a6d
<!DOCTYPE html>
<html>
<head>
<title>CSS Reference File</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
</head>
<style>
body {
margin: 0;
}
#green-square {
position: absolute;
top: 50px;
left: 10px;
width: 240px;
height: 240px;
background-color: green;
}
</style>
<body>
<p>The test passes if there is green square and no red.</p>
<div id="green-square"></div>
</body>
</html>
\ No newline at end of file
third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-polygon-014.html 0 → 100644
View file @ 2bab7a6d
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: right float, polygon + padding-box + shape-margin</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#border-box">
<link rel="match" href="reference/shape-outside-polygon-010-ref.html">
<meta name="flags" content="ahem" />
<meta name="assert" content="The test verifies that text wraps around a
right float with a shape-outside defined as
an polygon from the padding box with a shape margin.">
</head>
<style>
body {
margin: 0;
}
#container {
position: absolute;
top: 50px;
left: 10px;
font-size: 20px;
font-family: Ahem;
line-height: 20px;
width: 240px;
height: 240px;
background-color: red;
color: green;
}
#test-shape {
float: right;
width: 180px;
height: 180px;
margin: 10px;
border: 10px solid transparent;
padding: 10px;
shape-margin: 20px;
shape-outside: padding-box polygon(20% 20%, 100% 20%, 100% 90%, 50% 90%, 50% 70%, 70% 70%, 70% 40%, 20% 40%);
}
.ref-shape {
position: absolute;
background-color: green;
}
#ref-1 {
top: 90px;
left: 50px;
width: 200px;
height: 80px;
}
#ref-2 {
top: 150px;
left: 150px;
width: 100px;
height: 40px;
}
#ref-3 {
top: 190px;
left: 110px;
width: 140px;
height: 80px;
}
</style>
<body>
<p>The test passes if there is green square and no red.</p>
<div id="container">
<div id="test-shape"></div>
XXXXXXXXXXXX XXXXXXXXXXXX XX XX XX XX XXXXXXX XXXXX XXXXX XXXXX XXXXX XXXXXXXXXXXX
</div>
<div id="ref-1" class="ref-shape"></div>
<div id="ref-2" class="ref-shape"></div>
<div id="ref-3" class="ref-shape"></div>
</body>
</html>
third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-polygon-015-expected.html 0 → 100644
View file @ 2bab7a6d
<!DOCTYPE html>
<html>
<head>
<title>CSS Reference File</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
</head>
<style>
body {
margin: 0;
}
#green-square {
position: absolute;
top: 50px;
left: 10px;
width: 240px;
height: 240px;
background-color: green;
}
</style>
<body>
<p>The test passes if there is green square and no red.</p>
<div id="green-square"></div>
</body>
</html>
\ No newline at end of file
third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-polygon-015.html 0 → 100644
View file @ 2bab7a6d
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: right float, polygon + content-box + shape-margin</title>
<link rel="author" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#funcdef-polygon">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property">
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#content-box">
<link rel="match" href="reference/shape-outside-polygon-010-ref.html">
<meta name="flags" content="ahem" />
<meta name="assert" content="The test verifies that text wraps around a
right float with a shape-outside defined as
an polygon from the content box wtih a shape margin.">
</head>
<style>
body {
margin: 0;
}
#container {
position: absolute;
top: 50px;
left: 10px;
font-size: 20px;
font-family: Ahem;
line-height: 20px;
width: 240px;
height: 240px;
background-color: red;
color: green;
}
#test-shape {
float: right;
width: 200px;
height: 200px;
margin: 5px;
border: 10px solid transparent;
padding: 5px;
shape-margin: 20px;
shape-outside: content-box polygon(30% 20%, 100% 20%, 100% 80%, 60% 80%, 60% 70%, 80% 70%, 80% 40%, 30% 40%);
}
.ref-shape {
position: absolute;
background-color: green;
}
#ref-1 {
top: 90px;
left: 70px;
width: 180px;
height: 80px;
}
#ref-2 {
top: 170px;
left: 170px;
width: 80px;
height: 20px;
}
#ref-3 {
top: 190px;
left: 130px;
width: 120px;
height: 60px;
}
</style>
<body>
<p>The test passes if there is green square and no red.</p>
<div id="container">
<div id="test-shape"></div>
XXXXXXXXXXXX XXXXXXXXXXXX XXX XXX XXX XXX XXXXXXXX XXXXXX XXXXXX XXXXXX XXXXXXXXXXXX XXXXXXXXXXXX
</div>
<div id="ref-1" class="ref-shape"></div>
<div id="ref-2" class="ref-shape"></div>
<div id="ref-3" class="ref-shape"></div>
</body>
</html>
third_party/WebKit/Source/core/rendering/shapes/PolygonShape.cpp
View file @ 2bab7a6d
......@@ -100,7 +100,7 @@ static float circleXIntercept(float y, float radius)
static FloatShapeInterval clippedCircleXRange(const FloatPoint& center, float radius, float y1, float y2)
{
if (y1 > center.y() + radius || y2 < center.y() - radius)
if (y1 >= center.y() + radius || y2 <= center.y() - radius)
return FloatShapeInterval();
if (center.y() >= y1 && center.y() <= y2)
......@@ -143,6 +143,7 @@ LineSegment PolygonShape::getExcludedInterval(LayoutUnit logicalTop, LayoutUnit
excludedInterval.unite(OffsetPolygonEdge(edge, outwardEdgeNormal(edge) * shapeMargin()).clippedEdgeXRange(y1, y2));
excludedInterval.unite(OffsetPolygonEdge(edge, inwardEdgeNormal(edge) * shapeMargin()).clippedEdgeXRange(y1, y2));
excludedInterval.unite(clippedCircleXRange(edge.vertex1(), shapeMargin(), y1, y2));
excludedInterval.unite(clippedCircleXRange(edge.vertex2(), shapeMargin(), y1, y2));
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment