| Index: third_party/WebKit/LayoutTests/hittesting/paint-containment-hittest.html
|
| diff --git a/third_party/WebKit/LayoutTests/hittesting/paint-containment-hittest.html b/third_party/WebKit/LayoutTests/hittesting/paint-containment-hittest.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..24f7bd19217d512d0e40a04df22b6b39e81aba27
|
| --- /dev/null
|
| +++ b/third_party/WebKit/LayoutTests/hittesting/paint-containment-hittest.html
|
| @@ -0,0 +1,63 @@
|
| +<!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>
|
|
|