tor-browser

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

dynamic-stylesheet-animations.html (3549B)

      1 <!DOCTYPE html>
      2 <html>
      3 <title>View transitions: Dynamic stylesheet sets correct animations</title>
      4 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
      5 <link rel="help" href="https://drafts.csswg.org/css-view-transitions/#setup-transition-pseudo-elements-algorithm">
      6 
      7 <style>
      8 :root { view-transition-name: none; }
      9 #target {
     10    view-transition-name: target;
     11    background: red;
     12    width: 100px;
     13    height: 100px;
     14 }
     15 html::view-transition-group(*) {
     16    animation-timing-function: steps(2, start);
     17    animation-play-state: paused;
     18 }
     19 html::view-transition-old(*),
     20 html::view-transition-new(*) {
     21    animation-play-state: paused;
     22 }
     23 </style>
     24 
     25 <div id="target"></div>
     26 
     27 <script src="/resources/testharness.js"></script>
     28 <script src="/resources/testharnessreport.js"></script>
     29 <script>
     30 promise_test(async () => {
     31    let vt = document.startViewTransition(() => {
     32        target.style.backgroundColor = "green";
     33    });
     34 
     35    await vt.ready;
     36 
     37    assert_equals(
     38        getComputedStyle(document.documentElement, "::view-transition-group(target)").animationName,
     39        "-ua-view-transition-group-anim-target",
     40        "Animation on group when there are 2 snapshots"
     41    );
     42 
     43    assert_equals(
     44        getComputedStyle(document.documentElement, "::view-transition-old(target)").animationName,
     45        "-ua-view-transition-fade-out, -ua-mix-blend-mode-plus-lighter",
     46        "Two animations when there are 2 snapshots"
     47    );
     48 
     49    assert_equals(
     50        getComputedStyle(document.documentElement, "::view-transition-new(target)").animationName,
     51        "-ua-view-transition-fade-in, -ua-mix-blend-mode-plus-lighter",
     52        "Two animations when there are 2 snapshots"
     53    );
     54    await vt.skipTransition();
     55 }, "Both old and new snapshots");
     56 
     57 promise_test(async () => {
     58    let vt = await document.startViewTransition(() => {
     59        target.remove();
     60    });
     61 
     62    await vt.ready;
     63 
     64    assert_equals(
     65        getComputedStyle(document.documentElement, "::view-transition-group(target)").animationName,
     66        "none",
     67        "No animation on group when one snapshot is missing"
     68    );
     69 
     70    assert_equals(
     71        getComputedStyle(document.documentElement, "::view-transition-old(target)").animationName,
     72        "-ua-view-transition-fade-out",
     73        "Only one animation for old snapshot when new snapshot is missing"
     74    );
     75 
     76    assert_equals(
     77        getComputedStyle(document.documentElement, "::view-transition-new(target)").animationName,
     78        "none",
     79        "No animation since the snapshot is not generated"
     80    );
     81 
     82    await vt.skipTransition();
     83 }, "Only old snapshot");
     84 
     85 promise_test(async () => {
     86    let vt = await document.startViewTransition(() => {
     87        const div = document.createElement("div");
     88        div.id = "target";
     89        document.body.append(div);
     90    });
     91 
     92    await vt.ready;
     93 
     94    assert_equals(
     95        getComputedStyle(document.documentElement, "::view-transition-group(target)").animationName,
     96        "none",
     97        "No animation on group when one snapshot is missing"
     98    );
     99 
    100    assert_equals(
    101        getComputedStyle(document.documentElement, "::view-transition-old(target)").animationName,
    102        "none",
    103        "No animation since the snapshot is not generated"
    104    );
    105 
    106    assert_equals(
    107        getComputedStyle(document.documentElement, "::view-transition-new(target)").animationName,
    108        "-ua-view-transition-fade-in",
    109        "Only one animation for new snapshot when old snapshot is missing"
    110    );
    111    await vt.skipTransition();
    112 }, "Only new snapshot");
    113 </script>
    114 
    115 </body>
    116 </html>