<!DOCTYPE HTML>
<html>
<head>
<title>Touch events with vertical-rl writing mode</title>
<meta name="viewport" content="width=device-width">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script>
setup({explicit_done: true});
function onEvent(target, eventName, validator) {
return new Promise((resolve) => {
const listener = (event) => {
validator(event);
resolve();
};
target.addEventListener(eventName, listener, { once: true });
});
}
async function run() {
promise_test(async () => {
const touchstart_promise = onEvent(document.documentElement,
"touchstart", (event) => {
assert_equals(event.changedTouches[0].clientX, 10,
"touchstart clientX coordinates are correct in vertical-rl");
assert_equals(event.changedTouches[0].clientY, 20,
"touchstart clientX coordinates are correct in vertical-rl");
});
const click_promise = onEvent(document.documentElement,
"click", (event) => {
assert_equals(event.clientX, 10,
"click clientX coordinates are correct in vertical-rl");
assert_equals(event.clientY, 20,
"click clientY coordinates are correct in vertical-rl");
});
const actions = new test_driver.Actions()
.addPointer("touchPointer1", "touch")
.pointerMove(10, 20)
.pointerDown()
.pointerUp();
const actions_promise = actions.send();
await Promise.all([actions_promise, click_promise, touchstart_promise]);
done();
}, "touch & click events in vertical-rl mode have correct coordinates");
}
</script>
<style>
body {
margin: 0;
writing-mode: vertical-rl;
}
.forcescroll {
width: 5000px;
height: 20px;
}
</style>
</head>
<body onload="run()">
<div class="forcescroll"></div>
</body>
</html>
Codebase Browser
chromium