view-transition-scope-display-contents.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-view-transitions/scoped/view-transition-scope-display-contents.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="help" href="https://www.w3.org/TR/css-view-transitions-2/">

  <title>view-transition-scope: auto + display: contents</title>

</head>

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

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

<style>

  #outer {

    view-transition-name: outer;

  #inner {

    view-transition-name: inner;

  .scoped {

    view-transition-scope: auto;

  .display-contents {

    display: contents;

</style>

<body>

  <div id="outer">

    <div id="middle">

      <div id="inner"></div>

    </div>

  </div>

</body>

<script>

  function capturedNames() {

    const regexp = /\((?<name>[^\)]+)/;

    const names = document.getAnimations()

                     .map(a => a.effect.pseudoElement)

                     .map(name => name.match(regexp).groups.name);

    return [...new Set(names)].sort();

  promise_test(async t => {

    const outer = document.getElementById('outer');

    const middle = document.getElementById('middle');

    const inner = document.getElementById('inner');

    let vt = document.startViewTransition(() => {});

    await vt.ready;

    assert_array_equals(

        capturedNames(), ['inner', 'outer', 'root'],

        'Retrieve all names in absence of view-transition-scope: auto');

    vt.skipTransition();

    middle.classList.toggle('scoped');

    vt = document.startViewTransition(() => {});

    await vt.ready;

    assert_array_equals(

        capturedNames(), ['outer', 'root'],

        'view-transition-scope: auto blocks tag discovery in subtree ' +

        'even if on a non-positioned element');

    vt.skipTransition();

    middle.classList.toggle('display-contents');

    vt = document.startViewTransition(() => {});

    await vt.ready;

    assert_array_equals(

        capturedNames(), ['outer', 'root'],

        'view-transition-scope: auto blocks tag discovery in subtree ' +

        'even if display: contents');

    vt.skipTransition();

  }, 'Setting view-transition-scope to auto blocks propagation of name ' +

     'discovery.');

</script>

</html>