textBaseline for FireFox (#113)

src/platform.js

@@ -0,0 +1,8 @@
+// For vite env.
+export const isNode = typeof navigator === "undefined" ? true : false;
+
+const userAgent = isNode ? "node" : navigator.userAgent;
+
+export const isFireFox = userAgent.includes("Firefox");
+
+export const isLegacyEdge = userAgent.includes("Edge");

src/terminal.js

@@ -1,6 +1,7 @@
-// TODO Set text baseline conditionally by browser.
+import { isFireFox, isLegacyEdge } from "./platform";
+
 // https://github.com/xtermjs/xterm.js/blob/096fe171356fc9519e0a6b737a98ca82d0587e91/src/browser/renderer/shared/Constants.ts#LL14C1-L14C1
-export const TEXT_BASELINE = "ideographic";
+export const TEXT_BASELINE = isFireFox || isLegacyEdge ? "bottom" : "ideographic";
 
 export const CELL_SIZE = 3;
 

test/platform.spec.js

@@ -0,0 +1,36 @@
+import { describe, beforeAll, test, expect } from "vitest";
+import { createBrowser, createPage, openTerminal, app } from "./utils";
+
+describe("textBaseline in Chromium", () => {
+  let browser;
+  let page;
+
+  beforeAll(async () => {
+    browser = await createBrowser();
+    page = await createPage(browser);
+    await page.goto(app("noop"));
+  });
+
+  test("textBaseline should be ideographic in Chromium.", async () => {
+    await openTerminal(page);
+    await page.evaluate("window.terminal.char('@', 0, 0, 'red', 'red')");
+    expect(await page.evaluate("window.terminal._context.textBaseline")).toBe("ideographic");
+  });
+});
+
+describe("textBaseline in FireFox", () => {
+  let browser;
+  let page;
+
+  beforeAll(async () => {
+    browser = await createBrowser({ type: "firefox" });
+    page = await createPage(browser);
+    await page.goto(app("noop"));
+  });
+
+  test("textBaseline should be bottom in Firefox.", async () => {
+    await openTerminal(page);
+    await page.evaluate("window.terminal.char('@', 0, 0, 'red', 'red')");
+    expect(await page.evaluate("window.terminal._context.textBaseline")).toBe("bottom");
+  });
+});

test/utils.js

@@ -1,7 +1,8 @@
-import { chromium } from "playwright";
+import { chromium, firefox } from "playwright";
 
-export async function createBrowser() {
-  return await chromium.launch();
+export async function createBrowser({ type = "chromium" } = {}) {
+  const browser = type === "chromium" ? chromium : firefox;
+  return await browser.launch();
 }
 
 export async function createPage(browser) {