Set the dimensions of the various layers at their creation

- Use a unique helper function in display/display_utils.js;
- Move those dimensions in css' side.

web/annotation_editor_layer_builder.js

@@ -72,14 +72,14 @@ class AnnotationEditorLayerBuilder {
     }
 
     // Create an AnnotationEditor layer div
-    this.div = document.createElement("div");
-    this.div.className = "annotationEditorLayer";
-    this.div.tabIndex = 0;
-    this.pageDiv.append(this.div);
+    const div = (this.div = document.createElement("div"));
+    div.className = "annotationEditorLayer";
+    div.tabIndex = 0;
+    this.pageDiv.append(div);
 
     this.annotationEditorLayer = new AnnotationEditorLayer({
       uiManager: this.#uiManager,
-      div: this.div,
+      div,
       accessibilityManager: this.accessibilityManager,
       pageIndex: this.pdfPage.pageNumber - 1,
       l10n: this.l10n,
@@ -88,7 +88,7 @@ class AnnotationEditorLayerBuilder {
 
     const parameters = {
       viewport: clonedViewport,
-      div: this.div,
+      div,
       annotations: null,
       intent,
     };

web/annotation_layer_builder.js

@@ -131,10 +131,9 @@ class AnnotationLayerBuilder {
     } else {
       // Create an annotation layer div and render the annotations
       // if there is at least one annotation.
-      this.div = document.createElement("div");
+      this.div = parameters.div = document.createElement("div");
       this.div.className = "annotationLayer";
       this.pageDiv.append(this.div);
-      parameters.div = this.div;
 
       AnnotationLayer.render(parameters);
       this.l10n.translate(this.div);

web/pdf_page_view.js

@@ -38,6 +38,7 @@ import {
   createPromiseCapability,
   PixelsPerInch,
   RenderingCancelledException,
+  setLayerDimensions,
   SVGGraphics,
 } from "pdfjs-lib";
 import {
@@ -179,8 +180,6 @@ class PDFPageView {
 
     const div = document.createElement("div");
     div.className = "page";
-    div.style.width = Math.round(this.viewport.width) + "px";
-    div.style.height = Math.round(this.viewport.height) + "px";
     div.setAttribute("data-page-number", this.id);
     div.setAttribute("role", "region");
     this.l10n.get("page_landmark", { page: this.id }).then(msg => {
@@ -188,6 +187,8 @@ class PDFPageView {
     });
     this.div = div;
 
+    this.#setDimensions();
+
     container?.append(div);
 
     if (
@@ -219,6 +220,16 @@ class PDFPageView {
     }
   }
 
+  #setDimensions() {
+    const { div, viewport } = this;
+    setLayerDimensions(
+      div,
+      viewport,
+      /* mustFlip = */ true,
+      /* mustRotate = */ false
+    );
+  }
+
   setPdfPage(pdfPage) {
     this.pdfPage = pdfPage;
     this.pdfPageRotate = pdfPage.rotate;
@@ -400,9 +411,8 @@ class PDFPageView {
     });
     this.renderingState = RenderingStates.INITIAL;
 
+    this.#setDimensions();
     const div = this.div;
-    div.style.width = Math.round(this.viewport.width) + "px";
-    div.style.height = Math.round(this.viewport.height) + "px";
 
     const childNodes = div.childNodes,
       zoomLayerNode = (keepZoomLayer && this.zoomLayer) || null,
@@ -724,8 +734,6 @@ class PDFPageView {
     // Wrap the canvas so that if it has a CSS transform for high DPI the
     // overflow will be hidden in Firefox.
     const canvasWrapper = document.createElement("div");
-    canvasWrapper.style.width = div.style.width;
-    canvasWrapper.style.height = div.style.height;
     canvasWrapper.classList.add("canvasWrapper");
 
     if (this.textLayer) {

web/pdf_viewer.css

@@ -53,6 +53,8 @@
 
 .pdfViewer .canvasWrapper {
   overflow: hidden;
+  width: 100%;
+  height: 100%;
 }
 
 .pdfViewer .page {