<!DOCTYPE html><!-- webkit-test-runner [ spellCheckingDots=true ] -->
<html>
<head>

<style>
.editing {
    font-family: 'Times New Roman';
    font-size: 36px;
}
</style>
<script src=../editing.js language="JavaScript" type="text/JavaScript" ></script>

<script>
function editingTest() {
    typeCharacterCommand('w');
    typeCharacterCommand('a');
    typeCharacterCommand('f');
    typeCharacterCommand('e');
    typeCharacterCommand('w');
    typeCharacterCommand('e');
    typeCharacterCommand('r');
    typeCharacterCommand('e');
    typeCharacterCommand('w');
    typeCharacterCommand('d');
    typeCharacterCommand('f');
    typeCharacterCommand('e');
    typeCharacterCommand('a');
    typeCharacterCommand(' ');
    let ascentSetter = document.createElement("div");
    ascentSetter.style.background = "black";
    ascentSetter.style.width = "1px";
    ascentSetter.style.height = "150px";
    ascentSetter.style.display = "inline-block";
    let root = document.getElementById("root");
    root.appendChild(ascentSetter);
    let baseline = ascentSetter.offsetTop + ascentSetter.offsetHeight;
    let left = root.offsetLeft;
    let width = ascentSetter.offsetLeft - left;
    let fontSize = Number.parseInt(window.getComputedStyle(root).getPropertyValue("font-size"));
    let blocker = document.createElement("div");
    blocker.style.background = "black";
    blocker.style.position = "absolute";
    blocker.style.left = `${left}px`;
    blocker.style.top = `${baseline + fontSize * 0.11035}px`;
    blocker.style.width = `${width}px`;
    blocker.style.height = `${fontSize * 0.13247}px`;
    document.body.appendChild(blocker);
    root.blur();
}

</script>

<title>Editing Test</title>
</head>
<body>
<div>There should be no misspelling dots visible below (because they're covered up by a div)</div>
<div contenteditable id="root" class="editing">
<span id="test"></span>
</div>

<script>
    if (window.internals)
        internals.setContinuousSpellCheckingEnabled(true);
    runEditingTest();
</script>

</body>
</html>