products/Sources/formale Sprachen/C/Firefox/dom/svg/test/test_bounds.html
<!
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 " >Mozill
a 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, 23 , 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, 81 , 1 , "text1a.getBoundingClientRect().left" );
is(text1aBounds.width, text1Bounds.width + 4 , "text1a.getBoundingClientRect().width" );
isfuzzy(text1bBounds.width, text1Bounds.width + 170 , 1 , "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 >
Messung V0.5 in Prozent C=94 H=95 G=94
¤ Dauer der Verarbeitung: 0.5 Sekunden
¤
*© Formatika GbR, Deutschland