Button widget annotations: implement reference testing

Moreover, ensure that the read-only state is respected and improve CSS
names.

src/display/annotation_layer.js

@@ -563,9 +563,10 @@ var CheckboxWidgetAnnotationElement =
      * @returns {HTMLSectionElement}
      */
     render: function CheckboxWidgetAnnotationElement_render() {
-      this.container.className = 'checkboxWidgetAnnotation';
+      this.container.className = 'buttonWidgetAnnotation checkBox';
 
       var element = document.createElement('input');
+      element.disabled = this.data.readOnly;
       element.type = 'checkbox';
       element.id = this.data.fieldName;
       if (this.data.fieldValue && this.data.fieldValue !== 'Off') {
@@ -604,10 +605,11 @@ var RadioButtonWidgetAnnotationElement =
      * @returns {HTMLSectionElement}
      */
     render: function RadioButtonWidgetAnnotationElement_render() {
-      this.container.className = 'radioButtonWidgetAnnotation';
+      this.container.className = 'buttonWidgetAnnotation radioButton';
 
       var element = document.createElement('input');
       var id = this.data.fieldName + '.' + this.data.buttonValue;
+      element.disabled = this.data.readOnly;
       element.type = 'radio';
       element.id = id;
       element.name = this.data.fieldName;

test/annotation_layer_test.css

@@ -45,7 +45,9 @@
 
 .annotationLayer .textWidgetAnnotation input,
 .annotationLayer .textWidgetAnnotation textarea,
-.annotationLayer .choiceWidgetAnnotation select {
+.annotationLayer .choiceWidgetAnnotation select,
+.annotationLayer .buttonWidgetAnnotation.checkBox label,
+.annotationLayer .buttonWidgetAnnotation.radioButton label {
   background-color: rgba(0, 54, 255, 0.13);
   border: 1px solid transparent;
   box-sizing: border-box;
@@ -64,7 +66,9 @@
 
 .annotationLayer .textWidgetAnnotation input[disabled],
 .annotationLayer .textWidgetAnnotation textarea[disabled],
-.annotationLayer .choiceWidgetAnnotation select[disabled] {
+.annotationLayer .choiceWidgetAnnotation select[disabled],
+.annotationLayer .buttonWidgetAnnotation.checkBox input[disabled] + label,
+.annotationLayer .buttonWidgetAnnotation.radioButton input[disabled] + label {
   background: none;
   border: 1px solid transparent;
 }
@@ -75,6 +79,21 @@
   padding-right: 0;
 }
 
+.annotationLayer .buttonWidgetAnnotation.checkBox label,
+.annotationLayer .buttonWidgetAnnotation.radioButton label {
+  position: absolute;
+}
+
+.annotationLayer .buttonWidgetAnnotation.checkBox input,
+.annotationLayer .buttonWidgetAnnotation.radioButton input {
+  position: absolute;
+  left: -9999px;
+}
+
+.annotationLayer .buttonWidgetAnnotation.radioButton label {
+  border-radius: 50%;
+}
+
 .annotationLayer .popupAnnotation {
   display: block !important;
 }

test/pdfs/.gitignore

@@ -266,5 +266,6 @@
 !annotation-fileattachment.pdf
 !annotation-text-widget.pdf
 !annotation-choice-widget.pdf
+!annotation-button-widget.pdf
 !zero_descent.pdf
 !operator-in-TJ-array.pdf

test/test_manifest.json

@@ -3312,6 +3312,20 @@
        "type": "eq",
        "forms": true
     },
+    {  "id": "annotation-button-widget-annotations",
+       "file": "pdfs/annotation-button-widget.pdf",
+       "md5": "5cf23adfff84256d9cfe261bea96dade",
+       "rounds": 1,
+       "type": "eq",
+       "annotations": true
+    },
+    {  "id": "annotation-button-widget-forms",
+       "file": "pdfs/annotation-button-widget.pdf",
+       "md5": "5cf23adfff84256d9cfe261bea96dade",
+       "rounds": 1,
+       "type": "eq",
+       "forms": true
+    },
     {  "id": "issue6108",
        "file": "pdfs/issue6108.pdf",
        "md5": "8961cb55149495989a80bf0487e0f076",

web/annotation_layer_builder.css

@@ -62,7 +62,9 @@
 
 .annotationLayer .textWidgetAnnotation input[disabled],
 .annotationLayer .textWidgetAnnotation textarea[disabled],
-.annotationLayer .choiceWidgetAnnotation select[disabled] {
+.annotationLayer .choiceWidgetAnnotation select[disabled],
+.annotationLayer .buttonWidgetAnnotation.checkBox input[disabled] + label,
+.annotationLayer .buttonWidgetAnnotation.radioButton input[disabled] + label {
   background: none;
   border: 1px solid transparent;
   cursor: not-allowed;
@@ -97,8 +99,8 @@
   width: 115%;
 }
 
-.annotationLayer .checkboxWidgetAnnotation label,
-.annotationLayer .radioButtonWidgetAnnotation label {
+.annotationLayer .buttonWidgetAnnotation.checkBox label,
+.annotationLayer .buttonWidgetAnnotation.radioButton label {
   background-color: rgba(0, 54, 255, 0.13);
   border: 1px solid transparent;
   box-sizing: border-box;
@@ -108,34 +110,34 @@
   width: 100%;
 }
 
-.annotationLayer .checkboxWidgetAnnotation input,
-.annotationLayer .radioButtonWidgetAnnotation input {
+.annotationLayer .buttonWidgetAnnotation.checkBox input,
+.annotationLayer .buttonWidgetAnnotation.radioButton input {
   position: absolute;
   left: -9999px;
 }
 
-.annotationLayer .radioButtonWidgetAnnotation label {
+.annotationLayer .buttonWidgetAnnotation.radioButton label {
   border-radius: 50%;
 }
 
-.annotationLayer .checkboxWidgetAnnotation label:hover,
-.annotationLayer .radioButtonWidgetAnnotation label:hover,
-.annotationLayer .checkboxWidgetAnnotation label:focus,
-.annotationLayer .radioButtonWidgetAnnotation label:focus,
-.annotationLayer .checkboxWidgetAnnotation input:focus + label,
-.annotationLayer .radioButtonWidgetAnnotation input:focus + label {
+.annotationLayer .buttonWidgetAnnotation.checkBox label:hover,
+.annotationLayer .buttonWidgetAnnotation.checkBox label:focus,
+.annotationLayer .buttonWidgetAnnotation.checkBox input:focus + label,
+.annotationLayer .buttonWidgetAnnotation.radioButton label:hover,
+.annotationLayer .buttonWidgetAnnotation.radioButton label:focus,
+.annotationLayer .buttonWidgetAnnotation.radioButton input:focus + label {
   border: 1px solid #000;
 }
 
-.annotationLayer .checkboxWidgetAnnotation input:checked + label:before,
-.annotationLayer .radioButtonWidgetAnnotation input:checked + label:before {
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked + label:before,
+.annotationLayer .buttonWidgetAnnotation.radioButton input:checked + label:before {
   content: '';
   left: 50%;
   top: 50%;
   position: absolute;
 }
 
-.annotationLayer .checkboxWidgetAnnotation input:checked + label:before {
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked + label:before {
   border-bottom: 1px solid #000;
   border-left: 1px solid #000;
   height: 25%;
@@ -147,7 +149,7 @@
   width: 60%;
 }
 
-.annotationLayer .radioButtonWidgetAnnotation input:checked + label:before {
+.annotationLayer .buttonWidgetAnnotation.radioButton input:checked + label:before {
   background-color: #000;
   border-radius: 50%;
   height: 50%;