зеркало из https://github.com/mozilla/gecko-dev.git
93 строки
3.2 KiB
HTML
93 строки
3.2 KiB
HTML
<!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="author" title="Google" href="http://www.google.com "/>
|
|
<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>
|