tor-browser

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

test_transitions_replacement_on_busy_frame_omta.html (3389B)

      1 <!doctype html>
      2 <html>
      3 <!--
      4 https://bugzilla.mozilla.org/show_bug.cgi?id=1626165
      5 -->
      6 <head>
      7  <meta charset=utf-8>
      8  <title>Test for bug 1626165</title>
      9  <script src="/tests/SimpleTest/SimpleTest.js"></script>
     10  <script src="/tests/SimpleTest/paint_listener.js"></script>
     11  <script src="animation_utils.js"></script>
     12  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
     13  <style>
     14    #target {
     15      height: 100px;
     16      width: 100px;
     17      background: green;
     18      transition: translate 2s steps(2, start);
     19    }
     20  </style>
     21 </head>
     22 <body>
     23 <div id="target"></div>
     24 <script>
     25 'use strict';
     26 
     27 SimpleTest.waitForExplicitFinish();
     28 
     29 const OMTAPrefKey = 'layers.offmainthreadcomposition.async-animations';
     30 const omtaEnabled =
     31  SpecialPowers.DOMWindowUtils.layerManagerRemote &&
     32  SpecialPowers.getBoolPref(OMTAPrefKey);
     33 
     34 function waitForAnimationFrames(aFrameCount) {
     35  const timeAtStart = window.document.timeline.currentTime;
     36  return new Promise(function (resolve, reject) {
     37    function handleFrame() {
     38      if (
     39        timeAtStart != window.document.timeline.currentTime &&
     40        --aFrameCount <= 0
     41      ) {
     42        resolve();
     43      } else {
     44        window.requestAnimationFrame(handleFrame); // wait another frame
     45      }
     46    }
     47    window.requestAnimationFrame(handleFrame);
     48  });
     49 }
     50 
     51 window.addEventListener('load', async function() {
     52  if (!omtaEnabled) {
     53    ok(true, 'Skipping the test since OMTA is disabled');
     54    SimpleTest.finish();
     55    return;
     56  }
     57 
     58  try {
     59    await isOMTAWorking();
     60  } catch (error) {
     61    ok(true, 'Skipping the test since OMTA may have issues');
     62    SimpleTest.finish();
     63    return;
     64  }
     65 
     66  const div = document.getElementById('target');
     67 
     68  // Start first transition
     69  div.style.translate = '400px';
     70  const firstTransition = div.getAnimations()[0];
     71 
     72  // Wait for first transition to start running on the main thread and
     73  // compositor.
     74  await firstTransition.ready;
     75  await waitForPaintsFlushed();
     76 
     77  // Wait for some frames to make sure we have OMTA style there, to avoid the
     78  // possible intermittent (on Android especially).
     79  await waitForAnimationFrames(10);
     80 
     81  // We create a transition from 0px to 400px, so the current value is 200px
     82  // (i.e. 50%).
     83  let matrix = SpecialPowers.DOMWindowUtils.getOMTAStyle(div, "translate");
     84  ok(matricesRoughlyEqual(convertTo3dMatrix(matrix),
     85                          convertTo3dMatrix("matrix(1, 0, 0, 1, 200, 0)")),
     86    "The current value of the 1st transition after ready");
     87 
     88  // Start second transition
     89  div.style.translate = '600px';
     90  const secondTransition = div.getAnimations()[0];
     91 
     92  // Tie up main thread for 1200ms. In the meantime, the first transition
     93  // will continue running on the compositor. If we don't update the start
     94  // point of the second transition, it will appear to jump when it starts.
     95  const startTime = performance.now();
     96  while (performance.now() - startTime < 1200);
     97 
     98  await waitForPaintsFlushed();
     99 
    100  // We should create a transition from 400px to 600px, so the final current
    101  // value is 500px (i.e. 50%).
    102  matrix = SpecialPowers.DOMWindowUtils.getOMTAStyle(div, "translate");
    103  ok(matricesRoughlyEqual(convertTo3dMatrix(matrix),
    104                          convertTo3dMatrix("matrix(1, 0, 0, 1, 500, 0)")),
    105    "The current value of the 2nd transition after replacing the start value");
    106 
    107  SimpleTest.finish();
    108 });
    109 
    110 </script>
    111 </body>
    112 </html>