web: Add device_fonts_metrics integration test

kjarosh · kjarosh · commit 24260e84656d · 2025-11-22T19:25:34.000+01:00
This test verifies whether text using device fonts has proper metrics.
diff --git a/web/packages/selfhosted/test/integration_tests/device_fonts_metrics/Test.as b/web/packages/selfhosted/test/integration_tests/device_fonts_metrics/Test.as
@@ -0,0 +1,44 @@
+﻿package {
+
+import flash.display.*;
+import flash.text.*;
+
+[SWF(width="100", height="100")]
+public class Test extends MovieClip {
+    public function Test() {
+        var text:TextField = createTextField();
+        addChild(text);
+
+        trace("Loaded test!");
+
+        trace("Displayed text metrics:");
+        trace(text.textWidth);
+        trace(text.textHeight);
+        trace(text.getCharBoundaries(0).x);
+        trace(text.getCharBoundaries(0).width);
+        trace(text.getCharBoundaries(1).x);
+        trace(text.getCharBoundaries(1).width);
+        trace(text.getCharBoundaries(2).x);
+        trace(text.getCharBoundaries(2).width);
+
+        if (text.getCharBoundaries(3) == null) {
+            trace("null");
+            trace("null");
+        } else {
+            trace(text.getCharBoundaries(3).x);
+            trace(text.getCharBoundaries(3).width);
+        }
+    }
+
+    private function createTextField():TextField {
+        var text:TextField = new TextField();
+        text.text = "MxT體";
+        text.x = 10;
+        text.y = 10;
+        text.width = 80;
+        text.height = 80;
+        return text;
+    }
+}
+
+}
diff --git a/web/packages/selfhosted/test/integration_tests/device_fonts_metrics/index.html b/web/packages/selfhosted/test/integration_tests/device_fonts_metrics/index.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
+    <script>
+        const urlParams = new URLSearchParams(window.location.search);
+        window.RufflePlayer = window.RufflePlayer || {};
+        window.RufflePlayer.config = {
+            "deviceFontRenderer": urlParams.get('deviceFontRenderer'),
+        };
+    </script>
+</head>
+
+<body>
+    <div>
+        <object type="application/x-shockwave-flash" data="test.swf" width="100" height="100" id="objectElement"></object>
+    </div>
+</body>
+
+</html>
diff --git a/web/packages/selfhosted/test/integration_tests/device_fonts_metrics/test.swf b/web/packages/selfhosted/test/integration_tests/device_fonts_metrics/test.swf
diff --git a/web/packages/selfhosted/test/integration_tests/device_fonts_metrics/test.ts b/web/packages/selfhosted/test/integration_tests/device_fonts_metrics/test.ts
@@ -0,0 +1,77 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+
+import {
+    assertNoMoreTraceOutput,
+    expectTraceOutput,
+    getTraceOutput,
+    hideHardwareAccelerationModal,
+    injectRuffleAndWait,
+    openTest,
+    playAndMonitor,
+} from "../../utils.js";
+import { expect, use } from "chai";
+import chaiHtml from "chai-html";
+
+use(chaiHtml);
+
+const deviceFontRenderers = ["embedded", "canvas"];
+
+describe("Device Fonts: Metrics", () => {
+    for (const deviceFontRenderer of deviceFontRenderers) {
+        it(`load the test: ${deviceFontRenderer}`, async () => {
+            await openTest(
+                browser,
+                "integration_tests/device_fonts_metrics",
+                `index.html?deviceFontRenderer=${deviceFontRenderer}`,
+            );
+            await injectRuffleAndWait(browser);
+            const player = await browser.$("<ruffle-object>");
+            await playAndMonitor(browser, player, ["Loaded test!"]);
+            await hideHardwareAccelerationModal(browser, player);
+        });
+
+        it("check metrics", async () => {
+            const player = await browser.$("#objectElement");
+
+            await expectTraceOutput(browser, player, [
+                "Displayed text metrics:",
+            ]);
+
+            const messages = await getTraceOutput(browser, player, 10);
+
+            const textWidth = Number(messages[0]);
+            const textHeight = Number(messages[1]);
+            const char0x = Number(messages[2]) - 2;
+            const char0w = Number(messages[3]);
+            const char1x = Number(messages[4]) - char0x;
+            const char1w = Number(messages[5]);
+            const char2x = Number(messages[6]) - char1x;
+            const char2w = Number(messages[7]);
+            const char3x = Number(messages[8]) - char2x;
+            const char3w = Number(messages[9]);
+
+            expect(textWidth).to.be.greaterThan(0);
+            expect(textHeight).to.be.greaterThan(0);
+            expect(char0x).to.equal(0);
+            expect(char0w).to.be.greaterThan(0);
+            expect(char1x).to.be.greaterThan(0);
+            expect(char1w).to.be.greaterThan(0);
+            expect(char2x).to.be.greaterThan(0);
+            expect(char2w).to.be.greaterThan(0);
+
+            if (deviceFontRenderer === "embedded") {
+                // Embedded renderer does not support CJK characters by default
+                expect(char3x).to.be.NaN;
+                expect(char3w).to.be.NaN;
+            } else {
+                expect(char3x).to.be.greaterThan(0);
+                expect(char3w).to.be.greaterThan(0);
+            }
+        });
+
+        it("no more traces", async function () {
+            const player = await browser.$("#objectElement");
+            assertNoMoreTraceOutput(browser, player);
+        });
+    }
+});
