<!DOCTYPE html>
<style>
body {
    margin: 0;
}

#columns {
    position: absolute;
    width: 332px;
    height: 200px;
    top: 320px;
    left: 300px;
    border: 1px solid black;
    -webkit-column-count: 3;
    -webkit-column-gap: 16px;
    column-fill: auto;
    line-height: 50px;
}
</style>

<div id="columns">
    <br>
    <br>
    <div>
        <br>
        <div id="in-column1">first</div>
    </div>
    <br>
    <div>
        <div id="in-column2">second</div>
        <br>
        <br>
        <div id="in-column3">third</div>
        <br>
    </div>
</div>

<script src="../../resources/js-test.js"></script>
<script>
description("Dispatch mouse click events in each column and check the result.");

function dispatchEvent(clientX, clientY, expectedElementID, expectedOffsetX, expectedOffsetY) {
    var e = document.createEvent("MouseEvent");
    e.initMouseEvent("click", true, true, window, 1, 1, 1, clientX, clientY, false, false, false, false, 0, document);
    e.expectedElementID = expectedElementID;
    e.expectedOffsetX = expectedOffsetX;
    e.expectedOffsetY = expectedOffsetY;
    var target = document.elementFromPoint(e.clientX, e.clientY);
    target.dispatchEvent(e);
}

onclick = function(event) {
    if (!event.expectedElementID)
	return;
    shouldBe("event.target.id", "event.expectedElementID");
    shouldBe("event.offsetX", "event.expectedOffsetX");
    shouldBe("event.offsetY", "event.expectedOffsetY");
}

onload = function() {
    dispatchEvent(380, 500, 'in-column1', 79, 29);
    dispatchEvent(480, 400, 'in-column2', 63, 29);
    dispatchEvent(632, 321, 'in-column3', 99, 0);
}
</script>