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