Quelle test_transitions_reversing_omta.html Sprache: HTML

products/Sources/formale Sprachen/C/Firefox/layout/style/test/test_transitions_reversing_omta.html

<!doctype html>
<html>

<head>
  <meta charset=utf-8>
  <title>Test for bug 1859660</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script src="/tests/SimpleTest/paint_listener.js"></script>
  <script src="animation_utils.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
  <style>
    #target {
      height: 100px;
      width: 100px;
      background: green;
      transition: translate 10s linear;
      translate: 50px;
    }
  </style>
</head>
<body>
<div id="target"></div>
<script>
'use strict';

SimpleTest.waitForExplicitFinish();

const OMTAPrefKey = 'layers.offmainthreadcomposition.async-animations';
const omtaEnabled =
  SpecialPowers.DOMWindowUtils.layerManagerRemote &&
  SpecialPowers.getBoolPref(OMTAPrefKey);

function waitForAnimationFrames(aFrameCount) {
  const timeAtStart = window.document.timeline.currentTime;
  return new Promise(function (resolve, reject) {
    function handleFrame() {
      if (
        timeAtStart != window.document.timeline.currentTime &&
        --aFrameCount <= 0
      ) {
        resolve();
      } else {
        window.requestAnimationFrame(handleFrame); // wait another frame
      }
    }
    window.requestAnimationFrame(handleFrame);
  });
}

window.addEventListener('load', async function() {
  if (!omtaEnabled) {
    ok(true, 'Skipping the test since OMTA is disabled');
    SimpleTest.finish();
    return;
  }

  const div = document.getElementById('target');

  // Start first transition.
  div.style.translate = '400px';
  const firstTransition = div.getAnimations()[0];

  // Wait for the transition to start running on the main thread and
  // compositor.
  await firstTransition.ready;
  await waitForPaints();
  // Wait for a while to let the transition run a little bit on the compositor.
  // Note that we throttle the transition so we don't compose its transition
  // rule on the main thread. In general, we only compose the transition on the
  // main thread once after creating the transition, so its value could be 1px
  // (equal to its start value) now.
  await waitForAnimationFrames(20);

  // Start second transition, which is a reversing transition from the current
  // value to `translate: 1px`. Note that the current value shouldn't be 1px;
  // otherwise, there is no transition.
  div.style.translate = '';
  const secondTransitions = div.getAnimations();

  ok(secondTransitions.length == 1, "should have a reversing transition");
  if (secondTransitions.length == 1) {
    await secondTransitions[0].ready;
    await waitForPaints();
    await waitForAnimationFrames(2);

    let matrix = SpecialPowers.DOMWindowUtils.getOMTAStyle(div, "translate");
    ok(!matricesRoughlyEqual(convertTo3dMatrix(matrix),
                             convertTo3dMatrix("matrix(1, 0, 0, 1, 50, 0)")),
       "translate is set on compositor thread after reversing");
  }

  SimpleTest.finish();
});

</script>
</body>
</html>

Messung V0.5

¤ Dauer der Verarbeitung: 0.3 Sekunden ¤

Wurzel

Suchen

Beweissystem der NASA

Beweissystem Isabelle

NIST Cobol Testsuite

Cephes Mathematical Library

Wiener Entwicklungsmethode

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.