From b9deec098f35919b9ad77baa6b11b7593473d488 Mon Sep 17 00:00:00 2001
From: ylemkimon <mail@ylem.kim>
Date: Sun, 7 Apr 2019 18:15:05 +0900
Subject: [PATCH] Load fonts before running screenshotter (#1891)

---
 dockers/screenshotter/screenshotter.js | 16 ++++++++----
 test/screenshotter/test.html           | 36 +++++++++++++++++++++-----
 2 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/dockers/screenshotter/screenshotter.js b/dockers/screenshotter/screenshotter.js
index 5c8feff1..85a47fc5 100644
--- a/dockers/screenshotter/screenshotter.js
+++ b/dockers/screenshotter/screenshotter.js
@@ -384,18 +384,17 @@ function takeScreenshot(key) {
 
     function loadMath() {
         if (!opts.reload && driverReady) {
-            driver.executeAsyncScript(
-                    "var callback = arguments[arguments.length - 1]; " +
+            driver.executeScript(
                     "handle_search_string(" +
-                    JSON.stringify("?" + itm.query) + ", callback);")
+                    JSON.stringify("?" + itm.query) + ");")
                 .then(waitThenScreenshot);
         } else if (opts.coverage) {
             // collect coverage before reloading
             collectCoverage().then(function() {
-                return driver.get(url).then(waitThenScreenshot);
+                return driver.get(url).then(loadFonts);
             });
         } else {
-            driver.get(url).then(waitThenScreenshot);
+            driver.get(url).then(loadFonts);
         }
     }
 
@@ -408,6 +407,13 @@ function takeScreenshot(key) {
             });
     }
 
+    function loadFonts() {
+        driver.executeAsyncScript(
+                "var callback = arguments[arguments.length - 1]; " +
+                "load_fonts(callback);")
+            .then(waitThenScreenshot);
+    }
+
     function waitThenScreenshot() {
         driverReady = true;
         if (opts.wait) {
diff --git a/test/screenshotter/test.html b/test/screenshotter/test.html
index 671b01bd..5ba4827c 100644
--- a/test/screenshotter/test.html
+++ b/test/screenshotter/test.html
@@ -31,7 +31,35 @@
     <span id="math"></span>
     <span id="post"></span>
     <script type="text/javascript">
-      function handle_search_string(search, callback) {
+      function load_fonts(callback) {
+        if (!document.fonts || !document.fonts.load) {
+          callback();
+          return;
+        }
+
+        var results = [];
+        function load_font(name, style) {
+          // 10px is arbitrarily selected value
+          results.push(document.fonts.load((style || "") + " 10px " + name));
+        }
+
+        var fonts = {AMS:1,Caligraphic:3,Fraktur:3,Main:15,Math:12,Script:1,
+            SansSerif:7,Size1:1,Size2:1,Size3:1,Size4:1,Typewriter:1}; // see below
+        for (var f in fonts) {
+          var ff = fonts[f];
+          var name = "KaTeX_" + f;
+          if (ff & 1) load_font(name);
+          if (ff & 2) load_font(name, "bold");
+          if (ff & 4) load_font(name, "italic");
+          if (ff & 8) load_font(name, "bold italic");
+        }
+        load_font("Mincho");
+        load_font("Batang");
+
+        Promise.all(results).then(callback)
+      }
+
+      function handle_search_string(search) {
         var query = {};
         var re = /(?:^\?|&)([^&=]+)(?:=([^&]+))?/g;
         var match;
@@ -58,12 +86,6 @@
         katex.render(query["tex"], mathNode, settings);
         document.getElementById("pre").innerHTML = query["pre"] || "";
         document.getElementById("post").innerHTML = query["post"] || "";
-
-        if (callback && document.fonts && document.fonts.ready) {
-          document.fonts.ready.then(callback);
-        } else if (callback) {
-          callback();
-        }
       }
       handle_search_string(window.location.search);
     </script>