Skip to content

Commit 92af405

Browse files
hejsztynxhejsztynx
committed
feat: middle ellipsize
1 parent 2312cf8 commit 92af405

12 files changed

Lines changed: 525 additions & 5 deletions

‎.playwright/screenshots/ellipsize-middle-breaklines-head-fallback.png‎

1.45 KB
Loading

‎.playwright/screenshots/ellipsize-middle-different-blocks-head-fallback.png‎

2.07 KB
Loading

‎.playwright/screenshots/ellipsize-middle-different-paragraph-style-multiple-lines.png‎

5.98 KB
Loading

‎.playwright/screenshots/ellipsize-middle-different-paragraph-style.png‎

5.92 KB
Loading

‎.playwright/screenshots/ellipsize-middle-empty-lines.png‎

4.95 KB
Loading

‎.playwright/screenshots/ellipsize-middle-one-paragraph-many-inline-images.png‎

6.62 KB
Loading

‎.playwright/screenshots/ellipsize-middle-one-paragraph-many-lines-overflowing.png‎

6.09 KB
Loading

‎.playwright/screenshots/ellipsize-middle-one-paragraph-one-line-overflowing.png‎

6.45 KB
Loading

‎.playwright/screenshots/ellipsize-middle-other-paragraphs-and-break-lines-inside-block-style.png‎

8.76 KB
Loading

‎.playwright/tests/ellipsizeVisual.spec.ts‎

Lines changed: 87 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,7 @@ async function setMode(page: Page, mode: EllipsizeMode): Promise<void> {
5858
.toBe(mode);
5959
}
6060

61-
// 'middle' is excluded - it is not implemented on web
62-
const MODES: EllipsizeMode[] = ['head', 'tail', 'clip'];
61+
const SHARED_MODES: EllipsizeMode[] = ['tail', 'head', 'clip'];
6362

6463
type EllipsizeCase = {
6564
name: string;
@@ -211,7 +210,7 @@ const SHARED_CASES: EllipsizeCase[] = [
211210
},
212211
];
213212

214-
for (const mode of MODES) {
213+
for (const mode of SHARED_MODES) {
215214
test.describe(`EnrichedText ellipsize - ${mode}`, () => {
216215
for (const c of SHARED_CASES) {
217216
test(c.name, async ({ page }) => {
@@ -227,3 +226,88 @@ for (const mode of MODES) {
227226
}
228227
});
229228
}
229+
230+
test.describe('EnrichedText ellipsize - middle', () => {
231+
const middleEllipsizeCases: EllipsizeCase[] = [
232+
{
233+
name: 'all text within one paragraph, with one line exceeding the limit',
234+
slug: 'one-paragraph-one-line-overflowing',
235+
html:
236+
`<html><p>This is a fairly long paragraph that should wrap` +
237+
` across three lines so the truncation has something to chew on.</p></html>`,
238+
numberOfLines: 2,
239+
},
240+
{
241+
name: 'all text within one paragraph, but with at least two lines exceeding the limit',
242+
slug: 'one-paragraph-many-lines-overflowing',
243+
html:
244+
`<html><p>This is a fairly long paragraph that should wrap across four lines so the` +
245+
` truncation has something to chew on. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></html>`,
246+
numberOfLines: 2,
247+
},
248+
{
249+
name: 'all text within one paragraph but with multiple inline images',
250+
slug: 'one-paragraph-many-inline-images',
251+
html:
252+
`<html><p>Some paragraph text overflowing but with so<img src="w" width="20" ` +
253+
`height="20"/>me inline images <img src="w" width="20" height="20"/><img src="w" ` +
254+
`width="20" height="20"/><img src="w" width="20" height="20"/>insi<img src="w" width="20" ` +
255+
`height="20"/>de the eaten text and before, after dummytext the rendered <img src="w" width="20" height="20"/>ellipsis</p></html>`,
256+
numberOfLines: 2,
257+
},
258+
{
259+
name: 'different paragraphs will be truncated with the middle ellipsis if the needed last lines belong to a single paragraph',
260+
slug: 'different-paragraph-style',
261+
html: `<html><p>first paragraph.</p><h6>Different paragraph style that will overflow to the next line</h6></html>`,
262+
numberOfLines: 2,
263+
},
264+
{
265+
name: 'different paragraph style with many lines',
266+
slug: 'different-paragraph-style-multiple-lines',
267+
html:
268+
`<html><p>first paragraph.</p><codeblock><p>Different paragraph style and the text ` +
269+
`that will overflow to the next lines of that block verylongwordthatwillnotfitinthelineandwilloverflow</p></codeblock></html>`,
270+
numberOfLines: 2,
271+
},
272+
{
273+
name: 'ellipsis on the last paragraph with leading other paragraphs and break lines',
274+
slug: 'other-paragraphs-and-break-lines-inside-block-style',
275+
html:
276+
`<html><p>Normal style.</p><blockquote><p>First line before empty ones.</p><br><br><p>Last ` +
277+
`paragraph inside a block style that will overflow to three different lines, so we can check this case.</p></blockquote></html>`,
278+
numberOfLines: 5,
279+
},
280+
{
281+
name: 'empty lines are preserved',
282+
slug: 'empty-lines',
283+
html: `<html><br><p>first line</p><br><p>last line that will overflow and will have an ellipsis</p></html>`,
284+
numberOfLines: 4,
285+
},
286+
// tests checking a proper fallback to the head ellipsis
287+
{
288+
name: 'when the overflowing lines are different blocks, it fallbacks to head ellipsis',
289+
slug: 'different-blocks-head-fallback',
290+
html: `<html><p>first line</p><p>second line</p><p>third line</p></html>`,
291+
numberOfLines: 2,
292+
},
293+
{
294+
name: 'breaklines inside a block style are considered as different paragraphs',
295+
slug: 'breaklines-head-fallback',
296+
html: `<html><blockquote><p>first line</p><br><br></blockquote></html>`,
297+
numberOfLines: 2,
298+
},
299+
];
300+
301+
for (const c of middleEllipsizeCases) {
302+
test(c.name, async ({ page }) => {
303+
await gotoTestEllipsize(page);
304+
await setValue(page, c.html);
305+
await setNumberOfLines(page, c.numberOfLines);
306+
await setMode(page, 'middle');
307+
308+
await expect(displayLocator(page)).toHaveScreenshot(
309+
`ellipsize-middle-${c.slug}.png`
310+
);
311+
});
312+
}
313+
});

0 commit comments

Comments
 (0)