Merge pull request #8893 from timvandermeij/annotations-css-dedup
Combine the common styles and overrides for the annotation layer reference tests
This commit is contained in:
Jonas Jenwald
GitHub
commit
2916ed080d
31
test/annotation_layer_builder_overrides.css
Normal file
31
test/annotation_layer_builder_overrides.css
Normal file
@ -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;
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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 () {
|
||||
|
||||
// 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 annotationLayerStylePromise;
|
||||
}
|
||||
|
||||
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 = {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user