Chromium Code Reviews| Index: ManualTests/clip-path-animated.html |
| diff --git a/ManualTests/clip-path-animated.html b/ManualTests/clip-path-animated.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..9b68f5d6950bc6634d28b65fa15b06daec37785a |
| --- /dev/null |
| +++ b/ManualTests/clip-path-animated.html |
| @@ -0,0 +1,28 @@ |
| +<!DOCTYPE html> |
|
pdr.
2014/07/28 16:23:52
Your test looks nicely written but we will need to
Stephen White
2014/07/29 15:12:26
+1 for using LayoutTests. You could look at css3/f
Shanmuga Pandi
2014/08/01 05:20:39
Done.
Shanmuga Pandi
2014/08/01 05:20:39
Done.
|
| +<style> |
| +.error { |
| + width: 100px; |
| + height: 100px; |
| + background-color: red; |
| + position: absolute; |
| +} |
| +.clipped { |
| + width: 100px; |
| + height: 100px; |
| + background-color: green; |
| + -webkit-clip-path: url(#svgPath); |
| + clip-path: url(#svgPath); |
| +} |
| +</style> |
| +<div class="error"></div> |
| +<div class="clipped"></div> |
| +<p>After 1 second, there should be a green rectangle, and no red visible.</p> |
| +<svg height="0" width="0"> |
| + <defs> |
| + <clipPath id="svgPath" clipPathUnits="objectBoundingBox"> |
| + <circle cx="0.5" cy="0.5" r="0.5"> |
| + <animate attributeName="r" attributeType="XML" from="0.25" to="1" begin="0s" dur="1s" fill="freeze"/> |
| + </circle> |
| + </clipPath> |
| + </defs> |
| +</svg> |