Chromium Code Reviews Chromium Code Reviews
Issue 25456002:
Web Animations CSS: Support animation of fill and stroke (Closed)
Base URL: svn://svn.chromium.org/blink/trunk| Index: LayoutTests/animations/interpolation/svg-fill-interpolation.html |
| diff --git a/LayoutTests/animations/interpolation/svg-fill-interpolation.html b/LayoutTests/animations/interpolation/svg-fill-interpolation.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..4353be76cd1aa7f5d62d5a166f3184f708f99d60 |
| --- /dev/null |
| +++ b/LayoutTests/animations/interpolation/svg-fill-interpolation.html |
| @@ -0,0 +1,48 @@ |
| +<!DOCTYPE html> |
| +<meta charset="UTF-8"> |
| +<style> |
| +.target { |
| + width: 100px; |
| + height: 100px; |
| + stroke: black; |
| + stroke-width: 20px; |
| +} |
| +.replica { |
| + stroke: green; |
| +} |
| +</style> |
| +<body> |
| +<template id="target-template"> |
| +<svg> |
| +<defs> |
| +<linearGradient id="gradient"> |
| +<stop offset="0" stop-color="green"/> |
| +<stop offset="1" stop-color="gold"/> |
| +</linearGradient> |
| +</defs> |
| +<rect x="0" y="0" width="100" height="100"> |
| +</template> |
| +<script src="resources/interpolation-test.js"></script> |
| +<script> |
| +assertInterpolation({ |
| + property: 'fill', |
| + from: 'orange', |
| + to: 'blue' |
| +}, [ |
| + {at: -0.4, is: '#ffe700'}, |
|
Steve Block
2013/10/03 02:37:53
Can you add a test at a more negative fraction, su
dstockwell
2013/10/03 05:01:07
Done.
|
| + {at: 0, is: 'orange'}, |
| + {at: 0.2, is: '#cc8433'}, |
| + {at: 0.6, is: '#664299'}, |
| + {at: 1, is: 'blue'}, |
| + {at: 1.5, is: 'blue'} |
| +]); |
| +assertInterpolation({ |
| + property: 'fill', |
| + from: 'orange', |
| + to: 'url(#gradient)' |
| +}, [ |
| + {at: 0.2, is: 'orange'}, |
| + {at: 0.6, is: 'url(#gradient)'} |
|
Steve Block
2013/10/03 02:37:53
Can you test at 0 and 1 too to make clear this is
dstockwell
2013/10/03 05:01:07
Done.
|
| +]); |
| +</script> |
| +</body> |
