@@ -263,11 +263,25 @@ const tabLayoutLargeTextTests = [
}
];
+const tabsTallglyph = [
+ SimpleTab({title: TallglyphMultiScript}),
+ SimpleTab({title: TallglyphLatin}),
+ SimpleTab({title: 'Three'})
+];
+
+const tabLayoutTallglyphTests = [
+ {
+ component: {tabsTallglyph},
+ wrapper: {full: true}
+ }
+];
+
const TabLayoutTests = [
...tabLayoutSmokeTests,
...tabLayoutQwtcTests,
...tabLayoutLargeTextTests,
- ...withConfig({locale: 'ar-SA'}, tabLayoutRtlTests)
+ ...withConfig({locale: 'ar-SA'}, tabLayoutRtlTests),
+ ...withTallglyphLocale(tabLayoutTallglyphTests)
];
export default TabLayoutTests;
diff --git a/tests/screenshot/apps/components/Tooltip.js b/tests/screenshot/apps/components/Tooltip.js
index ca7d6c157..b66f94b36 100644
--- a/tests/screenshot/apps/components/Tooltip.js
+++ b/tests/screenshot/apps/components/Tooltip.js
@@ -1,10 +1,10 @@
import {Tooltip} from '../../../../TooltipDecorator/TooltipDecorator';
-import {withConfig} from './utils';
+import {withConfig, withTallglyphLocale, TallglyphLatin, TallglyphMultiScript} from './utils';
const TooltipDisplay = (props) => (
- {`View ${props.type} ${props.direction} ${props.arrowAnchor}`}
+ {props.children || `View ${props.type} ${props.direction} ${props.arrowAnchor}`}
);
@@ -18,7 +18,7 @@ const tooltipSmokeTests = [
TooltipDisplay({type: 'transparent', direction: 'left', arrowAnchor: 'middle'})
];
-const tooltipCommentedTests = [
+const tooltipExtendedTests = [
// Custom width — smoke representatives
TooltipDisplay({type: 'balloon', direction: 'above', arrowAnchor: 'center', tooltipWidth: 200}),
TooltipDisplay({type: 'balloon', direction: 'left', arrowAnchor: 'middle', tooltipWidth: 200}),
@@ -34,6 +34,11 @@ const tooltipLargeTextTests = [
{textSize: 'large', component: TooltipDisplay({type: 'balloon', direction: 'below', arrowAnchor: 'center'})}
];
+const tooltipTallglyphTests = [
+ TooltipDisplay({type: 'balloon', direction: 'above', arrowAnchor: 'center', children: TallglyphMultiScript}),
+ TooltipDisplay({type: 'transparent', direction: 'below', arrowAnchor: 'center', children: TallglyphLatin})
+];
+
const TooltipTests = [
...withConfig({
wrapper: {
@@ -41,9 +46,10 @@ const TooltipTests = [
}
}, [
...tooltipSmokeTests,
- ...tooltipCommentedTests,
+ ...tooltipExtendedTests,
...tooltipLargeTextTests
- ])
+ ]),
+ ...withTallglyphLocale(tooltipTallglyphTests, {wrapper: {full: true}})
];
export default TooltipTests;
diff --git a/tests/screenshot/apps/components/WizardPanels.js b/tests/screenshot/apps/components/WizardPanels.js
index 0cc46f3ee..c11d566c5 100644
--- a/tests/screenshot/apps/components/WizardPanels.js
+++ b/tests/screenshot/apps/components/WizardPanels.js
@@ -2,7 +2,7 @@ import BodyText from '../../../../BodyText';
import Button from '../../../../Button';
import WizardPanels, {Panel} from '../../../../WizardPanels';
-import {LongerLoremString, withConfig} from './utils';
+import {LongerLoremString, withConfig, withTallglyphLocale, TallglyphLatin, TallglyphMultiScript} from './utils';
const customPrevButton = ();
const customNextButton = ();
@@ -34,7 +34,7 @@ const wizardQwtcTests = [
];
-const wizardCommentedTests = [
+const wizardExtendedTests = [
// Test to never show next/prev button on all the panels
View 1
@@ -110,14 +110,23 @@ const wizardPortraitTests = [
];
+const wizardTallglyphTests = [
+
+ {TallglyphMultiScript}
+ {TallglyphLatin}
+
+];
+
const WizardPanelsTests = [
...withConfig({wrapper}, [
...wizardSmokeTests,
...wizardQwtcTests,
- ...wizardCommentedTests,
+ ...wizardExtendedTests,
...wizardRtlTests
]),
+ ...withConfig({wrapper}, withTallglyphLocale(wizardTallglyphTests)),
+
// Portrait
...withConfig({portrait: true}, wizardPortraitTests)
];
diff --git a/tests/screenshot/apps/components/utils.js b/tests/screenshot/apps/components/utils.js
index 297f5f856..59696e1e3 100644
--- a/tests/screenshot/apps/components/utils.js
+++ b/tests/screenshot/apps/components/utils.js
@@ -29,6 +29,52 @@ const withConfig = (config, tests) => {
});
};
+/**
+ * Default tallglyph locale for screenshot tests.
+ *
+ * `vi-VN` activates `.enact-locale-vi` tallglyph CSS (font-size, line-height).
+ * It does not apply th/km/si rules — use {@link withConfig} with an explicit
+ * locale for those (e.g. Button `km-KH`, Picker QWTC-2214 `th-TH`).
+ */
+const TALLGLYPH_LOCALES = ['vi-VN'];
+
+/**
+ * Applies every {@link TALLGLYPH_LOCALES} entry to screenshot test cases via {@link withConfig}.
+ *
+ * @param {Array} tests - Test elements or `{component, ...config}` objects.
+ * @param {Object} [config={}] - Extra config merged with each locale (e.g. `{textSize: 'large'}`).
+ * @returns {Array} Flattened test cases, one entry per locale in {@link TALLGLYPH_LOCALES}.
+ *
+ * @example
+ * // All default tallglyph locales
+ * ...withTallglyphLocale(tests)
+ *
+ * @example
+ * // All default locales plus extra config
+ * ...withTallglyphLocale(tests, {textSize: 'large'})
+ */
+const withTallglyphLocale = (tests, config = {}) =>
+ TALLGLYPH_LOCALES.flatMap((locale) => withConfig({locale, ...config}, tests));
+
+/**
+ * QWTC tallglyph sample: tall glyphs from multiple scripts (th, ta) in one string.
+ * Used with {@link withTallglyphLocale} to stress clipping/overflow; locale selects
+ * which `.enact-locale-*` CSS applies, not which characters appear in the string.
+ */
+const TallglyphMultiScript = 'ฟิ้ ไั ஒ து';
+
+/** QWTC sample: multi-script string with truncated Tamil ending (Heading, Header). */
+const TallglyphMultiScriptQwtc = 'ฟิ้ ไั ஒ த';
+
+/** Devanagari sample for tallglyph QWTC scenarios. */
+const TallglyphHindi = 'नरेंद्र मोदी';
+
+/** Khmer sample for tallglyph QWTC scenarios and km-KH locale tests. */
+const TallglyphKhmer = 'តន្ត្រី';
+
+/** Latin extended sample for vi tallglyph typography. */
+const TallglyphLatin = 'ÃÑÕÂÊÎÔÛÄËÏÖÜŸ';
+
const LoremString =
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac tellus in velit ornare commodo. Nam dignissim fringilla nulla, sit amet hendrerit sapien laoreet quis. Praesent quis tellus non diam viverra feugiat.';
@@ -37,6 +83,12 @@ const LongerLoremString = `Longer ${LoremString} ${LoremString} ${LoremString} $
export {
LongerLoremString,
LoremString,
+ TallglyphHindi,
+ TallglyphKhmer,
+ TallglyphLatin,
+ TallglyphMultiScript,
+ TallglyphMultiScriptQwtc,
withConfig,
- withProps
+ withProps,
+ withTallglyphLocale
};