tor-browser

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

test_missing-keyframe.html (4514B)

      1 <!doctype html>
      2 <meta charset=utf-8>
      3 <script src="/resources/testharness.js"></script>
      4 <script src="/resources/testharnessreport.js"></script>
      5 <script src="../testcommon.js"></script>
      6 <body>
      7 <div id="log"></div>
      8 <script>
      9 'use strict';
     10 
     11 test(t => {
     12  var div = addDiv(t, { style: 'margin-left: 100px' });
     13  div.animate([{ marginLeft: '200px' }], 100 * MS_PER_SEC);
     14 
     15  assert_equals(getComputedStyle(div).marginLeft, '100px',
     16                'The initial margin-left value should be the base value');
     17 }, 'Initial margin-left value for an animation with no keyframe at offset 0');
     18 
     19 test(t => {
     20  var div = addDiv(t, { style: 'margin-left: 100px' });
     21  div.animate([{ offset: 0, marginLeft: '200px' },
     22               { offset: 1, marginLeft: '300px' }],
     23              100 * MS_PER_SEC);
     24  div.animate([{ marginLeft: '200px' }], 100 * MS_PER_SEC);
     25 
     26  assert_equals(getComputedStyle(div).marginLeft, '200px',
     27                'The initial margin-left value should be the initial value ' +
     28                'of lower-priority animation');
     29 }, 'Initial margin-left value for an animation with no keyframe at offset 0 ' +
     30   'is that of lower-priority animations');
     31 
     32 test(t => {
     33  var div = addDiv(t, { style: 'margin-left: 100px;' +
     34                               'transition: margin-left 100s -50s linear'});
     35  flushComputedStyle(div);
     36 
     37  div.style.marginLeft = '200px';
     38  flushComputedStyle(div);
     39 
     40  div.animate([{ marginLeft: '300px' }], 100 * MS_PER_SEC);
     41 
     42  assert_equals(getComputedStyle(div).marginLeft, '150px',
     43                'The initial margin-left value should be the initial value ' +
     44                'of the transition');
     45 }, 'Initial margin-left value for an animation with no keyframe at offset 0 ' +
     46   'is that of transition');
     47 
     48 test(t => {
     49  var div = addDiv(t, { style: 'margin-left: 100px' });
     50  var animation = div.animate([{ offset: 0, marginLeft: '200px' }],
     51                              100 * MS_PER_SEC);
     52 
     53  animation.currentTime = 50 * MS_PER_SEC;
     54  assert_equals(getComputedStyle(div).marginLeft, '150px',
     55                'The margin-left value at 50% should be the base value');
     56 }, 'margin-left value at 50% for an animation with no keyframe at offset 1');
     57 
     58 test(t => {
     59  var div = addDiv(t, { style: 'margin-left: 100px' });
     60  var lowerAnimation = div.animate([{ offset: 0, marginLeft: '200px' },
     61                                    { offset: 1, marginLeft: '300px' }],
     62                                   100 * MS_PER_SEC);
     63  var higherAnimation = div.animate([{ offset: 0, marginLeft: '400px' }],
     64                                    100 * MS_PER_SEC);
     65 
     66  lowerAnimation.currentTime = 50 * MS_PER_SEC;
     67  higherAnimation.currentTime = 50 * MS_PER_SEC;
     68                                                 // (250px + 400px) * 0.5
     69  assert_equals(getComputedStyle(div).marginLeft, '325px',
     70                'The margin-left value at 50% should be additive value of ' +
     71                'lower-priority animation and higher-priority animation');
     72 }, 'margin-left value at 50% for an animation with no keyframe at offset 1 ' +
     73   'is that of lower-priority animations');
     74 
     75 test(t => {
     76  var div = addDiv(t, { style: 'margin-left: 100px;' +
     77                               'transition: margin-left 100s linear' });
     78  flushComputedStyle(div);
     79 
     80  div.style.marginLeft = '300px';
     81  flushComputedStyle(div);
     82 
     83  div.animate([{ offset: 0, marginLeft: '200px' }], 100 * MS_PER_SEC);
     84 
     85  div.getAnimations().forEach(animation => {
     86    animation.currentTime = 50 * MS_PER_SEC;
     87  });
     88                                                 // (200px + 200px) * 0.5
     89  assert_equals(getComputedStyle(div).marginLeft, '200px',
     90                'The margin-left value at 50% should be additive value of ' +
     91                'the transition and animation');
     92 }, 'margin-left value at 50% for an animation with no keyframe at offset 1 ' +
     93   'is that of transition');
     94 
     95 test(t => {
     96  var div = addDiv(t, { style: 'margin-left: 100px' });
     97 
     98  var animation = div.animate([{ offset: 0, marginLeft: '200px' }],
     99                              { duration: 100 * MS_PER_SEC,
    100                                iterationStart: 1,
    101                                iterationComposite: 'accumulate' });
    102 
    103  assert_equals(getComputedStyle(div).marginLeft, '300px',
    104                'The margin-left value should be additive value of the ' +
    105                'accumulation of the initial value onto the base value ');
    106 }, 'margin-left value for an animation with no keyframe at offset 1 and its ' +
    107   'iterationComposite is accumulate');
    108 
    109 </script>
    110 </body>