Modified: trunk/LayoutTests/animations/resources/animation-test-helpers.js (156915 => 156916)
--- trunk/LayoutTests/animations/resources/animation-test-helpers.js 2013-10-04 22:22:00 UTC (rev 156915)
+++ trunk/LayoutTests/animations/resources/animation-test-helpers.js 2013-10-04 22:25:20 UTC (rev 156916)
@@ -460,6 +460,7 @@
|| property == "webkitFilter"
|| property == "webkitClipPath"
|| property == "webkitShapeInside"
+ || property == "webkitShapeOutside"
|| !property.indexOf("webkitTransform")) {
computedValue = window.getComputedStyle(element)[property.split(".")[0]];
} else {
@@ -492,7 +493,7 @@
var filterParameters = parseFilterFunctionList(computedValue);
var filter2Parameters = parseFilterFunctionList(expectedValue);
result = compareFilterFunctions(filterParameters, filter2Parameters, tolerance);
- } else if (property == "webkitClipPath" || property == "webkitShapeInside") {
+ } else if (property == "webkitClipPath" || property == "webkitShapeInside" || property == "webkitShapeOutside") {
var clipPathParameters = parseBasicShape(computedValue);
var clipPathParameters2 = parseBasicShape(expectedValue);
if (!clipPathParameters || !clipPathParameters2)
Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation-expected.txt (0 => 156916)
--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation-expected.txt 2013-10-04 22:25:20 UTC (rev 156916)
@@ -0,0 +1,9 @@
+Moving Text
+Moving Text
+Moving Text
+Moving Text
+PASS - "webkitShapeOutside" property for "rectangle-box" element at 1s saw something close to: rectangle(10%, 10%, 80%, 80%, 0px, 0px)
+PASS - "webkitShapeOutside" property for "circle-box" element at 1s saw something close to: circle(35%, 35%, 35%)
+PASS - "webkitShapeOutside" property for "ellipse-box" element at 1s saw something close to: ellipse(35%, 35%, 35%, 30%)
+PASS - "webkitShapeOutside" property for "polygon-box" element at 1s saw something close to: polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)
+
Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation.html (0 => 156916)
--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-animation.html 2013-10-04 22:25:20 UTC (rev 156916)
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+ <style>
+ .container {
+ width: 200px;
+ height: 200px;
+ }
+ .box {
+ height: 100px;
+ width: 100px;
+ margin: 10px;
+ float: left;
+ }
+
+ #rectangle-box {
+ -webkit-animation: rectangle-anim 2s linear
+ }
+
+ #circle-box {
+ -webkit-animation: circle-anim 2s linear
+ }
+
+ #ellipse-box {
+ -webkit-animation: ellipse-anim 2s linear
+ }
+
+ #polygon-box {
+ -webkit-animation: polygon-anim 2s linear
+ }
+
+
+ @-webkit-keyframes rectangle-anim {
+ from { -webkit-shape-outside: rectangle(0%, 0%, 100%, 100%); }
+ to { -webkit-shape-outside: rectangle(20%, 20%, 60%, 60%); }
+ }
+
+ @-webkit-keyframes circle-anim {
+ from { -webkit-shape-outside: circle(50%, 50%, 50%); }
+ to { -webkit-shape-outside: circle(20%, 20%, 20%); }
+ }
+
+ @-webkit-keyframes ellipse-anim {
+ from { -webkit-shape-outside: ellipse(50%, 50%, 50%, 40%); }
+ to { -webkit-shape-outside: ellipse(20%, 20%, 20%, 20%); }
+ }
+
+ @-webkit-keyframes polygon-anim {
+ from { -webkit-shape-outside: polygon(nonzero, 0% 0%, 100% 0%, 100% 100%, 0% 100%); }
+ to { -webkit-shape-outside: polygon(nonzero, 20% 20%, 80% 20%, 80% 80%, 20% 80%); }
+ }
+
+ </style>
+ <script src=""
+ <script type="text/_javascript_">
+ const expectedValues = [
+ // [animation-name, time, element-id, property, expected-value, tolerance]
+ ["rectangle-anim", 1, "rectangle-box", "webkitShapeOutside", "rectangle(10%, 10%, 80%, 80%, 0px, 0px)", 0.05],
+ ["circle-anim", 1, "circle-box", "webkitShapeOutside", "circle(35%, 35%, 35%)", 0.05],
+ ["ellipse-anim", 1, "ellipse-box", "webkitShapeOutside", "ellipse(35%, 35%, 35%, 30%)", 0.05],
+ ["polygon-anim", 1, "polygon-box", "webkitShapeOutside", "polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)", 0.05],
+ ];
+
+ runAnimationTest(expectedValues);
+ </script>
+</head>
+<body>
+
+<div class='container'>
+ <div class="box" id="rectangle-box"></div>
+ Moving Text
+</div>
+<div class='container'>
+ <div class="box" id="circle-box"></div>
+ Moving Text
+</div>
+<div class='container'>
+ <div class="box" id="ellipse-box"></div>
+ Moving Text
+</div>
+<div class='container'>
+ <div class="box" id="polygon-box"></div>
+ Moving Text
+</div>
+
+<div id="result">
+</div>
+</body>
+</html>
Modified: trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp (156915 => 156916)
--- trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp 2013-10-04 22:22:00 UTC (rev 156915)
+++ trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp 2013-10-04 22:25:20 UTC (rev 156916)
@@ -1245,6 +1245,7 @@
#if ENABLE(CSS_SHAPES)
new PropertyWrapperShape(CSSPropertyWebkitShapeInside, &RenderStyle::shapeInside, &RenderStyle::setShapeInside),
+ new PropertyWrapperShape(CSSPropertyWebkitShapeOutside, &RenderStyle::shapeOutside, &RenderStyle::setShapeOutside),
#endif
new PropertyWrapperVisitedAffectedColor(CSSPropertyWebkitColumnRuleColor, MaybeInvalidColor, &RenderStyle::columnRuleColor, &RenderStyle::setColumnRuleColor, &RenderStyle::visitedLinkColumnRuleColor, &RenderStyle::setVisitedLinkColumnRuleColor),
