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

#outerColumns {
    position: absolute;
    width: 332px;
    height: 200px;
    top: 220px;
    left: 300px;
    border: 1px solid black;
    columns: 3;
    column-gap: 16px;
    column-fill: auto;
    line-height: 50px;
    orphans: 1;
    widows: 1;
}

#innerColumns {
    columns: 2;
    column-gap: 0;
}
</style>

<div id="outerColumns">
    <br>
    <div id="innerColumns">
        <br>
        <br>
        <div id="outer1-inner1">first</div>
        <br>
        <div id="outer1-inner2">second</div>
        <br>
        <br>
        <div id="outer2-inner1">third</div>
        <br>
        <br>
        <div id="outer2-inner2">fourth</div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <div id="outer3-inner1">fifth</div>
        <br>
        <br>
        <br>
        <br>
        <div id="outer3-inner2">sixth</div>
    </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");
}

window.onload = function() {
    dispatchEvent(330, 415, "outer1-inner1", 29, 44);
    dispatchEvent(380, 365, "outer1-inner2", 29, 44);
    dispatchEvent(446, 315, "outer2-inner1", 29, 44);
    dispatchEvent(496, 265, "outer2-inner2", 29, 44);
    dispatchEvent(562, 365, "outer3-inner1", 29, 44);
    dispatchEvent(612, 415, "outer3-inner2", 29, 44);
}
</script>