1 <script src="../../js/resources/js-test-pre.js"></script>
13 border: 10px solid #999;
25 -webkit-transform: translateX(50px) rotate(45deg);
31 -webkit-column-count: 3;
59 background-color: green;
68 outline: 5px solid rgba(255, 0, 0, .75);
77 <div id="console"></div>
80 <p>1. Base</p> <div id="base" class="testBox"></div>
81 <p>2. Border</p> <div id="border" class="testBox"></div>
82 <p>3. Margin</p> <div id="margin" class="testBox"></div>
83 <p>4. Transform</p> <div id="transform" class="testBox"></div>
84 <p>5. Column</p> <div id="columns" class="testBox">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
85 <p>6. In a column</p> <div id="columns">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<span id="in-columns" class="testBox knownFailure">In columns</span> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
86 <p>7. Inline</p> <div id="inline" class="testBox">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
87 <p>8. Table</p> <table class="testBox"><tr><td>table data</td><td>table data</td></tr><tr><td>table data</td><td>table data</td></tr></table>
88 <p>9. Table with Caption</p> <table class="testBox"><caption>caption</caption><tr><td>table data</td><td>table data</td></tr><tr><td>table data</td><td>table data</td></tr></table>
89 <p>10. Table Row</p> <table><tr class="testBox"><td>table data</td><td>table data</td></tr><tr><td>table data</td><td>table data</td></tr></table>
90 <p>11. Table Cell</p> <table><tr><td class="testBox">table data</td><td>table data</td></tr><tr><td>table data</td><td>table data</td></tr></table>
91 <p>12. Big block in little</p> <div id="outer" class="testBox"><div id="inner"></div></div>
92 <p>13. Replaced in inline</p> <span class="testBox">Lorem<img>ipsum</span>
93 <p>14. Block in inline</p> <span class="testBox">Lorem<div id="inner"></div>ipsum</span>
94 <p>15. Float in inline</p> <span class="testBox"><img style="float:right"></span>
99 if (window.layoutTestController)
100 layoutTestController.dumpAsText();
102 alert("WARNING:\nThis test may show bogus FAILures if not run in DumpRenderTree, due to platform-specific differences in font metrics.");
104 function testClientRect(toTest, expectedRect)
107 shouldBeEqualToString("rect.left.toFixed(3)", expectedRect.left.toFixed(3));
108 shouldBeEqualToString("rect.top.toFixed(3)", expectedRect.top.toFixed(3));
109 shouldBeEqualToString("rect.width.toFixed(3)", expectedRect.width.toFixed(3));
110 shouldBeEqualToString("rect.height.toFixed(3)", expectedRect.height.toFixed(3));
111 shouldBe("rect.right", "rect.left + rect.width");
112 shouldBe("rect.bottom", "rect.top + rect.height");
116 function addBBoxOverClientRect(rect)
118 var bbox = document.createElement('div');
119 bbox.className = "bbox";
121 style += "left: " + rect.left + "px;";
122 style += "top: " + rect.top + "px;";
123 style += "width: " + (rect.right - rect.left) + "px;";
124 style += "height: " + (rect.bottom - rect.top) + "px;";
125 bbox.setAttribute("style", style);
126 document.documentElement.appendChild(bbox);
129 var fail = undefined;
131 var expectedResults = [
132 /*1*/ { left: 8, top: 40, width: 300, height: 100 },
133 /*2*/ { left: 8, top: 188, width: 320, height: 120 },
134 /*3*/ { left: 18, top: 356, width: 300, height: 100 },
135 /*4*/ { left: 37.289, top: 483.289, width: 141.421, height: 141.421 },
136 /*5*/ { left: 8, top: 652, width: 300, height: 374 },
137 /*6*/ { left: fail, top: fail, width: fail, height: fail },
138 /*7*/ { left: 8, top: 1490, width: 288, height: 464 },
139 /*8*/ { left: 8, top: 2002, width: 300, height: 74 },
140 /*9*/ { left: 8, top: 2140, width: 300, height: 90 },
141 /*10*/ { left: 8, top: 2280, width: 300, height: 34 },
142 /*11*/ { left: 10, top: 2402, width: 147, height: 34 },
143 /*12*/ { left: 8, top: 2538, width: 100, height: 100 },
144 /*13*/ { left: 8, top: 2789, width: 260, height: 16 },
145 /*14*/ { left: 8, top: 2869, width: 300, height: 232 },
146 /*15*/ { left: 8, top: 3165, width: 0, height: 0 }
149 function test(number, element)
151 debug("Test " + number);
153 if (element.className.match("knownFailure")) {
154 debug("Known failure. Skipping.");
159 var boundingRect = element.getBoundingClientRect();
160 addBBoxOverClientRect(boundingRect);
161 testClientRect(boundingRect, expectedResults[number - 1]);
164 var tests = document.getElementsByClassName("testBox");
165 for (var i = 0; i < tests.length; ++i)
166 test(i + 1, tests[i]);
168 if (window.layoutTestController) {
169 var area = document.getElementById('testArea');
170 area.parentNode.removeChild(area);
173 <script src="../../js/resources/js-test-post.js"></script>