[Annotation] Use the clip-path property when an annotation has some quad points

This way it'll avoid to split a div in multiple divs having the same id (which
is supposed to be unique).

test/annotation_layer_builder_overrides.css

@@ -29,7 +29,9 @@
   -webkit-appearance: none;
 }
 
-.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a,
+.annotationLayer
+  :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder)
+  > a,
 .annotationLayer .popupTriggerArea::after,
 .annotationLayer .fileAttachmentAnnotation .popupTriggerArea {
   opacity: 0.2;
@@ -37,6 +39,14 @@
   box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
 }
 
+.annotationLayer .hasClipPath::after {
+  box-shadow: none;
+}
+
+.annotationLayer .linkAnnotation.hasBorder {
+  background-color: rgba(255, 255, 0, 0.2);
+}
+
 .annotationLayer .popupTriggerArea::after {
   display: block;
   width: 100%;

test/driver.js

@@ -84,6 +84,9 @@ async function writeSVG(svgElement, ctx) {
     // Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1844414
     // we load the image two times.
     await loadImage(svg_xml, null);
+    await new Promise(resolve => {
+      setTimeout(resolve, 10);
+    });
   }
   return loadImage(svg_xml, ctx);
 }