Mercurial > mozilla-central / file revision / testing/web-platform/tests/css/css-view-transitions/only-child-old.html@9ccc6a2267cbf69c621fec973bd28573c2a45a1f
summary | shortlog | changelog | pushlog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
testing/web-platform/tests/css/css-view-transitions/only-child-old.html
author Duncan McIntosh <dmcintosh@mozilla.com>
Wed, 09 Jul 2025 19:42:02 +0000 (5 hours ago)
changeset 795924 9ccc6a2267cbf69c621fec973bd28573c2a45a1f
parent 699385 14c8fd94c3cac44fab41f1a0282c876d437b8a4d
permissions -rw-r--r--
Bug 1966586 - Reuse other browser windows when opening _blank links in Taskbar Tabs windows. r=nrishel This doesn't affect other tab additions, nor does it stop the tab bar from appearing altogether. The idea is that _if_ another tab is somehow made, the user should see it; but we should not create new tabs if we can avoid it. This also adds tests for opening URIs in popups and taskbar tabs to make it less likely that this breaks in future. Differential Revision: https://phabricator.services.mozilla.com/D253726
<!DOCTYPE html>
<html class="reftest-wait foo">
<title>View transitions: ensure :only-child is supported on view-transition-old</title>
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
<link rel="author" href="mailto:khushalsagar@chromium.org">

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

<style>
::view-transition {
  background-color: black;
}
html:only-child {
  background-color: black;
}
:root:only-child {
  background-color: black;
}
:only-child {
  background-color: black;
}
.foo:only-child {
  background-color: black;
}

::view-transition-old(root) {
  background-color: blue;
}
::view-transition-old(target) {
  background-color: blue;
}
::view-transition-old(*) {
  color: blue;
}

::view-transition-old(root):only-child {
  background-color: red;
}
::view-transition-old(target):only-child {
  background-color: red;
}
::view-transition-old(*):only-child {
  color: red;
}

</style>
<div id="target"></div>

<script>
let matchedColor = "rgb(255, 0, 0)";
let notMatchedColor = "rgb(0, 0, 255)";

promise_test(() => {
  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
  return new Promise(async (resolve, reject) => {
    document.documentElement.style.viewTransitionName = "root";
    target.style.viewTransitionName = "none";
    let transition = document.startViewTransition(() => {
      document.documentElement.style.viewTransitionName = "none";
    });

    transition.ready.then(() => {
      let style = getComputedStyle(document.documentElement, "::view-transition-old(root)");
      if (style.backgroundColor == matchedColor && style.color == matchedColor)
        resolve();
      else
        reject(style.backgroundColor + " and " + style.color);
    });
  });
}, ":only-child should match because ::view-transition-new is not generated (root to none)");

promise_test(() => {
  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
  return new Promise(async (resolve, reject) => {
    document.documentElement.style.viewTransitionName = "root";
    target.style.viewTransitionName = "none";
    let transition = document.startViewTransition();

    transition.ready.then(() => {
      let style = getComputedStyle(document.documentElement, "::view-transition-old(root)");
      if (style.backgroundColor == notMatchedColor && style.color == notMatchedColor)
        resolve();
      else
        reject(style.backgroundColor + " and " + style.color);
    });
  });
}, ":only-child should not match because ::view-transition-new is generated (root to root)");

promise_test(() => {
  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
  return new Promise(async (resolve, reject) => {
    document.documentElement.style.viewTransitionName = "root";
    target.style.viewTransitionName = "none";
    let transition = document.startViewTransition(() => {
      document.documentElement.style.viewTransitionName = "none";
      target.style.viewTransitionName = "root";
    });

    transition.ready.then(() => {
      let style = getComputedStyle(document.documentElement, "::view-transition-old(root)");
      if (style.backgroundColor == notMatchedColor && style.color == notMatchedColor)
        resolve();
      else
        reject(style.backgroundColor + " and " + style.color);
    });
  });
}, ":only-child should not match because ::view-transition-new is generated (root to element)");

promise_test(() => {
  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
  return new Promise(async (resolve, reject) => {
    target.style.viewTransitionName = "target";
    document.documentElement.style.viewTransitionName = "none";
    let transition = document.startViewTransition(() => {
      target.style.viewTransitionName = "none";
    });

    transition.ready.then(() => {
      let style = getComputedStyle(
        document.documentElement, "::view-transition-old(target)");
      if (style.backgroundColor == matchedColor && style.color == matchedColor)
        resolve();
      else
        reject(style.backgroundColor + " and " + style.color);
    });
  });
}, ":only-child should match because ::view-transition-new is not generated (element to none)");

promise_test(() => {
  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
  return new Promise(async (resolve, reject) => {
    target.style.viewTransitionName = "root";
    document.documentElement.style.viewTransitionName = "none";
    let transition = document.startViewTransition(() => {
      document.documentElement.style.viewTransitionName = "root";
      target.style.viewTransitionName = "none";
    });

    transition.ready.then(() => {
      let style = getComputedStyle(document.documentElement, "::view-transition-old(root)");
      if (style.backgroundColor == notMatchedColor && style.color == notMatchedColor)
        resolve();
      else
        reject(style.backgroundColor + " and " + style.color);
    });
  });
}, ":only-child should not match because ::view-transition-new is generated (element to root)");

promise_test(() => {
  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
  return new Promise(async (resolve, reject) => {
    target.style.viewTransitionName = "target";
    document.documentElement.style.viewTransitionName = "none";
    let transition = document.startViewTransition();

    transition.ready.then(() => {
      let style = getComputedStyle(document.documentElement, "::view-transition-old(target)");
      if (style.backgroundColor == notMatchedColor && style.color == notMatchedColor)
        resolve();
      else
        reject(style.backgroundColor + " and " + style.color);
    });
  });
}, ":only-child should not match because ::view-transition-new is generated (element to element)");
</script>
mozilla-central
Deployed from 0549d7aefb93 at 2025-06-12T15:23:35Z.