<!DOCTYPE html>
<html>
<body>
<script src="../../resources/ui-helper.js"></script>
<p>This tests activing an image map area inside a shadow tree. WebKit should not hit any assertions.<br>
To manually test, click on green box on the left upper quadrant.</p>
<div id="result"></div>
<script>

const host = document.createElement('div');
document.body.appendChild(host);

const shadowRoot = host.attachShadow({mode: 'closed'});
shadowRoot.innerHTML = `
<img src="resources/green-400x400.png" width="400" height="400" usemap="#imagemap" onload="startTest()">
<map name="imagemap">
    <area id="area" shape="rect" coords="0,0,200,200" href="#" onclick="didClick(event)" tabindex="0">
</map>`;
const rect = host.getBoundingClientRect();

function startTest()
{
    if (!window.testRunner)
        return;
    UIHelper.activateAt(rect.x + 100, rect.y + 100).then(check);
}

let didClickWasCalled = false;
function didClick(event)
{
    event.preventDefault();
    didClickWasCalled = true;
}

function check()
{
    let result = '';
    if (!didClickWasCalled)
        result = 'FAIL - JavaScript was not executed';
    else if (shadowRoot.activeElement != shadowRoot.getElementById('area'))
        result = 'FAIL - The element was not focused';
    else
        result = 'PASS';
    document.getElementById('result').textContent = result;
    if (window.testRunner)
        testRunner.notifyDone();
}

if (window.testRunner) {
    setTimeout(() => testRunner.notifyDone(), 3000);
    testRunner.waitUntilDone();
    testRunner.dumpAsText();
} else {
    host.onclick = (event) => {
        event.preventDefault();

        const isInUpperLeftQuadrant = rect.x < event.pageX && event.pageX < rect.x + 200
            && rect.y < event.pageY && event.pageY < rect.y + 200;
        if (!isInUpperLeftQuadrant) {
            alert('Please click on the upper left quadrant of the green box.');
            return;
        }

        check();
    };
}

</script>
</body>
</head>
</html>