<!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>[160007] 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/160007">160007</a></dd>
<dt>Author</dt> <dd>rwlbuis@webkit.org</dd>
<dt>Date</dt> <dd>2013-12-03 09:18:01 -0800 (Tue, 03 Dec 2013)</dd>
</dl>
<h3>Log Message</h3>
<pre>[css shapes] layout for new ellipse syntax
https://bugs.webkit.org/show_bug.cgi?id=124621
Source/WebCore:
Reviewed by Dirk Schulze.
Implement support for doing layout with the new ellipse shape syntax,
including basic animation support.
Test: fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000.html
* rendering/shapes/Shape.cpp:
(WebCore::Shape::createShape): Convert new ellipse to a layout shape.
* rendering/style/BasicShapes.cpp:
(WebCore::BasicShape::canBlend): Ignore ellipses with values that
cannot be interpolated.
(WebCore::BasicShapeEllipse::floatValueForRadiusInBox): Helper function to calculate
either radiusX or radiusY, shared by clip-path and shape code paths.
(WebCore::BasicShapeEllipse::path):
* rendering/style/BasicShapes.h:
LayoutTests:
Add a new test for the new ellipse syntax. Also update existing shape-inside, animation, and clip-path tests to
test the new ellipse syntax for clipping and shape-inside.
Reviewed by Dirk Schulze.
* animations/resources/animation-test-helpers.js:
(parseBasicShape):
* css3/masking/clip-path-animation-expected.txt:
* css3/masking/clip-path-animation.html:
* css3/masking/clip-path-ellipse.html:
* fast/shapes/shape-inside/shape-inside-animation-expected.txt:
* fast/shapes/shape-inside/shape-inside-animation.html:
* fast/shapes/shape-inside/shape-inside-ellipse-padding.html:
* fast/shapes/shape-inside/shape-inside-ellipse.html:
* fast/shapes/shape-inside/shape-inside-empty-expected.html:
* fast/shapes/shape-inside/shape-inside-empty.html:
* fast/shapes/shape-outside-floats/shape-outside-animation-expected.txt:
* fast/shapes/shape-outside-floats/shape-outside-animation.html:
* fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000.html: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsanimationsresourcesanimationtesthelpersjs">trunk/LayoutTests/animations/resources/animation-test-helpers.js</a></li>
<li><a href="#trunkLayoutTestscss3maskingclippathanimationexpectedtxt">trunk/LayoutTests/css3/masking/clip-path-animation-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3maskingclippathanimationhtml">trunk/LayoutTests/css3/masking/clip-path-animation.html</a></li>
<li><a href="#trunkLayoutTestscss3maskingclippathellipsehtml">trunk/LayoutTests/css3/masking/clip-path-ellipse.html</a></li>
<li><a href="#trunkLayoutTestsfastshapesshapeinsideshapeinsideanimationexpectedtxt">trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-animation-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastshapesshapeinsideshapeinsideanimationhtml">trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-animation.html</a></li>
<li><a href="#trunkLayoutTestsfastshapesshapeinsideshapeinsideellipsepaddinghtml">trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-ellipse-padding.html</a></li>
<li><a href="#trunkLayoutTestsfastshapesshapeinsideshapeinsideellipsehtml">trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-ellipse.html</a></li>
<li><a href="#trunkLayoutTestsfastshapesshapeinsideshapeinsideemptyexpectedhtml">trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-empty-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastshapesshapeinsideshapeinsideemptyhtml">trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-empty.html</a></li>
<li><a href="#trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsideanimationexpectedtxt">trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsideanimationhtml">trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation.html</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorerenderingshapesShapecpp">trunk/Source/WebCore/rendering/shapes/Shape.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleBasicShapescpp">trunk/Source/WebCore/rendering/style/BasicShapes.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleBasicShapesh">trunk/Source/WebCore/rendering/style/BasicShapes.h</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsidefloatsellipse000expectedhtml">trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsidefloatsellipse000html">trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (160006 => 160007)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2013-12-03 17:15:18 UTC (rev 160006)
+++ trunk/LayoutTests/ChangeLog 2013-12-03 17:18:01 UTC (rev 160007)
</span><span class="lines">@@ -1,3 +1,29 @@
</span><ins>+2013-12-03 Rob Buis <rob.buis@samsung.com>
+
+ [css shapes] layout for new ellipse syntax
+ https://bugs.webkit.org/show_bug.cgi?id=124621
+
+ Add a new test for the new ellipse syntax. Also update existing shape-inside, animation, and clip-path tests to
+ test the new ellipse syntax for clipping and shape-inside.
+
+ Reviewed by Dirk Schulze.
+
+ * animations/resources/animation-test-helpers.js:
+ (parseBasicShape):
+ * css3/masking/clip-path-animation-expected.txt:
+ * css3/masking/clip-path-animation.html:
+ * css3/masking/clip-path-ellipse.html:
+ * fast/shapes/shape-inside/shape-inside-animation-expected.txt:
+ * fast/shapes/shape-inside/shape-inside-animation.html:
+ * fast/shapes/shape-inside/shape-inside-ellipse-padding.html:
+ * fast/shapes/shape-inside/shape-inside-ellipse.html:
+ * fast/shapes/shape-inside/shape-inside-empty-expected.html:
+ * fast/shapes/shape-inside/shape-inside-empty.html:
+ * fast/shapes/shape-outside-floats/shape-outside-animation-expected.txt:
+ * fast/shapes/shape-outside-floats/shape-outside-animation.html:
+ * fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000-expected.html: Added.
+ * fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000.html: Added.
+
</ins><span class="cx"> 2013-12-03 Frédéric Wang <fred.wang@free.fr>
</span><span class="cx">
</span><span class="cx"> Add an MathMLSelectElement class to implement <maction> and <semantics>.
</span></span></pre></div>
<a id="trunkLayoutTestsanimationsresourcesanimationtesthelpersjs"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/animations/resources/animation-test-helpers.js (160006 => 160007)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/animations/resources/animation-test-helpers.js 2013-12-03 17:15:18 UTC (rev 160006)
+++ trunk/LayoutTests/animations/resources/animation-test-helpers.js 2013-12-03 17:18:01 UTC (rev 160007)
</span><span class="lines">@@ -219,7 +219,7 @@
</span><span class="cx"> matches = s.match("circle\\((.*)\\s+at\\s+(.*)\\s+(.*)\\)");
</span><span class="cx"> break;
</span><span class="cx"> case "ellipse":
</span><del>- matches = s.match("ellipse\\((.*)\\s*,\\s*(.*)\\s*,\\s*(.*)\\,\\s*(.*)\\)");
</del><ins>+ matches = s.match("ellipse\\((.*)\\s+(.*)\\s+at\\s+(.*)\\s+(.*)\\)");
</ins><span class="cx"> break;
</span><span class="cx"> case "polygon":
</span><span class="cx"> matches = s.match("polygon\\(nonzero, (.*)\\s+(.*)\\s*,\\s*(.*)\\s+(.*)\\s*,\\s*(.*)\\s+(.*)\\s*,\\s*(.*)\\s+(.*)\\)");
</span></span></pre></div>
<a id="trunkLayoutTestscss3maskingclippathanimationexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/masking/clip-path-animation-expected.txt (160006 => 160007)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/masking/clip-path-animation-expected.txt 2013-12-03 17:15:18 UTC (rev 160006)
+++ trunk/LayoutTests/css3/masking/clip-path-animation-expected.txt 2013-12-03 17:18:01 UTC (rev 160007)
</span><span class="lines">@@ -1,7 +1,7 @@
</span><span class="cx">
</span><span class="cx"> PASS - "webkitClipPath" property for "rectangle-box" element at 1s saw something close to: rectangle(10%, 10%, 80%, 80%, 0px, 0px)
</span><span class="cx"> PASS - "webkitClipPath" property for "circle-box" element at 1s saw something close to: circle(35% at 35% 35%)
</span><del>-PASS - "webkitClipPath" property for "ellipse-box" element at 1s saw something close to: ellipse(35%, 35%, 35%, 30%)
</del><ins>+PASS - "webkitClipPath" property for "ellipse-box" element at 1s saw something close to: ellipse(35% 30% at 35% 35%)
</ins><span class="cx"> PASS - "webkitClipPath" property for "polygon-box" element at 1s saw something close to: polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)
</span><span class="cx"> PASS - "webkitClipPath" property for "none-box" element at 1s saw something close to: polygon(nonzero, 20% 20%, 80% 20%, 80% 80%, 20% 80%)
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestscss3maskingclippathanimationhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/masking/clip-path-animation.html (160006 => 160007)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/masking/clip-path-animation.html 2013-12-03 17:15:18 UTC (rev 160006)
+++ trunk/LayoutTests/css3/masking/clip-path-animation.html 2013-12-03 17:18:01 UTC (rev 160007)
</span><span class="lines">@@ -42,8 +42,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> @-webkit-keyframes ellipse-anim {
</span><del>- from { -webkit-clip-path: ellipse(50%, 50%, 50%, 40%); }
- to { -webkit-clip-path: ellipse(20%, 20%, 20%, 20%); }
</del><ins>+ from { -webkit-clip-path: ellipse(50% 40% at 50% 50%); }
+ to { -webkit-clip-path: ellipse(20% 20% at 20% 20%); }
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> @-webkit-keyframes polygon-anim {
</span><span class="lines">@@ -64,7 +64,7 @@
</span><span class="cx"> // [animation-name, time, element-id, property, expected-value, tolerance]
</span><span class="cx"> ["rectangle-anim", 1, "rectangle-box", "webkitClipPath", "rectangle(10%, 10%, 80%, 80%, 0px, 0px)", 0.05],
</span><span class="cx"> ["circle-anim", 1, "circle-box", "webkitClipPath", "circle(35% at 35% 35%)", 0.05],
</span><del>- ["ellipse-anim", 1, "ellipse-box", "webkitClipPath", "ellipse(35%, 35%, 35%, 30%)", 0.05],
</del><ins>+ ["ellipse-anim", 1, "ellipse-box", "webkitClipPath", "ellipse(35% 30% at 35% 35%)", 0.05],
</ins><span class="cx"> ["polygon-anim", 1, "polygon-box", "webkitClipPath", "polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)", 0.05],
</span><span class="cx"> ["none-anim", 1, "none-box", "webkitClipPath", "polygon(nonzero, 20% 20%, 80% 20%, 80% 80%, 20% 80%)", 0],
</span><span class="cx"> ];
</span></span></pre></div>
<a id="trunkLayoutTestscss3maskingclippathellipsehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/masking/clip-path-ellipse.html (160006 => 160007)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/masking/clip-path-ellipse.html 2013-12-03 17:15:18 UTC (rev 160006)
+++ trunk/LayoutTests/css3/masking/clip-path-ellipse.html 2013-12-03 17:18:01 UTC (rev 160007)
</span><span class="lines">@@ -6,11 +6,11 @@
</span><span class="cx"> width: 200px;
</span><span class="cx"> height: 200px;
</span><span class="cx"> background-color: green;
</span><del>- -webkit-clip-path: ellipse(100px, 100px, 100px, 75px);
</del><ins>+ -webkit-clip-path: ellipse(100px 75px at 100px 100px);
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body>
</span><span class="cx"> <div>
</span><span class="cx"> </body>
</span><del>-</html>
</del><span class="cx">\ No newline at end of file
</span><ins>+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeinsideshapeinsideanimationexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-animation-expected.txt (160006 => 160007)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-animation-expected.txt 2013-12-03 17:15:18 UTC (rev 160006)
+++ trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-animation-expected.txt 2013-12-03 17:18:01 UTC (rev 160007)
</span><span class="lines">@@ -1,6 +1,6 @@
</span><span class="cx"> Moving Text Moving Text Moving Text Moving Text
</span><span class="cx"> PASS - "webkitShapeInside" property for "rectangle-box" element at 1s saw something close to: rectangle(10%, 10%, 80%, 80%, 0px, 0px)
</span><span class="cx"> PASS - "webkitShapeInside" property for "circle-box" element at 1s saw something close to: circle(35% at 35% 35%)
</span><del>-PASS - "webkitShapeInside" property for "ellipse-box" element at 1s saw something close to: ellipse(35%, 35%, 35%, 30%)
</del><ins>+PASS - "webkitShapeInside" property for "ellipse-box" element at 1s saw something close to: ellipse(35% 30% at 35% 35%)
</ins><span class="cx"> PASS - "webkitShapeInside" property for "polygon-box" element at 1s saw something close to: polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeinsideshapeinsideanimationhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-animation.html (160006 => 160007)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-animation.html 2013-12-03 17:15:18 UTC (rev 160006)
+++ trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-animation.html 2013-12-03 17:18:01 UTC (rev 160007)
</span><span class="lines">@@ -38,8 +38,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> @-webkit-keyframes ellipse-anim {
</span><del>- from { -webkit-shape-inside: ellipse(50%, 50%, 50%, 40%); }
- to { -webkit-shape-inside: ellipse(20%, 20%, 20%, 20%); }
</del><ins>+ from { -webkit-shape-inside: ellipse(50% 40% at 50% 50%); }
+ to { -webkit-shape-inside: ellipse(20% 20% at 20% 20%); }
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> @-webkit-keyframes polygon-anim {
</span><span class="lines">@@ -54,7 +54,7 @@
</span><span class="cx"> // [animation-name, time, element-id, property, expected-value, tolerance]
</span><span class="cx"> ["rectangle-anim", 1, "rectangle-box", "webkitShapeInside", "rectangle(10%, 10%, 80%, 80%, 0px, 0px)", 0.05],
</span><span class="cx"> ["circle-anim", 1, "circle-box", "webkitShapeInside", "circle(35% at 35% 35%)", 0.05],
</span><del>- ["ellipse-anim", 1, "ellipse-box", "webkitShapeInside", "ellipse(35%, 35%, 35%, 30%)", 0.05],
</del><ins>+ ["ellipse-anim", 1, "ellipse-box", "webkitShapeInside", "ellipse(35% 30% at 35% 35%)", 0.05],
</ins><span class="cx"> ["polygon-anim", 1, "polygon-box", "webkitShapeInside", "polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)", 0.05],
</span><span class="cx"> ];
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeinsideshapeinsideellipsepaddinghtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-ellipse-padding.html (160006 => 160007)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-ellipse-padding.html 2013-12-03 17:15:18 UTC (rev 160006)
+++ trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-ellipse-padding.html 2013-12-03 17:18:01 UTC (rev 160007)
</span><span class="lines">@@ -9,7 +9,7 @@
</span><span class="cx"> position: relative;
</span><span class="cx"> width: 500px;
</span><span class="cx"> height: 500px;
</span><del>- -webkit-shape-inside: ellipse(220px, 220px, 250px, 150px);
</del><ins>+ -webkit-shape-inside: ellipse(250px 150px at 220px 220px);
</ins><span class="cx"> -webkit-shape-padding: 50px;
</span><span class="cx"> font: 178px/1 Ahem, sans-serif;
</span><span class="cx"> color: green;
</span></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeinsideshapeinsideellipsehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-ellipse.html (160006 => 160007)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-ellipse.html 2013-12-03 17:15:18 UTC (rev 160006)
+++ trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-ellipse.html 2013-12-03 17:18:01 UTC (rev 160007)
</span><span class="lines">@@ -12,7 +12,7 @@
</span><span class="cx"> position: relative;
</span><span class="cx"> width: 500px;
</span><span class="cx"> height: 500px;
</span><del>- -webkit-shape-inside: ellipse(220px, 220px, 200px, 100px);
</del><ins>+ -webkit-shape-inside: ellipse(200px 100px at 220px 220px);
</ins><span class="cx"> font: 178px/1 Ahem, sans-serif;
</span><span class="cx"> color: green;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeinsideshapeinsideemptyexpectedhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-empty-expected.html (160006 => 160007)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-empty-expected.html 2013-12-03 17:15:18 UTC (rev 160006)
+++ trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-empty-expected.html 2013-12-03 17:18:01 UTC (rev 160007)
</span><span class="lines">@@ -24,10 +24,10 @@
</span><span class="cx"> <p>This text should be pushed down below the green rectangle. (There is a circle(0px at 0px 0px) shape-inside CSS property on the green rectangle.)</p>
</span><span class="cx"> </div>
</span><span class="cx"> <div>
</span><del>- <p>This text should be pushed down below the green rectangle. (There is an ellipse(0px, 0px, 0px, 1em) shape-inside CSS property on the green rectangle.)</p>
</del><ins>+ <p>This text should be pushed down below the green rectangle. (There is an ellipse(0px 1em at 0px 0px) shape-inside CSS property on the green rectangle.)</p>
</ins><span class="cx"> </div>
</span><span class="cx"> <div>
</span><del>- <p>This text should be pushed down below the green rectangle. (There is an ellipse(0px, 0px, 1em, 0px) shape-inside CSS property on the green rectangle.)</p>
</del><ins>+ <p>This text should be pushed down below the green rectangle. (There is an ellipse(1em 0px at 0px 0px) shape-inside CSS property on the green rectangle.)</p>
</ins><span class="cx"> </div>
</span><span class="cx"> <div>
</span><span class="cx"> <p>This text should be pushed down below the green rectangle. (There is a polygon(0px 0px) shape-inside CSS property on the green rectangle.)</p>
</span></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeinsideshapeinsideemptyhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-empty.html (160006 => 160007)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-empty.html 2013-12-03 17:15:18 UTC (rev 160006)
+++ trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-empty.html 2013-12-03 17:18:01 UTC (rev 160007)
</span><span class="lines">@@ -23,11 +23,11 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #shape-inside-ellipse-radiusX0 {
</span><del>- -webkit-shape-inside: ellipse(0px, 0px, 0px, 1em);
</del><ins>+ -webkit-shape-inside: ellipse(0px 1em at 0px 0px);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #shape-inside-ellipse-radiusY0 {
</span><del>- -webkit-shape-inside: ellipse(0px, 0px, 1em, 0px);
</del><ins>+ -webkit-shape-inside: ellipse(1em 0px at 0px 0px);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #shape-inside-polygon-1vertex {
</span><span class="lines">@@ -51,10 +51,10 @@
</span><span class="cx"> This text should be pushed down below the green rectangle. (There is a circle(0px at 0px 0px) shape-inside CSS property on the green rectangle.)
</span><span class="cx"> </p>
</span><span class="cx"> <p id="shape-inside-ellipse-radiusX0">
</span><del>- This text should be pushed down below the green rectangle. (There is an ellipse(0px, 0px, 0px, 1em) shape-inside CSS property on the green rectangle.)
</del><ins>+ This text should be pushed down below the green rectangle. (There is an ellipse(0px 1em at 0px 0px) shape-inside CSS property on the green rectangle.)
</ins><span class="cx"> </p>
</span><span class="cx"> <p id="shape-inside-ellipse-radiusY0">
</span><del>- This text should be pushed down below the green rectangle. (There is an ellipse(0px, 0px, 1em, 0px) shape-inside CSS property on the green rectangle.)
</del><ins>+ This text should be pushed down below the green rectangle. (There is an ellipse(1em 0px at 0px 0px) shape-inside CSS property on the green rectangle.)
</ins><span class="cx"> </p>
</span><span class="cx"> <p id="shape-inside-polygon-1vertex">
</span><span class="cx"> This text should be pushed down below the green rectangle. (There is a polygon(0px 0px) shape-inside CSS property on the green rectangle.)
</span></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsideanimationexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation-expected.txt (160006 => 160007)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation-expected.txt 2013-12-03 17:15:18 UTC (rev 160006)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation-expected.txt 2013-12-03 17:18:01 UTC (rev 160007)
</span><span class="lines">@@ -4,6 +4,6 @@
</span><span class="cx"> Moving Text
</span><span class="cx"> PASS - "webkitShapeOutside" property for "rectangle-box" element at 1s saw something close to: rectangle(10%, 10%, 80%, 80%, 0px, 0px)
</span><span class="cx"> PASS - "webkitShapeOutside" property for "circle-box" element at 1s saw something close to: circle(35% at 35% 35%)
</span><del>-PASS - "webkitShapeOutside" property for "ellipse-box" element at 1s saw something close to: ellipse(35%, 35%, 35%, 30%)
</del><ins>+PASS - "webkitShapeOutside" property for "ellipse-box" element at 1s saw something close to: ellipse(35% 30% at 35% 35%)
</ins><span class="cx"> PASS - "webkitShapeOutside" property for "polygon-box" element at 1s saw something close to: polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsideanimationhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation.html (160006 => 160007)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation.html 2013-12-03 17:15:18 UTC (rev 160006)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation.html 2013-12-03 17:18:01 UTC (rev 160007)
</span><span class="lines">@@ -42,8 +42,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> @-webkit-keyframes ellipse-anim {
</span><del>- from { -webkit-shape-outside: ellipse(50%, 50%, 50%, 40%); }
- to { -webkit-shape-outside: ellipse(20%, 20%, 20%, 20%); }
</del><ins>+ from { -webkit-shape-outside: ellipse(50% 40% at 50% 50%); }
+ to { -webkit-shape-outside: ellipse(20% 20% at 20% 20%); }
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> @-webkit-keyframes polygon-anim {
</span><span class="lines">@@ -58,7 +58,7 @@
</span><span class="cx"> // [animation-name, time, element-id, property, expected-value, tolerance]
</span><span class="cx"> ["rectangle-anim", 1, "rectangle-box", "webkitShapeOutside", "rectangle(10%, 10%, 80%, 80%, 0px, 0px)", 0.05],
</span><span class="cx"> ["circle-anim", 1, "circle-box", "webkitShapeOutside", "circle(35% at 35% 35%)", 0.05],
</span><del>- ["ellipse-anim", 1, "ellipse-box", "webkitShapeOutside", "ellipse(35%, 35%, 35%, 30%)", 0.05],
</del><ins>+ ["ellipse-anim", 1, "ellipse-box", "webkitShapeOutside", "ellipse(35% 30% at 35% 35%)", 0.05],
</ins><span class="cx"> ["polygon-anim", 1, "polygon-box", "webkitShapeOutside", "polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)", 0.05],
</span><span class="cx"> ];
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsidefloatsellipse000expectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000-expected.html (0 => 160007)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000-expected.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000-expected.html 2013-12-03 17:18:01 UTC (rev 160007)
</span><span class="lines">@@ -0,0 +1,90 @@
</span><ins>+<!DOCTYPE html>
+<style>
+.container {
+ position: relative;
+ font: 20px/1 Ahem, sans-serif;
+ width: 500px;
+ height: 200px;
+ border: 1px solid black;
+}
+
+.ellipse {
+ z-index: -1;
+ width: 320px;
+ height: 160px;
+ border-radius: 160px / 80px;
+ background-color: blue;
+ overflow: hidden;
+}
+
+#left-ellipse-outline {
+ position: absolute;
+ top: 20px;
+ left: 0px;
+}
+
+#right-ellipse-outline {
+ position: absolute;
+ top: 20px;
+ right: 0px;
+}
+
+.left-ellipse-float-line {
+ float: left;
+ clear: left;
+ height: 20px;
+}
+
+.right-ellipse-float-line {
+ float: right;
+ clear: right;
+ height: 20px;
+}
+</style>
+<body>
+<p>The black squares should trace the right side of the ellipse's blue outline.</p>
+<div class="container">
+X<br/>
+ <div id="left-ellipse-outline" class="ellipse"></div>
+ <!-- generated left-rounded-rect-float-line divs will be inserted here -->
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X
+</div>
+
+<p>The black squares should trace the left side of the ellipse's blue outline.</p>
+<div class="container" style="text-align: right">
+X<br/>
+ <div id="right-ellipse-outline" class="ellipse"></div>
+ <!-- generated right-rounded-rect-float-line divs will be inserted here -->
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X
+</div>
+
+<script src="../resources/rounded-rectangle.js"></script>
+<script src="../resources/subpixel-utils.js"></script>
+<script>
+genLeftRightRoundedRectFloatShapeOutsideRefTest({
+ roundedRect: {x: 0, y: 20, width: 320, height: 160, rx: 160, ry: 80},
+ containerWidth: 500,
+ containerHeight: 200,
+ lineHeight: 20,
+ floatElementClassSuffix: "ellipse-float-line",
+ insertElementIdSuffix: "ellipse-outline"
+});
+</script>
+
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsidefloatsellipse000html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000.html (0 => 160007)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000.html 2013-12-03 17:18:01 UTC (rev 160007)
</span><span class="lines">@@ -0,0 +1,56 @@
</span><ins>+<!DOCTYPE html>
+<title>CSS Test: circle shape-outside on floats</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/#shape-outside-property">
+<link rel="match" href="shape-outside-floats-ellipse-000-ref.html">
+<meta name="flags" content="ahem">
+<style>
+.container {
+ font: 20px/1 Ahem, sans-serif;
+ width: 500px;
+ height: 200px;
+ border: 1px solid black;
+}
+
+.ellipse {
+ width: 320px;
+ height: 160px;
+ background-color: blue;
+ overflow: hidden;
+ border-radius: 160px / 80px;
+ -webkit-shape-outside: ellipse(160px 80px at 160px 80px);
+}
+</style>
+
+<body>
+<p>The black squares should trace the right side of the ellipse's blue outline.</p>
+<div class="container">
+X<br/>
+ <div style="float: left" class="ellipse"></div>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X
+</div>
+
+<p>The black squares should trace the left side of the ellipse's blue outline.</p>
+<div class="container" style="text-align: right">
+X<br/>
+ <div style="float: right" class="ellipse"></div>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X<br/>
+X
+</div>
+</body>
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (160006 => 160007)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2013-12-03 17:15:18 UTC (rev 160006)
+++ trunk/Source/WebCore/ChangeLog 2013-12-03 17:18:01 UTC (rev 160007)
</span><span class="lines">@@ -1,3 +1,25 @@
</span><ins>+2013-12-03 Rob Buis <rob.buis@samsung.com>
+
+ [css shapes] layout for new ellipse syntax
+ https://bugs.webkit.org/show_bug.cgi?id=124621
+
+ Reviewed by Dirk Schulze.
+
+ Implement support for doing layout with the new ellipse shape syntax,
+ including basic animation support.
+
+ Test: fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000.html
+
+ * rendering/shapes/Shape.cpp:
+ (WebCore::Shape::createShape): Convert new ellipse to a layout shape.
+ * rendering/style/BasicShapes.cpp:
+ (WebCore::BasicShape::canBlend): Ignore ellipses with values that
+ cannot be interpolated.
+ (WebCore::BasicShapeEllipse::floatValueForRadiusInBox): Helper function to calculate
+ either radiusX or radiusY, shared by clip-path and shape code paths.
+ (WebCore::BasicShapeEllipse::path):
+ * rendering/style/BasicShapes.h:
+
</ins><span class="cx"> 2013-12-03 Frédéric Wang <fred.wang@free.fr>
</span><span class="cx">
</span><span class="cx"> Add an MathMLSelectElement class to implement <maction> and <semantics>.
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingshapesShapecpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/shapes/Shape.cpp (160006 => 160007)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/shapes/Shape.cpp 2013-12-03 17:15:18 UTC (rev 160006)
+++ trunk/Source/WebCore/rendering/shapes/Shape.cpp 2013-12-03 17:18:01 UTC (rev 160007)
</span><span class="lines">@@ -175,8 +175,14 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> case BasicShape::BasicShapeEllipseType: {
</span><del>- // FIXME: Layout implementation needed. See bug https://bugs.webkit.org/show_bug.cgi?id=125079
- shape = createRectangleShape(FloatRect(0, 0, boxWidth, boxHeight), FloatSize());
</del><ins>+ const BasicShapeEllipse* ellipse = static_cast<const BasicShapeEllipse*>(basicShape);
+ float centerX = floatValueForCenterCoordinate(ellipse->centerX(), boxWidth);
+ float centerY = floatValueForCenterCoordinate(ellipse->centerY(), boxHeight);
+ float radiusX = ellipse->floatValueForRadiusInBox(ellipse->radiusX(), centerX, boxWidth);
+ float radiusY = ellipse->floatValueForRadiusInBox(ellipse->radiusY(), centerY, boxHeight);
+ FloatPoint logicalCenter = physicalPointToLogical(FloatPoint(centerX, centerY), logicalBoxSize.height(), writingMode);
+
+ shape = createShapeEllipse(logicalCenter, FloatSize(radiusX, radiusY));
</ins><span class="cx"> break;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleBasicShapescpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/BasicShapes.cpp (160006 => 160007)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/BasicShapes.cpp 2013-12-03 17:15:18 UTC (rev 160006)
+++ trunk/Source/WebCore/rendering/style/BasicShapes.cpp 2013-12-03 17:18:01 UTC (rev 160007)
</span><span class="lines">@@ -59,7 +59,17 @@
</span><span class="cx"> return false;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- return true;
</del><ins>+ // Ellipses with keywords for radii or center coordinates cannot be animated.
+ if (type() != BasicShape::BasicShapeEllipseType)
+ return true;
+
+ const BasicShapeEllipse* thisEllipse = static_cast<const BasicShapeEllipse*>(this);
+ const BasicShapeEllipse* otherEllipse = static_cast<const BasicShapeEllipse*>(other);
+ if (!thisEllipse->radiusX().canBlend(otherEllipse->radiusX())
+ || !thisEllipse->radiusY().canBlend(otherEllipse->radiusY())
+ || !thisEllipse->centerX().canBlend(otherEllipse->centerX())
+ || !thisEllipse->centerY().canBlend(otherEllipse->centerY()))
+ return false;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> void BasicShapeRectangle::path(Path& path, const FloatRect& boundingBox)
</span><span class="lines">@@ -191,22 +201,26 @@
</span><span class="cx"> return result.release();
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+float BasicShapeEllipse::floatValueForRadiusInBox(const BasicShapeRadius& radius, float center, float boxWidthOrHeight) const
+{
+ if (radius.type() == BasicShapeRadius::Value)
+ return floatValueForLength(radius.value(), boxWidthOrHeight);
+
+ if (radius.type() == BasicShapeRadius::ClosestSide)
+ return std::min(center, boxWidthOrHeight - center);
+
+ ASSERT(radius.type() == BasicShapeRadius::FarthestSide);
+ return std::max(center, boxWidthOrHeight - center);
+}
+
</ins><span class="cx"> void BasicShapeEllipse::path(Path& path, const FloatRect& boundingBox)
</span><span class="cx"> {
</span><span class="cx"> ASSERT(path.isEmpty());
</span><del>- // FIXME: The implementation of path is incomplete. See https://bugs.webkit.org/show_bug.cgi?id=125079
- // Compute closest-side and farthest-side from boundingBox.
- // Compute top, left, bottom, right from boundingBox.
- if (m_radiusX.type() != BasicShapeRadius::Value || m_radiusY.type() != BasicShapeRadius::Value)
- return;
- if (m_centerX.keyword() != BasicShapeCenterCoordinate::None || m_centerY.keyword() != BasicShapeCenterCoordinate::None)
- return;
</del><span class="cx">
</span><del>- float diagonal = sqrtf((boundingBox.width() * boundingBox.width() + boundingBox.height() * boundingBox.height()) / 2);
- float centerX = floatValueForLength(m_centerX.length(), boundingBox.width());
- float centerY = floatValueForLength(m_centerY.length(), boundingBox.height());
- float radiusX = floatValueForLength(m_radiusX.value(), diagonal);
- float radiusY = floatValueForLength(m_radiusY.value(), diagonal);
</del><ins>+ float centerX = floatValueForCenterCoordinate(m_centerX, boundingBox.width());
+ float centerY = floatValueForCenterCoordinate(m_centerY, boundingBox.height());
+ float radiusX = floatValueForRadiusInBox(m_radiusX, centerX, boundingBox.width());
+ float radiusY = floatValueForRadiusInBox(m_radiusY, centerY, boundingBox.height());
</ins><span class="cx"> path.addEllipse(FloatRect(
</span><span class="cx"> centerX - radiusX + boundingBox.x(),
</span><span class="cx"> centerY - radiusY + boundingBox.y(),
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleBasicShapesh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/BasicShapes.h (160006 => 160007)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/BasicShapes.h 2013-12-03 17:15:18 UTC (rev 160006)
+++ trunk/Source/WebCore/rendering/style/BasicShapes.h 2013-12-03 17:18:01 UTC (rev 160007)
</span><span class="lines">@@ -255,6 +255,7 @@
</span><span class="cx"> const BasicShapeCenterCoordinate& centerY() const { return m_centerY; }
</span><span class="cx"> const BasicShapeRadius& radiusX() const { return m_radiusX; }
</span><span class="cx"> const BasicShapeRadius& radiusY() const { return m_radiusY; }
</span><ins>+ float floatValueForRadiusInBox(const BasicShapeRadius&, float center, float boxWidthOrHeight) const;
</ins><span class="cx">
</span><span class="cx"> void setCenterX(BasicShapeCenterCoordinate centerX) { m_centerX = std::move(centerX); }
</span><span class="cx"> void setCenterY(BasicShapeCenterCoordinate centerY) { m_centerY = std::move(centerY); }
</span></span></pre>
</div>
</div>
</body>
</html>