diff --git a/test/annotation_layer_builder_overrides.css b/test/annotation_layer_builder_overrides.css
new file mode 100644
index 000000000..404d39f46
--- /dev/null
+++ b/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;
+}
diff --git a/test/annotation_layer_test.css b/test/annotation_layer_test.css
deleted file mode 100644
index cba8218e1..000000000
--- a/test/annotation_layer_test.css
+++ /dev/null
@@ -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;
-}
diff --git a/test/driver.js b/test/driver.js
index 818be019d..922e1838a 100644
--- a/test/driver.js
+++ b/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 = {
diff --git a/web/annotation_layer_builder.css b/web/annotation_layer_builder.css
index 695e2282a..d9e3d8e0d 100644
--- a/web/annotation_layer_builder.css
+++ b/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;
}