2008-11-29 11:23:57 -08:00
|
|
|
<!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 type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=463934">Mozilla Bug 463934</a>
|
|
|
|
|
<p id="display"></p>
|
2014-08-06 22:24:54 -07:00
|
|
|
<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>
|
|
|
|
|
</div>
|
2008-11-29 11:23:57 -08:00
|
|
|
|
|
|
|
|
<iframe id="svg" src="bounds-helper.svg"></iframe>
|
|
|
|
|
|
|
|
|
|
<pre id="test">
|
|
|
|
|
<script class="testbody" type="application/javascript">
|
|
|
|
|
SimpleTest.waitForExplicitFinish();
|
|
|
|
|
|
2011-09-05 10:53:34 -07:00
|
|
|
function Rect(left, top, width, height)
|
2008-11-29 11:23:57 -08:00
|
|
|
{
|
2011-09-05 10:53:34 -07:00
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
|
2012-02-10 04:33:18 -08:00
|
|
|
function isWithAbsTolerance(a, b, tolerance, message)
|
2011-09-05 10:53:34 -07:00
|
|
|
{
|
2012-02-10 04:33:18 -08:00
|
|
|
ok(tolerance >= Math.abs(a - b), message + " - got " + a + ", expected " + b + " ± " + tolerance);
|
2011-09-05 10:53:34 -07:00
|
|
|
}
|
2008-11-29 11:23:57 -08:00
|
|
|
|
2011-09-05 10:53:34 -07:00
|
|
|
function runTest()
|
|
|
|
|
{
|
2014-08-06 22:24:54 -07:00
|
|
|
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");
|
|
|
|
|
|
2008-11-29 11:23:57 -08:00
|
|
|
var doc = $("svg").contentWindow.document;
|
2011-09-05 10:53:34 -07:00
|
|
|
|
2014-07-06 05:55:43 -07:00
|
|
|
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");
|
|
|
|
|
|
2008-11-29 11:23:57 -08:00
|
|
|
var text1 = doc.getElementById("text1");
|
2011-09-05 10:53:34 -07:00
|
|
|
|
2008-11-29 11:23:57 -08:00
|
|
|
var text1Bounds = text1.getBoundingClientRect();
|
|
|
|
|
var text2Bounds = doc.getElementById("text2").getBoundingClientRect();
|
|
|
|
|
var text3Bounds = doc.getElementById("text3").getBoundingClientRect();
|
|
|
|
|
|
|
|
|
|
var sin45 = Math.sin(Math.PI / 4);
|
|
|
|
|
|
2012-02-10 04:33:18 -08:00
|
|
|
isWithAbsTolerance(text1Bounds.left, 24, 1, "text1.getBoundingClientRect().left");
|
2008-11-29 11:23:57 -08:00
|
|
|
|
2011-09-05 10:53:34 -07:00
|
|
|
is(text2Bounds.left, text1Bounds.left + 100, "text2.getBoundingClientRect().left");
|
|
|
|
|
is(text2Bounds.top, text1Bounds.top, "text2.getBoundingClientRect().top");
|
|
|
|
|
is(text2Bounds.width, text1Bounds.width, "text2.getBoundingClientRect().width");
|
|
|
|
|
is(text2Bounds.height, text1Bounds.height, "text2.getBoundingClientRect().height");
|
2008-11-29 11:23:57 -08:00
|
|
|
|
2011-09-05 10:53:34 -07:00
|
|
|
var r = (text1Bounds.width + text1Bounds.height) * sin45;
|
2012-02-10 04:33:18 -08:00
|
|
|
isWithAbsTolerance(text3Bounds.width, Math.ceil(r), 1, "text3.getBoundingClientRect().width");
|
|
|
|
|
isWithAbsTolerance(text3Bounds.height, Math.ceil(r), 1, "text3.getBoundingClientRect().height");
|
2008-11-29 11:23:57 -08:00
|
|
|
|
|
|
|
|
var rect1Bounds = doc.getElementById("rect1").getBoundingClientRect();
|
|
|
|
|
var rect2Bounds = doc.getElementById("rect2").getBoundingClientRect();
|
|
|
|
|
var rect3Bounds = doc.getElementById("rect3").getBoundingClientRect();
|
|
|
|
|
var rect4Bounds = doc.getElementById("rect4").getBoundingClientRect();
|
2011-09-05 10:53:34 -07:00
|
|
|
|
|
|
|
|
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");
|
|
|
|
|
|
|
|
|
|
rect = new Rect(175 - 50 * sin45, 75 - 50 * sin45, 50 * sin45 * 2, 50 * sin45 * 2);
|
2012-02-10 04:33:18 -08:00
|
|
|
isWithAbsTolerance(rect2Bounds.left, rect.left, 0.1, "rect2.getBoundingClientRect().left");
|
|
|
|
|
isWithAbsTolerance(rect2Bounds.top, rect.top, 0.1, "rect2.getBoundingClientRect().top");
|
|
|
|
|
isWithAbsTolerance(rect2Bounds.width, rect.width, 0.1, "rect2.getBoundingClientRect().width");
|
|
|
|
|
isWithAbsTolerance(rect2Bounds.height, rect.height, 0.1, "rect2.getBoundingClientRect().height");
|
2011-09-05 10:53:34 -07:00
|
|
|
|
|
|
|
|
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);
|
2012-02-10 04:33:18 -08:00
|
|
|
isWithAbsTolerance(rect4Bounds.left, rect.left, 0.1, "rect4.getBoundingClientRect().left");
|
|
|
|
|
isWithAbsTolerance(rect4Bounds.top, rect.top, 0.1, "rect4.getBoundingClientRect().top");
|
|
|
|
|
isWithAbsTolerance(rect4Bounds.width, rect.width, 0.1, "rect4.getBoundingClientRect().width");
|
|
|
|
|
isWithAbsTolerance(rect4Bounds.height, rect.height, 0.1, "rect4.getBoundingClientRect().height");
|
2008-11-29 11:23:57 -08:00
|
|
|
|
|
|
|
|
var rect1aBounds = doc.getElementById("rect1a").getBoundingClientRect();
|
|
|
|
|
var rect2aBounds = doc.getElementById("rect2a").getBoundingClientRect();
|
|
|
|
|
var rect3aBounds = doc.getElementById("rect3a").getBoundingClientRect();
|
2012-05-18 01:34:25 -07:00
|
|
|
var rect3bBounds = doc.getElementById("rect3b").getBoundingClientRect();
|
2008-11-29 11:23:57 -08:00
|
|
|
var rect4aBounds = doc.getElementById("rect4a").getBoundingClientRect();
|
2011-09-05 10:53:34 -07:00
|
|
|
|
|
|
|
|
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);
|
2012-02-10 04:33:18 -08:00
|
|
|
isWithAbsTolerance(rect2aBounds.left, rect.left, 0.1, "rect2a.getBoundingClientRect().left");
|
|
|
|
|
isWithAbsTolerance(rect2aBounds.top, rect.top, 0.1, "rect2a.getBoundingClientRect().top");
|
|
|
|
|
isWithAbsTolerance(rect2aBounds.width, rect.width, 0.1, "rect2a.getBoundingClientRect().width");
|
|
|
|
|
isWithAbsTolerance(rect2aBounds.height, rect.height, 0.1, "rect2a.getBoundingClientRect().height");
|
2011-09-05 10:53:34 -07:00
|
|
|
|
|
|
|
|
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");
|
|
|
|
|
|
2012-05-18 01:34:25 -07:00
|
|
|
is(rect3bBounds.left, 198, "rect3b.getBoundingClientRect().left");
|
|
|
|
|
is(rect3bBounds.top, 198, "rect3b.getBoundingClientRect().top");
|
|
|
|
|
is(rect3bBounds.width, 54, "rect3b.getBoundingClientRect().width");
|
|
|
|
|
is(rect3bBounds.height, 54, "rect3b.getBoundingClientRect().height");
|
|
|
|
|
|
2011-09-05 10:53:34 -07:00
|
|
|
rect = new Rect(350 - 108 * sin45, 150 - 108 * sin45, 108 * sin45 * 2, 108 * sin45 * 2);
|
2012-02-10 04:33:18 -08:00
|
|
|
isWithAbsTolerance(rect4aBounds.left, rect.left, 0.1, "rect4a.getBoundingClientRect().left");
|
|
|
|
|
isWithAbsTolerance(rect4aBounds.top, rect.top, 0.1, "rect4a.getBoundingClientRect().top");
|
|
|
|
|
isWithAbsTolerance(rect4aBounds.width, rect.width, 0.1, "rect4a.getBoundingClientRect().width");
|
|
|
|
|
isWithAbsTolerance(rect4aBounds.height, rect.height, 0.1, "rect4a.getBoundingClientRect().height");
|
2008-11-29 11:23:57 -08:00
|
|
|
|
|
|
|
|
var text1a = doc.getElementById("text1a");
|
2011-09-05 10:53:34 -07:00
|
|
|
|
2008-11-29 11:23:57 -08:00
|
|
|
var text1aBounds = text1a.getBoundingClientRect();
|
|
|
|
|
var text2aBounds = doc.getElementById("text2a").getBoundingClientRect();
|
|
|
|
|
|
2012-02-10 04:33:18 -08:00
|
|
|
isWithAbsTolerance(text1aBounds.left, 82, 1, "text1a.getBoundingClientRect().left");
|
2011-09-05 10:53:34 -07:00
|
|
|
is(text1aBounds.width, text1Bounds.width + 4, "text1a.getBoundingClientRect().width");
|
2008-11-29 11:23:57 -08:00
|
|
|
|
2011-09-05 10:53:34 -07:00
|
|
|
is(text2aBounds.left, text1aBounds.left + 100 - 3, "text2a.getBoundingClientRect().left");
|
|
|
|
|
is(text2aBounds.width, text1aBounds.width + 6, "text2a.getBoundingClientRect().width");
|
2008-11-29 11:23:57 -08:00
|
|
|
|
2012-12-22 02:07:00 -08:00
|
|
|
var i = doc.getElementById("i");
|
|
|
|
|
var iBounds = 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");
|
|
|
|
|
|
2013-09-26 05:42:15 -07:00
|
|
|
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");
|
|
|
|
|
|
2008-11-29 11:23:57 -08:00
|
|
|
SimpleTest.finish();
|
|
|
|
|
}
|
|
|
|
|
|
2013-12-02 09:59:38 -08:00
|
|
|
window.addEventListener("load", runTest, false);
|
2008-11-29 11:23:57 -08:00
|
|
|
</script>
|
|
|
|
|
</pre>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
