blob: f9217bf684aca55b25dcb8cccd0a25730c845201 [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.toFixed(2)}, ${domRect.y.toFixed(2)} - ${domRect.width.toFixed(2)} x ${domRect.height.toFixed(2)}`;
}
function dumpRects()
{
var fixed = document.getElementById('fixed');
var absolute = document.getElementById('absolute');
if (window.internals) {
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 doTest()
{
if (window.eventSender)
eventSender.zoomPageIn();
dumpRects();
debug('');
window.scrollTo(120, 100);
debug('Scrolled to ' + window.scrollX + ', ' + window.scrollY);
dumpRects();
window.scrollTo(0, 0);
finishJSTest();
}
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>