1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62


content / test / data / touch_selection.html [blame]

<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>