1 <html xmlns=
"http://www.w3.org/1999/xhtml">
3 https://bugzilla.mozilla.org/show_bug.cgi?id=500174
6 <title>Test pointer events for clip-path on non-SVG elements
</title>
7 <script src=
"/tests/SimpleTest/SimpleTest.js"></script>
8 <link rel=
"stylesheet" type=
"text/css" href=
"/tests/SimpleTest/test.css" />
11 <script class=
"testbody" type=
"text/javascript">
14 SimpleTest.waitForExplicitFinish();
17 var div = document.getElementById(
"div");
18 // Get the coords of the origin of the SVG canvas:
19 var originX = div.offsetLeft;
20 var originY = div.offsetTop;
23 elementFromPoint = document.elementFromPoint(originX +
18, originY +
30);
24 isnot(elementFromPoint, div,
"Outside left edge of clipped area");
26 elementFromPoint = document.elementFromPoint(originX +
22, originY +
30);
27 is(elementFromPoint, div,
"Inside left edge of clipped area");
29 elementFromPoint = document.elementFromPoint(originX +
30, originY +
18);
30 isnot(elementFromPoint, div,
"Outside top edge of clipped area");
32 elementFromPoint = document.elementFromPoint(originX +
30, originY +
22);
33 is(elementFromPoint, div,
"Inside top edge of clipped area");
35 elementFromPoint = document.elementFromPoint(originX +
42, originY +
30);
36 isnot(elementFromPoint, div,
"Outside right edge of clipped area");
38 elementFromPoint = document.elementFromPoint(originX +
38, originY +
30);
39 is(elementFromPoint, div,
"Inside right edge of clipped area");
41 elementFromPoint = document.elementFromPoint(originX +
30, originY +
42);
42 isnot(elementFromPoint, div,
"Outside bottom edge of clipped area");
44 elementFromPoint = document.elementFromPoint(originX +
30, originY +
38);
45 is(elementFromPoint, div,
"Inside bottom edge of clipped area");
52 <a target=
"_blank" href=
"https://bugzilla.mozilla.org/show_bug.cgi?id=500174">Mozilla Bug
500174</a>
56 <svg xmlns=
"http://www.w3.org/2000/svg" width=
"100%" height=
"100%" id=
"svg">
59 <rect x=
"20" y=
"20" width=
"20" height=
"20"/>
63 <div id=
"div" style=
"width:100px; height:100px; clip-path:url(#clip)"></div>