<!DOCTYPE html>
<html>
<head>
<script src="../../../../../resources/js-test-pre.js"></script>
<script src="resources/helpers.js"></script>
<style>* { margin: 0; padding: 0; }</style>
</head>
<body>
<div id="box" style="background:blue;width:100px;height:100px;position:absolute;top:100px;left:100px"></div>
<p id="description"></p>
<div id="console"></div>
<!-- Filler to allow scrolling -->
<div style="width:1500px;height:1500px;"></div>
<script>
description("This tests Range.getBoundingClientRects and getClientRects positions when unscaled, scaled, and panned.");

const scale = 2;
const panX = 10;
const panY = 10;

var box = document.getElementById('box');
function setDisplayOnDescriptionAndConsole(display) {
    document.getElementById('description').style.display = display;
    document.getElementById('console').style.display = display;
}

setDisplayOnDescriptionAndConsole('none');

// Selection includes the 100x100 "box" and 1500x1500 "filler" divs.
// The entire Range's bounds are the filler's, since the "box" is
// positioned absolutely inside it. The first client rect of the
// Range is the box.
document.execCommand("SelectAll");

debug('');
debug('unscaled');
shouldBeEqualToString("rectString(getSelection().getRangeAt(0).getBoundingClientRect())", "(0,0 1500x1500)");
shouldBeEqualToString("rectStrings(getSelection().getRangeAt(0).getClientRects())", "(100,100 100x100) (0,0 1500x1500)");

debug('');
debug('scaled and panned');
setInitialScaleAndPanBy(scale, panX, panY);
var firstRect = "(" + (0-panX) + "," + (0-panX) + " 1500x1500)";
var secondRect = "(" + (100-panX) + "," + (100-panX) + " 100x100)";
shouldBeEqualToString("rectString(getSelection().getRangeAt(0).getBoundingClientRect())", firstRect);
shouldBeEqualToString("rectStrings(getSelection().getRangeAt(0).getClientRects())", secondRect + " " + firstRect);

debug('');

setDisplayOnDescriptionAndConsole('block');

var successfullyParsed = true;
endTest();
</script>
</body>
</html>
