Log Message
SVG stroke-dasharray is not animatable https://bugs.webkit.org/show_bug.cgi?id=118574
Reviewed by Dirk Schulze. Source/WebCore: Make stroke-dasharray a property that can be animated using CSS transitions. * page/animation/CSSPropertyAnimation.cpp: (WebCore::blendFunc): (WebCore::CSSPropertyAnimation::ensurePropertyMap): * rendering/style/RenderStyle.h: LayoutTests: Add test for animating stroke-dasharray in addition to the original SVG tests. * transitions/svg-transitions-expected.txt: * transitions/svg-transitions.html:
Modified Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (153753 => 153754)
--- trunk/LayoutTests/ChangeLog 2013-08-06 15:40:50 UTC (rev 153753)
+++ trunk/LayoutTests/ChangeLog 2013-08-06 15:54:23 UTC (rev 153754)
@@ -1,3 +1,15 @@
+2013-08-05 Rob Buis <[email protected]>
+
+ SVG stroke-dasharray is not animatable
+ https://bugs.webkit.org/show_bug.cgi?id=118574
+
+ Reviewed by Dirk Schulze.
+
+ Add test for animating stroke-dasharray in addition to the original SVG tests.
+
+ * transitions/svg-transitions-expected.txt:
+ * transitions/svg-transitions.html:
+
2013-08-06 Sergio Villar Senin <[email protected]>
[CSS Grid Layout] Allow defining named grid lines on the grid element
Modified: trunk/LayoutTests/transitions/svg-transitions-expected.txt (153753 => 153754)
--- trunk/LayoutTests/transitions/svg-transitions-expected.txt 2013-08-06 15:40:50 UTC (rev 153753)
+++ trunk/LayoutTests/transitions/svg-transitions-expected.txt 2013-08-06 15:54:23 UTC (rev 153754)
@@ -3,13 +3,18 @@
PASS - "fill-opacity" property for "rect1" element at 1s saw something close to: 0.6
PASS - "stroke-width" property for "rect1" element at 1s saw something close to: 3
PASS - "stroke-opacity" property for "rect1" element at 1s saw something close to: 0.6
+PASS - "stroke-dasharray" property for "rect1" element at 1s saw something close to: 15,15
PASS - "stroke-dashoffset" property for "rect1" element at 1s saw something close to: 5
PASS - "fill" property for "rect2" element at 1s saw something close to: 0,127,127
PASS - "stroke" property for "rect2" element at 1s saw something close to: 127,0,0
+PASS - "stroke-dasharray" property for "rect2" element at 1s saw something close to: 15,15
PASS - "stroke-width" property for "rect4" element at 1s saw something close to: 8
PASS - "stroke-width" property for "rect5" element at 1s saw something close to: 5
+PASS - "stroke-dasharray" property for "rect5" element at 1s saw something close to: 20
PASS - "stroke-width" property for "rect6" element at 1s saw something close to: 15
+PASS - "stroke-dasharray" property for "rect6" element at 1s saw something close to: 15,15,20,12.5,17.5,17.5
FAIL - "fill" property for "rect7" element at 1s expected: 0,0,127 but saw: #invalid #0000ff
+PASS - "stroke-dasharray" property for "rect7" element at 1s saw something close to: none
PASS - "stop-color" property for "stop1" element at 1s saw something close to: 127,127,0
PASS - "stop-opacity" property for "stop1" element at 1s saw something close to: 0.75
PASS - "stroke-miterlimit" property for "polyline1" element at 1s saw something close to: 11
Modified: trunk/LayoutTests/transitions/svg-transitions.html (153753 => 153754)
--- trunk/LayoutTests/transitions/svg-transitions.html 2013-08-06 15:40:50 UTC (rev 153753)
+++ trunk/LayoutTests/transitions/svg-transitions.html 2013-08-06 15:54:23 UTC (rev 153754)
@@ -3,7 +3,7 @@
<style>
svg * {
- -webkit-transition-property: fill, stroke, fill-opacity, stroke-opacity, stroke-width, stroke-dashoffset, stroke-miterlimit, kerning, baseline-shift, flood-color, flood-opacity, stop-color, stop-opacity, lighting-color;
+ -webkit-transition-property: fill, stroke, fill-opacity, stroke-opacity, stroke-width, stroke-dasharray, stroke-dashoffset, stroke-miterlimit, kerning, baseline-shift, flood-color, flood-opacity, stop-color, stop-opacity, lighting-color;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
}
@@ -15,7 +15,7 @@
stroke-opacity: 1;
stroke-width: 2;
stroke-dashoffset: 0;
- stroke-dasharray: 10;
+ stroke-dasharray: 10 10;
}
.animating #rect1 {
fill: rgb(0, 255, 0);
@@ -24,15 +24,18 @@
stroke-opacity: 0.2;
stroke-width: 4;
stroke-dashoffset: 10;
+ stroke-dasharray: 20 20;
}
#rect2 {
fill: rgb(0, 0, 255);
stroke: rgb(255, 0, 0);
+ stroke-dasharray: 10;
}
.animating #rect2 {
fill: rgb(0, 255, 0);
stroke: rgb(0, 0, 0);
+ stroke-dasharray: 20 20;
}
#rect3 {
@@ -62,24 +65,30 @@
#rect5 {
stroke: black;
stroke-width: 0;
+ stroke-dasharray: none;
}
.animating #rect5 {
stroke-width: 10px;
+ stroke-dasharray: 20;
}
#rect6 {
stroke: black;
stroke-width: 10%;
+ stroke-dasharray: 20 15;
}
.animating #rect6 {
stroke-width: 20%;
+ stroke-dasharray: 10 15 20;
}
#rect7 {
fill: url(#invalid) black;
+ stroke-dasharray: 20;
}
.animating #rect7 {
fill: url(#invalid) blue;
+ stroke-dasharray: none;
}
#polyline1 {
@@ -124,13 +133,18 @@
[1, "rect1", "fill-opacity", 0.6, 0.1], // 1 -> 0.2
[1, "rect1", "stroke-width", 3, 0.5], // 2 -> 4
[1, "rect1", "stroke-opacity", 0.6, 0.1], // 1 -> 0.2
+ [1, "rect1", "stroke-dasharray", [15, 15], 1], // 10 -> 20
[1, "rect1", "stroke-dashoffset", 5, 1], // 0 -> 10
[1, "rect2", "fill", [0, 127, 127], 20], // rgb(0, 0, 255) -> rgb(0, 255, 0)
[1, "rect2", "stroke", [127, 0, 0], 20], // rgb(255, 0, 0) -> rgb(0, 0, 0)
+ [1, "rect2", "stroke-dasharray", [15, 15], 1], // 10 -> 20
[1, "rect4", "stroke-width", 8, 1], // 1px to 4mm
[1, "rect5", "stroke-width", 5, 1], // 0 to 10px
+ [1, "rect5", "stroke-dasharray", [20], 1], // 20 at half time
[1, "rect6", "stroke-width", 15, 2], // 10% to 20%
+ [1, "rect6", "stroke-dasharray", [15, 15, 20, 12.5, 17.5, 17.5], 1], // 20 -> 10, 15 -> 15, 20 -> 20, 15 -> 10, 20 -> 15, 15 -> 20
[1, "rect7", "fill", [0, 0, 127], 20], // url(#invalid) black -> url(#invalid) blue
+ [1, "rect7", "stroke-dasharray", "none", 1], // none at half time
[1, "stop1", "stop-color", [127, 127, 0], 20], // rgb(255,0,0) -> rgb(0, 255, 0)
[1, "stop1", "stop-opacity", 0.75, 0.1], // 1 -> 0.5
[1, "polyline1", "stroke-miterlimit", 11, 0.5], // 12 -> 10 (this is an abrupt change in rendering even though the property animation is smooth)
@@ -182,4 +196,4 @@
<div id="result"></div>
</body>
-</html>
\ No newline at end of file
+</html>
Modified: trunk/Source/WebCore/ChangeLog (153753 => 153754)
--- trunk/Source/WebCore/ChangeLog 2013-08-06 15:40:50 UTC (rev 153753)
+++ trunk/Source/WebCore/ChangeLog 2013-08-06 15:54:23 UTC (rev 153754)
@@ -1,3 +1,17 @@
+2013-08-05 Rob Buis <[email protected]>
+
+ SVG stroke-dasharray is not animatable
+ https://bugs.webkit.org/show_bug.cgi?id=118574
+
+ Reviewed by Dirk Schulze.
+
+ Make stroke-dasharray a property that can be animated using CSS transitions.
+
+ * page/animation/CSSPropertyAnimation.cpp:
+ (WebCore::blendFunc):
+ (WebCore::CSSPropertyAnimation::ensurePropertyMap):
+ * rendering/style/RenderStyle.h:
+
2013-08-06 Sergio Villar Senin <[email protected]>
[CSS Grid Layout] Allow defining named grid lines on the grid element
Modified: trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp (153753 => 153754)
--- trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp 2013-08-06 15:40:50 UTC (rev 153753)
+++ trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp 2013-08-06 15:54:23 UTC (rev 153754)
@@ -230,6 +230,26 @@
{
return to.blend(from, narrowPrecisionToFloat(progress));
}
+static inline Vector<SVGLength> blendFunc(const AnimationBase*, const Vector<SVGLength>& from, const Vector<SVGLength>& to, double progress)
+{
+ size_t fromLength = from.size();
+ size_t toLength = to.size();
+ if (!fromLength)
+ return !progress ? from : to;
+ if (!toLength)
+ return progress == 1 ? from : to;
+ size_t resultLength = fromLength;
+ if (fromLength != toLength) {
+ if (!remainder(std::max(fromLength, toLength), std::min(fromLength, toLength)))
+ resultLength = std::max(fromLength, toLength);
+ else
+ resultLength = fromLength * toLength;
+ }
+ Vector<SVGLength> result(resultLength);
+ for (size_t i = 0; i < resultLength; ++i)
+ result[i] = to[i % toLength].blend(from[i % fromLength], narrowPrecisionToFloat(progress));
+ return result;
+}
#endif
static inline PassRefPtr<StyleImage> crossfadeBlend(const AnimationBase*, StyleCachedImage* fromStyleImage, StyleCachedImage* toStyleImage, double progress)
@@ -1188,6 +1208,7 @@
gPropertyWrappers->append(new PropertyWrapperSVGPaint(CSSPropertyStroke, &RenderStyle::strokePaintType, &RenderStyle::strokePaintColor, &RenderStyle::setStrokePaintColor));
gPropertyWrappers->append(new PropertyWrapper<float>(CSSPropertyStrokeOpacity, &RenderStyle::strokeOpacity, &RenderStyle::setStrokeOpacity));
gPropertyWrappers->append(new PropertyWrapper<SVGLength>(CSSPropertyStrokeWidth, &RenderStyle::strokeWidth, &RenderStyle::setStrokeWidth));
+ gPropertyWrappers->append(new PropertyWrapper< Vector<SVGLength> >(CSSPropertyStrokeDasharray, &RenderStyle::strokeDashArray, &RenderStyle::setStrokeDashArray));
gPropertyWrappers->append(new PropertyWrapper<SVGLength>(CSSPropertyStrokeDashoffset, &RenderStyle::strokeDashOffset, &RenderStyle::setStrokeDashOffset));
gPropertyWrappers->append(new PropertyWrapper<float>(CSSPropertyStrokeMiterlimit, &RenderStyle::strokeMiterLimit, &RenderStyle::setStrokeMiterLimit));
Modified: trunk/Source/WebCore/rendering/style/RenderStyle.h (153753 => 153754)
--- trunk/Source/WebCore/rendering/style/RenderStyle.h 2013-08-06 15:40:50 UTC (rev 153753)
+++ trunk/Source/WebCore/rendering/style/RenderStyle.h 2013-08-06 15:54:23 UTC (rev 153754)
@@ -1448,6 +1448,8 @@
void setStrokeOpacity(float f) { accessSVGStyle()->setStrokeOpacity(f); }
SVGLength strokeWidth() const { return svgStyle()->strokeWidth(); }
void setStrokeWidth(SVGLength w) { accessSVGStyle()->setStrokeWidth(w); }
+ Vector<SVGLength> strokeDashArray() const { return svgStyle()->strokeDashArray(); }
+ void setStrokeDashArray(Vector<SVGLength> array) { accessSVGStyle()->setStrokeDashArray(array); }
SVGLength strokeDashOffset() const { return svgStyle()->strokeDashOffset(); }
void setStrokeDashOffset(SVGLength d) { accessSVGStyle()->setStrokeDashOffset(d); }
float strokeMiterLimit() const { return svgStyle()->strokeMiterLimit(); }
_______________________________________________ webkit-changes mailing list [email protected] https://lists.webkit.org/mailman/listinfo/webkit-changes
