82 lines
2.3 KiB
HTML
82 lines
2.3 KiB
HTML
<!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.");
|
|
|
|
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>
|