From fdac18c9cf434eb0a3c78f20ee620f14f2f00659 Mon Sep 17 00:00:00 2001
From: tianmo <tianmokeji6001@icloud.com>
Date: Fri, 11 Sep 2026 22:36:34 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=A4=9A=E5=9B=BD=E8=AF=AD?=
 =?UTF-8?q?=E8=A8=80=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MAC_arm64_SpineViewer/viewer/spine.html   |  6 +--
 release/WIN_x64_SpineViewer/viewer/spine.html |  6 +--
 tests/viewer-i18n.test.js                     | 39 +++++++++++++++++++
 viewer/spine.html                             |  6 +--
 4 files changed, 48 insertions(+), 9 deletions(-)
 create mode 100644 tests/viewer-i18n.test.js

diff --git a/release/MAC_arm64_SpineViewer/viewer/spine.html b/release/MAC_arm64_SpineViewer/viewer/spine.html
index c649094..f45039a 100644
--- a/release/MAC_arm64_SpineViewer/viewer/spine.html
+++ b/release/MAC_arm64_SpineViewer/viewer/spine.html
@@ -955,10 +955,10 @@
 		const maxMarkers = 200;
 		const step = Math.max(1, Math.ceil(sorted.length / maxMarkers));
 		for (let i = 0; i < sorted.length; i += step) {
-			const t = sorted[i];
+			const keyframeTime = sorted[i];
 			const span = document.createElement('span');
-			span.style.left = (duration > 0 ? (t / duration) * 100 : 0) + '%';
-			span.title = t('viewer.keyframeTitle', { time: formatSeconds(t), frame: frameOf(t) });
+			span.style.left = (duration > 0 ? (keyframeTime / duration) * 100 : 0) + '%';
+			span.title = t('viewer.keyframeTitle', { time: formatSeconds(keyframeTime), frame: frameOf(keyframeTime) });
 			span.setAttribute('aria-label', span.title);
 			keyframesEl.appendChild(span);
 		}
diff --git a/release/WIN_x64_SpineViewer/viewer/spine.html b/release/WIN_x64_SpineViewer/viewer/spine.html
index c649094..f45039a 100644
--- a/release/WIN_x64_SpineViewer/viewer/spine.html
+++ b/release/WIN_x64_SpineViewer/viewer/spine.html
@@ -955,10 +955,10 @@
 		const maxMarkers = 200;
 		const step = Math.max(1, Math.ceil(sorted.length / maxMarkers));
 		for (let i = 0; i < sorted.length; i += step) {
-			const t = sorted[i];
+			const keyframeTime = sorted[i];
 			const span = document.createElement('span');
-			span.style.left = (duration > 0 ? (t / duration) * 100 : 0) + '%';
-			span.title = t('viewer.keyframeTitle', { time: formatSeconds(t), frame: frameOf(t) });
+			span.style.left = (duration > 0 ? (keyframeTime / duration) * 100 : 0) + '%';
+			span.title = t('viewer.keyframeTitle', { time: formatSeconds(keyframeTime), frame: frameOf(keyframeTime) });
 			span.setAttribute('aria-label', span.title);
 			keyframesEl.appendChild(span);
 		}
diff --git a/tests/viewer-i18n.test.js b/tests/viewer-i18n.test.js
new file mode 100644
index 0000000..0f94208
--- /dev/null
+++ b/tests/viewer-i18n.test.js
@@ -0,0 +1,39 @@
+'use strict';
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+const vm = require('node:vm');
+const roots = ['.', 'release/MAC_arm64_SpineViewer', 'release/WIN_x64_SpineViewer'];
+for (const root of roots) {
+  const html = fs.readFileSync(path.join(root, 'viewer/spine.html'), 'utf8');
+  const script = html.match(/<script>([\s\S]*?)<\/script>/)[1];
+  new vm.Script(script);
+  const i18n = script.slice(script.indexOf('\tconst I18N_LANGUAGES'), script.indexOf('\tapplyStaticI18n();'));
+  const markers = script.slice(script.indexOf('\tfunction renderKeyframeMarkers('), script.indexOf('\tfunction seekTo('));
+  const manifest = JSON.parse(fs.readFileSync(path.join(root, 'manifest.json'), 'utf8'));
+  for (const lang of manifest.languages) {
+    const table = JSON.parse(fs.readFileSync(path.join(root, '_locales', lang + '.json'), 'utf8'));
+    for (const match of html.matchAll(/(?:\bt\(['"]|data-i18n(?:-title|-aria-label)?=")([^'"]+)/g)) {
+      assert.equal(typeof match[1].split('.').reduce((obj, key) => obj && obj[key], table), 'string', `${root}/${lang}: ${match[1]}`);
+    }
+    const children = [];
+    const context = vm.createContext({
+      require, path, fs, __dirname: path.resolve(root, 'viewer'), lang, log() {},
+      document: { documentElement: {}, createElement: () => ({ style: {}, setAttribute(key, value) { this[key] = value; } }) },
+      keyframesEl: { innerHTML: '', appendChild: el => children.push(el) },
+      isStaticAnimation: false, duration: 2,
+      collectKeyframeTimes: () => [0, 1, 2, 3],
+      formatSeconds: value => `${value}s`, frameOf: value => value * 30
+    });
+    vm.runInContext(i18n + '\n' + markers + '\nrenderKeyframeMarkers({});', context);
+    assert.equal(children.length, 3);
+    assert.equal(children[1].style.left, '50%');
+    assert.equal(children[1].title, table.viewer.keyframeTitle.replace('{time}', '1s').replace('{frame}', '30'));
+    assert.equal(children[1]['aria-label'], children[1].title);
+    children.length = 0;
+    context.isStaticAnimation = true;
+    vm.runInContext('renderKeyframeMarkers({});', context);
+    assert.equal(children[0].title, table.viewer.staticPoseTitle);
+  }
+}
+console.log('PASS: source and both releases; eight languages; animated/static keyframe labels and translation keys');
diff --git a/viewer/spine.html b/viewer/spine.html
index c649094..f45039a 100644
--- a/viewer/spine.html
+++ b/viewer/spine.html
@@ -955,10 +955,10 @@
 		const maxMarkers = 200;
 		const step = Math.max(1, Math.ceil(sorted.length / maxMarkers));
 		for (let i = 0; i < sorted.length; i += step) {
-			const t = sorted[i];
+			const keyframeTime = sorted[i];
 			const span = document.createElement('span');
-			span.style.left = (duration > 0 ? (t / duration) * 100 : 0) + '%';
-			span.title = t('viewer.keyframeTitle', { time: formatSeconds(t), frame: frameOf(t) });
+			span.style.left = (duration > 0 ? (keyframeTime / duration) * 100 : 0) + '%';
+			span.title = t('viewer.keyframeTitle', { time: formatSeconds(keyframeTime), frame: frameOf(keyframeTime) });
 			span.setAttribute('aria-label', span.title);
 			keyframesEl.appendChild(span);
 		}