third_party/WebKit/LayoutTests/svg/transforms/svg-css-transforms.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>Matrix testing</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     #group1 {
  37       transform: translate(75px, 25px);
  38     }
  39
  40     #group2 {
  41       transform: scale(2);
  42     }
  43
  44     #group3 {
  45       transform: rotate(45deg);
  46     }
  47
  48     #rect1 {
  49       transform: translate(75px, 25px) scale(2) rotate(45deg);
  50     }
  51
  52     .final {
  53       border: 1px solid blue;
  54     }
  55   </style>
  56 </head>
  57
  58 <body>
  59
  60 <div class="column">
  61   <h2>SVG nested</h2>
  62   <div class="container">
  63     <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
  64          viewBox="0 0 200 200" style="width:200px; height:200px;">
  65       <g id="group1" x="0" y="0" width="60" height="60">
  66         <rect x="0" y="0" width="60" height="60" stroke="black" stroke-width="1px" stroke-dasharray="1 1" fill="none" />
  67         <g id="group2" x="0" y="0" width="60" height="60" >
  68           <rect x="0" y="0" width="60" height="60" stroke="black" stroke-dasharray="1 1" stroke-width="1px" fill="none" />
  69           <rect id="group3" x="0" y="0" width="60" height="60" stroke="blue" fill="none" />
  70         </g>
  71       </g>
  72     </svg>
  73   </div>
  74
  75   <h2>CSS nested</h2>
  76   <div class="container">
  77     <div id="box1" class="box" style="transform: translate(75px, 25px)">
  78       <div id="box2" class="box" style="transform: scale(2)">
  79         <div id="box3" class="final box" style="transform: rotate(45deg)">
  80         </div>
  81       </div>
  82     </div>
  83   </div>
  84 </div>
  85
  86 <div class="column">
  87   <h2>SVG compound</h2>
  88   <div class="container">
  89     <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
  90          viewBox="0 0 200 200" style="width:200px; height:200px;">
  91       <rect id="rect1" x="0" y="0" width="60" height="60" stroke="blue" fill="none"/>
  92     </svg>
  93   </div>
  94
  95   <h2>CSS compound</h2>
  96   <div class="container">
  97     <div class="final box" style="transform: translate(75px, 25px) scale(2) rotate(45deg)">
  98     </div>
  99   </div>
 100 </div>
 101 </body>
 102 </html>