tor-browser

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

view-timeline-subject-size-changes.html (2603B)

      1 <!DOCTYPE html>
      2 <html id="top">
      3 <meta charset="utf-8">
      4 <title>View timeline Subject size changes after creation of Animation</title>
      5 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#viewtimeline-interface">
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 <script src="/web-animations/testcommon.js"></script>
      9 <script src="/scroll-animations/scroll-timelines/testcommon.js"></script>
     10 <script src="/scroll-animations/view-timelines/testcommon.js"></script>
     11 <style>
     12  #container {
     13    border:  10px solid lightgray;
     14    overflow-y: scroll;
     15    height:  400px;
     16    width: 400px;
     17  }
     18  .spacer {
     19    height:  500px;
     20  }
     21  #target {
     22    background-color:  green;
     23    height:  100px;
     24    width:  100px;
     25  }
     26 </style>
     27 <body>
     28  <div id="container">
     29    <div class="spacer"></div>
     30    <div id="target"></div>
     31    <div class="spacer"></div>
     32  </div>
     33 </body>
     34 
     35 <script type="text/javascript">
     36 promise_test(async t => {
     37  const options = {
     38    timeline: { axis: 'y' },
     39    animation: {
     40      rangeStart: { rangeName: 'entry', offset: CSS.percent(0) },
     41      rangeEnd: { rangeName: 'entry', offset: CSS.percent(100) },
     42      // Set fill to accommodate floating point precision errors at the
     43      // endpoints.
     44      fill: 'both'
     45    }
     46  };
     47 
     48  container.scrollTop = 0;
     49  await waitForNextFrame();
     50 
     51  const anim = CreateViewTimelineOpacityAnimation(t, target, options);
     52  const timeline = anim.timeline;
     53  anim.effect.updateTiming(options.timing);
     54  await anim.ready;
     55 
     56  // Advance to the start offset, which triggers entry to the active phase.
     57  container.scrollTop = 100;
     58  await waitForNextFrame();
     59  assert_equals(getComputedStyle(target).opacity, '0.3',
     60                `Effect at the start of the active phase`);
     61 
     62  // Advance to the midpoint of the animation.
     63  container.scrollTop = 150;
     64  await waitForNextFrame();
     65  assert_equals(getComputedStyle(target).opacity,'0.5',
     66                `Effect at the midpoint of the active range`);
     67 
     68  // Since the height of the target is cut in half, the animation should be at the end now.
     69  target.style.height = '50px';
     70  await waitForNextFrame();
     71  assert_equals(getComputedStyle(target).opacity, '0.7',
     72                `Effect at the end of the active range`);
     73 
     74  // Advance to the midpoint of the animation again.
     75  container.scrollTop = 125;
     76  await waitForNextFrame();
     77  assert_equals(getComputedStyle(target).opacity,'0.5',
     78                `Effect at the midpoint of the active range again`);
     79 
     80  }, 'View timeline with subject size change after the creation of the animation');
     81 </script>