<!DOCTYPE html><!-- webkit-test-runner [ useFlexibleViewport=true ] -->
<html>
<head>
<meta name="viewport" content="width=device-width initial-scale=1 user-scalable=no">
<script src="../../../../../resources/ui-helper.js"></script>
<style>
#neutral { position:absolute; top:0px; left:100px; width:100px; height:100px; border:2px solid blue; }
#testDiv { position:absolute; top:100px; left:100px; width:100px; height:100px; border:2px solid blue; }
#testDiv div { border: 2px solid red; width: 10px; height: 10px; }
</style>
<script>
if (window.testRunner) {
    testRunner.dumpAsText();
    testRunner.waitUntilDone();
}
if (window.internals)
    internals.settings.setContentChangeObserverEnabled(true);

var outputText = "";

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

var mutateOnMouseOver = false;

function mouseOver() {
    if (mutateOnMouseOver) {
        let newContent = document.createElement("div");
        newContent.addEventListener("click", function( event ) {
        }, false);
        document.querySelector('#testDiv').appendChild(newContent);
    }
    output('mouseover');
}
function mouseOut() {
    output('mouseout');
}
function mouseClick() {
    output('mouseclick');
}

async function test() {
    if (!window.testRunner || !window.testRunner.runUIScript)
        return;
    // Test tapping in a div.
    output("Tapping once");
    await UIHelper.tapAt(150, 150);
    await UIHelper.waitForDoubleTapDelay();

    output("Tapping again");
    await UIHelper.tapAt(150, 150);
    await UIHelper.waitForDoubleTapDelay();

    output("Tapping out");
    await UIHelper.tapAt(150, 50);
    await UIHelper.waitForDoubleTapDelay();

    output("Enabling mutation on mouseover");
    testDiv.removeAttribute("role"); 
    mutateOnMouseOver = true;
    output("Tapping once");
    await UIHelper.tapAt(150, 150);
    await UIHelper.waitForDoubleTapDelay();

    output("Tapping again");
    await UIHelper.tapAt(150, 150);
    await UIHelper.waitForDoubleTapDelay();

    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 role="checkbox" id='testDiv' onmouseover='mouseOver()' onmouseout='mouseOut()' onclick='mouseClick()'>
    </div>
    <div id='output'></div>
</body>
</html>