| <!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> |
