<!DOCTYPE HTML>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="../resources/ahem.js"></script>
<style>
#referenceClipPath {
-webkit-clip-path: url(#referenceClipPathTopLeft);
clip-path: url(#referenceClipPathTopLeft);
font-size: 100px;
font-family: Ahem;
color: blue;
}
#referenceClipPath:hover {
color: green;
}
#shapeClipPath {
-webkit-clip-path: polygon(0% 0%, 100% 100%, 100% 0%);
clip-path: polygon(0% 0%, 100% 100%, 100% 0%);
font-size: 100px;
font-family: Ahem;
color: purple;
}
#shapeClipPath:hover {
color: orange;
}
</style>
<p>Inline hit testing should not include clipped-out regions.</p>
<svg width="0" height="0">
<defs>
<clipPath id="referenceClipPathTopLeft" clipPathUnits="objectBoundingBox">
<path id="path" d="M 0 0 L 100 100 L 100 0Z" />
</clipPath>
</defs>
</svg>
<span id="referenceClipPath">a</span>
<span id="shapeClipPath">a</span>
<div id="console"></div>
<script>
test(function(t)
{
// Check that a reference clip path affects hit testing for inlines.
// (25,75) is outside the triangular clip path, (75,25) is inside it.
var referenceClipPathRect = referenceClipPath.getBoundingClientRect();
assert_not_equals(document.elementFromPoint(referenceClipPathRect.left + 25, referenceClipPathRect.top + 75).id, "referenceClipPath");
assert_equals(document.elementFromPoint(referenceClipPathRect.left + 75, referenceClipPathRect.top + 25).id, "referenceClipPath");
// Check that a shape clip path affects hit testing for inlines.
// (25,75) is outside the triangular clip path, (75,25) is inside it.
var shapeClipPathRect = shapeClipPath.getBoundingClientRect();
assert_not_equals(document.elementFromPoint(shapeClipPathRect.left + 25, shapeClipPathRect.top + 75).id, "shapeClipPath");
assert_equals(document.elementFromPoint(shapeClipPathRect.left + 75, shapeClipPathRect.top + 25).id, "shapeClipPath");
}, "Inline hit testing should not include clipped-out regions.");
</script>
Codebase Browser
chromium