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

Side by Side Diff: LayoutTests/fast/events/hit-test-clip-path-reference.html

Issue 1292333004: Make hit-test support clip-path references using svg clipPath (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: rebaseline for virutal test suites Created 5 years, 4 months 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
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <style>
3 #d {
4 width: 180px;
5 height: 180px;
6 border: 1px solid black;
7 }
8 #clip {
9 width: 160px;
10 height: 160px;
11 margin: 10px;
12 background-color: green;
13 z-index: 1;
14 -webkit-clip-path: url(#c1);
15 }
16 #reference-box {
17 width: 64px;
18 height: 64px;
19 background-color: red;
20 position: relative;
21 top: -122px;
22 left: 58px;
23 z-index: -1;
24 }
25 </style>
26 <svg height="0">
27 <clipPath id="c1" clipPathUnits="objectBoundingBox">
28 <circle cx="0.5" cy="0.5" r="0.2">
29 </clipPath>
30 </svg>
31 <div id="d">
32 <div id="clip"></div>
33 <div id="reference-box"></div>
34 </div>
35
36 <script src="../../resources/js-test.js"></script>
37 <script>
38 description("Test that hit-test work with clip-path using svg reference");
39
40 onload = function() {
41 var clipElement = document.getElementById('clip');
42 var referenceElement = document.getElementById('reference-box');
43 var resultString = "";
44
45 var circleBoundingRect = referenceElement.getBoundingClientRect();
46 var center_x = (circleBoundingRect.left + circleBoundingRect.right) / 2;
47 var center_y = (circleBoundingRect.top + circleBoundingRect.bottom) / 2;
48 var pointsInPath = [
49 {x: center_x, y: center_y},
50 {x: center_x - 5, y: center_y - 5},
51 {x: center_x + 5, y: center_y + 5},
52 {x: center_x - 5, y: center_y + 5},
53 {x: center_x + 5, y: center_y - 5},
54 ];
55
56 var pointsNotInPath = [
57 {x: circleBoundingRect.left,
58 y: circleBoundingRect.top},
59 {x: circleBoundingRect.left - 1,
60 y: circleBoundingRect.top - 1},
61 {x: circleBoundingRect.left + 1,
62 y: circleBoundingRect.top + 1},
63 ];
64
65 pointsInPath.forEach( function(point) {
66 var pass = (clipElement == document.elementFromPoint(point.x, point.y));
67 resultString += ((pass) ? "PASS" : "FAIL") + " path contains point at (" + point.x + ", " + point.y + ")\n";
68 });
69
70 pointsNotInPath.forEach( function(point) {
71 var pass = (clipElement != document.elementFromPoint(point.x, point.y));
72 resultString += ((pass) ? "PASS" : "FAIL") + " path does not contain poi nt at (" + point.x + ", " + point.y + ")\n";
73 });
74 debug(resultString);
75 }
76
77 </script>
OLDNEW
« no previous file with comments | « LayoutTests/TestExpectations ('k') | LayoutTests/fast/events/hit-test-clip-path-reference-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698