githubmirror/pdf.js

test/driver.js
1 635 строк53 KB
Calixte Denizet
Use the checkboxes and radio button appearances as defined in the pdf to render them in the annotation layer (bug 1802506)
12 июн 2026, 21:10
12 июн 2026, 21:10069b757
/* Copyright 2012 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
/* globals pdfjsLib, _pdfjsTestingUtils, pdfjsViewer */

import { fetchAndMergeWorkerCoverage } from "./coverage_utils.js";

const {
  AnnotationLayer,
  AnnotationMode,
  DrawLayer,
  getDocument,
  GlobalWorkerOptions,
  OutputScale,
  PDFWorker,
  PixelsPerInch,
  shadow,
  TextLayer,
  XfaLayer,
} = pdfjsLib;
const { HighlightOutliner } = _pdfjsTestingUtils;
const { GenericL10n, parseQueryString, SimpleLinkService } = pdfjsViewer;

const WAITING_TIME = 100; // ms
const CMAP_URL = "/build/generic/web/cmaps/";
const ICC_URL = "/build/generic/web/iccs/";
const STANDARD_FONT_DATA_URL = "/build/generic/web/standard_fonts/";
const WASM_URL = "/build/generic/web/wasm/";
const IMAGE_RESOURCES_PATH = "/web/images/";
const VIEWER_CSS = "../build/components/pdf_viewer.css";
const VIEWER_LOCALE = "en-US";
const WORKER_SRC = "../build/generic/build/pdf.worker.mjs";
const RENDER_TASK_ON_CONTINUE_DELAY = 5; // ms
const SVG_NS = "http://www.w3.org/2000/svg";

const md5FileMap = new Map();

function loadStyles(styles) {
  const promises = [];

  for (const file of styles) {
    promises.push(
      fetch(file)
        .then(response => {
          if (!response.ok) {
            throw new Error(response.statusText);
          }
          return response.text();
        })
        .catch(reason => {
          throw new Error(`Error fetching style (${file}): ${reason}`);
        })
    );
  }

  return Promise.all(promises);
}

function loadImage(svg_xml, ctx) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = "data:image/svg+xml;base64," + btoa(svg_xml);
    img.onload = function () {
      ctx?.drawImage(img, 0, 0);
      resolve();
    };
    img.onerror = function (e) {
      reject(new Error(`Error rasterizing SVG: ${e}`));
    };
  });
}

async function writeSVG(svgElement, ctx) {
  // We need to have UTF-8 encoded XML.
  const svg_xml = unescape(
    encodeURIComponent(new XMLSerializer().serializeToString(svgElement))
  );
  if (svg_xml.includes("background-image: url(&quot;data:image")) {
    // Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1844414
    // we load the image two times.
    await loadImage(svg_xml, null);
    await new Promise(resolve => {
      setTimeout(resolve, 10);
    });
  }

  return loadImage(svg_xml, ctx);
}

async function inlineImages(node, silentErrors = false) {
  const promises = [];

  for (const image of node.getElementsByTagName("img")) {
    const url = image.src;

    promises.push(
      fetch(url)
        .then(response => {
          if (!response.ok) {
            throw new Error(response.statusText);
          }
          return response.blob();
        })
        .then(
          blob =>
            new Promise((resolve, reject) => {
              const reader = new FileReader();
              reader.onload = () => {
                resolve(reader.result);
              };
              reader.onerror = reject;

              reader.readAsDataURL(blob);
            })
        )
        .then(
          dataUrl =>
            new Promise((resolve, reject) => {
              image.onload = resolve;
              image.onerror = evt => {
                if (silentErrors) {
                  resolve();
                  return;
                }
                reject(evt);
              };

              image.src = dataUrl;
            })
        )
        .catch(reason => {
          throw new Error(`Error inlining image (${url}): ${reason}`);
        })
    );
  }

  await Promise.all(promises);
}

async function convertCanvasesToImages(annotationCanvasMap, outputScale) {
  const results = new Map();
  const promises = [];
  const canvasToImage = (canvas, key) => {
    const { promise, resolve } = Promise.withResolvers();
    promises.push(promise);
    canvas.toBlob(blob => {
      const image = document.createElement("img");
      image.classList.add("wasCanvas");
      image.onload = function () {
        image.style.width = Math.floor(image.width / outputScale) + "px";
        resolve();
      };
      const canvasName = canvas.getAttribute("data-canvas-name");
      if (canvasName) {
        image.setAttribute("data-canvas-name", canvasName);
        let images = results.get(key);
        if (!images) {
          images = [];
          results.set(key, images);
        }
        images.push(image);
      } else {
        results.set(key, image);
      }
      image.src = URL.createObjectURL(blob);
    });
  };

  for (const [key, canvas] of annotationCanvasMap) {
    if (Array.isArray(canvas)) {
      for (const canvasItem of canvas) {
        canvasToImage(canvasItem, key);
      }
    } else {
      canvasToImage(canvas, key);
    }
  }
  await Promise.all(promises);
  return results;
}

class Rasterize {
  /**
   * For the reference tests, the full content of the various layers must be
   * visible. To achieve this, we load the common styles as used by the viewer
   * and extend them with a set of overrides to make all elements visible.
   *
   * Note that we cannot simply use `@import` to import the common styles in
   * the overrides file because the browser does not resolve that when the
   * styles are inserted via XHR. Therefore, we load and combine them here.
   */
  static get annotationStylePromise() {
    const styles = [VIEWER_CSS, "./annotation_layer_builder_overrides.css"];
    return shadow(this, "annotationStylePromise", loadStyles(styles));
  }

  static get textStylePromise() {
    const styles = [VIEWER_CSS, "./text_layer_test.css"];
    return shadow(this, "textStylePromise", loadStyles(styles));
  }

  static get drawLayerStylePromise() {
    const styles = [VIEWER_CSS, "./draw_layer_test.css"];
    return shadow(this, "drawLayerStylePromise", loadStyles(styles));
  }

  static get xfaStylePromise() {
    const styles = [VIEWER_CSS, "./xfa_layer_builder_overrides.css"];
    return shadow(this, "xfaStylePromise", loadStyles(styles));
  }

  static createContainer(viewport) {
    const svg = document.createElementNS(SVG_NS, "svg:svg");
    svg.setAttribute("width", `${viewport.width}px`);
    svg.setAttribute("height", `${viewport.height}px`);

    const foreignObject = document.createElementNS(SVG_NS, "svg:foreignObject");
    foreignObject.setAttribute("x", "0");
    foreignObject.setAttribute("y", "0");
    foreignObject.setAttribute("width", `${viewport.width}px`);
    foreignObject.setAttribute("height", `${viewport.height}px`);

    const style = document.createElement("style");
    foreignObject.append(style);

    const div = document.createElement("div");
    foreignObject.append(div);

    return { svg, foreignObject, style, div };
  }

  static createRootCSS(viewport) {
    const { scale, userUnit } = viewport;
    return [
      ":root {",
      "  --scale-round-x: 1px; --scale-round-y: 1px;",
      `  --scale-factor: ${scale};`,
      `  --user-unit: ${userUnit};`,
      `  --total-scale-factor: ${scale * userUnit};`,
      "}",
    ].join("\n");
  }

  static async annotationLayer(
    ctx,
    viewport,
    outputScale,
    annotations,
    annotationCanvasMap,
    annotationStorage,
    fieldObjects,
    page,
    imageResourcesPath,
    renderForms = false,
    optionalContentConfigPromise = null
  ) {
    try {
      const { svg, foreignObject, style, div } = this.createContainer(viewport);
      div.className = "annotationLayer";

      const [common, overrides] = await this.annotationStylePromise;
      style.textContent = `${common}\n${overrides}\n${this.createRootCSS(viewport)}`;

      const annotationViewport = viewport.clone({ dontFlip: true });
      const annotationImageMap = await convertCanvasesToImages(
        annotationCanvasMap,
        outputScale
      );

      // Rendering annotation layer as HTML.
      const parameters = {
        annotations,
        imageResourcesPath,
        renderForms,
        fieldObjects,
        optionalContentConfig: await optionalContentConfigPromise,
      };

      // Ensure that the annotationLayer gets translated.
      document.l10n.connectRoot(div);

      const annotationLayer = new AnnotationLayer({
        div,
        annotationCanvasMap: annotationImageMap,
        page,
        viewport: annotationViewport,
        linkService: new SimpleLinkService(),
        annotationStorage,
      });
      await annotationLayer.render(parameters);
      await annotationLayer.showPopups();

      // With Fluent, the translations are triggered by the MutationObserver
      // hence the translations could be not finished when we rasterize the div.
      // So in order to be sure that all translations are done, we wait for
      // them here.
      await document.l10n.translateRoots();

      // All translation should be complete here.
      document.l10n.disconnectRoot(div);

      // Inline SVG images from text annotations.
      await inlineImages(div);
      foreignObject.append(div);
      svg.append(foreignObject);

      await writeSVG(svg, ctx);
    } catch (reason) {
      throw new Error(`Rasterize.annotationLayer: "${reason?.message}".`);
    }
  }

  static async textLayer(ctx, viewport, textContent) {
    try {
      const { svg, foreignObject, style, div } = this.createContainer(viewport);
      div.className = "textLayer";

      // Items are transformed to have 1px font size.
      svg.setAttribute("font-size", 1);

      const [common, overrides] = await this.textStylePromise;
      style.textContent = `${common}\n${overrides}\n${this.createRootCSS(viewport)}`;

      // Rendering text layer as HTML.
      const textLayer = new TextLayer({
        textContentSource: textContent,
        container: div,
        viewport,
      });
      await textLayer.render();

      svg.append(foreignObject);

      await writeSVG(svg, ctx);
    } catch (reason) {
      throw new Error(`Rasterize.textLayer: "${reason?.message}".`);
    }
  }

  static async highlightLayer(ctx, viewport, textContent) {
    try {
      const { svg, foreignObject, style, div } = this.createContainer(viewport);
      const dummyParent = document.createElement("div");

      // Items are transformed to have 1px font size.
      svg.setAttribute("font-size", 1);

      const [common, overrides] = await this.drawLayerStylePromise;
      style.textContent = `${common}\n${overrides}\n${this.createRootCSS(viewport)}`;

      // Rendering text layer as HTML.
      const textLayer = new TextLayer({
        textContentSource: textContent,
        container: dummyParent,
        viewport,
      });
      await textLayer.render();

      const { pageWidth, pageHeight, textDivs } = textLayer;
      const boxes = [];
      let j = 0,
        posRegex;
      for (const { width, height, type } of textContent.items) {
        if (type) {
          continue;
        }
        const { top, left } = textDivs[j++].style;
        let x = parseFloat(left) / 100;
        let y = parseFloat(top) / 100;
        if (isNaN(x)) {
          posRegex ||= /^calc\(var\(--total-scale-factor\)\s*\*(.*)px\)$/;
          // The element is tagged so we've to extract the position from the
          // string, e.g. `calc(var(--total-scale-factor)*66.32px)`.
          let match = left.match(posRegex);
          if (match) {
            x = parseFloat(match[1]) / pageWidth;
          }

          match = top.match(posRegex);
          if (match) {
            y = parseFloat(match[1]) / pageHeight;
          }
        }
        if (width === 0 || height === 0) {
          continue;
        }
        boxes.push({
          x,
          y,
          width: width / pageWidth,
          height: height / pageHeight,
        });
      }
      // We set the borderWidth to 0.001 to slightly increase the size of the
      // boxes so that they can be merged together.
      const outliner = new HighlightOutliner(boxes, /* borderWidth = */ 0.001);
      // We set the borderWidth to 0.0025 in order to have an outline which is
      // slightly bigger than the highlight itself.
      // We must add an inner margin to avoid to have a partial outline.
      const outlinerForOutline = new HighlightOutliner(
        boxes,
        /* borderWidth = */ 0.0025,
        /* innerMargin = */ 0.001
      );
      const drawLayer = new DrawLayer({ pageIndex: 0 });
      drawLayer.setParent(div);
      const outlines = outliner.getOutlines();
      drawLayer.draw(
        {
          bbox: outlines.box,
          root: {
            viewBox: "0 0 1 1",
            fill: "orange",
            "fill-opacity": 0.4,
          },
          rootClass: {
            highlight: true,
            free: false,
          },
          path: {
            d: outlines.toSVGPath(),
          },
        },
        /* isPathUpdatable = */ false,
        /* hasClip = */ true
      );
      const focusLine = outlinerForOutline.getOutlines();
      drawLayer.drawOutline(
        {
          rootClass: {
            highlightOutline: true,
            free: false,
          },
          bbox: focusLine.box,
          path: {
            d: focusLine.toSVGPath(),
          },
        },
        /* mustRemoveSelfIntersections = */ false
      );

      svg.append(foreignObject);

      await writeSVG(svg, ctx);

      drawLayer.destroy();
    } catch (reason) {
      throw new Error(`Rasterize.highlightLayer: "${reason?.message}".`);
    }
  }

  static async xfaLayer(
    ctx,
    viewport,
    xfaHtml,
    fontRules,
    annotationStorage,
    isPrint
  ) {
    try {
      const { svg, foreignObject, style, div } = this.createContainer(viewport);

      const [common, overrides] = await this.xfaStylePromise;
      style.textContent = `${common}\n${overrides}\n${fontRules}`;

      // Rendering XFA layer as HTML.
      XfaLayer.render({
        viewport: viewport.clone({ dontFlip: true }),
        div,
        xfaHtml,
        annotationStorage,
        linkService: new SimpleLinkService(),
        intent: isPrint ? "print" : "display",
      });

      // Some unsupported type of images (e.g. tiff) lead to errors.
      await inlineImages(div, /* silentErrors = */ true);
      svg.append(foreignObject);

      await writeSVG(svg, ctx);
    } catch (reason) {
      throw new Error(`Rasterize.xfaLayer: "${reason?.message}".`);
    }
  }
}

/**
 * @typedef {Object} DriverOptions
 * @property {HTMLSpanElement} inflight - Field displaying the number of
 *   inflight requests.
 * @property {HTMLInputElement} disableScrolling - Checkbox to disable
 *   automatic scrolling of the output container.
 * @property {HTMLPreElement} output - Container for all output messages.
 * @property {HTMLDivElement} end - Container for a completion message.
 */

function buffersEqual(a, b) {
  if (a.byteLength !== b.byteLength) {
    return false;
  }
  const v1 = new Uint8Array(a);
  const v2 = new Uint8Array(b);
  for (let i = 0; i < v1.length; i++) {
    if (v1[i] !== v2[i]) {
      return false;
    }
  }
  return true;
}

class Driver {
  #pdfWorker = null;

  #coveragePerTest = false;

  #prevMainCoverage = null;

  #prevWorkerCoverage = null;

  /**
   * @param {DriverOptions} options
   */
  constructor(options) {
    // Configure the global worker options.
    GlobalWorkerOptions.workerSrc = WORKER_SRC;

    // We only need to initialize the `L10n`-instance here, since translation is
    // triggered by a `MutationObserver`; see e.g. `Rasterize.annotationLayer`.
    this._l10n = new GenericL10n(VIEWER_LOCALE);

    // Set the passed options
    this.inflight = options.inflight;
    this.disableScrolling = options.disableScrolling;
    this.output = options.output;
    this.end = options.end;

    // Set parameters from the query string
    const params = parseQueryString(window.location.search.substring(1));
    this.browser = params.get("browser");
    this.manifestFile = params.get("manifestfile");
    this.delay = params.get("delay") | 0;
    this.inFlightRequests = 0;
    this.testFilter = JSON.parse(params.get("testfilter") || "[]");
    this.masterMode = params.get("mastermode") === "true";
    this.sessionIndex = parseInt(params.get("sessionindex") || "0", 10);
    this.sessionCount = parseInt(params.get("sessioncount") || "1", 10);

    // When coverage is enabled, share a single persistent worker across all
    // tasks so that the accumulated self.__coverage__ can be retrieved at the
    // end before the worker is destroyed.
    if (window.__coverage__) {
      this.#pdfWorker = new PDFWorker({ name: "coverage-worker" });
      this.#coveragePerTest = params.get("coveragepertest") === "true";
    }

    // Open a persistent WebSocket connection to the server for binary result
    // submission.
    this.ws = new WebSocket(`ws://${location.host}`);
    this.ws.binaryType = "arraybuffer";

    // Create a working canvas
    this.canvas = document.createElement("canvas");
  }

  run() {
    window.onerror = (message, source, line, column, error) => {
      this._info(
        "Error: " +
          message +
          " Script: " +
          source +
          " Line: " +
          line +
          " Column: " +
          column +
          " StackTrace: " +
          error
      );
    };
    this._info("User agent: " + navigator.userAgent);
    this._log(`Harness thinks this browser is ${this.browser}\n`);

    if (this.delay > 0) {
      this._log("\nDelaying for " + this.delay + " ms...\n");
    }
    // When gathering the stats the numbers seem to be more reliable
    // if the browser is given more time to start.
    setTimeout(async () => {
      if (this.ws.readyState !== WebSocket.OPEN) {
        await new Promise(resolve => {
          this.ws.addEventListener("open", resolve, { once: true });
        });
      }

      // Dynamic task queue: server sends tasks on demand.
      this.taskQueue = [];
      this.serverDone = false;
      this.pendingTaskResolve = null;
      this.currentTask = null;
      this.tasksDone = 0;

      this.ws.addEventListener("message", event => {
        if (typeof event.data !== "string") {
          return;
        }
        const msg = JSON.parse(event.data);
        if (msg.type === "task") {
          if (this.pendingTaskResolve) {
            this.pendingTaskResolve(msg.task);
            this.pendingTaskResolve = null;
          } else {
            this.taskQueue.push(msg.task);
            // Prefetch PDF for this task if it's now first in queue.
            if (this.taskQueue.length === 1) {
              this._prefetchNextTask();
            }
          }
        } else if (msg.type === "done") {
          this.serverDone = true;
          if (this.pendingTaskResolve) {
            this.pendingTaskResolve(null);
            this.pendingTaskResolve = null;
          }
        }
      });

      this._nextTask();
    }, this.delay);
  }

  /**
   * A debugging tool to log to the terminal while tests are running.
   * XXX: This isn't currently referenced, but it's useful for debugging so
   * do not remove it.
   *
   * @param {string} msg - The message to log, it will be prepended with the
   *    current PDF ID if there is one.
   */
  log(msg) {
    let id = this.browser;
    if (this.currentTask) {
      id += `-${this.currentTask.id}`;
    }
    this._info(`${id}: ${msg}`);
  }

  _waitForNextTask() {
    if (this.taskQueue.length > 0) {
      return Promise.resolve(this.taskQueue.shift());
    }
    if (this.serverDone) {
      return Promise.resolve(null);
    }
    this.ws.send(
      JSON.stringify({ type: "requestTask", browser: this.browser })
    );
    return new Promise(resolve => {
      this.pendingTaskResolve = resolve;
    });
  }

  _nextTask() {
    let failure = "";
    const completedTask = this.currentTask;

    this._cleanup().then(async () => {
      if (completedTask && this.#coveragePerTest) {
        await this._sendPerTestCoverage(completedTask.id);
      }

      const task = await this._waitForNextTask();
      if (!task) {
        this._done();
        return;
      }

      if (this.#coveragePerTest) {
        this.#prevMainCoverage = structuredClone(window.__coverage__ ?? {});
        if (this.#pdfWorker) {
          try {
            this.#prevWorkerCoverage =
              await this.#pdfWorker.messageHandler.sendWithPromise(
                "GetWorkerCoverage",
                null
              );
          } catch {
            this.#prevWorkerCoverage = {};
          }
        }
      }

      this.currentTask = task;

      task.round = 0;
      task.pageNum = task.firstPage || 1;
      task.stats = { times: [] };
      task.enableXfa = task.enableXfa === true;

      if (task.includePages && task.type === "extract") {
        if (this.masterMode) {
          const includePages = [];
          for (const page of task.includePages) {
            if (Array.isArray(page)) {
              for (let i = page[0]; i <= page[1]; i++) {
                includePages.push(i);
              }
            } else {
              includePages.push(page);
            }
          }
          task.numberOfTasks = includePages.length;
          task.includePages = includePages;
        } else {
          delete task.pageMapping;
        }
      }

      const prevFile = md5FileMap.get(task.md5);
      if (prevFile) {
        if (task.file !== prevFile) {
          task._prefetchedLoadingTask?.destroy();
          task._prefetchedLoadingTask = null;
          this._nextPage(
            task,
            `The "${task.file}" file is identical to the previously used "${prevFile}" file.`
          );
          return;
        }
      } else {
        md5FileMap.set(task.md5, task.file);
      }

      this._log(`[${++this.tasksDone}] ${task.id}:\n`);

      // Support *linked* test-cases for the other suites, e.g. unit- and
      // integration-tests, without needing to run them as reference-tests.
      if (task.type === "other") {
        this._log(`  Skipping file "${task.file}"\n`);

        if (!task.link) {
          this._nextPage(task, 'Expected "other" test-case to be linked.');
          return;
        }
        this._nextTask();
        return;
      }

      this._log(`  Loading file "${task.file}"\n`);

      // Start fetching and parsing the next task's PDF in the worker
      // now, so it overlaps with the current task's load and render time.
      this._prefetchNextTask();

      try {
        let xfaStyleElement = null;
        if (task.enableXfa) {
          // Need to get the font definitions to inject them in the SVG.
          // So we create this element and those definitions will be
          // appended in font_loader.js.
          xfaStyleElement = document.createElement("style");
          document.documentElement
            .getElementsByTagName("head")[0]
            .append(xfaStyleElement);
        }
        const documentOptions = {
          ...this._getDocumentOptions(task),
          styleElement: xfaStyleElement,
        };
        const loadingTask =
          task._prefetchedLoadingTask ?? getDocument(documentOptions);
        task._prefetchedLoadingTask = null;
        let promise = loadingTask.promise;

        if (!this.masterMode && task.type === "extract") {
          promise = promise.then(async doc => {
            const extractedDocumentOptions = { ...documentOptions };
            delete extractedDocumentOptions.url;
            extractedDocumentOptions.data = await doc.extractPages([
              {
                document: null,
                includePages: task.includePages,
              },
            ]);
            await loadingTask.destroy();
            delete task.includePages;
            return getDocument(extractedDocumentOptions).promise;
          });
        }

        if (task.annotationStorage) {
          for (const annotation of Object.values(task.annotationStorage)) {
            const { bitmapName, quadPoints, paths, outlines } = annotation;
            if (bitmapName) {
              promise = promise.then(async doc => {
                const response = await fetch(
                  new URL(`./images/${bitmapName}`, window.location)
                );
                const blob = await response.blob();
                if (bitmapName.endsWith(".svg")) {
                  const image = new Image();
                  const url = URL.createObjectURL(blob);
                  const imagePromise = new Promise((resolve, reject) => {
                    image.onload = () => {
                      const canvas = new OffscreenCanvas(
                        image.width,
                        image.height
                      );
                      const ctx = canvas.getContext("2d");
                      ctx.drawImage(image, 0, 0);
                      annotation.bitmap = canvas.transferToImageBitmap();
                      URL.revokeObjectURL(url);
                      resolve();
                    };
                    image.onerror = reject;
                  });
                  image.src = url;
                  await imagePromise;
                } else {
                  annotation.bitmap = await createImageBitmap(blob);
                }

                return doc;
              });
            }
            if (quadPoints) {
              // Just to ensure that the quadPoints are always a Float32Array
              // like IRL (in order to avoid bugs like bug 1907958).
              annotation.quadPoints = new Float32Array(quadPoints);
            }
            if (paths) {
              for (let i = 0, ii = paths.lines.length; i < ii; i++) {
                paths.lines[i] = Float32Array.from(
                  paths.lines[i],
                  x => x ?? NaN
                );
              }
              for (let i = 0, ii = paths.points.length; i < ii; i++) {
                paths.points[i] = Float32Array.from(
                  paths.points[i],
                  x => x ?? NaN
                );
              }
            }
            if (outlines) {
              if (Array.isArray(outlines)) {
                for (let i = 0, ii = outlines.length; i < ii; i++) {
                  outlines[i] = Float32Array.from(outlines[i], x => x ?? NaN);
                }
              } else {
                outlines.outline = Float32Array.from(
                  outlines.outline,
                  x => x ?? NaN
                );
                outlines.points = Float32Array.from(
                  outlines.points,
                  x => x ?? NaN
                );
              }
            }
          }
        }

        if (task.save) {
          promise = promise.then(async doc => {
            if (!task.annotationStorage) {
              throw new Error("Missing `annotationStorage` entry.");
            }
            if (task.loadAnnotations) {
              for (let num = 1; num <= doc.numPages; num++) {
                const page = await doc.getPage(num);
                await page.getAnnotations({ intent: "display" });
              }
            }
            doc.annotationStorage._setValues(task.annotationStorage);

            const data = await doc.saveDocument();
            await loadingTask.destroy();
            delete task.annotationStorage;

            return getDocument({ data }).promise;
          });
        }

        promise.then(
          async doc => {
            if (task.enableXfa) {
              task.fontRules = "";
              for (const rule of xfaStyleElement.sheet.cssRules) {
                task.fontRules += rule.cssText + "\n";
              }
            }

            task.pdfDoc = doc;
            if (!task.save && task.print && task.annotationStorage) {
              doc.annotationStorage._setValues(task.annotationStorage);
              task.printAnnotationStorage = doc.annotationStorage.print;
            }
            task.optionalContentConfigPromise = doc.getOptionalContentConfig({
              intent: task.print ? "print" : "display",
            });

            if (task.optionalContent) {
              const entries = Object.entries(task.optionalContent),
                optionalContentConfig = await task.optionalContentConfigPromise;
              for (const [id, visible] of entries) {
                optionalContentConfig.setVisibility(id, visible);
              }
            }

            if (task.forms) {
              task.fieldObjects = await doc.getFieldObjects();
            }

            this._nextPage(task, failure);
          },
          err => {
            failure = "Loading PDF document: " + err;
            this._nextPage(task, failure);
          }
        );
        return;
      } catch (e) {
        failure = "Loading PDF document: " + this._exceptionToString(e);
      }
      this._nextPage(task, failure);
    });
  }

  _getDocumentOptions(task) {
    return {
      url: new URL(task.file, window.location),
      password: task.password,
      cMapUrl: CMAP_URL,
      iccUrl: ICC_URL,
      standardFontDataUrl: STANDARD_FONT_DATA_URL,
      wasmUrl: WASM_URL,
      disableAutoFetch: !task.enableAutoFetch,
      pdfBug: true,
      useSystemFonts: task.useSystemFonts,
      useWasm: task.useWasm,
      useWorkerFetch: task.useWorkerFetch,
      enableXfa: task.enableXfa,
      isOffscreenCanvasSupported:
        task.isOffscreenCanvasSupported === false ? false : undefined,
      disableFontFace: task.disableFontFace === true,
      ...(this.#pdfWorker ? { worker: this.#pdfWorker } : {}),
    };
  }

  _prefetchNextTask() {
    const task = this.taskQueue[0];
    if (!task) {
      return;
    }
    // Skip tasks that do not load a PDF or that need DOM setup (XFA style
    // element injection) to happen synchronously before getDocument.
    if (task.type === "other" || task.enableXfa) {
      return;
    }
    if (!task._prefetchedLoadingTask) {
      task._prefetchedLoadingTask = getDocument(this._getDocumentOptions(task));
    }
  }

  _cleanup() {
    // Clear out all the stylesheets since a new one is created for each font.
    while (document.styleSheets.length > 0) {
      const styleSheet = document.styleSheets[0];
      while (styleSheet.cssRules.length > 0) {
        styleSheet.deleteRule(0);
      }
      styleSheet.ownerNode.remove();
    }
    const body = document.body;
    while (body.lastChild !== this.end) {
      body.lastChild.remove();
    }

    const destroyedPromises = [];
    // Wipe out the link to the pdfdoc so it can be GC'ed.
    for (const task of [this.currentTask, ...this.taskQueue]) {
      if (task?.pdfDoc) {
        destroyedPromises.push(task.pdfDoc.loadingTask.destroy());
        delete task.pdfDoc;
      }
    }
    return Promise.all(destroyedPromises);
  }

  _exceptionToString(e) {
    if (typeof e !== "object") {
      return String(e);
    }
    if (!("message" in e)) {
      return JSON.stringify(e);
    }
    return e.message + ("stack" in e ? " at " + e.stack.split("\n", 1)[0] : "");
  }

  _getLastPageNumber(task) {
    if (!task.pdfDoc) {
      return task.firstPage || 1;
    }
    return task.lastPage || task.pdfDoc.numPages;
  }

  _nextPage(task, loadError) {
    let failure = loadError || "";
    let ctx;

    if (!task.pdfDoc) {
      new Promise(r => {
        this.canvas.toBlob(r, "image/png");
      })
        .then(blob => this._sendResult(blob, task, failure))
        .then(() => {
          this._log(`done${failure ? ` (failed !: ${failure})` : ""}\n`);
          this._nextTask();
        });
      return;
    }

    if (task.pageNum > this._getLastPageNumber(task)) {
      if (++task.round < task.rounds) {
        this._log(`  Round ${1 + task.round}\n`);
        task.pageNum = task.firstPage || 1;
      } else {
        this._nextTask();
        return;
      }
    }

    if (
      task.skipPages?.includes(task.pageNum) ||
      (this.masterMode &&
        task.includePages &&
        !task.includePages.includes(task.pageNum - 1))
    ) {
      this._log(
        `    Skipping page ${task.pageNum}/${task.pdfDoc.numPages}...\n`
      );
      task.pageNum++;
      this._nextPage(task);
      return;
    }

    if (!failure) {
      try {
        this._log(
          `    Loading page ${task.pageNum}/${task.pdfDoc.numPages}... `
        );
        ctx = this.canvas.getContext("2d", { alpha: false });
        task.pdfDoc.getPage(task.pageNum).then(
          page => {
            // Default to creating the test images at the devices pixel ratio,
            // unless the test explicitly specifies an output scale.
            const outputScale = task.outputScale || OutputScale.pixelRatio;
            let viewport = page.getViewport({
              scale: PixelsPerInch.PDF_TO_CSS_UNITS,
            });
            if (task.rotation) {
              viewport = viewport.clone({ rotation: task.rotation });
            }
            // Restrict the test from creating a canvas that is too big.
            const MAX_CANVAS_PIXEL_DIMENSION = 4096;
            const largestDimension = Math.max(viewport.width, viewport.height);
            if (
              Math.floor(largestDimension * outputScale) >
              MAX_CANVAS_PIXEL_DIMENSION
            ) {
              const rescale = MAX_CANVAS_PIXEL_DIMENSION / largestDimension;
              viewport = viewport.clone({
                scale: PixelsPerInch.PDF_TO_CSS_UNITS * rescale,
              });
            }
            const pixelWidth = Math.floor(viewport.width * outputScale);
            const pixelHeight = Math.floor(viewport.height * outputScale);
            task.viewportWidth = Math.floor(viewport.width);
            task.viewportHeight = Math.floor(viewport.height);
            task.outputScale = outputScale;
            this.canvas.width = pixelWidth;
            this.canvas.height = pixelHeight;
            this.canvas.style.width = Math.floor(viewport.width) + "px";
            this.canvas.style.height = Math.floor(viewport.height) + "px";
            this._clearCanvas();

            const transform =
              outputScale !== 1 ? [outputScale, 0, 0, outputScale, 0, 0] : null;

            // Initialize various `eq` test subtypes, see comment below.
            let renderAnnotations = false,
              renderForms = false,
              renderPrint = false,
              renderXfa = false,
              annotationCanvasMap = null,
              pageColors = null,
              partialCrop = null;

            if (!task.print && task.annotationStorage) {
              task.pdfDoc.annotationStorage._setValues(task.annotationStorage);
            }

            let textLayerCanvas, annotationLayerCanvas, annotationLayerContext;
            let initPromise;
            if (task.type === "text" || task.type === "highlight") {
              // Using a dummy canvas for PDF context drawing operations
              textLayerCanvas = this.textLayerCanvas;
              if (!textLayerCanvas) {
                textLayerCanvas = document.createElement("canvas");
                this.textLayerCanvas = textLayerCanvas;
              }
              textLayerCanvas.width = pixelWidth;
              textLayerCanvas.height = pixelHeight;
              const textLayerContext = textLayerCanvas.getContext("2d");
              textLayerContext.clearRect(
                0,
                0,
                textLayerCanvas.width,
                textLayerCanvas.height
              );
              textLayerContext.scale(outputScale, outputScale);
              // The text builder will draw its content on the test canvas
              initPromise = page
                .getTextContent({
                  includeMarkedContent: true,
                  disableNormalization: true,
                })
                .then(function (textContent) {
                  return task.type === "text"
                    ? Rasterize.textLayer(
                        textLayerContext,
                        viewport,
                        textContent
                      )
                    : Rasterize.highlightLayer(
                        textLayerContext,
                        viewport,
                        textContent
                      );
                });
            } else {
              textLayerCanvas = null;
              // We fetch the `eq` specific test subtypes here, to avoid
              // accidentally changing the behaviour for other types of tests.

              partialCrop = task.partial;
              if (!partialCrop) {
                renderAnnotations = !!task.annotations;
                renderForms = !!task.forms;
                renderPrint = !!task.print;
                renderXfa = !!task.enableXfa;
              }
              pageColors = task.pageColors || null;

              // Render the annotation layer if necessary.
              if (renderAnnotations || renderForms || renderXfa) {
                // Create a dummy canvas for the drawing operations.
                annotationLayerCanvas = this.annotationLayerCanvas;
                if (!annotationLayerCanvas) {
                  annotationLayerCanvas = document.createElement("canvas");
                  this.annotationLayerCanvas = annotationLayerCanvas;
                }
                annotationLayerCanvas.width = pixelWidth;
                annotationLayerCanvas.height = pixelHeight;
                annotationLayerContext = annotationLayerCanvas.getContext("2d");
                annotationLayerContext.clearRect(
                  0,
                  0,
                  annotationLayerCanvas.width,
                  annotationLayerCanvas.height
                );
                annotationLayerContext.scale(outputScale, outputScale);

                if (!renderXfa) {
                  // The annotation builder will draw its content
                  // on the canvas.
                  initPromise = page.getAnnotations({ intent: "display" });
                  annotationCanvasMap = new Map();
                } else {
                  initPromise = page.getXfa().then(function (xfaHtml) {
                    return Rasterize.xfaLayer(
                      annotationLayerContext,
                      viewport,
                      xfaHtml,
                      task.fontRules,
                      task.pdfDoc.annotationStorage,
                      task.renderPrint
                    );
                  });
                }
              } else {
                annotationLayerCanvas = null;
                initPromise = Promise.resolve();
              }
            }
            const renderContext = {
              canvas: this.canvas,
              viewport,
              optionalContentConfigPromise: task.optionalContentConfigPromise,
              annotationCanvasMap,
              pageColors,
              transform,
            };
            if (renderForms) {
              renderContext.annotationMode = AnnotationMode.ENABLE_FORMS;
            } else if (renderPrint) {
              if (task.annotationStorage) {
                renderContext.annotationMode = AnnotationMode.ENABLE_STORAGE;
                renderContext.printAnnotationStorage =
                  task.printAnnotationStorage;
              }
              renderContext.intent = "print";
            }
            if (partialCrop) {
              renderContext.recordOperations = true;
            }

            const completeRender = error => {
              // if text layer is present, compose it on top of the page
              if (textLayerCanvas) {
                if (task.type === "text") {
                  ctx.save();
                  ctx.globalCompositeOperation = "screen";
                  ctx.fillStyle = "rgb(128, 255, 128)"; // making it green
                  ctx.fillRect(0, 0, pixelWidth, pixelHeight);
                  ctx.restore();
                  ctx.drawImage(textLayerCanvas, 0, 0);
                } else if (task.type === "highlight") {
                  ctx.save();
                  ctx.globalCompositeOperation = "multiply";
                  ctx.drawImage(textLayerCanvas, 0, 0);
                  ctx.restore();
                }
              }
              // If we have annotation layer, compose it on top of the page.
              if (annotationLayerCanvas) {
                ctx.drawImage(annotationLayerCanvas, 0, 0);
              }
              if (page.stats) {
                // Get the page stats *before* running cleanup.
                task.stats = page.stats;
              }
              page.cleanup(/* resetStats = */ true);
              this._snapshot(task, error);
            };
            initPromise
              .then(async data => {
                const renderTask = page.render(renderContext);

                if (task.renderTaskOnContinue) {
                  renderTask.onContinue = function (cont) {
                    // Slightly delay the continued rendering.
                    setTimeout(cont, RENDER_TASK_ON_CONTINUE_DELAY);
                  };
                }
                await renderTask.promise;

                if (partialCrop) {
                  const clearOutsidePartial = () => {
                    const { width, height } = ctx.canvas;
                    // Everything above the partial area
                    ctx.clearRect(
                      0,
                      0,
                      width,
                      Math.ceil(partialCrop.minY * height)
                    );
                    // Everything below the partial area
                    ctx.clearRect(
                      0,
                      Math.floor(partialCrop.maxY * height),
                      width,
                      height
                    );
                    // Everything to the left of the partial area
                    ctx.clearRect(
                      0,
                      0,
                      Math.ceil(partialCrop.minX * width),
                      height
                    );
                    // Everything to the right of the partial area
                    ctx.clearRect(
                      Math.floor(partialCrop.maxX * width),
                      0,
                      width,
                      height
                    );
                  };

                  clearOutsidePartial();
                  // Capture pixel data synchronously for the comparison;
                  // only encode to PNG in master mode where the server needs
                  // to save it as the reference image.
                  const baselinePixels = ctx.getImageData(
                    0,
                    0,
                    ctx.canvas.width,
                    ctx.canvas.height
                  );
                  const baselineBlob =
                    this.masterMode && !task.knownPartialMismatch
                      ? await new Promise(r => {
                          ctx.canvas.toBlob(r, "image/png");
                        })
                      : null;
                  this._clearCanvas();

                  const recordedBBoxes = page.recordedBBoxes;

                  const partialRenderContext = {
                    canvasContext: ctx,
                    viewport,
                    optionalContentConfigPromise:
                      task.optionalContentConfigPromise,
                    annotationCanvasMap,
                    pageColors,
                    transform,
                    recordOperations: false,
                    operationsFilter(index) {
                      if (recordedBBoxes.isEmpty(index)) {
                        return false;
                      }
                      return (
                        recordedBBoxes.minX(index) <= partialCrop.maxX &&
                        recordedBBoxes.maxX(index) >= partialCrop.minX &&
                        recordedBBoxes.minY(index) <= partialCrop.maxY &&
                        recordedBBoxes.maxY(index) >= partialCrop.minY
                      );
                    },
                  };

                  const partialRenderTask = page.render(partialRenderContext);
                  await partialRenderTask.promise;

                  clearOutsidePartial();

                  if (page.stats) {
                    // Get the page stats *before* running cleanup.
                    task.stats = page.stats;
                  }
                  page.cleanup(/* resetStats = */ true);
                  this._snapshot(
                    task,
                    false,
                    // Sometimes the optimized version does not match the
                    // baseline. Tests marked as "knownPartialMismatch" have
                    // been manually verified to be good enough (e.g. there is
                    // one pixel of a very slightly different shade), so we
                    // avoid compating them to the non-optimized version and
                    // instead use the optimized version also for makeref.
                    task.knownPartialMismatch ? null : baselinePixels,
                    baselineBlob
                  );
                  return;
                }

                if (annotationCanvasMap) {
                  Rasterize.annotationLayer(
                    annotationLayerContext,
                    viewport,
                    outputScale,
                    data,
                    annotationCanvasMap,
                    task.pdfDoc.annotationStorage,
                    task.fieldObjects,
                    page,
                    IMAGE_RESOURCES_PATH,
                    renderForms,
                    task.optionalContentConfigPromise
                  ).then(() => {
                    completeRender(false);
                  });
                } else {
                  completeRender(false);
                }
              })
              .catch(function (error) {
                completeRender("render : " + error);
              });
          },
          error => {
            this._snapshot(task, "render : " + error);
          }
        );
      } catch (e) {
        failure = "page setup : " + this._exceptionToString(e);
        this._snapshot(task, failure);
      }
    }
  }

  _clearCanvas() {
    const ctx = this.canvas.getContext("2d", { alpha: false });
    ctx.beginPath();
    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }

  async _snapshot(task, failure, baselinePixels = null, baselineBlob = null) {
    this._log("Snapshotting... ");
    const snapshotBlob = await new Promise(r => {
      this.canvas.toBlob(r, "image/png");
    });
    if (baselinePixels) {
      const snapPixels = this.canvas
        .getContext("2d")
        .getImageData(0, 0, this.canvas.width, this.canvas.height);
      if (!buffersEqual(baselinePixels.data.buffer, snapPixels.data.buffer)) {
        failure ||= "Optimized rendering differs from full rendering.";
      }
    }
    await this._sendResult(snapshotBlob, task, failure, baselineBlob);
    this._log(`done${failure ? ` (failed !: ${failure})` : ""}\n`);
    task.pageNum++;
    this._nextPage(task);
  }

  _quit() {
    this._log("Done !");
    this.end.textContent = "Tests finished. Close this window!";
    // Send quit over the same WebSocket channel so the server processes it
    // only after all preceding result frames have been handled.
    this.ws.send(JSON.stringify({ type: "quit", browser: this.browser }));
  }

  _info(message) {
    this._send(
      "/info",
      JSON.stringify({
        browser: this.browser,
        message,
      })
    );
  }

  _log(message) {
    // Using insertAdjacentHTML yields a large performance gain and
    // reduces runtime significantly.
    if (this.output.insertAdjacentHTML) {
      // eslint-disable-next-line no-unsanitized/method
      this.output.insertAdjacentHTML("BeforeEnd", message);
    } else {
      this.output.textContent += message;
    }

    if (message.includes("\n") && !this.disableScrolling.checked) {
      // Scroll to the bottom of the page
      this.output.scrollTop = this.output.scrollHeight;
    }
  }

  _done() {
    if (this.inFlightRequests > 0) {
      this.inflight.textContent = this.inFlightRequests;
      setTimeout(this._done.bind(this), WAITING_TIME);
    } else if (this.#pdfWorker) {
      this._collectWorkerCoverage().then(() => {
        setTimeout(this._quit.bind(this), WAITING_TIME);
      });
    } else {
      setTimeout(this._quit.bind(this), WAITING_TIME);
    }
  }

  #computeCoverageDelta(afterCoverage, beforeCoverage) {
    const delta = {};
    for (const [key, afterFile] of Object.entries(afterCoverage)) {
      const beforeFile = beforeCoverage?.[key];
      const lines = new Set();
      const funcs = new Set();

      for (const [id, count] of Object.entries(afterFile.s)) {
        if (count - (beforeFile?.s[id] ?? 0) > 0) {
          const line = afterFile.statementMap?.[id]?.start?.line;
          if (line !== undefined) {
            lines.add(line);
          }
        }
      }
      for (const [id, count] of Object.entries(afterFile.f)) {
        if (count - (beforeFile?.f[id] ?? 0) > 0) {
          const name = afterFile.fnMap?.[id]?.name;
          if (name) {
            funcs.add(name);
          }
        }
      }
      if (lines.size > 0 || funcs.size > 0) {
        const fstarts = Object.create(null);
        for (const fn of Object.values(afterFile.fnMap ?? {})) {
          const startLine = fn.decl?.start?.line;
          if (startLine !== undefined && fn.name) {
            fstarts[startLine] = fn.name;
          }
        }
        delta[key] = { fstarts, lines: [...lines], funcs: [...funcs] };
      }
    }
    return delta;
  }

  async _sendPerTestCoverage(taskId) {
    if (!window.__coverage__) {
      return;
    }
    const delta = this.#computeCoverageDelta(
      window.__coverage__,
      this.#prevMainCoverage
    );
    if (this.#pdfWorker) {
      try {
        const afterWorker =
          await this.#pdfWorker.messageHandler.sendWithPromise(
            "GetWorkerCoverage",
            null
          );
        for (const [key, entry] of Object.entries(
          this.#computeCoverageDelta(afterWorker, this.#prevWorkerCoverage)
        )) {
          if (delta[key]) {
            Object.assign(delta[key].fstarts, entry.fstarts);
            const lineSet = new Set(delta[key].lines);
            for (const l of entry.lines) {
              lineSet.add(l);
            }
            delta[key].lines = [...lineSet];
            const funcSet = new Set(delta[key].funcs);
            for (const f of entry.funcs) {
              funcSet.add(f);
            }
            delta[key].funcs = [...funcSet];
          } else {
            delta[key] = entry;
          }
        }
      } catch {
        // ignore
      }
    }
    if (Object.keys(delta).length > 0) {
      this.ws.send(
        JSON.stringify({ type: "coverage", id: taskId, counts: delta })
      );
    }
  }

  async _collectWorkerCoverage() {
    await fetchAndMergeWorkerCoverage(this.#pdfWorker);
    this.#pdfWorker.destroy();
    this.#pdfWorker = null;
  }

  async _sendResult(snapshotBlob, task, failure, baselineBlob = null) {
    // Build a binary WebSocket frame:
    //   [4 bytes BE: meta_len][meta JSON][4 bytes BE: snapshot_len]
    //   [snapshot PNG][baseline PNG]
    const meta = JSON.stringify({
      browser: this.browser,
      id: task.id,
      numPages: task.pdfDoc ? task.lastPage || task.pdfDoc.numPages : 0,
      lastPageNum: this._getLastPageNumber(task),
      numberOfTasks: task.numberOfTasks ?? -1,
      failure,
      file: task.file,
      round: task.round,
      page: task.pageMapping?.[task.pageNum] ?? task.pageNum,
      stats: task.stats.times,
      viewportWidth: task.viewportWidth,
      viewportHeight: task.viewportHeight,
      outputScale: task.outputScale,
    });
    const metaBytes = new TextEncoder().encode(meta);
    const snapshotBytes = new Uint8Array(await snapshotBlob.arrayBuffer());
    const baselineBytes = baselineBlob
      ? new Uint8Array(await baselineBlob.arrayBuffer())
      : null;

    const totalLen =
      4 +
      metaBytes.length +
      4 +
      snapshotBytes.length +
      (baselineBytes?.length ?? 0);
    const buf = new ArrayBuffer(totalLen);
    const view = new DataView(buf);
    const bytes = new Uint8Array(buf);
    view.setUint32(0, metaBytes.length);
    bytes.set(metaBytes, 4);
    view.setUint32(4 + metaBytes.length, snapshotBytes.length);
    bytes.set(snapshotBytes, 8 + metaBytes.length);
    if (baselineBytes) {
      bytes.set(baselineBytes, 8 + metaBytes.length + snapshotBytes.length);
    }
    this.ws.send(buf);
  }

  _send(url, message) {
    const { promise, resolve } = Promise.withResolvers();
    this.inflight.textContent = this.inFlightRequests++;

    fetch(url, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: message,
    })
      .then(response => {
        if (!response.ok || response.status !== 200) {
          throw new Error(response.statusText);
        }
        this.inFlightRequests--;
        resolve();
      })
      .catch(reason => {
        console.warn(`Driver._send failed (${url}):`, reason);
        this.inFlightRequests--;
        resolve();
        this._send(url, message);
      });

    return promise;
  }
}

export { Driver };