Merge pull request #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/annotation_layer_test.css

@@ -1,165 +0,0 @@
-/* Copyright 2015 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.
- */
-
-/* Used for annotation layer tests */
-
-* {
-  padding: 0;
-  margin: 0;
-}
-
-.annotationLayer {
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.annotationLayer > section {
-  position: absolute;
-}
-
-.annotationLayer .linkAnnotation > a {
-  position: absolute;
-  font-size: 1em;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0.2;
-  background: #ff0;
-  box-shadow: 0px 2px 10px #ff0;
-}
-
-.annotationLayer .textAnnotation img {
-  position: absolute;
-}
-
-.annotationLayer .textWidgetAnnotation input,
-.annotationLayer .textWidgetAnnotation textarea,
-.annotationLayer .choiceWidgetAnnotation select,
-.annotationLayer .buttonWidgetAnnotation.checkBox input,
-.annotationLayer .buttonWidgetAnnotation.radioButton input {
-  background-color: rgba(0, 54, 255, 0.13);
-  border: 1px solid transparent;
-  box-sizing: border-box;
-  font-size: 9px;
-  height: 100%;
-  padding: 0 3px;
-  vertical-align: top;
-  width: 100%;
-}
-
-.annotationLayer .buttonWidgetAnnotation.radioButton input {
-  border-radius: 50%;
-}
-
-.annotationLayer .textWidgetAnnotation textarea {
-  font: message-box;
-  font-size: 9px;
-  resize: none;
-}
-
-.annotationLayer .textWidgetAnnotation input[disabled],
-.annotationLayer .textWidgetAnnotation textarea[disabled],
-.annotationLayer .choiceWidgetAnnotation select[disabled],
-.annotationLayer .buttonWidgetAnnotation.checkBox input[disabled],
-.annotationLayer .buttonWidgetAnnotation.radioButton input[disabled] {
-  background: none;
-  border: 1px solid transparent;
-}
-
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,
-.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
-  background-color: #000;
-  content: '';
-  display: block;
-  position: absolute;
-}
-
-.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before {
-  border-radius: 50%;
-  height: 50%;
-  left: 30%;
-  top: 20%;
-  width: 50%;
-}
-
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
-  height: 80%;
-  left: 45%;
-  width: 1px;
-}
-
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before {
-  transform: rotate(45deg);
-}
-
-.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after {
-  transform: rotate(-45deg);
-}
-
-.annotationLayer .textWidgetAnnotation input.comb {
-  font-family: monospace;
-  padding-left: 2px;
-  padding-right: 0;
-}
-
-.annotationLayer .buttonWidgetAnnotation.checkBox input,
-.annotationLayer .buttonWidgetAnnotation.radioButton input {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  -ms-appearance: none;
-  appearance: none;
-  padding: 0;
-}
-
-.annotationLayer .popupAnnotation {
-  display: block !important;
-}
-
-.annotationLayer .popupWrapper {
-  display: block !important;
-  position: absolute;
-  width: 20em;
-}
-
-.annotationLayer .popup {
-  position: absolute;
-  z-index: 200;
-  max-width: 20em;
-  background-color: #FFFF99;
-  box-shadow: 0px 2px 5px #333;
-  border-radius: 2px;
-  padding: 0.6em;
-  margin-left: 5px;
-  font: message-box;
-  word-wrap: break-word;
-}
-
-.annotationLayer .popup h1 {
-  font-size: 1em;
-  border-bottom: 1px solid #000000;
-  margin: 0;
-  padding: 0 0 0.2em 0;
-}
-
-.annotationLayer .popup p {
-  margin: 0;
-  padding: 0.2em 0 0 0;
-}

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) {
+    // Use the cached promises if they are available.
-      return annotationLayerStylePromise;
+    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();
+    // Load the style files and cache the results.
-      xhr.open('GET', './annotation_layer_test.css');
+    for (let key in styles) {
-      xhr.onload = function () {
+      styles[key].promise = new Promise(function(resolve) {
-        resolve(xhr.responseText);
+        let xhr = new XMLHttpRequest();
-      };
+        xhr.open('GET', styles[key].file);
-      xhr.send(null);
+        xhr.onload = function() {
-    });
+          resolve(xhr.responseText);
-    return annotationLayerStylePromise;
+        };
+        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) {
+      stylePromise.then(function (common, overrides) {
-        style.textContent = styles;
+        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;
 }