| <!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, |
| }; |
| |
| 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_true(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 = 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. |
| |
| let rafPromise = new Promise((resolve) => { |
| session.requestAnimationFrame((time, xrFrame) => { |
| resolve(); |
| }); |
| }); |
| let promises = [rafPromise]; |
| |
| if (document.fullscreenElement == overlayElement) { |
| let elem = document.getElementById('div_other'); |
| assert_true(elem != null); |
| assert_not_equals(elem, overlayElement); |
| |
| let fullscreenPromise = new Promise((resolve, reject) => { |
| elem.requestFullscreen().then(() => { |
| assert_unreached("fullscreen change should be blocked"); |
| reject(); |
| }).catch(() => { |
| resolve(); |
| }); |
| }); |
| promises.push(fullscreenPromise); |
| } |
| |
| return Promise.all(promises); |
| }; |
| |
| let watcherStep = new Event("watcherstep"); |
| let watcherDone = new Event("watcherdone"); |
| |
| let testInput = function(overlayElement, session, fakeDeviceController, t) { |
| |
| // 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. |
| session.requestAnimationFrame((time, xrFrame) => { |
| input_source.setOverlayPointerPosition(inner_a.offsetLeft + 1, |
| inner_a.offsetTop + 1); |
| input_source.startSelection(); |
| |
| session.requestAnimationFrame((time, xrFrame) => { |
| input_source.endSelection(); |
| |
| session.requestAnimationFrame((time, xrFrame) => { |
| // Need to process one more frame to allow select to propagate. |
| session.requestAnimationFrame((time, xrFrame) => { |
| session.dispatchEvent(watcherStep); |
| |
| assert_true(got_beforexrselect); |
| |
| session.requestAnimationFrame((time, xrFrame) => { |
| input_source.setOverlayPointerPosition(inner_b.offsetLeft + 1, |
| inner_b.offsetTop + 1); |
| input_source.startSelection(); |
| |
| session.requestAnimationFrame((time, xrFrame) => { |
| input_source.endSelection(); |
| |
| session.requestAnimationFrame((time, xrFrame) => { |
| // Need to process one more frame to allow select to propagate. |
| session.dispatchEvent(watcherDone); |
| }); |
| }); |
| }); |
| }); |
| }); |
| }); |
| }); |
| }); |
| return eventPromise; |
| }; |
| |
| let testCrossOriginContent = function(overlayElement, session, fakeDeviceController, t) { |
| 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. |
| session.requestAnimationFrame((time, xrFrame) => { |
| input_source.setOverlayPointerPosition(iframe.offsetLeft + 1, |
| iframe.offsetTop + 1); |
| input_source.startSelection(); |
| |
| session.requestAnimationFrame((time, xrFrame) => { |
| input_source.endSelection(); |
| |
| session.requestAnimationFrame((time, xrFrame) => { |
| // Need to process one more frame to allow select to propagate. |
| session.requestAnimationFrame((time, xrFrame) => { |
| session.dispatchEvent(watcherStep); |
| |
| session.requestAnimationFrame((time, xrFrame) => { |
| input_source.setOverlayPointerPosition(inner_b.offsetLeft + 1, |
| inner_b.offsetTop + 1); |
| input_source.startSelection(); |
| |
| session.requestAnimationFrame((time, xrFrame) => { |
| input_source.endSelection(); |
| |
| session.requestAnimationFrame((time, xrFrame) => { |
| // 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> |