wasm: add local font loading manual test

This tests allows configuring font loading options from the test web page. Change-Id: I15d850addb38329423722d1763ace8836dca2484 Reviewed-by: Morten Johan Sørvig <morten.sorvig@qt.io> Reviewed-by: Lorn Potter <lorn.potter@gmail.com>
author: Morten Sørvig <morten.sorvig@qt.io> 2023-12-14 15:13:11 +0100
committer: Morten Sørvig <morten.sorvig@qt.io> 2024-02-20 17:44:21 +0100
commit: 83bfd368b36a7e4b35416f8155be355729687148 (patch)
tree: a9709e26de29dd2fad8d2cf1f81702a45c460a4b /tests/manual
parent: bb68cc5844b364987b4f8317ba2d4509b9253cf1 (diff)
5 files changed, 270 insertions, 0 deletions
diff --git a/tests/manual/wasm/CMakeLists.txt b/tests/manual/wasm/CMakeLists.txt
index f625defb21..b13f6781b8 100644
--- a/tests/manual/wasm/CMakeLists.txt
+++ b/tests/manual/wasm/CMakeLists.txt
@@ -7,6 +7,7 @@ add_subdirectory(a11y)
 if(QT_FEATURE_widgets)
 add_subdirectory(cursors)
 add_subdirectory(localfiles)
+add_subdirectory(localfonts)
 add_subdirectory(qstdweb)
 add_subdirectory(clipboard)
 endif()
diff --git a/tests/manual/wasm/localfonts/CMakeLists.txt b/tests/manual/wasm/localfonts/CMakeLists.txt
new file mode 100644
index 0000000000..b5df4ad9fa
--- /dev/null
+++ b/tests/manual/wasm/localfonts/CMakeLists.txt
@@ -0,0 +1,4 @@
+# Copyright (C) 2023 The Qt Company Ltd.
+# SPDX-License-Identifier: BSD-3-Clause
+
+add_subdirectory(fontloading)
diff --git a/tests/manual/wasm/localfonts/fontloading/CMakeLists.txt b/tests/manual/wasm/localfonts/fontloading/CMakeLists.txt
new file mode 100644
index 0000000000..c3dc37d27d
--- /dev/null
+++ b/tests/manual/wasm/localfonts/fontloading/CMakeLists.txt
@@ -0,0 +1,20 @@
+# Copyright (C) 2023 The Qt Company Ltd.
+# SPDX-License-Identifier: BSD-3-Clause
+
+qt_internal_add_manual_test(fontloading
+    GUI
+    SOURCES
+        main.cpp
+    LIBRARIES
+        Qt::Core
+        Qt::Gui
+        Qt::Widgets
+)
+
+add_custom_command(
+    TARGET fontloading POST_BUILD
+    COMMAND ${CMAKE_COMMAND} -E copy
+            ${CMAKE_CURRENT_SOURCE_DIR}/fontloading.html
+            ${CMAKE_CURRENT_BINARY_DIR}/fontloading.html)
+#add_custom_target(html DEPENDS ${CMAKE_CURRENT_SOURCE_DIR}/fontloading.html)
+#add_dependencies(fontloading html)
diff --git a/tests/manual/wasm/localfonts/fontloading/fontloading.html b/tests/manual/wasm/localfonts/fontloading/fontloading.html
new file mode 100644
index 0000000000..619217205b
--- /dev/null
+++ b/tests/manual/wasm/localfonts/fontloading/fontloading.html
@@ -0,0 +1,167 @@
+<!doctype html>
+
+<script src="qtloader.js"></script>
+<script src="fontloading.js"></script>
+
+<style>
+    body {
+        padding: 5px;
+    }
+
+    .container {
+        display: flex;
+    }
+
+    .column {
+        flex: 1;
+    }
+</style>
+
+
+<script>
+
+    // UI
+    let familyCount;
+    let families;
+
+    // Data
+    let fontFamilies = new Set();
+    let loadStartTime;
+
+    // App
+    let instance;
+
+    async function updatePermissionStatus() {
+        let permissonStatusElement = document.getElementById("permissonStatus");
+        let permissionStatus = await navigator.permissions.query({ name: "local-fonts" })
+        permissonStatusElement.innerHTML = permissionStatus.state;
+    }
+
+    window.onload = async () => {
+        let supported = document.getElementById("supported");
+        let permissonStatus = document.getElementById("permissonStatus");
+        let permission = document.getElementById("permission");
+        let defaultfonts = document.getElementById("defaultfonts");
+        let allfonts = document.getElementById("allfonts");
+        let start = document.getElementById("start");
+        let loadFonts = document.getElementById("loadFonts");
+        startupTime = document.getElementById("startupTime");
+        familyCount = document.getElementById("familyCount");
+        families = document.getElementById("families");
+
+        fontFamilies.clear();
+
+        let localFontsAccessSupported = window.queryLocalFonts ? true : false
+        if (localFontsAccessSupported) {
+            supported.innerHTML = "True"
+        } else {
+            supported.innerHTML = "False"
+            return;
+        }
+
+        updatePermissionStatus();
+
+        const module = WebAssembly.compileStreaming(fetch('fontloading.wasm'));
+
+        start.onclick = async () => {
+
+            // Delete any previous instance.
+            if (instance) {
+                instance.deleteapp(); // see main.cpp
+                instance = null;
+            }
+
+            loadStartTime = performance.now();
+            startupTime.innerHTML = 0;
+            familyCount.innerHTML = 0;
+            let localFontFamilyLoadCollection = "NoFontFamilies"
+            if (defaultfonts.checked)
+                localFontFamilyLoadCollection = "DefaultFontFamilies"
+            else if (allfonts.checked)
+                localFontFamilyLoadCollection = "AllFontFamilies"
+
+            let qtcontainer = document.getElementById("qtcontainer");
+            qtcontainer.innerHTML = ""; // clear children
+            qtcontainer.style.visibility = "hidden";
+
+            let extraFonts = document.getElementById("extrafonts").value.split(",");
+
+            let config = {
+                qt: {
+                    module: module,
+                    containerElements: [qtcontainer],
+                    onLoaded: () => {
+                        console.log("JS: onLoaded")
+                        qtcontainer.style.visibility = "visible";
+                    },
+                    entryFunction: window.fontloading_entry,
+                    localFonts: {
+                        requestPermission: permission.checked,
+                        familiesCollection: localFontFamilyLoadCollection,
+                        extraFamilies: extraFonts,
+                    }
+                }
+            }
+            instance = await qtLoad(config);
+
+            updatePermissionStatus();
+        }
+
+        loadFonts.onclick = async () => {
+            loadStartTime = null; // disable timer
+            let fontsFamilies = document.getElementById("extraRuntimeFontFamilies").value.split(",");
+            console.log("extraRuntimeFontFamilies: " + fontsFamilies);
+            instance.qtLoadLocalFontFamilies(fontsFamilies);
+        }
+    };
+
+    function fontFamiliesLoaded(count) {
+        familyCount.innerHTML = count;
+        if (loadStartTime) {
+            elapsed = performance.now() - loadStartTime;
+            startupTime.innerHTML = Math.round(elapsed  + 1);
+        }
+    }
+
+    function fontFamilyLoaded(family) {
+        fontFamilies.add(family);
+    }
+
+</script>
+
+<h2>Local Font Loading Test</h2>
+<p>Click "Load" button below to load the Qt test app with the specified settings. This test provides additional logs on the JavaScript console.</p>
+
+<div class="container">
+    <div class="column">
+        <span>Browser supports the Local Font Access API: </span><span id="supported" style="font-weight: bold;"></span><br>
+        <span>Local Font Access permission status: </span><span id="permissonStatus" style="font-weight: bold;"></span><br>
+        <br>
+        <input type="checkbox" id="permission"><label for="permission">Ask for Local Font access permission on startup</label><br>
+        <input type="radio" id="nofonts" name="fontset"></input><label for="nofonts">No local fonts</label><br>
+        <input type="radio" id="defaultfonts" name="fontset" checked></input><label for="defaultfonts">Default local fonts (web-safe fonts)</label><br>
+        <input type="radio" id="allfonts" name="fontset"></input><label for="allfonts">All local fonts (warning: extremely slow)</label><br>
+        <br>
+        <label for="extrafonts">Extra Font Families (comma separated) </label><input type="text" id="extrafonts" value=""></input><br>
+        <br>
+        <input type="checkbox" id="permission"><label for="permission">Enable 'Fonts' Logging Category</label><br>
+        <input type="checkbox" id="permission"><label for="permission">Enable Font Streaming</label><br>
+        <br>
+        <button type="button" id="start">Start Application</button><br>
+        <br>
+
+        <span>Startup time: </span><span id="startupTime"></span><br>
+        <span>Font family count: </span><span id="familyCount"></span><br>
+        <span>Font families: </span><span id="families"></span><br>
+        <br>
+
+        <button type="button" id="loadFonts">Load Extra Fonts</button>
+        <input type="text" id="extraRuntimeFontFamilies" value=""></input><br>
+    </div>
+
+    <div class="column">
+        <div id="qtcontainer" style="width: 100%; height: 300px; visibility: hidden;"></div>
+    </div>
+</div>
+
+
diff --git a/tests/manual/wasm/localfonts/fontloading/main.cpp b/tests/manual/wasm/localfonts/fontloading/main.cpp
new file mode 100644
index 0000000000..fb8f8e268b
--- /dev/null
+++ b/tests/manual/wasm/localfonts/fontloading/main.cpp
@@ -0,0 +1,78 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+#include <QtGui>
+#include <QtWidgets>
+
+#include <emscripten/bind.h>
+#include <emscripten/val.h>
+
+using namespace emscripten;
+
+class FontViewer : public QWidget
+{
+public:
+    FontViewer() {
+        QTextEdit *edit = new QTextEdit;
+        edit->setPlainText("The quick brown fox jumps over the lazy dog\nHow quickly daft jumping zebras vex\nPack my box with five dozen liquor jugs");
+
+        QComboBox *combo = new QComboBox;
+        combo->addItems(QFontDatabase::families());
+
+        connect(combo, &QComboBox::currentTextChanged, [=](const QString &family) {
+            QFont font(family);
+            edit->setFont(font);
+        });
+
+        QObject::connect(qApp, &QGuiApplication::fontDatabaseChanged, [=]() {
+            QStringList families = QFontDatabase::families();
+            combo->clear();
+            combo->addItems(families);
+        });
+
+        QLayout *layout = new QVBoxLayout;
+        layout->addWidget(edit);
+        layout->addWidget(combo);
+        setLayout(layout);
+    }
+};
+
+FontViewer *g_viewer = nullptr;
+QApplication *g_app = nullptr;
+
+void deleteapp() {
+    delete g_viewer;
+    delete g_app;
+};
+
+EMSCRIPTEN_BINDINGS(fonloading) {
+    function("deleteapp", &deleteapp);
+}
+
+int main(int argc, char **argv)
+{
+    qDebug() << "C++ main: Creating application";
+    g_app = new QApplication(argc, argv);
+
+    // Make sure there is one call to fontFamiliesLoaded at startup,
+    // even if no further fonts are loaded.
+    QTimer::singleShot(0, [=]() {
+        emscripten::val window = emscripten::val::global("window");
+        window.call<void>("fontFamiliesLoaded", QFontDatabase::families().count());
+    });
+
+    g_viewer = new FontViewer();
+    g_viewer->show();
+
+    QObject::connect(g_app, &QGuiApplication::fontDatabaseChanged, [=]() {
+        QStringList families = QFontDatabase::families();
+
+        emscripten::val window = emscripten::val::global("window");
+
+        window.call<void>("fontFamiliesLoaded", families.count());
+        for (int i = 0; i < families.count(); ++i) {
+            window.call<void>("fontFamilyLoaded", families[i].toStdString());
+        }
+    });
+}
+
author	Morten Sørvig <morten.sorvig@qt.io>	2023-12-14 15:13:11 +0100
committer	Morten Sørvig <morten.sorvig@qt.io>	2024-02-20 17:44:21 +0100
commit	83bfd368b36a7e4b35416f8155be355729687148 (patch)
tree	a9709e26de29dd2fad8d2cf1f81702a45c460a4b /tests/manual
parent	bb68cc5844b364987b4f8317ba2d4509b9253cf1 (diff)