<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/gesture-util.js"></script>
<script src="../../resources/scrollbar-util.js"></script>
<style>
.oop-iframe {
width: 200px;
height: 200px;
overflow: scroll;
}
</style>
<iframe id="target-iframe" class="oop-iframe"
src="http://localhost:8080/misc/resources/internal-iframe.html">
</iframe>
<script>
// This test verifies that percent-based scroll deltas are corretly clamped in
// cross-origin iframes (or out-of-process iframes - OOPIFS).
// The expected upper-bound is percentage_delta * window.innerHeight.
//
// For this, it creates an out-of-process iframe (target-iframe) in the HTTP
// server and scrolls it clicking on its scrollbar arrows and running a
// mousewheel event hovering it.
//
// It waits for messages from the iframe with the scrolled deltas, since we
// can't access them from the here.
//
// This makes necessary to run the tests by steps, waiting for messages with the
// deltas. For this, we use a state-machine:
// The test uses these 3 major states for waiting, and a final for checking:
// 0. IDLE:
// waits for target-iframe.onload to click in the down arrow and
// move to state WAITING_ARROW.
// 1. WAITING_ARROW:
// waits for target-iframe's message with the scroll delta until it reaches
// the expected value. Then, move to state CHECKING_SCROLL_STOP for 10 frames.
// If the scroll delta is updated, fails test. Otherwise, run smoothScroll
// and move to WAITING_MOUSEWHEEL.
// 2. WAITING_MOUSEWHEEL:
// waits for target-iframe's message with the scroll delta until it reaches
// the expected value. Then moves to CHECKING_SCROLL_STOP for 10 frames.
// If the scroll delta is updated, fails. Otherwise test succeeds.
const states = {
IDLE: 0, // waiting for test to begin.
WAITING_ARROW: 1, // waiting for arrow scroll target delta.
WAITING_MOUSEWHEEL: 2, // waiting for mousewheel scroll target delta.
CHECKING_SCROLL_STOP: 3, // checking if scroll delta holds.
};
// the expected flow of the test is:
// 1. startTest()
// 2. runArrow()
// {waits for message from internal-iframe with the scrolled delta}
// 3. handleMessage()
// {when the expected scroll delta is reached}
// 4. checkScrollStopAndRunMousewheel()
// 5. runMouseWheel()
// {waits for message from internal-iframe with the scrolled delta}
// 6. handleMessage()
// {when the expected scroll delta is reached}
// 7. checkScrollStopAndFinish()
// on mac, we jump form 1 to 5, since it doesn't have scrollbar arrows.
const MOUSEWHEEL_PERCENTAGE = 0.5;
const TRACK_WIDTH = calculateScrollbarThickness();
const BUTTON_WIDTH = TRACK_WIDTH;
const SCROLL_CORNER = TRACK_WIDTH;
const onMacPlatform = navigator.userAgent.includes("Mac OS X");
var scroll_test = async_test("Verify that a subscroller inside a cross-origin"
+ " iframe scrolls a maximum of 12.5% of the iframe");
var state = states.IDLE;
var iframe = document.getElementById("target-iframe");
iframe.onload = startTest;
// Scroll delta of target-iframe's subscroller. It is updated at handleMessage().
var scroll_delta;
function startTest() {
// Percent-based scrolling specific method.
if(!internals.runtimeFlags.percentBasedScrollingEnabled) {
scroll_test.name = "Percent-based scrolling disabled - test skipped "
scroll_test.done();
return;
}
else if (!internals.isSiteIsolated(iframe)) {
scroll_test.name = "No site isolation - test skipped"
scroll_test.done();
return;
}
else {
window.addEventListener("message", handleMessage);
// Skip arrow click, as Mac scrollbars doesn't have arrows.
onMacPlatform ? runMouseWheel() : runArrow();
}
}
function runArrow() {
console.log("Clicking arrow");
iframe.contentWindow.postMessage({ startScroll: true }, "*");
scrollerRect = iframe.getBoundingClientRect()
const down_arrow_x = scrollerRect.right - BUTTON_WIDTH / 2;
const down_arrow_y = scrollerRect.bottom - SCROLL_CORNER - BUTTON_WIDTH / 2;
state = states.WAITING_ARROW;
mouseClickOn(down_arrow_x, down_arrow_y);
}
async function checkScrollStopAndRunMouseWheel(targetScrollDelta) {
// Garantees that the previous scroll stopped.
state = states.CHECKING_SCROLL_STOP;
await conditionHolds(() => {
return scroll_delta == targetScrollDelta});
runMouseWheel();
}
async function runMouseWheel() {
console.log("Running mousewheel ", MOUSEWHEEL_PERCENTAGE * 100, "% = ",
MOUSEWHEEL_PERCENTAGE * iframe.clientHeight);
iframe.contentWindow.postMessage({ startScroll: true }, "*");
state = states.WAITING_MOUSEWHEEL;
scrollerRect = iframe.getBoundingClientRect()
const down_arrow_x = scrollerRect.right - BUTTON_WIDTH / 2;
const down_arrow_y = scrollerRect.bottom - SCROLL_CORNER - BUTTON_WIDTH / 2;
await smoothScroll(MOUSEWHEEL_PERCENTAGE,
scrollerRect.top + 10,
scrollerRect.left + 10,
GestureSourceType.MOUSE_INPUT,
"down",
SPEED_INSTANT /* speed_in_pixels_s */,
false /* precise_scrolling_deltas */,
false /* scroll_by_page */,
false /* cursor_visible */,
true /* scroll_by_percentage */);
}
async function checkScrollStopAndFinish(targetScrollDelta) {
// Guarantees that the previous scroll stopped.
state = states.CHECKING_SCROLL_STOP;
await conditionHolds(() => {
return scroll_delta == targetScrollDelta});
scroll_test.done();
}
function handleMessage(event) {
scroll_test.step(() => {
scroll_delta = event.data.deltaY;
switch(state) {
case states.WAITING_ARROW:
console.log("Arrow down: ", scroll_delta);
assert_less_than_equal(
scroll_delta,
SCROLLBAR_SCROLL_PERCENTAGE * window.innerHeight);
if (scroll_delta == SCROLLBAR_SCROLL_PERCENTAGE * window.innerHeight)
checkScrollStopAndRunMouseWheel(SCROLLBAR_SCROLL_PERCENTAGE * window.innerHeight);
break;
case states.WAITING_MOUSEWHEEL:
console.log("Mousewheel: ", scroll_delta);
assert_less_than_equal(
scroll_delta,
MOUSEWHEEL_PERCENTAGE * window.innerHeight);
if (event.data.deltaY == MOUSEWHEEL_PERCENTAGE * window.innerHeight)
checkScrollStopAndFinish(MOUSEWHEEL_PERCENTAGE * window.innerHeight);
break;
case states.CHECKING_SCROLL_STOP:
console.log(scroll_delta);
}
});
}
</script>
Codebase Browser
chromium