pageswap-after-media-change.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-view-transitions/navigation/pageswap-after-media-change.html?initial - WPT Dashboard Interop Dashboard
- /css/css-view-transitions/navigation/pageswap-after-media-change.html?resize - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta name="variant" content="?initial">

<meta name="variant" content="?resize">

<title>A media query change updates the outbound view transition opt-in</title>

<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/#view-transition-rule">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<body>

<script>

promise_test(async t => {

  const frame = document.createElement("iframe");

  frame.width = location.search === "?resize" ? "200" : "400";

  frame.src = "resources/pageswap-media-change.html";

  const loaded = new Promise(resolve => frame.onload = resolve);

  document.body.append(frame);

  t.add_cleanup(() => frame.remove());

  await loaded;

  const win = frame.contentWindow;

  const twoFrames = () => new Promise(resolve =>

    win.requestAnimationFrame(() => win.requestAnimationFrame(resolve)));

  await twoFrames();

  if (location.search === "?resize") {

    assert_false(win.matchMedia("(min-width: 300px)").matches);

    frame.width = "400";

    await twoFrames();

  assert_true(win.matchMedia("(min-width: 300px)").matches);

  const swapped = new Promise(resolve => {

    win.addEventListener("pageswap", event => {

      resolve(event.viewTransition !== null);

      event.viewTransition?.skipTransition();

    }, { once: true });

});

  frame.src = "/resources/blank.html?destination";

  assert_true(await swapped, "The matching rule enables an outbound transition");

}, "pageswap includes a view transition after " + location.search.slice(1) + " media matching");

</script>