LayoutTests/fast/dom/Element/getClientRects.html

   1 <script src="../../js/resources/js-test-pre.js"></script>
   2 <style>
   3     #base {
   4         width: 300px;
   5         height: 100px;
   6     }
   7
   8     #border {
   9         border: 10px solid #999;
  10         width: 300px;
  11         height: 100px;
  12     }
  13
  14     #margin {
  15         margin: 10px;
  16         width: 300px;
  17         height: 100px;
  18     }
  19
  20     #transform {
  21         -webkit-transform: translateX(50px) rotate(45deg);
  22         width: 100px;
  23         height: 100px;
  24     }
  25
  26     #columns {
  27         -webkit-column-count: 3;
  28         width: 300px;
  29     }
  30
  31     #inline {
  32         display: inline;
  33     }
  34
  35     #outer {
  36         width: 100px;
  37         height: 100px;
  38     }
  39
  40     #inner {
  41         width: 200px;
  42         height: 200px;
  43     }
  44
  45     table {
  46         width: 300px;
  47     }
  48
  49     img {
  50         width: 100px;
  51         height: 100px;
  52     }
  53
  54     .testBox {
  55         background-color: green;
  56     }
  57
  58     #testArea {
  59         width: 300px;
  60     }
  61
  62     .bbox {
  63         position:absolute;
  64         outline: 5px solid rgba(255, 0, 0, .75);
  65     }
  66
  67     #console {
  68         position:absolute;
  69         left: 500px;
  70     }
  71 </style>
  72
  73 <div id="console"></div>
  74 <div id="testArea">
  75
  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>
  91
  92 </div>
  93 <script>
  94     if (window.layoutTestController)
  95         layoutTestController.dumpAsText();
  96
  97     var testRects;
  98     function testClientRects(rects, expectedNumberOfRects)
  99     {
 100         testRects = rects;
 101         shouldBe("testRects.length", String(expectedNumberOfRects));
 102         debug("");
 103     }
 104
 105     function addBBoxOverClientRect(rect)
 106     {
 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);
 116     }
 117
 118     function addBBoxOverClientRects(rects)
 119     {
 120         for (var i = 0; i < rects.length; ++i)
 121             addBBoxOverClientRect(rects[i]);
 122     }
 123
 124     var expectedResults = [
 125         1,
 126         1,
 127         1,
 128         1,
 129         1,
 130         1,
 131         10,
 132         1,
 133         2,
 134         1,
 135         1,
 136         1,
 137         1,
 138         3,
 139         1
 140     ];
 141
 142     function test(number, element)
 143     {
 144         debug("Client bounding rects for #" + number);
 145
 146         if (element.className.match("knownFailure")) {
 147             debug("Known failure. Skipping.");
 148             debug("");
 149             return;
 150         }
 151
 152         var boundingRects = element.getClientRects();
 153         addBBoxOverClientRects(boundingRects);
 154         testClientRects(boundingRects, expectedResults[number - 1]);
 155     }
 156
 157     var tests = document.getElementsByClassName("testBox");
 158     for (var i = 0; i < tests.length; ++i)
 159         test(i + 1, tests[i]);
 160
 161     if (window.layoutTestController) {
 162         var area = document.getElementById('testArea');
 163         area.parentNode.removeChild(area);
 164     }
 165 </script>
 166 <script src="../../js/resources/js-test-post.js"></script>