Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<meta charset="utf-8" />
<h1>Capturing mouse coordinates</h1>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
li.highlight {
font-weight: bold;
}
#latest_captured_mouse_event {
font-family: monospace;
}
</style>
<ol class="instructions">
<li>
<button id="start_capture">Click here</button> and share this window as a
captured surface.
</li>
<li>Move the mouse near the top left corner of the window.</li>
<li>Move the mouse near the top right corner of the window.</li>
<li>Move the mouse near the bottom right corner of the window.</li>
<li>Move the mouse near the bottom left corner of the window.</li>
<li>Move the mouse near the center of the window.</li>
<li>Move the mouse outside the window.</li>
<li>Move the mouse inside the window.</li>
</ol>
<pre id="log"></pre>
<video width="1024" height="512" id="captured_content" autoplay></video>
<div id="latest_captured_mouse_event"></div>
<script>
setup({explicit_timeout: true});
const items = document.querySelectorAll('ol.instructions > li');
let highlighted_item_index = 0;
function clear_all_highlight() {
Array.from(items).forEach(item => item.classList.remove('highlight'));
}
function highlight_next_item() {
clear_all_highlight();
items[highlighted_item_index].classList.add('highlight');
highlighted_item_index++;
}
add_completion_callback(clear_all_highlight);
let capture_controller;
let latest_captured_mouse_event_index = 0;
function observe_mouse_coordinates(check_condition) {
assert_true(!!capture_controller, 'Screen capture started.');
assert_own_property(window, 'CapturedMouseEvent');
return new Promise(resolve => {
const listener = (event) => {
if (check_condition(event.surfaceX, event.surfaceY)) {
capture_controller.removeEventListener(
'capturedmousechange', listener);
resolve();
}
};
capture_controller.addEventListener('capturedmousechange', listener);
});
}
promise_test(async () => {
assert_own_property(window, 'CaptureController');
const controller = new CaptureController();
highlight_next_item();
await new Promise(resolve => {
document.getElementById('start_capture')
.addEventListener('click', (event) => {
event.target.disabled = true;
resolve();
});
});
const video = document.getElementById('captured_content');
video.srcObject =
await navigator.mediaDevices.getDisplayMedia({controller});
await new Promise(resolve => video.onloadedmetadata = resolve);
controller.addEventListener('capturedmousechange', (event) => {
document.getElementById('latest_captured_mouse_event').textContent =
`Last event (#${++latest_captured_mouse_event_index}) observed at ${
(new Date()).toTimeString()}, was {surfaceX: ${
event.surfaceX}, surfaceY: ${event.surfaceY}}.`;
});
capture_controller = controller;
}, 'Starting Screen Capture');
const max_distance = 100;
[{x: 0, y: 0, name: 'top left corner'},
{x: window.outerWidth, y: 0, name: 'top right corner'},
{x: window.outerWidth, y: window.outerHeight, name: 'bottom right corner'},
{x: 0, y: window.outerHeight, name: 'bottom left corner'},
{x: window.outerWidth / 2, y: window.outerHeight / 2, name: 'center'},
].forEach(target => {
promise_test(async () => {
highlight_next_item();
assert_less_than(
max_distance, Math.min(window.outerWidth, window.outerHeight) / 4,
'window is large enough');
await observe_mouse_coordinates((x, y) => {
return x >= 0 && y >= 0 &&
Math.hypot(target.x - x, target.y - y) < max_distance;
})
}, `Moving mouse to the ${target.name} of the window.`);
});
promise_test(async () => {
highlight_next_item();
await observe_mouse_coordinates((x, y) => {
return x == -1 && y == -1;
})
}, `Moving mouse outside the window.`);
promise_test(async () => {
highlight_next_item();
await observe_mouse_coordinates((x, y) => {
return x >= 0 && y >= 0;
})
}, `Moving mouse inside the window.`);
</script>