75 lines
2.3 KiB
HTML
75 lines
2.3 KiB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
</head>
|
|
<body style="margin:0; border:0; padding:0;">
|
|
|
|
<div style="width:500px;height:100px;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
|
|
width="100px" height="100px">
|
|
<rect id="r1" x="20" y="30" width="40" height="50" fill="blue" />
|
|
</svg><svg xmlns="http://www.w3.org/2000/svg" version="1.1"
|
|
width="200px" height="100px" viewBox="0 0 50 200"
|
|
preserveAspectRatio="none">
|
|
<rect id="r2" x="20" y="30" width="40" height="50" fill="green" />
|
|
</svg><svg xmlns="http://www.w3.org/2000/svg" version="1.1"
|
|
width="200px" height="100px">
|
|
<svg x="0" y="0" width="100px" height="100px">
|
|
<rect id="r3" x="0" y="0" width="210px" height="50px" fill="yellow" overflow="hidden" />
|
|
<rect id="r4" x="0" y="50px" width="210px" height="60px" fill="orange" overflow="visible" />
|
|
</svg>
|
|
</svg>
|
|
</div>
|
|
|
|
<div id="description"></div>
|
|
<div id="console"></div>
|
|
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
<script>
|
|
|
|
description("This test checks getBoundingClientRect() on rectangles");
|
|
|
|
debug("Checking a rectangle of absolute size at absolute coordinates:");
|
|
var r1 = document.getElementById("r1").getBoundingClientRect();
|
|
shouldBe('r1.left', '20');
|
|
shouldBe('r1.top', '30');
|
|
shouldBe('r1.width', '40');
|
|
shouldBe('r1.height', '50');
|
|
shouldBe('r1.right', '60');
|
|
shouldBe('r1.bottom', '80');
|
|
debug("");
|
|
|
|
debug("Checking a resized rectangle at relative coordinates:");
|
|
var r2 = document.getElementById("r2").getBoundingClientRect();
|
|
shouldBe('r2.left', '180');
|
|
shouldBe('r2.top', '15');
|
|
shouldBe('r2.width', '160');
|
|
shouldBe('r2.height', '25');
|
|
shouldBe('r2.right', '340');
|
|
shouldBe('r2.bottom', '40');
|
|
debug("");
|
|
|
|
debug("Checking rectangles with overflow:");
|
|
var r3 = document.getElementById("r3").getBoundingClientRect();
|
|
shouldBe('r3.left', '300');
|
|
shouldBe('r3.top', '0');
|
|
shouldBe('r3.width', '210');
|
|
shouldBe('r3.height', '50');
|
|
shouldBe('r3.right', '510');
|
|
shouldBe('r3.bottom', '50');
|
|
|
|
var r4 = document.getElementById("r4").getBoundingClientRect();
|
|
shouldBe('r4.left', '300');
|
|
shouldBe('r4.top', '50');
|
|
shouldBe('r4.width', '210');
|
|
shouldBe('r4.height', '60');
|
|
shouldBe('r4.right', '510');
|
|
shouldBe('r4.bottom', '110');
|
|
debug("");
|
|
|
|
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
|
|
</body>
|
|
</html>
|