<!DOCTYPE html>

<html>

<meta name="viewport" content="width=device-width,initial-scale=1">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/resources/testdriver.js"></script>

<script src="/resources/testdriver-actions.js"></script>

<script src="/resources/testdriver-vendor.js"></script>

<script src="support/action-utils.js"></script>

<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1951021">

<link rel="help" href="https://drafts.csswg.org/cssom-view/#perform-a-scroll">

<style>

body {

margin: 0px;

padding: 0px;

}

#container {

position: fixed;

width: 100%;

height: 100%;

top: 0px;

left: 0px;

}

#banner {

position: fixed;

bottom: 0px;

left: 0px;

right: 0px;

background-color: blue;

}

</style>

<div id="anchor"></div>

<div id="container">

<aside id="banner"></aside>

</div>

<script>

promise_test(async t => {

assert_equals(window.scrollY, 0);

assert_equals(visualViewport.scale, 1.0);

assert_equals(visualViewport.pageTop, 0);

// Pinch zoom in this document.

await pinch_zoom_action();

assert_greater_than(visualViewport.scale, 1.0);

// Suppose that the pinch zoom-in gesture at the center of the document did

// move the visual viewport offset.

assert_greater_than(visualViewport.pageTop, 0);

// Move to zero offset of the visual viewport.

let scrollPromise =

new Promise(resolve => visualViewport.addEventListener("scroll", resolve));

document.querySelector('#anchor').scrollIntoView({ behavior: "instant" });

await scrollPromise;

assert_equals(visualViewport.pageTop, 0);

// Now trigger a scrollIntoView call to an element inside nested position:fixed elements.

scrollPromise =

new Promise(resolve => visualViewport.addEventListener("scroll", resolve));

document.querySelector("#banner").scrollIntoView({ behavior: "instant" });

await scrollPromise;

assert_greater_than(visualViewport.pageTop, 0);

}, "Element.scrollIntoView scrolls visually to an element in nested position: fixed elements");

</script>