diff options
Diffstat (limited to 'dom/svg/test/test_bounds.html')
| -rw-r--r-- | dom/svg/test/test_bounds.html | 317 |
1 files changed, 317 insertions, 0 deletions
diff --git a/dom/svg/test/test_bounds.html b/dom/svg/test/test_bounds.html new file mode 100644 index 0000000000..0cf0001065 --- /dev/null +++ b/dom/svg/test/test_bounds.html @@ -0,0 +1,317 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml"> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=463934 +--> +<head> + <title>Test for Bug 463934</title> + <script src="/tests/SimpleTest/SimpleTest.js"></script> + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> + <style> + #css-trans-rect-1 { + transform: scaleX(2) + } + </style> +</head> +<body> +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=463934">Mozilla Bug 463934</a> +<p id="display"></p> +<div id="content"> + <svg id="outer-1" xmlns="http://www.w3.org/2000/svg" width="30" height="30"></svg> + <svg id="outer-2" xmlns="http://www.w3.org/2000/svg" width="30" height="30" + style="padding: 10px;"> + </svg> + <svg id="outer-3" xmlns="http://www.w3.org/2000/svg" width="30" height="30" + style="border: 10px solid black;"> + </svg> + <svg id="outer-4" xmlns="http://www.w3.org/2000/svg" width="30" height="30" + style="border: 10px solid black; padding: 10px"> + </svg> + <svg id="outer-5" xmlns="http://www.w3.org/2000/svg" width="30" height="30"> + <rect id="css-trans-rect-1" width="6" height="6"></rect> + </svg> +</div> + +<iframe id="svg" src="bounds-helper.svg"></iframe> + +<pre id="test"> +<script class="testbody" type="application/javascript"> +SimpleTest.waitForExplicitFinish(); + +function Rect(left, top, width, height) { + this.left = left; + this.top = top; + this.width = width; + this.height = height; +} + +Rect.prototype.roundOut = function() { + this.width = Math.ceil(this.left + this.width) - Math.floor(this.left); + this.height = Math.ceil(this.top + this.height) - Math.floor(this.top); + this.left = Math.floor(this.left); + this.top = Math.floor(this.top); +}; + +function runTest() { + var bounds; + + bounds = document.getElementById("outer-1").getBoundingClientRect(); + is(bounds.width, 30, "outer-svg 1 getBoundingClientRect().width"); + is(bounds.height, 30, "outer-svg 1 getBoundingClientRect().height"); + + bounds = document.getElementById("outer-2").getBoundingClientRect(); + is(bounds.width, 50, "outer-svg 2 getBoundingClientRect().width"); + is(bounds.height, 50, "outer-svg 2 getBoundingClientRect().height"); + + bounds = document.getElementById("outer-3").getBoundingClientRect(); + is(bounds.width, 50, "outer-svg 3 getBoundingClientRect().width"); + is(bounds.height, 50, "outer-svg 3 getBoundingClientRect().height"); + + bounds = document.getElementById("outer-4").getBoundingClientRect(); + is(bounds.width, 70, "outer-svg 4 getBoundingClientRect().width"); + is(bounds.height, 70, "outer-svg 4 getBoundingClientRect().height"); + + bounds = document.getElementById("css-trans-rect-1").getBoundingClientRect(); + is(bounds.width, 12, "css-trans-rect getBoundingClientRect().width"); + is(bounds.height, 6, "css-trans-rect getBoundingClientRect().height"); + + var doc = $("svg").contentWindow.document; + + var svg1Bounds = doc.getElementById("svg1").getBoundingClientRect(); + is(svg1Bounds.left, 10, "svg1.getBoundingClientRect().left"); + is(svg1Bounds.top, 10, "svg1.getBoundingClientRect().top"); + is(svg1Bounds.width, 25, "svg1.getBoundingClientRect().width"); + is(svg1Bounds.height, 30, "svg1.getBoundingClientRect().height"); + + var svg2Bounds = doc.getElementById("svg2").getBoundingClientRect(); + is(svg2Bounds.left, 0, "svg2.getBoundingClientRect().left"); + is(svg2Bounds.top, 0, "svg2.getBoundingClientRect().top"); + is(svg2Bounds.width, 2, "svg2.getBoundingClientRect().width"); + is(svg2Bounds.height, 2, "svg2.getBoundingClientRect().height"); + + var svg3Bounds = doc.getElementById("svg3").getBoundingClientRect(); + is(svg3Bounds.left, 0, "svg3.getBoundingClientRect().left"); + is(svg3Bounds.top, 0, "svg3.getBoundingClientRect().top"); + is(svg3Bounds.width, 1, "svg3.getBoundingClientRect().width"); + is(svg3Bounds.height, 1, "svg3.getBoundingClientRect().height"); + + var use1Bounds = doc.getElementById("use1").getBoundingClientRect(); + is(use1Bounds.left, 100, "use1.getBoundingClientRect().left"); + is(use1Bounds.top, 50, "use1.getBoundingClientRect().top"); + is(use1Bounds.width, 50, "use1.getBoundingClientRect().width"); + is(use1Bounds.height, 10, "use1.getBoundingClientRect().height"); + + var useChildBounds = doc.getElementById("a-use").getBoundingClientRect(); + is(useChildBounds.left, 100, "useChild.getBoundingClientRect().left"); + is(useChildBounds.top, 50, "useChild.getBoundingClientRect().top"); + is(useChildBounds.width, 50, "useChild.getBoundingClientRect().width"); + is(useChildBounds.height, 10, "useChild.getBoundingClientRect().height"); + + var text1 = doc.getElementById("text1"); + + var text1Bounds = text1.getBoundingClientRect(); + var text2Bounds = doc.getElementById("text2").getBoundingClientRect(); + var text3Bounds = doc.getElementById("text3").getBoundingClientRect(); + + const sin45 = Math.sin(Math.PI / 4); + + isfuzzy(text1Bounds.left, 24, 1, "text1.getBoundingClientRect().left"); + + is(text2Bounds.left, text1Bounds.left + 100, "text2.getBoundingClientRect().left"); + is(text2Bounds.top, text1Bounds.top, "text2.getBoundingClientRect().top"); + isfuzzy(text2Bounds.width, text1Bounds.width, 0.1, "text2.getBoundingClientRect().width"); + is(text2Bounds.height, text1Bounds.height, "text2.getBoundingClientRect().height"); + + var r = (text1Bounds.width + text1Bounds.height) * sin45; + isfuzzy(text3Bounds.width, Math.ceil(r), 1, "text3.getBoundingClientRect().width"); + isfuzzy(text3Bounds.height, Math.ceil(r), 1, "text3.getBoundingClientRect().height"); + + var rect1Bounds = doc.getElementById("rect1").getBoundingClientRect(); + var rect2Bounds = doc.getElementById("rect2").getBoundingClientRect(); + var rect3Bounds = doc.getElementById("rect3").getBoundingClientRect(); + var rect4Bounds = doc.getElementById("rect4").getBoundingClientRect(); + + is(rect1Bounds.left, 50, "rect1.getBoundingClientRect().left"); + is(rect1Bounds.top, 50, "rect1.getBoundingClientRect().top"); + is(rect1Bounds.width, 50, "rect1.getBoundingClientRect().width"); + is(rect1Bounds.height, 50, "rect1.getBoundingClientRect().height"); + + var rect = new Rect(175 - 50 * sin45, 75 - 50 * sin45, 50 * sin45 * 2, 50 * sin45 * 2); + isfuzzy(rect2Bounds.left, rect.left, 0.1, "rect2.getBoundingClientRect().left"); + isfuzzy(rect2Bounds.top, rect.top, 0.1, "rect2.getBoundingClientRect().top"); + isfuzzy(rect2Bounds.width, rect.width, 0.1, "rect2.getBoundingClientRect().width"); + isfuzzy(rect2Bounds.height, rect.height, 0.1, "rect2.getBoundingClientRect().height"); + + is(rect3Bounds.left, 50, "rect3.getBoundingClientRect().left"); + is(rect3Bounds.top, 160, "rect3.getBoundingClientRect().top"); + is(rect3Bounds.width, 100, "rect3.getBoundingClientRect().width"); + is(rect3Bounds.height, 100, "rect3.getBoundingClientRect().height"); + + rect = new Rect(350 - 100 * sin45, 150 - 100 * sin45, 100 * sin45 * 2, 100 * sin45 * 2); + isfuzzy(rect4Bounds.left, rect.left, 0.1, "rect4.getBoundingClientRect().left"); + isfuzzy(rect4Bounds.top, rect.top, 0.1, "rect4.getBoundingClientRect().top"); + isfuzzy(rect4Bounds.width, rect.width, 0.1, "rect4.getBoundingClientRect().width"); + isfuzzy(rect4Bounds.height, rect.height, 0.1, "rect4.getBoundingClientRect().height"); + + var rect1aBounds = doc.getElementById("rect1a").getBoundingClientRect(); + var rect2aBounds = doc.getElementById("rect2a").getBoundingClientRect(); + var rect3aBounds = doc.getElementById("rect3a").getBoundingClientRect(); + var rect3bBounds = doc.getElementById("rect3b").getBoundingClientRect(); + var rect4aBounds = doc.getElementById("rect4a").getBoundingClientRect(); + + is(rect1aBounds.left, 48, "rect1a.getBoundingClientRect().left"); + is(rect1aBounds.top, 48, "rect1a.getBoundingClientRect().top"); + is(rect1aBounds.width, 54, "rect1a.getBoundingClientRect().width"); + is(rect1aBounds.height, 54, "rect1a.getBoundingClientRect().height"); + + rect = new Rect(175 - 54 * sin45, 75 - 54 * sin45, 54 * sin45 * 2, 54 * sin45 * 2); + isfuzzy(rect2aBounds.left, rect.left, 0.1, "rect2a.getBoundingClientRect().left"); + isfuzzy(rect2aBounds.top, rect.top, 0.1, "rect2a.getBoundingClientRect().top"); + isfuzzy(rect2aBounds.width, rect.width, 0.1, "rect2a.getBoundingClientRect().width"); + isfuzzy(rect2aBounds.height, rect.height, 0.1, "rect2a.getBoundingClientRect().height"); + + is(rect3aBounds.left, 46, "rect3a.getBoundingClientRect().left"); + is(rect3aBounds.top, 156, "rect3a.getBoundingClientRect().top"); + is(rect3aBounds.width, 108, "rect3a.getBoundingClientRect().width"); + is(rect3aBounds.height, 108, "rect3a.getBoundingClientRect().height"); + + isfuzzy(rect3bBounds.left, 198, 0.1, "rect3b.getBoundingClientRect().left"); + isfuzzy(rect3bBounds.top, 198, 0.1, "rect3b.getBoundingClientRect().top"); + isfuzzy(rect3bBounds.width, 54, 0.1, "rect3b.getBoundingClientRect().width"); + isfuzzy(rect3bBounds.height, 54, 0.1, "rect3b.getBoundingClientRect().height"); + + rect = new Rect(350 - 108 * sin45, 150 - 108 * sin45, 108 * sin45 * 2, 108 * sin45 * 2); + isfuzzy(rect4aBounds.left, rect.left, 0.1, "rect4a.getBoundingClientRect().left"); + isfuzzy(rect4aBounds.top, rect.top, 0.1, "rect4a.getBoundingClientRect().top"); + isfuzzy(rect4aBounds.width, rect.width, 0.1, "rect4a.getBoundingClientRect().width"); + isfuzzy(rect4aBounds.height, rect.height, 0.1, "rect4a.getBoundingClientRect().height"); + + var text1a = doc.getElementById("text1a"); + var text1aBounds = text1a.getBoundingClientRect(); + + var text1b = doc.getElementById("text1b"); + var text1bBounds = text1b.getBoundingClientRect(); + + var text2aBounds = doc.getElementById("text2a").getBoundingClientRect(); + + isfuzzy(text1aBounds.left, 82, 1, "text1a.getBoundingClientRect().left"); + is(text1aBounds.width, text1Bounds.width + 4, "text1a.getBoundingClientRect().width"); + is(text1bBounds.width, text1Bounds.width, "text1b.getBoundingClientRect().width"); + isfuzzy(text1bBounds.height, 196, 5, "text1b.getBoundingClientRect().height"); + + is(text2aBounds.left, text1aBounds.left + 100 - 3, "text2a.getBoundingClientRect().left"); + isfuzzy(text2aBounds.width, text1aBounds.width + 6, 0.1, "text2a.getBoundingClientRect().width"); + + var iBounds = doc.getElementById("i").getBoundingClientRect(); + is(iBounds.left, 20, "i.getBoundingClientRect().left"); + is(iBounds.top, 20, "i.getBoundingClientRect().top"); + is(iBounds.width, 200, "i.getBoundingClientRect().width"); + is(iBounds.height, 200, "i.getBoundingClientRect().height"); + + var text4Bounds = doc.getElementById("text4").getBoundingClientRect(); + is(text4Bounds.left, 0, "text4.getBoundingClientRect().left"); + is(text4Bounds.top, 0, "text4.getBoundingClientRect().top"); + is(text4Bounds.width, 0, "text4.getBoundingClientRect().width"); + is(text4Bounds.height, 0, "text4.getBoundingClientRect().height"); + + var gBounds = doc.getElementById("g2").getBoundingClientRect(); + is(gBounds.left, 100, "g2.getBoundingClientRect().left"); + is(gBounds.top, 100, "g2.getBoundingClientRect().top"); + is(gBounds.width, 50, "g2.getBoundingClientRect().width"); + is(gBounds.height, 50, "g2.getBoundingClientRect().height"); + + var nonScalingStrokedCircle1Bounds = + doc.getElementById("nonScalingStrokedCircle1").getBoundingClientRect(); + isfuzzy(nonScalingStrokedCircle1Bounds.left, 10, 0.15, + "nonScalingStrokedCircle1.getBoundingClientRect().left"); + isfuzzy(nonScalingStrokedCircle1Bounds.top, 105, 0.15, + "nonScalingStrokedCircle1.getBoundingClientRect().top"); + isfuzzy(nonScalingStrokedCircle1Bounds.width, 70, 0.15, + "nonScalingStrokedCircle1.getBoundingClientRect().width"); + isfuzzy(nonScalingStrokedCircle1Bounds.height, 50, 0.15, + "nonScalingStrokedCircle1.getBoundingClientRect().height"); + + var nonScalingStrokedEllipse1Bounds = + doc.getElementById("nonScalingStrokedEllipse1").getBoundingClientRect(); + isfuzzy(nonScalingStrokedEllipse1Bounds.left, 5, 0.15, + "nonScalingStrokedEllipse1.getBoundingClientRect().left"); + isfuzzy(nonScalingStrokedEllipse1Bounds.top, 40, 0.15, + "nonScalingStrokedEllipse1.getBoundingClientRect().top"); + isfuzzy(nonScalingStrokedEllipse1Bounds.width, 30, 0.15, + "nonScalingStrokedEllipse1.getBoundingClientRect().width"); + isfuzzy(nonScalingStrokedEllipse1Bounds.height, 40, 0.15, + "nonScalingStrokedEllipse1.getBoundingClientRect().height"); + + var nonScalingStrokedLine1Bounds = + doc.getElementById("nonScalingStrokedLine1").getBoundingClientRect(); + isfuzzy(nonScalingStrokedLine1Bounds.left, 235, 0.1, + "nonScalingStrokedLine1.getBoundingClientRect().left"); + isfuzzy(nonScalingStrokedLine1Bounds.top, 10, 0.1, + "nonScalingStrokedLine1.getBoundingClientRect().top"); + isfuzzy(nonScalingStrokedLine1Bounds.width, 10, 0.1, + "nonScalingStrokedLine1.getBoundingClientRect().width"); + isfuzzy(nonScalingStrokedLine1Bounds.height, 25, 0.1, + "nonScalingStrokedLine1.getBoundingClientRect().height"); + + var nonScalingStrokedLine2Bounds = + doc.getElementById("nonScalingStrokedLine2").getBoundingClientRect(); + var capDelta = 5 / Math.SQRT2 + 5 / Math.SQRT2; + rect = new Rect(260 - capDelta, 15 - capDelta, 20 / Math.SQRT2 + 2 * capDelta, + 20 / Math.SQRT2 + 2 * capDelta); + isfuzzy(nonScalingStrokedLine2Bounds.left, rect.left, 0.1, + "nonScalingStrokedLine2.getBoundingClientRect().left"); + isfuzzy(nonScalingStrokedLine2Bounds.top, rect.top, 0.1, + "nonScalingStrokedLine2.getBoundingClientRect().top"); + isfuzzy(nonScalingStrokedLine2Bounds.width, rect.width, 0.15, + "nonScalingStrokedLine2.getBoundingClientRect().width"); + isfuzzy(nonScalingStrokedLine2Bounds.height, rect.height, 0.15, + "nonScalingStrokedLine2.getBoundingClientRect().height"); + + var nonScalingStrokedLine3Bounds = + doc.getElementById("nonScalingStrokedLine3").getBoundingClientRect(); + capDelta = 5 / Math.SQRT2; + rect = new Rect(280 - capDelta, 15 - capDelta, 20 / Math.SQRT2 + 2 * capDelta, + 20 / Math.SQRT2 + 2 * capDelta); + isfuzzy(nonScalingStrokedLine3Bounds.left, rect.left, 0.1, + "nonScalingStrokedLine3.getBoundingClientRect().left"); + isfuzzy(nonScalingStrokedLine3Bounds.top, rect.top, 0.1, + "nonScalingStrokedLine3.getBoundingClientRect().top"); + isfuzzy(nonScalingStrokedLine3Bounds.width, rect.width, 0.1, + "nonScalingStrokedLine3.getBoundingClientRect().width"); + isfuzzy(nonScalingStrokedLine3Bounds.height, rect.height, 0.1, + "nonScalingStrokedLine3.getBoundingClientRect().height"); + + var shapeWithMarker1Bounds = + doc.getElementById("shapeWithMarker1").getBoundingClientRect(); + isfuzzy(shapeWithMarker1Bounds.left, 160, 0.1, + "shapeWithMarker1Bounds.left"); + isfuzzy(shapeWithMarker1Bounds.top, 120, 0.1, + "shapeWithMarker1Bounds.top"); + isfuzzy(shapeWithMarker1Bounds.width, 10 + Math.SQRT2 * 50, 0.1, + "shapeWithMarker1Bounds.width"); + isfuzzy(shapeWithMarker1Bounds.height, 20, 0.1, + "shapeWithMarker1Bounds.height"); + + var rotatedLine1Bounds = + doc.getElementById("rotatedLine1").getBoundingClientRect(); + isfuzzy(rotatedLine1Bounds.left, 160, 0.1, "rotatedLine1Bounds.left"); + isfuzzy(rotatedLine1Bounds.top, 145, 0.1, "rotatedLine1Bounds.top"); + isfuzzy(rotatedLine1Bounds.width, Math.SQRT2 * 20, 0.1, + "rotatedLine1Bounds.width"); + isfuzzy(rotatedLine1Bounds.height, 10, 0.1, "rotatedLine1Bounds.height"); + + var cssTransRect2Bounds = + doc.getElementById("css-trans-rect-2").getBoundingClientRect(); + is(cssTransRect2Bounds.left, 10, "cssTransRect2Bounds.left"); + is(cssTransRect2Bounds.top, 5, "cssTransRect2Bounds.top"); + is(cssTransRect2Bounds.width, 12, "cssTransRect2Bounds.width"); + is(cssTransRect2Bounds.height, 6, "cssTransRect2Bounds.height"); + + SimpleTest.finish(); +} + +window.addEventListener("load", runTest); +</script> +</pre> +</body> +</html> |