| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html lang="en"> | 2 <html lang="en"> |
| 3 <head> | 3 <head> |
| 4 <style> | 4 <style> |
| 5 * {padding: 0; margin: 0} | 5 * {padding: 0; margin: 0} |
| 6 #d { | 6 #d { |
| 7 width: 180px; | 7 width: 180px; |
| 8 height: 180px; | 8 height: 180px; |
| 9 border: 1px solid black; | 9 border: 1px solid black; |
| 10 background-color: red; | 10 background-color: red; |
| 11 } | 11 } |
| 12 #clip { | 12 #clip { |
| 13 width: 160px; | 13 width: 160px; |
| 14 height: 160px; | 14 height: 160px; |
| 15 margin: 10px; | 15 margin: 10px; |
| 16 background-color: green; | 16 background-color: green; |
| 17 -webkit-clip-path: url(#c2); | 17 -webkit-clip-path: url(#c2); |
| 18 } | 18 } |
| 19 #clip-ref { | 19 #clip-ref { |
| 20 width: 32px; | 20 width: 32px; |
| 21 height: 32px; | 21 height: 32px; |
| 22 margin: 74px; | 22 margin: 74px; |
| 23 background-color: green; | 23 background-color: green; |
| 24 } | 24 } |
| 25 svg { display: block; } |
| 25 </style> | 26 </style> |
| 26 </head> | 27 </head> |
| 27 <body> | 28 <body> |
| 28 <svg height="100" width="100"> | 29 <svg height="100" width="100"> |
| 29 <clipPath id="c2" clipPathUnits="userSpaceOnUse"> | 30 <clipPath id="c2" clipPathUnits="userSpaceOnUse"> |
| 30 <rect x="64" y="64" width="32" height="32"/> | 31 <rect x="64" y="64" width="32" height="32"/> |
| 31 </clipPath> | 32 </clipPath> |
| 32 </svg> | 33 </svg> |
| 33 <div id="d"><div id="clip"></div></div> | 34 <div id="d"><div id="clip"></div></div> |
| 34 </body> | 35 </body> |
| 35 </html> | 36 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2303043003:
Tweak css3/masking/clip-path-reference-userSpaceOnUse.html (Closed)
