<!DOCTYPE html>
<html>
  <head>
    <title>Range tests</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
      #tests {
        font-family:Arial;
      }
      </style>
  </head>
  <body>
    <div id="tests"></div>
    <script>
      var div = document.getElementById("tests"), item, range, textNode, bounds;

      for (var i = 6; i < 72; i++) {
        item = document.createElement("div");
        item.style.fontSize = i + "px";
        item.style.lineHeight = (10 + i * 2) + "px";
        textNode = document.createTextNode(i);
        item.appendChild(textNode);
        div.appendChild(item);

        range = document.createRange();
        range.setStart(textNode, 0);
        range.setEnd(textNode, i.toString().length);
        bounds = range.getBoundingClientRect();

        textNode.nodeValue += " " + bounds.height + " " + bounds.bottom + (i % 3 === 0);

      }

    </script>
    <script src="test.js"></script>
  </body>
</html>