Get rid of CSS transform on each annotation in the annotation layer

- each annotation has its coordinates/dimensions expressed in percentage,
  hence it's correctly positioned whatever the scale factor is;
- the font sizes are expressed in percentage too and the main font size
  is scaled thanks a css var (--scale-factor);
- the rotation is now applied on the div annotationLayer;
- this patch improve the rendering of some strings where the glyph spacing
  was not correct (it's a Firefox bug);
- it helps to simplify the code and it should slightly improve the update of
  page (on zoom or rotation).

test/annotation_layer_builder_overrides.css

@@ -17,6 +17,13 @@
 
 .annotationLayer {
   position: absolute;
+  font-size: calc(100px * var(--scale-factor));
+}
+
+.annotationLayer .buttonWidgetAnnotation.pushButton > img {
+  width: 100%;
+  height: 100%;
+  position: absolute;
 }
 
 .annotationLayer .buttonWidgetAnnotation.checkBox input,

test/driver.js

@@ -215,7 +215,7 @@ class Rasterize {
       div.className = "annotationLayer";
 
       const [common, overrides] = await this.annotationStylePromise;
-      style.textContent = `${common}\n${overrides}`;
+      style.textContent = `:root { --scale-factor: ${viewport.scale} } ${common}\n${overrides}`;
 
       const annotationViewport = viewport.clone({ dontFlip: true });
       const annotationImageMap = await convertCanvasesToImages(
@@ -234,6 +234,7 @@ class Rasterize {
         renderForms,
         annotationCanvasMap: annotationImageMap,
       };
+      AnnotationLayer.setDimensions(div, annotationViewport);
       AnnotationLayer.render(parameters);
 
       // Inline SVG images from text annotations.

test/integration/freetext_editor_spec.js

@@ -42,7 +42,7 @@ describe("Editor", () => {
           });
 
           const data = "Hello PDF.js World !!";
-          await page.mouse.click(rect.x + 10, rect.y + 10);
+          await page.mouse.click(rect.x + 100, rect.y + 100);
           await page.type(`${editorPrefix}0 .internal`, data);
 
           const editorRect = await page.$eval(`${editorPrefix}0`, el => {
@@ -151,7 +151,7 @@ describe("Editor", () => {
           });
 
           const data = "Hello PDF.js World !!";
-          await page.mouse.click(rect.x + 10, rect.y + 10);
+          await page.mouse.click(rect.x + 100, rect.y + 100);
           await page.type(`${editorPrefix}5 .internal`, data);
 
           const editorRect = await page.$eval(`${editorPrefix}5`, el => {