tor-browser

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

test_style_after_finished_on_compositor.html (4726B)

      1 <!doctype html>
      2 <head>
      3 <meta charset=utf-8>
      4 <title>Test for styles after finished on the compositor</title>
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <script src="../testcommon.js"></script>
      8 <style>
      9 .compositor {
     10  /* Element needs geometry to be eligible for layerization */
     11  width: 100px;
     12  height: 100px;
     13  background-color: green;
     14 }
     15 </style>
     16 </head>
     17 <body>
     18 <div id="log"></div>
     19 <script>
     20 "use strict";
     21 
     22 promise_test(async t => {
     23  const div = addDiv(t, { 'class': 'compositor' });
     24  const anim = div.animate([ { offset: 0, opacity: 1 },
     25                             { offset: 1, opacity: 0 } ],
     26                           { delay: 10,
     27                             duration: 100 });
     28 
     29  await anim.finished;
     30 
     31  await waitForNextFrame();
     32 
     33  const opacity = SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'opacity');
     34 
     35  assert_equals(opacity, '', 'No opacity animation runs on the compositor');
     36 }, 'Opacity animation with positive delay is removed from compositor when ' +
     37   'finished');
     38 
     39 promise_test(async t => {
     40  const div = addDiv(t, { 'class': 'compositor' });
     41  const anim = div.animate([ { offset: 0,   opacity: 1 },
     42                             { offset: 0.9, opacity: 1 },
     43                             { offset: 1,   opacity: 0 } ],
     44                           { duration: 100 });
     45 
     46  await anim.finished;
     47 
     48  await waitForNextFrame();
     49 
     50  const opacity = SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'opacity');
     51 
     52  assert_equals(opacity, '', 'No opacity animation runs on the compositor');
     53 }, 'Opacity animation initially opacity: 1 is removed from compositor when ' +
     54   'finished');
     55 
     56 promise_test(async t => {
     57  const div = addDiv(t, { 'class': 'compositor' });
     58  const anim = div.animate([ { offset: 0,    opacity: 0 },
     59                             { offset: 0.5,  opacity: 1 },
     60                             { offset: 0.51, opacity: 1 },
     61                             { offset: 1,    opacity: 0 } ],
     62                           { delay: 10, duration: 100 });
     63 
     64  await waitForAnimationFrames(2);
     65 
     66  // Setting the current time at the offset generating opacity: 1.
     67  anim.currentTime = 60;
     68 
     69  await anim.finished;
     70 
     71  await waitForNextFrame();
     72 
     73  const opacity = SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'opacity');
     74 
     75  assert_equals(opacity, '', 'No opacity animation runs on the compositor');
     76 }, 'Opacity animation is removed from compositor even when it only visits ' +
     77   'exactly the point where the opacity: 1 value was set');
     78 
     79 promise_test(async t => {
     80  const div = addDiv(t, { 'class': 'compositor' });
     81  const anim = div.animate([ { offset: 0, transform: 'none' },
     82                             { offset: 1, transform: 'translateX(100px)' } ],
     83                           { delay: 10,
     84                             duration: 100 });
     85 
     86  await anim.finished;
     87 
     88  await waitForNextFrame();
     89 
     90  const transform = SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'transform');
     91 
     92  assert_equals(transform, '', 'No transform animation runs on the compositor');
     93 }, 'Transform animation with positive delay is removed from compositor when ' +
     94   'finished');
     95 
     96 promise_test(async t => {
     97  const div = addDiv(t, { 'class': 'compositor' });
     98  const anim = div.animate([ { offset: 0,   transform: 'none' },
     99                             { offset: 0.9, transform: 'none' },
    100                             { offset: 1,   transform: 'translateX(100px)' } ],
    101                           { duration: 100 });
    102 
    103  await anim.finished;
    104 
    105  await waitForNextFrame();
    106 
    107  const transform = SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'transform');
    108 
    109  assert_equals(transform, '', 'No transform animation runs on the compositor');
    110 }, 'Transform animation initially transform: none is removed from compositor ' +
    111   'when finished');
    112 
    113 
    114 promise_test(async t => {
    115  const div = addDiv(t, { 'class': 'compositor' });
    116  const anim = div.animate([ { offset: 0,   transform: 'translateX(100px)' },
    117                             { offset: 0.5, transform: 'none' },
    118                             { offset: 0.9, transform: 'none' },
    119                             { offset: 1,   transform: 'translateX(100px)' } ],
    120                           { delay: 10, duration: 100 });
    121 
    122  await waitForAnimationFrames(2);
    123 
    124  // Setting the current time at the offset generating transform: none.
    125  anim.currentTime = 60;
    126 
    127  await anim.finished;
    128 
    129  await waitForNextFrame();
    130 
    131  const transform = SpecialPowers.DOMWindowUtils.getOMTAStyle(div, 'transform');
    132 
    133  assert_equals(transform, '', 'No transform animation runs on the compositor');
    134 }, 'Transform animation is removed from compositor even when it only visits ' +
    135   'exactly the point where the transform: none value was set');
    136 
    137 </script>
    138 </body>