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
|
<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/permissions-policy/experimental-features/resources/common.js"></script>
<script src="/permissions-policy/experimental-features/resources/vertical-scroll.js"></script>
<style>
html, body {
height: 100%;
width: 100%;
}
iframe {
width: 95%;
height: 95%;
overflow: scroll;
margin-top: 200%;
}
.spacer {
width: 100%;
height: 100%;
margin-top: 100%;
margin-bottom: 100%;
}
</style>
<p> An <iframe> further below which is not allowed to block scroll.</p>
<div class="spacer"></div>
<iframe></iframe>
<p> Making sure there is room for vertical scroll </p>
<script>
"use strict";
let url = url_base + "vertical-scroll-scrollintoview.html";
let iframeElement = document.querySelector("iframe");
function iframeBounds() {
return iframeElement.getBoundingClientRect();
}
// Enabled 'vertical-scroll': scrollIntoView should work in all frames.
promise_test(async() => {
window.scrollTo(0, 0);
await loadUrlInIframe(iframeElement, url);
await sendMessageAndGetResponse(
iframeElement.contentWindow,
{type: "scrolling-element-bounds"}).then((response) => {
let iframeBoundsAtOrigin = {
x: 0,
y: 0,
width: iframeBounds().width,
height: iframeBounds().height};
let scrollingElementBounds = response.bounds;
assert_false(
rects_intersect(iframeBoundsAtOrigin, scrollingElementBounds),
"Scrolling element should not be visible in <iframe>." +
`Scrolling element's bounds is: ${rectToString(response.bounds)} ` +
"but <iframe>'s size is:" +
`${iframeBounds().width}x${iframeBounds().height}.`);
});
// Scroll the scrolling element inside the <iframe>.
await sendMessageAndGetResponse(iframeElement.contentWindow,
{type: "scroll"});
// The page should have scrolled vertically.
assert_greater_than(window.scrollY,
0,
"Main frame must scroll vertically.");
}, "Calling 'scrollIntoView()' inside a <iframe> will propagate up by" +
" default('vertical-scroll' enabled).");
// Disabled 'vertical-scroll': The scope of scrollIntoView is within the set
// of disabled frames (does not propagate to main frame).
promise_test(async() => {
window.scrollTo(0, 0);
setFeatureState(iframeElement, "vertical-scroll", "'none'");
await loadUrlInIframe(iframeElement, url);
await sendMessageAndGetResponse(
iframeElement.contentWindow,
{type: "scrolling-element-bounds"}).then((response) => {
let iframeBoundsAtOrigin = {
x: 0,
y: 0,
width: iframeBounds().width,
height: iframeBounds().height};
let scrollingElementBounds = response.bounds;
assert_false(rects_intersect(iframeBoundsAtOrigin, scrollingElementBounds),
"Scrolling element should not be visible in <iframe>." +
`Scrolling element's bounds is: ${rectToString(response.bounds)}` +
"but <iframe>'s size is:" +
`${iframeBounds().width}x${iframeBounds().height}.`);
});
// Scroll scrolling element inside the <iframe>.
await sendMessageAndGetResponse(iframeElement.contentWindow,
{type: "scroll"}).then((response) => {
// Make sure the nested <iframe> is visible.
let scrollingElementBounds = response.bounds;
let iframeBoundsAtOrigin = {
x: 0,
y: 0,
width: iframeBounds().width,
height: iframeBounds().height};
// The scrolling element should be visible inside <iframe>.
assert_true(rects_intersect(iframeBoundsAtOrigin, scrollingElementBounds),
"Scrolling element should be visible in <iframe>." +
`Scrolling element's bounds is: ${rectToString(response.bounds)}` +
"but <iframe>'s size is:" +
`${iframeBounds().width}, ${iframeBounds().height}.`);
// The page however should not have scrolled.
assert_equals(window.scrollY, 0, "Main frame must not scroll vertically.");
});
}, "Calling 'scrollIntoView()' inside a <iframe> with" +
" 'vertical-scroll none;'will not propagate upwards.");
</script>
|
