show_unhandled_tap.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
  font-family: ahem;
  src: url(Ahem.ttf);
}
* {
  font-family: ahem;
  font-size: 16px;
}
#style_active:active {
  background-color: blue;
}
:indeterminate + span {
  background-color: blue;
}
</style>
</head>
<body>
<div style="position: absolute; left: 8px; top: 66px; width: 400px; height: 350px;">
<span id="target">This has multiple listeners.</span>
<div id="mutate">This block gets mutated to change the DOM.</div>
<div id="style_active">This block gets red if active</div>
<input id="checkbox" type="checkbox"><span>indeterminate checkbox</span><br>
<img id="image" width="10" height="10" src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs="><br>
<span id="editable" contenteditable="true">editable</span><br>
<span id="focusable" tabindex="1">focusable</span><br>
</div>

<p style="position: absolute; left: 8px; top: 400px; width: 400px; height: 30px;"><span id="bottom">Bottom.</span></p>

<script>
var test;
var mutations = 0;
// Remembers which test to run.
function setTest(whichTest) {
  test = whichTest;
}
// Determines if we currently have a test for the given event/handler pair.
function hasTest(operation, handler) {
  var candidate = operation + '-' + handler;
  var result = test === candidate;
  return result;
}
// Our universal event handler.  Changes the page based on the stored operation.
function handle(event) {
  var operation = event.type;
  if (hasTest(operation, 'mutateDom')) {
    mutations++;
    mutate.textContent = 'This block HAS BEEN mutated ' + mutations + ' times!';
  } else if (hasTest(operation, 'mutateStyle')) {
    mutate.style.color = mutate.style.color == "red" ? "blue" : "red";
  } else if (hasTest(operation, 'mutateIndeterminate')) {
    checkbox.indeterminate ^= true;
  } else if (hasTest(operation, 'preventDefault')) {
    event.preventDefault();
  }
}
// Set up $target to have the handle() handler for all tap-related events.
var t = document.getElementById('target');
t.addEventListener('mousedown', handle);
t.addEventListener('mouseup', handle);
t.addEventListener('click', handle);
</script>
</body>
</html>
chromium/third_party/blink/renderer/core/testing/data/show_unhandled_tap.html
