tor-browser

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

auto-name-get-animations.html (2124B)

      1 <!DOCTYPE html>
      2 <html >
      3 <title>View transitions: generated names should be prefixed with -ua- in script</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <style>
      8 
      9 :root {
     10  view-transition-name: none;
     11 }
     12 
     13 div {
     14  width: 100px;
     15  height: 100px;
     16 }
     17 
     18 main {
     19  display: flex;
     20  flex-direction: column;
     21 }
     22 
     23 .item1 {
     24  view-transition-name: auto;
     25 }
     26 
     27 .item2 {
     28  view-transition-name: match-element;
     29 }
     30 
     31 main.switch .item1 {
     32  order: 2;
     33 }
     34 
     35 .item1 {
     36  background: green;
     37 }
     38 
     39 .item2 {
     40  background: yellow;
     41  position: relative;
     42  left: 100px;
     43 }
     44 
     45 </style>
     46 
     47 <main>
     48  <div class="item item1"></div>
     49  <div class="item item2"></div>
     50 </main>
     51 
     52 <script>
     53  promise_test(async t => {
     54    await new Promise(resolve => requestAnimationFrame(() => resolve()));
     55    await document.startViewTransition(() => {
     56      document.querySelector("main").classList.add("switch");
     57    }).ready;
     58    const animations = document.documentElement.getAnimations({subtree: true});
     59    const pseudos = Array.from(new Set(animations.map(a => a.effect.pseudoElement)));
     60    const item1GeneratedName = pseudos[0].replace("::view-transition-group(", "").slice(0, -1);
     61    const item2GeneratedName = pseudos[3].replace("::view-transition-group(", "").slice(0, -1);
     62    assert_true(item1GeneratedName.startsWith("-ua-"), "Item 1 generated name starts with -ua-");
     63    assert_true(item2GeneratedName.startsWith("-ua-"), "Item 2 generated name starts with -ua-");
     64    assert_array_equals(pseudos,
     65      [
     66        `::view-transition-group(${item1GeneratedName})`,
     67        `::view-transition-old(${item1GeneratedName})`,
     68        `::view-transition-new(${item1GeneratedName})`,
     69        `::view-transition-group(${item2GeneratedName})`,
     70        `::view-transition-old(${item2GeneratedName})`,
     71        `::view-transition-new(${item2GeneratedName})`
     72      ], "Generated names should start with -ua- and pseudo-elements should be in tree order");
     73  }, "Generated view-transition-names should be prefixed with -ua- in script");
     74 </script>
     75 
     76 </body>