<!DOCTYPE html>
<meta charset="utf-8" />
<title>PaymentRequest show() rejects if doc is not fully active</title>
<link rel="help" href="https://w3c.github.io/payment-request/#show-method" />
<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>
<body>
<script>
const applePay = Object.freeze({
  supportedMethods: "https://apple.com/apple-pay",
  data: {
    version: 3,
    merchantIdentifier: "merchant.com.example",
    countryCode: "US",
    merchantCapabilities: ["supports3DS"],
    supportedNetworks: ["visa"],
  },
});
const validMethod = Object.freeze({
  supportedMethods: "basic-card",
});
const validMethods = Object.freeze([validMethod, applePay]);
const validAmount = Object.freeze({
  currency: "USD",
  value: "5.00",
});
const validTotal = Object.freeze({
  label: "Total due",
  amount: validAmount,
});
const validDetails = Object.freeze({
  total: validTotal,
});

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

promise_test(async (t) => {
  const iframe = document.createElement("iframe");
  document.body.appendChild(iframe);
  // Make a request in the iframe.
  const request = await getLoadedPaymentRequest(
    iframe,
    "resources/page1.html"
  );
  await test_driver.bless("show payment request");
  const showPromise = request.show();
  const firstCtor = iframe.contentWindow.DOMException;

  // Navigate the iframe to a new location. Wait for the load event to fire.
  const request2 = await getLoadedPaymentRequest(
    iframe,
    "resources/page2.html"
  );

  await promise_rejects_dom(
    t,
    "AbortError",
    firstCtor,
    showPromise,
    "Show promise should abort."
  );

  // The navigation dismisses the previous payment request so it
  // now possible to show another one.
  await test_driver.bless("show 2nd payment request");
  const showPromise2 = request2.show();
  const secondCtor = iframe.contentWindow.DOMException;
  // no longer fully active
  iframe.remove();
  await promise_rejects_dom(
    t,
    "AbortError",
    secondCtor,
    showPromise2,
    "Show promise should abort."
  );
}, "If a payment request is showing, but its document is navigated away (so no longer fully active), the payment sheet is dismissed.");
</script>
</body>