Annotation - Use border and background colors from MK dictionary

 - aims to fix #13003;
 - pass the colors to js sandbox;
 - fix checkbox color.

Author: calixteman

src/core/annotation.js

@@ -192,12 +192,12 @@ class AnnotationFactory {
   }
 }
 
-function getRgbColor(color) {
-  const rgbColor = new Uint8ClampedArray(3);
+function getRgbColor(color, defaultColor) {
   if (!Array.isArray(color)) {
-    return rgbColor;
+    return defaultColor;
   }
 
+  const rgbColor = defaultColor || new Uint8ClampedArray(3);
   switch (color.length) {
     case 0: // Transparent, which we indicate with a null value
       return null;
@@ -215,7 +215,7 @@ function getRgbColor(color) {
       return rgbColor;
 
     default:
-      return rgbColor;
+      return defaultColor;
   }
 }
 
@@ -325,6 +325,7 @@ class Annotation {
     this.setColor(dict.getArray("C"));
     this.setBorderStyle(dict);
     this.setAppearance(dict);
+    this.setBorderAndBackgroundColors(dict.get("MK"));
 
     this._streams = [];
     if (this.appearance) {
@@ -336,6 +337,8 @@ class Annotation {
       annotationFlags: this.flags,
       borderStyle: this.borderStyle,
       color: this.color,
+      backgroundColor: this.backgroundColor,
+      borderColor: this.borderColor,
       contents: this.contents,
       hasAppearance: !!this.appearance,
       id: params.id,
@@ -489,7 +492,22 @@ class Annotation {
    *                        4 (CMYK) elements
    */
   setColor(color) {
-    this.color = getRgbColor(color);
+    this.color = getRgbColor(color, new Uint8ClampedArray(3));
+  }
+
+  /**
+   * Set the color for background and border if any.
+   * The default values are transparent.
+   *
+   * @public
+   * @memberof Annotation
+   * @param {Dict}  - The MK dictionary
+   */
+  setBorderAndBackgroundColors(mk) {
+    if (mk instanceof Dict) {
+      this.borderColor = getRgbColor(mk.getArray("BC"), null);
+      this.backgroundColor = getRgbColor(mk.getArray("BG"), null);
+    }
   }
 
   /**
@@ -1743,6 +1761,8 @@ class TextWidgetAnnotation extends WidgetAnnotation {
       name: this.data.fieldName,
       rect: this.data.rect,
       actions: this.data.actions,
+      strokeColor: this.data.borderColor,
+      fillColor: this.data.backgroundColor,
       type: "text",
     };
   }
@@ -2074,6 +2094,8 @@ class ButtonWidgetAnnotation extends WidgetAnnotation {
       rect: this.data.rect,
       hidden: this.data.hidden,
       actions: this.data.actions,
+      strokeColor: this.data.borderColor,
+      fillColor: this.data.backgroundColor,
       type,
     };
   }
@@ -2154,6 +2176,8 @@ class ChoiceWidgetAnnotation extends WidgetAnnotation {
       hidden: this.data.hidden,
       actions: this.data.actions,
       items: this.data.options,
+      strokeColor: this.data.borderColor,
+      fillColor: this.data.backgroundColor,
       type,
     };
   }
@@ -2324,14 +2348,10 @@ class SquareAnnotation extends MarkupAnnotation {
         : [0, 0, 0];
 
       // The default fill color is transparent.
-      let fillColor = null;
-      let interiorColor = parameters.dict.getArray("IC");
-      if (interiorColor) {
-        interiorColor = getRgbColor(interiorColor);
-        fillColor = interiorColor
-          ? Array.from(interiorColor).map(c => c / 255)
-          : null;
-      }
+      const interiorColor = getRgbColor(parameters.dict.getArray("IC"), null);
+      const fillColor = interiorColor
+        ? Array.from(interiorColor).map(c => c / 255)
+        : null;
 
       this._setDefaultAppearance({
         xref: parameters.xref,
@@ -2369,14 +2389,10 @@ class CircleAnnotation extends MarkupAnnotation {
         : [0, 0, 0];
 
       // The default fill color is transparent.
-      let fillColor = null;
-      let interiorColor = parameters.dict.getArray("IC");
-      if (interiorColor) {
-        interiorColor = getRgbColor(interiorColor);
-        fillColor = interiorColor
-          ? Array.from(interiorColor).map(c => c / 255)
-          : null;
-      }
+      const interiorColor = getRgbColor(parameters.dict.getArray("IC"), null);
+      const fillColor = interiorColor
+        ? Array.from(interiorColor).map(c => c / 255)
+        : null;
 
       // Circles are approximated by Bézier curves with four segments since
       // there is no circle primitive in the PDF specification. For the control

src/display/annotation_layer.js

@@ -615,6 +615,16 @@ class WidgetAnnotationElement extends AnnotationElement {
       }
     }
   }
+
+  _setBorderAndBackgroundColors(element) {
+    for (const name of ["borderColor", "backgroundColor"]) {
+      const color = this.data[name];
+      element.style[name] =
+        color === null
+          ? "transparent"
+          : Util.makeHexColor(color[0], color[1], color[2]);
+    }
+  }
 }
 
 class TextWidgetAnnotationElement extends WidgetAnnotationElement {
@@ -860,6 +870,7 @@ class TextWidgetAnnotationElement extends WidgetAnnotationElement {
     }
 
     this._setTextStyle(element);
+    this._setBorderAndBackgroundColors(element);
 
     this.container.appendChild(element);
     return this.container;
@@ -976,6 +987,15 @@ class CheckboxWidgetAnnotationElement extends WidgetAnnotationElement {
       );
     }
 
+    this._setBorderAndBackgroundColors(element);
+
+    const { fontColor } = this.data.defaultAppearanceData;
+    element.style.color = Util.makeHexColor(
+      fontColor[0],
+      fontColor[1],
+      fontColor[2]
+    );
+
     this.container.appendChild(element);
     return this.container;
   }
@@ -1066,6 +1086,8 @@ class RadioButtonWidgetAnnotationElement extends WidgetAnnotationElement {
       );
     }
 
+    this._setBorderAndBackgroundColors(element);
+
     this.container.appendChild(element);
     return this.container;
   }
@@ -1297,6 +1319,8 @@ class ChoiceWidgetAnnotationElement extends WidgetAnnotationElement {
       });
     }
 
+    this._setBorderAndBackgroundColors(selectElement);
+
     this.container.appendChild(selectElement);
     return this.container;
   }

test/integration/scripting_spec.js

@@ -664,6 +664,7 @@ describe("Interaction", () => {
               );
 
               await page.click(`[data-annotation-id='${id}R']`);
+              await page.focus(ref);
               await page.waitForFunction(
                 (_ref, _current, _propName) =>
                   getComputedStyle(document.querySelector(_ref))[_propName] !==

test/pdfs/.gitignore

@@ -260,6 +260,7 @@
 !issue4061.pdf
 !issue4668.pdf
 !PDFJS-7562-reduced.pdf
+!issue13003.pdf
 !issue11768_reduced.pdf
 !issue5039.pdf
 !issue5070.pdf

test/pdfs/issue13003.pdf

@@ -2343,6 +2343,13 @@
        "rounds": 1,
        "type": "eq"
     },
+    {  "id": "issue13003",
+       "file": "pdfs/issue13003.pdf",
+       "md5": "a4c00bd6456d3c16b9bd44957caa4ab6",
+       "rounds": 1,
+       "type": "eq",
+       "annotations": true
+    },
     {  "id": "issue7200",
        "file": "pdfs/issue7200.pdf",
        "md5": "ddae17424ea23930eecf8b612a66ed0f",

test/test_manifest.json

@@ -45,7 +45,7 @@
 .annotationLayer .choiceWidgetAnnotation select,
 .annotationLayer .buttonWidgetAnnotation.checkBox input,
 .annotationLayer .buttonWidgetAnnotation.radioButton input {
-  background-color: rgba(0, 54, 255, 0.13);
+  background-color: transparent;
   border: 1px solid transparent;
   box-sizing: border-box;
   font-size: 9px;
@@ -88,13 +88,6 @@
   border: 1px solid rgba(0, 0, 0, 1);
 }
 
-.annotationLayer .textWidgetAnnotation input:focus,
-.annotationLayer .textWidgetAnnotation textarea:focus,
-.annotationLayer .choiceWidgetAnnotation select:focus {
-  background: none;
-  border: 1px solid transparent;
-}
-
 .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
 .annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,
 .annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {