<!DOCTYPE html>
<script src="../resources/js-test.js"></script>
<script>
var centerX;
var centerY;
function hitTestCenterOfElement(elementID, expectedID)
{
    var element = document.getElementById(elementID);
    var rect = element.getBoundingClientRect();
    centerX = rect.left + (rect.width / 2);
    centerY = rect.top + (rect.height / 2);
    shouldBe("document.elementFromPoint(centerX, centerY).id", "'" + expectedID + "'");
}

function test() {
    hitTestCenterOfElement("containTransform", "containTransform");
    hitTestCenterOfElement("containAbsolute", "containAbsolute");
    hitTestCenterOfElement("containFixed", "containFixed");

    hitTestCenterOfElement("transform", "body");
    hitTestCenterOfElement("absolute", "body");
    hitTestCenterOfElement("fixed", "body");
}
</script>
<style>
div {
    width: 100px;
    height: 100px;
    background-color: green;
}
div > div {
    background-color: red;
}
.paintContainment {
    contain: paint;
    margin: 10px;
}
#transform {
    transform: translateZ(0) translateX(100px);
}
#absolute {
    position: absolute;
    top: 0px;
    left: 100px;
}
#fixed {
    position: fixed;
    top: 0px;
    left: 100px;
}
</style>
<body onload="test()" id="body">
    <p>Hit testing should respect clips established by contain: paint.</p>
<div id="containTransform" class="paintContainment">
    <div id="transform"></div>
</div>
<div id="containAbsolute" class="paintContainment">
    <div id="absolute"></div>
</div>
<div id="containFixed" class="paintContainment">
    <div id="fixed"></div>
</div>
<pre id="console"></pre>