tor-browser

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

CSSTransition-startTime.tentative.html (3671B)

      1 <!doctype html>
      2 <meta charset=utf-8>
      3 <title>CSSTransition.startTime</title>
      4 <!-- TODO: Add a more specific link for this once it is specified. -->
      5 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition">
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 <script src="support/helper.js"></script>
      9 <div id="log"></div>
     10 <script>
     11 
     12 'use strict';
     13 
     14 test(t => {
     15  const div = addDiv(t, {
     16    style: 'margin-left: 100px; transition: margin-left 100s linear 100s',
     17  });
     18  getComputedStyle(div).marginLeft;
     19  div.style.marginLeft = '200px';
     20  const animation = div.getAnimations()[0];
     21 
     22  assert_equals(animation.startTime, null, 'startTime is unresolved');
     23 }, 'The start time of a newly-created transition is unresolved');
     24 
     25 promise_test(async t => {
     26  const div = addDiv(t);
     27 
     28  div.style.left = '0px';
     29  div.style.top = '0px';
     30  getComputedStyle(div).transitionProperty;
     31 
     32  div.style.transition = 'all 100s';
     33  div.style.left = '100px';
     34  div.style.top = '100px';
     35 
     36  let animations = div.getAnimations();
     37  assert_equals(animations.length, 2);
     38  await waitForAllAnimations(animations);
     39 
     40  assert_equals(animations[0].startTime, animations[1].startTime,
     41    'CSS transitions started together have the same start time');
     42 
     43  await waitForAnimationFrames(1);
     44 
     45  div.style.backgroundColor = 'green';
     46 
     47  animations = div.getAnimations();
     48  assert_equals(animations.length, 3);
     49  await waitForAllAnimations(animations);
     50 
     51  assert_less_than(animations[1].startTime, animations[2].startTime,
     52    'A CSS transition added in a later frame has a later start time');
     53 }, 'The start time of transitions is based on when they are generated');
     54 
     55 test(t => {
     56  const div = addDiv(t, {
     57    style: 'margin-left: 100px; transition: margin-left 100s linear 100s',
     58  });
     59  getComputedStyle(div).marginLeft;
     60  div.style.marginLeft = '200px';
     61  const animation = div.getAnimations()[0];
     62 
     63  const timelineTime = animation.timeline.currentTime;
     64  animation.startTime = timelineTime;
     65 
     66  assert_times_equal(
     67    animation.startTime,
     68    timelineTime,
     69    'Check setting of startTime actually works'
     70  );
     71 }, 'The start time of a transition can be set');
     72 
     73 promise_test(async t => {
     74  const div = addDiv(t, {
     75    style: 'margin-left: 100px; transition: margin-left 100s linear 100s',
     76  });
     77  getComputedStyle(div).marginLeft;
     78  div.style.marginLeft = '200px';
     79  const animation = div.getAnimations()[0];
     80 
     81  await animation.ready;
     82 
     83  const timelineTime = animation.timeline.currentTime;
     84  const marginLeft = () => parseFloat(getComputedStyle(div).marginLeft);
     85 
     86  animation.startTime = timelineTime - 100 * MS_PER_SEC;
     87  assert_equals(marginLeft(), 100);
     88 
     89  animation.startTime = timelineTime - 150 * MS_PER_SEC;
     90  assert_equals(marginLeft(), 150);
     91 }, 'The start time can be set to seek a transition');
     92 
     93 promise_test(async t => {
     94  const div = addDiv(t, {
     95    style: 'margin-left: 100px; transition: margin-left 100s linear 100s',
     96  });
     97  const eventWatcher = new EventWatcher(t, div, [
     98    'transitionstart',
     99    'transitionend',
    100  ]);
    101  getComputedStyle(div).marginLeft;
    102  div.style.marginLeft = '200px';
    103  const animation = div.getAnimations()[0];
    104 
    105  await animation.ready;
    106 
    107  const timelineTime = animation.timeline.currentTime;
    108 
    109  animation.startTime = timelineTime - 100 * MS_PER_SEC;
    110  await frameTimeout(
    111    eventWatcher.wait_for('transitionstart'),
    112    2,
    113    'transitionstart'
    114  );
    115 
    116  animation.startTime = timelineTime - 200 * MS_PER_SEC;
    117  await frameTimeout(
    118    eventWatcher.wait_for('transitionend'),
    119    2,
    120    'transitionend'
    121  );
    122 }, 'Seeking a transition using start time dispatches transition events');
    123 
    124 </script>