<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<script>
window.jsTestIsAsync = true;
var pageHeight = 1200;
var pageWidth = 1000;
var testScrolls = [
{key: 'ArrowDown', expectedX: 0, expectedY: pageHeight - window.innerHeight},
{key: 'ArrowUp', expectedX: 0, expectedY: 0},
{key: 'ArrowRight', expectedX: pageWidth - window.innerWidth, expectedY: 0},
{key: 'ArrowLeft', expectedX: 0, expectedY: 0},
{key: 'End', expectedX: 0, expectedY: pageHeight - window.innerHeight},
{key: 'Home', expectedX: 0, expectedY: 0},
{key: 'PageDown', expectedX: 0, expectedY: pageHeight - window.innerHeight},
{key: 'PageUp', expectedX: 0, expectedY: 0},
{key: ' ', expectedX: 0, expectedY: pageHeight - window.innerHeight},
];
var currentTest = -1;
description("Test keyboard smooth scroll. The main purpose of this\
test is to ensure that smooth scrolling on the compositor\
works as intended (tested via virtual suite virtual/threaded/).");
function runTestCase(testCase) {
eventSender.keyDown(testCase.key);
if (window.scrollX == testCase.expectedX && window.scrollY == testCase.expectedY) {
testPassed(testCase.key + ' reached target');
startNextTestCase();
} else {
requestAnimationFrame(function() {
runTestCase(testCase);
});
}
}
function startNextTestCase() {
currentTest++;
if (currentTest >= testScrolls.length) {
finishJSTest();
return;
}
runTestCase(testScrolls[currentTest]);
}
function runTest() {
if (!window.eventSender || !window.internals) {
finishJSTest();
return;
}
// Turn on smooth scrolling.
internals.settings.setScrollAnimatorEnabled(true);
startNextTestCase();
}
addEventListener('load', runTest);
</script>
<style>
::-webkit-scrollbar {
width: 0px;
height: 0px;
}
div {
width: 200px;
height: 20px;
background-color: red;
}
html{
padding: 0px;
margin: 0px;
width: 1000px;
height: 1200px;
}
.top {
position: absolute;
top: 0px;
left: 300px;
}
.middle{
position: absolute;
top: 575px;
left: 300px;
}
.bottom {
position: absolute;
top: 1180px;
left: 300px;
}
.left {
position: absolute;
top: 275px;
left: 0px;
}
.right {
position: absolute;
top: 275px;
left: 800px;
}
</style>
<p id="description" style="width: 800px"></p>
<p id="console" style="width: 800px"></p>
<div class="top">Top of page</div>
<div class="bottom">Bottom of page</div>
<div class="left">Left of page</div>
<div class="right">Right of page</div>
<div class="middle">Middle of page</div>