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