1 <html xmlns=
"http://www.w3.org/1999/xhtml">
4 <body style=
"margin:0; border:0; padding:0;">
6 <div style=
"width:500px;height:100px;">
7 <svg xmlns=
"http://www.w3.org/2000/svg" version=
"1.1"
8 width=
"100px" height=
"100px">
9 <rect id=
"r1" x=
"20" y=
"30" width=
"40" height=
"50" fill=
"blue" />
10 </svg><svg xmlns=
"http://www.w3.org/2000/svg" version=
"1.1"
11 width=
"200px" height=
"100px" viewBox=
"0 0 50 200"
12 preserveAspectRatio=
"none">
13 <rect id=
"r2" x=
"20" y=
"30" width=
"40" height=
"50" fill=
"green" />
14 </svg><svg xmlns=
"http://www.w3.org/2000/svg" version=
"1.1"
15 width=
"200px" height=
"100px">
16 <svg x=
"0" y=
"0" width=
"100px" height=
"100px">
17 <rect id=
"r3" x=
"0" y=
"0" width=
"210px" height=
"50px" fill=
"yellow" overflow=
"hidden" />
18 <rect id=
"r4" x=
"0" y=
"50px" width=
"210px" height=
"60px" fill=
"orange" overflow=
"visible" />
23 <div id=
"description"></div>
24 <div id=
"console"></div>
26 <script src=
"../../resources/js-test.js"></script>
29 description("This test checks getBoundingClientRect() on rectangles");
31 debug("Checking a rectangle of absolute size at absolute coordinates:");
32 var r1
= document
.getElementById("r1").getBoundingClientRect();
33 shouldBe('r1.left', '20');
34 shouldBe('r1.top', '30');
35 shouldBe('r1.width', '40');
36 shouldBe('r1.height', '50');
37 shouldBe('r1.right', '60');
38 shouldBe('r1.bottom', '80');
41 debug("Checking a resized rectangle at relative coordinates:");
42 var r2
= document
.getElementById("r2").getBoundingClientRect();
43 shouldBe('r2.left', '180');
44 shouldBe('r2.top', '15');
45 shouldBe('r2.width', '160');
46 shouldBe('r2.height', '25');
47 shouldBe('r2.right', '340');
48 shouldBe('r2.bottom', '40');
51 debug("Checking rectangles with overflow:");
52 var r3
= document
.getElementById("r3").getBoundingClientRect();
53 shouldBe('r3.left', '300');
54 shouldBe('r3.top', '0');
55 shouldBe('r3.width', '210');
56 shouldBe('r3.height', '50');
57 shouldBe('r3.right', '510');
58 shouldBe('r3.bottom', '50');
60 var r4
= document
.getElementById("r4").getBoundingClientRect();
61 shouldBe('r4.left', '300');
62 shouldBe('r4.top', '50');
63 shouldBe('r4.width', '210');
64 shouldBe('r4.height', '60');
65 shouldBe('r4.right', '510');
66 shouldBe('r4.bottom', '110');