| <!DOCTYPE HTML> |
| <script src="../resources/js-test.js"></script> |
| <script> |
| function test() { |
| // 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. |
| shouldNotBe("document.elementFromPoint(75, 125).id", "'imageWithReferenceClipPath'"); |
| shouldBe("document.elementFromPoint(125, 75).id", "'imageWithReferenceClipPath'"); |
| // Same test as above but for a shape-based clip path offset by 100px. |
| shouldNotBe("document.elementFromPoint(75+100, 125).id", "'imageWithShapeClipPath'"); |
| shouldBe("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. |
| shouldNotBe("document.elementFromPoint(100, 225).id", "'transformedWithReferenceClipPath'"); |
| shouldNotBe("document.elementFromPoint(135, 175).id", "'transformedWithReferenceClipPath'"); |
| shouldBe("document.elementFromPoint(115, 175).id", "'transformedWithReferenceClipPath'"); |
| shouldBe("document.elementFromPoint(120, 225).id", "'transformedWithReferenceClipPath'"); |
| // Same test as above but for a shape-based clip path offset by 100px. |
| shouldNotBe("document.elementFromPoint(100+100, 225).id", "'transformedWithShapeClipPath'"); |
| shouldNotBe("document.elementFromPoint(135+100, 175).id", "'transformedWithShapeClipPath'"); |
| shouldBe("document.elementFromPoint(115+100, 175).id", "'transformedWithShapeClipPath'"); |
| shouldBe("document.elementFromPoint(120+100, 225).id", "'transformedWithShapeClipPath'"); |
| } |
| </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> |
| <body onload="test()"> |
| <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> |
| </body> |
