OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <style> | |
3 .error { | |
4 width: 100px; | |
5 height: 100px; | |
6 background-color: red; | |
7 position: absolute; | |
8 } | |
9 .clipped { | |
10 width: 100px; | |
11 height: 100px; | |
12 background-color: green; | |
13 -webkit-clip-path: url(#svgPath); | |
14 clip-path: url(#svgPath); | |
15 } | |
16 </style> | |
17 <div class="error"></div> | |
18 <div class="clipped"></div> | |
19 <p>There should be a green rectangle above, and no red visible.</p> | |
20 <svg height="0" width="0"> | |
21 <defs> | |
22 <clipPath id="svgPath" clipPathUnits="objectBoundingBox"> | |
23 <circle cx="0.5" cy="0.5" r="0.25"></circle> | |
24 </clipPath> | |
25 </defs> | |
26 </svg> | |
27 <script> | |
28 requestAnimationFrame(function() { | |
29 setTimeout(function() { | |
30 document.querySelector('circle').setAttribute('r', 1); | |
31 }, 0); | |
32 }); | |
33 </script> | |
f(malita)
2014/07/29 01:21:16
I'd like to see at least a couple of dynamic tests
Shanmuga Pandi
2014/08/01 05:20:39
Done.
| |
OLD | NEW |