third_party/WebKit/LayoutTests/fast/dom/Range/getClientRects.html

   1 <script src="../../../resources/js-test.js"></script>
   2 <style>
   3 .bbox {
   4     position:absolute;
   5     outline: 5px solid rgba(255, 0, 0, .75);
   6     z-index: -1;
   7 }
   8
   9 .box {
  10     width: 400px;
  11     line-height: 40px;
  12 }
  13
  14 .outer {
  15     outline: 2px solid green;
  16 }
  17
  18 .inner {
  19     display: inline-block;
  20     width: 40px;
  21     height: 20px;
  22     outline: 2px solid blue;
  23 }
  24
  25 #test8 {
  26     transform: translate(50px, 100px) rotate(50deg);
  27 }
  28
  29 #test10 {
  30     height: 400px;
  31     -webkit-writing-mode: vertical-lr;
  32 }
  33
  34 #console {
  35     position:absolute;
  36     left: 500px;
  37 }
  38 #testArea {
  39     width: 300px;
  40 }
  41
  42 </style>
  43 <div id="console"></div>
  44 <div id="testArea">
  45
  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 ea commodo consequat.</div>
  47
  48 <br><br>
  49
  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 ea commodo consequat.</div>
  51
  52 <br><br>
  53
  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 ea commodo consequat.</div>
  55
  56 <br><br>
  57
  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.png" width="76" height="103"> dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  59
  60 <br><br>
  61
  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.png" width="76" height="103"> dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  63
  64 <br><br>
  65
  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 nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  67
  68 <br><br>
  69
  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 nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  71
  72 <br><br>
  73
  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 ea commodo consequat.</div>
  75
  76 <br><br>
  77
  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 ea commodo consequat.</div>
  79
  80 <br><br>
  81
  82 <div class="box" id="test10">weee! 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.</div>
  83
  84 </div>
  85
  86 <script>
  87     if (window.testRunner)
  88         testRunner.dumpAsText();
  89
  90     function addBBoxOverClientRect(rect)
  91     {
  92         var bbox = document.createElement('div');
  93         bbox.className = "bbox";
  94         var style = "";
  95         style += "left: "   + rect.left + "px;";
  96         style += "top: "    + rect.top + "px;";
  97         style += "width: "  + (rect.right - rect.left) + "px;";
  98         style += "height: " + (rect.bottom - rect.top) + "px;";
  99         bbox.setAttribute("style", style);
 100         document.documentElement.appendChild(bbox);
 101     }
 102
 103     function addBBoxOverClientRects(rects)
 104     {
 105         for (var i = 0; i < rects.length; ++i)
 106             addBBoxOverClientRect(rects[i]);
 107     }
 108
 109     function show(range)
 110     {
 111         if (window.testRunner)
 112             return;
 113         addBBoxOverClientRects(range.getClientRects());
 114     }
 115
 116     // Test 1
 117     debug("Test 1")
 118     var range1 = document.createRange();
 119     range1.selectNode(document.getElementById('test1'));
 120     show(range1);
 121     rects = range1.getClientRects();
 122     shouldBe("rects.length", "5");
 123     shouldBe("rects[0].left", "8");
 124     shouldBe("rects[0].top", "8");
 125     shouldBe("rects[0].width", "400");
 126     shouldBe("rects[0].height", "160");
 127     shouldBe("rects[1].left", "8");
 128     shouldBe("rects[1].top", "19");
 129     shouldBe("rects[1].width", "396");
 130     shouldBe("rects[1].height", "18");
 131     shouldBe("rects[2].left", "8");
 132     shouldBe("rects[2].top", "59");
 133     shouldBe("rects[2].width", "398");
 134     shouldBe("rects[2].height", "18");
 135     shouldBe("rects[3].left", "8");
 136     shouldBe("rects[3].top", "99");
 137     shouldBe("rects[3].width", "360");
 138     shouldBe("rects[3].height", "18");
 139     shouldBe("rects[4].left", "8");
 140     shouldBe("rects[4].top", "139");
 141     shouldBe("rects[4].width", "306");
 142     shouldBe("rects[4].height", "18");
 143
 144     // Test 2
 145     debug("Test 2")
 146     var range2 = document.createRange();
 147     range2.selectNodeContents(document.getElementById('test2'));
 148     show(range2);
 149     rects = range2.getClientRects();
 150     shouldBe("rects.length", "4");
 151     shouldBe("rects[0].left", "8");
 152     shouldBe("rects[0].top", "215");
 153     shouldBe("rects[0].width", "396");
 154     shouldBe("rects[0].height", "18");
 155     shouldBe("rects[1].left", "8");
 156     shouldBe("rects[1].top", "255");
 157     shouldBe("rects[1].width", "398");
 158     shouldBe("rects[1].height", "18");
 159     shouldBe("rects[2].left", "8");
 160     shouldBe("rects[2].top", "295");
 161     shouldBe("rects[2].width", "360");
 162     shouldBe("rects[2].height", "18");
 163     shouldBe("rects[3].left", "8");
 164     shouldBe("rects[3].top", "335");
 165     shouldBe("rects[3].width", "306");
 166     shouldBe("rects[3].height", "18");
 167
 168     // Test 3
 169     debug("Test 3")
 170     var range3 = document.createRange();
 171     range3.setStart(document.getElementById('test3').firstChild, 10);
 172     range3.setEnd(document.getElementById('test3').lastChild, 200);
 173     show(range3);
 174     rects = range3.getClientRects();
 175     shouldBe("rects.length", "4");
 176     shouldBe("rects[0].left", "80");
 177     shouldBe("rects[0].top", "411");
 178     shouldBe("rects[0].width", "324");
 179     shouldBe("rects[0].height", "18");
 180     shouldBe("rects[1].left", "8");
 181     shouldBe("rects[1].top", "451");
 182     shouldBe("rects[1].width", "398");
 183     shouldBe("rects[1].height", "18");
 184     shouldBe("rects[2].left", "8");
 185     shouldBe("rects[2].top", "491");
 186     shouldBe("rects[2].width", "360");
 187     shouldBe("rects[2].height", "18");
 188     shouldBe("rects[3].left", "8");
 189     shouldBe("rects[3].top", "531");
 190     shouldBe("rects[3].width", "88");
 191     shouldBe("rects[3].height", "18");
 192
 193     // Test 4 - Should not include rect of the img.
 194     debug("Test 4")
 195     var range4 = document.createRange();
 196     range4.selectNode(document.getElementById('test4'));
 197     show(range4);
 198     rects = range4.getClientRects();
 199     shouldBe("rects.length", "7");
 200     shouldBe("rects[0].left", "8");
 201     shouldBe("rects[0].top", "596");
 202     shouldBe("rects[0].width", "400");
 203     shouldBe("rects[0].height", "278");
 204     shouldBe("rects[1].left", "8");
 205     shouldBe("rects[1].top", "607");
 206     shouldBe("rects[1].width", "396");
 207     shouldBe("rects[1].height", "18");
 208     shouldBe("rects[2].left", "8");
 209     shouldBe("rects[2].top", "725");
 210     shouldBe("rects[2].width", "242");
 211     shouldBe("rects[2].height", "18");
 212     shouldBe("rects[3].left", "326");
 213     shouldBe("rects[3].top", "725");
 214     shouldBe("rects[3].width", "44");
 215     shouldBe("rects[3].height", "18");
 216     shouldBe("rects[4].left", "8");
 217     shouldBe("rects[4].top", "765");
 218     shouldBe("rects[4].width", "341");
 219     shouldBe("rects[4].height", "18");
 220     shouldBe("rects[5].left", "8");
 221     shouldBe("rects[5].top", "805");
 222     shouldBe("rects[5].width", "366");
 223     shouldBe("rects[5].height", "18");
 224     shouldBe("rects[6].left", "8");
 225     shouldBe("rects[6].top", "845");
 226     shouldBe("rects[6].width", "67");
 227     shouldBe("rects[6].height", "18");
 228
 229     // Test 5 - Should include rect of the img.
 230     debug("Test 5");
 231     var range5 = document.createRange();
 232     range5.setStart(document.getElementById('test5').firstChild, 10);
 233     range5.setEnd(document.getElementById('test5').lastChild, 50);
 234     show(range5);
 235     rects = range5.getClientRects();
 236     shouldBe("rects.length", "5");
 237     shouldBe("rects[0].left", "80");
 238     shouldBe("rects[0].top", "921");
 239     shouldBe("rects[0].width", "324");
 240     shouldBe("rects[0].height", "18");
 241     shouldBe("rects[1].left", "8");
 242     shouldBe("rects[1].top", "1039");
 243     shouldBe("rects[1].width", "242");
 244     shouldBe("rects[1].height", "18");
 245     shouldBe("rects[2].left", "250");
 246     shouldBe("rects[2].top", "950");
 247     shouldBe("rects[2].width", "76");
 248     shouldBe("rects[2].height", "103");
 249     shouldBe("rects[3].left", "326");
 250     shouldBe("rects[3].top", "1039");
 251     shouldBe("rects[3].width", "44");
 252     shouldBe("rects[3].height", "18");
 253     shouldBe("rects[4].left", "8");
 254     shouldBe("rects[4].top", "1079");
 255     shouldBe("rects[4].width", "284");
 256     shouldBe("rects[4].height", "18");
 257
 258     // Test 6 - Should not include green or blue boxes
 259     debug("Test 6");
 260     var range6 = document.createRange();
 261     range6.selectNode(document.getElementById('test6'));
 262     show(range6);
 263     rects = range6.getClientRects();
 264     shouldBe("rects.length", "7");
 265     shouldBe("rects[0].left", "8");
 266     shouldBe("rects[0].top", "1224");
 267     shouldBe("rects[0].width", "400");
 268     shouldBe("rects[0].height", "200");
 269     shouldBe("rects[1].left", "8");
 270     shouldBe("rects[1].top", "1235");
 271     shouldBe("rects[1].width", "396");
 272     shouldBe("rects[1].height", "18");
 273     shouldBe("rects[2].left", "8");
 274     shouldBe("rects[2].top", "1275");
 275     shouldBe("rects[2].width", "57");
 276     shouldBe("rects[2].height", "18");
 277     shouldBe("rects[3].left", "105");
 278     shouldBe("rects[3].top", "1275");
 279     shouldBe("rects[3].width", "44");
 280     shouldBe("rects[3].height", "18");
 281     shouldBe("rects[4].left", "8");
 282     shouldBe("rects[4].top", "1315");
 283     shouldBe("rects[4].width", "387");
 284     shouldBe("rects[4].height", "18");
 285     shouldBe("rects[5].left", "8");
 286     shouldBe("rects[5].top", "1355");
 287     shouldBe("rects[5].width", "397");
 288     shouldBe("rects[5].height", "18");
 289     shouldBe("rects[6].left", "8");
 290     shouldBe("rects[6].top", "1395");
 291     shouldBe("rects[6].width", "171");
 292     shouldBe("rects[6].height", "18");
 293
 294     // Test 7 - Should include green but not blue box
 295     debug("Test 7");
 296     var range7 = document.createRange();
 297     range7.selectNodeContents(document.getElementById('test7'));
 298     show(range7);
 299     rects = range7.getClientRects();
 300     shouldBe("rects.length", "7");
 301     shouldBe("rects[0].left", "8");
 302     shouldBe("rects[0].top", "1471");
 303     shouldBe("rects[0].width", "396");
 304     shouldBe("rects[0].height", "18");
 305     shouldBe("rects[1].left", "8");
 306     shouldBe("rects[1].top", "1500");
 307     shouldBe("rects[1].width", "400");
 308     shouldBe("rects[1].height", "40");
 309     shouldBe("rects[2].left", "8");
 310     shouldBe("rects[2].top", "1511");
 311     shouldBe("rects[2].width", "57");
 312     shouldBe("rects[2].height", "18");
 313     shouldBe("rects[3].left", "105");
 314     shouldBe("rects[3].top", "1511");
 315     shouldBe("rects[3].width", "44");
 316     shouldBe("rects[3].height", "18");
 317     shouldBe("rects[4].left", "8");
 318     shouldBe("rects[4].top", "1551");
 319     shouldBe("rects[4].width", "387");
 320     shouldBe("rects[4].height", "18");
 321     shouldBe("rects[5].left", "8");
 322     shouldBe("rects[5].top", "1591");
 323     shouldBe("rects[5].width", "397");
 324     shouldBe("rects[5].height", "18");
 325     shouldBe("rects[6].left", "8");
 326     shouldBe("rects[6].top", "1631");
 327     shouldBe("rects[6].width", "171");
 328     shouldBe("rects[6].height", "18");
 329
 330     // Test 8
 331     debug("Test 8");
 332     var range8 = document.createRange();
 333     range8.selectNodeContents(document.getElementById('test8'));
 334     show(range8);
 335     rects = range8.getClientRects();
 336     shouldBe("rects.length", "4");
 337     shouldBe("rects[0].left", "168");
 338     shouldBe("rects[0].top", "1678");
 339     shouldBe("rects[0].width", "269");
 340     shouldBe("rects[0].height", "316");
 341     shouldBe("rects[1].left", "137");
 342     shouldBe("rects[1].top", "1704");
 343     shouldBe("rects[1].width", "271");
 344     shouldBe("rects[1].height", "317");
 345     shouldBe("rects[2].left", "107");
 346     shouldBe("rects[2].top", "1729");
 347     shouldBe("rects[2].width", "246");
 348     shouldBe("rects[2].height", "289");
 349     shouldBe("rects[3].left", "76");
 350     shouldBe("rects[3].top", "1755");
 351     shouldBe("rects[3].width", "212");
 352     shouldBe("rects[3].height", "247");
 353
 354     debug("Test 9");
 355     var range9 = document.createRange();
 356     // This case should match test 9b's results. Currently though getClientRects returns an empty list.
 357     range9.setStart(document.getElementById('test9'), 0);
 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>