blob: 6ad520ae634094ae3d0bfebaafbdf2ef2050d89d [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 3000px;
width: 2000px;
}
#fixed {
position: fixed;
top: 10px;
left: 12px;
width: 30px;
height: 20px;
background-color: silver;
}
#absolute {
position: absolute;
top: 100px;
left: 120px;
width: 50px;
height: 25px;
background-color: blue;
}
</style>
<script src="../../resources/js-test-pre.js"></script>
<script>
description("This test zooms and scrolls the page and checks that client rects are correct.");
if (window.internals)
internals.settings.setVisualViewportEnabled(true);
window.jsTestIsAsync = true;
function stringFromRect(domRect)
{
return `${domRect.x}, ${domRect.y} - ${domRect.width} x ${domRect.height}`;
}
function dumpRects()
{
var fixed = document.getElementById('fixed');
var absolute = document.getElementById('absolute');
debug('layoutViewport: ' + stringFromRect(internals.layoutViewportRect()));
debug('visualViewportRect: ' + stringFromRect(internals.visualViewportRect()));
debug('fixed client bounds: ' + stringFromRect(fixed.getBoundingClientRect()));
debug('fixed client rect: ' + stringFromRect(fixed.getClientRects()[0]));
debug('absolute client bounds: ' + stringFromRect(absolute.getBoundingClientRect()));
debug('absolute client rect: ' + stringFromRect(absolute.getClientRects()[0]));
}
function doAfterZooming()
{
window.scrollTo(0, 0);
dumpRects();
debug('');
window.scrollTo(476, 526);
debug('Scrolled to ' + window.scrollX + ', ' + window.scrollY);
dumpRects();
debug('');
window.scrollTo(100, 776);
debug('Scrolled to ' + window.scrollX + ', ' + window.scrollY);
dumpRects();
debug('');
window.scrollTo(50, 300);
debug('Scrolled to ' + window.scrollX + ', ' + window.scrollY);
dumpRects();
window.scrollTo(0, 0);
finishJSTest();
}
function getUIScript()
{
return `(function() {
uiController.zoomToScale(2, function() {
uiController.uiScriptComplete(uiController.zoomScale);
});
})();`;
}
function doTest()
{
if (!window.testRunner)
return;
testRunner.runUIScript(getUIScript(), function(zoomScale) {
doAfterZooming();
});
}
window.addEventListener('load', doTest, false);
</script>
</head>
<body>
<div id="fixed"></div>
<div id="absolute"></div>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>