tor-browser

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

event-pseudo-name.html (2014B)

      1 <!DOCTYPE html>
      2 <title>View transitions: event pseudo name</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
      4 <link rel="author" href="mailto:vmpstr@chromium.org">
      5 
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 
      9 <style>
     10 :root { view-transition-name: none; }
     11 #first {
     12  background: blue;
     13  width: 100px;
     14  height: 100px;
     15  view-transition-name: shared;
     16 }
     17 
     18 html::view-transition-group(*),
     19 html::view-transition-image-pair(*),
     20 html::view-transition-new(*),
     21 html::view-transition-old(*) {
     22  animation-duration: 600s;
     23 }
     24 
     25 @keyframes fade-in {
     26  from { opacity: 0; }
     27 }
     28 html::view-transition-image-pair(*) {
     29  animation: fade-in 600s both;
     30 }
     31 
     32 </style>
     33 <div id=first></div>
     34 <script>
     35 async_test(t => {
     36  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
     37  let groupAnimationCount = 0;
     38  let oldAnimationCount = 0;
     39  let newAnimationCount = 0;
     40  let wrapperAnimationCount = 0;
     41 
     42  document.documentElement.addEventListener("animationstart", (e) => {
     43    let pseudo = e.pseudoElement;
     44    if (pseudo == "::view-transition-group(shared)") {
     45      groupAnimationCount++;
     46    } else if (pseudo == "::view-transition-new(shared)") {
     47      newAnimationCount++;
     48    } else if (pseudo == "::view-transition-old(shared)") {
     49      oldAnimationCount++;
     50    } else if (pseudo = "::view-transition-image-pair(shared)") {
     51      wrapperAnimationCount++;
     52    }
     53 
     54    let total =
     55      groupAnimationCount + oldAnimationCount + newAnimationCount + wrapperAnimationCount;
     56    // Old/new images have 2 animations : opacity and mix-blend-mode.
     57    if (total == 6) {
     58      t.step(() => assert_equals(groupAnimationCount, 1));
     59      t.step(() => assert_equals(wrapperAnimationCount, 1));
     60      t.step(() => assert_equals(oldAnimationCount, 2));
     61      t.step(() => assert_equals(newAnimationCount, 2));
     62      t.done();
     63    }
     64  });
     65  document.startViewTransition();
     66 }, "verifies pseudo name includes a tag");
     67 
     68 </script>