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