Bug 1864916 - Allow SVGs for translations and properly exclude nodes …

…based on casing; r=nordzilla,translations-reviewers Differential Revision: https://phabricator.services.mozilla.com/D193683
dothq · Nov 15, 2023 · 4cf84e0 · 4cf84e0
1 parent df23a1e
commit 4cf84e0
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 2 deletions.
diff --git a/toolkit/components/translations/content/translations-document.sys.mjs b/toolkit/components/translations/content/translations-document.sys.mjs
@@ -60,12 +60,14 @@ const EXCLUDED_TAGS = new Set([
   "APPLET",
 
   // The following are embedded elements, and are not supported (yet).
-  "SVG",
   "MATH",
   "EMBED",
   "OBJECT",
   "IFRAME",
 
+  // This is an SVG tag that can contain arbitrary XML, ignore it.
+  "METADATA",
+
   // These are elements that are treated as opaque by Firefox which causes their
   // innerHTML property to be just the raw text node behind it. Any text that is sent as
   // HTML must be valid, and there is no guarantee that the innerHTML is valid.
@@ -541,7 +543,12 @@ export class TranslationsDocument {
 
     const { nodeName } = node;
 
-    if (EXCLUDED_TAGS.has(nodeName)) {
+    if (
+      EXCLUDED_TAGS.has(
+        // SVG tags can be lowercased, so ensure everything is uppercased.
+        nodeName.toUpperCase()
+      )
+    ) {
       // This is an excluded tag.
       return true;
     }

diff --git a/toolkit/components/translations/tests/browser/browser_translations_translation_document.js b/toolkit/components/translations/tests/browser/browser_translations_translation_document.js
@@ -832,6 +832,82 @@ add_task(async function test_mutations() {
   cleanup();
 });
 
+add_task(async function test_svgs() {
+  const { translate, htmlMatches, cleanup } = await createDoc(/* html */ `
+    <div>
+      <div>Text before is translated</div>
+      <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+        <style>.myText { font-family: sans-serif; }</style>
+        <rect x="10" y="10" width="80" height="60" class="myRect" />
+        <circle cx="150" cy="50" r="30" class="myCircle" />
+        <text x="50%" y="50%" text-anchor="middle" alignment-baseline="middle" class="myText">
+          Text inside of the SVG is untranslated.
+        </text>
+      </svg>
+      <div>Text after is translated</div>
+    </div>
+  `);
+
+  translate();
+
+  await htmlMatches(
+    "SVG text gets translated, and style elements are left alone.",
+    /* html */ `
+    <div>
+      <div>
+        TEXT BEFORE IS TRANSLATED
+      </div>
+      <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+        <style>
+          .myText { font-family: sans-serif; }
+        </style>
+        <rect x="10" y="10" width="80" height="60" class="myRect">
+        </rect>
+        <circle cx="150" cy="50" r="30" class="myCircle">
+        </circle>
+        <text x="50%" y="50%" text-anchor="middle" alignment-baseline="middle" class="myText">
+          TEXT INSIDE OF THE SVG IS UNTRANSLATED.
+        </text>
+      </svg>
+      <div>
+        TEXT AFTER IS TRANSLATED
+      </div>
+    </div>
+    `
+  );
+
+  await cleanup();
+});
+
+add_task(async function test_svgs_more() {
+  const { translate, htmlMatches, cleanup } = await createDoc(/* html */ `
+    <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+      <foreignObject x="20" y="20" width="160" height="160">
+        <div xmlns="http://www.w3.org/1999/xhtml">
+          This is a div inside of an SVG.
+        </div>
+      </foreignObject>
+    </svg>
+  `);
+
+  translate();
+
+  await htmlMatches(
+    "Foreign objects get translated",
+    /* html */ `
+    <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+      <foreignObject x="20" y="20" width="160" height="160">
+        <div xmlns="http://www.w3.org/1999/xhtml">
+          THIS IS A DIV INSIDE OF AN SVG.
+        </div>
+      </foreignObject>
+    </svg>
+    `
+  );
+
+  await cleanup();
+});
+
 add_task(async function test_tables() {
   const { translate, htmlMatches, cleanup } = await createDoc(/* html */ `
     <table>