Google Git
Sign in
chromium / chromium / src.git / 8448b5ae2f0c52af3cb1cb73ecd59b9c38f90bf0 / . / third_party / WebKit / LayoutTests / transforms / svg-vs-css.xhtml
blob: 0e96dff146f56cadcb743a6e1c71d0726c3fc8bb [file] [log] [blame]
[email protected]8857e5e62010-04-30 17:23:24[diff] [blame]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
[email protected]8448b5ae2014-10-18 08:49:38[diff] [blame^]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);
[email protected]8857e5e62010-04-30 17:23:24[diff] [blame]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
[email protected]8448b5ae2014-10-18 08:49:38[diff] [blame^]64 matrixDiv.style.transform = finalMatrix;
[email protected]8857e5e62010-04-30 17:23:24[diff] [blame]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">
[email protected]8448b5ae2014-10-18 08:49:38[diff] [blame^]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)">
[email protected]8857e5e62010-04-30 17:23:24[diff] [blame]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">
[email protected]8448b5ae2014-10-18 08:49:38[diff] [blame^]133 <div class="final box" style="transform: translate(75px, 25px) scale(2) rotate(45deg)">
[email protected]8857e5e62010-04-30 17:23:24[diff] [blame]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>