third_party/WebKit/LayoutTests/css3/masking/clip-path-reference-userSpaceOnUse.html

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