test(): Backport a test to capture a failing text style situation (#9531

)

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## [next]
 
+- test() Backport a test to capture a failing text style situation [#9531](https://github.com/fabricjs/fabric.js/pull/9531)
+
 ## [6.0.0-beta16]
 
 - fix(): block `enterEditing` after `endCurrentTransform` [#9513](https://github.com/fabricjs/fabric.js/pull/9513)

e2e/tests/text/adding-text/index.spec.ts

@@ -16,69 +16,104 @@ for (const splitByGrapheme of [true, false]) {
     await context.grantPermissions(['clipboard-read', 'clipboard-write']);
     const canvasUtil = new CanvasUtil(page);
     const textBoxutil = new TextUtil<Textbox>(page, 'text');
+    await test.step('initial render', async () => {
+      await textBoxutil.executeInBrowser(
+        (textbox: Textbox, context) => {
+          textbox.splitByGrapheme = context.splitByGrapheme;
+          textbox.set('dirty', true);
+          textbox.initDimensions();
+          textbox.canvas.renderAll();
+        },
+        { splitByGrapheme }
+      );
 
-    await textBoxutil.executeInBrowser(
-      (textbox: Textbox, context) => {
-        textbox.splitByGrapheme = context.splitByGrapheme;
-        textbox.set('dirty', true);
-        textbox.initDimensions();
-        textbox.canvas.renderAll();
-      },
-      { splitByGrapheme }
-    );
-
-    await expect(await canvasUtil.screenshot()).toMatchSnapshot({
-      name: `1-initial-splitByGrapheme-${splitByGrapheme}.png`,
+      await expect(await canvasUtil.screenshot()).toMatchSnapshot({
+        name: `1-initial-splitByGrapheme-${splitByGrapheme}.png`,
+      });
     });
+    await test.step('adding some lines with enterKey', async () => {
+      const clickPoint = await textBoxutil.getCanvasCursorPositionAt(20);
 
-    const clickPoint = await textBoxutil.getCanvasCursorPositionAt(20);
+      await canvasUtil.click({
+        position: clickPoint,
+        delay: 200,
+      });
+      await canvasUtil.click({
+        position: clickPoint,
+        delay: 200,
+      });
 
-    await canvasUtil.click({
-      position: clickPoint,
-      delay: 200,
-    });
-    await canvasUtil.click({
-      position: clickPoint,
-      delay: 200,
-    });
-
-    await page.mouse.down();
-    await page.mouse.move(clickPoint.x + 100, clickPoint.y, { steps: 15 });
-    await page.mouse.up();
-    await canvasUtil.ctrlC();
-    await canvasUtil.click({
-      position: clickPoint,
-      delay: 200,
-    });
-    await canvasUtil.press('Enter');
-    await canvasUtil.press('Enter');
-    await canvasUtil.press('Enter');
-    await canvasUtil.press('Enter');
-    await expect(await canvasUtil.screenshot()).toMatchSnapshot({
-      name: `2-before-deleting-${splitByGrapheme}.png`,
+      await page.mouse.down();
+      await page.mouse.move(clickPoint.x + 100, clickPoint.y, { steps: 15 });
+      await page.mouse.up();
+      await canvasUtil.ctrlC();
+      await canvasUtil.click({
+        position: clickPoint,
+        delay: 200,
+      });
+      await canvasUtil.press('Enter');
+      await canvasUtil.press('Enter');
+      await canvasUtil.press('Enter');
+      await canvasUtil.press('Enter');
+      await expect(await canvasUtil.screenshot()).toMatchSnapshot({
+        name: `2-before-deleting-${splitByGrapheme}.png`,
+      });
     });
-    await canvasUtil.press('Backspace');
-    await canvasUtil.press('Backspace');
-    await expect(await canvasUtil.screenshot()).toMatchSnapshot({
-      name: `3-after-deleting-${splitByGrapheme}.png`,
+    await test.step('deleting some of the added lines', async () => {
+      // continuos line deletion are a part of the test,
+      // an old bug was shifting style and then deleting it all at once
+      await canvasUtil.press('Backspace');
+      await canvasUtil.press('Backspace');
+      await expect(await canvasUtil.screenshot()).toMatchSnapshot({
+        name: `3-after-deleting-${splitByGrapheme}.png`,
+      });
     });
-    await canvasUtil.press('a');
-    await canvasUtil.press('b');
-    await canvasUtil.press('c');
-    await canvasUtil.press('Enter');
-    await canvasUtil.press('Enter');
-    await expect(await canvasUtil.screenshot()).toMatchSnapshot({
-      name: `4-before-pasting-splitByGrapheme-${splitByGrapheme}.png`,
+    await test.step('typing in some text', async () => {
+      await canvasUtil.press('a');
+      await canvasUtil.press('b');
+      await canvasUtil.press('c');
+      await canvasUtil.press('Enter');
+      await expect(await canvasUtil.screenshot()).toMatchSnapshot({
+        name: `4-after-typing-${splitByGrapheme}.png`,
+      });
     });
-    const pastePoint = await textBoxutil.getCanvasCursorPositionAt(36);
-    await canvasUtil.click({
-      position: pastePoint,
-      delay: 200,
+    await test.step('pasting some previously copied text', async () => {
+      const pastePoint = await textBoxutil.getCanvasCursorPositionAt(35);
+      await canvasUtil.click({
+        position: pastePoint,
+        delay: 200,
+      });
+      await canvasUtil.ctrlV();
+      await expect(await canvasUtil.screenshot()).toMatchSnapshot({
+        name: `5-after-pasting-splitByGrapheme-${splitByGrapheme}.png`,
+        maxDiffPixelRatio: 0.03,
+      });
     });
-    await canvasUtil.ctrlV();
-    await expect(await canvasUtil.screenshot()).toMatchSnapshot({
-      name: `5-after-pasting-splitByGrapheme-${splitByGrapheme}.png`,
-      maxDiffPixelRatio: 0.03,
+    await test.step('adding a new line when there is no style', async () => {
+      // go back where we have 2 empty lines, after abc.
+      const clickPointEnd = await textBoxutil.getCanvasCursorPositionAt(20);
+      await canvasUtil.click({
+        position: clickPointEnd,
+        delay: 200,
+      });
+      await page.mouse.down();
+      await page.mouse.move(1, clickPointEnd.y + 150, { steps: 15 });
+      await page.mouse.up();
+      // we remove them because space is finishing
+      await canvasUtil.press('Backspace');
+      // lets click where style end to show that we can add new line without carrying over
+      const clickPointYellow = await textBoxutil.getCanvasCursorPositionAt(45);
+      await canvasUtil.click({
+        position: clickPointYellow,
+        delay: 200,
+      });
+      await canvasUtil.press('Enter');
+      // this part of test is valid if the new line is after a styled char,
+      // and there is no style on the part of text that follows, but there is visible text.
+      await expect(await canvasUtil.screenshot()).toMatchSnapshot({
+        name: `6-after-adding-a-newline-splitByGrapheme-${splitByGrapheme}.png`,
+        maxDiffPixelRatio: 0.01,
+      });
     });
   });
 }

e2e/tests/text/adding-text/index.ts

@@ -9,7 +9,7 @@ beforeAll(
       splitByGrapheme: true,
       fontSize: 48,
       width: 210,
-      top: 20,
+      top: 0,
       styles: util.stylesFromArray(
         [
           {
@@ -55,5 +55,5 @@ beforeAll(
     canvas.add(text);
     return { text };
   },
-  { width: 300, height: 700 }
+  { width: 250, height: 600 }
 );