1 files changed, 119 insertions, 0 deletions
diff --git a/testing/web-platform/tests/captured-mouse-events/capturing-mouse-coordinates-manual.tentative.https.html b/testing/web-platform/tests/captured-mouse-events/capturing-mouse-coordinates-manual.tentative.https.html
new file mode 100644
index 0000000000..19b2d69641
--- /dev/null
+++ b/testing/web-platform/tests/captured-mouse-events/capturing-mouse-coordinates-manual.tentative.https.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<h1>Capturing mouse coordinates</h1>
+<link rel="help" href="https://screen-share.github.io/captured-mouse-events" />
+<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>