test_drawSnapshot_fixed.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>Test for drawSnapshot</title>

  <script src="/tests/SimpleTest/SimpleTest.js"></script>

  <script src="/tests/SimpleTest/WindowSnapshot.js"></script>

  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>

  <style>

    html {

      height: 2000px;

      overflow: hidden;

    header {

      position: fixed;

      background: red;

      display: block;

      left: 0;

      right: 0;

      top: 0;

      height: 200px;

  </style>

  <script type="application/javascript">

  function make_canvas() {

    var canvas = document.createElement("canvas");

    canvas.setAttribute("height", 2000);

    canvas.setAttribute("width", 500);

    return canvas;

  SimpleTest.waitForExplicitFinish();

  window.addEventListener("load", runTests);

  window.scrollTo(0, 1000);

  async function runTests(event) {

    var testCanvas = make_canvas();

    var testCx = testCanvas.getContext("2d");

    var testWrapCx = SpecialPowers.wrap(testCx);

    // Take a snapshot of the page while scrolled down, so that the fixed header will

    // be visually in the middle of the root scroll frame, but should still be at the

    // top of the snapshot (since snapshots with a rect are taken relative to the document).

    var rect = new window.DOMRect(0, 0, 500, 2000);

    let image = await SpecialPowers.snapshotContext(window, rect, "rgb(255, 255, 255)", true);

    testWrapCx.drawImage(image, 0, 0);

    var refCanvas = make_canvas();

    var refCx = refCanvas.getContext("2d");

    // Construct a reference image with an equivalent red square at the top.

    refCx.fillStyle = "white";

    refCx.fillRect(0, 0, 500, 2000);

    refCx.fillStyle = "red";

    refCx.fillRect(0, 0, 500, 200);

    assertSnapshots(testCanvas, refCanvas, true, null, "position:fixed element with scrolling", "reference");

    SimpleTest.finish();

  </script>

</head>

<body>

  <header></header>

</body>

</html>