dom/svg/test/test_bounds.html

   1 <!DOCTYPE html>
   2 <html xmlns="http://www.w3.org/1999/xhtml">
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=463934
   5 -->
   6 <head>
   7   <title>Test for Bug 463934</title>
   8   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   9   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
  10   <style>
  11     #css-trans-rect-1 {
  12       transform: scaleX(2)
  13     }
  14   </style>
  15 </head>
  16 <body>
  17 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=463934">Mozilla Bug 463934</a>
  18 <p id="display"></p>
  19 <div id="content">
  20   <svg id="outer-1" xmlns="http://www.w3.org/2000/svg" width="30" height="30"></svg>
  21   <svg id="outer-2" xmlns="http://www.w3.org/2000/svg" width="30" height="30"
  22        style="padding: 10px;">
  23   </svg>
  24   <svg id="outer-3" xmlns="http://www.w3.org/2000/svg" width="30" height="30"
  25        style="border: 10px solid black;">
  26   </svg>
  27   <svg id="outer-4" xmlns="http://www.w3.org/2000/svg" width="30" height="30"
  28        style="border: 10px solid black; padding: 10px">
  29   </svg>
  30   <svg id="outer-5" xmlns="http://www.w3.org/2000/svg" width="30" height="30">
  31     <rect id="css-trans-rect-1" width="6" height="6"></rect>
  32   </svg>
  33 </div>
  34
  35 <iframe id="svg" src="bounds-helper.svg"></iframe>
  36
  37 <pre id="test">
  38 <script class="testbody" type="application/javascript">
  39 SimpleTest.waitForExplicitFinish();
  40
  41 function Rect(left, top, width, height) {
  42   this.left = left;
  43   this.top = top;
  44   this.width = width;
  45   this.height = height;
  46 }
  47
  48 Rect.prototype.roundOut = function() {
  49   this.width = Math.ceil(this.left + this.width) - Math.floor(this.left);
  50   this.height = Math.ceil(this.top + this.height) - Math.floor(this.top);
  51   this.left = Math.floor(this.left);
  52   this.top = Math.floor(this.top);
  53 };
  54
  55 function runTest() {
  56   var bounds;
  57
  58   bounds = document.getElementById("outer-1").getBoundingClientRect();
  59   is(bounds.width, 30, "outer-svg 1 getBoundingClientRect().width");
  60   is(bounds.height, 30, "outer-svg 1 getBoundingClientRect().height");
  61
  62   bounds = document.getElementById("outer-2").getBoundingClientRect();
  63   is(bounds.width, 50, "outer-svg 2 getBoundingClientRect().width");
  64   is(bounds.height, 50, "outer-svg 2 getBoundingClientRect().height");
  65
  66   bounds = document.getElementById("outer-3").getBoundingClientRect();
  67   is(bounds.width, 50, "outer-svg 3 getBoundingClientRect().width");
  68   is(bounds.height, 50, "outer-svg 3 getBoundingClientRect().height");
  69
  70   bounds = document.getElementById("outer-4").getBoundingClientRect();
  71   is(bounds.width, 70, "outer-svg 4 getBoundingClientRect().width");
  72   is(bounds.height, 70, "outer-svg 4 getBoundingClientRect().height");
  73
  74   bounds = document.getElementById("css-trans-rect-1").getBoundingClientRect();
  75   is(bounds.width, 12, "css-trans-rect getBoundingClientRect().width");
  76   is(bounds.height, 6, "css-trans-rect getBoundingClientRect().height");
  77
  78   var doc = $("svg").contentWindow.document;
  79
  80   var svg1Bounds = doc.getElementById("svg1").getBoundingClientRect();
  81   is(svg1Bounds.left, 10, "svg1.getBoundingClientRect().left");
  82   is(svg1Bounds.top, 10, "svg1.getBoundingClientRect().top");
  83   is(svg1Bounds.width, 25, "svg1.getBoundingClientRect().width");
  84   is(svg1Bounds.height, 30, "svg1.getBoundingClientRect().height");
  85
  86   var svg2Bounds = doc.getElementById("svg2").getBoundingClientRect();
  87   is(svg2Bounds.left, 0, "svg2.getBoundingClientRect().left");
  88   is(svg2Bounds.top, 0, "svg2.getBoundingClientRect().top");
  89   is(svg2Bounds.width, 2, "svg2.getBoundingClientRect().width");
  90   is(svg2Bounds.height, 2, "svg2.getBoundingClientRect().height");
  91
  92   var svg3Bounds = doc.getElementById("svg3").getBoundingClientRect();
  93   is(svg3Bounds.left, 0, "svg3.getBoundingClientRect().left");
  94   is(svg3Bounds.top, 0, "svg3.getBoundingClientRect().top");
  95   is(svg3Bounds.width, 1, "svg3.getBoundingClientRect().width");
  96   is(svg3Bounds.height, 1, "svg3.getBoundingClientRect().height");
  97
  98   var use1Bounds = doc.getElementById("use1").getBoundingClientRect();
  99   is(use1Bounds.left, 100, "use1.getBoundingClientRect().left");
 100   is(use1Bounds.top, 50, "use1.getBoundingClientRect().top");
 101   is(use1Bounds.width, 50, "use1.getBoundingClientRect().width");
 102   is(use1Bounds.height, 10, "use1.getBoundingClientRect().height");
 103
 104   var useChildBounds = doc.getElementById("a-use").getBoundingClientRect();
 105   is(useChildBounds.left, 100, "useChild.getBoundingClientRect().left");
 106   is(useChildBounds.top, 50, "useChild.getBoundingClientRect().top");
 107   is(useChildBounds.width, 50, "useChild.getBoundingClientRect().width");
 108   is(useChildBounds.height, 10, "useChild.getBoundingClientRect().height");
 109
 110   var text1 = doc.getElementById("text1");
 111
 112   var text1Bounds = text1.getBoundingClientRect();
 113   var text2Bounds = doc.getElementById("text2").getBoundingClientRect();
 114   var text3Bounds = doc.getElementById("text3").getBoundingClientRect();
 115
 116   const sin45 = Math.sin(Math.PI / 4);
 117
 118   isfuzzy(text1Bounds.left, 23, 1, "text1.getBoundingClientRect().left");
 119
 120   is(text2Bounds.left, text1Bounds.left + 100, "text2.getBoundingClientRect().left");
 121   is(text2Bounds.top, text1Bounds.top, "text2.getBoundingClientRect().top");
 122   isfuzzy(text2Bounds.width, text1Bounds.width, 0.1, "text2.getBoundingClientRect().width");
 123   is(text2Bounds.height, text1Bounds.height, "text2.getBoundingClientRect().height");
 124
 125   var r = (text1Bounds.width + text1Bounds.height) * sin45;
 126   isfuzzy(text3Bounds.width, Math.ceil(r), 1, "text3.getBoundingClientRect().width");
 127   isfuzzy(text3Bounds.height, Math.ceil(r), 1, "text3.getBoundingClientRect().height");
 128
 129   var rect1Bounds = doc.getElementById("rect1").getBoundingClientRect();
 130   var rect2Bounds = doc.getElementById("rect2").getBoundingClientRect();
 131   var rect3Bounds = doc.getElementById("rect3").getBoundingClientRect();
 132   var rect4Bounds = doc.getElementById("rect4").getBoundingClientRect();
 133
 134   is(rect1Bounds.left, 50, "rect1.getBoundingClientRect().left");
 135   is(rect1Bounds.top, 50, "rect1.getBoundingClientRect().top");
 136   is(rect1Bounds.width, 50, "rect1.getBoundingClientRect().width");
 137   is(rect1Bounds.height, 50, "rect1.getBoundingClientRect().height");
 138
 139   var rect = new Rect(175 - 50 * sin45, 75 - 50 * sin45, 50 * sin45 * 2, 50 * sin45 * 2);
 140   isfuzzy(rect2Bounds.left, rect.left, 0.1, "rect2.getBoundingClientRect().left");
 141   isfuzzy(rect2Bounds.top, rect.top, 0.1, "rect2.getBoundingClientRect().top");
 142   isfuzzy(rect2Bounds.width, rect.width, 0.1, "rect2.getBoundingClientRect().width");
 143   isfuzzy(rect2Bounds.height, rect.height, 0.1, "rect2.getBoundingClientRect().height");
 144
 145   is(rect3Bounds.left, 50, "rect3.getBoundingClientRect().left");
 146   is(rect3Bounds.top, 160, "rect3.getBoundingClientRect().top");
 147   is(rect3Bounds.width, 100, "rect3.getBoundingClientRect().width");
 148   is(rect3Bounds.height, 100, "rect3.getBoundingClientRect().height");
 149
 150   rect = new Rect(350 - 100 * sin45, 150 - 100 * sin45, 100 * sin45 * 2, 100 * sin45 * 2);
 151   isfuzzy(rect4Bounds.left, rect.left, 0.1, "rect4.getBoundingClientRect().left");
 152   isfuzzy(rect4Bounds.top, rect.top, 0.1, "rect4.getBoundingClientRect().top");
 153   isfuzzy(rect4Bounds.width, rect.width, 0.1, "rect4.getBoundingClientRect().width");
 154   isfuzzy(rect4Bounds.height, rect.height, 0.1, "rect4.getBoundingClientRect().height");
 155
 156   var rect1aBounds = doc.getElementById("rect1a").getBoundingClientRect();
 157   var rect2aBounds = doc.getElementById("rect2a").getBoundingClientRect();
 158   var rect3aBounds = doc.getElementById("rect3a").getBoundingClientRect();
 159   var rect3bBounds = doc.getElementById("rect3b").getBoundingClientRect();
 160   var rect4aBounds = doc.getElementById("rect4a").getBoundingClientRect();
 161
 162   is(rect1aBounds.left, 48, "rect1a.getBoundingClientRect().left");
 163   is(rect1aBounds.top, 48, "rect1a.getBoundingClientRect().top");
 164   is(rect1aBounds.width, 54, "rect1a.getBoundingClientRect().width");
 165   is(rect1aBounds.height, 54, "rect1a.getBoundingClientRect().height");
 166
 167   rect = new Rect(175 - 54 * sin45, 75 - 54 * sin45, 54 * sin45 * 2, 54 * sin45 * 2);
 168   isfuzzy(rect2aBounds.left, rect.left, 0.1, "rect2a.getBoundingClientRect().left");
 169   isfuzzy(rect2aBounds.top, rect.top, 0.1, "rect2a.getBoundingClientRect().top");
 170   isfuzzy(rect2aBounds.width, rect.width, 0.1, "rect2a.getBoundingClientRect().width");
 171   isfuzzy(rect2aBounds.height, rect.height, 0.1, "rect2a.getBoundingClientRect().height");
 172
 173   is(rect3aBounds.left, 46, "rect3a.getBoundingClientRect().left");
 174   is(rect3aBounds.top, 156, "rect3a.getBoundingClientRect().top");
 175   is(rect3aBounds.width, 108, "rect3a.getBoundingClientRect().width");
 176   is(rect3aBounds.height, 108, "rect3a.getBoundingClientRect().height");
 177
 178   isfuzzy(rect3bBounds.left, 198, 0.1, "rect3b.getBoundingClientRect().left");
 179   isfuzzy(rect3bBounds.top, 198, 0.1, "rect3b.getBoundingClientRect().top");
 180   isfuzzy(rect3bBounds.width, 54, 0.1, "rect3b.getBoundingClientRect().width");
 181   isfuzzy(rect3bBounds.height, 54, 0.1, "rect3b.getBoundingClientRect().height");
 182
 183   rect = new Rect(350 - 108 * sin45, 150 - 108 * sin45, 108 * sin45 * 2, 108 * sin45 * 2);
 184   isfuzzy(rect4aBounds.left, rect.left, 0.1, "rect4a.getBoundingClientRect().left");
 185   isfuzzy(rect4aBounds.top, rect.top, 0.1, "rect4a.getBoundingClientRect().top");
 186   isfuzzy(rect4aBounds.width, rect.width, 0.1, "rect4a.getBoundingClientRect().width");
 187   isfuzzy(rect4aBounds.height, rect.height, 0.1, "rect4a.getBoundingClientRect().height");
 188
 189   var text1a = doc.getElementById("text1a");
 190   var text1aBounds = text1a.getBoundingClientRect();
 191
 192   var text1b = doc.getElementById("text1b");
 193   var text1bBounds = text1b.getBoundingClientRect();
 194
 195   var text2aBounds = doc.getElementById("text2a").getBoundingClientRect();
 196
 197   isfuzzy(text1aBounds.left, 81, 1, "text1a.getBoundingClientRect().left");
 198   is(text1aBounds.width, text1Bounds.width + 4, "text1a.getBoundingClientRect().width");
 199   isfuzzy(text1bBounds.width, text1Bounds.width + 170, 1, "text1b.getBoundingClientRect().width");
 200   isfuzzy(text1bBounds.height, 196, 5, "text1b.getBoundingClientRect().height");
 201
 202   is(text2aBounds.left, text1aBounds.left + 100 - 3, "text2a.getBoundingClientRect().left");
 203   isfuzzy(text2aBounds.width, text1aBounds.width + 6, 0.1, "text2a.getBoundingClientRect().width");
 204
 205   var iBounds = doc.getElementById("i").getBoundingClientRect();
 206   is(iBounds.left, 20, "i.getBoundingClientRect().left");
 207   is(iBounds.top, 20, "i.getBoundingClientRect().top");
 208   is(iBounds.width, 200, "i.getBoundingClientRect().width");
 209   is(iBounds.height, 200, "i.getBoundingClientRect().height");
 210
 211   var text4Bounds = doc.getElementById("text4").getBoundingClientRect();
 212   is(text4Bounds.left, 0, "text4.getBoundingClientRect().left");
 213   is(text4Bounds.top, 0, "text4.getBoundingClientRect().top");
 214   is(text4Bounds.width, 0, "text4.getBoundingClientRect().width");
 215   is(text4Bounds.height, 0, "text4.getBoundingClientRect().height");
 216
 217   var gBounds = doc.getElementById("g2").getBoundingClientRect();
 218   is(gBounds.left, 100, "g2.getBoundingClientRect().left");
 219   is(gBounds.top, 100, "g2.getBoundingClientRect().top");
 220   is(gBounds.width, 50, "g2.getBoundingClientRect().width");
 221   is(gBounds.height, 50, "g2.getBoundingClientRect().height");
 222
 223   var nonScalingStrokedCircle1Bounds =
 224     doc.getElementById("nonScalingStrokedCircle1").getBoundingClientRect();
 225   isfuzzy(nonScalingStrokedCircle1Bounds.left, 10, 0.15,
 226                      "nonScalingStrokedCircle1.getBoundingClientRect().left");
 227   isfuzzy(nonScalingStrokedCircle1Bounds.top, 105, 0.15,
 228                      "nonScalingStrokedCircle1.getBoundingClientRect().top");
 229   isfuzzy(nonScalingStrokedCircle1Bounds.width, 70, 0.15,
 230                      "nonScalingStrokedCircle1.getBoundingClientRect().width");
 231   isfuzzy(nonScalingStrokedCircle1Bounds.height, 50, 0.15,
 232                      "nonScalingStrokedCircle1.getBoundingClientRect().height");
 233
 234   var nonScalingStrokedEllipse1Bounds =
 235     doc.getElementById("nonScalingStrokedEllipse1").getBoundingClientRect();
 236   isfuzzy(nonScalingStrokedEllipse1Bounds.left, 5, 0.15,
 237                      "nonScalingStrokedEllipse1.getBoundingClientRect().left");
 238   isfuzzy(nonScalingStrokedEllipse1Bounds.top, 40, 0.15,
 239                      "nonScalingStrokedEllipse1.getBoundingClientRect().top");
 240   isfuzzy(nonScalingStrokedEllipse1Bounds.width, 30, 0.15,
 241                      "nonScalingStrokedEllipse1.getBoundingClientRect().width");
 242   isfuzzy(nonScalingStrokedEllipse1Bounds.height, 40, 0.15,
 243                      "nonScalingStrokedEllipse1.getBoundingClientRect().height");
 244
 245   var nonScalingStrokedLine1Bounds =
 246     doc.getElementById("nonScalingStrokedLine1").getBoundingClientRect();
 247   isfuzzy(nonScalingStrokedLine1Bounds.left, 235, 0.1,
 248                      "nonScalingStrokedLine1.getBoundingClientRect().left");
 249   isfuzzy(nonScalingStrokedLine1Bounds.top, 10, 0.1,
 250                     "nonScalingStrokedLine1.getBoundingClientRect().top");
 251   isfuzzy(nonScalingStrokedLine1Bounds.width, 10, 0.1,
 252                      "nonScalingStrokedLine1.getBoundingClientRect().width");
 253   isfuzzy(nonScalingStrokedLine1Bounds.height, 25, 0.1,
 254                      "nonScalingStrokedLine1.getBoundingClientRect().height");
 255
 256   var nonScalingStrokedLine2Bounds =
 257     doc.getElementById("nonScalingStrokedLine2").getBoundingClientRect();
 258   var capDelta = 5 / Math.SQRT2 + 5 / Math.SQRT2;
 259   rect = new Rect(260 - capDelta, 15 - capDelta, 20 / Math.SQRT2 + 2 * capDelta,
 260                   20 / Math.SQRT2 + 2 * capDelta);
 261   isfuzzy(nonScalingStrokedLine2Bounds.left, rect.left, 0.1,
 262                      "nonScalingStrokedLine2.getBoundingClientRect().left");
 263   isfuzzy(nonScalingStrokedLine2Bounds.top, rect.top, 0.1,
 264                     "nonScalingStrokedLine2.getBoundingClientRect().top");
 265   isfuzzy(nonScalingStrokedLine2Bounds.width, rect.width, 0.15,
 266                      "nonScalingStrokedLine2.getBoundingClientRect().width");
 267   isfuzzy(nonScalingStrokedLine2Bounds.height, rect.height, 0.15,
 268                      "nonScalingStrokedLine2.getBoundingClientRect().height");
 269
 270   var nonScalingStrokedLine3Bounds =
 271     doc.getElementById("nonScalingStrokedLine3").getBoundingClientRect();
 272   capDelta = 5 / Math.SQRT2;
 273   rect = new Rect(280 - capDelta, 15 - capDelta, 20 / Math.SQRT2 + 2 * capDelta,
 274                   20 / Math.SQRT2 + 2 * capDelta);
 275   isfuzzy(nonScalingStrokedLine3Bounds.left, rect.left, 0.1,
 276                      "nonScalingStrokedLine3.getBoundingClientRect().left");
 277   isfuzzy(nonScalingStrokedLine3Bounds.top, rect.top, 0.1,
 278                     "nonScalingStrokedLine3.getBoundingClientRect().top");
 279   isfuzzy(nonScalingStrokedLine3Bounds.width, rect.width, 0.1,
 280                      "nonScalingStrokedLine3.getBoundingClientRect().width");
 281   isfuzzy(nonScalingStrokedLine3Bounds.height, rect.height, 0.1,
 282                      "nonScalingStrokedLine3.getBoundingClientRect().height");
 283
 284   var shapeWithMarker1Bounds =
 285     doc.getElementById("shapeWithMarker1").getBoundingClientRect();
 286   isfuzzy(shapeWithMarker1Bounds.left, 160, 0.1,
 287     "shapeWithMarker1Bounds.left");
 288   isfuzzy(shapeWithMarker1Bounds.top, 120, 0.1,
 289     "shapeWithMarker1Bounds.top");
 290   isfuzzy(shapeWithMarker1Bounds.width, 10 + Math.SQRT2 * 50, 0.1,
 291     "shapeWithMarker1Bounds.width");
 292   isfuzzy(shapeWithMarker1Bounds.height, 20, 0.1,
 293     "shapeWithMarker1Bounds.height");
 294
 295   var rotatedLine1Bounds =
 296     doc.getElementById("rotatedLine1").getBoundingClientRect();
 297   isfuzzy(rotatedLine1Bounds.left, 160, 0.1, "rotatedLine1Bounds.left");
 298   isfuzzy(rotatedLine1Bounds.top, 145, 0.1, "rotatedLine1Bounds.top");
 299   isfuzzy(rotatedLine1Bounds.width, Math.SQRT2 * 20, 0.1,
 300     "rotatedLine1Bounds.width");
 301   isfuzzy(rotatedLine1Bounds.height, 10, 0.1, "rotatedLine1Bounds.height");
 302
 303   var cssTransRect2Bounds =
 304     doc.getElementById("css-trans-rect-2").getBoundingClientRect();
 305   is(cssTransRect2Bounds.left, 10, "cssTransRect2Bounds.left");
 306   is(cssTransRect2Bounds.top, 5, "cssTransRect2Bounds.top");
 307   is(cssTransRect2Bounds.width, 12, "cssTransRect2Bounds.width");
 308   is(cssTransRect2Bounds.height, 6, "cssTransRect2Bounds.height");
 309
 310   SimpleTest.finish();
 311 }
 312
 313 window.addEventListener("load", runTest);
 314 </script>
 315 </pre>
 316 </body>
 317 </html>