1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/dom/tests/mochitest/general/test_clientRects.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,130 @@
1.4 +<!DOCTYPE HTML>
1.5 +<html id="d9" style="width:800px; height:1000px">
1.6 +<head>
1.7 + <title>Tests for getClientRects/getBoundingClientRect</title>
1.8 + <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
1.9 + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
1.10 +</head>
1.11 +<body style="margin:0" onload="doTest()">
1.12 +
1.13 +<script>
1.14 +function isWithinEps(v1, v2, eps, msg) {
1.15 + if (eps) {
1.16 + ok(Math.abs(v1 - v2) < eps, msg + " (within " + eps + "); got " + v1 + ", expected " + v2);
1.17 + } else {
1.18 + is(v1, v2, msg);
1.19 + }
1.20 +}
1.21 +function checkRect(clientRect, r, eps, exprMsg, restMsg) {
1.22 + isWithinEps(clientRect.left, r[0], eps, exprMsg + ".left" + restMsg);
1.23 + isWithinEps(clientRect.top, r[1], eps, exprMsg + ".top" + restMsg);
1.24 + isWithinEps(clientRect.right, r[2], eps, exprMsg + ".right" + restMsg);
1.25 + isWithinEps(clientRect.bottom, r[3], eps, exprMsg + ".bottom" + restMsg);
1.26 + isWithinEps(clientRect.width, r[2] - r[0], eps, exprMsg + ".width" + restMsg);
1.27 + isWithinEps(clientRect.height, r[3] - r[1], eps, exprMsg + ".height" + restMsg);
1.28 +}
1.29 +function doc(id) {
1.30 + return document.getElementById(id).contentDocument;
1.31 +}
1.32 +function checkElement(id, list, eps, doc) {
1.33 + var e = (doc || document).getElementById(id);
1.34 + var clientRects = e.getClientRects();
1.35 + ok(clientRects instanceof e.ownerDocument.defaultView.Array,
1.36 + "getClientRects retval should have Array.prototype on its proto chain");
1.37 + clientRects.map(function(rect) {
1.38 + ok(rect instanceof DOMRect, "Should have a DOMRect here");
1.39 + });
1.40 + is(clientRects.length, list.length, "getClientRects().length for element '" + id + "'");
1.41 + var bounds = list.length > 0 ? list[0] : [0,0,0,0];
1.42 + for (var i = 0; i < clientRects.length && i < list.length; ++i) {
1.43 + var r = list[i];
1.44 + r[2] += r[0];
1.45 + r[3] += r[1];
1.46 + checkRect(clientRects[i], r, eps, "getClientRects()[" + i + "]", " for element '" + id + "'");
1.47 + if (r[2] != r[0] && r[3] != r[1]) {
1.48 + bounds[0] = Math.min(bounds[0], r[0]);
1.49 + bounds[1] = Math.min(bounds[1], r[1]);
1.50 + bounds[2] = Math.max(bounds[2], r[2]);
1.51 + bounds[3] = Math.max(bounds[3], r[3]);
1.52 + }
1.53 + }
1.54 + checkRect(e.getBoundingClientRect(), bounds, eps, "getBoundingClientRect()", " for element '" + id + "'");
1.55 +}
1.56 +</script>
1.57 +
1.58 +<!-- Simple case -->
1.59 +<div id="d1" style="position:absolute; left:50px; top:50px; width:20px; height:30px; background:pink;"></div>
1.60 +<!-- Multiple boxes -->
1.61 +<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">
1.62 + <div id="d2">
1.63 + <div style="width:200px; height:100px; background:yellow"></div>
1.64 + <div style="width:200px; height:100px; background:lime"></div>
1.65 + </div>
1.66 +</div>
1.67 +<!-- No boxes -->
1.68 +<div id="d3" style="display:none"></div>
1.69 +<!-- Element in transform -->
1.70 +<div style="-moz-transform:translate(50px, 50px); transform:translate(50px,50px); position:absolute; left:0; top:200px">
1.71 + <div id="d4" style="width:50px; height:50px; background:blue;"></div>
1.72 +</div>
1.73 +<svg style="position:absolute; left:50px; top:300px; width:100px; height:100px;">
1.74 + <!-- Element in SVG foreignobject -->
1.75 + <foreignObject x="20" y="30" width="40" height="40">
1.76 + <div id="d5" style="width:40px; height:40px; background:pink;"></div>
1.77 + </foreignObject>
1.78 + <!-- SVG Element -->
1.79 + <circle id="s1" cx="60" cy="60" r="10" fill="yellow"/>
1.80 +</svg>
1.81 +<!-- Element in transform with bounding-box -->
1.82 +<div style="-moz-transform:rotate(45deg); transform:rotate(45deg); position:absolute; left:50px; top:450px; width:100px; height:100px;">
1.83 + <div id="d6" style="width:100px; height:100px; background:orange;"></div>
1.84 +</div>
1.85 +<!-- Element in two transforms; we should combine transforms instead of taking bounding-box twice -->
1.86 +<div style="-moz-transform:rotate(45deg); transform:rotate(45deg); position:absolute; left:50px; top:550px; width:100px; height:100px;">
1.87 + <div style="-moz-transform:rotate(-45deg); transform:rotate(-45deg); width:100px; height:100px;">
1.88 + <div id="d7" style="width:100px; height:100px; background:lime;"></div>
1.89 + </div>
1.90 +</div>
1.91 +<!-- Fixed-pos element -->
1.92 +<div id="d8" style="position:fixed; left:50px; top:700px; width:100px; height:100px; background:gray;"></div>
1.93 +<!-- Root element; see d9 -->
1.94 +<!-- Element in iframe -->
1.95 +<iframe id="f1" style="position:absolute; left:300px; top:0; width:100px; height:200px; border:none"
1.96 + src="data:text/html,<div id='d10' style='position:absolute; left:0; top:25px; width:100px; height:100px; background:cyan'>">
1.97 +</iframe>
1.98 +<!-- Root element in iframe -->
1.99 +<iframe id="f2" style="position:absolute; left:300px; top:250px; width:100px; height:200px; border:none"
1.100 + src="data:text/html,<html id='d11' style='width:100px; height:100px; background:magenta'>">
1.101 +</iframe>
1.102 +<!-- Fixed-pos element in iframe -->
1.103 +<iframe id="f3" style="position:absolute; left:300px; top:400px; border:none"
1.104 + src="data:text/html,<div id='d12' style='position:fixed; left:0; top:0; width:100px; height:100px;'>"></iframe>
1.105 +
1.106 +<script>
1.107 +function doTest() {
1.108 + checkElement("d1", [[50,50,20,30]]);
1.109 + checkElement("d2", [[50,100,200,100],[250,100,200,100]]);
1.110 + checkElement("d3", []);
1.111 + checkElement("d4", [[50,250,50,50]]);
1.112 + checkElement("d5", [[70,330,40,40]]);
1.113 + checkElement("s1", [[100,350,20,20]], 0.1);
1.114 + var sqrt2 = Math.sqrt(2);
1.115 + checkElement("d6", [[100 - 50*sqrt2,500 - 50*sqrt2,100*sqrt2,100*sqrt2]], 0.1);
1.116 + checkElement("d7", [[50,550,100,100]]);
1.117 + checkElement("d8", [[50,700,100,100]]);
1.118 + checkElement("d9", [[0,0,800,1000]]);
1.119 + checkElement("d10", [[0,25,100,100]], 0, doc("f1"));
1.120 + checkElement("d11", [[0,0,100,100]], 0, doc("f2"));
1.121 + checkElement("d12", [[0,0,100,100]], 0, doc("f3"));
1.122 + SimpleTest.finish();
1.123 +}
1.124 +SimpleTest.waitForExplicitFinish();
1.125 +</script>
1.126 +
1.127 +<p id="display"></p>
1.128 +<div id="content" style="display: none">
1.129 +
1.130 +</div>
1.131 +
1.132 +</body>
1.133 +</html>
