tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

only-child-group.html (4339B)

      1 <!DOCTYPE html>
      2 <html class="foo">
      3 <title>View transitions: ensure :only-child is supported on view-transition-group</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
      5 <link rel="author" href="mailto:khushalsagar@chromium.org">
      6 
      7 <script src="/resources/testharness.js"></script>
      8 <script src="/resources/testharnessreport.js"></script>
      9 
     10 <style>
     11 ::view-transition {
     12  background-color: black;
     13 }
     14 html:only-child {
     15  background-color: black;
     16 }
     17 :root:only-child {
     18  background-color: black;
     19 }
     20 :only-child {
     21  background-color: black;
     22 }
     23 .foo:only-child {
     24  background-color: black;
     25 }
     26 
     27 ::view-transition-group(root) {
     28  background-color: blue;
     29 }
     30 ::view-transition-group(target) {
     31  background-color: blue;
     32 }
     33 ::view-transition-group(*) {
     34  color: blue;
     35 }
     36 
     37 ::view-transition-group(root):only-child {
     38  background-color: red;
     39 }
     40 ::view-transition-group(target):only-child {
     41  background-color: red;
     42 }
     43 ::view-transition-group(*):only-child {
     44  color: red;
     45 }
     46 
     47 </style>
     48 <div id="target"></div>
     49 <div id="target2"></div>
     50 
     51 <script>
     52 function resetState() {
     53  if (window.transition)
     54    window.transition.skipTransition();
     55  document.documentElement.style.viewTransitionName = "";
     56  target.style.viewTransitionName = "";
     57  target2.style.viewTransitionName = "";
     58 }
     59 
     60 promise_test((t) => {
     61  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
     62  t.add_cleanup(resetState);
     63  return new Promise(async (resolve, reject) => {
     64    window.transition = document.startViewTransition();
     65    window.transition.ready.then(() => {
     66      let style = getComputedStyle(document.documentElement, "::view-transition-group(root)");
     67      if (style.backgroundColor == "rgb(255, 0, 0)" && style.color == "rgb(255, 0, 0)")
     68        resolve();
     69      else
     70        reject(style.backgroundColor + " and " + style.color);
     71    });
     72  });
     73 }, ":only-child should match because ::view-transition-group is generated for root element only");
     74 
     75 promise_test((t) => {
     76  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
     77  t.add_cleanup(resetState);
     78  return new Promise(async (resolve, reject) => {
     79    target.style.viewTransitionName = "target";
     80    window.transition = document.startViewTransition();
     81    window.transition.ready.then(() => {
     82      let style = getComputedStyle(document.documentElement, "::view-transition-group(root)");
     83      if (style.backgroundColor == "rgb(0, 0, 255)" && style.color == "rgb(0, 0, 255)")
     84        resolve();
     85      else
     86        reject(style.backgroundColor + " and " + style.color);
     87    });
     88  });
     89 }, ":only-child should not match because ::view-transition-group is generated for multiple elements");
     90 
     91 promise_test((t) => {
     92  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
     93  t.add_cleanup(resetState);
     94  return new Promise(async (resolve, reject) => {
     95    document.documentElement.style.viewTransitionName = "none";
     96    target.style.viewTransitionName = "target";
     97    window.transition = document.startViewTransition();
     98    window.transition.ready.then(() => {
     99      let style = getComputedStyle(document.documentElement, "::view-transition-group(target)");
    100      if (style.backgroundColor == "rgb(255, 0, 0)" && style.color == "rgb(255, 0, 0)")
    101        resolve();
    102      else
    103        reject(style.backgroundColor + " and " + style.color);
    104    });
    105  });
    106 }, ":only-child should match because ::view-transition-group is generated for sub element only");
    107 
    108 promise_test((t) => {
    109  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
    110  t.add_cleanup(resetState);
    111  return new Promise(async (resolve, reject) => {
    112    document.documentElement.style.viewTransitionName = "none";
    113    target.style.viewTransitionName = "target";
    114    target2.style.viewTransitionName = "target2";
    115    window.transition = document.startViewTransition();
    116    window.transition.ready.then(() => {
    117      let style = getComputedStyle(document.documentElement, "::view-transition-group(target)");
    118      if (style.backgroundColor == "rgb(0, 0, 255)" && style.color == "rgb(0, 0, 255)")
    119        resolve();
    120      else
    121        reject(style.backgroundColor + " and " + style.color);
    122    });
    123  });
    124 }, ":only-child should not match because ::view-transition-group is generated for multiple sub elements");
    125 </script>