Use the checkboxes and radio button appearances as defined in the pdf to render them in the annotation layer (bug 1802506)

The idea is to generate two operator lists for the Yes/Off states and render them on a separate canvas.
These canvases are then attached the annotation and we modify their display depending on the input state.

It fixes #18021.

src/core/annotation.js

@@ -785,6 +785,14 @@ class Annotation {
     this._needAppearances = false;
   }
 
+  _getOperatorListNoAppearance() {
+    return {
+      opList: new OperatorList(),
+      separateForm: false,
+      separateCanvas: false,
+    };
+  }
+
   /**
    * @private
    */
@@ -1213,28 +1221,32 @@ class Annotation {
     return resources;
   }
 
+  // Whether the annotation should only be rendered on its own canvas when
+  // interactive forms are enabled. This is the case for checkbox/radio button
+  // widgets, whose checked/unchecked appearances are toggled in forms mode;
+  // other annotations (e.g. push buttons) keep their own canvas in any display
+  // mode.
+  get _ownCanvasRequiresForms() {
+    return false;
+  }
+
   async getOperatorList(evaluator, task, intent, annotationStorage) {
     const { hasOwnCanvas, id, rect } = this.data;
     let appearance = this.appearance;
     const isUsingOwnCanvas = !!(
-      hasOwnCanvas && intent & RenderingIntentFlag.DISPLAY
+      hasOwnCanvas &&
+      intent & RenderingIntentFlag.DISPLAY &&
+      (!this._ownCanvasRequiresForms ||
+        intent & RenderingIntentFlag.ANNOTATIONS_FORMS)
     );
     if (isUsingOwnCanvas && (this.width === 0 || this.height === 0)) {
       // Empty annotation, don't draw anything.
       this.data.hasOwnCanvas = false;
-      return {
+      return this._getOperatorListNoAppearance();
-        opList: new OperatorList(),
-        separateForm: false,
-        separateCanvas: false,
-      };
     }
     if (!appearance) {
       if (!isUsingOwnCanvas) {
-        return {
+        return this._getOperatorListNoAppearance();
-          opList: new OperatorList(),
-          separateForm: false,
-          separateCanvas: false,
-        };
       }
       appearance = new StringStream("", new Dict());
     }
@@ -1244,7 +1256,12 @@ class Annotation {
       RESOURCES_KEYS_OPERATOR_LIST,
       appearance
     );
-    const bbox = lookupRect(appearanceDict.getArray("BBox"), [0, 0, 1, 1]);
+    const bbox = lookupRect(appearanceDict.getArray("BBox"), [
+      0,
+      0,
+      this.width,
+      this.height,
+    ]);
     const matrix = lookupMatrix(
       appearanceDict.getArray("Matrix"),
       IDENTITY_MATRIX
@@ -2092,11 +2109,9 @@ class WidgetAnnotation extends Annotation {
       !this.data.noHTML &&
       !this.data.hasOwnCanvas
     ) {
-      return {
+      const list = this._getOperatorListNoAppearance();
-        opList: new OperatorList(),
+      list.separateForm = true;
-        separateForm: true,
+      return list;
-        separateCanvas: false,
-      };
     }
 
     if (!this._hasText) {
@@ -3148,20 +3163,58 @@ class ButtonWidgetAnnotation extends WidgetAnnotation {
     this.data.radioButton = isRadio && !isPushButton;
     this.data.pushButton = isPushButton;
     this.data.isTooltipOnly = false;
+    this.data.hasOwnCanvas = true;
+    this.data.noHTML = false;
 
     if (this.data.checkBox) {
       this._processCheckBox(params);
     } else if (this.data.radioButton) {
       this._processRadioButton(params);
     } else if (this.data.pushButton) {
-      this.data.hasOwnCanvas = true;
-      this.data.noHTML = false;
       this._processPushButton(params);
     } else {
       warn("Invalid field flags for button widget annotation");
     }
   }
 
+  get _ownCanvasRequiresForms() {
+    return this.data.checkBox || this.data.radioButton;
+  }
+
+  #getOperatorListForAppearance(
+    evaluator,
+    task,
+    intent,
+    annotationStorage,
+    rotation,
+    appearance
+  ) {
+    if (!appearance) {
+      return this._getOperatorListNoAppearance();
+    }
+
+    const savedAppearance = this.appearance;
+    const savedMatrix = lookupMatrix(
+      appearance.dict.getArray("Matrix"),
+      IDENTITY_MATRIX
+    );
+
+    if (rotation) {
+      appearance.dict.set("Matrix", this.getRotationMatrix(annotationStorage));
+    }
+
+    this.appearance = appearance;
+    const operatorList = super.getOperatorList(
+      evaluator,
+      task,
+      intent,
+      annotationStorage
+    );
+    this.appearance = savedAppearance;
+    appearance.dict.set("Matrix", savedMatrix);
+    return operatorList;
+  }
+
   async getOperatorList(evaluator, task, intent, annotationStorage) {
     if (this.data.pushButton) {
       return super.getOperatorList(
@@ -3173,6 +3226,45 @@ class ButtonWidgetAnnotation extends WidgetAnnotation {
       );
     }
 
+    if (
+      intent & RenderingIntentFlag.DISPLAY &&
+      intent & RenderingIntentFlag.ANNOTATIONS_FORMS &&
+      (this.data.checkBox || this.data.radioButton)
+    ) {
+      // Tag the dedicated canvas with the state it represents. The appearance
+      // may start with other operators (e.g. an optional content marked-content
+      // sequence), so target the `beginAnnotation` operator directly rather
+      // than assuming it's the first one.
+      const setCanvasName = (operatorList, name) => {
+        const index = operatorList.fnArray.indexOf(OPS.beginAnnotation);
+        if (index !== -1) {
+          operatorList.argsArray[index].push(name);
+        }
+      };
+      const checked = await this.#getOperatorListForAppearance(
+        evaluator,
+        task,
+        intent,
+        annotationStorage,
+        null,
+        this.checkedAppearance
+      );
+      setCanvasName(checked.opList, "checked");
+      const unchecked = await this.#getOperatorListForAppearance(
+        evaluator,
+        task,
+        intent,
+        annotationStorage,
+        null,
+        this.uncheckedAppearance
+      );
+      setCanvasName(unchecked.opList, "unchecked");
+      checked.opList.addOpList(unchecked.opList);
+      checked.separateForm ||= unchecked.separateForm;
+      checked.separateCanvas ||= unchecked.separateCanvas;
+      return checked;
+    }
+
     let value = null;
     let rotation = null;
     if (annotationStorage) {
@@ -3195,41 +3287,14 @@ class ButtonWidgetAnnotation extends WidgetAnnotation {
         : this.data.fieldValue === this.data.buttonValue;
     }
 
-    const appearance = value
+    return this.#getOperatorListForAppearance(
-      ? this.checkedAppearance
+      evaluator,
-      : this.uncheckedAppearance;
+      task,
-    if (appearance) {
+      intent,
-      const savedAppearance = this.appearance;
+      annotationStorage,
-      const savedMatrix = lookupMatrix(
+      rotation,
-        appearance.dict.getArray("Matrix"),
+      value ? this.checkedAppearance : this.uncheckedAppearance
-        IDENTITY_MATRIX
+    );
-      );
-
-      if (rotation) {
-        appearance.dict.set(
-          "Matrix",
-          this.getRotationMatrix(annotationStorage)
-        );
-      }
-
-      this.appearance = appearance;
-      const operatorList = super.getOperatorList(
-        evaluator,
-        task,
-        intent,
-        annotationStorage
-      );
-      this.appearance = savedAppearance;
-      appearance.dict.set("Matrix", savedMatrix);
-      return operatorList;
-    }
-
-    // No appearance
-    return {
-      opList: new OperatorList(),
-      separateForm: false,
-      separateCanvas: false,
-    };
   }
 
   async save(evaluator, task, annotationStorage, changes) {
@@ -3422,13 +3487,11 @@ class ButtonWidgetAnnotation extends WidgetAnnotation {
 
   _processCheckBox(params) {
     const customAppearance = params.dict.get("AP");
-    if (!(customAppearance instanceof Dict)) {
+    let normalAppearance =
-      return;
+      customAppearance instanceof Dict ? customAppearance.get("N") : null;
-    }
-
-    const normalAppearance = customAppearance.get("N");
     if (!(normalAppearance instanceof Dict)) {
-      return;
+      // Synthesize a default appearance below when the field defines none.
+      normalAppearance = null;
     }
 
     // See https://bugzilla.mozilla.org/show_bug.cgi?id=1722036.
@@ -3444,7 +3507,9 @@ class ButtonWidgetAnnotation extends WidgetAnnotation {
         : "Yes";
 
     // Don't decode the keys which are names.
-    const exportValues = [...normalAppearance.getKeys()];
+    const exportValues = normalAppearance
+      ? [...normalAppearance.getKeys()]
+      : [];
     if (exportValues.length === 0) {
       exportValues.push("Off", yes);
     } else if (exportValues.length === 1) {
@@ -3470,10 +3535,10 @@ class ButtonWidgetAnnotation extends WidgetAnnotation {
 
     this.data.exportValue = exportValues[1];
 
-    const checkedAppearance = normalAppearance.get(this.data.exportValue);
+    const checkedAppearance = normalAppearance?.get(this.data.exportValue);
     this.checkedAppearance =
       checkedAppearance instanceof BaseStream ? checkedAppearance : null;
-    const uncheckedAppearance = normalAppearance.get("Off");
+    const uncheckedAppearance = normalAppearance?.get("Off");
     this.uncheckedAppearance =
       uncheckedAppearance instanceof BaseStream ? uncheckedAppearance : null;
 

src/display/annotation_layer.js

@@ -439,9 +439,6 @@ class AnnotationElement {
       if (horizontalRadius > 0 || verticalRadius > 0) {
         const radius = `calc(${horizontalRadius}px * var(--total-scale-factor)) / calc(${verticalRadius}px * var(--total-scale-factor))`;
         style.borderRadius = radius;
-      } else if (this instanceof RadioButtonWidgetAnnotationElement) {
-        const radius = `calc(${width}px * var(--total-scale-factor)) / calc(${height}px * var(--total-scale-factor))`;
-        style.borderRadius = radius;
       }
 
       switch (data.borderStyle.style) {
@@ -2009,7 +2006,6 @@ class CheckboxWidgetAnnotationElement extends WidgetAnnotationElement {
       );
     }
 
-    this._setBackgroundColor(element);
     this._setDefaultPropertiesFromJS(element);
 
     this.container.append(element);
@@ -2028,7 +2024,9 @@ class RadioButtonWidgetAnnotationElement extends WidgetAnnotationElement {
     const data = this.data;
     const id = data.id;
     let value = storage.getValue(id, {
-      value: data.fieldValue === data.buttonValue,
+      // A radio without an on-state (`buttonValue === null`, e.g. no /AP) must
+      // not be checked by default, otherwise `null === null` would select it.
+      value: data.buttonValue !== null && data.fieldValue === data.buttonValue,
     }).value;
     if (typeof value === "string") {
       // The value has been changed through js and set in annotationStorage.
@@ -2115,7 +2113,6 @@ class RadioButtonWidgetAnnotationElement extends WidgetAnnotationElement {
       );
     }
 
-    this._setBackgroundColor(element);
     this._setDefaultPropertiesFromJS(element);
 
     this.container.append(element);
@@ -4139,18 +4136,44 @@ class AnnotationLayer {
       if (!element) {
         continue;
       }
-
+      if (Array.isArray(canvas)) {
-      canvas.className = "annotationContent";
+        for (const cvs of canvas) {
+          cvs.className = "annotationContent";
+          cvs.ariaHidden = true;
+        }
+      } else {
+        canvas.className = "annotationContent";
+        canvas.ariaHidden = true;
+      }
+      const toRemove = [];
+      for (const child of element.children) {
+        if (child.nodeName === "CANVAS") {
+          toRemove.push(child);
+        }
+      }
+      for (const child of toRemove) {
+        child.remove();
+      }
+      const firstCanvas = Array.isArray(canvas) ? canvas[0] : canvas;
       const { firstChild } = element;
       if (!firstChild) {
-        element.append(canvas);
+        element.append(firstCanvas);
-      } else if (firstChild.nodeName === "CANVAS") {
-        firstChild.replaceWith(canvas);
       } else if (!firstChild.classList.contains("annotationContent")) {
-        firstChild.before(canvas);
+        firstChild.before(firstCanvas);
       } else {
-        firstChild.after(canvas);
+        firstChild.after(firstCanvas);
       }
+      if (Array.isArray(canvas)) {
+        let lastCanvas = firstCanvas;
+        for (let i = 1, ii = canvas.length; i < ii; i++) {
+          lastCanvas.after(canvas[i]);
+          lastCanvas = canvas[i];
+        }
+      }
+      // Drop only the entries we inserted; keep ones whose element isn't in the
+      // DOM yet so a later refresh can still pick them up instead of losing
+      // them.
+      this.#annotationCanvasMap.delete(id);
 
       const editableAnnotation = this.#editableAnnotations.get(id);
       if (!editableAnnotation) {
@@ -4168,7 +4191,12 @@ class AnnotationLayer {
         editableAnnotation.canvas = canvas;
       }
     }
-    this.#annotationCanvasMap.clear();
+  }
+
+  // Move any pending annotation canvases (e.g. higher-resolution ones rendered
+  // by the detail view) into their elements.
+  refreshCanvases() {
+    this.#setAnnotationCanvasMap();
   }
 
   getEditableAnnotations() {

src/display/canvas.js

@@ -3630,7 +3630,15 @@ class CanvasGraphics {
     }
   }
 
-  beginAnnotation(opIdx, id, rect, transform, matrix, hasOwnCanvas) {
+  beginAnnotation(
+    opIdx,
+    id,
+    rect,
+    transform,
+    matrix,
+    hasOwnCanvas,
+    canvasName
+  ) {
     // The annotations are drawn just after the page content.
     // The page content drawing can potentially have set a transform,
     // a clipping path, whatever...
@@ -3673,7 +3681,26 @@ class CanvasGraphics {
           canvasHeight
         );
         const { canvas, context } = this.annotationCanvas;
-        this.annotationCanvasMap.set(id, canvas);
+        if (canvasName) {
+          let canvases = this.annotationCanvasMap.get(id);
+          if (!canvases) {
+            canvases = [];
+            this.annotationCanvasMap.set(id, canvases);
+          }
+          canvas.setAttribute("data-canvas-name", canvasName);
+          // Replace any same-named canvas from a previous render so stale
+          // low-resolution canvases don't pile up across zooms.
+          const index = canvases.findIndex(
+            c => c.getAttribute("data-canvas-name") === canvasName
+          );
+          if (index === -1) {
+            canvases.push(canvas);
+          } else {
+            canvases[index] = canvas;
+          }
+        } else {
+          this.annotationCanvasMap.set(id, canvas);
+        }
         this.annotationCanvas.savedCtx = this.ctx;
         this.ctx = context;
         this.ctx.save();

test/annotation_layer_builder_overrides.css

@@ -68,4 +68,26 @@
     color: red;
     font-size: 10px;
   }
+
+  .buttonWidgetAnnotation:is(.checkBox, .radioButton) {
+    img[data-canvas-name="checked"] {
+      &:has(~ input:checked) {
+        display: block;
+      }
+
+      &:has(~ input:not(:checked)) {
+        display: none;
+      }
+    }
+
+    img[data-canvas-name="unchecked"] {
+      &:has(~ input:checked) {
+        display: none;
+      }
+
+      &:has(~ input:not(:checked)) {
+        display: block;
+      }
+    }
+  }
 }

test/driver.js

@@ -94,6 +94,7 @@ async function writeSVG(svgElement, ctx) {
       setTimeout(resolve, 10);
     });
   }
+
   return loadImage(svg_xml, ctx);
 }
 
@@ -150,21 +151,40 @@ async function inlineImages(node, silentErrors = false) {
 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) {
-    promises.push(
+    if (Array.isArray(canvas)) {
-      new Promise(resolve => {
+      for (const canvasItem of canvas) {
-        canvas.toBlob(blob => {
+        canvasToImage(canvasItem, key);
-          const image = document.createElement("img");
+      }
-          image.classList.add("wasCanvas");
+    } else {
-          image.onload = function () {
+      canvasToImage(canvas, key);
-            image.style.width = Math.floor(image.width / outputScale) + "px";
+    }
-            resolve();
-          };
-          results.set(key, image);
-          image.src = URL.createObjectURL(blob);
-        });
-      })
-    );
   }
   await Promise.all(promises);
   return results;

test/integration/annotation_spec.mjs

@@ -122,12 +122,12 @@ describe("Checkbox annotation", () => {
           for (const selector of selectors) {
             await page.click(selector);
             await page.waitForFunction(
-              `document.querySelector('${selector} > :first-child').checked`
+              `document.querySelector('${selector} input').checked`
             );
 
             for (const otherSelector of selectors) {
               const checked = await page.$eval(
-                `${otherSelector} > :first-child`,
+                `${otherSelector} input`,
                 el => el.checked
               );
               expect(checked)
@@ -157,7 +157,7 @@ describe("Checkbox annotation", () => {
           const selector = getAnnotationSelector("7R");
           await page.click(selector);
           await page.waitForFunction(
-            `document.querySelector('${selector} > :first-child').checked`
+            `document.querySelector('${selector} input').checked`
           );
           expect(true).withContext(`In ${browserName}`).toEqual(true);
         })
@@ -185,7 +185,7 @@ describe("Checkbox annotation", () => {
           for (const selector of selectors) {
             await page.click(selector);
             await page.waitForFunction(
-              `document.querySelector('${selector} > :first-child').checked`
+              `document.querySelector('${selector} input').checked`
             );
           }
         })

test/integration/scripting_spec.mjs

@@ -2413,49 +2413,6 @@ describe("Interaction", () => {
     });
   });
 
-  describe("Change radio property", () => {
-    let pages;
-
-    beforeEach(async () => {
-      pages = await loadAndWait("bug1922766.pdf", getAnnotationSelector("44R"));
-    });
-
-    afterEach(async () => {
-      await closePages(pages);
-    });
-
-    it("must check that a change on a radio implies the change on all the radio in the group", async () => {
-      await Promise.all(
-        pages.map(async ([browserName, page]) => {
-          await waitForScripting(page);
-
-          const checkColor = async color => {
-            await waitForSandboxTrip(page);
-            for (const i of [40, 41, 42, 43]) {
-              const bgColor = await page.$eval(
-                `[data-element-id='${i}R']`,
-                el => getComputedStyle(el).backgroundColor
-              );
-              expect(bgColor)
-                .withContext(`In ${browserName}`)
-                .toEqual(`rgb(${color.join(", ")})`);
-            }
-          };
-          await checkColor([255, 0, 0]);
-          await page.click(getAnnotationSelector("44R"));
-          await checkColor([0, 0, 255]);
-          await page.click(getAnnotationSelector("44R"));
-          await checkColor([255, 0, 0]);
-
-          await page.click(getAnnotationSelector("43R"));
-          await waitForSandboxTrip(page);
-          await page.click(getAnnotationSelector("44R"));
-          await checkColor([0, 0, 255]);
-        })
-      );
-    });
-  });
-
   describe("Date creation must be timezone consistent", () => {
     let pages;
 

test/pdfs/.gitignore

@@ -932,3 +932,5 @@
 !cidfont_cmap_overflow.pdf
 !jbig2_file_header.pdf
 !text_field_own_canvas_calc.pdf
+!bug1802506.pdf
+!checkbox_no_appearance.pdf

test/pdfs/checkbox_no_appearance.pdf

@@ -0,0 +1,30 @@
+%PDF-1.7
+%ÿÿÿÿ
+1 0 obj
+<< /Type /Catalog /Pages 2 0 R /AcroForm << /Fields [4 0 R 5 0 R] /NeedAppearances true >> >>
+endobj
+2 0 obj
+<< /Type /Pages /Kids [3 0 R] /Count 1 >>
+endobj
+3 0 obj
+<< /Type /Page /Parent 2 0 R /MediaBox [0 0 200 200] /Annots [4 0 R 5 0 R] /Resources << >> >>
+endobj
+4 0 obj
+<< /Type /Annot /Subtype /Widget /FT /Btn /T (cbOn) /Rect [30 140 70 180] /V /Yes /AS /Yes >>
+endobj
+5 0 obj
+<< /Type /Annot /Subtype /Widget /FT /Btn /T (cbOff) /Rect [90 140 130 180] /V /Off /AS /Off >>
+endobj
+xref
+0 6
+0000000000 65535 f 
+0000000015 00000 n 
+0000000124 00000 n 
+0000000181 00000 n 
+0000000291 00000 n 
+0000000400 00000 n 
+trailer
+<< /Size 6 /Root 1 0 R >>
+startxref
+511
+%%EOF

test/test_manifest.json

@@ -14380,5 +14380,23 @@
     "rounds": 1,
     "link": true,
     "type": "eq"
+  },
+  {
+    "id": "bug1802506",
+    "file": "pdfs/bug1802506.pdf",
+    "md5": "ed56da1780b8480262c7329c4419fbb5",
+    "rounds": 1,
+    "type": "eq",
+    "annotations": true,
+    "forms": true
+  },
+  {
+    "id": "checkbox_no_appearance",
+    "file": "pdfs/checkbox_no_appearance.pdf",
+    "md5": "216ff8ea24c470421ff1c528d805caea",
+    "rounds": 1,
+    "type": "eq",
+    "annotations": true,
+    "forms": true
   }
 ]

test/unit/annotation_spec.js

@@ -1776,7 +1776,7 @@ describe("annotation", function () {
       expect(opList.argsArray[0]).toEqual([
         "271R",
         [0, 0, 32, 10],
-        [32, 0, 0, 10, 0, 0],
+        [1, 0, 0, 1, 0, 0],
         [1, 0, 0, 1, 0, 0],
         false,
       ]);
@@ -2607,6 +2607,44 @@ describe("annotation", function () {
       expect(opList.argsArray[3][0][0].unicode).toEqual("4");
     });
 
+    it("should synthesize a checked appearance for checkboxes without an /AP", async function () {
+      buttonWidgetDict.set("V", Name.get("Checked"));
+      buttonWidgetDict.set("Rect", [0, 0, 20, 20]);
+      // Note: no /AP entry, so a default appearance must be synthesized.
+
+      const buttonWidgetRef = Ref.get(124, 0);
+      const xref = new XRefMock([
+        { ref: buttonWidgetRef, data: buttonWidgetDict },
+      ]);
+      const task = new WorkerTask("test checkbox without /AP");
+      const checkboxEvaluator = partialEvaluator.clone({ ignoreErrors: true });
+      const annotation = await AnnotationFactory.create(
+        xref,
+        buttonWidgetRef,
+        annotationGlobalsMock,
+        idFactoryMock
+      );
+
+      expect(annotation.data.checkBox).toEqual(true);
+      expect(annotation.data.exportValue).toEqual("Checked");
+
+      const { opList } = await annotation.getOperatorList(
+        checkboxEvaluator,
+        task,
+        RenderingIntentFlag.DISPLAY | RenderingIntentFlag.ANNOTATIONS_FORMS,
+        new Map()
+      );
+
+      // A checkmark is drawn on its own dedicated "checked" canvas.
+      expect(opList.fnArray[0]).toEqual(OPS.beginAnnotation);
+      expect(opList.fnArray.at(-1)).toEqual(OPS.endAnnotation);
+      expect(opList.fnArray).toContain(OPS.showText);
+      const [id, , , , isUsingOwnCanvas, canvasName] = opList.argsArray[0];
+      expect(id).toEqual("124R");
+      expect(isUsingOwnCanvas).toEqual(true);
+      expect(canvasName).toEqual("checked");
+    });
+
     it("should render checkboxes for printing", async function () {
       const appearanceStatesDict = new Dict();
       const normalAppearanceDict = new Dict();
@@ -2685,7 +2723,7 @@ describe("annotation", function () {
       expect(opList2.argsArray[0]).toEqual([
         "124R",
         [0, 0, 0, 0],
-        [0, 0, 0, 0, 0, 0],
+        [1, 0, 0, 1, 0, 0],
         [1, 0, 0, 1, 0, 0],
         false,
       ]);
@@ -3084,7 +3122,7 @@ describe("annotation", function () {
       expect(opList2.argsArray[0]).toEqual([
         "124R",
         [0, 0, 0, 0],
-        [0, 0, 0, 0, 0, 0],
+        [1, 0, 0, 1, 0, 0],
         [1, 0, 0, 1, 0, 0],
         false,
       ]);
@@ -3147,7 +3185,7 @@ describe("annotation", function () {
       expect(opList.argsArray[0]).toEqual([
         "124R",
         [0, 0, 0, 0],
-        [0, 0, 0, 0, 0, 0],
+        [1, 0, 0, 1, 0, 0],
         [1, 0, 0, 1, 0, 0],
         false,
       ]);

web/annotation_layer_builder.css

@@ -17,6 +17,7 @@
   color-scheme: only light;
 
   --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
+  --annotation-unfocused-field-filter: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='pdfjsFillableField' x='0%' y='0%' width='100%' height='100%' color-interpolation-filters='sRGB'><feFlood flood-color='rgb(0,54,255)' flood-opacity='0.13' result='f'/><feComposite in='f' in2='SourceGraphic' operator='over'/></filter></svg>#pdfjsFillableField");
   --input-focus-border-color: Highlight;
   --input-focus-outline: 1px solid Canvas;
   --input-unfocused-border-color: transparent;
@@ -208,10 +209,6 @@
     padding: 0;
   }
 
-  .buttonWidgetAnnotation.radioButton input {
-    border-radius: 50%;
-  }
-
   .textWidgetAnnotation textarea {
     resize: none;
   }
@@ -259,36 +256,34 @@
     outline: var(--input-focus-outline);
   }
 
-  .buttonWidgetAnnotation.checkBox input:checked::before,
+  .buttonWidgetAnnotation:is(.checkBox, .radioButton) {
-  .buttonWidgetAnnotation.checkBox input:checked::after,
+    [data-canvas-name] {
-  .buttonWidgetAnnotation.radioButton input:checked::before {
+      filter: var(--annotation-unfocused-field-filter);
-    background-color: CanvasText;
+    }
-    content: "";
-    display: block;
-    position: absolute;
-  }
 
-  .buttonWidgetAnnotation.checkBox input:checked::before,
+    &:focus-within [data-canvas-name] {
-  .buttonWidgetAnnotation.checkBox input:checked::after {
+      filter: none;
-    height: 80%;
+    }
-    left: 45%;
-    width: 1px;
-  }
 
-  .buttonWidgetAnnotation.checkBox input:checked::before {
+    [data-canvas-name="checked"] {
-    transform: rotate(45deg);
+      &:has(~ input:checked) {
-  }
+        display: block;
+      }
 
-  .buttonWidgetAnnotation.checkBox input:checked::after {
+      &:has(~ input:not(:checked)) {
-    transform: rotate(-45deg);
+        display: none;
-  }
+      }
+    }
 
-  .buttonWidgetAnnotation.radioButton input:checked::before {
+    [data-canvas-name="unchecked"] {
-    border-radius: 50%;
+      &:has(~ input:checked) {
-    height: 50%;
+        display: none;
-    left: 25%;
+      }
-    top: 25%;
+
-    width: 50%;
+      &:has(~ input:not(:checked)) {
+        display: block;
+      }
+    }
   }
 
   .textWidgetAnnotation input.comb {
@@ -317,6 +312,17 @@
     appearance: none;
   }
 
+  .buttonWidgetAnnotation:is(.checkBox, .radioButton):has(
+      [data-canvas-name="checked"]
+    )
+    input:checked,
+  .buttonWidgetAnnotation:is(.checkBox, .radioButton):has(
+      [data-canvas-name="unchecked"]
+    )
+    input:not(:checked) {
+    background-image: none;
+  }
+
   .fileAttachmentAnnotation .popupTriggerArea {
     height: 100%;
     width: 100%;

web/annotation_layer_builder.js

@@ -224,6 +224,10 @@ class AnnotationLayerBuilder {
     this.#eventAC = null;
   }
 
+  refreshCanvases() {
+    this.annotationLayer?.refreshCanvases();
+  }
+
   hide() {
     if (!this.div) {
       return;

web/pdf_page_detail_view.js

@@ -297,6 +297,7 @@ class PDFPageDetailView extends BasePDFPageView {
         this.canvas = prevCanvas;
       },
       () => {
+        this.pageView._refreshAnnotationLayer();
         this.dispatchPageRendered(
           /* cssTransform */ false,
           /* isDetailView */ true

web/pdf_page_view.js

@@ -484,6 +484,17 @@ class PDFPageView extends BasePDFPageView {
     }
   }
 
+  // The detail view re-renders checkbox/radio appearances at a higher
+  // resolution into the shared `annotationCanvasMap`; move them into the
+  // annotation layer so they replace the lower-resolution ones. This only
+  // consumes pending canvases (no re-render), and is a no-op until their
+  // elements exist, so it's safe to call while the layer is still rendering.
+  _refreshAnnotationLayer() {
+    if (this._annotationCanvasMap?.size) {
+      this.annotationLayer?.refreshCanvases();
+    }
+  }
+
   async #renderAnnotationEditorLayer() {
     let error = null;
     try {