Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(107)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/dom/Range/getClientRects.html

Issue 2475393002: Convert fast/dom/Range/getClientRects.html to web-platform test (Closed)
Patch Set: Resore element results Created 4 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/platform/linux/fast/dom/Range/getClientRects-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <script src="../../../resources/js-test.js"></script> 1 <!DOCTYPE html>
2 <style> 2 <html>
3 .bbox { 3 <head>
4 position:absolute; 4 <script src="../../../resources/testharness.js"></script>
5 outline: 5px solid rgba(255, 0, 0, .75); 5 <script src="../../../resources/testharnessreport.js"></script>
6 z-index: -1; 6 <style>
7 } 7 div {
8 font-family: Arial;
9 font-size: 16px;
10 font-weight: normal;
11 font-style: normal;
12 text-rendering: optimizeLegibility;
13 font-kerning: none;
14 font-variant-ligatures: none;
15 }
8 16
9 .box { 17 .rect-outline {
10 width: 400px; 18 position: absolute;
11 line-height: 40px; 19 outline: 5px solid rgba(255, 0, 0, .75);
12 } 20 z-index: -1;
21 }
22
23 .box {
24 display: inline-block;
25 width: 400px;
26 line-height: 40px;
27 margin: 0 40px 40px 0;
28 }
29
30 .box.expected {
31 white-space: nowrap;
32 }
33
34 .caption {
35 border-bottom: 1px solid black;
36 font-weight: bold;
37 }
38
39 .outer {
40 display: block;
41 outline: 2px solid green;
42 }
43
44 .inner {
45 display: inline-block;
46 width: 40px;
47 height: 20px;
48 outline: 2px solid blue;
49 }
50
51 #test8, #test8-expected {
52 transform: translate(50px, 100px) rotate(50deg);
53 }
54
55 #test9, #test9-expected {
56 height: 400px;
57 -webkit-writing-mode: vertical-lr;
58 }
13 59
14 .outer { 60 #testArea {
15 outline: 2px solid green; 61 width: 900px;
16 } 62 }
63 </style>
64 </head>
65 <body>
66 <div id="testArea">
67 <div class="box caption">Actual</div>
68 <div class="box caption">Expected</div>
69 <div class="box" id="test1">Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. U t enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqui p ex ea commodo consequat.</div>
70 <div class="box expected" id="test1-expected">
71 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</span><b r>
72 <span>sed do eiusmod tempor incididunt ut labore et dolore</span><br>
73 <span>magna aliqua. Ut enim ad minim veniam, quis nostrud</span><br>
74 <span>exercitation ullamco laboris nisi ut aliquip ex ea</span><br>
75 <span>commodo consequat.</span>
76 </div>
17 77
18 .inner { 78 <div class="box" id="test2">Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. U t enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqui p ex ea commodo consequat.</div>
19 display: inline-block; 79 <div class="box expected" id="test2-expected">
20 width: 40px; 80 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</span><b r>
21 height: 20px; 81 <span>sed do eiusmod tempor incididunt ut labore et dolore</span><br>
22 outline: 2px solid blue; 82 <span>magna aliqua. Ut enim ad minim veniam, quis nostrud</span><br>
23 } 83 <span>exercitation ullamco laboris nisi ut aliquip ex ea</span><br>
84 <span>commodo consequat.</span>
85 </div>
24 86
25 #test8 { 87 <div class="box" id="test3">Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. U t enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqui p ex ea commodo consequat.</div>
26 transform: translate(50px, 100px) rotate(50deg); 88 <div class="box expected" id="test3-expected">
27 } 89 Lorem ipsu<span>m dolor sit amet, consectetur adipisicing elit,</span><b r>
90 <span>sed do eiusmod tempor incididunt ut labore et dolore</span><br>
91 <span>magna aliqua. Ut enim ad minim veniam, quis nostrud</span><br>
92 <span>exercitation ullamco laboris nisi ut </span>aliquip ex ea<br>
93 commodo consequat.
94 </div>
95
96 <div class="box" id="test4">Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do eiusmod tempor<img src="../resources/abe.png" width="76" heig ht="103"> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequa t.</div>
97 <div class="box expected" id="test4-expected">
98 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</span><b r>
99 <span>sed do eiusmod tempor</span><img src="../resources/abe.png" width= "76" height="103"><span> incididunt ut labore et</span><br>
100 <span>dolore magna aliqua. Ut enim ad minim veniam, quis</span><br>
101 <span>nostrud exercitation ullamco laboris nisi ut aliquip ex ea</span>< br>
102 <span>commodo consequat.</span>
103 </div>
104
105 <div class="box" id="test5">Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do eiusmod tempor<img src="../resources/abe.png" width="76" heig ht="103"> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequa t.</div>
106 <div class="box expected" id="test5-expected">
107 Lorem ipsu<span>m dolor sit amet, consectetur adipisicing elit,</span><b r>
108 <span>sed do eiusmod tempor</span><img src="../resources/abe.png" width= "76" height="103"><span> incididunt ut labore et</span><br>
109 <span>dolore magna aliqua. Ut e</span>nim ad minim veniam, quis<br>
110 nostrud exercitation ullamco laboris nisi ut aliquip ex ea<br>
111 commodo consequat.
112 </div>
113
114 <div class="box" id="test6">Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do <div class="outer">eiusmod <div class="inner"></div>tempor</d iv> incididunt ut labore etdolore magna aliqua. Ut enim ad minim veniam, quis no strud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div >
115 <div class="box expected" id="test6-expected">
116 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</span><b r>
117 <span>sed do</span><br>
118 <div class="outer"><span>eiusmod </span><div class="inner"></div><span>t empor</span></div>
119 <span>incididunt ut labore etdolore magna aliqua. Ut enim ad</span><br>
120 <span>minim veniam, quis nostrud exercitation ullamco laboris</span><br>
121 <span>nisi ut aliquip ex ea commodo consequat.</span>
122 </div>
123
124 <div class="box" id="test7">Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do <div class="outer">eiusmod <div class="inner"></div>tempor</d iv> incididunt ut labore etdolore magna aliqua. Ut enim ad minim veniam, quis no strud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div >
125 <div class="box expected" id="test7-expected">
126 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</span><b r>
127 <span>sed do</span><br>
128 <span class="outer"><span>eiusmod </span><div class="inner"></div><span> tempor</span></span>
129 <span>incididunt ut labore etdolore magna aliqua. Ut enim ad</span><br>
130 <span>minim veniam, quis nostrud exercitation ullamco laboris</span><br>
131 <span>nisi ut aliquip ex ea commodo consequat.</span>
132 </div>
133
134 <div class="box" id="test8">Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. U t enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqui p ex ea commodo consequat.</div>
135 <div class="box expected" id="test8-expected">
136 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</span><b r>
137 <span>sed do eiusmod tempor incididunt ut labore et dolore</span><br>
138 <span>magna aliqua. Ut enim ad minim veniam, quis nostrud</span><br>
139 <span>exercitation ullamco laboris nisi ut aliquip ex ea</span><br>
140 <span>commodo consequat.</span>
141 </div>
142
143 <div class="box" id="test9">Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. U t enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqui p ex ea commodo consequat.</div>
144 <div class="box expected" id="test9-expected">
145 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</span><b r>
146 <span>sed do eiusmod tempor incididunt ut labore et dolore</span><br>
147 <span>magna aliqua. Ut enim ad minim veniam, quis nostrud</span><br>
148 <span>exercitation ullamco laboris nisi ut aliquip ex ea</span><br>
149 <span>commodo consequat.</span>
150 </div>
151 </div>
28 152
29 #test10 { 153 <script>
30 height: 400px; 154 function addRectOutline(rect)
31 -webkit-writing-mode: vertical-lr; 155 {
32 } 156 var scrollTop = document.scrollingElement.scrollTop;
33 157 var element = document.createElement('div');;
34 #console { 158 element.className = 'rect-outline';
35 position:absolute; 159 element.style.left = rect.left + 'px';
36 left: 500px; 160 element.style.top = (rect.top + scrollTop) + 'px';
37 } 161 element.style.width = (rect.right - rect.left) + 'px';
38 #testArea { 162 element.style.height = (rect.bottom - rect.top) + 'px';
39 width: 300px; 163 document.body.appendChild(element);
40 } 164 }
41 165
42 </style> 166 function showRects(rects)
43 <div id="console"></div> 167 {
44 <div id="testArea"> 168 for (var rect, i = 0; rect = rects[i]; i++)
45 169 addRectOutline(rect);
46 <div class="box" id="test1">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 e a commodo consequat.</div> 170 }
47 171
48 <br><br> 172 function rectsForRange(range) {
49 173 var clientRects = range.getClientRects();
50 <div class="box" id="test2">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 e a commodo consequat.</div> 174 var rects = [];
51 175 for (var i = 0; i < clientRects.length; i++)
52 <br><br> 176 rects.push(clientRects[i]);
53 177 return rects;
54 <div class="box" id="test3">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 e a commodo consequat.</div> 178 }
55 179
56 <br><br> 180 function rectsForChildren(element, opt_tagName) {
57 181 var elements = element.getElementsByTagName(opt_tagName || 'span');
58 <div class="box" id="test4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et<img src="../resources/abe.pn g" width="76" height="103"> dolore magna aliqua. Ut enim ad minim veniam, quis n ostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</di v> 182 var rects = [];
59 183 for (var el, i = 0; el = elements[i]; i++) {
60 <br><br> 184 if (el.tagName != 'BR')
61 185 rects.push(el.getBoundingClientRect());
62 <div class="box" id="test5">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et<img src="../resources/abe.pn g" width="76" height="103"> dolore magna aliqua. Ut enim ad minim veniam, quis n ostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</di v> 186 }
63 187 return rects;
64 <br><br> 188 }
65 189
66 <div class="box" id="test6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <div class="outer">eiusmod <span class="inner"></span>tempor</div> incididunt ut labore etdolore magna aliqua. Ut enim ad minim veniam, quis nostru d exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 190 function adjustedRectPosition(container, rect) {
67 191 var containerRect = container.getBoundingClientRect();
68 <br><br> 192 return (rect.left - containerRect.left).toFixed(0) + ',' +
69 193 (rect.top - containerRect.top).toFixed(0);
70 <div class="box" id="test7">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <div class="outer">eiusmod <span class="inner"></span>tempor</div> incididunt ut labore etdolore magna aliqua. Ut enim ad minim veniam, quis nostru d exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 194 }
71 195
72 <br><br> 196 function rectSize(rect) {
73 197 return rect.width.toFixed(0) + 'x' + rect.height.toFixed(0);
74 <div class="box" id="test8">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 e a commodo consequat.</div> 198 }
75 199
76 <br><br> 200
77 201 if (window.testRunner)
78 <div class="box" id="test9">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 e a commodo consequat.</div> 202 window.testRunner.setTextSubpixelPositioning(true);
79 203
80 <br><br> 204 test(function() {
81 205 var range = document.createRange();
82 <div class="box" id="test10">weee! Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqu ip ex ea commodo consequat.</div> 206 var actualElement = document.getElementById('test1');
83 207 range.selectNode(actualElement);
84 </div> 208 var actualRects = rectsForRange(range);
85 209
86 <script> 210 var expectedElement = document.getElementById('test1-expected');
87 if (window.testRunner) 211 var expectedRects = [
88 testRunner.dumpAsText(); 212 expectedElement.getBoundingClientRect()
89 213 ].concat(rectsForChildren(expectedElement));
90 function addBBoxOverClientRect(rect) 214
91 { 215 if (!window.testRunner) {
92 var bbox = document.createElement('div'); 216 showRects(actualRects);
93 bbox.className = "bbox"; 217 showRects(expectedRects);
94 var style = ""; 218 }
95 style += "left: " + rect.left + "px;"; 219
96 style += "top: " + rect.top + "px;"; 220 assert_equals(actualRects.length, expectedRects.length,
97 style += "width: " + (rect.right - rect.left) + "px;"; 221 'Number of rects returned by getClientRects should match expected.');
98 style += "height: " + (rect.bottom - rect.top) + "px;"; 222
99 bbox.setAttribute("style", style); 223 for (var i = 0; i < actualRects.length; i++) {
100 document.documentElement.appendChild(bbox); 224 var actual = actualRects[i];
101 } 225 var expected = expectedRects[i];
102 226 assert_equals(adjustedRectPosition(actualElement, actual),
103 function addBBoxOverClientRects(rects) 227 adjustedRectPosition(expectedElement, expected),
104 { 228 'Position of rect ' + i + ' should match expected.');
105 for (var i = 0; i < rects.length; ++i) 229 assert_equals(rectSize(actual),
106 addBBoxOverClientRect(rects[i]); 230 rectSize(expected),
107 } 231 'Size of rect ' + i + ' should match expected');
108 232 }
109 function show(range) 233 }, 'range.selectNode(container) has rects for container and each line.');
110 { 234
111 if (window.testRunner) 235
112 return; 236 test(function() {
113 addBBoxOverClientRects(range.getClientRects()); 237 var range = document.createRange();
114 } 238 var actualElement = document.getElementById('test2');
115 239 range.selectNodeContents(actualElement);
116 // Test 1 240 var actualRects = rectsForRange(range);
117 debug("Test 1") 241
118 var range1 = document.createRange(); 242 var expectedElement = document.getElementById('test2-expected');
119 range1.selectNode(document.getElementById('test1')); 243 var expectedRects = rectsForChildren(expectedElement);
120 show(range1); 244
121 rects = range1.getClientRects(); 245 if (!window.testRunner) {
122 shouldBe("rects.length", "5"); 246 showRects(actualRects);
123 shouldBe("rects[0].left", "8"); 247 showRects(expectedRects);
124 shouldBe("rects[0].top", "8"); 248 }
125 shouldBe("rects[0].width", "400"); 249
126 shouldBe("rects[0].height", "160"); 250 assert_equals(actualRects.length, expectedRects.length,
127 shouldBe("rects[1].left", "8"); 251 'Number of rects returned by getClientRects should match expected.');
128 shouldBe("rects[1].top", "19"); 252
129 shouldBe("rects[1].width", "396"); 253 for (var i = 0; i < actualRects.length; i++) {
130 shouldBe("rects[1].height", "18"); 254 var actual = actualRects[i];
131 shouldBe("rects[2].left", "8"); 255 var expected = expectedRects[i];
132 shouldBe("rects[2].top", "59"); 256 assert_equals(adjustedRectPosition(actualElement, actual),
133 shouldBe("rects[2].width", "398"); 257 adjustedRectPosition(expectedElement, expected),
134 shouldBe("rects[2].height", "18"); 258 'Position of rect ' + i + ' should match expected.');
135 shouldBe("rects[3].left", "8"); 259 assert_equals(rectSize(actual),
136 shouldBe("rects[3].top", "99"); 260 rectSize(expected),
137 shouldBe("rects[3].width", "360"); 261 'Size of rect ' + i + ' should match expected');
138 shouldBe("rects[3].height", "18"); 262 }
139 shouldBe("rects[4].left", "8"); 263 }, 'range.selectNodeContents(container) has rects for each line.');
140 shouldBe("rects[4].top", "139"); 264
141 shouldBe("rects[4].width", "306"); 265
142 shouldBe("rects[4].height", "18"); 266 test(function() {
143 267 var range = document.createRange();
144 // Test 2 268 var actualElement = document.getElementById('test3');
145 debug("Test 2") 269 range.setStart(actualElement.firstChild, 10);
146 var range2 = document.createRange(); 270 range.setEnd(actualElement.lastChild, 200);
147 range2.selectNodeContents(document.getElementById('test2')); 271 var actualRects = rectsForRange(range);
148 show(range2); 272
149 rects = range2.getClientRects(); 273 var expectedElement = document.getElementById('test3-expected');
150 shouldBe("rects.length", "4"); 274 var expectedRects = rectsForChildren(expectedElement);
151 shouldBe("rects[0].left", "8"); 275
152 shouldBe("rects[0].top", "215"); 276 if (!window.testRunner) {
153 shouldBe("rects[0].width", "396"); 277 showRects(actualRects);
154 shouldBe("rects[0].height", "18"); 278 showRects(expectedRects);
155 shouldBe("rects[1].left", "8"); 279 }
156 shouldBe("rects[1].top", "255"); 280
157 shouldBe("rects[1].width", "398"); 281 assert_equals(actualRects.length, expectedRects.length,
158 shouldBe("rects[1].height", "18"); 282 'Number of rects returned by getClientRects should match expected.');
159 shouldBe("rects[2].left", "8"); 283
160 shouldBe("rects[2].top", "295"); 284 for (var i = 0; i < actualRects.length; i++) {
161 shouldBe("rects[2].width", "360"); 285 var actual = actualRects[i];
162 shouldBe("rects[2].height", "18"); 286 var expected = expectedRects[i];
163 shouldBe("rects[3].left", "8"); 287 assert_equals(adjustedRectPosition(actualElement, actual),
164 shouldBe("rects[3].top", "335"); 288 adjustedRectPosition(expectedElement, expected),
165 shouldBe("rects[3].width", "306"); 289 'Position of rect ' + i + ' should match expected.');
166 shouldBe("rects[3].height", "18"); 290 assert_equals(rectSize(actual),
167 291 rectSize(expected),
168 // Test 3 292 'Size of rect ' + i + ' should match expected');
169 debug("Test 3") 293 }
170 var range3 = document.createRange(); 294 }, 'range.setStart/setEnd(node, offset) has rects for each line in range.' );
171 range3.setStart(document.getElementById('test3').firstChild, 10); 295
172 range3.setEnd(document.getElementById('test3').lastChild, 200); 296
173 show(range3); 297 test(function() {
174 rects = range3.getClientRects(); 298 var range = document.createRange();
175 shouldBe("rects.length", "4"); 299 var actualElement = document.getElementById('test4');
176 shouldBe("rects[0].left", "80"); 300 range.selectNode(actualElement);
177 shouldBe("rects[0].top", "411"); 301 var actualRects = rectsForRange(range);
178 shouldBe("rects[0].width", "324"); 302
179 shouldBe("rects[0].height", "18"); 303 var expectedElement = document.getElementById('test4-expected');
180 shouldBe("rects[1].left", "8"); 304 var expectedRects = [
181 shouldBe("rects[1].top", "451"); 305 expectedElement.getBoundingClientRect()
182 shouldBe("rects[1].width", "398"); 306 ].concat(rectsForChildren(expectedElement));
183 shouldBe("rects[1].height", "18"); 307
184 shouldBe("rects[2].left", "8"); 308 if (!window.testRunner) {
185 shouldBe("rects[2].top", "491"); 309 showRects(actualRects);
186 shouldBe("rects[2].width", "360"); 310 showRects(expectedRects);
187 shouldBe("rects[2].height", "18"); 311 }
188 shouldBe("rects[3].left", "8"); 312
189 shouldBe("rects[3].top", "531"); 313 assert_equals(actualRects.length, expectedRects.length,
190 shouldBe("rects[3].width", "88"); 314 'Number of rects returned by getClientRects should match expected.');
191 shouldBe("rects[3].height", "18"); 315
192 316 for (var i = 0; i < actualRects.length; i++) {
193 // Test 4 - Should not include rect of the img. 317 var actual = actualRects[i];
194 debug("Test 4") 318 var expected = expectedRects[i];
195 var range4 = document.createRange(); 319 assert_equals(adjustedRectPosition(actualElement, actual),
196 range4.selectNode(document.getElementById('test4')); 320 adjustedRectPosition(expectedElement, expected),
197 show(range4); 321 'Position of rect ' + i + ' should match expected.');
198 rects = range4.getClientRects(); 322 assert_equals(rectSize(actual),
199 shouldBe("rects.length", "7"); 323 rectSize(expected),
200 shouldBe("rects[0].left", "8"); 324 'Size of rect ' + i + ' should match expected');
201 shouldBe("rects[0].top", "596"); 325 }
202 shouldBe("rects[0].width", "400"); 326 }, 'range.selectNode(container) should not include rect of image.');
203 shouldBe("rects[0].height", "278"); 327
204 shouldBe("rects[1].left", "8"); 328 test(function() {
205 shouldBe("rects[1].top", "607"); 329 var range = document.createRange();
206 shouldBe("rects[1].width", "396"); 330 var actualElement = document.getElementById('test5');
207 shouldBe("rects[1].height", "18"); 331 range.setStart(actualElement.firstChild, 10);
208 shouldBe("rects[2].left", "8"); 332 range.setEnd(actualElement.lastChild, 50);
209 shouldBe("rects[2].top", "725"); 333 var actualRects = rectsForRange(range);
210 shouldBe("rects[2].width", "242"); 334
211 shouldBe("rects[2].height", "18"); 335 var expectedElement = document.getElementById('test5-expected');
212 shouldBe("rects[3].left", "326"); 336 var expectedRects = rectsForChildren(expectedElement, '*');
213 shouldBe("rects[3].top", "725"); 337
214 shouldBe("rects[3].width", "44"); 338 if (!window.testRunner) {
215 shouldBe("rects[3].height", "18"); 339 showRects(actualRects);
216 shouldBe("rects[4].left", "8"); 340 showRects(expectedRects);
217 shouldBe("rects[4].top", "765"); 341 }
218 shouldBe("rects[4].width", "341"); 342
219 shouldBe("rects[4].height", "18"); 343 assert_equals(actualRects.length, expectedRects.length,
220 shouldBe("rects[5].left", "8"); 344 'Number of rects returned by getClientRects should match expected.');
221 shouldBe("rects[5].top", "805"); 345
222 shouldBe("rects[5].width", "366"); 346 for (var i = 0; i < actualRects.length; i++) {
223 shouldBe("rects[5].height", "18"); 347 var actual = actualRects[i];
224 shouldBe("rects[6].left", "8"); 348 var expected = expectedRects[i];
225 shouldBe("rects[6].top", "845"); 349 assert_equals(adjustedRectPosition(actualElement, actual),
226 shouldBe("rects[6].width", "67"); 350 adjustedRectPosition(expectedElement, expected),
227 shouldBe("rects[6].height", "18"); 351 'Position of rect ' + i + ' should match expected.');
228 352 assert_equals(rectSize(actual),
229 // Test 5 - Should include rect of the img. 353 rectSize(expected),
230 debug("Test 5"); 354 'Size of rect ' + i + ' should match expected');
231 var range5 = document.createRange(); 355 }
232 range5.setStart(document.getElementById('test5').firstChild, 10); 356 }, 'range.setStart/setEnd(node, offset) should include rect of image.');
233 range5.setEnd(document.getElementById('test5').lastChild, 50); 357
234 show(range5); 358
235 rects = range5.getClientRects(); 359 test(function() {
236 shouldBe("rects.length", "5"); 360 var range = document.createRange();
237 shouldBe("rects[0].left", "80"); 361 var actualElement = document.getElementById('test6');
238 shouldBe("rects[0].top", "921"); 362 range.selectNode(actualElement);
239 shouldBe("rects[0].width", "324"); 363 var actualRects = rectsForRange(range);
240 shouldBe("rects[0].height", "18"); 364
241 shouldBe("rects[1].left", "8"); 365 var expectedElement = document.getElementById('test6-expected');
242 shouldBe("rects[1].top", "1039"); 366 var expectedRects = [
243 shouldBe("rects[1].width", "242"); 367 expectedElement.getBoundingClientRect()
244 shouldBe("rects[1].height", "18"); 368 ].concat(rectsForChildren(expectedElement));
245 shouldBe("rects[2].left", "250"); 369
246 shouldBe("rects[2].top", "950"); 370 if (!window.testRunner) {
247 shouldBe("rects[2].width", "76"); 371 showRects(actualRects);
248 shouldBe("rects[2].height", "103"); 372 showRects(expectedRects);
249 shouldBe("rects[3].left", "326"); 373 }
250 shouldBe("rects[3].top", "1039"); 374
251 shouldBe("rects[3].width", "44"); 375 assert_equals(actualRects.length, expectedRects.length,
252 shouldBe("rects[3].height", "18"); 376 'Number of rects returned by getClientRects should match expected.');
253 shouldBe("rects[4].left", "8"); 377
254 shouldBe("rects[4].top", "1079"); 378 for (var i = 0; i < actualRects.length; i++) {
255 shouldBe("rects[4].width", "284"); 379 var actual = actualRects[i];
256 shouldBe("rects[4].height", "18"); 380 var expected = expectedRects[i];
257 381 assert_equals(adjustedRectPosition(actualElement, actual),
258 // Test 6 - Should not include green or blue boxes 382 adjustedRectPosition(expectedElement, expected),
259 debug("Test 6"); 383 'Position of rect ' + i + ' should match expected.');
260 var range6 = document.createRange(); 384 assert_equals(rectSize(actual),
261 range6.selectNode(document.getElementById('test6')); 385 rectSize(expected),
262 show(range6); 386 'Size of rect ' + i + ' should match expected');
263 rects = range6.getClientRects(); 387 }
264 shouldBe("rects.length", "7"); 388 }, 'range.selectNode(container) should not include green/blue boxes.');
265 shouldBe("rects[0].left", "8"); 389
266 shouldBe("rects[0].top", "1224"); 390
267 shouldBe("rects[0].width", "400"); 391 test(function() {
268 shouldBe("rects[0].height", "200"); 392 var range = document.createRange();
269 shouldBe("rects[1].left", "8"); 393 var actualElement = document.getElementById('test7');
270 shouldBe("rects[1].top", "1235"); 394 range.selectNodeContents(actualElement);
271 shouldBe("rects[1].width", "396"); 395 var actualRects = rectsForRange(range);
272 shouldBe("rects[1].height", "18"); 396
273 shouldBe("rects[2].left", "8"); 397 var expectedElement = document.getElementById('test7-expected');
274 shouldBe("rects[2].top", "1275"); 398 var expectedRects = rectsForChildren(expectedElement);
275 shouldBe("rects[2].width", "57"); 399
276 shouldBe("rects[2].height", "18"); 400 if (!window.testRunner) {
277 shouldBe("rects[3].left", "105"); 401 showRects(actualRects);
278 shouldBe("rects[3].top", "1275"); 402 showRects(expectedRects);
279 shouldBe("rects[3].width", "44"); 403 }
280 shouldBe("rects[3].height", "18"); 404
281 shouldBe("rects[4].left", "8"); 405 assert_equals(actualRects.length, expectedRects.length,
282 shouldBe("rects[4].top", "1315"); 406 'Number of rects returned by getClientRects should match expected.');
283 shouldBe("rects[4].width", "387"); 407
284 shouldBe("rects[4].height", "18"); 408 for (var i = 0; i < actualRects.length; i++) {
285 shouldBe("rects[5].left", "8"); 409 var actual = actualRects[i];
286 shouldBe("rects[5].top", "1355"); 410 var expected = expectedRects[i];
287 shouldBe("rects[5].width", "397"); 411 assert_equals(adjustedRectPosition(actualElement, actual),
288 shouldBe("rects[5].height", "18"); 412 adjustedRectPosition(expectedElement, expected),
289 shouldBe("rects[6].left", "8"); 413 'Position of rect ' + i + ' should match expected.');
290 shouldBe("rects[6].top", "1395"); 414 assert_equals(rectSize(actual),
291 shouldBe("rects[6].width", "171"); 415 rectSize(expected),
292 shouldBe("rects[6].height", "18"); 416 'Size of rect ' + i + ' should match expected');
293 417 }
294 // Test 7 - Should include green but not blue box 418 }, 'range.selectNodeContents() should select green but not blue box.');
295 debug("Test 7"); 419
296 var range7 = document.createRange(); 420
297 range7.selectNodeContents(document.getElementById('test7')); 421 test(function() {
298 show(range7); 422 var range = document.createRange();
299 rects = range7.getClientRects(); 423 var actualElement = document.getElementById('test8');
300 shouldBe("rects.length", "7"); 424 range.selectNodeContents(actualElement);
301 shouldBe("rects[0].left", "8"); 425 var actualRects = rectsForRange(range);
302 shouldBe("rects[0].top", "1471"); 426
303 shouldBe("rects[0].width", "396"); 427 var expectedElement = document.getElementById('test8-expected');
304 shouldBe("rects[0].height", "18"); 428 var expectedRects = rectsForChildren(expectedElement);
305 shouldBe("rects[1].left", "8"); 429
306 shouldBe("rects[1].top", "1500"); 430 if (!window.testRunner) {
307 shouldBe("rects[1].width", "400"); 431 showRects(actualRects);
308 shouldBe("rects[1].height", "40"); 432 showRects(expectedRects);
309 shouldBe("rects[2].left", "8"); 433 }
310 shouldBe("rects[2].top", "1511"); 434
311 shouldBe("rects[2].width", "57"); 435 assert_equals(actualRects.length, expectedRects.length,
312 shouldBe("rects[2].height", "18"); 436 'Number of rects returned by getClientRects should match expected.');
313 shouldBe("rects[3].left", "105"); 437
314 shouldBe("rects[3].top", "1511"); 438 for (var i = 0; i < actualRects.length; i++) {
315 shouldBe("rects[3].width", "44"); 439 var actual = actualRects[i];
316 shouldBe("rects[3].height", "18"); 440 var expected = expectedRects[i];
317 shouldBe("rects[4].left", "8"); 441 assert_equals(adjustedRectPosition(actualElement, actual),
318 shouldBe("rects[4].top", "1551"); 442 adjustedRectPosition(expectedElement, expected),
319 shouldBe("rects[4].width", "387"); 443 'Position of rect ' + i + ' should match expected.');
320 shouldBe("rects[4].height", "18"); 444 assert_equals(rectSize(actual),
321 shouldBe("rects[5].left", "8"); 445 rectSize(expected),
322 shouldBe("rects[5].top", "1591"); 446 'Size of rect ' + i + ' should match expected');
323 shouldBe("rects[5].width", "397"); 447 }
324 shouldBe("rects[5].height", "18"); 448 }, 'transform, range.selectNodeContents() has rects for each line.');
325 shouldBe("rects[6].left", "8"); 449
326 shouldBe("rects[6].top", "1631"); 450
327 shouldBe("rects[6].width", "171"); 451 test(function() {
328 shouldBe("rects[6].height", "18"); 452 var range = document.createRange();
329 453 var actualElement = document.getElementById('test9');
330 // Test 8 454 range.selectNodeContents(actualElement);
331 debug("Test 8"); 455 var actualRects = rectsForRange(range);
332 var range8 = document.createRange(); 456
333 range8.selectNodeContents(document.getElementById('test8')); 457 var expectedElement = document.getElementById('test9-expected');
334 show(range8); 458 var expectedRects = rectsForChildren(expectedElement);
335 rects = range8.getClientRects(); 459
336 shouldBe("rects.length", "4"); 460 if (!window.testRunner) {
337 shouldBe("rects[0].left", "168"); 461 showRects(actualRects);
338 shouldBe("rects[0].top", "1678"); 462 showRects(expectedRects);
339 shouldBe("rects[0].width", "269"); 463 }
340 shouldBe("rects[0].height", "316"); 464
341 shouldBe("rects[1].left", "137"); 465 assert_equals(actualRects.length, expectedRects.length,
342 shouldBe("rects[1].top", "1704"); 466 'Number of rects returned by getClientRects should match expected.');
343 shouldBe("rects[1].width", "271"); 467
344 shouldBe("rects[1].height", "317"); 468 for (var i = 0; i < actualRects.length; i++) {
345 shouldBe("rects[2].left", "107"); 469 var actual = actualRects[i];
346 shouldBe("rects[2].top", "1729"); 470 var expected = expectedRects[i];
347 shouldBe("rects[2].width", "246"); 471 assert_equals(adjustedRectPosition(actualElement, actual),
348 shouldBe("rects[2].height", "289"); 472 adjustedRectPosition(expectedElement, expected),
349 shouldBe("rects[3].left", "76"); 473 'Position of rect ' + i + ' should match expected.');
350 shouldBe("rects[3].top", "1755"); 474 assert_equals(rectSize(actual),
351 shouldBe("rects[3].width", "212"); 475 rectSize(expected),
352 shouldBe("rects[3].height", "247"); 476 'Size of rect ' + i + ' should match expected');
353 477 }
354 debug("Test 9"); 478 }, 'vertical, range.selectNodeContents() has rects for each line.');
355 var range9 = document.createRange(); 479 </script>
356 // This case should match test 9b's results. Currently though getClientRects returns an empty list. 480 </body>
357 range9.setStart(document.getElementById('test9'), 0); 481 </html>
358 show(range9);
359 rects = range9.getClientRects();
360 shouldBe("rects.length", "1");
361 shouldBe("rects[0].left", "8");
362 shouldBe("rects[0].top", "1903");
363 shouldBe("rects[0].width", "0");
364 shouldBe("rects[0].height", "18");
365
366 debug("Test 9b");
367 var range9 = document.createRange();
368 range9.setStart(document.getElementById('test9').firstChild, 0);
369 show(range9);
370 rects = range9.getClientRects();
371 shouldBe("rects.length", "1");
372 shouldBe("rects[0].left", "8");
373 shouldBe("rects[0].top", "1903");
374 shouldBe("rects[0].width", "0");
375 shouldBe("rects[0].height", "18");
376
377 // Test 10
378 debug("Test 10");
379 var range10 = document.createRange();
380 range10.selectNodeContents(document.getElementById('test10'));
381 show(range10);
382 rects = range10.getClientRects();
383 shouldBe("rects.length", "4");
384 shouldBe("rects[0].left", "19");
385 shouldBe("rects[0].top", "2088");
386 shouldBe("rects[0].width", "18");
387 shouldBe("rects[0].height", "393");
388 shouldBe("rects[1].left", "59");
389 shouldBe("rects[1].top", "2088");
390 shouldBe("rects[1].width", "18");
391 shouldBe("rects[1].height", "377");
392 shouldBe("rects[2].left", "99");
393 shouldBe("rects[2].top", "2088");
394 shouldBe("rects[2].width", "18");
395 shouldBe("rects[2].height", "372");
396 shouldBe("rects[3].left", "139");
397 shouldBe("rects[3].top", "2088");
398 shouldBe("rects[3].width", "18");
399 shouldBe("rects[3].height", "360");
400
401 debug("Test 11");
402 var range11 = document.createRange();
403 rects = range11.getClientRects();
404 shouldBe("rects.length", "0");
405
406 if (window.testRunner) {
407 var area = document.getElementById('testArea');
408 area.parentNode.removeChild(area);
409 }
410 </script>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/platform/linux/fast/dom/Range/getClientRects-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698