<!DOCTYPE html>
<html>
<head>
<title>Test for per-character selection with SVG font</title>
<style>

@font-face {
    font-family: 'ABCFont';
    src: local('☺'), url('../custom/resources/ABCFont.svg#ABCFont') format('svg');
    font-weight: normal;
    font-style: normal;
}

.svgfont {
    font-family: 'ABCFont';
}

.pass {
    background: #0f0;
}

.fail { 
    background: #f00;
}

</style>
</head>
<body>
This test checks that individual characters can be selected correctly when using an SVG font.
<div>
	<span id="text" class="svgfont">aaaaaaaaaa</span>
</div>
<div id="passfail">
</div>
<script type="text/javascript">
function runTest() {
    var text = document.getElementById('text');

    if (!window.testRunner)
        return;

    var textWidth = text.offsetWidth;
    var estCharWidth = textWidth / 10;
    eventSender.mouseMoveTo(text.offsetLeft + (estCharWidth * 3) + 2, text.offsetTop + text.offsetHeight / 2);
    eventSender.leapForward(200);
    eventSender.mouseDown();
    eventSender.mouseMoveTo(text.offsetLeft + (estCharWidth * 3) + 2, text.offsetTop + text.offsetHeight / 2);
    eventSender.leapForward(200);
    eventSender.mouseMoveTo(text.offsetLeft + (estCharWidth * 6) + 2, text.offsetTop + text.offsetHeight / 2);
    eventSender.leapForward(200);
    eventSender.mouseUp();
    verify();
}

function verify() {
    var text = document.getElementById('text');

    if (!window.testRunner)
        return;

    var range = window.getSelection().getRangeAt(0);
    if (range.startOffset === 3 && range.endOffset === 6)
	return pass("PASS");

    return fail("FAIL: range was [" + range.startOffset + ", " + range.endOffset + "]; expected [3, 6]");
}

function pass(message) {
    log(true, message);
}

function fail(message) {
    log(false, message);
}

function log(passed, message) {
    var passfail = document.getElementById('passfail');
    passfail.innerHTML = message;
    passfail.className = (passed ? "pass" : "fail");
    testRunner.dumpAsText();
}

runTest();
</script>
</body>
</html>