1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
<!DOCTYPE HTML>
<html>
<head>
<title>Hit-testing an iframe covered by an element with a clip-path</title>
<script type="application/javascript" src="apz_test_utils.js"></script>
<script type="application/javascript" src="apz_test_native_event_utils.js"></script>
<script type="application/javascript" src="/tests/SimpleTest/paint_listener.js"></script>
<meta name="viewport" content="width=device-width"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
html, body { margin: 0; }
#clipped {
width: 400px;
height: 400px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
clip-path: circle(150px);
}
iframe {
width: 400px;
height: 300px;
border: 0px solid black;
}
</style>
</head>
<body style="height: 5000px">
<iframe id="sub" srcdoc="<!DOCTYPE html><body style='height: 5000px'><div style='position: absolute; top: 150px; left: 150px; width: 300px; height: 300px; background-color: blue;'></div>
when this page loads, the blue rect should be behind the green circle. mousing over the area with the blue rect and scrolling with the wheel or trackpad should cause the iframe to scroll."></iframe>
<div id="clipped"></div>
<script>
async function test() {
var config = getHitTestConfig();
var utils = config.utils;
// layerize the iframe
var subwindow = document.getElementById("sub").contentWindow;
var subscroller = subwindow.document.scrollingElement;
var subutils = SpecialPowers.getDOMWindowUtils(subwindow);
subutils.setDisplayPortForElement(0, 0, 400, 1000, subscroller, 1);
await promiseApzFlushedRepaints();
var rootViewId = utils.getViewId(document.scrollingElement);
var iframeViewId = subutils.getViewId(subscroller);
var layersId = utils.getLayersId();
is(subutils.getLayersId(), layersId, "iframe is not OOP");
checkHitResult(hitTest({ x: 10, y: 10 }),
APZHitResultFlags.VISIBLE,
iframeViewId,
layersId,
`(simple) uninteresting point inside the iframe`);
checkHitResult(hitTest({ x: 500, y: 10 }),
APZHitResultFlags.VISIBLE,
rootViewId,
layersId,
`(simple) uninteresting point in the root scroller`);
checkHitResult(hitTest({ x: 110, y: 110 }),
APZHitResultFlags.VISIBLE,
iframeViewId,
layersId,
`(simple) point in the iframe behind overlaying div, but outside the bounding box of the clip path`);
checkHitResult(hitTest({ x: 160, y: 160 }),
APZHitResultFlags.VISIBLE,
iframeViewId,
layersId,
`(simple) point in the iframe behind overlaying div, inside the bounding box of the clip path, but outside the actual clip shape`);
checkHitResult(hitTest({ x: 300, y: 200 }),
APZHitResultFlags.VISIBLE,
rootViewId,
layersId,
`(simple) point inside the clip shape of the overlaying div`);
// Now we turn the "simple" clip-path that WR can handle into a more complex
// one that needs a mask. Then run the checks again; the expected results for
// WR are slightly different
document.getElementById("clipped").style.clipPath = "polygon(" +
"50px 200px, 75px 75px, 200px 50px, 205px 55px, 210px 50px, " +
"215px 55px, 220px 50px, 225px 55px, 230px 50px, 235px 55px, " +
"240px 50px, 245px 55px, 250px 50px, 255px 55px, 260px 50px, " +
"265px 55px, 270px 50px, 275px 55px, 280px 50px, 350px 200px, " +
"200px 350px)";
await promiseApzFlushedRepaints();
checkHitResult(hitTest({ x: 10, y: 10 }),
APZHitResultFlags.VISIBLE,
iframeViewId,
layersId,
`(complex) uninteresting point inside the iframe`);
checkHitResult(hitTest({ x: 500, y: 10 }),
APZHitResultFlags.VISIBLE,
rootViewId,
layersId,
`(complex) uninteresting point in the root scroller`);
checkHitResult(hitTest({ x: 110, y: 110 }),
APZHitResultFlags.VISIBLE,
iframeViewId,
layersId,
`(complex) point in the iframe behind overlaying div, but outside the bounding box of the clip path`);
checkHitResult(hitTest({ x: 160, y: 160 }),
APZHitResultFlags.VISIBLE,
iframeViewId,
layersId,
`(complex) point in the iframe behind overlaying div, inside the bounding box of the clip path, but outside the actual clip shape`);
checkHitResult(hitTest({ x: 300, y: 200 }),
APZHitResultFlags.VISIBLE,
iframeViewId,
layersId,
`(complex) point inside the clip shape of the overlaying div`);
}
waitUntilApzStable()
.then(test)
.then(subtestDone, subtestFailed);
</script>
</body></html>
|
