dom/tests/mochitest/general/test_clientRects.html@6474c204b198
dom/tests/mochitest/general/test_clientRects.html
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
1 <!DOCTYPE HTML>
2 <html id="d9" style="width:800px; height:1000px">
3 <head>
4 <title>Tests for getClientRects/getBoundingClientRect</title>
5 <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
6 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
7 </head>
8 <body style="margin:0" onload="doTest()">
10 <script>
11 function isWithinEps(v1, v2, eps, msg) {
12 if (eps) {
13 ok(Math.abs(v1 - v2) < eps, msg + " (within " + eps + "); got " + v1 + ", expected " + v2);
14 } else {
15 is(v1, v2, msg);
16 }
17 }
18 function checkRect(clientRect, r, eps, exprMsg, restMsg) {
19 isWithinEps(clientRect.left, r[0], eps, exprMsg + ".left" + restMsg);
20 isWithinEps(clientRect.top, r[1], eps, exprMsg + ".top" + restMsg);
21 isWithinEps(clientRect.right, r[2], eps, exprMsg + ".right" + restMsg);
22 isWithinEps(clientRect.bottom, r[3], eps, exprMsg + ".bottom" + restMsg);
23 isWithinEps(clientRect.width, r[2] - r[0], eps, exprMsg + ".width" + restMsg);
24 isWithinEps(clientRect.height, r[3] - r[1], eps, exprMsg + ".height" + restMsg);
25 }
26 function doc(id) {
27 return document.getElementById(id).contentDocument;
28 }
29 function checkElement(id, list, eps, doc) {
30 var e = (doc || document).getElementById(id);
31 var clientRects = e.getClientRects();
32 ok(clientRects instanceof e.ownerDocument.defaultView.Array,
33 "getClientRects retval should have Array.prototype on its proto chain");
34 clientRects.map(function(rect) {
35 ok(rect instanceof DOMRect, "Should have a DOMRect here");
36 });
37 is(clientRects.length, list.length, "getClientRects().length for element '" + id + "'");
38 var bounds = list.length > 0 ? list[0] : [0,0,0,0];
39 for (var i = 0; i < clientRects.length && i < list.length; ++i) {
40 var r = list[i];
41 r[2] += r[0];
42 r[3] += r[1];
43 checkRect(clientRects[i], r, eps, "getClientRects()[" + i + "]", " for element '" + id + "'");
44 if (r[2] != r[0] && r[3] != r[1]) {
45 bounds[0] = Math.min(bounds[0], r[0]);
46 bounds[1] = Math.min(bounds[1], r[1]);
47 bounds[2] = Math.max(bounds[2], r[2]);
48 bounds[3] = Math.max(bounds[3], r[3]);
49 }
50 }
51 checkRect(e.getBoundingClientRect(), bounds, eps, "getBoundingClientRect()", " for element '" + id + "'");
52 }
53 </script>
55 <!-- Simple case -->
56 <div id="d1" style="position:absolute; left:50px; top:50px; width:20px; height:30px; background:pink;"></div>
57 <!-- Multiple boxes -->
58 <div style="position:absolute; left:50px; top:100px; width:400px; height:100px; -moz-column-count:2; -moz-column-gap:0; column-count:2; column-gap:0">
59 <div id="d2">
60 <div style="width:200px; height:100px; background:yellow"></div>
61 <div style="width:200px; height:100px; background:lime"></div>
62 </div>
63 </div>
64 <!-- No boxes -->
65 <div id="d3" style="display:none"></div>
66 <!-- Element in transform -->
67 <div style="-moz-transform:translate(50px, 50px); transform:translate(50px,50px); position:absolute; left:0; top:200px">
68 <div id="d4" style="width:50px; height:50px; background:blue;"></div>
69 </div>
70 <svg style="position:absolute; left:50px; top:300px; width:100px; height:100px;">
71 <!-- Element in SVG foreignobject -->
72 <foreignObject x="20" y="30" width="40" height="40">
73 <div id="d5" style="width:40px; height:40px; background:pink;"></div>
74 </foreignObject>
75 <!-- SVG Element -->
76 <circle id="s1" cx="60" cy="60" r="10" fill="yellow"/>
77 </svg>
78 <!-- Element in transform with bounding-box -->
79 <div style="-moz-transform:rotate(45deg); transform:rotate(45deg); position:absolute; left:50px; top:450px; width:100px; height:100px;">
80 <div id="d6" style="width:100px; height:100px; background:orange;"></div>
81 </div>
82 <!-- Element in two transforms; we should combine transforms instead of taking bounding-box twice -->
83 <div style="-moz-transform:rotate(45deg); transform:rotate(45deg); position:absolute; left:50px; top:550px; width:100px; height:100px;">
84 <div style="-moz-transform:rotate(-45deg); transform:rotate(-45deg); width:100px; height:100px;">
85 <div id="d7" style="width:100px; height:100px; background:lime;"></div>
86 </div>
87 </div>
88 <!-- Fixed-pos element -->
89 <div id="d8" style="position:fixed; left:50px; top:700px; width:100px; height:100px; background:gray;"></div>
90 <!-- Root element; see d9 -->
91 <!-- Element in iframe -->
92 <iframe id="f1" style="position:absolute; left:300px; top:0; width:100px; height:200px; border:none"
93 src="data:text/html,<div id='d10' style='position:absolute; left:0; top:25px; width:100px; height:100px; background:cyan'>">
94 </iframe>
95 <!-- Root element in iframe -->
96 <iframe id="f2" style="position:absolute; left:300px; top:250px; width:100px; height:200px; border:none"
97 src="data:text/html,<html id='d11' style='width:100px; height:100px; background:magenta'>">
98 </iframe>
99 <!-- Fixed-pos element in iframe -->
100 <iframe id="f3" style="position:absolute; left:300px; top:400px; border:none"
101 src="data:text/html,<div id='d12' style='position:fixed; left:0; top:0; width:100px; height:100px;'>"></iframe>
103 <script>
104 function doTest() {
105 checkElement("d1", [[50,50,20,30]]);
106 checkElement("d2", [[50,100,200,100],[250,100,200,100]]);
107 checkElement("d3", []);
108 checkElement("d4", [[50,250,50,50]]);
109 checkElement("d5", [[70,330,40,40]]);
110 checkElement("s1", [[100,350,20,20]], 0.1);
111 var sqrt2 = Math.sqrt(2);
112 checkElement("d6", [[100 - 50*sqrt2,500 - 50*sqrt2,100*sqrt2,100*sqrt2]], 0.1);
113 checkElement("d7", [[50,550,100,100]]);
114 checkElement("d8", [[50,700,100,100]]);
115 checkElement("d9", [[0,0,800,1000]]);
116 checkElement("d10", [[0,25,100,100]], 0, doc("f1"));
117 checkElement("d11", [[0,0,100,100]], 0, doc("f2"));
118 checkElement("d12", [[0,0,100,100]], 0, doc("f3"));
119 SimpleTest.finish();
120 }
121 SimpleTest.waitForExplicitFinish();
122 </script>
124 <p id="display"></p>
125 <div id="content" style="display: none">
127 </div>
129 </body>
130 </html>
