author Jan Henning <>
Fri, 11 Jan 2019 20:36:16 +0000
changeset 453548 7b00521b6f3176cb88698b4773d9be13f0e54b2e
child 453553 39207d39e5c2d3a8980bc910820c8b37f812b77e
permissions -rw-r--r--
Bug 1498812 - Part 4: Add scroll position test that is specifically testing the Visual Viewport. r=mikedeboer The existing tests didn't catch this problem, because calling scrollTo(), which is both what a) the session store and session history itself are currently using to set the scroll position to be restored, as well as b) how the existing session store test is setting the page up to be scrolled ready for testing forces both the layout and visual viewport positions to the respective coordinates, even if the same configuration of visual and layout viewport offsets could never be achieved through manual scrolling (i.e. bug 1516056). This then triggers all the expected events and makes it so that reading the scroll position through the layout viewport returns the expected values, which is why the existing tests never noticed that something is off. Therefore, we introduce a test here that has a page where the layout viewport can never scroll (at least horizontally) and where we simulate scrolling by actually inputting fake touch events instead of simply calling scrollTo(). This will result in only the visual viewport scrolling, ensuring that we can properly test the new expected behaviour of the session store and session history. Because layout and visual viewport scroll positions aren't necessarily updated at exactly the same time and the session store is currently still relying on the conventional "scroll" events (relating to the layout viewport), which means the tests have to rely on the same events, too, we don't yet switch all session store tests to generally verify the current scroll position of the page using the visual viewport, and temporarily make this only opt-in via the corresponding helper function in head_scroll.js. I know that the proper way to reference "foreign" files in text manifests is to use !/absolute/path/to/file/helper.js, but as one of the files originally comes from a chrome mochitest and the other one (apz_test_utils.js) doesn't and this test itself is a chrome mochitest, this was the best way I found to get both files copied into the correct directory on the test device so the test could access them. Differential Revision:

  <meta charset="utf-8">
  <title>Various scroll position tests for the mobile session store, dealing specifically with the Visual Viewport</title>
  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/AddTask.js"></script>
  <link rel="stylesheet" type="text/css" href="chrome://global/skin"/>
  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
  <script type="application/javascript" src="head.js"></script>
  <script type="application/javascript" src="head_scroll.js"></script>
  <script type="application/javascript" src="apz_test_utils.js"></script>
  <script type="application/javascript" src="apz_test_native_event_utils.js"></script>
  <script type="application/javascript">
  /* import-globals-from ../../../../../gfx/layers/apz/test/mochitest/apz_test_utils.js */
  /* import-globals-from ../../../../../gfx/layers/apz/test/mochitest/apz_test_native_event_utils.js */

  /** Tests for Bug 1498812 **/

  "use strict";


  // The chrome window and friends.
  let chromeWin = Services.wm.getMostRecentWindow("navigator:browser");
  let BrowserApp = chromeWin.BrowserApp;

  const BASE = "";
  // This is a plain desktop page without any meta viewport tags,
  // so the layout viewport will always fill the full page width.
  const URL = BASE + "basic_article.html";
  // A mobile page using width=device-width, which leads to the same result.
  const URL2 = BASE + "basic_article_mobile.html";

  async function scrollRight(window) {
    // This listener will trigger the test to continue once APZ is done with
    // processing the scroll.
    let transformEnd = promiseNotification("APZ:TransformEnd");

    let scroll = [
        [ { x: 125, y: 100 } ],
        [ { x: 120, y: 100 } ],
        [ { x: 115, y: 100 } ],
        [ { x: 110, y: 100 } ],
        [ { x: 105, y: 100 } ],
        [ { x: 100, y: 100 } ],

    let touchIds = [0];
    let doScroll = synthesizeNativeTouchSequences(document.body, scroll, null, touchIds);
    while (!;

    await transformEnd;

    await promiseApzRepaintsFlushed(window);

  // Track the tabs where the tests are happening.
  let tabScroll;

  function cleanupTabs() {
    if (tabScroll) {
      tabScroll = null;

  SimpleTest.registerCleanupFunction(function() {

  let ss = Cc[";1"].getService(Ci.nsISessionStore);

  add_task(async function test_sessionStoreScrollPositionVisualViewport() {
    let zoomIn = {x: 0, y: 0, zoom: 4 };
    let scrollPos1, scrollPos2;
    // Creates a tab, sets a scroll position and zoom level and closes the tab.
    async function createAndRemoveTab() {
        // Create a new tab.
        tabScroll = BrowserApp.addTab(URL);
        let browser = tabScroll.browser;
        await promiseBrowserEvent(browser, "pageshow");

        // Zoom in, so we can scroll to the right.
        let scrolled = promiseTabEvent(browser, "SSTabScrollCaptured");
        setScrollPosition(browser, zoomIn);
        await scrolled;

        // Check that we've actually zoomed.
        checkScroll(browser, zoomIn);

        scrolled = promiseTabEvent(browser, "SSTabScrollCaptured");
        await scrollRight(browser.contentWindow);

        // The above scroll only scrolled the visual viewport, not the layout
        // viewport. As long as we don't have a scroll event for the visual
        // viewport, we need to fake a scroll event here in order to induce
        // the session store to record the scroll position again (bug 1500554).
        browser.dispatchEvent(new browser.contentWindow.UIEvent("scroll"));
        await scrolled;

        scrollPos1 = getScrollPosition(browser, {visualScrollPos: true});
        isnot(scrollPos1.x, 0, "we should be scrolled to the right");
        is(scrollPos1.y, 0, "we scrolled horizontally");

        // Navigate to a different page and scroll/zoom there as well.
        await promiseBrowserEvent(browser, "pageshow");

        scrolled = promiseTabEvent(browser, "SSTabScrollCaptured");
        setScrollPosition(browser, zoomIn);
        await scrolled;
        checkScroll(browser, zoomIn);

        scrolled = promiseTabEvent(browser, "SSTabScrollCaptured");
        await scrollRight(browser.contentWindow);

        // Fake a scroll event (see above).
        browser.dispatchEvent(new browser.contentWindow.UIEvent("scroll"));
        await scrolled;

        scrollPos2 = getScrollPosition(browser, {visualScrollPos: true});
        isnot(scrollPos2.x, 0, "we should be scrolled to the right");
        is(scrollPos2.y, 0, "we scrolled horizontally");

        // Remove the tab.
        let closed = promiseTabEvent(browser, "SSTabCloseProcessed");
        await closed;

    await createAndRemoveTab();

    // Check the live scroll data for the current history entry...
    let tabData = ss.getClosedTabs(chromeWin)[0];
    let {scrolldata} = tabData;
    todo_is(scrolldata.scroll, getScrollString(scrollPos2), "stored scroll position is correct");
    ok(fuzzyEquals(scrolldata.zoom.resolution, scrollPos2.zoom), "stored zoom level is correct");

    // ... and the presState from the previous history entry.
    let {index} = tabData;
    index -= 1; // session history uses 1-based index
    let {entries} = tabData;
    let prevPage = entries[index - 1];
    todo(prevPage.presState, "presState exists");
    if (prevPage.presState) {
      let presState = prevPage.presState[0];
      // The presState operates in app units, while all other scroll positions
      // in JS-land use CSS pixels.
      presState = presStateToCSSPx(presState);
      todo_is(presState.scroll, getScrollString(scrollPos1), "stored scroll position for previous page is correct");
      ok(fuzzyEquals(presState.res, scrollPos1.zoom), "stored zoom level for previous page is correct");

<a target="_blank" href="">Mozilla Bug 1498812</a>
<p id="display"></p>
<div id="content" style="display: none">

<pre id="test">