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; }