tor-browser

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

test_animation-seeking-with-current-time.html (4102B)

      1 <!doctype html>
      2 <html>
      3  <head>
      4    <meta charset=utf-8>
      5    <title>Tests for seeking using Animation.currentTime</title>
      6    <style>
      7 .animated-div {
      8  margin-left: -10px;
      9  animation-timing-function: linear ! important;
     10 }
     11 
     12 @keyframes anim {
     13  from { margin-left: 0px; }
     14  to { margin-left: 100px; }
     15 }
     16    </style>
     17    <script src="/resources/testharness.js"></script>
     18    <script src="/resources/testharnessreport.js"></script>
     19    <script src="../testcommon.js"></script>
     20  </head>
     21  <body>
     22    <div id="log"></div>
     23    <script type="text/javascript">
     24 'use strict';
     25 
     26 function assert_marginLeft_equals(target, expect, description) {
     27  var marginLeft = parseFloat(getComputedStyle(target).marginLeft);
     28  assert_equals(marginLeft, expect, description);
     29 }
     30 
     31 promise_test(function(t) {
     32  var div = addDiv(t, {'class': 'animated-div'});
     33  div.style.animation = "anim 100s";
     34  var animation = div.getAnimations()[0];
     35 
     36  return animation.ready.then(function() {
     37    animation.currentTime = 90 * MS_PER_SEC;
     38    assert_marginLeft_equals(div, 90,
     39      'Computed style is updated when seeking forwards in active interval');
     40 
     41    animation.currentTime = 10 * MS_PER_SEC;
     42    assert_marginLeft_equals(div, 10,
     43      'Computed style is updated when seeking backwards in active interval');
     44  });
     45 }, 'Seeking forwards and backward in active interval');
     46 
     47 promise_test(function(t) {
     48  var div = addDiv(t, {'class': 'animated-div'});
     49  div.style.animation = "anim 100s 100s";
     50  var animation = div.getAnimations()[0];
     51 
     52  return animation.ready.then(function() {
     53    assert_marginLeft_equals(div, -10,
     54      'Computed style is unaffected in before phase with no backwards fill');
     55 
     56    // before -> active (non-active -> active)
     57    animation.currentTime = 150 * MS_PER_SEC;
     58    assert_marginLeft_equals(div, 50,
     59      'Computed style is updated when seeking forwards from ' +
     60      'not \'in effect\' to \'in effect\' state');
     61  });
     62 }, 'Seeking to non-\'in effect\' from \'in effect\' (before -> active)');
     63 
     64 promise_test(function(t) {
     65  var div = addDiv(t, {'class': 'animated-div'});
     66  div.style.animation = "anim 100s 100s";
     67  var animation = div.getAnimations()[0];
     68 
     69  return animation.ready.then(function() {
     70    // move to after phase
     71    animation.currentTime = 250 * MS_PER_SEC;
     72    assert_marginLeft_equals(div, -10,
     73      'Computed style is unaffected in after phase with no forwards fill');
     74 
     75    // after -> active (non-active -> active)
     76    animation.currentTime = 150 * MS_PER_SEC;
     77    assert_marginLeft_equals(div, 50,
     78      'Computed style is updated when seeking backwards from ' +
     79      'not \'in effect\' to \'in effect\' state');
     80  });
     81 }, 'Seeking to non-\'in effect\' from \'in effect\' (after -> active)');
     82 
     83 promise_test(function(t) {
     84  var div = addDiv(t, {'class': 'animated-div'});
     85  div.style.animation = "anim 100s 100s";
     86  var animation = div.getAnimations()[0];
     87 
     88  return animation.ready.then(function() {
     89    // move to active phase
     90    animation.currentTime = 150 * MS_PER_SEC;
     91    assert_marginLeft_equals(div, 50,
     92      'Computed value is set during active phase');
     93 
     94    // active -> before
     95    animation.currentTime = 50 * MS_PER_SEC;
     96    assert_marginLeft_equals(div, -10,
     97      'Computed value is not effected after seeking backwards from ' +
     98      '\'in effect\' to not \'in effect\' state');
     99  });
    100 }, 'Seeking to \'in effect\' from non-\'in effect\' (active -> before)');
    101 
    102 promise_test(function(t) {
    103  var div = addDiv(t, {'class': 'animated-div'});
    104  div.style.animation = "anim 100s 100s";
    105  var animation = div.getAnimations()[0];
    106 
    107  return animation.ready.then(function() {
    108    // move to active phase
    109    animation.currentTime = 150 * MS_PER_SEC;
    110    assert_marginLeft_equals(div, 50,
    111      'Computed value is set during active phase');
    112 
    113    // active -> after
    114    animation.currentTime = 250 * MS_PER_SEC;
    115    assert_marginLeft_equals(div, -10,
    116      'Computed value is not affected after seeking forwards from ' +
    117      '\'in effect\' to not \'in effect\' state');
    118  });
    119 }, 'Seeking to \'in effect\' from non-\'in effect\' (active -> after)');
    120 
    121    </script>
    122  </body>
    123 </html>