<!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>[159979] 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/159979">159979</a></dd>
<dt>Author</dt> <dd>bjonesbe@adobe.com</dd>
<dt>Date</dt> <dd>2013-12-02 16:10:21 -0800 (Mon, 02 Dec 2013)</dd>
</dl>
<h3>Log Message</h3>
<pre>[css shapes] Layout support for new circle shape syntax
https://bugs.webkit.org/show_bug.cgi?id=124619
Reviewed by Dirk Schulze.
Source/WebCore:
Implement support for doing layout with the new circle shape syntax,
inclduing basic animation support.
Tests: fast/shapes/shape-outside-floats/shape-outside-floats-circle-000.html
fast/shapes/shape-outside-floats/shape-outside-floats-circle-001.html
fast/shapes/shape-outside-floats/shape-outside-floats-circle-002.html
fast/shapes/shape-outside-floats/shape-outside-floats-circle-003.html
fast/shapes/shape-outside-floats/shape-outside-floats-circle-004.html
fast/shapes/shape-outside-floats/shape-outside-floats-circle-005.html
* css/BasicShapeFunctions.cpp:
(WebCore::floatValueForCenterCoordinate): Used by both the CSS Shapes
layout code and the clip path code.
* css/BasicShapeFunctions.h:
* css/CSSBasicShapes.cpp:
(WebCore::buildCircleString): Update to use appendLiteral, and remove
call to reserveCapacity - if we find that it's actually slow when
doing performance tests, we can hopefully do something smarter and
less ugly than that.
* css/CSSParser.cpp:
(WebCore::CSSParser::parseShapeRadius): Fix a logic error that caused
the radius keywords not to work properly.
* rendering/shapes/Shape.cpp:
(WebCore::Shape::createShape): Convert new circle to a layout shape.
* rendering/style/BasicShapes.cpp:
(WebCore::BasicShape::canBlend): Ignore circles with values that
cannot be interpolated.
(WebCore::BasicShapeCircle::floatValueForRadiusInBox): Convert circle
radius keywords to a float value.
(WebCore::BasicShapeCircle::path):
(WebCore::BasicShapeCircle::blend):
* rendering/style/BasicShapes.h:
(WebCore::BasicShapeCenterCoordinate::canBlend):
(WebCore::BasicShapeRadius::canBlend):
LayoutTests:
Add a few tests for the new circle syntax. The old tests in
LayoutTests/csswg will be removed when the old syntax is removed.
Also update existing shape-inside, animation, and clip-path tests to
test the new syntax.
* animations/resources/animation-test-helpers.js:
(parseBasicShape):
* LayoutTests/animations/resources/animation-test-helpers.js:
* LayoutTests/css3/masking/clip-path-animation-expected.txt:
* LayoutTests/css3/masking/clip-path-animation.html:
* LayoutTests/css3/masking/clip-path-circle-filter.html:
* LayoutTests/css3/masking/clip-path-circle-overflow-hidden.html:
* LayoutTests/css3/masking/clip-path-circle-overflow.html:
* LayoutTests/css3/masking/clip-path-circle-relative-overflow.html:
* LayoutTests/css3/masking/clip-path-circle.html:
* LayoutTests/css3/masking/clip-path-restore.html:
* LayoutTests/fast/shapes/parsing/parsing-shape-inside-expected.txt:
* LayoutTests/fast/shapes/parsing/parsing-shape-outside-expected.txt:
* LayoutTests/fast/shapes/parsing/parsing-test-utils.js:
* LayoutTests/fast/shapes/shape-inside/shape-inside-animation-expected.txt:
* LayoutTests/fast/shapes/shape-inside/shape-inside-animation.html:
* LayoutTests/fast/shapes/shape-inside/shape-inside-calc-crash-expected.txt:
* LayoutTests/fast/shapes/shape-inside/shape-inside-calc-crash.html:
* LayoutTests/fast/shapes/shape-inside/shape-inside-circle-padding.html:
* LayoutTests/fast/shapes/shape-inside/shape-inside-circle.html:
* LayoutTests/fast/shapes/shape-inside/shape-inside-dynamic-nested.html:
* LayoutTests/fast/shapes/shape-inside/shape-inside-empty-expected.html:
* LayoutTests/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-circle-000-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-000.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-001-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-001.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-002-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-002.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-003-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-003.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-004-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-004.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-005-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-005.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="#trunkLayoutTestscss3maskingclippathcirclefilterhtml">trunk/LayoutTests/css3/masking/clip-path-circle-filter.html</a></li>
<li><a href="#trunkLayoutTestscss3maskingclippathcircleoverflowhiddenhtml">trunk/LayoutTests/css3/masking/clip-path-circle-overflow-hidden.html</a></li>
<li><a href="#trunkLayoutTestscss3maskingclippathcircleoverflowhtml">trunk/LayoutTests/css3/masking/clip-path-circle-overflow.html</a></li>
<li><a href="#trunkLayoutTestscss3maskingclippathcirclerelativeoverflowhtml">trunk/LayoutTests/css3/masking/clip-path-circle-relative-overflow.html</a></li>
<li><a href="#trunkLayoutTestscss3maskingclippathcirclehtml">trunk/LayoutTests/css3/masking/clip-path-circle.html</a></li>
<li><a href="#trunkLayoutTestscss3maskingclippathrestorehtml">trunk/LayoutTests/css3/masking/clip-path-restore.html</a></li>
<li><a href="#trunkLayoutTestsfastshapesparsingparsingshapeinsideexpectedtxt">trunk/LayoutTests/fast/shapes/parsing/parsing-shape-inside-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastshapesparsingparsingshapeoutsideexpectedtxt">trunk/LayoutTests/fast/shapes/parsing/parsing-shape-outside-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastshapesparsingparsingtestutilsjs">trunk/LayoutTests/fast/shapes/parsing/parsing-test-utils.js</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="#trunkLayoutTestsfastshapesshapeinsideshapeinsidecalccrashexpectedtxt">trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-calc-crash-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastshapesshapeinsideshapeinsidecalccrashhtml">trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-calc-crash.html</a></li>
<li><a href="#trunkLayoutTestsfastshapesshapeinsideshapeinsidecirclepaddinghtml">trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-circle-padding.html</a></li>
<li><a href="#trunkLayoutTestsfastshapesshapeinsideshapeinsidecirclehtml">trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-circle.html</a></li>
<li><a href="#trunkLayoutTestsfastshapesshapeinsideshapeinsidedynamicnestedhtml">trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-dynamic-nested.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="#trunkSourceWebCorecssBasicShapeFunctionscpp">trunk/Source/WebCore/css/BasicShapeFunctions.cpp</a></li>
<li><a href="#trunkSourceWebCorecssBasicShapeFunctionsh">trunk/Source/WebCore/css/BasicShapeFunctions.h</a></li>
<li><a href="#trunkSourceWebCorecssCSSBasicShapescpp">trunk/Source/WebCore/css/CSSBasicShapes.cpp</a></li>
<li><a href="#trunkSourceWebCorecssCSSParsercpp">trunk/Source/WebCore/css/CSSParser.cpp</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="#trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsidefloatscircle000expectedhtml">trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-000-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsidefloatscircle000html">trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-000.html</a></li>
<li><a href="#trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsidefloatscircle001expectedhtml">trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-001-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsidefloatscircle001html">trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-001.html</a></li>
<li><a href="#trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsidefloatscircle002expectedhtml">trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-002-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsidefloatscircle002html">trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-002.html</a></li>
<li><a href="#trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsidefloatscircle003expectedhtml">trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-003-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsidefloatscircle003html">trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-003.html</a></li>
<li><a href="#trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsidefloatscircle004expectedhtml">trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-004-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsidefloatscircle004html">trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-004.html</a></li>
<li><a href="#trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsidefloatscircle005expectedhtml">trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-005-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsidefloatscircle005html">trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-005.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/LayoutTests/ChangeLog 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -1,3 +1,54 @@
</span><ins>+2013-12-02 Bem Jones-Bey <bjonesbe@adobe.com>
+
+ [css shapes] Layout support for new circle shape syntax
+ https://bugs.webkit.org/show_bug.cgi?id=124619
+
+ Reviewed by Dirk Schulze.
+
+ Add a few tests for the new circle syntax. The old tests in
+ LayoutTests/csswg will be removed when the old syntax is removed.
+
+ Also update existing shape-inside, animation, and clip-path tests to
+ test the new syntax.
+
+ * animations/resources/animation-test-helpers.js:
+ (parseBasicShape):
+ * LayoutTests/animations/resources/animation-test-helpers.js:
+ * LayoutTests/css3/masking/clip-path-animation-expected.txt:
+ * LayoutTests/css3/masking/clip-path-animation.html:
+ * LayoutTests/css3/masking/clip-path-circle-filter.html:
+ * LayoutTests/css3/masking/clip-path-circle-overflow-hidden.html:
+ * LayoutTests/css3/masking/clip-path-circle-overflow.html:
+ * LayoutTests/css3/masking/clip-path-circle-relative-overflow.html:
+ * LayoutTests/css3/masking/clip-path-circle.html:
+ * LayoutTests/css3/masking/clip-path-restore.html:
+ * LayoutTests/fast/shapes/parsing/parsing-shape-inside-expected.txt:
+ * LayoutTests/fast/shapes/parsing/parsing-shape-outside-expected.txt:
+ * LayoutTests/fast/shapes/parsing/parsing-test-utils.js:
+ * LayoutTests/fast/shapes/shape-inside/shape-inside-animation-expected.txt:
+ * LayoutTests/fast/shapes/shape-inside/shape-inside-animation.html:
+ * LayoutTests/fast/shapes/shape-inside/shape-inside-calc-crash-expected.txt:
+ * LayoutTests/fast/shapes/shape-inside/shape-inside-calc-crash.html:
+ * LayoutTests/fast/shapes/shape-inside/shape-inside-circle-padding.html:
+ * LayoutTests/fast/shapes/shape-inside/shape-inside-circle.html:
+ * LayoutTests/fast/shapes/shape-inside/shape-inside-dynamic-nested.html:
+ * LayoutTests/fast/shapes/shape-inside/shape-inside-empty-expected.html:
+ * LayoutTests/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-circle-000-expected.html: Added.
+ * fast/shapes/shape-outside-floats/shape-outside-floats-circle-000.html: Added.
+ * fast/shapes/shape-outside-floats/shape-outside-floats-circle-001-expected.html: Added.
+ * fast/shapes/shape-outside-floats/shape-outside-floats-circle-001.html: Added.
+ * fast/shapes/shape-outside-floats/shape-outside-floats-circle-002-expected.html: Added.
+ * fast/shapes/shape-outside-floats/shape-outside-floats-circle-002.html: Added.
+ * fast/shapes/shape-outside-floats/shape-outside-floats-circle-003-expected.html: Added.
+ * fast/shapes/shape-outside-floats/shape-outside-floats-circle-003.html: Added.
+ * fast/shapes/shape-outside-floats/shape-outside-floats-circle-004-expected.html: Added.
+ * fast/shapes/shape-outside-floats/shape-outside-floats-circle-004.html: Added.
+ * fast/shapes/shape-outside-floats/shape-outside-floats-circle-005-expected.html: Added.
+ * fast/shapes/shape-outside-floats/shape-outside-floats-circle-005.html: Added.
+
</ins><span class="cx"> 2013-12-02 Alexey Proskuryakov <ap@apple.com>
</span><span class="cx">
</span><span class="cx"> WebCrypto HMAC doesn't check key algorithm's hash
</span></span></pre></div>
<a id="trunkLayoutTestsanimationsresourcesanimationtesthelpersjs"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/animations/resources/animation-test-helpers.js (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/animations/resources/animation-test-helpers.js 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/LayoutTests/animations/resources/animation-test-helpers.js 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -216,7 +216,7 @@
</span><span class="cx"> matches = s.match("rectangle\\((.*)\\s*,\\s*(.*)\\s*,\\s*(.*)\\,\\s*(.*)\\)");
</span><span class="cx"> break;
</span><span class="cx"> case "circle":
</span><del>- matches = s.match("circle\\((.*)\\s*,\\s*(.*)\\s*,\\s*(.*)\\)");
</del><ins>+ matches = s.match("circle\\((.*)\\s+at\\s+(.*)\\s+(.*)\\)");
</ins><span class="cx"> break;
</span><span class="cx"> case "ellipse":
</span><span class="cx"> matches = s.match("ellipse\\((.*)\\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 (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/masking/clip-path-animation-expected.txt 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/LayoutTests/css3/masking/clip-path-animation-expected.txt 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -1,6 +1,6 @@
</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><del>-PASS - "webkitClipPath" property for "circle-box" element at 1s saw something close to: circle(35%, 35%, 35%)
</del><ins>+PASS - "webkitClipPath" property for "circle-box" element at 1s saw something close to: circle(35% at 35% 35%)
</ins><span class="cx"> PASS - "webkitClipPath" property for "ellipse-box" element at 1s saw something close to: ellipse(35%, 35%, 35%, 30%)
</span><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></pre></div>
<a id="trunkLayoutTestscss3maskingclippathanimationhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/masking/clip-path-animation.html (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/masking/clip-path-animation.html 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/LayoutTests/css3/masking/clip-path-animation.html 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -37,8 +37,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> @-webkit-keyframes circle-anim {
</span><del>- from { -webkit-clip-path: circle(50%, 50%, 50%); }
- to { -webkit-clip-path: circle(20%, 20%, 20%); }
</del><ins>+ from { -webkit-clip-path: circle(50% at 50% 50%); }
+ to { -webkit-clip-path: circle(20% at 20% 20%); }
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> @-webkit-keyframes ellipse-anim {
</span><span class="lines">@@ -63,7 +63,7 @@
</span><span class="cx"> const expectedValues = [
</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><del>- ["circle-anim", 1, "circle-box", "webkitClipPath", "circle(35%, 35%, 35%)", 0.05],
</del><ins>+ ["circle-anim", 1, "circle-box", "webkitClipPath", "circle(35% at 35% 35%)", 0.05],
</ins><span class="cx"> ["ellipse-anim", 1, "ellipse-box", "webkitClipPath", "ellipse(35%, 35%, 35%, 30%)", 0.05],
</span><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></pre></div>
<a id="trunkLayoutTestscss3maskingclippathcirclefilterhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/masking/clip-path-circle-filter.html (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/masking/clip-path-circle-filter.html 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/LayoutTests/css3/masking/clip-path-circle-filter.html 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -7,11 +7,11 @@
</span><span class="cx"> height: 200px;
</span><span class="cx"> background-color: green;
</span><span class="cx"> -webkit-filter: blur(5px);
</span><del>- -webkit-clip-path: circle(100px, 100px, 90px);
</del><ins>+ -webkit-clip-path: circle(90px 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="trunkLayoutTestscss3maskingclippathcircleoverflowhiddenhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/masking/clip-path-circle-overflow-hidden.html (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/masking/clip-path-circle-overflow-hidden.html 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/LayoutTests/css3/masking/clip-path-circle-overflow-hidden.html 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -6,7 +6,7 @@
</span><span class="cx"> width: 200px;
</span><span class="cx"> height: 200px;
</span><span class="cx"> overflow: hidden;
</span><del>- -webkit-clip-path: circle(100px, 100px, 100px);
</del><ins>+ -webkit-clip-path: circle(100px at 100px 100px);
</ins><span class="cx"> }
</span><span class="cx"> .child {
</span><span class="cx"> height: 400px;
</span><span class="lines">@@ -22,4 +22,4 @@
</span><span class="cx"> <div class="child"></div>
</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="trunkLayoutTestscss3maskingclippathcircleoverflowhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/masking/clip-path-circle-overflow.html (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/masking/clip-path-circle-overflow.html 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/LayoutTests/css3/masking/clip-path-circle-overflow.html 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -7,11 +7,11 @@
</span><span class="cx"> height: 200px;
</span><span class="cx"> background-color: green;
</span><span class="cx"> border: 20px solid black;
</span><del>- -webkit-clip-path: circle(130px, 130px, 130px);
</del><ins>+ -webkit-clip-path: circle(130px at 130px 130px);
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body>
</span><span class="cx"> <div><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="trunkLayoutTestscss3maskingclippathcirclerelativeoverflowhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/masking/clip-path-circle-relative-overflow.html (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/masking/clip-path-circle-relative-overflow.html 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/LayoutTests/css3/masking/clip-path-circle-relative-overflow.html 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -7,11 +7,11 @@
</span><span class="cx"> height: 200px;
</span><span class="cx"> background-color: green;
</span><span class="cx"> border: 20px solid black;
</span><del>- -webkit-clip-path: circle(50%, 50%, 50%);
</del><ins>+ -webkit-clip-path: circle(50% at 50% 50%);
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body>
</span><span class="cx"> <div><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="trunkLayoutTestscss3maskingclippathcirclehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/masking/clip-path-circle.html (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/masking/clip-path-circle.html 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/LayoutTests/css3/masking/clip-path-circle.html 2013-12-03 00:10:21 UTC (rev 159979)
</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: circle(100px, 100px, 100px);
</del><ins>+ -webkit-clip-path: circle(100px 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="trunkLayoutTestscss3maskingclippathrestorehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/css3/masking/clip-path-restore.html (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/masking/clip-path-restore.html 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/LayoutTests/css3/masking/clip-path-restore.html 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -9,7 +9,7 @@
</span><span class="cx"> width: 200px;
</span><span class="cx"> height: 200px;
</span><span class="cx"> background-color: green;
</span><del>- -webkit-clip-path: circle(100px, 100px, 100px);
</del><ins>+ -webkit-clip-path: circle(100px at 100px 100px);
</ins><span class="cx"> }
</span><span class="cx"> .red-marker {
</span><span class="cx"> /* We position a red dot behind, so that it is obvious when the test is failing. */
</span><span class="lines">@@ -29,4 +29,4 @@
</span><span class="cx"> <div class="circle-clip-path"></div>
</span><span class="cx"> <div class="circle-clip-path"></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="trunkLayoutTestsfastshapesparsingparsingshapeinsideexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/shapes/parsing/parsing-shape-inside-expected.txt (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/parsing/parsing-shape-inside-expected.txt 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/LayoutTests/fast/shapes/parsing/parsing-shape-inside-expected.txt 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -27,6 +27,10 @@
</span><span class="cx"> PASS getComputedStyleValue("-webkit-shape-inside", "circle(10px, 20px, 30px)") is "circle(10px, 20px, 30px)"
</span><span class="cx"> PASS getCSSText("-webkit-shape-inside", "circle()") is "circle()"
</span><span class="cx"> PASS getComputedStyleValue("-webkit-shape-inside", "circle()") is "circle(closest-side at 50% 50%)"
</span><ins>+PASS getCSSText("-webkit-shape-inside", "circle(farthest-side)") is "circle(farthest-side)"
+PASS getComputedStyleValue("-webkit-shape-inside", "circle(farthest-side)") is "circle(farthest-side at 50% 50%)"
+PASS getCSSText("-webkit-shape-inside", "circle(closest-side)") is "circle(closest-side)"
+PASS getComputedStyleValue("-webkit-shape-inside", "circle(closest-side)") is "circle(closest-side at 50% 50%)"
</ins><span class="cx"> PASS getCSSText("-webkit-shape-inside", "circle(10px)") is "circle(10px)"
</span><span class="cx"> PASS getComputedStyleValue("-webkit-shape-inside", "circle(10px)") is "circle(10px at 50% 50%)"
</span><span class="cx"> PASS getCSSText("-webkit-shape-inside", "circle(10px at 10px)") is "circle(10px at 10px 50%)"
</span></span></pre></div>
<a id="trunkLayoutTestsfastshapesparsingparsingshapeoutsideexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/shapes/parsing/parsing-shape-outside-expected.txt (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/parsing/parsing-shape-outside-expected.txt 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/LayoutTests/fast/shapes/parsing/parsing-shape-outside-expected.txt 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -27,6 +27,10 @@
</span><span class="cx"> PASS getComputedStyleValue("-webkit-shape-outside", "circle(10px, 20px, 30px)") is "circle(10px, 20px, 30px)"
</span><span class="cx"> PASS getCSSText("-webkit-shape-outside", "circle()") is "circle()"
</span><span class="cx"> PASS getComputedStyleValue("-webkit-shape-outside", "circle()") is "circle(closest-side at 50% 50%)"
</span><ins>+PASS getCSSText("-webkit-shape-outside", "circle(farthest-side)") is "circle(farthest-side)"
+PASS getComputedStyleValue("-webkit-shape-outside", "circle(farthest-side)") is "circle(farthest-side at 50% 50%)"
+PASS getCSSText("-webkit-shape-outside", "circle(closest-side)") is "circle(closest-side)"
+PASS getComputedStyleValue("-webkit-shape-outside", "circle(closest-side)") is "circle(closest-side at 50% 50%)"
</ins><span class="cx"> PASS getCSSText("-webkit-shape-outside", "circle(10px)") is "circle(10px)"
</span><span class="cx"> PASS getComputedStyleValue("-webkit-shape-outside", "circle(10px)") is "circle(10px at 50% 50%)"
</span><span class="cx"> PASS getCSSText("-webkit-shape-outside", "circle(10px at 10px)") is "circle(10px at 10px 50%)"
</span></span></pre></div>
<a id="trunkLayoutTestsfastshapesparsingparsingtestutilsjs"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/shapes/parsing/parsing-test-utils.js (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/parsing/parsing-test-utils.js 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/LayoutTests/fast/shapes/parsing/parsing-test-utils.js 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -21,6 +21,8 @@
</span><span class="cx"> "circle(10px, 20px, 30px)", // FIXME: Remove this test once we do not support the deprecated CSS Shapes syntax anymore.
</span><span class="cx">
</span><span class="cx"> ["circle()", "circle()", "circle(closest-side at 50% 50%)"],
</span><ins>+ ["circle(farthest-side)", "circle(farthest-side)", "circle(farthest-side at 50% 50%)"],
+ ["circle(closest-side)", "circle(closest-side)", "circle(closest-side at 50% 50%)"],
</ins><span class="cx"> ["circle(10px)", "circle(10px)", "circle(10px at 50% 50%)"],
</span><span class="cx"> ["circle(10px at 10px)", "circle(10px at 10px 50%)"],
</span><span class="cx"> "circle(10px at 10px 10px)",
</span></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeinsideshapeinsideanimationexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-animation-expected.txt (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-animation-expected.txt 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-animation-expected.txt 2013-12-03 00:10:21 UTC (rev 159979)
</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><del>-PASS - "webkitShapeInside" property for "circle-box" element at 1s saw something close to: circle(35%, 35%, 35%)
</del><ins>+PASS - "webkitShapeInside" property for "circle-box" element at 1s saw something close to: circle(35% at 35% 35%)
</ins><span class="cx"> PASS - "webkitShapeInside" property for "ellipse-box" element at 1s saw something close to: ellipse(35%, 35%, 35%, 30%)
</span><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 (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-animation.html 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-animation.html 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -33,8 +33,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> @-webkit-keyframes circle-anim {
</span><del>- from { -webkit-shape-inside: circle(50%, 50%, 50%); }
- to { -webkit-shape-inside: circle(20%, 20%, 20%); }
</del><ins>+ from { -webkit-shape-inside: circle(50% at 50% 50%); }
+ to { -webkit-shape-inside: circle(20% at 20% 20%); }
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> @-webkit-keyframes ellipse-anim {
</span><span class="lines">@@ -53,7 +53,7 @@
</span><span class="cx"> const expectedValues = [
</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><del>- ["circle-anim", 1, "circle-box", "webkitShapeInside", "circle(35%, 35%, 35%)", 0.05],
</del><ins>+ ["circle-anim", 1, "circle-box", "webkitShapeInside", "circle(35% at 35% 35%)", 0.05],
</ins><span class="cx"> ["ellipse-anim", 1, "ellipse-box", "webkitShapeInside", "ellipse(35%, 35%, 35%, 30%)", 0.05],
</span><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></pre></div>
<a id="trunkLayoutTestsfastshapesshapeinsideshapeinsidecalccrashexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-calc-crash-expected.txt (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-calc-crash-expected.txt 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-calc-crash-expected.txt 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -1,3 +1,3 @@
</span><del>-PASS window.getComputedStyle(document.getElementById('shape-inside'))['-webkit-shape-inside'] is 'circle(30%, 50%, 50%)'
</del><ins>+PASS window.getComputedStyle(document.getElementById('shape-inside'))['-webkit-shape-inside'] is 'circle(50% at 30% 50%)'
</ins><span class="cx"> This test should not crash
</span><span class="cx"> Hello
</span></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeinsideshapeinsidecalccrashhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-calc-crash.html (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-calc-crash.html 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-calc-crash.html 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -7,12 +7,12 @@
</span><span class="cx"> <script src="../../../resources/js-test-pre.js"></script>
</span><span class="cx"> <script>
</span><span class="cx"> window.onload = function() {
</span><del>- shouldBe("window.getComputedStyle(document.getElementById('shape-inside'))['-webkit-shape-inside']", "'circle(30%, 50%, 50%)'");
</del><ins>+ shouldBe("window.getComputedStyle(document.getElementById('shape-inside'))['-webkit-shape-inside']", "'circle(50% at 30% 50%)'");
</ins><span class="cx"> };
</span><span class="cx"> </script>
</span><span class="cx"> <style>
</span><span class="cx"> #shape-inside {
</span><del>- -webkit-shape-inside: circle(calc(50% - 20%), 50%, 50%);
</del><ins>+ -webkit-shape-inside: circle(50% at calc(50% - 20%) 50%);
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> <body>
</span></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeinsideshapeinsidecirclepaddinghtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-circle-padding.html (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-circle-padding.html 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-circle-padding.html 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -9,7 +9,7 @@
</span><span class="cx"> position: relative;
</span><span class="cx"> width: 400px;
</span><span class="cx"> height: 400px;
</span><del>- -webkit-shape-inside: circle(200px, 200px, 150px);
</del><ins>+ -webkit-shape-inside: circle(150px at 200px 200px);
</ins><span class="cx"> -webkit-shape-padding: 50px;
</span><span class="cx"> font: 141.42px/1 Ahem, sans-serif;
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeinsideshapeinsidecirclehtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-circle.html (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-circle.html 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-circle.html 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -9,7 +9,7 @@
</span><span class="cx"> position: relative;
</span><span class="cx"> width: 400px;
</span><span class="cx"> height: 400px;
</span><del>- -webkit-shape-inside: circle(200px, 200px, 100px);
</del><ins>+ -webkit-shape-inside: circle(100px at 200px 200px);
</ins><span class="cx"> font: 141.42px/1 Ahem, sans-serif;
</span><span class="cx">
</span><span class="cx"> color: green;
</span></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeinsideshapeinsidedynamicnestedhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-dynamic-nested.html (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-dynamic-nested.html 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-dynamic-nested.html 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -55,13 +55,13 @@
</span><span class="cx"> -webkit-shape-inside: rectangle(10px, 10px, 180px, 180px);
</span><span class="cx"> }
</span><span class="cx"> .inside-alt {
</span><del>- -webkit-shape-inside: circle(50%, 50%, 50%);
</del><ins>+ -webkit-shape-inside: circle(50% at 50% 50%);
</ins><span class="cx"> }
</span><span class="cx"> .outside {
</span><span class="cx"> -webkit-shape-outside: rectangle(10px, 10px, 180px, 180px);
</span><span class="cx"> }
</span><span class="cx"> .outside-alt {
</span><del>- -webkit-shape-inside: circle(50%, 50%, 50%);
</del><ins>+ -webkit-shape-inside: circle(50% at 50% 50%);
</ins><span class="cx"> }
</span><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="lines">@@ -89,4 +89,4 @@
</span><span class="cx"> <p>Removing shape-outside with a prior entry</p>
</span><span class="cx"> <div id='remove-outside-shape' class='container shape outside'><div>xxxxxxxxxx</div></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="trunkLayoutTestsfastshapesshapeinsideshapeinsideemptyexpectedhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-empty-expected.html (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-empty-expected.html 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-empty-expected.html 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -21,7 +21,7 @@
</span><span class="cx"> <p>This text should be pushed down below the green rectangle. (There is a rectangle(0px, 0px, 1em, 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 a circle(0px, 0px, 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 a circle(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 an ellipse(0px, 0px, 0px, 1em) 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 (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-empty.html 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/LayoutTests/fast/shapes/shape-inside/shape-inside-empty.html 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -19,7 +19,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #shape-inside-circle-radius0 {
</span><del>- -webkit-shape-inside: circle(0px, 0px, 0px);
</del><ins>+ -webkit-shape-inside: circle(0px at 0px 0px);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> #shape-inside-ellipse-radiusX0 {
</span><span class="lines">@@ -48,7 +48,7 @@
</span><span class="cx"> This text should be pushed down below the green rectangle. (There is a rectangle(0px, 0px, 1em, 0px) shape-inside CSS property on the green rectangle.)
</span><span class="cx"> </p>
</span><span class="cx"> <p id="shape-inside-circle-radius0">
</span><del>- This text should be pushed down below the green rectangle. (There is a circle(0px, 0px, 0px) shape-inside CSS property on the green rectangle.)
</del><ins>+ 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.)
</ins><span class="cx"> </p>
</span><span class="cx"> <p id="shape-inside-ellipse-radiusX0">
</span><span class="cx"> 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.)
</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 (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation-expected.txt 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation-expected.txt 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -3,7 +3,7 @@
</span><span class="cx"> Moving Text
</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><del>-PASS - "webkitShapeOutside" property for "circle-box" element at 1s saw something close to: circle(35%, 35%, 35%)
</del><ins>+PASS - "webkitShapeOutside" property for "circle-box" element at 1s saw something close to: circle(35% at 35% 35%)
</ins><span class="cx"> PASS - "webkitShapeOutside" property for "ellipse-box" element at 1s saw something close to: ellipse(35%, 35%, 35%, 30%)
</span><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 (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation.html 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation.html 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -37,8 +37,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> @-webkit-keyframes circle-anim {
</span><del>- from { -webkit-shape-outside: circle(50%, 50%, 50%); }
- to { -webkit-shape-outside: circle(20%, 20%, 20%); }
</del><ins>+ from { -webkit-shape-outside: circle(50% at 50% 50%); }
+ to { -webkit-shape-outside: circle(20% at 20% 20%); }
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> @-webkit-keyframes ellipse-anim {
</span><span class="lines">@@ -57,7 +57,7 @@
</span><span class="cx"> const expectedValues = [
</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><del>- ["circle-anim", 1, "circle-box", "webkitShapeOutside", "circle(35%, 35%, 35%)", 0.05],
</del><ins>+ ["circle-anim", 1, "circle-box", "webkitShapeOutside", "circle(35% at 35% 35%)", 0.05],
</ins><span class="cx"> ["ellipse-anim", 1, "ellipse-box", "webkitShapeOutside", "ellipse(35%, 35%, 35%, 30%)", 0.05],
</span><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></pre></div>
<a id="trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsidefloatscircle000expectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-000-expected.html (0 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-000-expected.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-000-expected.html 2013-12-03 00:10:21 UTC (rev 159979)
</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;
+}
+
+.circle {
+ z-index: -1;
+ width: 160px;
+ height: 160px;
+ border-radius: 80px;
+ background-color: blue;
+ overflow: hidden;
+}
+
+#left-circle-outline {
+ position: absolute;
+ top: 20px;
+ left: 0px;
+}
+
+#right-circle-outline {
+ position: absolute;
+ top: 20px;
+ right: 0px;
+}
+
+.left-circle-float-line {
+ float: left;
+ clear: left;
+ height: 20px;
+}
+
+.right-circle-float-line {
+ float: right;
+ clear: right;
+ height: 20px;
+}
+</style>
+<body>
+<p>The black squares should trace the right side of the circle's blue outline.</p>
+<div class="container">
+X<br/>
+ <div id="left-circle-outline" class="circle"></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 circle's blue outline.</p>
+<div class="container" style="text-align: right">
+X<br/>
+ <div id="right-circle-outline" class="circle"></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: 160, height: 160, rx: 80, ry: 80},
+ containerWidth: 500,
+ containerHeight: 200,
+ lineHeight: 20,
+ floatElementClassSuffix: "circle-float-line",
+ insertElementIdSuffix: "circle-outline"
+});
+</script>
+
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsidefloatscircle000html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-000.html (0 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-000.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-000.html 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -0,0 +1,51 @@
</span><ins>+<!DOCTYPE html>
+<title>Circle shape-outside on floats</title>
+<style>
+.container {
+ font: 20px/1 Ahem, sans-serif;
+ width: 500px;
+ height: 200px;
+ border: 1px solid black;
+}
+
+.circle {
+ width: 160px;
+ height: 160px;
+ background-color: blue;
+ overflow: hidden;
+ border-radius: 80px;
+ -webkit-shape-outside: circle(80px at 80px 80px);
+}
+</style>
+
+<body>
+<p>The black squares should trace the right side of the circle's blue outline.</p>
+<div class="container">
+X<br/>
+ <div style="float: left" class="circle"></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 circle's blue outline.</p>
+<div class="container" style="text-align: right">
+X<br/>
+ <div style="float: right" class="circle"></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="trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsidefloatscircle001expectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-001-expected.html (0 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-001-expected.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-001-expected.html 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -0,0 +1,31 @@
</span><ins>+<!DOCTYPE html>
+<style>
+.container {
+ font: 40px/1 Ahem, sans-serif;
+ line-height: 40px;
+ width: 110px;
+ height: 40px;
+ overflow: hidden;
+ white-space: nowrap;
+ color: green;
+}
+
+.circle {
+ width: 138px;
+ height: 40px;
+ background-color: green;
+}
+</style>
+
+<body>
+ <p>You should see a green rectangle. You shouldn't see any red.</p>
+<div class="container">
+ <div style="float: left" class="circle"></div>
+X
+</div>
+
+<div class="container" style="text-align: right">
+<div style="float: right" class="circle"></div>
+X
+</div>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsidefloatscircle001html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-001.html (0 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-001.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-001.html 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -0,0 +1,34 @@
</span><ins>+<!DOCTYPE html>
+<title>Circle shape-outside on floats with percentage radius</title>
+<style>
+.container {
+ font: 40px/1 Ahem, sans-serif;
+ line-height: 40px;
+ width: 110px;
+ height: 40px;
+ overflow: hidden;
+ white-space: nowrap;
+ background-color: red;
+ color: green;
+}
+
+.circle {
+ width: 80px;
+ height: 40px;
+ background-color: green;
+ -webkit-shape-outside: circle(50% at 50% 50%) content-box;
+}
+</style>
+
+<body>
+ <p>You should see a green rectangle. You shouldn't see any red.</p>
+<div class="container">
+ <div style="float: left; margin-right: 40px;" class="circle"></div>
+X
+</div>
+
+<div class="container" style="text-align: right">
+<div style="float: right; margin-left: 40px;" class="circle"></div>
+X
+</div>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsidefloatscircle002expectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-002-expected.html (0 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-002-expected.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-002-expected.html 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -0,0 +1,31 @@
</span><ins>+<!DOCTYPE html>
+<style>
+.container {
+ font: 40px/1 Ahem, sans-serif;
+ line-height: 40px;
+ width: 110px;
+ height: 40px;
+ overflow: hidden;
+ white-space: nowrap;
+ color: green;
+}
+
+.circle {
+ width: 138px;
+ height: 40px;
+ background-color: green;
+}
+</style>
+
+<body>
+ <p>You should see a green rectangle. You shouldn't see any red.</p>
+<div class="container">
+ <div style="float: left" class="circle"></div>
+X
+</div>
+
+<div class="container" style="text-align: right">
+<div style="float: right" class="circle"></div>
+X
+</div>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsidefloatscircle002html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-002.html (0 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-002.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-002.html 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -0,0 +1,34 @@
</span><ins>+<!DOCTYPE html>
+<title>Circle shape-outside on floats with default position</title>
+<style>
+.container {
+ font: 40px/1 Ahem, sans-serif;
+ line-height: 40px;
+ width: 110px;
+ height: 40px;
+ overflow: hidden;
+ white-space: nowrap;
+ background-color: red;
+ color: green;
+}
+
+.circle {
+ width: 80px;
+ height: 40px;
+ background-color: green;
+ -webkit-shape-outside: circle(50%) content-box;
+}
+</style>
+
+<body>
+ <p>You should see a green rectangle. You shouldn't see any red.</p>
+<div class="container">
+ <div style="float: left; margin-right: 40px;" class="circle"></div>
+X
+</div>
+
+<div class="container" style="text-align: right">
+<div style="float: right; margin-left: 40px;" class="circle"></div>
+X
+</div>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsidefloatscircle003expectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-003-expected.html (0 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-003-expected.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-003-expected.html 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -0,0 +1,31 @@
</span><ins>+<!DOCTYPE html>
+<style>
+.container {
+ font: 40px/1 Ahem, sans-serif;
+ line-height: 40px;
+ width: 100px;
+ height: 40px;
+ overflow: hidden;
+ white-space: nowrap;
+ color: green;
+}
+
+.circle {
+ width: 138px;
+ height: 40px;
+ background-color: green;
+}
+</style>
+
+<body>
+ <p>You should see a green rectangle. You shouldn't see any red.</p>
+<div class="container">
+ <div style="float: left" class="circle"></div>
+X
+</div>
+
+<div class="container" style="text-align: right">
+<div style="float: right" class="circle"></div>
+X
+</div>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsidefloatscircle003html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-003.html (0 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-003.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-003.html 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -0,0 +1,34 @@
</span><ins>+<!DOCTYPE html>
+<title>Circle shape-outside on floats with default position and radius</title>
+<style>
+.container {
+ font: 40px/1 Ahem, sans-serif;
+ line-height: 40px;
+ width: 100px;
+ height: 40px;
+ overflow: hidden;
+ white-space: nowrap;
+ background-color: red;
+ color: green;
+}
+
+.circle {
+ width: 80px;
+ height: 40px;
+ background-color: green;
+ -webkit-shape-outside: circle();
+}
+</style>
+
+<body>
+ <p>You should see a green rectangle. You shouldn't see any red.</p>
+<div class="container">
+ <div style="float: left; margin-right: 40px;" class="circle"></div>
+X
+</div>
+
+<div class="container" style="text-align: right">
+<div style="float: right; margin-left: 40px;" class="circle"></div>
+X
+</div>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsidefloatscircle004expectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-004-expected.html (0 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-004-expected.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-004-expected.html 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -0,0 +1,31 @@
</span><ins>+<!DOCTYPE html>
+<style>
+.container {
+ font: 40px/1 Ahem, sans-serif;
+ line-height: 40px;
+ width: 110px;
+ height: 40px;
+ overflow: hidden;
+ white-space: nowrap;
+ color: green;
+}
+
+.circle {
+ width: 138px;
+ height: 40px;
+ background-color: green;
+}
+</style>
+
+<body>
+ <p>You should see a green rectangle. You shouldn't see any red.</p>
+<div class="container">
+ <div style="float: left" class="circle"></div>
+X
+</div>
+
+<div class="container" style="text-align: right">
+<div style="float: right" class="circle"></div>
+X
+</div>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsidefloatscircle004html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-004.html (0 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-004.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-004.html 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -0,0 +1,34 @@
</span><ins>+<!DOCTYPE html>
+<title>Circle shape-outside on floats center set to farthest-side</title>
+<style>
+.container {
+ font: 40px/1 Ahem, sans-serif;
+ line-height: 40px;
+ width: 110px;
+ height: 40px;
+ overflow: hidden;
+ white-space: nowrap;
+ background-color: red;
+ color: green;
+}
+
+.circle {
+ width: 80px;
+ height: 40px;
+ background-color: green;
+ -webkit-shape-outside: circle(farthest-side) content-box;
+}
+</style>
+
+<body>
+ <p>You should see a green rectangle. You shouldn't see any red.</p>
+<div class="container">
+ <div style="float: left; margin-right: 40px;" class="circle"></div>
+X
+</div>
+
+<div class="container" style="text-align: right">
+<div style="float: right; margin-left: 40px;" class="circle"></div>
+X
+</div>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsidefloatscircle005expectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-005-expected.html (0 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-005-expected.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-005-expected.html 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -0,0 +1,31 @@
</span><ins>+<!DOCTYPE html>
+<style>
+.container {
+ font: 40px/1 Ahem, sans-serif;
+ line-height: 40px;
+ width: 110px;
+ height: 40px;
+ overflow: hidden;
+ white-space: nowrap;
+ color: green;
+}
+
+.circle {
+ width: 138px;
+ height: 40px;
+ background-color: green;
+}
+</style>
+
+<body>
+ <p>You should see a green rectangle. You shouldn't see any red.</p>
+<div class="container">
+ <div style="float: left" class="circle"></div>
+X
+</div>
+
+<div class="container" style="text-align: right">
+<div style="float: right" class="circle"></div>
+X
+</div>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastshapesshapeoutsidefloatsshapeoutsidefloatscircle005html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-005.html (0 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-005.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-circle-005.html 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -0,0 +1,41 @@
</span><ins>+<!DOCTYPE html>
+<title>Circle shape-outside on floats center set using keywords and offsets</title>
+<style>
+.container {
+ font: 40px/1 Ahem, sans-serif;
+ line-height: 40px;
+ width: 110px;
+ height: 40px;
+ overflow: hidden;
+ white-space: nowrap;
+ background-color: red;
+ color: green;
+}
+
+.circle {
+ width: 80px;
+ height: 40px;
+ background-color: green;
+}
+
+.circle-right {
+ -webkit-shape-outside: circle(at top 20px left 20px) content-box;
+}
+
+.circle-left {
+ -webkit-shape-outside: circle(at bottom 20px right 20px) content-box;
+}
+</style>
+
+<body>
+ <p>You should see a green rectangle. You shouldn't see any red.</p>
+<div class="container">
+ <div style="float: left; margin-right: 40px;" class="circle circle-left"></div>
+X
+</div>
+
+<div class="container" style="text-align: right">
+<div style="float: right; margin-left: 40px;" class="circle circle-right"></div>
+X
+</div>
+</body>
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/Source/WebCore/ChangeLog 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -1,3 +1,45 @@
</span><ins>+2013-12-02 Bem Jones-Bey <bjonesbe@adobe.com>
+
+ [css shapes] Layout support for new circle shape syntax
+ https://bugs.webkit.org/show_bug.cgi?id=124619
+
+ Reviewed by Dirk Schulze.
+
+ Implement support for doing layout with the new circle shape syntax,
+ inclduing basic animation support.
+
+ Tests: fast/shapes/shape-outside-floats/shape-outside-floats-circle-000.html
+ fast/shapes/shape-outside-floats/shape-outside-floats-circle-001.html
+ fast/shapes/shape-outside-floats/shape-outside-floats-circle-002.html
+ fast/shapes/shape-outside-floats/shape-outside-floats-circle-003.html
+ fast/shapes/shape-outside-floats/shape-outside-floats-circle-004.html
+ fast/shapes/shape-outside-floats/shape-outside-floats-circle-005.html
+
+ * css/BasicShapeFunctions.cpp:
+ (WebCore::floatValueForCenterCoordinate): Used by both the CSS Shapes
+ layout code and the clip path code.
+ * css/BasicShapeFunctions.h:
+ * css/CSSBasicShapes.cpp:
+ (WebCore::buildCircleString): Update to use appendLiteral, and remove
+ call to reserveCapacity - if we find that it's actually slow when
+ doing performance tests, we can hopefully do something smarter and
+ less ugly than that.
+ * css/CSSParser.cpp:
+ (WebCore::CSSParser::parseShapeRadius): Fix a logic error that caused
+ the radius keywords not to work properly.
+ * rendering/shapes/Shape.cpp:
+ (WebCore::Shape::createShape): Convert new circle to a layout shape.
+ * rendering/style/BasicShapes.cpp:
+ (WebCore::BasicShape::canBlend): Ignore circles with values that
+ cannot be interpolated.
+ (WebCore::BasicShapeCircle::floatValueForRadiusInBox): Convert circle
+ radius keywords to a float value.
+ (WebCore::BasicShapeCircle::path):
+ (WebCore::BasicShapeCircle::blend):
+ * rendering/style/BasicShapes.h:
+ (WebCore::BasicShapeCenterCoordinate::canBlend):
+ (WebCore::BasicShapeRadius::canBlend):
+
</ins><span class="cx"> 2013-12-02 Alexey Proskuryakov <ap@apple.com>
</span><span class="cx">
</span><span class="cx"> WebCrypto HMAC doesn't check key algorithm's hash
</span></span></pre></div>
<a id="trunkSourceWebCorecssBasicShapeFunctionscpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/BasicShapeFunctions.cpp (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/BasicShapeFunctions.cpp 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/Source/WebCore/css/BasicShapeFunctions.cpp 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -450,4 +450,23 @@
</span><span class="cx">
</span><span class="cx"> return basicShape.release();
</span><span class="cx"> }
</span><ins>+
+float floatValueForCenterCoordinate(const BasicShapeCenterCoordinate& center, float boxDimension)
+{
+ float offset = floatValueForLength(center.length(), boxDimension);
+ switch (center.keyword()) {
+ case BasicShapeCenterCoordinate::None:
+ return offset;
+ case BasicShapeCenterCoordinate::Top:
+ case BasicShapeCenterCoordinate::Left:
+ return offset;
+ case BasicShapeCenterCoordinate::Bottom:
+ case BasicShapeCenterCoordinate::Right:
+ return boxDimension - offset;
+ }
+
+ ASSERT_NOT_REACHED();
+ return 0;
</ins><span class="cx"> }
</span><ins>+
+}
</ins></span></pre></div>
<a id="trunkSourceWebCorecssBasicShapeFunctionsh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/BasicShapeFunctions.h (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/BasicShapeFunctions.h 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/Source/WebCore/css/BasicShapeFunctions.h 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -45,5 +45,8 @@
</span><span class="cx">
</span><span class="cx"> PassRefPtr<CSSPrimitiveValue> valueForBox(BasicShape::ReferenceBox);
</span><span class="cx"> BasicShape::ReferenceBox boxForValue(const CSSPrimitiveValue*);
</span><ins>+
+float floatValueForCenterCoordinate(const BasicShapeCenterCoordinate&, float);
</ins><span class="cx"> }
</span><ins>+
</ins><span class="cx"> #endif
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSBasicShapescpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSBasicShapes.cpp (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSBasicShapes.cpp 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/Source/WebCore/css/CSSBasicShapes.cpp 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -102,24 +102,22 @@
</span><span class="cx"> char at[] = "at";
</span><span class="cx"> char separator[] = " ";
</span><span class="cx"> StringBuilder result;
</span><del>- // Compute the required capacity in advance to reduce allocations.
- result.reserveCapacity((sizeof(opening) - 1) + (3 * (sizeof(separator) - 1)) + 1 + radius.length() + sizeof(at) + centerX.length() + centerY.length());
- result.append(opening);
</del><ins>+ result.appendLiteral(opening);
</ins><span class="cx"> if (!radius.isNull())
</span><span class="cx"> result.append(radius);
</span><span class="cx">
</span><span class="cx"> if (!centerX.isNull() || !centerY.isNull()) {
</span><span class="cx"> if (!radius.isNull())
</span><del>- result.append(separator);
- result.append(at);
- result.append(separator);
</del><ins>+ result.appendLiteral(separator);
+ result.appendLiteral(at);
+ result.appendLiteral(separator);
</ins><span class="cx"> result.append(centerX);
</span><del>- result.append(separator);
</del><ins>+ result.appendLiteral(separator);
</ins><span class="cx"> result.append(centerY);
</span><span class="cx"> }
</span><del>- result.append(")");
</del><ins>+ result.appendLiteral(")");
</ins><span class="cx"> if (box.length()) {
</span><del>- result.append(separator);
</del><ins>+ result.appendLiteral(separator);
</ins><span class="cx"> result.append(box);
</span><span class="cx"> }
</span><span class="cx"> return result.toString();
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSParsercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSParser.cpp (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSParser.cpp 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/Source/WebCore/css/CSSParser.cpp 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -5575,7 +5575,7 @@
</span><span class="cx">
</span><span class="cx"> PassRefPtr<CSSPrimitiveValue> CSSParser::parseShapeRadius(CSSParserValue* value)
</span><span class="cx"> {
</span><del>- if (value->id == CSSValueClosestSide && value->id == CSSValueFarthestSide)
</del><ins>+ if (value->id == CSSValueClosestSide || value->id == CSSValueFarthestSide)
</ins><span class="cx"> return cssValuePool().createIdentifierValue(value->id);
</span><span class="cx">
</span><span class="cx"> if (!validUnit(value, FLength | FPercent | FNonNeg))
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingshapesShapecpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/shapes/Shape.cpp (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/shapes/Shape.cpp 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/Source/WebCore/rendering/shapes/Shape.cpp 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -151,8 +151,13 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> case BasicShape::BasicShapeCircleType: {
</span><del>- // FIXME implement layout. bug 124619
- shape = createRectangleShape(FloatRect(0, 0, boxWidth, boxHeight), FloatSize(0, 0));
</del><ins>+ const BasicShapeCircle* circle = static_cast<const BasicShapeCircle*>(basicShape);
+ float centerX = floatValueForCenterCoordinate(circle->centerX(), boxWidth);
+ float centerY = floatValueForCenterCoordinate(circle->centerY(), boxHeight);
+ float radius = circle->floatValueForRadiusInBox(boxWidth, boxHeight);
+ FloatPoint logicalCenter = physicalPointToLogical(FloatPoint(centerX, centerY), logicalBoxSize.height(), writingMode);
+
+ shape = createShapeCircle(logicalCenter, radius);
</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 (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/BasicShapes.cpp 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/Source/WebCore/rendering/style/BasicShapes.cpp 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -31,6 +31,7 @@
</span><span class="cx">
</span><span class="cx"> #include "BasicShapes.h"
</span><span class="cx">
</span><ins>+#include "BasicShapeFunctions.h"
</ins><span class="cx"> #include "FloatRect.h"
</span><span class="cx"> #include "LengthFunctions.h"
</span><span class="cx"> #include "Path.h"
</span><span class="lines">@@ -48,6 +49,16 @@
</span><span class="cx"> && static_cast<const BasicShapePolygon*>(this)->values().size() != static_cast<const BasicShapePolygon*>(other)->values().size())
</span><span class="cx"> return false;
</span><span class="cx">
</span><ins>+ // Circles with keywords for radii or center coordinates cannot be animated.
+ if (type() == BasicShape::BasicShapeCircleType) {
+ const BasicShapeCircle* thisCircle = static_cast<const BasicShapeCircle*>(this);
+ const BasicShapeCircle* otherCircle = static_cast<const BasicShapeCircle*>(other);
+ if (!thisCircle->radius().canBlend(otherCircle->radius())
+ || !thisCircle->centerX().canBlend(otherCircle->centerX())
+ || !thisCircle->centerY().canBlend(otherCircle->centerY()))
+ return false;
+ }
+
</ins><span class="cx"> return true;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -110,21 +121,28 @@
</span><span class="cx"> return result.release();
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+float BasicShapeCircle::floatValueForRadiusInBox(float boxWidth, float boxHeight) const
+{
+ if (m_radius.type() == BasicShapeRadius::Value)
+ return floatValueForLength(m_radius.value(), sqrtf((boxWidth * boxWidth + boxHeight * boxHeight) / 2));
+
+ float centerX = floatValueForCenterCoordinate(m_centerX, boxWidth);
+ float centerY = floatValueForCenterCoordinate(m_centerY, boxHeight);
+
+ if (m_radius.type() == BasicShapeRadius::ClosestSide)
+ return std::min(std::min(centerX, boxWidth - centerX), std::min(centerY, boxHeight - centerY));
+
+ // If radius.type() == BasicShapeRadius::FarthestSide.
+ return std::max(std::max(centerX, boxWidth - centerX), std::max(centerY, boxHeight - centerY));
+}
+
</ins><span class="cx"> void BasicShapeCircle::path(Path& path, const FloatRect& boundingBox)
</span><span class="cx"> {
</span><span class="cx"> ASSERT(path.isEmpty());
</span><del>- // FIXME Complete implementation of path. Bug 124619.
- // Compute closest-side and farthest-side from boundingBox.
- // Compute top, left, bottom, right from boundingBox.
- if (m_radius.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 radius = floatValueForLength(m_radius.value(), diagonal);
</del><ins>+ float centerX = floatValueForCenterCoordinate(m_centerX, boundingBox.width());
+ float centerY = floatValueForCenterCoordinate(m_centerY, boundingBox.height());
+ float radius = floatValueForRadiusInBox(boundingBox.width(), boundingBox.height());
</ins><span class="cx"> path.addEllipse(FloatRect(
</span><span class="cx"> centerX - radius + boundingBox.x(),
</span><span class="cx"> centerY - radius + boundingBox.y(),
</span><span class="lines">@@ -139,13 +157,6 @@
</span><span class="cx"> const BasicShapeCircle* o = static_cast<const BasicShapeCircle*>(other);
</span><span class="cx"> RefPtr<BasicShapeCircle> result = BasicShapeCircle::create();
</span><span class="cx">
</span><del>- if (m_radius.type() != BasicShapeRadius::Value || o->radius().type() != BasicShapeRadius::Value) {
- result->setCenterX(o->centerX());
- result->setCenterY(o->centerY());
- result->setRadius(o->radius());
- return result;
- }
-
</del><span class="cx"> result->setCenterX(m_centerX.blend(o->centerX(), progress));
</span><span class="cx"> result->setCenterY(m_centerY.blend(o->centerY(), progress));
</span><span class="cx"> result->setRadius(m_radius.blend(o->radius(), progress));
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleBasicShapesh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/BasicShapes.h (159978 => 159979)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/BasicShapes.h 2013-12-02 23:55:06 UTC (rev 159978)
+++ trunk/Source/WebCore/rendering/style/BasicShapes.h 2013-12-03 00:10:21 UTC (rev 159979)
</span><span class="lines">@@ -144,6 +144,12 @@
</span><span class="cx"> Keyword keyword() const { return m_keyword; }
</span><span class="cx"> const Length& length() const { return m_length; }
</span><span class="cx">
</span><ins>+ bool canBlend(const BasicShapeCenterCoordinate& other) const
+ {
+ // FIXME determine how to interpolate between keywords. See bug 125108.
+ return m_keyword == None && other.keyword() == None;
+ }
+
</ins><span class="cx"> BasicShapeCenterCoordinate blend(const BasicShapeCenterCoordinate& other, double progress) const
</span><span class="cx"> {
</span><span class="cx"> if (m_keyword != None || other.keyword() != None)
</span><span class="lines">@@ -172,6 +178,12 @@
</span><span class="cx"> const Length& value() const { return m_value; }
</span><span class="cx"> Type type() const { return m_type; }
</span><span class="cx">
</span><ins>+ bool canBlend(const BasicShapeRadius& other) const
+ {
+ // FIXME determine how to interpolate between keywords. See bug 125108.
+ return m_type == Value && other.type() == Value;
+ }
+
</ins><span class="cx"> BasicShapeRadius blend(const BasicShapeRadius& other, double progress) const
</span><span class="cx"> {
</span><span class="cx"> if (m_type != Value || other.type() != Value)
</span><span class="lines">@@ -193,6 +205,7 @@
</span><span class="cx"> const BasicShapeCenterCoordinate& centerX() const { return m_centerX; }
</span><span class="cx"> const BasicShapeCenterCoordinate& centerY() const { return m_centerY; }
</span><span class="cx"> const BasicShapeRadius& radius() const { return m_radius; }
</span><ins>+ float floatValueForRadiusInBox(float boxWidth, float boxHeight) 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>