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

   1 <!DOCTYPE html>
   2 <script src="../../../resources/js-test.js"></script>
   3 <style>
   4 .box {
   5     line-height: 30px;
   6     font-family: monospace;
   7     font-size: 20px;
   8 }
   9
  10 .horizontal {
  11     width: 400px;
  12 }
  13
  14 .vertical {
  15     height: 400px;
  16     -webkit-writing-mode: vertical-rl;
  17 }
  18
  19 #console {
  20     position:absolute;
  21     left: 500px;
  22 }
  23 </style>
  24
  25 <div id="console"></div>
  26 <div class="box horizontal" id="test-horizontal">ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
  27 <div class="box vertical" id="test-vertical">ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
  28
  29 <script>
  30     debug("Test horizontal");
  31     var range = document.createRange();
  32     var box = document.getElementById('test-horizontal');
  33     range.setStart(box.firstChild, 20);
  34     range.setEnd(box.firstChild, 21);
  35     var rects = range.getClientRects();
  36     shouldBe("1", "rects.length");
  37     shouldBeGreaterThanOrEqual("box.offsetWidth / 26", "rects[0].width");
  38     shouldBeGreaterThanOrEqual("box.offsetHeight / 2", "rects[0].height");
  39
  40     debug("Test vertical");
  41     box = document.getElementById('test-vertical');
  42     range.setStart(box.firstChild, 20);
  43     range.setEnd(box.firstChild, 21);
  44     rects = range.getClientRects();
  45     shouldBe("1", "rects.length");
  46     shouldBeGreaterThanOrEqual("box.offsetWidth / 2", "rects[0].width");
  47     shouldBeGreaterThanOrEqual("box.offsetHeight / 26", "rects[0].height");
  48 </script>