<!DOCTYPE html>
<html>
<head>
<style>
#neutral { position:absolute; top:0px; left:100px; width:100px; height:100px; border:2px solid blue; }
#test { position:absolute; top:100px; left:100px; width:100px; height:100px; border:2px solid blue; }
#test div { border: 2px solid red; width: 10px; height: 10px; }
</style>
<script>
if (window.testRunner) {
    testRunner.dumpAsText();
    testRunner.waitUntilDone();
}

var outputText = "";

function output(text) {
    outputText += text + '<br>';
}

var mutateOnMouseOver = false;

function mouseOver() {
    if (mutateOnMouseOver)
        document.querySelector('#test').appendChild(document.createElement("div"));
    output('mouseover');
}
function mouseOut() {
    output('mouseout');
}
function mouseClick() {
    output('mouseclick');
}

function getTapUIScript(x, y)
{
    return `
    (function() {
        uiController.singleTapAtPoint(${x}, ${y}, function() {
            uiController.uiScriptComplete("Done");
        });
    })();`
}

function test() {
    if (!window.testRunner || !window.testRunner.runUIScript)
        return;
    // Test tapping in a div.
    output("Tapping once");
    testRunner.runUIScript(getTapUIScript(150, 150), function(result) {
        output("Tapping again");
        testRunner.runUIScript(getTapUIScript(150, 150), function(result) {
            output("Tapping out");
            testRunner.runUIScript(getTapUIScript(150, 50), function(result) {
                output("Enabling mutation on mouseover");
                mutateOnMouseOver = true;
                output("Tapping once");
                testRunner.runUIScript(getTapUIScript(150, 150), function(result) {
                    output("Tapping again");
                    testRunner.runUIScript(getTapUIScript(150, 150), function(result) {
                        document.querySelector('#output').innerHTML += outputText;
                        testRunner.notifyDone();
                    });
                });
            });
        });
    });
}

</script>
</head>
<body onload="test()">
    <div>Test that if document is visibly mutated in mouseover handler then synthetic click is not generated until the next tap.</div>
    <div id='neutral' onmouseover='' onmouseout='' onclick=''>
    </div>
    <div id='test' onmouseover='mouseOver()' onmouseout='mouseOut()' onclick='mouseClick()'>
    </div>
    <div id='output'></div>
</body>
</html>