The Tor Browser / file comparison
comparison: dom/tests/mochitest/general/test_clientRects.html
dom/tests/mochitest/general/test_clientRects.html
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:02d88ddef9d2 |
|---|---|
| 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()"> | |
| 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 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> | |
| 54 | |
| 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> | |
| 102 | |
| 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> | |
| 123 | |
| 124 <p id="display"></p> | |
| 125 <div id="content" style="display: none"> | |
| 126 | |
| 127 </div> | |
| 128 | |
| 129 </body> | |
| 130 </html> |
