src/third_party/WebKit/LayoutTests/svg/transforms/svg-css-transforms-clip-path.xhtml

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2
   3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   4 <head>
   5   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   6   <title>SVG clip-path CSS transform</title>
   7   <style type="text/css" media="screen">
   8     div {
   9       -webkit-box-sizing: border-box;
  10     }
  11
  12     .column {
  13       margin: 10px;
  14       display: inline-block;
  15       vertical-align: top;
  16     }
  17     .container {
  18       position: relative;
  19       height: 200px;
  20       width: 200px;
  21       margin: 10px;
  22       background-color: silver;
  23       border: 1px solid black;
  24     }
  25
  26     .box {
  27       position: absolute;
  28       top: 0;
  29       left: 0;
  30       height: 60px;
  31       width: 60px;
  32       border: 1px dotted black;
  33       -webkit-transform-origin: top left; /* to match SVG */
  34     }
  35
  36     svg { width: 100%; height: 100% }
  37
  38     .final {
  39       border: 1px solid blue;
  40     }
  41   </style>
  42 </head>
  43
  44 <body>
  45
  46 <div class="column">
  47   <h2>SVG CSS scale</h2>
  48   <div class="container">
  49     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  50     <defs>
  51       <circle id="circle1" cx="10" cy="10" r="20" style="transform:scale(5)"/>
  52       <clipPath id="clip-circle1">
  53         <use xlink:href="#circle1"/>
  54       </clipPath>
  55     </defs>
  56     <rect id="rect" x="10" y="10" width="200" height="200" fill="green" clip-path="url(#clip-circle1)"/>
  57     </svg>
  58   </div>
  59
  60   <h2>SVG scale</h2>
  61   <div class="container">
  62     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  63     <defs>
  64       <circle id="circle2" cx="10" cy="10" r="20" transform="scale(5)"/>
  65       <clipPath id="clip-circle2">
  66         <use xlink:href="#circle2"/>
  67       </clipPath>
  68     </defs>
  69     <rect id="rect" x="10" y="10" width="200" height="200" fill="green" clip-path="url(#clip-circle2)"/>
  70     </svg>
  71   </div>
  72 </div>
  73
  74 <div class="column">
  75   <h2>SVG CSS compound</h2>
  76   <div class="container">
  77     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  78     <defs>
  79       <rect id="rect1" x="1" y="1" width="40" height="40" style="transform:rotate(45deg) scale(5)"/>
  80       <clipPath id="clip-rect1">
  81         <use xlink:href="#rect1"/>
  82       </clipPath>
  83     </defs>
  84     <rect id="rect" x="10" y="10" width="200" height="200" fill="green" clip-path="url(#clip-rect1)"/>
  85     </svg>
  86   </div>
  87
  88   <h2>SVG compound</h2>
  89   <div class="container">
  90     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  91       <defs>
  92         <rect id="rect2" x="1" y="1" width="40" height="40" transform="rotate(45) scale(5)"/>
  93         <clipPath id="clip-rect2">
  94           <use xlink:href="#rect2"/>
  95         </clipPath>
  96       </defs>
  97       <rect id="rect" x="10" y="10" width="200" height="200" fill="green" clip-path="url(#clip-rect2)"/>
  98     </svg>
  99   </div>
 100 </div>
 101
 102 </body>
 103 </html>