2010-10-22 Cosmin Truta <ctruta@chromium.org>
[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 <link rel="stylesheet" href="../fast/js/resources/js-test-style.css"/>
4 <style type="text/css">
5     body { margin:0px; border:0px; padding:0px; }
6     #div1, #svg1 { zoom:200%; }
7     #div2, #svg2 { zoom:50%; }
8 </style>
9 <script src="../fast/js/resources/js-test-pre.js"></script>
10 </head>
11 <body>
12
13 <div id="div1" style="width:100px;height:50px;background-color:blue;"></div>
14 <div id="div2" style="width:200px;height:100px;background-color:green;"></div>
15 <svg id="svg1" xmlns="http://www.w3.org/2000/svg"
16      width="150px" height="50px" viewBox="0 0 150 100"
17      preserveAspectRatio="none">
18   <rect id="rect1" x="0" y="0" width="100px" height="100px" fill="yellow" />
19   <image id="image1" x="100px" y="0" width="50px" height="50px" xlink:href="../svg/dom/resources/magnify.png" />
20   <text id="text1" x="100px" y="75px">Test</text>
21 </svg><svg id="svg2" xmlns="http://www.w3.org/2000/svg"
22      width="300px" height="100px" viewBox="0 0 150 100"
23      preserveAspectRatio="none">
24   <rect id="rect2" x="0" y="0" width="100px" height="100px" fill="orange" />
25   <image id="image2" x="100px" y="0" width="50px" height="50px" xlink:href="../svg/dom/resources/magnify.png" />
26   <text id="text2" x="100px" y="75px">Test</text>
27 </svg>
28
29 <div id="description"></div>
30 <div id="console"></div>
31
32 <script>
33
34 description("This test checks getBoundingClientRect() on zoomed HTML and SVG elements");
35
36 debug("Checking HTML elements:");
37 debug("");
38
39 var div1 = document.getElementById("div1").getBoundingClientRect();
40 shouldBe('div1.left', '0');
41 shouldBe('div1.top', '0');
42 shouldBe('div1.width', '100');
43 shouldBe('div1.height', '50');
44 shouldBe('div1.right', '100');
45 shouldBe('div1.bottom', '50');
46 debug("");
47
48 var div2 = document.getElementById("div2").getBoundingClientRect();
49 shouldBe('div2.left', '0');
50 shouldBe('div2.top', '200');
51 shouldBe('div2.width', '200');
52 shouldBe('div2.height', '100');
53 shouldBe('div2.right', '200');
54 shouldBe('div2.bottom', '300');
55 debug("");
56
57 debug("Checking SVG elements:");
58 debug("");
59
60 var svg1 = document.getElementById("svg1").getBoundingClientRect();
61 shouldBe('svg1.left', '0');
62 shouldBe('svg1.top', '75');
63 shouldBe('svg1.width', '150');
64 shouldBe('svg1.height', '50');
65 shouldBe('svg1.right', '150');
66 shouldBe('svg1.bottom', '125');
67 var rect1 = document.getElementById("rect1").getBoundingClientRect();
68 shouldBe('rect1.left', '0');
69 shouldBe('rect1.top', '75');
70 shouldBe('rect1.width', '100');
71 shouldBe('rect1.height', '50');
72 shouldBe('rect1.right', '100');
73 shouldBe('rect1.bottom', '125');
74 var image1 = document.getElementById("image1").getBoundingClientRect();
75 shouldBe('image1.left', '100');
76 shouldBe('image1.top', '75');
77 shouldBe('image1.width', '50');
78 shouldBe('image1.height', '25');
79 shouldBe('image1.right', '150');
80 shouldBe('image1.bottom', '100');
81 var text1 = document.getElementById("text1").getBoundingClientRect();
82 shouldBe('text1.left == 100', 'true');
83 shouldBe('text1.top >= 75', 'true');
84 shouldBe('text1.width > 0', 'true');
85 shouldBe('text1.height > 0', 'true');
86 shouldBe('text1.right > 100', 'true');
87 shouldBe('text1.bottom > 75', 'true');
88 debug("");
89
90 var svg2 = document.getElementById("svg2").getBoundingClientRect();
91 shouldBe('svg2.left', '600');
92 shouldBe('svg2.top', '400');
93 shouldBe('svg2.width', '300');
94 shouldBe('svg2.height', '100');
95 shouldBe('svg2.right', '900');
96 shouldBe('svg2.bottom', '500');
97 var rect2 = document.getElementById("rect2").getBoundingClientRect();
98 shouldBe('rect2.left', '600');
99 shouldBe('rect2.top', '400');
100 shouldBe('rect2.width', '200');
101 shouldBe('rect2.height', '100');
102 shouldBe('rect2.right', '800');
103 shouldBe('rect2.bottom', '500');
104 var image2 = document.getElementById("image2").getBoundingClientRect();
105 shouldBe('image2.left', '800');
106 shouldBe('image2.top', '400');
107 shouldBe('image2.width', '100');
108 shouldBe('image2.height', '50');
109 shouldBe('image2.right', '900');
110 shouldBe('image2.bottom', '450');
111 var text2 = document.getElementById("text2").getBoundingClientRect();
112 shouldBe('text2.left == 800', 'true');
113 shouldBe('text2.top >= 400', 'true');
114 shouldBe('text2.width > 0', 'true');
115 shouldBe('text2.height > 0', 'true');
116 shouldBe('text2.right > 800', 'true');
117 shouldBe('text2.bottom > 400', 'true');
118 debug("");
119
120 successfullyParsed = true;
121
122 </script>
123 <script src="../fast/js/resources/js-test-post.js"></script>
124
125 </body>
126 </html>