Source code

Revision control

Copy as Markdown

Other Tools

<!doctype html>
<title>Pointer Event: touch-action in rotated divs</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<link rel="author" title="Google" href=" "/>
<meta name="assert" content="Tests that touch-action directions in a div rotated by 90-degrees are interpreted in the local (rotated) coordinate space"/>
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script type="text/javascript" src="pointerevent_support.js"></script>
<script type="text/javascript">
var event_log = [];
function resetTestState() {
event_log = [];
function run() {
var current_test = 0;
var test_params = [
test_obj: setup_pointerevent_test("'touch-action: pan-x' in a rotated div", ["touch"]),
touch_action: "pan-x",
expected_events: "pointercancel, pointercancel, pointerup, pointerup"
test_obj: setup_pointerevent_test("'touch-action: pan-y' in a rotated div", ["touch"]),
touch_action: "pan-y",
expected_events: "pointerup, pointerup, pointercancel, pointercancel"
function setCurrentTouchAction() {
document.getElementById("target").style.touchAction = test_params[current_test].touch_action;
on_event(document.getElementById("btnDone"), "click", function() {
test_params[current_test].test_obj.step(function () {
assert_equals(event_log.join(", "), test_params[current_test].expected_events);
event_log = [];
if (current_test < 2)
["pointerup", "pointercancel"].forEach(function(eventName) {
on_event(document.getElementById("target"), eventName, function (event) {
#target {
width: 200px;
height: 200px;
margin: 10px;
float: left;
touch-action: none;
background-color: green;
transform: rotate(-90deg);
#btnDone {
padding: 20px;
<body onload="run()">
<h1>Pointer Event: touch-action in rotated divs</h1>
<h2 id="pointerTypeDescription"></h2>
Tests that touch-action directions in a div rotated by 90-degrees are interpreted in the local (rotated) coordinate space
<li>Make 4 separate touch drags on Green, in this order: drag UP, then drag DOWN, then drag LEFT, then drag RIGHT.</li>
<li>Tap on Done.</li>
<li>Repeat the touch drags once again, in the same order.</li>
<li>Tap on Done.</li>
<div id="target"></div>
<input type="button" id="btnDone" value="Done" />
<div id="log" />