nested-scope.html - mozsearch

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-view-transitions/scoped/nested-scope.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html class=reftest-wait>

<head>

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

<link rel="match" href="nested-scope-ref.html">

<script src="/common/reftest-wait.js"></script>

<script src="/web-animations/testcommon.js"></script>

<style>

.box { position: relative; contain: strict; }

#scopeA { background: #ddd;

          left: 0; top: 0; width: 300px; height: 300px; }

#partA { background: #4af;

         left: 30px; top: 30px; width: 240px; height: 240px; }

#scopeB { background: #eee;

          left: 30px; top: 30px; width: 180px; height: 180px; }

#partB { background: cyan;

         left: 30px; top: 30px; width: 120px; height: 120px; }

::view-transition-old(*) { animation: -ua-view-transition-fade-out 1s paused; }

::view-transition-new(*) { animation: -ua-view-transition-fade-in 1s paused; }

.tr { view-transition-name: demo; }

</style>

</head>

<body>

<div id=scopeA class=box>

  <div id=partA class="box tr">

    <div id=scopeB class=box>

      <div id=partB class="box tr">

      </div>

    </div>

  </div>

</div>

<script>

failIfNot(scopeA.startViewTransition, "Missing element.startViewTransition");

// This test runs simultaneous transitions on two scopes, one inside the other.

// It verifies that the inner and outer participants are both visible while both

// transitions are in progress. (This entails rendering the inner transition

// through the ::view-transition-new for the outer participant.)

async function runTest() {

  await waitForCompositorReady();

  await scopeB.startViewTransition().ready;

  // Untag partB to avoid a collision when the outer transition looks for its

  // participants. (We can stop doing this once we have contain: view-transition

  // or similar.)

  partB.classList.remove("tr");

  await scopeA.startViewTransition(() => {

    scopeA.style.background = "#ccc";

  }).ready;

  requestAnimationFrame(takeScreenshot);

onload = () => runTest();

</script>

</body>

</html>