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
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test that OOP iframe's displayport is initially set</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<script src="/tests/SimpleTest/paint_listener.js"></script>
<script src="helper_fission_utils.js"></script>
<script src="apz_test_utils.js"></script>
<script>
fission_subtest_init();
FissionTestHelper.startTestPromise
.then(waitUntilApzStable)
.then(loadOOPIFrame("visible-testframe", "helper_fission_empty.html"))
.then(loadOOPIFrame("invisible-testframe", "helper_fission_empty.html"))
.then(loadOOPIFrame("scrolled-out-testframe", "helper_fission_empty.html"))
.then(loadOOPIFrame("clipped-out-testframe", "helper_fission_empty.html"))
.then(loadOOPIFrame("partially-scrolled-out-testframe", "helper_fission_empty.html"))
.then(waitUntilApzStable)
.then(test)
.then(FissionTestHelper.subtestDone, FissionTestHelper.subtestFailed);
// The actual test
async function getIframeDisplayport(iframeElement) {
let oopif_displayport = function() {
let result = getLastContentDisplayportFor("fission_empty_docelement", false);
FissionTestHelper.fireEventInEmbedder("OOPIF:Displayport", result);
return true;
};
let iframePromise = promiseOneEvent(window, "OOPIF:Displayport", null);
ok(await FissionTestHelper.sendToOopif(iframeElement, `(${oopif_displayport})()`));
let iframeResponse = await iframePromise;
dump("OOPIF response for Displayport: " +
JSON.stringify(iframeResponse.data) + "\n");
return iframeResponse.data;
}
async function test() {
const visibleIframeElement = document.getElementById("visible-testframe");
// Fully visible iframe.
let displayport = await getIframeDisplayport(visibleIframeElement);
is(displayport.width, 400, "The displayport size should be same as the iframe size");
is(displayport.height, 300, "The displayport size should be same as the iframe size");
// Fully invisible iframe (inside `overflow: hidden` parent element)
const invisibleIframeElement = document.getElementById("invisible-testframe");
displayport = await getIframeDisplayport(invisibleIframeElement);
ok(!displayport, "The displayport shouldn't have set for invisible iframe");
// Scrolled out iframe.
const scrolledOutIframeElement = document.getElementById("scrolled-out-testframe");
displayport = await getIframeDisplayport(scrolledOutIframeElement);
ok(!displayport,
"The displayport shouldn't have set for iframe far away from the parent displayport");
// Partially invisible iframe (inside `overflow: hidden` parent element)
const clippedOutIframeElement = document.getElementById("clipped-out-testframe");
displayport = await getIframeDisplayport(clippedOutIframeElement);
is(displayport.width, 400, "The displayport width should be same as the iframe width");
ok(displayport.height > 0, "The displayport height should be greater than zero");
ok(displayport.height < 300, "The displayport height should be less than the iframe height");
const partiallyScrolledOutIframeElement = document.getElementById("partially-scrolled-out-testframe");
displayport = await getIframeDisplayport(partiallyScrolledOutIframeElement);
is(displayport.width, 400, "The displayport width should be same as the iframe width");
ok(displayport.height > 0, "The displayport height should be greater than zero");
ok(displayport.height < 300, "The displayport height should be less than the iframe height");
}
</script>
<style>
iframe {
width: 400px;
height: 300px;
border: none;
}
</style>
</head>
<body>
<iframe id="visible-testframe"></iframe>
<div style="width: 300px; height: 300px; overflow: hidden;">
<div style="width: 100%; height: 1000px;"></div>
<iframe id="invisible-testframe"></iframe>
</div>
<div style="width: 300px; height: 300px; overflow: scroll;">
<div style="width: 100%; height: 10000px;"></div>
<iframe id="scrolled-out-testframe"></iframe>
</div>
<div style="width: 300px; height: 300px; overflow: hidden;">
<div style="width: 100%; height: 200px;"></div>
<iframe id="clipped-out-testframe"></iframe>
</div>
<div style="width: 300px; height: 300px; overflow: scroll;">
<div style="width: 100%; height: 200px;"></div>
<iframe id="partially-scrolled-out-testframe"></iframe>
</div>
</body>
</html>
|
