tor-browser

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

effect-value-replaced-animations.html (3996B)

      1 <!doctype html>
      2 <meta charset=utf-8>
      3 <title>The effect value of a keyframe effect: Overlapping keyframes</title>
      4 <link rel="help" href="https://drafts.csswg.org/web-animations/#the-effect-value-of-a-keyframe-animation-effect">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <script src="../../testcommon.js"></script>
      8 <body>
      9 <div id="log"></div>
     10 <script>
     11 'use strict';
     12 
     13 function assert_opacity_value(opacity, expected, description) {
     14  return assert_approx_equals(
     15    parseFloat(opacity),
     16    expected,
     17    0.0001,
     18    description
     19  );
     20 }
     21 
     22 promise_test(async t => {
     23  const div = createDiv(t);
     24  div.style.opacity = '0.1';
     25 
     26  const animA = div.animate(
     27    { opacity: 0.2 },
     28    { duration: 1, fill: 'forwards' }
     29  );
     30  const animB = div.animate(
     31    { opacity: 0.3 },
     32    { duration: 1, fill: 'forwards' }
     33  );
     34  await animA.finished;
     35 
     36  // Sanity check
     37  assert_equals(animA.replaceState, 'removed');
     38  assert_equals(animB.replaceState, 'active');
     39 
     40  // animA is now removed so if we cancel animB, we should go back to the
     41  // underlying value
     42  animB.cancel();
     43  assert_opacity_value(
     44    getComputedStyle(div).opacity,
     45    0.1,
     46    'Opacity should be the un-animated value'
     47  );
     48 }, 'Removed animations do not contribute to animated style');
     49 
     50 promise_test(async t => {
     51  const div = createDiv(t);
     52  div.style.opacity = '0.1';
     53 
     54  const animA = div.animate(
     55    { opacity: 0.2 },
     56    { duration: 1, fill: 'forwards' }
     57  );
     58  const animB = div.animate(
     59    { opacity: 0.3, composite: 'add' },
     60    { duration: 1, fill: 'forwards' }
     61  );
     62  await animA.finished;
     63 
     64  // Sanity check
     65  assert_equals(animA.replaceState, 'removed');
     66  assert_equals(animB.replaceState, 'active');
     67 
     68  // animA has been removed so the final result should be 0.1 + 0.3 = 0.4.
     69  // (If animA were not removed it would be 0.2 + 0.3 = 0.5.)
     70  assert_opacity_value(
     71    getComputedStyle(div).opacity,
     72    0.4,
     73    'Opacity value should not include the removed animation'
     74  );
     75 }, 'Removed animations do not contribute to the effect stack');
     76 
     77 promise_test(async t => {
     78  const div = createDiv(t);
     79  div.style.opacity = '0.1';
     80 
     81  const animA = div.animate(
     82    { opacity: 0.2 },
     83    { duration: 1, fill: 'forwards' }
     84  );
     85  const animB = div.animate(
     86    { opacity: 0.3 },
     87    { duration: 1, fill: 'forwards' }
     88  );
     89 
     90  await animA.finished;
     91 
     92  animA.persist();
     93 
     94  animB.cancel();
     95  assert_opacity_value(
     96    getComputedStyle(div).opacity,
     97    0.2,
     98    "Opacity should be the persisted animation's value"
     99  );
    100 }, 'Persisted animations contribute to animated style');
    101 
    102 promise_test(async t => {
    103  const div = createDiv(t);
    104  div.style.opacity = '0.1';
    105 
    106  const animA = div.animate(
    107    { opacity: 0.2 },
    108    { duration: 1, fill: 'forwards' }
    109  );
    110  const animB = div.animate(
    111    { opacity: 0.3, composite: 'add' },
    112    { duration: 1, fill: 'forwards' }
    113  );
    114 
    115  await animA.finished;
    116 
    117  assert_opacity_value(
    118    getComputedStyle(div).opacity,
    119    0.4,
    120    'Opacity value should NOT include the contribution of the removed animation'
    121  );
    122 
    123  animA.persist();
    124 
    125  assert_opacity_value(
    126    getComputedStyle(div).opacity,
    127    0.5,
    128    'Opacity value should include the contribution of the persisted animation'
    129  );
    130 }, 'Persisted animations contribute to the effect stack');
    131 
    132 promise_test(async t => {
    133  const div = createDiv(t);
    134  div.style.opacity = '0.1';
    135 
    136  const animA = div.animate(
    137    { opacity: 0.2 },
    138    { duration: 1, fill: 'forwards' }
    139  );
    140 
    141  // Persist the animation before it finishes (and before it would otherwise be
    142  // removed).
    143  animA.persist();
    144 
    145  const animB = div.animate(
    146    { opacity: 0.3, composite: 'add' },
    147    { duration: 1, fill: 'forwards' }
    148  );
    149 
    150  await animA.finished;
    151 
    152  assert_opacity_value(
    153    getComputedStyle(div).opacity,
    154    0.5,
    155    'Opacity value should include the contribution of the persisted animation'
    156  );
    157 }, 'Animations persisted before they would be removed contribute to the'
    158   + ' effect stack');
    159 
    160 </script>
    161 </body>