Quelle test_scroll_behavior.html Sprache: HTML

products/Sources/formale Sprachen/C/Firefox/layout/generic/test/test_scroll_behavior.html

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>Tests for CSSOM-View Smooth-Scroll DOM API Methods and MSD Animation</title>
  <style>
    #scroll_behavior_test_body {
      width: 100000px;
      height: 100000px;
    }
    .scroll_to_target {
      position: absolute;
      left: 20000px;
      top: 10000px;
      width: 200px;
      height: 200px;
      background-color: rgb(0, 0, 255);
    }
  </style>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script src="/tests/SimpleTest/paint_listener.js"></script>
  <script src="/tests/gfx/layers/apz/test/mochitest/apz_test_utils.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  <script type="application/javascript">

  SimpleTest.waitForExplicitFinish();

  function clamp(val, minVal, maxVal) {
    return Math.max(minVal, Math.min(maxVal, val));
  }

  window.addEventListener("load", async function(event) {
    if (event.target != document) {
      return;
    }
    await testScrollBehaviorInterruption();
    await testScrollBehaviorFramerate();
    window.scrollTo(0,0);
    SimpleTest.finish();
  });

  async function testScrollBehaviorInterruption() {
    // Take control of refresh driver
    SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(0);
    await promiseApzFlushedRepaints();

    window.scrollTo(10, 9);
    ok(window.scrollX == 10 && window.scrollY == 9,
      "instant scroll-behavior must be synchronous when setting initial position");

    window.scrollTo(15, 16);
    ok(window.scrollX == 15 && window.scrollY == 16,
      "instant scroll-behavior must be synchronous when setting new position");

    window.scrollTo({left: 100, top: 200, behavior: 'smooth'});
    ok(window.scrollX == 15 && window.scrollY == 16,
      "smooth scroll-behavior must be asynchronous");

    SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(100);
    await promiseApzFlushedRepaints();

    ok(window.scrollX != 15 && window.scrollY != 16
       && window.scrollX != 100 && window.scrollY != 200,
      "smooth scroll-behavior must be triggered by window.scrollTo");

    window.scrollTo(50, 52);
    ok(window.scrollX == 50 && window.scrollY == 52,
      "instant scroll-behavior must interrupt smooth scroll-behavior animation");

    SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(100);
    await promiseApzFlushedRepaints();

    ok(window.scrollX == 50 && window.scrollY == 52,
      "smooth scroll-behavior animation must stop after being interrupted");

    // Release control of refresh driver
    SpecialPowers.DOMWindowUtils.restoreNormalRefresh();
    await promiseApzFlushedRepaints();
  }

  async function testScrollBehaviorFramerate() {
    /**
     *  CSSOM-View scroll-behavior smooth scroll animations must produce the
     *  same results indendently of frame-rate:
     *
     *   - Reference samples of scroll position for each frame are captured from
     *     a smooth scroll at 120fps for variations in X-Distance, Y-Distance.
     *   - Test samples are captured from an animation with the same parameters
     *     at varying framerates.
     *   - Variance in position at each sampled interval is compared to the
     *     120fps reference.  To pass the test, the position of each test
     *     sample must match the reference position with a tolerance of one test
     *     sample frame's range of motion. This range of motion is calculated
     *     by the position delta of the reference samples one test frame duration
     *     before and after.
     *   - The duration of the reference sample animation and the test sample
     *     animation must match within 1 frame to pass the test.
     *   - The simulation driving the animation must converge and stop on the
     *     destination position for the test to pass.
     */

    // Use 120hz for reference samples
    var referenceFrameRate = 120;

    var frameRates = [ 13, 60 ];
    var deltas = [ {x: 0, y: 0},
                   {x: 1, y: 100},
                   {x: -100, y: 50000} ];

    for (var deltaIndex = 0; deltaIndex < deltas.length; deltaIndex++) {
      var deltaX = deltas[deltaIndex].x;
      var deltaY = deltas[deltaIndex].y;

      // startX and startY must be at least as big as the greatest negative
      // number in the deltas array in order to prevent the animation from
      // being interrupted by scroll range boundaries.
      var startX = 1000;
      var startY = 1000;
      var endX = startX + deltaX;
      var endY = startY + deltaY;
      var referenceTimeStep = Math.floor(1000 / referenceFrameRate);

      let refSamples = await sampleAnimation(startX, startY, endX, endY,
                      referenceTimeStep);

      var referenceDuration = refSamples.length * referenceTimeStep; // ms

      for (var frameRateIndex = 0; frameRateIndex < frameRates.length; frameRateIndex++) {
        var frameRate = frameRates[frameRateIndex];

        var testTimeStep = Math.floor(1000 / frameRate);

        let testSamples = await sampleAnimation(startX, startY, endX, endY,
                        testTimeStep);
        var testDuration = testSamples.length * testTimeStep; // ms

        // Variance in duration of animation must be accurate to within one
        // frame interval
        var durationVariance = Math.max(0, Math.abs(testDuration - referenceDuration) - testTimeStep);
        is(durationVariance, 0, 'Smooth scroll animation duration must not '
           + 'be framerate dependent at deltaX: ' + deltaX + ', deltaY: '
           + deltaY + ', frameRate: ' + frameRate + 'fps');

        var maxVariance = 0;
        testSamples.forEach(function(sample, sampleIndex) {

          var testToRef = refSamples.length / testSamples.length;
          var refIndexThisFrame = clamp(Math.floor(sampleIndex * testToRef),
                                        0, refSamples.length - 1);
          var refIndexPrevFrame = clamp(Math.floor((sampleIndex - 1) * testToRef),
                                        0, refSamples.length - 1);
          var refIndexNextFrame = clamp(Math.floor((sampleIndex + 1) * testToRef),
                                        0, refSamples.length - 1);

          var refSampleThisFrame = refSamples[refIndexThisFrame];
          var refSamplePrevFrame = refSamples[refIndexPrevFrame];
          var refSampleNextFrame = refSamples[refIndexNextFrame];

          var refXMin = Math.min(refSamplePrevFrame[0],
                                refSampleThisFrame[0],
                                refSampleNextFrame[0]);

          var refYMin = Math.min(refSamplePrevFrame[1],
                                refSampleThisFrame[1],
                                refSampleNextFrame[1]);

          var refXMax = Math.max(refSamplePrevFrame[0],
                                refSampleThisFrame[0],
                                refSampleNextFrame[0]);

          var refYMax = Math.max(refSamplePrevFrame[1],
                                refSampleThisFrame[1],
                                refSampleNextFrame[1]);

          // Varience is expected to be at most 1 pixel beyond the range,
          // due to integer rounding of pixel position.
          var positionTolerance = 1; // 1 pixel

          maxVariance = Math.max(maxVariance,
                                 refXMin - sample[0] - positionTolerance,
                                 sample[0] - refXMax - positionTolerance,
                                 refYMin - sample[1] - positionTolerance,
                                 sample[1] - refYMax - positionTolerance);
        });

        is(maxVariance, 0, 'Smooth scroll animated position must not be '
           + 'framerate dependent at deltaX: ' + deltaX + ', deltaY: '
           + deltaY + ', frameRate: ' + frameRate + 'fps');
      }

      await promiseApzFlushedRepaints();
    }
  }

  async function sampleAnimation(startX, startY, endX, endY, timeStep) {
    // The animation must be stopped at the destination position for
    // minStoppedFrames consecutive frames to detect that the animation has
    // completed.
    var minStoppedFrames = 15; // 15 frames

    // In case the simulation fails to converge, the test will time out after
    // processing maxTime milliseconds of animation.
    var maxTime = 10000; // 10 seconds

    var positionSamples = [];

    var frameCountAtDestination = 0;

    // Take control of refresh driver so we can synthesize
    // various frame rates
    SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(0);
    await promiseApzFlushedRepaints();

    window.scrollTo(startX, startY);
    window.scrollTo({left: endX, top: endY, behavior: 'smooth'});

    var currentTime = 0; // ms

    while (currentTime < maxTime && frameCountAtDestination < 15) {
      positionSamples.push([window.scrollX, window.scrollY]);

      currentTime += timeStep;
      SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(timeStep);
      await promiseApzFlushedRepaints();
      if (window.scrollX == endX && window.scrollY == endY) {
        frameCountAtDestination++;
      } else {
        frameCountAtDestination = 0;
      }
    }

    isnot(frameCountAtDestination, 0,
          'Smooth scrolls must always end at their destination '
          + 'unless they are interrupted, at deltaX: '
          + (endX - startX) + ', deltaY: ' + (endY - startY));

    window.scrollTo(0, 0);

    // Release control of refresh driver
    SpecialPowers.DOMWindowUtils.restoreNormalRefresh();

    await promiseApzFlushedRepaints();

    // We must not include the duplicated frames at the animation
    // destination as the tests are dependant on the total duration of
    // the animation to be accurate.
    positionSamples.splice(1 - minStoppedFrames,
                           minStoppedFrames - 1);

    return positionSamples;
  }

  </script>
</head>
<body>
<pre id="test">
</pre>

<div id="scroll_behavior_test_body">
      <div id="scroll_to_target" class="scroll_to_target"></div>
</body>
</html>

Messung V0.5

¤ Dauer der Verarbeitung: 0.4 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.