<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[163585] trunk</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/163585">163585</a></dd>
<dt>Author</dt> <dd>zoltan@webkit.org</dd>
<dt>Date</dt> <dd>2014-02-06 17:21:07 -0800 (Thu, 06 Feb 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>[CSS Shapes] Rounded Insets Let Content Overlap Shape
https://bugs.webkit.org/show_bug.cgi?id=127852
Reviewed by Bem Jones-Bey.
Source/WebCore:
Using LengthSize to FloatSize conversion from LengthSize.h lead to miscalculated
inset border radius, when the border radius was defined by percentages. This patch
fixes the behavior and removes the incorrect conversion.
Test: fast/shapes/shape-outside-floats/shape-outside-rounded-inset.html
* css/LengthFunctions.cpp:
(WebCore::floatSizeForLengthSize): Add new helper function for LengthSize to FloatSize conversion.
* css/LengthFunctions.h:
* platform/LengthSize.h: Remove floatSize conversion.
* rendering/shapes/Shape.cpp:
(WebCore::Shape::createShape): Use new helper function to calculate the right with for the inset border radius.
LayoutTests:
* fast/shapes/shape-outside-floats/shape-outside-rounded-inset-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-rounded-inset.html: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorecssLengthFunctionscpp">trunk/Source/WebCore/css/LengthFunctions.cpp</a></li>
<li><a href="#trunkSourceWebCorecssLengthFunctionsh">trunk/Source/WebCore/css/LengthFunctions.h</a></li>
<li><a href="#trunkSourceWebCoreplatformLengthSizeh">trunk/Source/WebCore/platform/LengthSize.h</a></li>
<li><a href="#trunkSourceWebCorerenderingshapesShapecpp">trunk/Source/WebCore/rendering/shapes/Shape.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsideroundedinsetexpectedhtml">trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-rounded-inset-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsideroundedinsethtml">trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-rounded-inset.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (163584 => 163585)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2014-02-07 01:18:38 UTC (rev 163584)
+++ trunk/LayoutTests/ChangeLog 2014-02-07 01:21:07 UTC (rev 163585)
</span><span class="lines">@@ -1,3 +1,13 @@
</span><ins>+2014-02-06 Zoltan Horvath <zoltan@webkit.org>
+
+ [CSS Shapes] Rounded Insets Let Content Overlap Shape
+ https://bugs.webkit.org/show_bug.cgi?id=127852
+
+ Reviewed by Bem Jones-Bey.
+
+ * fast/shapes/shape-outside-floats/shape-outside-rounded-inset-expected.html: Added.
+ * fast/shapes/shape-outside-floats/shape-outside-rounded-inset.html: Added.
+
</ins><span class="cx"> 2014-02-04 Jeffrey Pfau <jpfau@apple.com>
</span><span class="cx">
</span><span class="cx"> Make adoption agency use the task queue
</span></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsideroundedinsetexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-rounded-inset-expected.html (0 => 163585)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-rounded-inset-expected.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-rounded-inset-expected.html 2014-02-07 01:21:07 UTC (rev 163585)
</span><span class="lines">@@ -0,0 +1,35 @@
</span><ins>+<html>
+<head>
+<style>
+.shape-outside {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ font: 10px / 1 Ahem, sans-serif;
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ background-color: green;
+ float: left;
+}
+</style>
+</script>
+</head>
+<body>
+
+<div class='shape-outside'>
+ <span style="margin-left: 66px;"></span>x<br/>
+ <span style="margin-left: 75px;"></span>x<br/>
+ <span style="margin-left: 79px;"></span>x<br/>
+ <span style="margin-left: 80px;"></span>x<br/>
+ <span style="margin-left: 80px;"></span>x<br/>
+ <span style="margin-left: 79px;"></span>x<br/>
+ <span style="margin-left: 75px;"></span>x<br/>
+ <span style="margin-left: 66px;"></span>x<br/>
+</div>
+
+<p style="margin-top: 100px;">The black rectangles should respect the boundaries of the shape-outside (green circle),
+thus they shouldn't overlap with the green circle.</p>
+<p><a href='http://webkit.org/b/127852'>Bug 127852</a>: [CSS Shapes] Rounded Insets Let Content Overlap Shape</p>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsideroundedinsethtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-rounded-inset.html (0 => 163585)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-rounded-inset.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-rounded-inset.html 2014-02-07 01:21:07 UTC (rev 163585)
</span><span class="lines">@@ -0,0 +1,40 @@
</span><ins>+<html>
+<head>
+<style>
+.container {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 120px;
+ font: 10px / 1 Ahem, sans-serif;
+}
+.shape-outside {
+ -webkit-shape-outside: inset(0px round 50%);
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ background-color: green;
+ float: left;
+}
+</style>
+</script>
+</head>
+<body>
+<div class='container'>
+ <div class='shape-outside'></div>
+ x<br/>
+ x<br/>
+ x<br/>
+ x<br/>
+ x<br/>
+ x<br/>
+ x<br/>
+ x<br/>
+</div>
+
+<p style="margin-top: 100px;">The black rectangles should respect the boundaries of the shape-outside (green circle),
+thus they shouldn't overlap with the green circle.</p>
+<p><a href='http://webkit.org/b/127852'>Bug 127852</a>: [CSS Shapes] Rounded Insets Let Content Overlap Shape</p>
+</p>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (163584 => 163585)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2014-02-07 01:18:38 UTC (rev 163584)
+++ trunk/Source/WebCore/ChangeLog 2014-02-07 01:21:07 UTC (rev 163585)
</span><span class="lines">@@ -1,3 +1,23 @@
</span><ins>+2014-02-06 Zoltan Horvath <zoltan@webkit.org>
+
+ [CSS Shapes] Rounded Insets Let Content Overlap Shape
+ https://bugs.webkit.org/show_bug.cgi?id=127852
+
+ Reviewed by Bem Jones-Bey.
+
+ Using LengthSize to FloatSize conversion from LengthSize.h lead to miscalculated
+ inset border radius, when the border radius was defined by percentages. This patch
+ fixes the behavior and removes the incorrect conversion.
+
+ Test: fast/shapes/shape-outside-floats/shape-outside-rounded-inset.html
+
+ * css/LengthFunctions.cpp:
+ (WebCore::floatSizeForLengthSize): Add new helper function for LengthSize to FloatSize conversion.
+ * css/LengthFunctions.h:
+ * platform/LengthSize.h: Remove floatSize conversion.
+ * rendering/shapes/Shape.cpp:
+ (WebCore::Shape::createShape): Use new helper function to calculate the right with for the inset border radius.
+
</ins><span class="cx"> 2014-02-06 Joseph Pecoraro <pecoraro@apple.com>
</span><span class="cx">
</span><span class="cx"> Regenerate JSTestObj now that ScriptArguments moved. Generator knows what to do.
</span></span></pre></div>
<a id="trunkSourceWebCorecssLengthFunctionscpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/LengthFunctions.cpp (163584 => 163585)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/LengthFunctions.cpp 2014-02-07 01:18:38 UTC (rev 163584)
+++ trunk/Source/WebCore/css/LengthFunctions.cpp 2014-02-07 01:21:07 UTC (rev 163585)
</span><span class="lines">@@ -25,7 +25,7 @@
</span><span class="cx"> #include "LengthFunctions.h"
</span><span class="cx">
</span><span class="cx"> #include "LayoutUnit.h"
</span><del>-#include "Length.h"
</del><ins>+#include "LengthSize.h"
</ins><span class="cx"> #include "RenderView.h"
</span><span class="cx">
</span><span class="cx"> namespace WebCore {
</span><span class="lines">@@ -210,4 +210,9 @@
</span><span class="cx"> return 0;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+FloatSize floatSizeForLengthSize(const LengthSize& lengthSize, const FloatSize& boxSize)
+{
+ return FloatSize(floatValueForLength(lengthSize.width(), boxSize.width()), floatValueForLength(lengthSize.height(), boxSize.height()));
+}
+
</ins><span class="cx"> } // namespace WebCore
</span></span></pre></div>
<a id="trunkSourceWebCorecssLengthFunctionsh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/LengthFunctions.h (163584 => 163585)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/LengthFunctions.h 2014-02-07 01:18:38 UTC (rev 163584)
+++ trunk/Source/WebCore/css/LengthFunctions.h 2014-02-07 01:21:07 UTC (rev 163585)
</span><span class="lines">@@ -26,9 +26,11 @@
</span><span class="cx">
</span><span class="cx"> namespace WebCore {
</span><span class="cx">
</span><ins>+class FloatSize;
</ins><span class="cx"> class LayoutUnit;
</span><span class="cx"> class RenderView;
</span><span class="cx"> struct Length;
</span><ins>+struct LengthSize;
</ins><span class="cx">
</span><span class="cx"> int minimumIntValueForLength(const Length&, LayoutUnit maximumValue, RenderView* = 0, bool roundPercentages = false);
</span><span class="cx"> int intValueForLength(const Length&, LayoutUnit maximumValue, RenderView* = 0, bool roundPercentages = false);
</span><span class="lines">@@ -36,6 +38,7 @@
</span><span class="cx"> LayoutUnit valueForLength(const Length&, LayoutUnit maximumValue, RenderView* = 0, bool roundPercentages = false);
</span><span class="cx"> float floatValueForLength(const Length&, LayoutUnit maximumValue, RenderView* = 0);
</span><span class="cx"> float floatValueForLength(const Length&, float maximumValue, RenderView* = 0);
</span><ins>+FloatSize floatSizeForLengthSize(const LengthSize&, const FloatSize&);
</ins><span class="cx">
</span><span class="cx"> } // namespace WebCore
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCoreplatformLengthSizeh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/platform/LengthSize.h (163584 => 163585)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/platform/LengthSize.h 2014-02-07 01:18:38 UTC (rev 163584)
+++ trunk/Source/WebCore/platform/LengthSize.h 2014-02-07 01:21:07 UTC (rev 163585)
</span><span class="lines">@@ -21,7 +21,6 @@
</span><span class="cx"> #ifndef LengthSize_h
</span><span class="cx"> #define LengthSize_h
</span><span class="cx">
</span><del>-#include "FloatSize.h"
</del><span class="cx"> #include "Length.h"
</span><span class="cx">
</span><span class="cx"> namespace WebCore {
</span><span class="lines">@@ -54,11 +53,6 @@
</span><span class="cx"> return LengthSize(m_width.blend(from.width(), progress), m_height.blend(from.height(), progress));
</span><span class="cx"> }
</span><span class="cx">
</span><del>- FloatSize floatSize() const
- {
- return FloatSize(m_width.value(), m_height.value());
- }
-
</del><span class="cx"> private:
</span><span class="cx"> Length m_width;
</span><span class="cx"> Length m_height;
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingshapesShapecpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/shapes/Shape.cpp (163584 => 163585)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/shapes/Shape.cpp 2014-02-07 01:18:38 UTC (rev 163584)
+++ trunk/Source/WebCore/rendering/shapes/Shape.cpp 2014-02-07 01:21:07 UTC (rev 163585)
</span><span class="lines">@@ -232,11 +232,14 @@
</span><span class="cx"> boxHeight - top - floatValueForLength(inset.bottom(), boxHeight));
</span><span class="cx"> FloatRect logicalRect = physicalRectToLogical(rect, logicalBoxSize.height(), writingMode);
</span><span class="cx">
</span><del>- shape = createInsetShape(FloatRoundedRect(logicalRect,
- inset.topLeftRadius().floatSize(),
- inset.topRightRadius().floatSize(),
- inset.bottomLeftRadius().floatSize(),
- inset.bottomRightRadius().floatSize()));
</del><ins>+ FloatSize boxSize(boxWidth, boxHeight);
+ FloatRoundedRect::Radii cornerRadii(
+ floatSizeForLengthSize(inset.topLeftRadius(), boxSize),
+ floatSizeForLengthSize(inset.topRightRadius(), boxSize),
+ floatSizeForLengthSize(inset.bottomLeftRadius(), boxSize),
+ floatSizeForLengthSize(inset.bottomRightRadius(), boxSize));
+
+ shape = createInsetShape(FloatRoundedRect(logicalRect, cornerRadii));
</ins><span class="cx"> break;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre>
</div>
</div>
</body>
</html>