72 lines
1.9 KiB
HTML
72 lines
1.9 KiB
HTML
<!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>
|