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

   1 <script src="../../../resources/ahem.js"></script>
   2 <script src="../../../resources/js-test.js"></script>
   3 <style>
   4 body {
   5     font: 16px Ahem;
   6 }
   7
   8 .bbox {
   9     position:absolute;
  10     outline: 5px solid rgba(255, 0, 0, .75);
  11     z-index: -1;
  12 }
  13
  14 .box {
  15     width: 400px;
  16     line-height: 40px;
  17 }
  18
  19 .outer {
  20     outline: 2px solid green;
  21 }
  22
  23 .inner {
  24     display: inline-block;
  25     width: 40px;
  26     height: 20px;
  27     outline: 2px solid blue;
  28 }
  29
  30 #test5 {
  31     transform: translate(50px, 100px) rotate(50deg);
  32 }
  33
  34 #console {
  35     position:absolute;
  36     left: 500px;
  37 }
  38
  39 #testArea {
  40     width: 300px;
  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 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 dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  63
  64 </div>
  65 <script>
  66     if (window.testRunner)
  67         testRunner.dumpAsText();
  68     else
  69         alert("WARNING:\nThis test may show bogus FAILures if not run in DumpRenderTree, due to platform-specific differences in font metrics.");
  70
  71     function testClientRect(rect, expectedRect)
  72     {
  73         shouldBeEqualToString("rect.left.toFixed(3)", expectedRect.left.toFixed(3));
  74         shouldBeEqualToString("rect.top.toFixed(3)", expectedRect.top.toFixed(3));
  75         shouldBeEqualToString("rect.width.toFixed(3)", expectedRect.width.toFixed(3));
  76         shouldBeEqualToString("rect.height.toFixed(3)", expectedRect.height.toFixed(3));
  77         if (rect.right == Math.round(rect.right))
  78             shouldBe("rect.right", "rect.left + rect.width");
  79         else
  80             shouldBe("Math.abs(rect.left + rect.width - rect.right) < 0.001", "true");
  81         if (rect.bottom == Math.round(rect.bottom))
  82             shouldBe("rect.bottom", "rect.top + rect.height");
  83         else
  84             shouldBe("Math.abs(rect.top + rect.height - rect.bottom) < 0.001", "true");
  85         debug("");
  86     }
  87
  88     function addBBoxOverClientRect(rect)
  89     {
  90         var bbox = document.createElement('div');
  91         bbox.className = "bbox";
  92         var style = "";
  93         style += "left: " + rect.left + "px;";
  94         style += "top: " + rect.top + "px;";
  95         style += "width: " + (rect.right - rect.left) + "px;";
  96         style += "height: " + (rect.bottom - rect.top) + "px;";
  97         bbox.setAttribute("style", style);
  98         document.documentElement.appendChild(bbox);
  99     }
 100
 101     function show(range)
 102     {
 103         if (window.testRunner)
 104             return;
 105         addBBoxOverClientRect(range.getBoundingClientRect());
 106     }
 107
 108     var expectedResults = [
 109         /*1*/  { left: 8, top: 8, width: 400, height: 400 },
 110         /*2*/  { left: 8, top: 452, width: 400, height: 376 },
 111         /*3*/  { left: 8, top: 1044, width: 400, height: 96 },
 112         /*4*/  { left: 0, top: 0, width: 0, height: 0 },
 113         /*5*/  { left: -14.574, top: 1761.947, width: 504.009, height: 535.849 },
 114         /*6*/  { left: 0, top: 0, width: 0, height: 0 },
 115     ];
 116
 117     // Range over entire element.
 118     debug("Test 1")
 119     var range1 = document.createRange();
 120     range1.selectNode(document.getElementById('test1'));
 121     show(range1);
 122     rect = range1.getBoundingClientRect();
 123     testClientRect(rect, expectedResults[1 - 1]);
 124
 125     // Range over entire element's contents.
 126     debug("Test 2")
 127     var range2 = document.createRange();
 128     range2.selectNodeContents(document.getElementById('test2'));
 129     show(range2);
 130     rect = range2.getBoundingClientRect();
 131     testClientRect(rect, expectedResults[2 - 1]);
 132
 133     // Range over subset of element's contents.
 134     debug("Test 3")
 135     var range3 = document.createRange();
 136     range3.setStart(document.getElementById('test3').firstChild, 100);
 137     range3.setEnd(document.getElementById('test3').lastChild, 150);
 138     show(range3);
 139     rect = range3.getBoundingClientRect()
 140     testClientRect(rect, expectedResults[3 - 1]);
 141
 142     // Collapsed range.
 143     debug("Test 4")
 144     var range4 = document.createRange();
 145     range4.selectNodeContents(document.getElementById('test4'));
 146     range4.collapse(true);
 147     show(range4);
 148
 149     rect = range4.getBoundingClientRect()
 150     testClientRect(rect, expectedResults[4 - 1]);
 151
 152     // Range over transformed elements.
 153     debug("Test 5")
 154     var range5 = document.createRange();
 155     range5.selectNodeContents(document.getElementById('test5'));
 156     show(range5);
 157     rect = range5.getBoundingClientRect()
 158     testClientRect(rect, expectedResults[5 - 1]);
 159
 160     // Empty range.
 161     debug("Test 6")
 162     var range6 = document.createRange();
 163     rect = range6.getBoundingClientRect()
 164     testClientRect(rect, expectedResults[6 - 1]);
 165
 166     if (window.testRunner) {
 167         var area = document.getElementById('testArea');
 168         area.parentNode.removeChild(area);
 169     }
 170 </script>