Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Introduce "Feature Policy: vertical-scroll" #9861

Closed
wants to merge 1 commit into from
Closed

Introduce "Feature Policy: vertical-scroll" #9861

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
35 changes: 35 additions & 0 deletions feature-policy/experimental-features/resources/feature-policy-vertical-scroll.html
View file
Open in desktop
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<style>
html, body, div {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
border: 0;
}
div {background-color: gold;}
</style>
<div>
</div>
<script>
const element = document.querySelector('div');
window.scroll_to_view = false;

function setup() {
var href = window.location.href;
var query = href.substring(href.indexOf("?q=") + 3);
switch (query) {
case "touchstart":
case "touchmove":
case "wheel":
element.addEventListener(query, (e) => { e.preventDefault(); });
break;
case "touchaction":
element.style.touchAction = "pan-x";
break;
case "script":
element.scrollIntoView({behavior: "instant"});
}
}
window.addEventListener("load", setup);
</script>
57 changes: 57 additions & 0 deletions feature-policy/experimental-features/resources/vertical_scroll_common.js
View file
Open in desktop
@@ -0,0 +1,57 @@
// Common method used in vertical scrolling tests.
const same_origin_url = "/feature-policy/experimental-features/resources/feature-policy-vertical-scroll.html";
const cross_origin_url = "https://{{domains[www]}}:{{ports[https][0]}}" + same_origin_url;
const large_number = 1000000;
const visible_rect = new DOMRect(0, 0, window.innerWidth, window.innerHeight);

function rect_contains(rect, x, y) {
return (rect.left <= x) && (rect.right >= x) &&
(rect.top <= y) && (rect.bottom >= y);
}

function rect_intersects(rect1, rect2) {
return rect_contains(rect1, rect2.left, rect2.top) ||
rect_contains(rect1, rect2.left, rect2.bottom) ||
rect_contains(rect1, rect2.right, rect2.top) ||
rect_contains(rect1, rect2.right, rect2.bottom);
}

function iframe() {
return document.querySelector("iframe");
}

// Returns a promise which is resolved when the <iframe> is navigated to |url|
// and "load" handler has been called.
function loadUrlInIframe(url) {
return new Promise((resolve) => {
iframe().addEventListener("load", resolve);
iframe().src = url;
});
}

// Returns a promise which is resolved as soon as "message" is received.
function waitForMessage(message) {
return new Promise((resolve) => {
function handler(e) {
if (e.data !== message)
return;
window.removeEventListener("message", handler);
resolve();
}
window.addEventListener("message", handler);
});
}

// Returns a promise which is resolved when the testing API for input is loaded.
function testAPIReady() {
return new Promise((resolve) => {
function checkForAPI() {
if (window.touchScrollDown) {
resolve();
} else {
step_timeout(checkForAPI);
}
}
checkForAPI();
});
}
60 changes: 60 additions & 0 deletions feature-policy/experimental-features/vertical-scroll-programmatic.sub.html
View file
Open in desktop
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/feature-policy/experimental-features/resources/vertical_scroll_common.js"></script>
<style>
html, body {
border: 0;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

iframe {
width: 95%;
height: 95%;
border: solid 1px gold;
margin-left: 0px;
margin-top: 0px;
}
</style>
<p> An &lt;iframe&gt; further below which is not allowed to block scroll.</p>
<iframe></iframe>
<p style="margin-top: 10000px"> Making sure there is room for vertical scroll </p>
<script>
"use strict";

test(() => {
window.scrollTo(large_number, large_number);
assert_false(
rect_intersects(visible_rect, iframe().getBoundingClientRect()),
"<iframe> bounds are inside visible rect:" +
JSON.stringify(iframe().getBoundingClientRect().toJSON()));
iframe().contentDocument.body.scrollIntoView({behavior: "instant"});
assert_true(
rect_intersects(visible_rect, iframe().getBoundingClientRect()),
"<iframe> bounds are outside visible rect:" +
JSON.stringify(iframe().getBoundingClientRect().toJSON()));
}, "Sanity-check: element.scrollIntoView() works fine on this page.");

promise_test(async() => {
window.scrollTo(large_number, large_number);
await loadUrlInIframe(same_origin_url + "?q=script");
assert_true(
rect_intersects(visible_rect, iframe().getBoundingClientRect()),
"Expected the <iframe> to scroll into view but its bounds are: " +
JSON.stringify(iframe().getBoundingClientRect().toJSON()));
},
"Verify a same-origin frame can always scroll into view.");

promise_test(async() => {
window.scrollTo(large_number, large_number);
await loadUrlInIframe(cross_origin_url + "?q=script");
assert_false(
rect_intersects(visible_rect, iframe().getBoundingClientRect()),
"Expected the <iframe> not to scroll into view but its bounds are: " +
JSON.stringify(iframe().getBoundingClientRect().toJSON()));
},
"Verify a cross-origin frame cannot scroll into view.");
</script>
60 changes: 60 additions & 0 deletions feature-policy/experimental-features/vertical-scroll-touchaction-manual.sub.html
View file
Open in desktop
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/feature-policy/experimental-features/resources/vertical_scroll_common.js"></script>
<style>
html, body {
border: 0;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

iframe {
width: 95%;
height: 95%;
border: solid 1px gold;
margin-left: 0px;
margin-top: 0px;
}
</style>
<p> An &lt;iframe&gt; further below which is not allowed to block scroll.</p>
<iframe></iframe>
<p style="margin-top: 10000px"> Making sure there is room for vertical scroll </p>
<script>
"use strict";

promise_test(async() => {
await testAPIReady();
window.scrollTo(0, 0);
await inject_input();
assert_greater_than(
document.scrollingElement.scrollTop,
0,
`scrollTop did not increase.`);
}, `Sanity-check: make sure page does scroll.` );

for (var url of [same_origin_url, cross_origin_url]) {
let same_origin = (url === same_origin_url);
promise_test(async(test_instance) => {
await testAPIReady();
let same_origin = test_instance.properties.same_origin;
window.scrollTo(0, 0);
let initial_scroll_top = document.scrollingElement.scrollTop;
await loadUrlInIframe(test_instance.properties.frame_url);
// Tap down inside the <iframe> and then apply a gesture scroll.
await inject_input();
let new_scroll_top = document.scrollingElement.scrollTop;
assert_equals(new_scroll_top > initial_scroll_top, !same_origin,
`Did ${same_origin ? "not" : ""} expect vertical scroll.` +
`(scrollTop changed from ${initial_scroll_top} to ${new_scroll_top}`);
},
`Verify that a ${same_origin ? "same" : "cross"}-origin frame can ` +
`${same_origin ? "" : "not "}block scrolling by canceling "touchaction".`,
{
"same_origin": same_origin,
"frame_url": `${url}?q=touchaction`,
});
}
</script>
60 changes: 60 additions & 0 deletions feature-policy/experimental-features/vertical-scroll-touchmove-manual.sub.html
View file
Open in desktop
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/feature-policy/experimental-features/resources/vertical_scroll_common.js"></script>
<style>
html, body {
border: 0;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

iframe {
width: 95%;
height: 95%;
border: solid 1px gold;
margin-left: 0px;
margin-top: 0px;
}
</style>
<p> An &lt;iframe&gt; further below which is not allowed to block scroll.</p>
<iframe></iframe>
<p style="margin-top: 10000px"> Making sure there is room for vertical scroll </p>
<script>
"use strict";

promise_test(async() => {
await testAPIReady();
window.scrollTo(0, 0);
await inject_input();
assert_greater_than(
document.scrollingElement.scrollTop,
0,
`scrollTop did not increase.`);
}, `Sanity-check: make sure page does scroll.` );

for (var url of [same_origin_url, cross_origin_url]) {
let same_origin = (url === same_origin_url);
promise_test(async(test_instance) => {
await testAPIReady();
let same_origin = test_instance.properties.same_origin;
window.scrollTo(0, 0);
let initial_scroll_top = document.scrollingElement.scrollTop;
await loadUrlInIframe(test_instance.properties.frame_url);
// Tap down inside the <iframe> and then apply a gesture scroll.
await inject_input();
let new_scroll_top = document.scrollingElement.scrollTop;
assert_equals(new_scroll_top > initial_scroll_top, !same_origin,
`Did ${same_origin ? "not" : ""} expect vertical scroll.` +
`(scrollTop changed from ${initial_scroll_top} to ${new_scroll_top}`);
},
`Verify that a ${same_origin ? "same" : "cross"}-origin frame can ` +
`${same_origin ? "" : "not "}block scrolling by canceling "touchmove".`,
{
"same_origin": same_origin,
"frame_url": `${url}?q=touchmove`,
});
}
</script>
60 changes: 60 additions & 0 deletions feature-policy/experimental-features/vertical-scroll-touchstart-manual.sub.html
View file
Open in desktop
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/feature-policy/experimental-features/resources/vertical_scroll_common.js"></script>
<style>
html, body {
border: 0;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

iframe {
width: 95%;
height: 95%;
border: solid 1px gold;
margin-left: 0px;
margin-top: 0px;
}
</style>
<p> An &lt;iframe&gt; further below which is not allowed to block scroll.</p>
<iframe></iframe>
<p style="margin-top: 10000px"> Making sure there is room for vertical scroll </p>
<script>
"use strict";

promise_test(async() => {
await testAPIReady();
window.scrollTo(0, 0);
await inject_input();
assert_greater_than(
document.scrollingElement.scrollTop,
0,
`scrollTop did not increase.`);
}, `Sanity-check: make sure page does scroll.` );

for (var url of [same_origin_url, cross_origin_url]) {
let same_origin = (url === same_origin_url);
promise_test(async(test_instance) => {
await testAPIReady();
let same_origin = test_instance.properties.same_origin;
window.scrollTo(0, 0);
let initial_scroll_top = document.scrollingElement.scrollTop;
await loadUrlInIframe(test_instance.properties.frame_url);
// Tap down inside the <iframe> and then apply a gesture scroll.
await inject_input();
let new_scroll_top = document.scrollingElement.scrollTop;
assert_equals(new_scroll_top > initial_scroll_top, !same_origin,
`Did ${same_origin ? "not" : ""} expect vertical scroll.` +
`(scrollTop changed from ${initial_scroll_top} to ${new_scroll_top}`);
},
`Verify that a ${same_origin ? "same" : "cross"}-origin frame can ` +
`${same_origin ? "" : "not "}block scrolling by canceling "touchstart".`,
{
"same_origin": same_origin,
"frame_url": `${url}?q=touchstart`,
});
}
</script>