<script src="../../../../resources/ahem.js"></script>
<script src="../../../../resources/js-test.js"></script>
<style>
.test {
width: 100px;
font-family: "Ahem";
}
.pusher {
width: 4000px;
height: 1000px;
outline: 1px solid black;
}
</style>
<div id="testArea">
<div id="test-top" class="test">xxxxx xxxxx xxxxx xxxxx</div>
<div class="pusher">This box is here to create scrollbars.</div>
<div id="test-bottom" class="test" style="margin-left: 900px;">xxxxx xxxxx xxxxx xxxxx</div>
<div class="pusher">This box is here to create additional space for the hit tests which must initially be in the scroll area.</div>
</div>
<p id="description"></p>
<div id="console"></div>
<script>
if (window.testRunner)
testRunner.dumpAsText();
description('This checks for proper behavior of caretRangeFromPoint before and after scrolling.');
var elementTop = document.getElementById('test-top'),
elementBottom = document.getElementById('test-bottom');
var BASE_DEVICE_PIXEL_RATIO = window.devicePixelRatio;
function testsWithBaseline(baselinePos, expectedContainer) {
function test(expectedOffset, scrollByX, scrollByY) {
var zoomRatio = BASE_DEVICE_PIXEL_RATIO / window.devicePixelRatio;
var hitPosition = { x: 15 * zoomRatio, y: 15 * zoomRatio },
range,
doesContainerPass = function() { return range.startContainer === expectedContainer },
doesOffsetPass = function() { return Math.abs(range.startOffset - expectedOffset) < zoomRatio; };
// Scroll relative to target.
scrollRelativeToBaseline(scrollByX, scrollByY);
range = document.caretRangeFromPoint(hitPosition.x, hitPosition.y);
// shouldn't return null range on any of these tests
if (range === null) {
testFailed("null range was returned from document.caretRangeFromPoint(" + hitPosition.x + ", " + hitPosition.y + ") at window scroll position " + window.scrollX + "x" + window.scrollY);
return;
}
// do an actual check
function check(thunk, message) {
if (thunk())
testPassed(message);
else
testFailed(message);
}
check(doesContainerPass, "Range.startContainer check (got " + range.startContainer + ", expected " + expectedContainer + ")");
check(doesOffsetPass, "Range.startOffset check (got " + range.startOffset + ", expected " + expectedOffset + ")");
}
function scrollRelativeToBaseline(x, y) {
window.scrollTo(baselinePos.x + x, baselinePos.y + y);
}
test(0, 0, 0);
test(12, 0, 25);
test(2, 25, 0);
test(14, 25, 25);
debug(" ");
}
var rectTop = elementTop.getBoundingClientRect(),
rectBottom = elementBottom.getBoundingClientRect(),
// Subtract some distance so we aren't in the very top left of the target.
topBaseline = { x: rectTop.left - 8, y: rectTop.top - 8 },
bottomBaseline = { x: rectBottom.left - 8, y: rectBottom.top - 8 };
// Testing inside initial containing block (top left)
testsWithBaseline(topBaseline, elementTop.firstChild);
// Testing outside initial containing block (mid-page)
testsWithBaseline(bottomBaseline, elementBottom.firstChild);
testRunner.zoomPageOut();
testsWithBaseline(topBaseline, elementTop.firstChild);
if (window.testRunner) {
var area = document.getElementById('testArea');
area.parentNode.removeChild(area);
}
</script>