tor-browser

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

mix-blend-mode-only-on-transition.html (3114B)

      1 <!DOCTYPE html>
      2 <html>
      3 <title>view-transitions: Blend modes are set up only in paired transitions</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
      5 <link rel="author" href="mailto:vmpstr@chromium.org">
      6 
      7 <script src="/resources/testharness.js"></script>
      8 <script src="/resources/testharnessreport.js"></script>
      9 
     10 <style>
     11 div {
     12  width: 100px;
     13  height: 100px;
     14  background: blue;
     15  contain: paint;
     16 }
     17 .tagone { view-transition-name: one }
     18 .tagtwo { view-transition-name: two }
     19 .tagthree { view-transition-name: three }
     20 .tagfour { view-transition-name: four }
     21 .tagfive { view-transition-name: five }
     22 
     23 ::view-transition-old(four) {
     24  animation-name: unset;
     25 }
     26 ::view-transition-new(five) {
     27  animation-name: unset;
     28 }
     29 </style>
     30 
     31 <div id=first class=tagone></div>
     32 <div id=second></div>
     33 <div class=tagthree></div>
     34 <div class=tagfour></div>
     35 <div class=tagfive></div>
     36 
     37 <script>
     38 async_test(t => {
     39  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
     40  let transition = document.startViewTransition(() => {
     41    first.classList.toggle("tagone");
     42    second.classList.toggle("tagtwo");
     43    requestAnimationFrame(() => {
     44      requestAnimationFrame(() => {
     45        t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(one)").isolation, "auto"));
     46        t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(one)").mixBlendMode, "normal"));
     47 
     48        t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(two)").isolation, "auto"));
     49        t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-new(two)").mixBlendMode, "normal"));
     50 
     51        t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(three)").isolation, "isolate"));
     52        t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(three)").mixBlendMode, "plus-lighter"));
     53        t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-new(three)").mixBlendMode, "plus-lighter"));
     54 
     55        t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(four)").isolation, "isolate"));
     56        t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(four)").mixBlendMode, "normal"));
     57        t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-new(four)").mixBlendMode, "plus-lighter"));
     58 
     59        t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(five)").isolation, "isolate"));
     60        t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(five)").mixBlendMode, "plus-lighter"));
     61        t.step(() => assert_equals(getComputedStyle(document.documentElement, "::view-transition-new(five)").mixBlendMode, "normal"));
     62        t.done();
     63      });
     64    });
     65  });
     66 }, "Blend modes are set up on paired transitions");
     67 </script>