Simplify positioning of elements inside markedContent

By setting `display: contents` on `.markedContent` containers, they stop
affecting the layout of their children. This means that we can always
position text layer `<span>` elements using percentages relative to the
page dimensions, rather than having two separate code paths.

For some reason this breaks the workaround for text selection flickering
in Chrome/Safari, which can be fixed by setting `user-select: text` on
the `.endOfContent` div (only in Chrome/Safari, as it would break
selection in Firefox).

Author: nicolo-ribaudo

src/display/text_layer.js

@@ -346,14 +346,8 @@ class TextLayer {
     const divStyle = textDiv.style;
     // Setting the style properties individually, rather than all at once,
     // should be OK since the `textDiv` isn't appended to the document yet.
-    if (this.#container === this.#rootContainer) {
-      divStyle.left = `${((100 * left) / this.#pageWidth).toFixed(2)}%`;
-      divStyle.top = `${((100 * top) / this.#pageHeight).toFixed(2)}%`;
-    } else {
-      // We're in a marked content span, hence we can't use percents.
-      divStyle.left = `calc(var(--total-scale-factor) * ${left.toFixed(2)}px)`;
-      divStyle.top = `calc(var(--total-scale-factor) * ${top.toFixed(2)}px)`;
-    }
+    divStyle.left = `${((100 * left) / this.#pageWidth).toFixed(2)}%`;
+    divStyle.top = `${((100 * top) / this.#pageHeight).toFixed(2)}%`;
     divStyle.setProperty("--font-height", `${fontHeight.toFixed(2)}px`);
     divStyle.fontFamily = fontFamily;
 

web/text_layer_builder.css

@@ -59,14 +59,9 @@
       scale(var(--min-font-size-inv));
   }
 
-  /* Only necessary in Google Chrome, see issue 14205, and most unfortunately
-   * the problem doesn't show up in "text" reference tests. */
-  /*#if !MOZCENTRAL*/
-  span.markedContent {
-    top: 0;
-    height: 0;
+  .markedContent {
+    display: contents;
   }
-  /*#endif*/
 
   span[role="img"] {
     user-select: none;

web/text_layer_builder.js

@@ -321,6 +321,7 @@ class TextLayerBuilder {
         if (endDiv) {
           endDiv.style.width = parentTextLayer.style.width;
           endDiv.style.height = parentTextLayer.style.height;
+          endDiv.style.userSelect = "text";
           anchor.parentElement.insertBefore(
             endDiv,
             modifyStart ? anchor : anchor.nextSibling