Fix font rerender test when font is a system font

test/browser/spec/ol/renderer/canvas/vectorlayer.test.js

@@ -18,14 +18,20 @@ import {
   getWidth,
 } from '../../../../../../src/ol/extent.js';
 import {checkedFonts} from '../../../../../../src/ol/render/canvas.js';
+import {createFontStyle} from '../../../util.js';
 import {fromExtent} from '../../../../../../src/ol/geom/Polygon.js';
 import {get as getProjection} from '../../../../../../src/ol/proj.js';
 
 describe('ol.renderer.canvas.VectorLayer', function () {
   describe('constructor', function () {
-    const font = document.createElement('link');
-    font.href = 'https://fonts.googleapis.com/css?family=Droid+Sans';
-    font.rel = 'stylesheet';
+    const fontFamily = 'Ubuntu - VectorLayerTest';
+    const font = createFontStyle({
+      fontFamily: fontFamily,
+      src: {
+        url: '/spec/ol/data/fonts/ubuntu-regular-webfont.woff2',
+        format: 'woff2',
+      },
+    });
 
     let target;
 
@@ -155,7 +161,7 @@ describe('ol.renderer.canvas.VectorLayer', function () {
 
     it('re-renders for fonts that become available', function (done) {
       checkedFonts.values_ = {};
-      document.head.appendChild(font);
+      font.add();
       const map = new Map({
         view: new View({
           center: [0, 0],
@@ -166,7 +172,7 @@ describe('ol.renderer.canvas.VectorLayer', function () {
       const layerStyle = new Style({
         text: new Text({
           text: 'layer',
-          font: '12px "Droid Sans",sans-serif',
+          font: `12px "${fontFamily}",sans-serif`,
         }),
       });
 
@@ -180,9 +186,13 @@ describe('ol.renderer.canvas.VectorLayer', function () {
       map.addLayer(layer);
       const revision = layer.getRevision();
       setTimeout(function () {
-        expect(layer.getRevision()).to.be(revision + 1);
-        document.head.removeChild(font);
-        done();
+        try {
+          font.remove();
+          expect(layer.getRevision()).to.be(revision + 1);
+          done();
+        } catch (e) {
+          done(e);
+        }
       }, 1600);
     });
   });

test/browser/spec/ol/renderer/canvas/vectortilelayer.test.js

@@ -17,6 +17,7 @@ import View from '../../../../../../src/ol/View.js';
 import XYZ from '../../../../../../src/ol/source/XYZ.js';
 import {checkedFonts} from '../../../../../../src/ol/render/canvas.js';
 import {create} from '../../../../../../src/ol/transform.js';
+import {createFontStyle} from '../../../util.js';
 import {createXYZ} from '../../../../../../src/ol/tilegrid.js';
 import {getCenter} from '../../../../../../src/ol/extent.js';
 import {get as getProjection} from '../../../../../../src/ol/proj.js';
@@ -24,9 +25,14 @@ import {getUid} from '../../../../../../src/ol/util.js';
 
 describe('ol/renderer/canvas/VectorTileLayer', function () {
   describe('constructor', function () {
-    const font = document.createElement('link');
-    font.href = 'https://fonts.googleapis.com/css?family=Dancing+Script';
-    font.rel = 'stylesheet';
+    const fontFamily = 'Ubuntu - VectorTileLayerTest';
+    const font = createFontStyle({
+      fontFamily: fontFamily,
+      src: {
+        url: '/spec/ol/data/fonts/ubuntu-regular-webfont.woff2',
+        format: 'woff2',
+      },
+    });
 
     let map,
       layer,
@@ -199,14 +205,18 @@ describe('ol/renderer/canvas/VectorTileLayer', function () {
     it('re-renders for fonts that become available', function (done) {
       map.renderSync();
       checkedFonts.values_ = {};
-      document.head.appendChild(font);
-      layerStyle[0].getText().setFont('12px "Dancing Script",sans-serif');
+      font.add();
+      layerStyle[0].getText().setFont(`12px "${fontFamily}",sans-serif`);
       layer.changed();
       const revision = layer.getRevision();
       setTimeout(function () {
-        document.head.removeChild(font);
-        expect(layer.getRevision()).to.be(revision + 1);
-        done();
+        try {
+          font.remove();
+          expect(layer.getRevision()).to.be(revision + 1);
+          done();
+        } catch (e) {
+          done(e);
+        }
       }, 1600);
     });
 

test/browser/spec/util.js

@@ -14,3 +14,33 @@ export function overrideRAF() {
     window.cancelAnimationFrame = caf;
   };
 }
+
+export function createFontStyle(options) {
+  const styleNode = document.createElement('style');
+  const src = Array.isArray(options.src) ? options.src : [options.src];
+  function toCssSource(src) {
+    const url = typeof src === 'string' ? src : src.url;
+    const format = typeof src === 'string' ? undefined : src.format;
+    return `url('${url}')${format ? ` format('${format}')` : ''}`;
+  }
+  const ruleText = `
+    @font-face {
+      font-family: '${options.fontFamily}';
+      font-style: ${options.fontStyle || 'normal'};
+      font-weight: ${
+        options.fontWeight === undefined ? 400 : options.fontWeight
+      };
+      src: ${src.map(toCssSource).join(',\n  ')};
+    }`;
+  return {
+    add() {
+      document.head.appendChild(styleNode);
+      if (styleNode.sheet.cssRules.length === 0) {
+        styleNode.sheet.insertRule(ruleText);
+      }
+    },
+    remove() {
+      document.head.removeChild(styleNode);
+    },
+  };
+}