third_party/WebKit/LayoutTests/transforms/svg-vs-css.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     .final {
  37       border: 1px solid blue;
  38     }
  39   </style>
  40
  41   <script type="text/javascript" charset="utf-8">
  42
  43     function doTest()
  44     {
  45       doCSS();
  46       doSVG();
  47     }
  48
  49     function doCSS()
  50     {
  51       var matrixDiv = document.getElementById('matrixed');
  52
  53       var firstMatrix = new WebKitCSSMatrix(document.getElementById('box1').style.transform);
  54       var secondMatrix = new WebKitCSSMatrix(document.getElementById('box2').style.transform);
  55       var thirdMatrix = new WebKitCSSMatrix(document.getElementById('box3').style.transform);
  56
  57       var finalMatrix = firstMatrix.multiply(secondMatrix);
  58       finalMatrix = finalMatrix.multiply(thirdMatrix);
  59
  60       // "Flipped" behavior
  61       // var finalMatrix = thirdMatrix.multiply(secondMatrix);
  62       // finalMatrix = finalMatrix.multiply(firstMatrix);
  63
  64       matrixDiv.style.transform = finalMatrix;
  65     }
  66
  67     function doSVG()
  68     {
  69       var matrixDiv = document.getElementById('matrix-svg');
  70
  71       var svgroot = document.getElementsByTagName('svg')[0];
  72
  73       var firstMatrix = svgroot.createSVGMatrix();
  74       firstMatrix = firstMatrix.translate(75, 25);
  75       var secondMatrix = svgroot.createSVGMatrix();
  76       secondMatrix = secondMatrix.scale(2);
  77       var thirdMatrix = svgroot.createSVGMatrix();
  78       thirdMatrix = thirdMatrix.rotate(45);
  79
  80       var finalMatrix = firstMatrix.multiply(secondMatrix);
  81       finalMatrix = finalMatrix.multiply(thirdMatrix);
  82
  83       var matrixString = "matrix(" + finalMatrix.a + " " + finalMatrix.b +
  84       " " + finalMatrix.c + " " + finalMatrix.d + " " + finalMatrix.e + " "
  85                + finalMatrix.f + ")";
  86       matrixDiv.setAttribute("transform", matrixString);
  87     }
  88
  89     window.addEventListener('load', doTest, false)
  90   </script>
  91 </head>
  92
  93 <body>
  94
  95   <div class="column">
  96     <h2>SVG nested</h2>
  97     <div class="container">
  98       <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
  99           viewBox="0 0 200 200" style="width:200px; height:200px;">
 100           <g id="group1" x="0" y="0" width="60" height="60" transform="translate(75, 25)">
 101             <rect x="0" y="0" width="60" height="60" stroke="black" stroke-width="1px" stroke-dasharray="1 1" fill="none" />
 102             <g id="group2" x="0" y="0" width="60" height="60" transform="scale(2)" >
 103               <rect x="0" y="0" width="60" height="60" stroke="black" stroke-dasharray="1 1" stroke-width="1px" fill="none" />
 104               <rect id="group3" x="0" y="0" width="60" height="60" stroke="blue" fill="none" transform="rotate(45)" />
 105             </g>
 106           </g>
 107       </svg>
 108     </div>
 109
 110     <h2>CSS nested</h2>
 111     <div class="container">
 112       <div id="box1" class="box" style="transform: translate(75px, 25px)">
 113         <div id="box2" class="box" style="transform: scale(2)">
 114           <div id="box3" class="final box" style="transform: rotate(45deg)">
 115           </div>
 116         </div>
 117       </div>
 118     </div>
 119   </div>
 120
 121   <div class="column">
 122     <h2>SVG compound</h2>
 123     <div class="container">
 124       <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
 125           viewBox="0 0 200 200" style="width:200px; height:200px;">
 126           <rect x="0" y="0" width="60" height="60" stroke="blue" fill="none" transform="translate(75, 25) scale(2) rotate(45)">
 127           </rect>
 128       </svg>
 129     </div>
 130
 131     <h2>CSS compound</h2>
 132     <div class="container">
 133       <div class="final box" style="transform: translate(75px, 25px) scale(2) rotate(45deg)">
 134       </div>
 135     </div>
 136   </div>
 137
 138   <div class="column">
 139     <h2>SVG Matrix</h2>
 140     <div class="container">
 141       <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
 142           viewBox="0 0 200 200" style="width:200px; height:200px;">
 143           <rect id="matrix-svg" x="0" y="0" width="60" height="60" stroke="blue" fill="none">
 144           </rect>
 145       </svg>
 146     </div>
 147
 148     <h2>CSSMatrix</h2>
 149     <div class="container">
 150       <div id="matrixed" class="final box">
 151       </div>
 152     </div>
 153   </div>
 154 </body>
 155 </html>