Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / fast / dom / Element / getClientRects.html
blobb3e5a2d0b8bfe18463bf12089fb0a918d3b71184
1 <script src="../../../resources/js-test.js"></script>
2 <style>
3 #base {
4 width: 300px;
5 height: 100px;
8 #border {
9 border: 10px solid #999;
10 width: 300px;
11 height: 100px;
14 #margin {
15 margin: 10px;
16 width: 300px;
17 height: 100px;
20 #transform {
21 transform: translateX(50px) rotate(45deg);
22 width: 100px;
23 height: 100px;
26 #columns {
27 -webkit-column-count: 3;
28 width: 300px;
31 #inline {
32 display: inline;
35 #outer {
36 width: 100px;
37 height: 100px;
40 #inner {
41 width: 200px;
42 height: 200px;
45 table {
46 width: 300px;
49 img {
50 width: 100px;
51 height: 100px;
54 .testBox {
55 background-color: green;
58 #testArea {
59 width: 300px;
62 .bbox {
63 position:absolute;
64 outline: 5px solid rgba(255, 0, 0, .75);
67 #console {
68 position:absolute;
69 left: 500px;
71 </style>
73 <div id="console"></div>
74 <div id="testArea">
76 <p>1. Base</p> <div id="base" class="testBox"></div>
77 <p>2. Border</p> <div id="border" class="testBox"></div>
78 <p>3. Margin</p> <div id="margin" class="testBox"></div>
79 <p>4. Transform</p> <div id="transform" class="testBox"></div>
80 <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>
81 <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>
82 <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>
83 <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>
84 <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>
85 <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>
86 <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>
87 <p>12. Big block in little</p> <div id="outer" class="testBox"><div id="inner"></div></div>
88 <p>13. Replaced in inline</p> <span class="testBox">Lorem<img>ipsum</span>
89 <p>14. Block in inline</p> <span class="testBox">Lorem<div id="inner"></div>ipsum</span>
90 <p>15. Float in inline</p> <span class="testBox"><img style="float:right"></span>
92 </div>
93 <script>
94 if (window.testRunner)
95 testRunner.dumpAsText();
97 var testRects;
98 function testClientRects(rects, expectedNumberOfRects)
100 testRects = rects;
101 shouldBe("testRects.length", String(expectedNumberOfRects));
102 debug("");
105 function addBBoxOverClientRect(rect)
107 var bbox = document.createElement('div');
108 bbox.className = "bbox";
109 var style = "";
110 style += "left: " + rect.left + "px;";
111 style += "top: " + rect.top + "px;";
112 style += "width: " + (rect.right - rect.left) + "px;";
113 style += "height: " + (rect.bottom - rect.top) + "px;";
114 bbox.setAttribute("style", style);
115 document.documentElement.appendChild(bbox);
118 function addBBoxOverClientRects(rects)
120 for (var i = 0; i < rects.length; ++i)
121 addBBoxOverClientRect(rects[i]);
124 var expectedResults = [
142 function test(number, element)
144 debug("Client bounding rects for #" + number);
146 if (element.className.match("knownFailure")) {
147 debug("Known failure. Skipping.");
148 debug("");
149 return;
152 var boundingRects = element.getClientRects();
153 addBBoxOverClientRects(boundingRects);
154 testClientRects(boundingRects, expectedResults[number - 1]);
157 var tests = document.getElementsByClassName("testBox");
158 for (var i = 0; i < tests.length; ++i)
159 test(i + 1, tests[i]);
161 if (window.testRunner) {
162 var area = document.getElementById('testArea');
163 area.parentNode.removeChild(area);
165 </script>