krit@webkit.org | 9d889d4 | 2018-06-27 23:28:19 +0000 | [diff] [blame] | 1 | <!DOCTYPE html> |
2 | <html lang="en"> | ||||
3 | <head> | ||||
4 | <style> | ||||
5 | |||||
6 | #div1 { | ||||
7 | width: 200px; | ||||
8 | height: 200px; | ||||
9 | -webkit-clip-path: url("#clip"); | ||||
10 | background-color: green; | ||||
11 | } | ||||
12 | #div2 { | ||||
13 | width: 200px; | ||||
14 | height: 200px; | ||||
15 | -webkit-clip-path: url("#clip2"); | ||||
16 | background-color: green; | ||||
17 | } | ||||
18 | * { | ||||
19 | padding: 0; | ||||
20 | margin: 0; | ||||
21 | } | ||||
22 | </style> | ||||
23 | <div id="div1"></div> | ||||
24 | <div id="div2"></div> | ||||
25 | <svg> | ||||
26 | <clipPath id="clip"> | ||||
27 | <ellipse cx="100" cy="100" rx="100" ry="100"/> | ||||
28 | </clipPath> | ||||
29 | <clipPath id="clip2"> | ||||
30 | <ellipse cx="50%" cy="50%" rx="50%" ry="50%"/> | ||||
31 | </clipPath> | ||||
32 | </svg> | ||||
33 | </html> |