Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(18)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/hittesting/image-with-clip-path.html

Issue 1506053003: Include clip-path and border radius when hit testing boxes (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Hit test in PaintLayer, add transformed clip path tests Created 5 years ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « third_party/WebKit/LayoutTests/hittesting/image-with-border-radius-expected.txt ('k') | third_party/WebKit/LayoutTests/hittesting/image-with-clip-path-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/hittesting/image-with-clip-path.html
diff --git a/third_party/WebKit/LayoutTests/hittesting/image-with-clip-path.html b/third_party/WebKit/LayoutTests/hittesting/image-with-clip-path.html
new file mode 100644
index 0000000000000000000000000000000000000000..3018f2bead4d10fcfcf906690a4b2b6ac8fa8815
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/hittesting/image-with-clip-path.html
@@ -0,0 +1,93 @@
+<!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>
« no previous file with comments | « third_party/WebKit/LayoutTests/hittesting/image-with-border-radius-expected.txt ('k') | third_party/WebKit/LayoutTests/hittesting/image-with-clip-path-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698