2010-04-30 Chris Marrin <cmarrin@apple.com>
[WebKit-https.git] / 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.webkitTransform);
54       var secondMatrix = new WebKitCSSMatrix(document.getElementById('box2').style.webkitTransform);
55       var thirdMatrix = new WebKitCSSMatrix(document.getElementById('box3').style.webkitTransform);
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.webkitTransform = 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="-webkit-transform: translate(75px, 25px)">
113         <div id="box2" class="box" style="-webkit-transform: scale(2)">
114           <div id="box3" class="final box" style="-webkit-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="-webkit-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>