support surrogate pairs

packages/playwright/src/reporters/base.ts

@@ -495,21 +495,22 @@ function characterWidth(c: string) {
 
 function stringWidth(v: string) {
   let width = 0;
-  for (let i = 0; i < v.length; ++i)
+  for (const { segment } of new Intl.Segmenter(undefined, { granularity: 'grapheme' }).segment(v))
-    width += characterWidth(v[i]);
+    width += characterWidth(segment);
   return width;
 }
 
 function suffixOfWidth(v: string, width: number) {
-  let i = v.length - 1;
+  const segments = [...new Intl.Segmenter(undefined, { granularity: 'grapheme' }).segment(v)];
-  for (; i > 0; --i) {
+  let suffixBegin = v.length;
-    const c = v[i];
+  for (const { segment, index } of segments.reverse()) {
-    const cWidth = characterWidth(c);
+    const segmentWidth = stringWidth(segment);
-    if (cWidth >= width)
+    if (segmentWidth > width)
       break;
-    width -= cWidth;
+    width -= segmentWidth;
+    suffixBegin = index;
   }
-  return v.substring(i);
+  return v.substring(suffixBegin);
 }
 
 // Leaves enough space for the "prefix" to also fit.
@@ -528,9 +529,10 @@ export function fitToWidth(line: string, width: number, prefix?: string): string
       taken.push(parts[i]);
     } else {
       let part = suffixOfWidth(parts[i], width);
-      if (part.length < parts[i].length && part.length > 0) {
+      const wasTruncated = part.length < parts[i].length;
+      if (wasTruncated && part.length > 0) {
         // Add ellipsis if we are truncating.
-        part = '\u2026' + part.substring(1);
+        part = '\u2026' + suffixOfWidth(parts[i], width - 1);
       }
       taken.push(part);
       width -= stringWidth(part);

tests/playwright-test/fit-to-width.spec.ts

@@ -21,3 +21,10 @@ test('chinese characters', () => {
   expect(fitToWidth('你你好', 3)).toBe('…好');
   expect(fitToWidth('你好你好', 4)).toBe('…好');
 });
+
+test('surrogate pairs', () => {
+  expect(fitToWidth('🫣🤗', 2)).toBe('🫣🤗');
+  expect(fitToWidth('🚄🚄', 1)).toBe('…');
+  expect(fitToWidth('🚄🚄🚄', 2)).toBe('…🚄');
+  expect(fitToWidth('🚄🚄', 2)).toBe('🚄🚄');
+});