blob: 252b5882b0ec612bc64fe8c08a19199f29801c38 [file] [log] [blame]
<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<script>
var numScrolls;
var pageHeight = 2000;
var pageWidth = 2000;
function reset()
{
window.scrollTo(0, 0);
internals.setPageScaleFactor(2);
}
function testArrowKeys()
{
// Test up and down.
window.eventSender.keyDown('downArrow');
shouldBeGreaterThan('internals.visualViewportScrollY()', '0');
numScrolls = Math.ceil((pageHeight - internals.visualViewportHeight()) / internals.visualViewportScrollY());
for(var i = 0; i < numScrolls - 1; ++i) {
window.eventSender.keyDown('downArrow');
}
shouldBe('internals.visualViewportScrollY()', 'pageHeight - internals.visualViewportHeight()');
for(var i = 0; i < numScrolls; ++i) {
window.eventSender.keyDown('upArrow');
}
shouldBe('internals.visualViewportScrollY()', '0');
// Now test left and right.
reset();
window.eventSender.keyDown('rightArrow');
numScrolls = Math.ceil((pageWidth - internals.visualViewportWidth()) / internals.visualViewportScrollX());
for(var i = 0; i < numScrolls - 1; ++i) {
window.eventSender.keyDown('rightArrow');
}
shouldBe('internals.visualViewportScrollX()', 'pageWidth - internals.visualViewportWidth()');
for(var i = 0; i < numScrolls; ++i) {
window.eventSender.keyDown('leftArrow');
}
shouldBe('internals.visualViewportScrollX()', '0');
}
function testHomeEnd()
{
window.eventSender.keyDown('end');
shouldBe('window.scrollY', 'pageHeight - window.innerHeight');
shouldBe('internals.visualViewportScrollY()', 'pageHeight - internals.visualViewportHeight()');
window.eventSender.keyDown('home');
shouldBe('window.scrollY', '0');
shouldBe('internals.visualViewportScrollY()', '0');
}
function testPageUpDown()
{
window.eventSender.keyDown('pageDown');
shouldBeGreaterThan('internals.visualViewportScrollY()', '0');
numScrolls = Math.ceil((pageHeight - internals.visualViewportHeight()) / internals.visualViewportScrollY());
for(var i = 0; i < numScrolls - 1; ++i) {
window.eventSender.keyDown('pageDown');
}
shouldBe('internals.visualViewportScrollY()', 'pageHeight - internals.visualViewportHeight()');
for(var i = 0; i < numScrolls; ++i) {
window.eventSender.keyDown('pageUp');
}
shouldBe('internals.visualViewportScrollY()', '0');
}
function testSpacebar()
{
window.eventSender.keyDown(' ');
shouldBeGreaterThan('internals.visualViewportScrollY()', '0');
numScrolls = Math.ceil((pageHeight - internals.visualViewportHeight()) / internals.visualViewportScrollY());
for(var i = 0; i < numScrolls - 1; ++i) {
window.eventSender.keyDown(' ');
}
shouldBe('internals.visualViewportScrollY()', 'pageHeight - internals.visualViewportHeight()');
for(var i = 0; i < numScrolls; ++i) {
window.eventSender.keyDown(' ', 'shiftKey');
}
shouldBe('internals.visualViewportScrollY()', '0');
}
function runTest()
{
description(
'Test that keyboard scrolling while the page is scaled scrolls ' +
'both viewports. To test manually, pinch zoom into the page and ' +
'use the arrow keys, page up/down, home/end to scroll the page. ' +
'You should be able to reach the end of the page bounds (i.e. ' +
'scroll to see the divs at the bounds.)');
if (window.eventSender && window.internals) {
internals.settings.setScrollAnimatorEnabled(false);
reset();
debug('Testing arrow keys:');
testArrowKeys();
reset();
debug('');
debug('Testing home and end keys:');
testHomeEnd();
reset();
debug('');
debug('Testing page up and page down keys:');
testPageUpDown();
reset();
debug('');
debug('Testing spacebar:');
testSpacebar();
}
}
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: 2000px;
height: 2000px;
}
.top {
position: absolute;
top: 0px;
left: 300px;
}
.middle{
position: absolute;
top: 975px;
left: 300px;
}
.bottom {
position: absolute;
top: 1980px;
left: 300px;
}
.left {
position: absolute;
top: 275px;
left: 0px;
}
.right {
position: absolute;
top: 275px;
left: 1800px;
}
</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>