<!DOCTYPE HTML>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
.referenceClipPath {
-webkit-clip-path: url(#referenceClipPathTopLeft);
clip-path: url(#referenceClipPathTopLeft);
width: 100px;
height: 100px;
position: absolute;
}
.referenceClipPath:hover {
background: green;
}
.shapeClipPath {
-webkit-clip-path: polygon(0% 0%, 100% 100%, 100% 0%);
clip-path: polygon(0% 0%, 100% 100%, 100% 0%);
width: 100px;
height: 100px;
position: absolute;
}
.shapeClipPath:hover {
background: green;
}
#imageWithReferenceClipPath {
top: 50px;
left: 50px;
}
#imageWithShapeClipPath {
top: 50px;
left: 150px;
}
#transformedDivContainer {
position: absolute;
top: 0;
left: 0;
transform: translate3d(25px, 25px, 0);
}
#transformedWithReferenceClipPath {
top: 125px;
left: 25px;
transform: rotateY(60deg);
}
#transformedWithShapeClipPath {
top: 125px;
left: 125px;
transform: rotateY(60deg);
}
</style>
<p>Image hit testing should not include clipped-out regions.</p>
<svg width="100" height="0">
<defs>
<clipPath id="referenceClipPathTopLeft" clipPathUnits="objectBoundingBox">
<path id="path" d="M 0 0 L 100 100 L 100 0Z" />
</clipPath>
</defs>
</svg>
<img id="imageWithReferenceClipPath" class="referenceClipPath" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==">
<img id="imageWithShapeClipPath" class="shapeClipPath" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==">
<div id="transformedDivContainer">
<img id="transformedWithReferenceClipPath" class="referenceClipPath" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==">
<img id="transformedWithShapeClipPath" class="shapeClipPath" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==">
</div>
<div id="console"></div>
<script>
test(function(t)
{
// Check that clip path affects hit testing for the first row of images.
// These images are offset with top/left.
// (75,125) is outside the triangular clip path, (125,75) is inside it.
assert_not_equals(document.elementFromPoint(75, 125).id, "imageWithReferenceClipPath");
assert_equals(document.elementFromPoint(125, 75).id, "imageWithReferenceClipPath");
// Same test as above but for a shape-based clip path offset by 100px.
assert_not_equals(document.elementFromPoint(75+100, 125).id, "imageWithShapeClipPath");
assert_equals(document.elementFromPoint(125+100, 75).id, "imageWithShapeClipPath");
// Check that clip path affects hit testing for the second row. These
// images are transformed by a container by (25,25) and each has a
// 3d rotation causing the images to be horizontally squished. The test
// coordinates are tight and will fail without the Y rotation.
// (100,255) and (135,175) are outside the triangular clip path.
// (115,175) and (120,225) are inside the triangular clip path.
assert_not_equals(document.elementFromPoint(100, 225).id, "transformedWithReferenceClipPath");
assert_not_equals(document.elementFromPoint(135, 175).id, "transformedWithReferenceClipPath");
assert_equals(document.elementFromPoint(115, 175).id, "transformedWithReferenceClipPath");
assert_equals(document.elementFromPoint(120, 225).id, "transformedWithReferenceClipPath");
// Same test as above but for a shape-based clip path offset by 100px.
assert_not_equals(document.elementFromPoint(100+100, 225).id, "transformedWithShapeClipPath");
assert_not_equals(document.elementFromPoint(135+100, 175).id, "transformedWithShapeClipPath");
assert_equals(document.elementFromPoint(115+100, 175).id, "transformedWithShapeClipPath");
assert_equals(document.elementFromPoint(120+100, 225).id, "transformedWithShapeClipPath");
}, "Image hit testing should not include clipped-out regions.");
</script>
Codebase Browser
chromium