Source code
Revision control
Copy as Markdown
Other Tools
<!doctype html>
<html>
<head>
<title>Pointer Event: touch-action in rotated divs</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<link rel="help" href="https://w3c.github.io/pointerevents/#declaring-candidate-regions-for-default-touch-behaviors" />
<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;
}
setCurrentTouchAction();
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 = [];
test_params[current_test++].test_obj.done();
if (current_test < 2)
setCurrentTouchAction();
});
["pointerup", "pointercancel"].forEach(function(eventName) {
on_event(document.getElementById("target"), eventName, function (event) {
event_log.push(event.type);
});
});
}
</script>
<style>
#target {
width: 200px;
height: 200px;
margin: 10px;
float: left;
touch-action: none;
background-color: green;
transform: rotate(-90deg);
}
#btnDone {
padding: 20px;
}
</style>
</head>
<body onload="run()">
<h1>Pointer Event: touch-action in rotated divs</h1>
<h2 id="pointerTypeDescription"></h2>
<h4>
Tests that touch-action directions in a div rotated by 90-degrees are interpreted in the local (rotated) coordinate space
</h4>
<ol>
<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>
</ol>
<div id="target"></div>
<input type="button" id="btnDone" value="Done" />
<div id="log"></div>
</body>
</html>