third_party/WebKit/LayoutTests/hittesting/image-with-clip-path.html - Issue 1506053003: Include clip-path and border radius when hit testing boxes

Side by Side 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 unified diff | 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 »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE HTML>

	2 <script src="../resources/js-test.js"></script>

	3 <script>

	4 function test() {

	5 // Check that clip path affects hit testing for the first row of images.

	6 // These images are offset with top/left.

	7 // (75,125) is outside the triangular clip path, (125,75) is inside it.

	8 shouldNotBe("document.elementFromPoint(75, 125).id", "'imageWithReferenc eClipPath'");

	9 shouldBe("document.elementFromPoint(125, 75).id", "'imageWithReferenceCl ipPath'");

	10 // Same test as above but for a shape-based clip path offset by 100px.

	11 shouldNotBe("document.elementFromPoint(75+100, 125).id", "'imageWithShap eClipPath'");

	12 shouldBe("document.elementFromPoint(125+100, 75).id", "'imageWithShapeCl ipPath'");

	13

	14 // Check that clip path affects hit testing for the second row. These

	15 // images are transformed by a container by (25,25) and each has a

	16 // 3d rotation causing the images to be horizontally squished. The test

	17 // coordinates are tight and will fail without the Y rotation.

	18 // (100,255) and (135,175) are outside the triangular clip path.

	19 // (115,175) and (120,225) are inside the triangular clip path.

	20 shouldNotBe("document.elementFromPoint(100, 225).id", "'transformedWithR eferenceClipPath'");

	21 shouldNotBe("document.elementFromPoint(135, 175).id", "'transformedWithR eferenceClipPath'");

	22 shouldBe("document.elementFromPoint(115, 175).id", "'transformedWithRefe renceClipPath'");

	23 shouldBe("document.elementFromPoint(120, 225).id", "'transformedWithRefe renceClipPath'");

	24 // Same test as above but for a shape-based clip path offset by 100px.

	25 shouldNotBe("document.elementFromPoint(100+100, 225).id", "'transformedW ithShapeClipPath'");

	26 shouldNotBe("document.elementFromPoint(135+100, 175).id", "'transformedW ithShapeClipPath'");

	27 shouldBe("document.elementFromPoint(115+100, 175).id", "'transformedWith ShapeClipPath'");

	28 shouldBe("document.elementFromPoint(120+100, 225).id", "'transformedWith ShapeClipPath'");

	29 }

	30 </script>

	31 <style>

	32 .referenceClipPath {

	33 -webkit-clip-path: url(#referenceClipPathTopLeft);

	34 clip-path: url(#referenceClipPathTopLeft);

	35 width: 100px;

	36 height: 100px;

	37 position: absolute;

	38 }

	39 .referenceClipPath:hover {

	40 background: green;

	41 }

	42 .shapeClipPath {

	43 -webkit-clip-path: polygon(0% 0%, 100% 100%, 100% 0%);

	44 clip-path: polygon(0% 0%, 100% 100%, 100% 0%);

	45 width: 100px;

	46 height: 100px;

	47 position: absolute;

	48 }

	49 .shapeClipPath:hover {

	50 background: green;

	51 }

	52 #imageWithReferenceClipPath {

	53 top: 50px;

	54 left: 50px;

	55 }

	56 #imageWithShapeClipPath {

	57 top: 50px;

	58 left: 150px;

	59 }

	60 #transformedDivContainer {

	61 position: absolute;

	62 top: 0;

	63 left: 0;

	64 transform: translate3d(25px, 25px, 0);

	65 }

	66 #transformedWithReferenceClipPath {

	67 top: 125px;

	68 left: 25px;

	69 transform: rotateY(60deg);

	70 }

	71 #transformedWithShapeClipPath {

	72 top: 125px;

	73 left: 125px;

	74 transform: rotateY(60deg);

	75 }

	76 </style>

	77 <body onload="test()">

	78 <p>Image hit testing should not include clipped-out regions.</p>

	79 <svg width="100" height="0">

	80 <defs>

	81 <clipPath id="referenceClipPathTopLeft" clipPathUnits="objectBoundin gBox">

	82 <path id="path" d="M 0 0 L 100 100 L 100 0Z" />

	83 </clipPath>

	84 </defs>

	85 </svg>

	86 <img id="imageWithReferenceClipPath" class="referenceClipPath" src="data:ima ge/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w3 8GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==">

	87 <img id="imageWithShapeClipPath" class="shapeClipPath" src="data:image/png;b ase64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIB KE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==">

	88 <div id="transformedDivContainer">

	89 <img id="transformedWithReferenceClipPath" class="referenceClipPath" src ="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI 12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==">

	90 <img id="transformedWithShapeClipPath" class="shapeClipPath" src="data:i mage/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/ w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==">

	91 </div>

	92 <div id="console"></div>

	93 </body>

OLD	NEW