intersection-observer-with-viewport.js

// Copyright 2021 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

(async function(testRunner) {
  const {page, session, dp} = await testRunner.startWithFrameControl(
      `Tests that intersection observer works with device emulation.`);
  const RendererTestHelper =
      await testRunner.loadScript('../helpers/renderer-test-helper.js');
  const {httpInterceptor, frameNavigationHelper, virtualTimeController} =
      await (new RendererTestHelper(testRunner, dp, page)).init();

  const params = {
      deviceScaleFactor: 1,
      width: 384,
      height: 800,
      mobile: true,
      screenWidth: 384,
      screenHeight: 800,
      viewport: {x: 0, y: 0, width: 1, height: 1, scale: 1}
  };
  await dp.Emulation.setDeviceMetricsOverride(params);
  dp.Runtime.enable();
  httpInterceptor.addResponse(`http://example.com/`, `
      <html><head>
      <style>
        .tall { background-color: green; height: 3000px; }
        .short { background-color: red; height: 100px; }
      </style></head>
      <body>
        <div id='target' class='short'></div>
        <div class='tall'></div>
      </body>
      <script>
        window.addEventListener('DOMContentLoaded', () => {
          const observer = new IntersectionObserver((entries, observer) => {
            for (const entry of entries) {
              console.log(entry.target.id + ' intersecting ' +
                  entry.isIntersecting);
            }
          });
          observer.observe(document.querySelector('#target'));
        });
      </script>
  `);
  await virtualTimeController.initialize(1000);
  await frameNavigationHelper.navigate('http://example.com/');
  await virtualTimeController.grantTime(1000);
  session.evaluateAsync(`
      window.scrollBy(0, 200);
  `);
  await virtualTimeController.grantTime(500);
  session.evaluateAsync(`
      window.scrollTo(0, 0);
  `);
  await virtualTimeController.grantTime(500);
  testRunner.completeTest();
})
chromium/headless/test/data/protocol/emulation/intersection-observer-with-viewport.js
