<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></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 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>
<script>
function hitTestCenterOfElement(elementID)
{
    var element = document.getElementById(elementID);
    var rect = element.getBoundingClientRect();
    var centerX = rect.left + (rect.width / 2);
    var centerY = rect.top + (rect.height / 2);
    return document.elementFromPoint(centerX, centerY).id;
}

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

    assert_equals(hitTestCenterOfElement("transform"), "body");
    assert_equals(hitTestCenterOfElement("absolute"), "body");
    assert_equals(hitTestCenterOfElement("fixed"), "body");
}, "Hit testing should respect clips established by contain: paint.");
</script>