From a1dcc8e6e7c324ac52724f3f00d43802850e4365 Mon Sep 17 00:00:00 2001
From: pupiltong <12288479+PupilTong@users.noreply.github.com>
Date: Fri, 11 Apr 2025 18:18:04 +0800
Subject: [PATCH] fix: the `\n` character should create a new line

---
 .changeset/thin-poems-argue.md                 |   7 +++++++
 .../web-elements/src/XText/x-text.css          |   1 +
 .../web-platform/web-tests/tests/react.spec.ts |  17 +++++++++++++----
 .../raw-text-new-line/index-chromium-linux.png | Bin 0 -> 4472 bytes
 .../raw-text-new-line/index-firefox-linux.png  | Bin 0 -> 19946 bytes
 .../raw-text-new-line/index-webkit-linux.png   | Bin 0 -> 4429 bytes
 .../basic-element-text-with-new-line/index.jsx |  14 ++++++++++++++
 7 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/thin-poems-argue.md
 create mode 100644 packages/web-platform/web-tests/tests/react.spec.ts-snapshots/text/raw-text-new-line/index-chromium-linux.png
 create mode 100644 packages/web-platform/web-tests/tests/react.spec.ts-snapshots/text/raw-text-new-line/index-firefox-linux.png
 create mode 100644 packages/web-platform/web-tests/tests/react.spec.ts-snapshots/text/raw-text-new-line/index-webkit-linux.png
 create mode 100644 packages/web-platform/web-tests/tests/react/basic-element-text-with-new-line/index.jsx

diff --git a/.changeset/thin-poems-argue.md b/.changeset/thin-poems-argue.md
new file mode 100644
index 0000000000..39d77a6a31
--- /dev/null
+++ b/.changeset/thin-poems-argue.md
@@ -0,0 +1,7 @@
+---
+"@lynx-js/web-elements": patch
+---
+
+fix: the `\n` character should create a new line
+
+add `white-space-collapse: preserve-breaks` to raw-text
diff --git a/packages/web-platform/web-elements/src/XText/x-text.css b/packages/web-platform/web-elements/src/XText/x-text.css
index 9f9fc0d040..b4c739e87c 100644
--- a/packages/web-platform/web-elements/src/XText/x-text.css
+++ b/packages/web-platform/web-elements/src/XText/x-text.css
@@ -263,6 +263,7 @@ x-text[text-maxline][tail-color-convert="false"]::part(inner-box) {
 
 raw-text {
   display: none;
+  white-space-collapse: preserve-breaks;
 }
 x-text > raw-text,
 inline-text > raw-text,
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts b/packages/web-platform/web-tests/tests/react.spec.ts
index e15d8a910b..3b4f32e048 100644
--- a/packages/web-platform/web-tests/tests/react.spec.ts
+++ b/packages/web-platform/web-tests/tests/react.spec.ts
@@ -1081,16 +1081,21 @@ test.describe('reactlynx3 tests', () => {
           );
         },
       );
+      test('basic-element-text-with-new-line', async ({ page }, { title }) => {
+        await goto(page, title);
+        await wait(100);
+        await diffScreenShot(page, 'text', 'raw-text-new-line');
+      });
       test.describe('basic-element-text-text-selection', () => {
         const title = 'basic-element-text-text-selection';
 
         test('selection-true-boolean-flatten-false', async ({ page, browserName }) => {
           await goto(page, title);
           if (browserName === 'webkit') {
-            await page
-              .getByText('text-selection-true-boolean-flatten-false')
-              .first()
-              .click({ 'clickCount': 3 });
+            test.skip(
+              true,
+              'the selection status cannot be screenshot on webkit',
+            );
           } else {
             await page
               .getByText('text-selection-true-boolean-flatten-false')
@@ -1103,6 +1108,10 @@ test.describe('reactlynx3 tests', () => {
             'text',
             'text-selection',
             'text-selection-true-boolean-flatten-false',
+            {
+              threshold: 0.1,
+              fullPage: false,
+            },
           );
         });
 
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/text/raw-text-new-line/index-chromium-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/text/raw-text-new-line/index-chromium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..d0d3ab046c3b5716bb3188f5e2a3a243affb14e1
GIT binary patch
literal 4472
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
HFW>nO=KQNb

literal 0
HcmV?d00001

diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/text/raw-text-new-line/index-firefox-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/text/raw-text-new-line/index-firefox-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..ca40a4b02689d7cf8b756040c34f978f5ff9dc24
GIT binary patch
literal 19946
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

literal 0
HcmV?d00001

diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/text/raw-text-new-line/index-webkit-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/text/raw-text-new-line/index-webkit-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e82e1fb58fb66f90fbd286c8ee6d8676c3a607e
GIT binary patch
literal 4429
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
N$bG2L+Tat{{tc8SZdU*R

literal 0
HcmV?d00001

diff --git a/packages/web-platform/web-tests/tests/react/basic-element-text-with-new-line/index.jsx b/packages/web-platform/web-tests/tests/react/basic-element-text-with-new-line/index.jsx
new file mode 100644
index 0000000000..4eaac6416e
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/react/basic-element-text-with-new-line/index.jsx
@@ -0,0 +1,14 @@
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { root } from '@lynx-js/react';
+function App() {
+  return (
+    <view>
+      <text>
+        {`hello\nworld!`}
+      </text>
+    </view>
+  );
+}
+root.render(<App></App>);