b084047b6f222db719ad8b2b74a6f4c242e3e03f
[WebKit-https.git] / LayoutTests / css3 / zoom-coords.xhtml
1 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
2 <head>
3 <style type="text/css">
4     body {
5         margin:0px;
6         border:0px;
7         padding:0px;
8     }
9     text {
10         font: 12px Ahem;
11     }
12     #div2, #svg2 {
13         zoom:200%;
14     }
15     #div3, #svg3 {
16         zoom:50%;
17     }
18 </style>
19 </head>
20 <body>
21
22 <div id="div1" style="width:100px;height:50px;background-color:gray;"></div>
23 <div id="div2" style="width:100px;height:50px;background-color:green;"></div>
24 <div id="div3" style="width:200px;height:100px;background-color:blue;"></div>
25 <div style="width:600px;height=100px;">
26 <svg id="svg1" xmlns="http://www.w3.org/2000/svg"
27      width="150px" height="50px" viewBox="0 0 150 100"
28      preserveAspectRatio="none">
29   <rect id="rect1" x="0" y="0" width="100px" height="100px" fill="gray" />
30   <image id="image1" x="100px" y="0" width="50px" height="50px" xlink:href="../svg/W3C-SVG-1.1/resources/magnify.png" />
31   <text id="text1" x="100px" y="75px">Test</text>
32 </svg><svg id="svg2" xmlns="http://www.w3.org/2000/svg"
33      width="150px" height="50px" viewBox="0 0 150 100"
34      preserveAspectRatio="none">
35   <rect id="rect2" x="0" y="0" width="100px" height="100px" fill="green" />
36   <image id="image2" x="100px" y="0" width="50px" height="50px" xlink:href="../svg/W3C-SVG-1.1/resources/magnify.png" />
37   <text id="text2" x="100px" y="75px">Test</text>
38 </svg><svg id="svg3" xmlns="http://www.w3.org/2000/svg"
39      width="300px" height="100px" viewBox="0 0 150 100"
40      preserveAspectRatio="none">
41   <rect id="rect3" x="0" y="0" width="100px" height="100px" fill="blue" />
42   <image id="image3" x="100px" y="0" width="50px" height="50px" xlink:href="../svg/W3C-SVG-1.1/resources/magnify.png" />
43   <text id="text3" x="100px" y="75px">Test</text>
44 </svg>
45 </div>
46
47 <div id="description"></div>
48 <div id="console"></div>
49
50 <script src="../fast/js/resources/js-test-pre.js"></script>
51 <script>
52
53 function msgDumpRenderTreeRequired()
54 {
55     if (!window.layoutTestController)
56         debug("The following tests may fail if not run in DumpRenderTree:");
57 }
58
59 description("This test checks getBoundingClientRect() on zoomed HTML and SVG elements");
60
61 debug("Gray rectangles: 100x50");
62 debug("Green rectangles: 100x50, zoom=200%");
63 debug("Blue rectangles: 200x100, zoom=50%");
64 debug("");
65
66 debug("Checking HTML elements:");
67 debug("");
68
69 var div1 = document.getElementById("div1").getBoundingClientRect();
70 shouldBe('div1.left', '0');
71 shouldBe('div1.top', '0');
72 shouldBe('div1.width', '100');
73 shouldBe('div1.height', '50');
74 shouldBe('div1.right', '100');
75 shouldBe('div1.bottom', '50');
76 debug("");
77
78 var div2 = document.getElementById("div2").getBoundingClientRect();
79 shouldBe('div2.left', '0');
80 shouldBe('div2.top', '25');
81 shouldBe('div2.width', '100');
82 shouldBe('div2.height', '50');
83 shouldBe('div2.right', '100');
84 shouldBe('div2.bottom', '75');
85 debug("");
86
87 var div3 = document.getElementById("div3").getBoundingClientRect();
88 shouldBe('div3.left', '0');
89 shouldBe('div3.top', '300');
90 shouldBe('div3.width', '200');
91 shouldBe('div3.height', '100');
92 shouldBe('div3.right', '200');
93 shouldBe('div3.bottom', '400');
94 debug("");
95
96 debug("Checking SVG elements:");
97 debug("");
98
99 var svg1 = document.getElementById("svg1").getBoundingClientRect();
100 shouldBe('svg1.left', '0');
101 shouldBe('svg1.top', '250');
102 shouldBe('svg1.width', '150');
103 shouldBe('svg1.height', '50');
104 shouldBe('svg1.right', '150');
105 shouldBe('svg1.bottom', '300');
106 var rect1 = document.getElementById("rect1").getBoundingClientRect();
107 shouldBe('rect1.left', '0');
108 shouldBe('rect1.top', '250');
109 shouldBe('rect1.width', '100');
110 shouldBe('rect1.height', '50');
111 shouldBe('rect1.right', '100');
112 shouldBe('rect1.bottom', '300');
113 var image1 = document.getElementById("image1").getBoundingClientRect();
114 shouldBe('image1.left', '100');
115 shouldBe('image1.top', '250');
116 shouldBe('image1.width', '50');
117 shouldBe('image1.height', '25');
118 shouldBe('image1.right', '150');
119 shouldBe('image1.bottom', '275');
120 var text1 = document.getElementById("text1").getBoundingClientRect();
121 shouldBe('text1.left', '100');
122 msgDumpRenderTreeRequired();
123 shouldBe('text1.top', '282.5');
124 shouldBe('text1.width', '46');
125 shouldBe('text1.height', '6.5');
126 shouldBe('text1.right', '146');
127 shouldBe('text1.bottom', '289');
128 debug("");
129
130 var svg2 = document.getElementById("svg2").getBoundingClientRect();
131 shouldBe('svg2.left', '75');
132 shouldBe('svg2.top', '100');
133 shouldBe('svg2.width', '150');
134 shouldBe('svg2.height', '50');
135 shouldBe('svg2.right', '225');
136 shouldBe('svg2.bottom', '150');
137 var rect2 = document.getElementById("rect2").getBoundingClientRect();
138 shouldBe('rect2.left', '75');
139 shouldBe('rect2.top', '100');
140 shouldBe('rect2.width', '100');
141 shouldBe('rect2.height', '50');
142 shouldBe('rect2.right', '175');
143 shouldBe('rect2.bottom', '150');
144 var image2 = document.getElementById("image2").getBoundingClientRect();
145 shouldBe('image2.left', '175');
146 shouldBe('image2.top', '100');
147 shouldBe('image2.width', '50');
148 shouldBe('image2.height', '25');
149 shouldBe('image2.right', '225');
150 shouldBe('image2.bottom', '125');
151 var text2 = document.getElementById("text2").getBoundingClientRect();
152 shouldBe('text2.left', '175');
153 msgDumpRenderTreeRequired();
154 shouldBe('text2.top', '132.5');
155 shouldBe('text2.width', '49');
156 shouldBe('text2.height', '6.5');
157 shouldBe('text2.right', '224');
158 shouldBe('text2.bottom', '139');
159 debug("");
160
161 var svg3 = document.getElementById("svg3").getBoundingClientRect();
162 shouldBe('svg3.left', '900');
163 shouldBe('svg3.top', '500');
164 shouldBe('svg3.width', '300');
165 shouldBe('svg3.height', '100');
166 shouldBe('svg3.right', '1200');
167 shouldBe('svg3.bottom', '600');
168 var rect3 = document.getElementById("rect3").getBoundingClientRect();
169 shouldBe('rect3.left', '900');
170 shouldBe('rect3.top', '500');
171 shouldBe('rect3.width', '200');
172 shouldBe('rect3.height', '100');
173 shouldBe('rect3.right', '1100');
174 shouldBe('rect3.bottom', '600');
175 var image3 = document.getElementById("image3").getBoundingClientRect();
176 shouldBe('image3.left', '1100');
177 shouldBe('image3.top', '500');
178 shouldBe('image3.width', '100');
179 shouldBe('image3.height', '50');
180 shouldBe('image3.right', '1200');
181 shouldBe('image3.bottom', '550');
182 var text3 = document.getElementById("text3").getBoundingClientRect();
183 shouldBe('text3.left', '1100');
184 msgDumpRenderTreeRequired();
185 shouldBe('text3.top', '565');
186 shouldBe('text3.width', '92');
187 shouldBe('text3.height', '13');
188 shouldBe('text3.right', '1192');
189 shouldBe('text3.bottom', '578');
190 debug("");
191
192 successfullyParsed = true;
193
194 </script>
195 <script src="../fast/js/resources/js-test-post.js"></script>
196
197 </body>
198 </html>