Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test gets skipped with pattern: os == 'android'
- Manifest: layout/generic/test/mochitest.toml
<!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>