test_clientRects.html (5592B)
1 <!DOCTYPE HTML> 2 <html id="d9" style="width:800px; height:1000px"> 3 <head> 4 <title>Tests for getClientRects/getBoundingClientRect</title> 5 <script 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()"> 9 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 not have Array.prototype on its proto chain"); 34 is(clientRects.length, list.length, "getClientRects().length for element '" + id + "'"); 35 var bounds = list.length ? list[0] : [0,0,0,0]; 36 for (var i = 0; i < clientRects.length && i < list.length; ++i) { 37 var r = list[i]; 38 r[2] += r[0]; 39 r[3] += r[1]; 40 checkRect(clientRects[i], r, eps, "getClientRects()[" + i + "]", " for element '" + id + "'"); 41 if (r[2] != r[0] && r[3] != r[1]) { 42 bounds[0] = Math.min(bounds[0], r[0]); 43 bounds[1] = Math.min(bounds[1], r[1]); 44 bounds[2] = Math.max(bounds[2], r[2]); 45 bounds[3] = Math.max(bounds[3], r[3]); 46 } 47 } 48 checkRect(e.getBoundingClientRect(), bounds, eps, "getBoundingClientRect()", " for element '" + id + "'"); 49 } 50 </script> 51 52 <!-- Simple case --> 53 <div id="d1" style="position:absolute; left:50px; top:50px; width:20px; height:30px; background:pink;"></div> 54 <!-- Multiple boxes --> 55 <div style="position:absolute; left:50px; top:100px; width:400px; height:100px; column-count:2; column-gap:0"> 56 <div id="d2"> 57 <div style="width:200px; height:100px; background:yellow"></div> 58 <div style="width:200px; height:100px; background:lime"></div> 59 </div> 60 </div> 61 <!-- No boxes --> 62 <div id="d3" style="display:none"></div> 63 <!-- Element in transform --> 64 <div style="transform:translate(50px, 50px); transform:translate(50px,50px); position:absolute; left:0; top:200px"> 65 <div id="d4" style="width:50px; height:50px; background:blue;"></div> 66 </div> 67 <svg style="position:absolute; left:50px; top:300px; width:100px; height:100px;"> 68 <!-- Element in SVG foreignobject --> 69 <foreignObject x="20" y="30" width="40" height="40"> 70 <div id="d5" style="width:40px; height:40px; background:pink;"></div> 71 </foreignObject> 72 <!-- SVG Element --> 73 <circle id="s1" cx="60" cy="60" r="10" fill="yellow"/> 74 </svg> 75 <!-- Element in transform with bounding-box --> 76 <div style="transform:rotate(45deg); transform:rotate(45deg); position:absolute; left:50px; top:450px; width:100px; height:100px;"> 77 <div id="d6" style="width:100px; height:100px; background:orange;"></div> 78 </div> 79 <!-- Element in two transforms; we should combine transforms instead of taking bounding-box twice --> 80 <div style="transform:rotate(45deg); transform:rotate(45deg); position:absolute; left:50px; top:550px; width:100px; height:100px;"> 81 <div style="transform:rotate(-45deg); transform:rotate(-45deg); width:100px; height:100px;"> 82 <div id="d7" style="width:100px; height:100px; background:lime;"></div> 83 </div> 84 </div> 85 <!-- Fixed-pos element --> 86 <div id="d8" style="position:fixed; left:50px; top:700px; width:100px; height:100px; background:gray;"></div> 87 <!-- Root element; see d9 --> 88 <!-- Element in iframe --> 89 <iframe id="f1" style="position:absolute; left:300px; top:0; width:100px; height:200px; border:none" 90 srcdoc="<div id='d10' style='position:absolute; left:0; top:25px; width:100px; height:100px; background:cyan'>"> 91 </iframe> 92 <!-- Root element in iframe --> 93 <iframe id="f2" style="position:absolute; left:300px; top:250px; width:100px; height:200px; border:none" 94 srcdoc="<html id='d11' style='width:100px; height:100px; background:magenta'>"> 95 </iframe> 96 <!-- Fixed-pos element in iframe --> 97 <iframe id="f3" style="position:absolute; left:300px; top:400px; border:none" 98 srcdoc="<div id='d12' style='position:fixed; left:0; top:0; width:100px; height:100px;'>"></iframe> 99 100 <script> 101 function doTest() { 102 checkElement("d1", [[50,50,20,30]]); 103 checkElement("d2", [[50,100,200,100],[250,100,200,100]]); 104 checkElement("d3", []); 105 checkElement("d4", [[50,250,50,50]]); 106 checkElement("d5", [[70,330,40,40]]); 107 checkElement("s1", [[100,350,20,20]], 0.1); 108 var sqrt2 = Math.sqrt(2); 109 checkElement("d6", [[100 - 50*sqrt2,500 - 50*sqrt2,100*sqrt2,100*sqrt2]], 0.1); 110 checkElement("d7", [[50,550,100,100]]); 111 checkElement("d8", [[50,700,100,100]]); 112 checkElement("d9", [[0,0,800,1000]]); 113 checkElement("d10", [[0,25,100,100]], 0, doc("f1")); 114 checkElement("d11", [[0,0,100,100]], 0, doc("f2")); 115 checkElement("d12", [[0,0,100,100]], 0, doc("f3")); 116 SimpleTest.finish(); 117 } 118 SimpleTest.waitForExplicitFinish(); 119 </script> 120 121 <p id="display"></p> 122 <div id="content" style="display: none"> 123 124 </div> 125 126 </body> 127 </html>