<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<title>Touch Action Test Page</title>
</head>
<body>
<div id="target" style="height:200px">
Events are logged when tests touch this div.
</div>
<!-- use "white-space:nowrap;" to prevent page reflows while swiping, see
https://bugs.chromium.org/p/chromedriver/issues/detail?id=1508 -->
<div id="events" style="white-space:nowrap;">events: </div>
<div id="padding">
We need some padding here so that the page is large enough to test swipe
and scroll actions.
</div>
<div id="bottom">This is the bottom of the page.</div>
<script>
events = document.getElementById('events');
var eventTypes = ['touchstart', 'touchend', 'touchmove', 'touchcancel'];
var eventListener = function(evt) {
events.innerHTML += ' ' + evt.type;
};
var target = document.getElementById('target');
for (var i = 0; i < eventTypes.length; i++) {
target.addEventListener(eventTypes[i], eventListener);
}
var padding = document.getElementById('padding');
padding.style.border = 'solid';
padding.style.height = window.screen.height * 2 + 'px';
padding.style.width = window.screen.width * 2 + 'px';
</script>
</body>
</html>
Codebase Browser
chromium