2012-12-28 09:11:06 -08:00
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
<!--
|
|
|
|
|
https://bugzilla.mozilla.org/show_bug.cgi?id=654352
|
|
|
|
|
-->
|
|
|
|
|
<head>
|
|
|
|
|
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
|
|
|
<script type="text/javascript" src="/tests/SimpleTest/WindowSnapshot.js"></script>
|
|
|
|
|
<script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
|
|
|
|
|
<title>Test for Bug 654352</title>
|
|
|
|
|
<style>
|
|
|
|
|
@font-face {
|
|
|
|
|
font-family: Ahem;
|
|
|
|
|
src: url("Ahem.ttf");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#a {
|
|
|
|
|
font-family: Ahem;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
border: 8px solid black;
|
|
|
|
|
width: 600px;
|
|
|
|
|
}
|
2013-04-11 08:12:49 -07:00
|
|
|
|
|
|
|
|
#dp {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 2px;
|
|
|
|
|
height: 2px;
|
|
|
|
|
left: 0px;
|
|
|
|
|
top: 0px;
|
|
|
|
|
background-color: orange;
|
|
|
|
|
}
|
2012-12-28 09:11:06 -08:00
|
|
|
</style>
|
|
|
|
|
<script>
|
2013-04-11 08:12:49 -07:00
|
|
|
function displayPoint(aX, aY) {
|
|
|
|
|
document.getElementById('dp').style['left'] = aX + "px";
|
|
|
|
|
document.getElementById('dp').style['top'] = aY + "px";
|
|
|
|
|
}
|
|
|
|
|
|
2012-12-28 09:11:06 -08:00
|
|
|
function convertEmToPx(aEm) {
|
|
|
|
|
// Assumes our base font size is 16px = 12pt = 1.0em.
|
|
|
|
|
var pxPerEm = 16.0 / 1.0;
|
|
|
|
|
return pxPerEm * aEm;
|
|
|
|
|
}
|
|
|
|
|
|
2013-04-11 08:12:49 -07:00
|
|
|
function checkOffsetsFromPoint(aX, aY, aExpected, aElementName='no-name') {
|
2012-12-28 09:11:06 -08:00
|
|
|
var cp = document.caretPositionFromPoint(aX, aY);
|
2013-04-11 08:12:49 -07:00
|
|
|
ok(aExpected == cp.offset, 'expected offset at (' + aX + ', ' + aY + ') [' + aElementName + ']: ' + aExpected + ', got: ' + cp.offset);
|
2012-12-28 09:11:06 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function doTesting() {
|
|
|
|
|
var test1Element = document.getElementById("test1");
|
|
|
|
|
var test1Rect = test1Element.getBoundingClientRect();
|
|
|
|
|
|
|
|
|
|
// Check the first and last characters of the basic div.
|
2013-04-11 08:12:49 -07:00
|
|
|
checkOffsetsFromPoint(Math.round(test1Rect.left + 1), Math.round(test1Rect.top + 1), 0, 'test1');
|
|
|
|
|
checkOffsetsFromPoint(Math.round(test1Rect.left + test1Rect.width - 1), Math.round(test1Rect.top + 1), 13, 'test1');
|
2012-12-28 09:11:06 -08:00
|
|
|
|
|
|
|
|
// Check a middle character in the second line of the div.
|
|
|
|
|
// To do this, we calculate 7em in from the left of the bounding
|
|
|
|
|
// box, and convert this to PX. (Hence the reason we need the AHEM
|
|
|
|
|
// font).
|
|
|
|
|
var pixelsLeft = convertEmToPx(7);
|
|
|
|
|
var test2Element = document.getElementById("test2");
|
|
|
|
|
var test2Rect = test2Element.getBoundingClientRect();
|
2013-04-11 08:12:49 -07:00
|
|
|
checkOffsetsFromPoint(Math.round(test2Rect.left + pixelsLeft + 1), Math.round(test2Rect.top + 1), 7, 'test2');
|
2012-12-28 09:11:06 -08:00
|
|
|
|
|
|
|
|
// Check the first and last characters of the textarea.
|
|
|
|
|
var test3Element = document.getElementById('test3');
|
|
|
|
|
var test3Rect = test3Element.getBoundingClientRect();
|
2013-04-11 08:12:49 -07:00
|
|
|
checkOffsetsFromPoint(test3Rect.left + 5, test3Rect.top + 5, 0, 'test3');
|
|
|
|
|
checkOffsetsFromPoint(Math.round(test3Rect.left + test3Rect.width - 15), Math.round(test3Rect.top + 5), 3, 'test3');
|
2012-12-28 09:11:06 -08:00
|
|
|
|
|
|
|
|
// Check the first and last characters of the input.
|
|
|
|
|
var test4Element = document.getElementById('test4');
|
|
|
|
|
var test4Rect = test4Element.getBoundingClientRect();
|
2013-04-11 08:12:49 -07:00
|
|
|
checkOffsetsFromPoint(test4Rect.left + 5, test4Rect.top + 5, 0, 'test4');
|
|
|
|
|
checkOffsetsFromPoint(Math.round(test4Rect.left + test4Rect.width - 10), Math.round(test4Rect.top + 10), 6, 'test4');
|
2012-12-28 09:11:06 -08:00
|
|
|
|
2013-01-07 09:56:48 -08:00
|
|
|
// Check to make sure that x or y outside the viewport returns null.
|
|
|
|
|
var nullCp1 = document.caretPositionFromPoint(-10, 0);
|
|
|
|
|
ok(!nullCp1, "caret position with negative x should be null");
|
|
|
|
|
var nullCp2 = document.caretPositionFromPoint(0, -10);
|
|
|
|
|
ok(!nullCp2, "caret position with negative y should be null");
|
|
|
|
|
var nullCp3 = document.caretPositionFromPoint(9000, 0);
|
|
|
|
|
ok(!nullCp3, "caret position with x > viewport width should be null");
|
|
|
|
|
var nullCp4 = document.caretPositionFromPoint(0, 9000);
|
|
|
|
|
ok(!nullCp4, "caret position with x > viewport height should be null");
|
|
|
|
|
|
2012-12-28 09:11:06 -08:00
|
|
|
// Check the first and last characters of the marquee.
|
|
|
|
|
SimpleTest.finish();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
SimpleTest.waitForExplicitFinish();
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body onload="doTesting();">
|
2013-04-11 08:12:49 -07:00
|
|
|
<div id="dp"></div>
|
2012-12-28 09:11:06 -08:00
|
|
|
<div id="a" contenteditable><span id="test1">abc, abc, abc</span><br>
|
|
|
|
|
<span id="test2" style="color: blue;">abc, abc, abc</span><br>
|
2013-04-11 08:12:49 -07:00
|
|
|
<textarea id="test3">abc</textarea><input id="test4" value="abcdef"><br><br>
|
2012-12-28 09:11:06 -08:00
|
|
|
<marquee>marquee</marquee>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
