<!DOCTYPE html>
<meta charset=utf-8>
<link rel="help" href="https://w3c.github.io/payment-request/#show()-method">
<title>PaymentRequest show() rejects if doc is not fully active</title>
<script src="/js-test-resources/ui-helper.js"></script>
<script src="/resources/payment-request.js"></script>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="help" href="https://w3c.github.io/payment-request/#dom-paymentrequest-show()">
<body>
<script>
const basicCardMethod = Object.freeze({
  supportedMethods: "basic-card",
});
const applePayMethod = Object.freeze({
  supportedMethods: "https://apple.com/apple-pay",
  data: {
    version: 2,
    merchantIdentifier: '',
    merchantCapabilities: ['supports3DS'],
    supportedNetworks: ['visa', 'masterCard'],
    countryCode: 'US',
  },
});
const validMethods = Object.freeze([basicCardMethod, applePayMethod]);
const validAmount = Object.freeze({
  currency: "USD",
  value: "5.00",
});
const validTotal = Object.freeze({
  label: "Total due",
  amount: validAmount,
});
const validDetails = Object.freeze({
  total: validTotal,
});

function getLoadedPaymentRequest(iframe, url) {
  return new Promise(resolve => {
    iframe.addEventListener(
      "load",
      () => {
        const { PaymentRequest } = iframe.contentWindow;
        const request = new PaymentRequest(validMethods, validDetails);
        resolve(request);
      },
      { once: true }
    );
    iframe.src = url;
  });
}

promise_test(async t => {
  // Check that PaymentRequests can be constructed.
  new PaymentRequest(validMethods, validDetails);
  const iframe = document.createElement("iframe");
  iframe.allowPaymentRequest = true;
  document.body.appendChild(iframe);

  // We first got to page1.html, grab a PaymentRequest instance.
  const request1 = await getLoadedPaymentRequest(
    iframe,
    "resources/page1.html"
  );

  // We navigate the iframe again, putting request1's document into an inactive state.
  const request2 = await getLoadedPaymentRequest(
    iframe,
    "resources/page2.html"
  );

  // Now, request1's relevant global object's document is no longer active.
  // So, call .show(), and make sure it rejects appropriately.
  await promise_rejects(
    t,
    "AbortError",
    request1.show(),
    "Inactive document, so must throw AbortError"
  );

  // request2 has an active document tho, so confirm it's working as expected:
  await activateThen(async () => {
      request2.show().catch((error) => {});
    await request2.abort();
  });

  await activateThen(async () => {
    await promise_rejects(
      t,
      "InvalidStateError",
      request2.show(),
      "Abort already called, so InvalidStateError"
    );
  });

  // We are done, so clean up.
  iframe.remove();
}, "PaymentRequest.show() aborts if the document is not active");

promise_test(async t => {
  // check that PaymentRequests can be constructed (smoke test).
  new PaymentRequest(validMethods, validDetails);

  // We nest two iframes and wait for them to load.
  const outerIframe = document.createElement("iframe");
  outerIframe.allowPaymentRequest = true;
  document.body.appendChild(outerIframe);
  // Load the outer iframe (we don't care about the awaited request)
  await getLoadedPaymentRequest(
    outerIframe,
    "resources/page1.html"
  );

  // Now we create the inner iframe
  const innerIframe = outerIframe.contentDocument.createElement("iframe");
  innerIframe.allowPaymentRequest = true;

  // nest them
  outerIframe.contentDocument.body.appendChild(innerIframe);

  // load innerIframe, and get the PaymentRequest instance
  const request = await getLoadedPaymentRequest(
    innerIframe,
    "resources/page2.html"
  );

  // Navigate the outer iframe to a new location.
  // Wait for the load event to fire.
  await new Promise(resolve => {
    outerIframe.addEventListener("load", resolve);
    outerIframe.src = "resources/page2.html";
  });
  // Now, request's relevant global object's document is still active
  // (it is the active document of the inner iframe), but is not fully active
  // (since the parent of the inner iframe is itself no longer active).
  // So, call request.show() and make sure it rejects appropriately.
  await promise_rejects(
    t,
    "AbortError",
    request.show(),
    "Active, but not fully active, so must throw AbortError"
  );

  // We are done, so clean up.
  outerIframe.remove();
}, "PaymentRequest.show() aborts if the document is active, but not fully active");

promise_test(async t => {
  // Check that PaymentRequests can be constructed.
  new PaymentRequest(validMethods, validDetails);
  const iframe = document.createElement("iframe");
  iframe.allowPaymentRequest = true;
  document.body.appendChild(iframe);
  // Make a request in the iframe.
  const request = await getLoadedPaymentRequest(
    iframe,
    "resources/page1.html"
  );
  // Present the payment sheet.
  await activateThen(async () => {
    const showPromise = request.show();
    // Navigate the iframe to a new location. Wait for the load event to fire.
    await new Promise(resolve => {
      iframe.addEventListener("load", resolve);
      iframe.src = "resources/page2.html";
    });
    await promise_rejects(
      t,
      "AbortError",
      showPromise,
      "The iframe was navigated away, so showPromise must reject with AbortError"
    );
  });

  // We are done, so clean up.
  iframe.remove();
}, "If a payment request is showing, but its document is navigated away (so no longer fully active), the payment request aborts.");
</script>