summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/webxr/dom-overlay
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/webxr/dom-overlay')
-rw-r--r--testing/web-platform/tests/webxr/dom-overlay/META.yml1
-rw-r--r--testing/web-platform/tests/webxr/dom-overlay/ar_dom_overlay.https.html298
-rw-r--r--testing/web-platform/tests/webxr/dom-overlay/ar_dom_overlay_hit_test.https.html128
-rw-r--r--testing/web-platform/tests/webxr/dom-overlay/idlharness.https.window.js20
-rw-r--r--testing/web-platform/tests/webxr/dom-overlay/nested_fullscreen.https.html81
5 files changed, 528 insertions, 0 deletions
diff --git a/testing/web-platform/tests/webxr/dom-overlay/META.yml b/testing/web-platform/tests/webxr/dom-overlay/META.yml
new file mode 100644
index 0000000000..be2b6e613a
--- /dev/null
+++ b/testing/web-platform/tests/webxr/dom-overlay/META.yml
@@ -0,0 +1 @@
+spec: https://immersive-web.github.io/dom-overlays/
diff --git a/testing/web-platform/tests/webxr/dom-overlay/ar_dom_overlay.https.html b/testing/web-platform/tests/webxr/dom-overlay/ar_dom_overlay.https.html
new file mode 100644
index 0000000000..250adf9b24
--- /dev/null
+++ b/testing/web-platform/tests/webxr/dom-overlay/ar_dom_overlay.https.html
@@ -0,0 +1,298 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/webxr_util.js"></script>
+<script src="../resources/webxr_test_constants.js"></script>
+<script src="../resources/webxr_test_asserts.js"></script>
+
+<style type="text/css">
+ div {
+ padding: 10px;
+ min-width: 10px;
+ min-height: 10px;
+ }
+ iframe {
+ border: 0;
+ width: 20px;
+ height: 20px;
+ }
+</style>
+<div id="div_overlay">
+ <div id="inner_a">
+ </div>
+ <div id="inner_b">
+ </div>
+ <!-- This SVG iframe is treated as cross-origin content. -->
+ <iframe id="iframe" src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect height="20" width="20" fill="red" fill-opacity="0.3"/></svg>'>
+ </iframe>
+ <canvas>
+ </canvas>
+</div>
+<div id="div_other">
+ <p>test text</p>
+</div>
+
+<script>
+
+const fakeDeviceInitParams = {
+ supportedModes: ["immersive-ar"],
+ views: VALID_VIEWS,
+ viewerOrigin: IDENTITY_TRANSFORM,
+ supportedFeatures: ALL_FEATURES,
+ environmentBlendMode: "alpha-blend",
+ interactionMode: "screen-space"
+};
+
+let testBasicProperties = function(overlayElement, session, fakeDeviceController, t) {
+ assert_equals(session.mode, 'immersive-ar');
+ assert_not_equals(session.environmentBlendMode, 'opaque');
+
+ assert_true(overlayElement != null);
+ assert_true(overlayElement instanceof Element);
+
+ // Verify that the DOM overlay type is one of the known types.
+ assert_in_array(session.domOverlayState.type,
+ ["screen", "floating", "head-locked"]);
+
+ // Verify SameObject property for domOverlayState
+ assert_equals(session.domOverlayState, session.domOverlayState);
+
+ // The overlay element should have a transparent background.
+ assert_equals(window.getComputedStyle(overlayElement).backgroundColor,
+ 'rgba(0, 0, 0, 0)');
+
+ // Check that the pseudostyle is set.
+ assert_equals(document.querySelector(':xr-overlay'), overlayElement);
+
+ return new Promise((resolve) => {
+ session.requestAnimationFrame((time, xrFrame) => {
+ resolve();
+ });
+ });
+};
+
+let testFullscreen = async function(overlayElement, session, fakeDeviceController, t) {
+ // If the browser implements DOM Overlay using Fullscreen API,
+ // it must not be possible to change the DOM Overlay element by using
+ // Fullscreen API, and attempts to do so must be rejected.
+ // Since this is up to the UA, this test also passes if the fullscreen
+ // element is different from the overlay element.
+
+ // Wait for a rAF call before proceeding.
+ await new Promise((resolve) => session.requestAnimationFrame(resolve));
+
+ assert_implements_optional(document.fullscreenElement == overlayElement,
+ "WebXR DOM overlay is not using Fullscreen API");
+ let elem = document.getElementById('div_other');
+ assert_not_equals(elem, null);
+ assert_not_equals(elem, overlayElement);
+
+ try {
+ await elem.requestFullscreen();
+ assert_unreached("fullscreen change should be blocked");
+ } catch {
+ // pass if the call rejects
+ }
+ // This is an async function, its return value is automatically a promise.
+};
+
+let watcherStep = new Event("watcherstep");
+let watcherDone = new Event("watcherdone");
+
+let testInput = function(overlayElement, session, fakeDeviceController, t) {
+ let debug = xr_debug.bind(this, 'testInput');
+
+ // Use two DIVs for this test. "inner_a" uses a "beforexrselect" handler
+ // that uses preventDefault(). Controller interactions with it should trigger
+ // that event, and not generate an XR select event.
+
+ let inner_a = document.getElementById('inner_a');
+ assert_true(inner_a != null);
+ let inner_b = document.getElementById('inner_b');
+ assert_true(inner_b != null);
+
+ let got_beforexrselect = false;
+ inner_a.addEventListener('beforexrselect', (ev) => {
+ ev.preventDefault();
+ got_beforexrselect = true;
+ });
+
+ let eventWatcher = new EventWatcher(
+ t, session, ["watcherstep", "select", "watcherdone"]);
+
+ // Set up the expected sequence of events. The test triggers two select
+ // actions, but only the second one should generate a "select" event.
+ // Use a "watcherstep" in between to verify this.
+ let eventPromise = eventWatcher.wait_for(
+ ["watcherstep", "select", "watcherdone"]);
+
+ let input_source =
+ fakeDeviceController.simulateInputSourceConnection(SCREEN_CONTROLLER);
+ session.requestReferenceSpace('viewer').then(function(viewerSpace) {
+ // Press the primary input button and then release it a short time later.
+ debug('got viewerSpace');
+ requestSkipAnimationFrame(session, (time, xrFrame) => {
+ debug('got rAF 1');
+ input_source.setOverlayPointerPosition(inner_a.offsetLeft + 1,
+ inner_a.offsetTop + 1);
+ input_source.startSelection();
+
+ session.requestAnimationFrame((time, xrFrame) => {
+ debug('got rAF 2');
+ input_source.endSelection();
+
+ session.requestAnimationFrame((time, xrFrame) => {
+ debug('got rAF 3');
+ // Need to process one more frame to allow select to propagate.
+ session.requestAnimationFrame((time, xrFrame) => {
+ debug('got rAF 4');
+ session.dispatchEvent(watcherStep);
+
+ assert_true(got_beforexrselect);
+
+ session.requestAnimationFrame((time, xrFrame) => {
+ debug('got rAF 5');
+ input_source.setOverlayPointerPosition(inner_b.offsetLeft + 1,
+ inner_b.offsetTop + 1);
+ input_source.startSelection();
+
+ session.requestAnimationFrame((time, xrFrame) => {
+ debug('got rAF 6');
+ input_source.endSelection();
+
+ session.requestAnimationFrame((time, xrFrame) => {
+ debug('got rAF 7');
+ // Need to process one more frame to allow select to propagate.
+ session.dispatchEvent(watcherDone);
+ });
+ });
+ });
+ });
+ });
+ });
+ });
+ });
+ return eventPromise;
+};
+
+let testCrossOriginContent = function(overlayElement, session, fakeDeviceController, t) {
+ let debug = xr_debug.bind(this, 'testCrossOriginContent');
+
+ let iframe = document.getElementById('iframe');
+ assert_true(iframe != null);
+ let inner_b = document.getElementById('inner_b');
+ assert_true(inner_b != null);
+
+ let eventWatcher = new EventWatcher(
+ t, session, ["watcherstep", "select", "watcherdone"]);
+
+ // Set up the expected sequence of events. The test triggers two select
+ // actions, but only the second one should generate a "select" event.
+ // Use a "watcherstep" in between to verify this.
+ let eventPromise = eventWatcher.wait_for(
+ ["watcherstep", "select", "watcherdone"]);
+
+ let input_source =
+ fakeDeviceController.simulateInputSourceConnection(SCREEN_CONTROLLER);
+ session.requestReferenceSpace('viewer').then(function(viewerSpace) {
+ // Press the primary input button and then release it a short time later.
+ requestSkipAnimationFrame(session, (time, xrFrame) => {
+ debug('got rAF 1');
+ input_source.setOverlayPointerPosition(iframe.offsetLeft + 1,
+ iframe.offsetTop + 1);
+ input_source.startSelection();
+
+ session.requestAnimationFrame((time, xrFrame) => {
+ debug('got rAF 2');
+ input_source.endSelection();
+
+ session.requestAnimationFrame((time, xrFrame) => {
+ debug('got rAF 3');
+ // Need to process one more frame to allow select to propagate.
+ session.requestAnimationFrame((time, xrFrame) => {
+ debug('got rAF 4');
+ session.dispatchEvent(watcherStep);
+
+ session.requestAnimationFrame((time, xrFrame) => {
+ debug('got rAF 5');
+ input_source.setOverlayPointerPosition(inner_b.offsetLeft + 1,
+ inner_b.offsetTop + 1);
+ input_source.startSelection();
+
+ session.requestAnimationFrame((time, xrFrame) => {
+ debug('got rAF 6');
+ input_source.endSelection();
+
+ session.requestAnimationFrame((time, xrFrame) => {
+ debug('got rAF 7');
+ // Need to process one more frame to allow select to propagate.
+ session.dispatchEvent(watcherDone);
+ });
+ });
+ });
+ });
+ });
+ });
+ });
+ });
+ return eventPromise;
+};
+
+xr_promise_test(
+"Ensures DOM Overlay rejected without root element",
+(t) => {
+ return navigator.xr.test.simulateDeviceConnection(fakeDeviceInitParams)
+ .then(() => {
+ return new Promise((resolve, reject) => {
+ navigator.xr.test.simulateUserActivation(() => {
+ resolve(
+ promise_rejects_dom(t, "NotSupportedError",
+ navigator.xr.requestSession('immersive-ar',
+ {requiredFeatures: ['dom-overlay']})
+ .then(session => session.end()),
+ "Should reject when not specifying DOM overlay root")
+ );
+ });
+ });
+ });
+});
+
+xr_session_promise_test(
+ "Ensures DOM Overlay feature works for immersive-ar, body element",
+ testBasicProperties.bind(this, document.body),
+ fakeDeviceInitParams, 'immersive-ar',
+ {requiredFeatures: ['dom-overlay'],
+ domOverlay: { root: document.body } });
+
+xr_session_promise_test(
+ "Ensures DOM Overlay feature works for immersive-ar, div element",
+ testBasicProperties.bind(this, document.getElementById('div_overlay')),
+ fakeDeviceInitParams, 'immersive-ar',
+ {requiredFeatures: ['dom-overlay'],
+ domOverlay: { root: document.getElementById('div_overlay') } });
+
+xr_session_promise_test(
+ "Ensures DOM Overlay input deduplication works",
+ testInput.bind(this, document.getElementById('div_overlay')),
+ fakeDeviceInitParams, 'immersive-ar', {
+ requiredFeatures: ['dom-overlay'],
+ domOverlay: { root: document.getElementById('div_overlay') }
+ });
+
+xr_session_promise_test(
+ "Ensures DOM Overlay Fullscreen API doesn't change DOM overlay",
+ testFullscreen.bind(this, document.getElementById('div_overlay')),
+ fakeDeviceInitParams, 'immersive-ar', {
+ requiredFeatures: ['dom-overlay'],
+ domOverlay: { root: document.getElementById('div_overlay') }
+ });
+
+xr_session_promise_test(
+ "Ensures DOM Overlay interactions on cross origin iframe are ignored",
+ testCrossOriginContent.bind(this, document.getElementById('div_overlay')),
+ fakeDeviceInitParams, 'immersive-ar', {
+ requiredFeatures: ['dom-overlay'],
+ domOverlay: { root: document.getElementById('div_overlay') }
+ });
+
+</script>
diff --git a/testing/web-platform/tests/webxr/dom-overlay/ar_dom_overlay_hit_test.https.html b/testing/web-platform/tests/webxr/dom-overlay/ar_dom_overlay_hit_test.https.html
new file mode 100644
index 0000000000..6fdf2498ed
--- /dev/null
+++ b/testing/web-platform/tests/webxr/dom-overlay/ar_dom_overlay_hit_test.https.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/webxr_util.js"></script>
+<script src="../resources/webxr_test_constants.js"></script>
+<script src="../resources/webxr_test_constants_fake_world.js"></script>
+<script src="../resources/webxr_test_asserts.js"></script>
+
+<style type="text/css">
+ div {
+ padding: 10px;
+ min-width: 10px;
+ min-height: 10px;
+ }
+ iframe {
+ border: 0;
+ width: 20px;
+ height: 20px;
+ }
+</style>
+<div id="div_overlay">
+ <div id="inner_b">
+ </div>
+ <!-- This SVG iframe is treated as cross-origin content. -->
+ <iframe id="iframe" src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect height="20" width="20" fill="red" fill-opacity="0.3"/></svg>'>
+ </iframe>
+ <canvas>
+ </canvas>
+</div>
+
+<script>
+
+const fakeDeviceInitParams = {
+ supportedModes: ["immersive-ar"],
+ views: VALID_VIEWS,
+ viewerOrigin: IDENTITY_TRANSFORM,
+ supportedFeatures: ALL_FEATURES,
+ world: createFakeWorld(5.0, 2.0, 5.0), // see webxr_test_constants_fake_world.js for details
+};
+
+const hitTestOptionsInit = {
+ profile: "generic-touchscreen",
+ offsetRay: new XRRay(),
+};
+
+const SCREEN_POINTER_TRANSFORM = {
+ position: [0, 0, 0], // middle of the screen
+ orientation: [0, 0, 0, 1] // forward-facing
+};
+
+const screen_controller_init = {
+ handedness: "none",
+ targetRayMode: "screen",
+ pointerOrigin: SCREEN_POINTER_TRANSFORM, // aka mojo_from_pointer
+ profiles: ["generic-touchscreen",]
+};
+
+const testCrossOriginContent = function(overlayElement, session, fakeDeviceController, t) {
+ const iframe = document.getElementById('iframe');
+ const inner_b = document.getElementById('inner_b');
+
+ let debug = xr_debug.bind(this, 'testCrossOriginContent');
+
+ const input_source =
+ fakeDeviceController.simulateInputSourceConnection(screen_controller_init);
+ debug('start');
+ return session.requestReferenceSpace('viewer').then(function(viewerSpace) {
+ debug('got viewerSpace');
+ return session.requestHitTestSourceForTransientInput(hitTestOptionsInit)
+ .then((hitTestSource) => {
+ debug('got hitTestSource');
+ return new Promise((resolve) => {
+ // Press the primary input button and then release it a short time later.
+ session.requestAnimationFrame((time, xrFrame) => {
+ debug('got rAF 1');
+ input_source.setOverlayPointerPosition(iframe.offsetLeft + 1,
+ iframe.offsetTop + 1);
+ input_source.startSelection();
+
+ session.requestAnimationFrame((time, xrFrame) => {
+ input_source.endSelection();
+
+ // There should be no results for transient input for cross origin content:
+ const results = xrFrame.getHitTestResultsForTransientInput(hitTestSource);
+ t.step(() => {
+ assert_equals(results.length, 0, "Hit test results should be suppressed for cross-origin content");
+ });
+
+ session.requestAnimationFrame((time, xrFrame) => {
+ debug('got rAF 2');
+ // Need to process one more frame to allow select to propagate
+
+ session.requestAnimationFrame((time, xrFrame) => {
+ debug('got rAF 3');
+ input_source.setOverlayPointerPosition(inner_b.offsetLeft + 1,
+ inner_b.offsetTop + 1);
+ input_source.startSelection();
+
+ session.requestAnimationFrame((time, xrFrame) => {
+ debug('got rAF 4');
+ input_source.endSelection();
+
+ const results = xrFrame.getHitTestResultsForTransientInput(hitTestSource);
+ t.step(() => {
+ // TODO(bialpio): this assertion is currently failing, FIXME
+ assert_equals(results.length, 1, "Hit test results should be available for same-origin content");
+ });
+ debug('resolving');
+ resolve();
+ });
+ });
+ });
+ });
+ });
+ });
+ });
+ });
+};
+
+xr_session_promise_test(
+ "Ensures DOM Overlay interactions on cross origin iframe do not cause hit test results to come up",
+ testCrossOriginContent.bind(this, document.getElementById('div_overlay')),
+ fakeDeviceInitParams, 'immersive-ar', {
+ requiredFeatures: ['dom-overlay', 'hit-test'],
+ domOverlay: { root: document.getElementById('div_overlay') }
+ });
+
+</script>
diff --git a/testing/web-platform/tests/webxr/dom-overlay/idlharness.https.window.js b/testing/web-platform/tests/webxr/dom-overlay/idlharness.https.window.js
new file mode 100644
index 0000000000..0f901e5b5d
--- /dev/null
+++ b/testing/web-platform/tests/webxr/dom-overlay/idlharness.https.window.js
@@ -0,0 +1,20 @@
+// META: script=/resources/WebIDLParser.js
+// META: script=/resources/idlharness.js
+
+'use strict';
+
+// https://immersive-web.github.io/dom-overlays/
+
+idl_test(
+ ['webxr-dom-overlays'],
+ ['webxr', 'html', 'dom', 'SVG'],
+ async idl_array => {
+ self.svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+ idl_array.add_objects({
+ Document: ['document'],
+ HTMLElement: ['document.body'],
+ SVGElement: ['svgElement'],
+ Window: ['window']
+ });
+ }
+);
diff --git a/testing/web-platform/tests/webxr/dom-overlay/nested_fullscreen.https.html b/testing/web-platform/tests/webxr/dom-overlay/nested_fullscreen.https.html
new file mode 100644
index 0000000000..a8fc70fca6
--- /dev/null
+++ b/testing/web-platform/tests/webxr/dom-overlay/nested_fullscreen.https.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="../resources/webxr_util.js"></script>
+<script src="../resources/webxr_test_constants.js"></script>
+<script src="../resources/webxr_test_asserts.js"></script>
+
+<style type="text/css">
+ div {
+ padding: 10px;
+ min-width: 10px;
+ min-height: 10px;
+ }
+ iframe {
+ border: 0;
+ width: 20px;
+ height: 20px;
+ }
+</style>
+<div id="div_overlay">
+ <canvas>
+ </canvas>
+</div>
+<div id="div_other">
+ <p>test text</p>
+</div>
+
+<script>
+
+const fakeDeviceInitParams = {
+ supportedModes: ["immersive-ar"],
+ views: VALID_VIEWS,
+ viewerOrigin: IDENTITY_TRANSFORM,
+ supportedFeatures: ALL_FEATURES,
+};
+
+// This test verifies that WebXR DOM Overlay mode works when the document is
+// already in fullscreen mode when the session starts. (This should work both
+// for a fullscreen-based overlay implementation and for one that treats the
+// overlay as an independent output.)
+promise_test(
+ async (setup) => {
+ setup.add_cleanup(() => document.exitFullscreen());
+
+ // Fullscreen the <body> element before running the test. Currently, this
+ // can't be an arbitrary element because the simulateUserActivation call
+ // adds a button to <body> which is only clickable if it's visible.
+ await test_driver.bless("fullscreen",
+ () => document.body.requestFullscreen());
+
+ const overlayElement = document.getElementById('div_overlay');
+
+ xr_session_promise_test(
+ "Check XR session from fullscreen",
+ (session, fakeDeviceController, t) => {
+ // The overlay element should have a transparent background.
+ assert_equals(window.getComputedStyle(overlayElement).backgroundColor,
+ 'rgba(0, 0, 0, 0)');
+
+ // Check that the pseudostyle is set.
+ assert_equals(document.querySelector(':xr-overlay'), overlayElement);
+
+ // Wait for one animation frame before exiting.
+ return new Promise((resolve) => session.requestAnimationFrame(resolve));
+ },
+ fakeDeviceInitParams, 'immersive-ar', {
+ requiredFeatures: ['dom-overlay'],
+ domOverlay: { root: overlayElement }
+ }
+ );
+
+ // The setup promise_test automatically succeeds if it gets here
+ // without raising an exception. It'll pass even on systems that
+ // don't support WebXR or DOM Overlay.
+ },
+ "fullscreen setup"
+);
+
+</script>