<html>
<style>
  /* Use a font with characters of fixed width to make it easier to test
     selection gestures precisely. */
  @font-face {
    font-family: 'Ahem';
    src: local('Ahem'),
      url('../../font/Ahem.ttf');
  }
  div, input {
    font-size: 15px;
    font-family: "Ahem";
  }
  /* Add space to separate the touch selection targets. */
  .padded {
    margin-bottom: 30px;
  }
</style>
<body>
<div>Dummy Padding Text</div>
<div id='textDiv' class='padded'>Some text we can select</div>

<div>Dummy Padding Text</div>
<input id='textfield' class='padded' type="text" value="Some editable text">

<div>Dummy Padding Text</div>
<input id='emptyTextfield' class='padded' type="text" value="">
</body>
<script>

function focus_textfield() {
  document.getElementById('textfield').focus();
  // Focusing the textfiled selects its text. Collapse selection to a cursor.
  window.getSelection().collapseToStart();
}

// Returns the top left point of an element, excluding border and padding.
function get_top_left(element) {
  var rect = element.getBoundingClientRect();
  var cs = getComputedStyle(element);
  var point = {
    x: rect.left + parseFloat(cs.borderLeft) + parseFloat(cs.paddingLeft),
    y: rect.top + parseFloat(cs.borderTop) + parseFloat(cs.paddingTop)
  };
  return JSON.stringify(point);
}

function get_top_left_of_text() {
  return get_top_left(document.getElementById('textDiv'));
}

function get_top_left_of_textfield() {
  return get_top_left(document.getElementById('textfield'));
}

function get_top_left_of_empty_textfield() {
  return get_top_left(document.getElementById('emptyTextfield'));
}

</script>

</html>