tor-browser

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

test_transitions_reversing_omta.html (3022B)

      1 <!doctype html>
      2 <html>
      3 <!--
      4 https://bugzilla.mozilla.org/show_bug.cgi?id=1859660
      5 -->
      6 <head>
      7  <meta charset=utf-8>
      8  <title>Test for bug 1859660</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 10s linear;
     19      translate: 50px;
     20    }
     21  </style>
     22 </head>
     23 <body>
     24 <div id="target"></div>
     25 <script>
     26 'use strict';
     27 
     28 SimpleTest.waitForExplicitFinish();
     29 
     30 const OMTAPrefKey = 'layers.offmainthreadcomposition.async-animations';
     31 const omtaEnabled =
     32  SpecialPowers.DOMWindowUtils.layerManagerRemote &&
     33  SpecialPowers.getBoolPref(OMTAPrefKey);
     34 
     35 function waitForAnimationFrames(aFrameCount) {
     36  const timeAtStart = window.document.timeline.currentTime;
     37  return new Promise(function (resolve, reject) {
     38    function handleFrame() {
     39      if (
     40        timeAtStart != window.document.timeline.currentTime &&
     41        --aFrameCount <= 0
     42      ) {
     43        resolve();
     44      } else {
     45        window.requestAnimationFrame(handleFrame); // wait another frame
     46      }
     47    }
     48    window.requestAnimationFrame(handleFrame);
     49  });
     50 }
     51 
     52 window.addEventListener('load', async function() {
     53  if (!omtaEnabled) {
     54    ok(true, 'Skipping the test since OMTA is disabled');
     55    SimpleTest.finish();
     56    return;
     57  }
     58 
     59  const div = document.getElementById('target');
     60 
     61  // Start first transition.
     62  div.style.translate = '400px';
     63  const firstTransition = div.getAnimations()[0];
     64 
     65  // Wait for the transition to start running on the main thread and
     66  // compositor.
     67  await firstTransition.ready;
     68  await waitForPaints();
     69  // Wait for a while to let the transition run a little bit on the compositor.
     70  // Note that we throttle the transition so we don't compose its transition
     71  // rule on the main thread. In general, we only compose the transition on the
     72  // main thread once after creating the transition, so its value could be 1px
     73  // (equal to its start value) now.
     74  await waitForAnimationFrames(20);
     75 
     76  // Start second transition, which is a reversing transition from the current
     77  // value to `translate: 1px`. Note that the current value shouldn't be 1px;
     78  // otherwise, there is no transition.
     79  div.style.translate = '';
     80  const secondTransitions = div.getAnimations();
     81 
     82  ok(secondTransitions.length == 1, "should have a reversing transition");
     83  if (secondTransitions.length == 1) {
     84    await secondTransitions[0].ready;
     85    await waitForPaints();
     86    await waitForAnimationFrames(2);
     87 
     88    let matrix = SpecialPowers.DOMWindowUtils.getOMTAStyle(div, "translate");
     89    ok(!matricesRoughlyEqual(convertTo3dMatrix(matrix),
     90                             convertTo3dMatrix("matrix(1, 0, 0, 1, 50, 0)")),
     91       "translate is set on compositor thread after reversing");
     92  }
     93 
     94  SimpleTest.finish();
     95 });
     96 
     97 </script>
     98 </body>
     99 </html>