Merge pull request mozilla#8893 from timvandermeij/annotations-css-dedup

Combine the common styles and overrides for the annotation layer reference tests

test/annotation_layer_builder_overrides.css

@@ -0,0 +1,31 @@
+/* Copyright 2017 Mozilla Foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* Overrides to make the annotation layer visible for reference testing. */
+
+.annotationLayer {
+  position: absolute;
+}
+
+.annotationLayer .linkAnnotation > a {
+  opacity: 0.2;
+  background: #ff0;
+  box-shadow: 0px 2px 10px #ff0;
+}
+
+.annotationLayer .popupAnnotation,
+.annotationLayer .popupWrapper {
+  display: block;
+}

test/driver.js

@@ -133,22 +133,47 @@ var rasterizeTextLayer = (function rasterizeTextLayerClosure() {
  * @class
  */
 var rasterizeAnnotationLayer = (function rasterizeAnnotationLayerClosure() {
-  var SVG_NS = 'http://www.w3.org/2000/svg';
+  const SVG_NS = 'http://www.w3.org/2000/svg';
+
+  /**
+   * For the reference tests, the entire annotation layer must be visible. To
+   * achieve this, we load the common styles as used by the viewer and extend
+   * them with a set of overrides to make all elements visible.
+   *
+   * Note that we cannot simply use `@import` to import the common styles in
+   * the overrides file because the browser does not resolve that when the
+   * styles are inserted via XHR. Therefore, we load and combine them here.
+   */
+  let styles = {
+    common: {
+      file: '../web/annotation_layer_builder.css',
+      promise: null,
+    },
+    overrides: {
+      file: './annotation_layer_builder_overrides.css',
+      promise: null,
+    },
+  };
 
-  var annotationLayerStylePromise = null;
   function getAnnotationLayerStyle() {
-    if (annotationLayerStylePromise) {
-      return annotationLayerStylePromise;
+    // Use the cached promises if they are available.
+    if (styles.common.promise && styles.overrides.promise) {
+      return Promise.all([styles.common.promise, styles.overrides.promise]);
     }
-    annotationLayerStylePromise = new Promise(function (resolve) {
-      var xhr = new XMLHttpRequest();
-      xhr.open('GET', './annotation_layer_test.css');
-      xhr.onload = function () {
-        resolve(xhr.responseText);
-      };
-      xhr.send(null);
-    });
-    return annotationLayerStylePromise;
+
+    // Load the style files and cache the results.
+    for (let key in styles) {
+      styles[key].promise = new Promise(function(resolve) {
+        let xhr = new XMLHttpRequest();
+        xhr.open('GET', styles[key].file);
+        xhr.onload = function() {
+          resolve(xhr.responseText);
+        };
+        xhr.send(null);
+      });
+    }
+
+    return Promise.all([styles.common.promise, styles.overrides.promise]);
   }
 
   function inlineAnnotationImages(images) {
@@ -196,8 +221,8 @@ var rasterizeAnnotationLayer = (function rasterizeAnnotationLayerClosure() {
       div.className = 'annotationLayer';
 
       // Rendering annotation layer as HTML.
-      stylePromise.then(function (styles) {
-        style.textContent = styles;
+      stylePromise.then(function (common, overrides) {
+        style.textContent = common + overrides;
 
         var annotation_viewport = viewport.clone({ dontFlip: true, });
         var parameters = {

web/annotation_layer_builder.css

@@ -51,11 +51,16 @@
   box-sizing: border-box;
   font-size: 9px;
   height: 100%;
+  margin: 0;
   padding: 0 3px;
   vertical-align: top;
   width: 100%;
 }
 
+.annotationLayer .choiceWidgetAnnotation select option {
+  padding: 0;
+}
+
 .annotationLayer .buttonWidgetAnnotation.radioButton input {
   border-radius: 50%;
 }
@@ -163,16 +168,19 @@
   padding: 0.6em;
   margin-left: 5px;
   cursor: pointer;
+  font: message-box;
   word-wrap: break-word;
 }
 
 .annotationLayer .popup h1 {
   font-size: 1em;
   border-bottom: 1px solid #000000;
+  margin: 0;
   padding-bottom: 0.2em;
 }
 
 .annotationLayer .popup p {
+  margin: 0;
   padding-top: 0.2em;
 }