mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-17 23:35:34 +00:00
Bug 1235899 - Add a test for frame reconstruction during an APZ scroll animation. r=botond
MozReview-Commit-ID: 3MDHWEfTD8e
This commit is contained in:
Kartikaya Gupta
parent
7c935ef5ba
commit
17f323d482
@ -31,3 +31,4 @@ skip-if = (os == 'android') || (os == 'b2g') || (buildapp == 'mulet') # wheel ev
|
||||
skip-if = (os == 'android') || (os == 'b2g') || (buildapp == 'mulet') # wheel events not supported on mobile; see bug 1164274 for mulet
|
||||
[test_scroll_subframe_scrollbar.html]
|
||||
skip-if = (os == 'android') || (os == 'b2g') || (buildapp == 'mulet') # wheel events not supported on mobile; see bug 1164274 for mulet
|
||||
[test_frame_reconstruction.html]
|
||||
|
||||
231
gfx/layers/apz/test/mochitest/test_frame_reconstruction.html
Normal file
231
gfx/layers/apz/test/mochitest/test_frame_reconstruction.html
Normal file
@ -0,0 +1,231 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!--
|
||||
https://bugzilla.mozilla.org/show_bug.cgi?id=1235899
|
||||
-->
|
||||
<head>
|
||||
<title>Test for bug 1235899</title>
|
||||
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
|
||||
<script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
|
||||
<script type="application/javascript" src="/tests/SimpleTest/paint_listener.js"></script>
|
||||
<script type="application/javascript" src="apz_test_utils.js"></script>
|
||||
<script type="application/javascript" src="apz_test_native_event_utils.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
|
||||
<style>
|
||||
.outer {
|
||||
height: 400px;
|
||||
width: 415px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.inner {
|
||||
height: 100%;
|
||||
outline: none;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
position: relative;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
.outer.contentBefore::before {
|
||||
top: 0;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1235899">Mozilla Bug 1235899</a>
|
||||
<p id="display"></p>
|
||||
<div id="content">
|
||||
<p>You should be able to fling this list without it stopping abruptly</p>
|
||||
<div class="outer">
|
||||
<div class="inner">
|
||||
<ol>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
<li>Some text</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pre id="test">
|
||||
<script type="application/javascript;version=1.7">
|
||||
function* runTest() {
|
||||
var elm = document.getElementsByClassName('inner')[0];
|
||||
elm.scrollTop = 0;
|
||||
yield flushApzRepaints(driveTest);
|
||||
|
||||
// Take over control of the refresh driver and compositor
|
||||
var utils = SpecialPowers.DOMWindowUtils;
|
||||
utils.advanceTimeAndRefresh(0);
|
||||
|
||||
// Kick off an APZ smooth-scroll to 0,200
|
||||
elm.scrollTo(0, 200);
|
||||
yield waitForAllPaints(function() { setTimeout(driveTest, 0); });
|
||||
|
||||
// Let's do a couple of frames of the animation, and make sure it's going
|
||||
utils.advanceTimeAndRefresh(16);
|
||||
utils.advanceTimeAndRefresh(16);
|
||||
yield flushApzRepaints(driveTest);
|
||||
ok(elm.scrollTop > 0, "APZ animation in progress", "scrollTop is now " + elm.scrollTop);
|
||||
ok(elm.scrollTop < 200, "APZ animation not yet completed", "scrollTop is now " + elm.scrollTop);
|
||||
|
||||
var frameReconstructionTriggered = 0;
|
||||
// Register the listener that triggers the frame reconstruction
|
||||
elm.onscroll = function() {
|
||||
// Do the reconstruction
|
||||
elm.parentNode.classList.add('contentBefore');
|
||||
frameReconstructionTriggered++;
|
||||
// schedule a thing to undo the changes above
|
||||
setTimeout(function() {
|
||||
elm.parentNode.classList.remove('contentBefore');
|
||||
}, 0);
|
||||
}
|
||||
|
||||
// and do a few more frames of the animation, this should trigger the listener
|
||||
// and the frame reconstruction
|
||||
utils.advanceTimeAndRefresh(16);
|
||||
utils.advanceTimeAndRefresh(16);
|
||||
yield flushApzRepaints(driveTest);
|
||||
ok(elm.scrollTop < 200, "APZ animation not yet completed", "scrollTop is now " + elm.scrollTop);
|
||||
ok(frameReconstructionTriggered > 0, "Frame reconstruction triggered", "reconstruction triggered " + frameReconstructionTriggered + " times");
|
||||
|
||||
// and now run to completion
|
||||
for (var i = 0; i < 100; i++) {
|
||||
utils.advanceTimeAndRefresh(16);
|
||||
}
|
||||
utils.restoreNormalRefresh();
|
||||
yield waitForAllPaints(function() { setTimeout(driveTest, 0); });
|
||||
yield flushApzRepaints(driveTest);
|
||||
|
||||
is(elm.scrollTop, 200, "Element should have scrolled by 200px");
|
||||
}
|
||||
|
||||
var gTestContinuation = null;
|
||||
function driveTest() {
|
||||
if (!gTestContinuation) {
|
||||
gTestContinuation = runTest();
|
||||
}
|
||||
var ret = gTestContinuation.next();
|
||||
if (ret.done) {
|
||||
SimpleTest.finish();
|
||||
}
|
||||
}
|
||||
|
||||
SimpleTest.waitForExplicitFinish();
|
||||
var apzEnabled = SpecialPowers.getDOMWindowUtils(window).asyncPanZoomEnabled;
|
||||
if (!apzEnabled) {
|
||||
ok(true, "APZ not enabled, skipping test");
|
||||
SimpleTest.finish();
|
||||
} else {
|
||||
SimpleTest.expectAssertions(0, 1); // this test triggers an assertion, see bug 1247050
|
||||
SimpleTest.waitForFocus(driveTest, window);
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user