commit a9de61ec60b5207c09c4c3a37cb389e9996e6f3c
parent 0fd4d29f111b160609e1110d5ddc0ad2653ff4c3
Author: Thomas Wisniewski <twisniewski@mozilla.com>
Date: Fri, 19 Dec 2025 23:16:54 +0000
Bug 2004610 - add a webcompat CSS intervention for character.ai; r=webcompat-reviewers,ksenia
Differential Revision: https://phabricator.services.mozilla.com/D276950
Diffstat:
4 files changed, 63 insertions(+), 0 deletions(-)
diff --git a/browser/extensions/webcompat/data/interventions.json b/browser/extensions/webcompat/data/interventions.json
@@ -6187,6 +6187,23 @@
}
]
},
+ "2004610": {
+ "label": "character.ai",
+ "bugs": {
+ "2004610": {
+ "issue": "broken-font",
+ "matches": ["*://character.ai/*"]
+ }
+ },
+ "interventions": [
+ {
+ "platforms": ["all"],
+ "content_scripts": {
+ "css": ["bug2004610-character.ai-fix-broken-italics.css"]
+ }
+ }
+ ]
+ },
"2004679": {
"label": "paybill.com",
"bugs": {
diff --git a/browser/extensions/webcompat/injections/css/bug2004610-character.ai-fix-broken-italics.css b/browser/extensions/webcompat/injections/css/bug2004610-character.ai-fix-broken-italics.css
@@ -0,0 +1,13 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/**
+ * character.ai - some text is not italicized
+ * Bug #2004610 - https://bugzilla.mozilla.org/show_bug.cgi?id=2004610
+ *
+ * The font they are using is buggy, but we can work around it with some CSS.
+ */
+.font-display em {
+ font-variation-settings: "ital" 10;
+}
diff --git a/browser/extensions/webcompat/tests/browser/browser_interventions.js b/browser/extensions/webcompat/tests/browser/browser_interventions.js
@@ -11,6 +11,7 @@ const ValidIssueList = [
"broken-comments",
"broken-cookie-banner",
"broken-editor",
+ "broken-font",
"broken-images",
"broken-interactive-elements",
"broken-layout",
diff --git a/testing/webcompat/interventions/tests/test_2004610_character_ai.py b/testing/webcompat/interventions/tests/test_2004610_character_ai.py
@@ -0,0 +1,32 @@
+import pytest
+
+URL = "https://character.ai/chat/NrVgl5IP6AyWq7ZCQtzJ6Y8TZHevcJtD7FJxOiUpOD0"
+DESCRIPTION_CSS = "[data-testid=product-description]"
+
+
+async def is_text_italicized(client):
+ await client.navigate(URL)
+ # rather than trying to log in and such, let's just create the markup the site is
+ # expected to make, and check whether the font appears italicized by comparing it
+ # to a screenshot after italics have been forced using the CSS we are applying.
+ client.execute_script(
+ """document.body.innerHTML = `<div class="font-display"><em>T</em></div>`"""
+ )
+ t = client.await_css("div.font-display")
+ pre = t.screenshot()
+ client.execute_script(
+ """document.body.style["font-variation-settings"] = "'ital' 10";"""
+ )
+ return pre == t.screenshot()
+
+
+@pytest.mark.asyncio
+@pytest.mark.with_interventions
+async def test_enabled(client):
+ assert await is_text_italicized(client)
+
+
+@pytest.mark.asyncio
+@pytest.mark.without_interventions
+async def test_disabled(client):
+ assert not await is_text_italicized(client)
