diff --git a/.changeset/rude-parks-dig.md b/.changeset/rude-parks-dig.md
new file mode 100644
index 0000000000..15dc869da3
--- /dev/null
+++ b/.changeset/rude-parks-dig.md
@@ -0,0 +1,13 @@
+---
+"@lynx-js/web-elements": minor
+"@lynx-js/web-style-transformer": patch
+"@lynx-js/web-elements-compat": patch
+---
+
+feat: support `justify-content`, `align-self` in linear container
+
+Now these two properties could work in a linear container.
+
+We don't transforms the `justify-content` and `align-self` to css vars any more.
+
+The previous version of `@lynx-js/web-core` won't work with current `@lynx-js/web-core` after this change.
diff --git a/packages/web-platform/web-constants/tsconfig.json b/packages/web-platform/web-constants/tsconfig.json
index c8718e8b48..95e93056b6 100644
--- a/packages/web-platform/web-constants/tsconfig.json
+++ b/packages/web-platform/web-constants/tsconfig.json
@@ -5,7 +5,6 @@
     "rootDir": "./src",
     "outDir": "./dist",
     "lib": ["ESNext"],
-    "verbatimModuleSyntax": true,
   },
   "include": ["src"],
   "references": [
diff --git a/packages/web-platform/web-core/tsconfig.json b/packages/web-platform/web-core/tsconfig.json
index 02ac2b7295..1ca5e34734 100644
--- a/packages/web-platform/web-core/tsconfig.json
+++ b/packages/web-platform/web-core/tsconfig.json
@@ -7,7 +7,6 @@
     "lib": ["DOM", "ESNext", "WebWorker"],
     "noUnusedParameters": false,
     "noImplicitReturns": false,
-    "verbatimModuleSyntax": true,
   },
   "include": ["src"],
   "references": [
diff --git a/packages/web-platform/web-elements-compat/src/LinearContainer/linear-compat.css b/packages/web-platform/web-elements-compat/src/LinearContainer/linear-compat.css
index 58fac221bf..bcf5ea280f 100644
--- a/packages/web-platform/web-elements-compat/src/LinearContainer/linear-compat.css
+++ b/packages/web-platform/web-elements-compat/src/LinearContainer/linear-compat.css
@@ -77,22 +77,22 @@
 
 [lynx-computed-display="linear"][lynx-linear-orientation="vertical"] {
   flex-direction: column !important;
-  justify-content: var(--justify-content-column) !important;
+  justify-content: var(--justify-content-column);
 }
 
 [lynx-computed-display="linear"][lynx-linear-orientation="horizontal"] {
   flex-direction: row !important;
-  justify-content: var(--justify-content-row) !important;
+  justify-content: var(--justify-content-row);
 }
 
 [lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"] {
   flex-direction: column-reverse !important;
-  justify-content: var(--justify-content-column-reverse) !important;
+  justify-content: var(--justify-content-column-reverse);
 }
 
 [lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"] {
   flex-direction: row-reverse !important;
-  justify-content: var(--justify-content-row-reverse) !important;
+  justify-content: var(--justify-content-row-reverse);
 }
 
 [lynx-computed-display="linear"][lynx-linear-orientation="vertical"] > *,
@@ -103,7 +103,7 @@
 [lynx-computed-display="linear"][lynx-linear-orientation="vertical-reverse"]
   > lynx-wrapper
   > * {
-  align-self: var(--align-self-column) !important;
+  align-self: var(--align-self-column);
 }
 [lynx-computed-display="linear"][lynx-linear-orientation="horizontal"] > *,
 [lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"],
@@ -113,5 +113,5 @@
 [lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"]
   > lynx-wrapper
   > * {
-  align-self: var(--align-self-row) !important;
+  align-self: var(--align-self-row);
 }
diff --git a/packages/web-platform/web-elements/src/common-css/linear.css b/packages/web-platform/web-elements/src/common-css/linear.css
index c1a2788a70..820cecdffe 100644
--- a/packages/web-platform/web-elements/src/common-css/linear.css
+++ b/packages/web-platform/web-elements/src/common-css/linear.css
@@ -66,14 +66,6 @@
   syntax: "*";
   inherits: false;
 }
-@property --justify-content {
-  syntax: "*";
-  inherits: false;
-}
-@property --align-self {
-  syntax: "*";
-  inherits: false;
-}
 @property --flex-grow {
   syntax: "<number>";
   inherits: false;
@@ -207,8 +199,7 @@ x-viewpager-ng {
     --lynx-display-flex,
     var(--flex-direction)
   );
-  justify-content: var(--lynx-display-linear, var(--linear-justify-content))
-    var(--lynx-display-flex, var(--justify-content));
+  justify-content: var(--lynx-display-linear, var(--linear-justify-content));
 }
 
 /** For @container
@@ -318,7 +309,6 @@ x-viewpager-ng {
       flex-grow: var(--flex-grow);
       flex-shrink: var(--flex-shrink);
       flex-basis: var(--flex-basis);
-      align-self: var(--align-self);
     }
   }
 
diff --git a/packages/web-platform/web-style-transformer/src/transformLynxStyles.ts b/packages/web-platform/web-style-transformer/src/transformLynxStyles.ts
index c9abc0c7ea..9ba258f68f 100644
--- a/packages/web-platform/web-style-transformer/src/transformLynxStyles.ts
+++ b/packages/web-platform/web-style-transformer/src/transformLynxStyles.ts
@@ -2,6 +2,10 @@
 // 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 { parseFlexShorthand } from './parseFlexShorthand.js';
+/**
+ * replace values of the property
+ * if one value is not listed, it will be ignored and kept as is.
+ */
 const replaceRules: {
   [declarationPropertyName: string]: {
     [plainValue: string]:
@@ -210,6 +214,16 @@ const replaceRules: {
       ['--align-self-column', 'stretch'],
     ],
   },
+  'justify-content': {
+    left: [],
+    right: [],
+    start: [
+      ['justify-content', 'flex-start'],
+    ],
+    end: [
+      ['justify-content', 'flex-end'],
+    ],
+  },
 };
 
 const renameRules: {
@@ -245,12 +259,6 @@ const renameRules: {
   'flex-wrap': [
     '--flex-wrap',
   ],
-  'justify-content': [
-    '--justify-content',
-  ],
-  'align-self': [
-    '--align-self',
-  ],
   'flex-grow': [
     '--flex-grow',
   ],
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts b/packages/web-platform/web-tests/tests/react.spec.ts
index e44c3dc2b4..7ab02f14f1 100644
--- a/packages/web-platform/web-tests/tests/react.spec.ts
+++ b/packages/web-platform/web-tests/tests/react.spec.ts
@@ -3341,6 +3341,24 @@ test.describe('reactlynx3 tests', () => {
         await diffScreenShot(page, title, 'index');
       },
     );
+    test(
+      'basic-linear-row-container-main-axis-justify-content-right-left-with-direction-rtl',
+      async ({
+        page,
+      }, { title }) => {
+        await goto(page, title);
+        await diffScreenShot(page, title, 'index');
+      },
+    );
+    test(
+      'basic-linear-row-container-main-axis-justify-content-start-end-with-direction-rtl',
+      async ({
+        page,
+      }, { title }) => {
+        await goto(page, title);
+        await diffScreenShot(page, title, 'index');
+      },
+    );
     test(
       'basic-linear-row-container-main-axis-graverty-top-bottom-with-direction-rtl',
       async ({
@@ -3416,13 +3434,26 @@ test.describe('reactlynx3 tests', () => {
       await goto(page, title);
       await diffScreenShot(page, title, 'index');
     });
+    test('basic-linear-column-align-items', async ({ page }, { title }) => {
+      await goto(page, title);
+      await diffScreenShot(page, title, 'index');
+    });
+    test(
+      'basic-linear-column-container-items-layout-gravity',
+      async ({ page }, {
+        title,
+      }) => {
+        await goto(page, title);
+        await diffScreenShot(page, title, 'index');
+      },
+    );
     test('basic-linear-column-container-items-align-self', async ({ page }, {
       title,
     }) => {
       await goto(page, title);
       await diffScreenShot(page, title, 'index');
     });
-    test('basic-linear-row-container-items-align-self', async ({ page }, {
+    test('basic-linear-row-container-items-layout-gravity', async ({ page }, {
       title,
     }) => {
       await goto(page, title);
@@ -3440,6 +3471,27 @@ test.describe('reactlynx3 tests', () => {
       await goto(page, title);
       await diffScreenShot(page, title, 'index');
     });
+    test(
+      'basic-linear-column-container-main-axis-justify-content-right-left-with-direction-rtl',
+      async ({ page }, { title }) => {
+        await goto(page, title);
+        await diffScreenShot(page, title, 'index');
+      },
+    );
+    test(
+      'basic-linear-column-container-main-axis-justify-content-center',
+      async ({ page }, { title }) => {
+        await goto(page, title);
+        await diffScreenShot(page, title, 'index');
+      },
+    );
+    test(
+      'basic-linear-column-container-main-axis-justify-content-start-end-with-direction-rtl',
+      async ({ page }, { title }) => {
+        await goto(page, title);
+        await diffScreenShot(page, title, 'index');
+      },
+    );
 
     test(
       'config-css-default-display-linear-false',
@@ -3484,6 +3536,31 @@ test.describe('reactlynx3 tests', () => {
       await goto(page, title);
       await diffScreenShot(page, title, 'index');
     });
+    test(
+      'basic-flex-column-container-main-axis-justify-content-start-end-with-direction-rtl',
+      async ({ page }, { title }) => {
+        await goto(page, title);
+        await diffScreenShot(page, title, 'index');
+      },
+    );
+    test(
+      'basic-flex-column-container-items-align-self',
+      async ({ page }, { title }) => {
+        await goto(page, title);
+        await diffScreenShot(page, title, 'index');
+      },
+    );
+    test('basic-flex-column-align-items', async ({ page }, { title }) => {
+      await goto(page, title);
+      await diffScreenShot(page, title, 'index');
+    });
+    test(
+      'basic-flex-row-container-main-axis-justify-content-start-end-with-direction-rtl',
+      async ({ page }, { title }) => {
+        await goto(page, title);
+        await diffScreenShot(page, title, 'index');
+      },
+    );
   });
 
   test.afterEach(async ({ page, browserName, baseURL, browser }, { title }) => {
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-column-align-items/index/index-chromium-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-column-align-items/index/index-chromium-linux.png
new file mode 100644
index 0000000000..e71cf8d5e2
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-column-align-items/index/index-chromium-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-column-align-items/index/index-firefox-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-column-align-items/index/index-firefox-linux.png
new file mode 100644
index 0000000000..8d807f7d37
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-column-align-items/index/index-firefox-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-column-align-items/index/index-webkit-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-column-align-items/index/index-webkit-linux.png
new file mode 100644
index 0000000000..101d6e4fee
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-column-align-items/index/index-webkit-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-column-container-items-align-self/index/index-chromium-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-column-container-items-align-self/index/index-chromium-linux.png
new file mode 100644
index 0000000000..4151b01cc3
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-column-container-items-align-self/index/index-chromium-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-column-container-items-align-self/index/index-firefox-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-column-container-items-align-self/index/index-firefox-linux.png
new file mode 100644
index 0000000000..4880be25a0
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-column-container-items-align-self/index/index-firefox-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-column-container-items-align-self/index/index-webkit-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-column-container-items-align-self/index/index-webkit-linux.png
new file mode 100644
index 0000000000..67f7d8fa61
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-column-container-items-align-self/index/index-webkit-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-column-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-chromium-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-column-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-chromium-linux.png
new file mode 100644
index 0000000000..80038a8435
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-column-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-chromium-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-column-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-firefox-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-column-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-firefox-linux.png
new file mode 100644
index 0000000000..dd4aeb36b1
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-column-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-firefox-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-column-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-webkit-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-column-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-webkit-linux.png
new file mode 100644
index 0000000000..addb1baac3
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-column-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-webkit-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-row-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-chromium-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-row-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-chromium-linux.png
new file mode 100644
index 0000000000..e21b2a54f0
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-row-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-chromium-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-row-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-firefox-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-row-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-firefox-linux.png
new file mode 100644
index 0000000000..86d9a6272f
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-row-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-firefox-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-row-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-webkit-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-row-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-webkit-linux.png
new file mode 100644
index 0000000000..b7170b58de
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-flex-row-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-webkit-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-align-items/index/index-chromium-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-align-items/index/index-chromium-linux.png
new file mode 100644
index 0000000000..e71cf8d5e2
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-align-items/index/index-chromium-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-align-items/index/index-firefox-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-align-items/index/index-firefox-linux.png
new file mode 100644
index 0000000000..8d807f7d37
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-align-items/index/index-firefox-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-align-items/index/index-webkit-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-align-items/index/index-webkit-linux.png
new file mode 100644
index 0000000000..101d6e4fee
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-align-items/index/index-webkit-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-items-align-self/index/index-chromium-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-items-align-self/index/index-chromium-linux.png
index dceae9d4da..934a949ae9 100644
Binary files a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-items-align-self/index/index-chromium-linux.png and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-items-align-self/index/index-chromium-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-items-align-self/index/index-firefox-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-items-align-self/index/index-firefox-linux.png
index c644e6eb68..52170a8aac 100644
Binary files a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-items-align-self/index/index-firefox-linux.png and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-items-align-self/index/index-firefox-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-items-align-self/index/index-webkit-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-items-align-self/index/index-webkit-linux.png
index 8f49288ec8..1c286abf4b 100644
Binary files a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-items-align-self/index/index-webkit-linux.png and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-items-align-self/index/index-webkit-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-items-layout-gravity/index/index-chromium-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-items-layout-gravity/index/index-chromium-linux.png
new file mode 100644
index 0000000000..dceae9d4da
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-items-layout-gravity/index/index-chromium-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-items-layout-gravity/index/index-firefox-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-items-layout-gravity/index/index-firefox-linux.png
new file mode 100644
index 0000000000..c644e6eb68
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-items-layout-gravity/index/index-firefox-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-items-layout-gravity/index/index-webkit-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-items-layout-gravity/index/index-webkit-linux.png
new file mode 100644
index 0000000000..8f49288ec8
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-items-layout-gravity/index/index-webkit-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-main-axis-justify-content-center/index/index-chromium-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-main-axis-justify-content-center/index/index-chromium-linux.png
new file mode 100644
index 0000000000..3f344a3adf
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-main-axis-justify-content-center/index/index-chromium-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-main-axis-justify-content-center/index/index-firefox-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-main-axis-justify-content-center/index/index-firefox-linux.png
new file mode 100644
index 0000000000..cba0188299
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-main-axis-justify-content-center/index/index-firefox-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-main-axis-justify-content-center/index/index-webkit-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-main-axis-justify-content-center/index/index-webkit-linux.png
new file mode 100644
index 0000000000..ac5be652b2
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-main-axis-justify-content-center/index/index-webkit-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-main-axis-justify-content-right-left-with-direction-rtl/index/index-chromium-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-main-axis-justify-content-right-left-with-direction-rtl/index/index-chromium-linux.png
new file mode 100644
index 0000000000..093b52b20c
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-main-axis-justify-content-right-left-with-direction-rtl/index/index-chromium-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-main-axis-justify-content-right-left-with-direction-rtl/index/index-firefox-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-main-axis-justify-content-right-left-with-direction-rtl/index/index-firefox-linux.png
new file mode 100644
index 0000000000..1c1136db12
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-main-axis-justify-content-right-left-with-direction-rtl/index/index-firefox-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-main-axis-justify-content-right-left-with-direction-rtl/index/index-webkit-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-main-axis-justify-content-right-left-with-direction-rtl/index/index-webkit-linux.png
new file mode 100644
index 0000000000..6d5fd89547
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-main-axis-justify-content-right-left-with-direction-rtl/index/index-webkit-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-chromium-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-chromium-linux.png
new file mode 100644
index 0000000000..80038a8435
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-chromium-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-firefox-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-firefox-linux.png
new file mode 100644
index 0000000000..dd4aeb36b1
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-firefox-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-webkit-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-webkit-linux.png
new file mode 100644
index 0000000000..addb1baac3
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-column-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-webkit-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-items-align-self/index/index-chromium-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-items-layout-gravity/index/index-chromium-linux.png
similarity index 100%
rename from packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-items-align-self/index/index-chromium-linux.png
rename to packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-items-layout-gravity/index/index-chromium-linux.png
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-items-align-self/index/index-firefox-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-items-layout-gravity/index/index-firefox-linux.png
similarity index 100%
rename from packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-items-align-self/index/index-firefox-linux.png
rename to packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-items-layout-gravity/index/index-firefox-linux.png
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-items-align-self/index/index-webkit-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-items-layout-gravity/index/index-webkit-linux.png
similarity index 100%
rename from packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-items-align-self/index/index-webkit-linux.png
rename to packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-items-layout-gravity/index/index-webkit-linux.png
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-main-axis-justify-content-right-left-with-direction-rtl/index/index-chromium-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-main-axis-justify-content-right-left-with-direction-rtl/index/index-chromium-linux.png
new file mode 100644
index 0000000000..202d9dc53b
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-main-axis-justify-content-right-left-with-direction-rtl/index/index-chromium-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-main-axis-justify-content-right-left-with-direction-rtl/index/index-firefox-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-main-axis-justify-content-right-left-with-direction-rtl/index/index-firefox-linux.png
new file mode 100644
index 0000000000..7a17e68b16
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-main-axis-justify-content-right-left-with-direction-rtl/index/index-firefox-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-main-axis-justify-content-right-left-with-direction-rtl/index/index-webkit-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-main-axis-justify-content-right-left-with-direction-rtl/index/index-webkit-linux.png
new file mode 100644
index 0000000000..8a69fd5353
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-main-axis-justify-content-right-left-with-direction-rtl/index/index-webkit-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-chromium-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-chromium-linux.png
new file mode 100644
index 0000000000..e21b2a54f0
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-chromium-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-firefox-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-firefox-linux.png
new file mode 100644
index 0000000000..86d9a6272f
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-firefox-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-webkit-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-webkit-linux.png
new file mode 100644
index 0000000000..b7170b58de
Binary files /dev/null and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/basic-linear-row-container-main-axis-justify-content-start-end-with-direction-rtl/index/index-webkit-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/x-refresh-view/demo/pull-down/index-chromium-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/x-refresh-view/demo/pull-down/index-chromium-linux.png
index 30fdf3c54d..aef33c63ef 100644
Binary files a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/x-refresh-view/demo/pull-down/index-chromium-linux.png and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/x-refresh-view/demo/pull-down/index-chromium-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/x-refresh-view/demo/pull-up/index-chromium-linux.png b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/x-refresh-view/demo/pull-up/index-chromium-linux.png
index 3cfccbc1e9..76660910f9 100644
Binary files a/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/x-refresh-view/demo/pull-up/index-chromium-linux.png and b/packages/web-platform/web-tests/tests/react.spec.ts-snapshots/x-refresh-view/demo/pull-up/index-chromium-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/react/basic-flex-column-align-items/index.css b/packages/web-platform/web-tests/tests/react/basic-flex-column-align-items/index.css
new file mode 100644
index 0000000000..f64f4801fd
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/react/basic-flex-column-align-items/index.css
@@ -0,0 +1,58 @@
+/*
+// Copyright 2024 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.
+*/
+.container {
+  display: flex;
+}
+.vertical {
+  flex-direction: column;
+  width: 200px;
+  height: 150px;
+  background-color: pink;
+}
+.vertical-reverse {
+  flex-direction: column-reverse;
+  width: 200px;
+  height: 150px;
+  background-color: #99ddaa;
+}
+.horizontal {
+  flex-direction: row;
+  width: 150px;
+  height: 100px;
+  background-color: pink;
+}
+.horizontal-reverse {
+  flex-direction: row-reverse;
+  width: 150px;
+  height: 100px;
+  background-color: #99ddaa;
+}
+.start {
+  align-items: start;
+}
+.end {
+  align-items: end;
+}
+.flex-start {
+  align-items: flex-start;
+}
+.flex-end {
+  align-items: flex-end;
+}
+.center {
+  align-items: center;
+}
+.stretch {
+  align-items: stretch;
+}
+.container-item {
+  linear-weight: 0;
+  width: 50px;
+  height: 50px;
+}
+.rtl {
+  direction: lynx-rtl;
+}
diff --git a/packages/web-platform/web-tests/tests/react/basic-flex-column-align-items/index.jsx b/packages/web-platform/web-tests/tests/react/basic-flex-column-align-items/index.jsx
new file mode 100644
index 0000000000..23e42ed35e
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/react/basic-flex-column-align-items/index.jsx
@@ -0,0 +1,60 @@
+/*
+// Copyright 2024 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 { Component, root } from '@lynx-js/react';
+import './index.css';
+class Page extends Component {
+  render() {
+    return (
+      <view style='display:flex;flex-direction:column;'>
+        <view class='container start horizontal'>
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+
+        <view class='container end horizontal'>
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+
+        <view class='container flex-start horizontal'>
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+
+        <view class='container flex-end horizontal'>
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+
+        <view class='container center horizontal'>
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+
+        <view class='container stretch horizontal'>
+          <view
+            class='container-item'
+            style='background-color:red; height:auto'
+          />
+          <view
+            class='container-item'
+            style='background-color:green; height:auto'
+          />
+          <view
+            class='container-item'
+            style='background-color:blue; height:auto'
+          />
+        </view>
+      </view>
+    );
+  }
+}
+root.render(<Page></Page>);
diff --git a/packages/web-platform/web-tests/tests/react/basic-flex-column-container-items-align-self/index.css b/packages/web-platform/web-tests/tests/react/basic-flex-column-container-items-align-self/index.css
new file mode 100644
index 0000000000..ffd9f46c0c
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/react/basic-flex-column-container-items-align-self/index.css
@@ -0,0 +1,71 @@
+/*
+// Copyright 2024 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.
+*/
+.container {
+  display: flex;
+  linear-weight-sum: 0;
+}
+.items-center {
+  align-items: center;
+}
+.pink {
+  background-color: pink;
+}
+.aqua {
+  background-color: aqua;
+}
+.vertical {
+  flex-direction: column;
+  width: 100px;
+  height: 300px;
+  background-color: pink;
+}
+.vertical-reverse {
+  flex-direction: column-reverse;
+  width: 300px;
+  height: 150px;
+  background-color: #99ddaa;
+}
+.horizontal {
+  flex-direction: row;
+  width: 300px;
+  height: 100px;
+  background-color: pink;
+}
+.horizontal-reverse {
+  flex-direction: row-reverse;
+  width: 200px;
+  height: 100px;
+  background-color: #99ddaa;
+}
+.container-item {
+  linear-weight: 0;
+  width: 40px;
+  height: 40px;
+}
+.self-auto {
+  align-self: auto;
+}
+.self-center {
+  align-self: center;
+}
+.self-start {
+  align-self: start;
+}
+.self-end {
+  align-self: end;
+}
+.self-flex-start {
+  align-self: flex-start;
+}
+.self-flex-end {
+  align-self: flex-end;
+}
+.self-baseline {
+  align-self: baseline;
+}
+.self-stretch {
+  align-self: stretch;
+}
diff --git a/packages/web-platform/web-tests/tests/react/basic-flex-column-container-items-align-self/index.jsx b/packages/web-platform/web-tests/tests/react/basic-flex-column-container-items-align-self/index.jsx
new file mode 100644
index 0000000000..44527569e1
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/react/basic-flex-column-container-items-align-self/index.jsx
@@ -0,0 +1,52 @@
+/*
+// Copyright 2024 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 { Component, root } from '@lynx-js/react';
+import './index.css';
+class Page extends Component {
+  render() {
+    return (
+      <view style='display:flex;flex-direction:row;'>
+        <view class='container vertical pink items-center'>
+          <view
+            class='container-item self-auto'
+            style='background-color:red;'
+          />
+          <view
+            class='container-item self-center'
+            style='background-color:blue;'
+          />
+          <view
+            class='container-item self-start'
+            style='background-color:yellow;'
+          />
+          <view
+            class='container-item self-end'
+            style='background-color:black;'
+          />
+          <view
+            class='container-item self-flex-start'
+            style='background-color:purple;'
+          />
+        </view>
+        <view class='container vertical pink'>
+          <view
+            class='container-item self-flex-end'
+            style='background-color:red;'
+          />
+          <view
+            class='container-item self-baseline'
+            style='background-color:green;'
+          />
+          <view
+            class='container-item self-stretch'
+            style='background-color:blue;'
+          />
+        </view>
+      </view>
+    );
+  }
+}
+root.render(<Page></Page>);
diff --git a/packages/web-platform/web-tests/tests/react/basic-flex-column-container-main-axis-justify-content-start-end-with-direction-rtl/index.css b/packages/web-platform/web-tests/tests/react/basic-flex-column-container-main-axis-justify-content-start-end-with-direction-rtl/index.css
new file mode 100644
index 0000000000..18482303cf
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/react/basic-flex-column-container-main-axis-justify-content-start-end-with-direction-rtl/index.css
@@ -0,0 +1,33 @@
+/*
+// Copyright 2024 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.
+*/
+.container {
+  display: flex;
+}
+.vertical {
+  flex-direction: column;
+}
+.vertical-reverse {
+  flex-direction: column-reverse;
+}
+.start {
+  justify-content: start;
+}
+.end {
+  justify-content: end;
+}
+.flex-start {
+  justify-content: flex-start;
+}
+.flex-end {
+  justify-content: flex-end;
+}
+.container-item {
+  width: 40px;
+  height: 40px;
+}
+.rtl {
+  direction: lynx-rtl;
+}
diff --git a/packages/web-platform/web-tests/tests/react/basic-flex-column-container-main-axis-justify-content-start-end-with-direction-rtl/index.jsx b/packages/web-platform/web-tests/tests/react/basic-flex-column-container-main-axis-justify-content-start-end-with-direction-rtl/index.jsx
new file mode 100644
index 0000000000..19c1883398
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/react/basic-flex-column-container-main-axis-justify-content-start-end-with-direction-rtl/index.jsx
@@ -0,0 +1,128 @@
+/*
+// Copyright 2024 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 { Component, root } from '@lynx-js/react';
+import './index.css';
+class Page extends Component {
+  render() {
+    return (
+      <>
+        <view style='display:flex; flex-direction:row;'>
+          <view
+            id='container-start'
+            class='container start vertical'
+            style='background-color:pink;height:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-end'
+            class='container end vertical'
+            style='background-color:#99ddaa;height:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-start-rtl'
+            class='container start vertical rtl'
+            style='background-color:pink;height:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-end-rtl'
+            class='container end vertical rtl'
+            style='background-color:#99ddaa;height:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+        </view>
+        <view style='display:flex; flex-direction:row;'>
+          <view
+            id='container-start-reverse'
+            class='container start vertical-reverse'
+            style='background-color:pink;height:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-end-reverse'
+            class='container end vertical-reverse'
+            style='background-color:#99ddaa;height:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-start-rtl-reverse'
+            class='container start vertical-reverse rtl'
+            style='background-color:pink;height:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-end-rtl-reverse'
+            class='container end vertical-reverse rtl'
+            style='background-color:#99ddaa;height:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-start-reverse'
+            class='container flex-start vertical-reverse'
+            style='background-color:pink;height:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-end-reverse'
+            class='container flex-end vertical-reverse'
+            style='background-color:#99ddaa;height:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-start-rtl-reverse'
+            class='container flex-start vertical-reverse rtl'
+            style='background-color:pink;height:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-end-rtl-reverse'
+            class='container flex-end vertical-reverse rtl'
+            style='background-color:#99ddaa;height:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+        </view>
+      </>
+    );
+  }
+}
+root.render(<Page></Page>);
diff --git a/packages/web-platform/web-tests/tests/react/basic-flex-nested-linear-setting/index.jsx b/packages/web-platform/web-tests/tests/react/basic-flex-nested-linear-setting/index.jsx
index ef82b0aa06..e04c296438 100644
--- a/packages/web-platform/web-tests/tests/react/basic-flex-nested-linear-setting/index.jsx
+++ b/packages/web-platform/web-tests/tests/react/basic-flex-nested-linear-setting/index.jsx
@@ -21,7 +21,6 @@ class Page extends Component {
           style={{
             display: 'linear',
             linearGravity: 'space-between',
-            justifyContent: 'space-around',
             height: '100px',
             width: '100px',
           }}
diff --git a/packages/web-platform/web-tests/tests/react/basic-flex-row-container-main-axis-justify-content-start-end-with-direction-rtl/index.css b/packages/web-platform/web-tests/tests/react/basic-flex-row-container-main-axis-justify-content-start-end-with-direction-rtl/index.css
new file mode 100644
index 0000000000..6c893135b6
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/react/basic-flex-row-container-main-axis-justify-content-start-end-with-direction-rtl/index.css
@@ -0,0 +1,33 @@
+/*
+// Copyright 2024 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.
+*/
+.container {
+  display: flex;
+}
+.row {
+  flex-direction: row;
+}
+.row-reverse {
+  flex-direction: row-reverse;
+}
+.start {
+  justify-content: start;
+}
+.end {
+  justify-content: end;
+}
+.flex-start {
+  justify-content: flex-start;
+}
+.flex-end {
+  justify-content: flex-end;
+}
+.container-item {
+  width: 40px;
+  height: 40px;
+}
+.rtl {
+  direction: lynx-rtl;
+}
diff --git a/packages/web-platform/web-tests/tests/react/basic-flex-row-container-main-axis-justify-content-start-end-with-direction-rtl/index.jsx b/packages/web-platform/web-tests/tests/react/basic-flex-row-container-main-axis-justify-content-start-end-with-direction-rtl/index.jsx
new file mode 100644
index 0000000000..c52d209c35
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/react/basic-flex-row-container-main-axis-justify-content-start-end-with-direction-rtl/index.jsx
@@ -0,0 +1,128 @@
+/*
+// Copyright 2024 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 { Component, root } from '@lynx-js/react';
+import './index.css';
+class Page extends Component {
+  render() {
+    return (
+      <>
+        <view style='display:flex; flex-direction:column;'>
+          <view
+            id='container-start'
+            class='container start row'
+            style='background-color:pink;width:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-end'
+            class='container end row'
+            style='background-color:#99ddaa;width:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-start-rtl'
+            class='container start row rtl'
+            style='background-color:pink;width:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-end-rtl'
+            class='container end row rtl'
+            style='background-color:#99ddaa;width:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+        </view>
+        <view style='display:flex; flex-direction:column;'>
+          <view
+            id='container-start-reverse'
+            class='container start row-reverse'
+            style='background-color:pink;width:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-end-reverse'
+            class='container end row-reverse'
+            style='background-color:#99ddaa;width:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-start-rtl-reverse'
+            class='container start row-reverse rtl'
+            style='background-color:pink;width:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-end-rtl-reverse'
+            class='container end row-reverse rtl'
+            style='background-color:#99ddaa;width:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-start-reverse'
+            class='container flex-start row-reverse'
+            style='background-color:pink;width:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-end-reverse'
+            class='container flex-end row-reverse'
+            style='background-color:#99ddaa;width:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-start-rtl-reverse'
+            class='container flex-start row-reverse rtl'
+            style='background-color:pink;width:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-end-rtl-reverse'
+            class='container flex-end row-reverse rtl'
+            style='background-color:#99ddaa;width:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+        </view>
+      </>
+    );
+  }
+}
+root.render(<Page></Page>);
diff --git a/packages/web-platform/web-tests/tests/react/basic-linear-column-align-items/index.css b/packages/web-platform/web-tests/tests/react/basic-linear-column-align-items/index.css
new file mode 100644
index 0000000000..c6eef0d2d9
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/react/basic-linear-column-align-items/index.css
@@ -0,0 +1,59 @@
+/*
+// Copyright 2024 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.
+*/
+.container {
+  display: linear;
+  linear-weight-sum: 0;
+}
+.vertical {
+  linear-direction: column;
+  width: 200px;
+  height: 150px;
+  background-color: pink;
+}
+.vertical-reverse {
+  linear-direction: column-reverse;
+  width: 200px;
+  height: 150px;
+  background-color: #99ddaa;
+}
+.horizontal {
+  linear-direction: row;
+  width: 150px;
+  height: 100px;
+  background-color: pink;
+}
+.horizontal-reverse {
+  linear-direction: row-reverse;
+  width: 150px;
+  height: 100px;
+  background-color: #99ddaa;
+}
+.start {
+  align-items: start;
+}
+.end {
+  align-items: end;
+}
+.flex-start {
+  align-items: flex-start;
+}
+.flex-end {
+  align-items: flex-end;
+}
+.center {
+  align-items: center;
+}
+.stretch {
+  align-items: stretch;
+}
+.container-item {
+  linear-weight: 0;
+  width: 50px;
+  height: 50px;
+}
+.rtl {
+  direction: lynx-rtl;
+}
diff --git a/packages/web-platform/web-tests/tests/react/basic-linear-column-align-items/index.jsx b/packages/web-platform/web-tests/tests/react/basic-linear-column-align-items/index.jsx
new file mode 100644
index 0000000000..23e42ed35e
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/react/basic-linear-column-align-items/index.jsx
@@ -0,0 +1,60 @@
+/*
+// Copyright 2024 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 { Component, root } from '@lynx-js/react';
+import './index.css';
+class Page extends Component {
+  render() {
+    return (
+      <view style='display:flex;flex-direction:column;'>
+        <view class='container start horizontal'>
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+
+        <view class='container end horizontal'>
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+
+        <view class='container flex-start horizontal'>
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+
+        <view class='container flex-end horizontal'>
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+
+        <view class='container center horizontal'>
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+
+        <view class='container stretch horizontal'>
+          <view
+            class='container-item'
+            style='background-color:red; height:auto'
+          />
+          <view
+            class='container-item'
+            style='background-color:green; height:auto'
+          />
+          <view
+            class='container-item'
+            style='background-color:blue; height:auto'
+          />
+        </view>
+      </view>
+    );
+  }
+}
+root.render(<Page></Page>);
diff --git a/packages/web-platform/web-tests/tests/react/basic-linear-column-container-items-align-self/index.css b/packages/web-platform/web-tests/tests/react/basic-linear-column-container-items-align-self/index.css
index fa7a58fc37..9bcf5beaeb 100644
--- a/packages/web-platform/web-tests/tests/react/basic-linear-column-container-items-align-self/index.css
+++ b/packages/web-platform/web-tests/tests/react/basic-linear-column-container-items-align-self/index.css
@@ -5,11 +5,10 @@
 */
 .container {
   display: linear;
-  linear-gravity: none;
   linear-weight-sum: 0;
 }
 .items-center {
-  linear-cross-gravity: center;
+  align-items: center;
 }
 .pink {
   background-color: pink;
@@ -46,39 +45,27 @@
   width: 40px;
   height: 40px;
 }
-.self-left {
-  linear-layout-gravity: left;
+.self-auto {
+  align-self: auto;
 }
-.self-right {
-  linear-layout-gravity: right;
-}
-.self-top {
-  linear-layout-gravity: top;
-}
-.self-bottom {
-  linear-layout-gravity: bottom;
+.self-center {
+  align-self: center;
 }
 .self-start {
-  linear-layout-gravity: start;
+  align-self: start;
 }
 .self-end {
-  linear-layout-gravity: end;
+  align-self: end;
 }
-.self-center {
-  linear-layout-gravity: center;
+.self-flex-start {
+  align-self: flex-start;
 }
-.self-center-vertical {
-  linear-layout-gravity: center-vertical;
+.self-flex-end {
+  align-self: flex-end;
 }
-.self-center-horizontal {
-  linear-layout-gravity: center-horizontal;
+.self-baseline {
+  align-self: baseline;
 }
 .self-stretch {
-  linear-layout-gravity: stretch;
-}
-.self-fill-vertical {
-  linear-layout-gravity: fill-vertical;
-}
-.self-fill-horizontal {
-  linear-layout-gravity: fill-horizontal;
+  align-self: stretch;
 }
diff --git a/packages/web-platform/web-tests/tests/react/basic-linear-column-container-items-align-self/index.jsx b/packages/web-platform/web-tests/tests/react/basic-linear-column-container-items-align-self/index.jsx
index 6424dbdb34..7e0aa0e2eb 100644
--- a/packages/web-platform/web-tests/tests/react/basic-linear-column-container-items-align-self/index.jsx
+++ b/packages/web-platform/web-tests/tests/react/basic-linear-column-container-items-align-self/index.jsx
@@ -11,55 +11,35 @@ class Page extends Component {
       <view style='display:flex;flex-direction:row;'>
         <view class='container vertical pink items-center'>
           <view
-            class='container-item self-right'
+            class='container-item self-auto'
             style='background-color:red;'
           />
           <view
-            class='container-item self-left'
-            style='background-color:green;'
-          />
-          <view
-            class='container-item self-top'
+            class='container-item self-center'
             style='background-color:blue;'
           />
           <view
-            class='container-item self-bottom'
+            class='container-item self-start'
             style='background-color:yellow;'
           />
           <view
-            class='container-item self-start'
+            class='container-item self-end'
             style='background-color:black;'
           />
           <view
-            class='container-item self-end'
+            class='container-item self-flex-start'
             style='background-color:purple;'
           />
         </view>
         <view class='container vertical pink'>
           <view
-            class='container-item self-center'
+            class='container-item self-flex-end'
             style='background-color:red;'
           />
           <view
-            class='container-item self-center-horizontal'
+            class='container-item self-baseline'
             style='background-color:green;'
           />
-          <view
-            class='container-item self-center-vertical'
-            style='background-color:blue;'
-          />
-          <view
-            class='container-item self-stretch'
-            style='background-color:yellow; width:auto;'
-          />
-          <view
-            class='container-item self-fill-vertical'
-            style='background-color:black;'
-          />
-          <view
-            class='container-item self-fill-horizontal'
-            style='background-color:purple; width:auto;'
-          />
         </view>
       </view>
     );
diff --git a/packages/web-platform/web-tests/tests/react/basic-linear-column-container-items-layout-gravity/index.css b/packages/web-platform/web-tests/tests/react/basic-linear-column-container-items-layout-gravity/index.css
new file mode 100644
index 0000000000..fa7a58fc37
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/react/basic-linear-column-container-items-layout-gravity/index.css
@@ -0,0 +1,84 @@
+/*
+// Copyright 2024 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.
+*/
+.container {
+  display: linear;
+  linear-gravity: none;
+  linear-weight-sum: 0;
+}
+.items-center {
+  linear-cross-gravity: center;
+}
+.pink {
+  background-color: pink;
+}
+.aqua {
+  background-color: aqua;
+}
+.vertical {
+  linear-direction: column;
+  width: 100px;
+  height: 300px;
+  background-color: pink;
+}
+.vertical-reverse {
+  linear-direction: column-reverse;
+  width: 300px;
+  height: 150px;
+  background-color: #99ddaa;
+}
+.horizontal {
+  linear-direction: row;
+  width: 300px;
+  height: 100px;
+  background-color: pink;
+}
+.horizontal-reverse {
+  linear-direction: row-reverse;
+  width: 200px;
+  height: 100px;
+  background-color: #99ddaa;
+}
+.container-item {
+  linear-weight: 0;
+  width: 40px;
+  height: 40px;
+}
+.self-left {
+  linear-layout-gravity: left;
+}
+.self-right {
+  linear-layout-gravity: right;
+}
+.self-top {
+  linear-layout-gravity: top;
+}
+.self-bottom {
+  linear-layout-gravity: bottom;
+}
+.self-start {
+  linear-layout-gravity: start;
+}
+.self-end {
+  linear-layout-gravity: end;
+}
+.self-center {
+  linear-layout-gravity: center;
+}
+.self-center-vertical {
+  linear-layout-gravity: center-vertical;
+}
+.self-center-horizontal {
+  linear-layout-gravity: center-horizontal;
+}
+.self-stretch {
+  linear-layout-gravity: stretch;
+}
+.self-fill-vertical {
+  linear-layout-gravity: fill-vertical;
+}
+.self-fill-horizontal {
+  linear-layout-gravity: fill-horizontal;
+}
diff --git a/packages/web-platform/web-tests/tests/react/basic-linear-column-container-items-layout-gravity/index.jsx b/packages/web-platform/web-tests/tests/react/basic-linear-column-container-items-layout-gravity/index.jsx
new file mode 100644
index 0000000000..6424dbdb34
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/react/basic-linear-column-container-items-layout-gravity/index.jsx
@@ -0,0 +1,68 @@
+/*
+// Copyright 2024 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 { Component, root } from '@lynx-js/react';
+import './index.css';
+class Page extends Component {
+  render() {
+    return (
+      <view style='display:flex;flex-direction:row;'>
+        <view class='container vertical pink items-center'>
+          <view
+            class='container-item self-right'
+            style='background-color:red;'
+          />
+          <view
+            class='container-item self-left'
+            style='background-color:green;'
+          />
+          <view
+            class='container-item self-top'
+            style='background-color:blue;'
+          />
+          <view
+            class='container-item self-bottom'
+            style='background-color:yellow;'
+          />
+          <view
+            class='container-item self-start'
+            style='background-color:black;'
+          />
+          <view
+            class='container-item self-end'
+            style='background-color:purple;'
+          />
+        </view>
+        <view class='container vertical pink'>
+          <view
+            class='container-item self-center'
+            style='background-color:red;'
+          />
+          <view
+            class='container-item self-center-horizontal'
+            style='background-color:green;'
+          />
+          <view
+            class='container-item self-center-vertical'
+            style='background-color:blue;'
+          />
+          <view
+            class='container-item self-stretch'
+            style='background-color:yellow; width:auto;'
+          />
+          <view
+            class='container-item self-fill-vertical'
+            style='background-color:black;'
+          />
+          <view
+            class='container-item self-fill-horizontal'
+            style='background-color:purple; width:auto;'
+          />
+        </view>
+      </view>
+    );
+  }
+}
+root.render(<Page></Page>);
diff --git a/packages/web-platform/web-tests/tests/react/basic-linear-column-container-main-axis-justify-content-center/index.css b/packages/web-platform/web-tests/tests/react/basic-linear-column-container-main-axis-justify-content-center/index.css
new file mode 100644
index 0000000000..c0209ce044
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/react/basic-linear-column-container-main-axis-justify-content-center/index.css
@@ -0,0 +1,63 @@
+/*
+// Copyright 2024 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.
+*/
+.container {
+  display: linear;
+  linear-weight-sum: 0;
+}
+.vertical {
+  linear-direction: column;
+  width: 50px;
+  height: 300px;
+  background-color: pink;
+}
+.vertical-reverse {
+  linear-direction: column-reverse;
+  width: 50px;
+  height: 300px;
+  background-color: #99ddaa;
+}
+.horizontal {
+  linear-direction: row;
+  height: 50px;
+  width: 300px;
+  background-color: pink;
+}
+.horizontal-reverse {
+  linear-direction: row-reverse;
+  height: 50px;
+  width: 300px;
+  background-color: #99ddaa;
+}
+.top {
+  justify-content: top;
+}
+.bottom {
+  justify-content: bottom;
+}
+.left {
+  justify-content: left;
+}
+.right {
+  justify-content: right;
+}
+
+.center {
+  justify-content: center;
+}
+.start {
+  justify-content: start;
+}
+.end {
+  justify-content: end;
+}
+.container-item {
+  linear-weight: 0;
+  width: 50px;
+  height: 50px;
+}
+.rtl {
+  direction: lynx-rtl;
+}
diff --git a/packages/web-platform/web-tests/tests/react/basic-linear-column-container-main-axis-justify-content-center/index.jsx b/packages/web-platform/web-tests/tests/react/basic-linear-column-container-main-axis-justify-content-center/index.jsx
new file mode 100644
index 0000000000..f853fb1c7d
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/react/basic-linear-column-container-main-axis-justify-content-center/index.jsx
@@ -0,0 +1,26 @@
+/*
+// Copyright 2024 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 { Component, root } from '@lynx-js/react';
+import './index.css';
+class Page extends Component {
+  render() {
+    return (
+      <view style='display:flex; flex-direction:row;'>
+        <view class='container center vertical'>
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+        <view class='container center vertical-reverse'>
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+      </view>
+    );
+  }
+}
+root.render(<Page></Page>);
diff --git a/packages/web-platform/web-tests/tests/react/basic-linear-column-container-main-axis-justify-content-right-left-with-direction-rtl/index.css b/packages/web-platform/web-tests/tests/react/basic-linear-column-container-main-axis-justify-content-right-left-with-direction-rtl/index.css
new file mode 100644
index 0000000000..8d488e4649
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/react/basic-linear-column-container-main-axis-justify-content-right-left-with-direction-rtl/index.css
@@ -0,0 +1,30 @@
+/*
+// Copyright 2024 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.
+*/
+.container {
+  display: linear;
+  linear-cross-gravity: none;
+  linear-weight-sum: 0;
+}
+.vertical {
+  linear-direction: column;
+}
+.vertical-reverse {
+  linear-direction: column-reverse;
+}
+.left {
+  justify-content: left;
+}
+.right {
+  justify-content: right;
+}
+.container-item {
+  linear-weight: 0;
+  width: 50px;
+  height: 50px;
+}
+.rtl {
+  direction: lynx-rtl;
+}
diff --git a/packages/web-platform/web-tests/tests/react/basic-linear-column-container-main-axis-justify-content-right-left-with-direction-rtl/index.jsx b/packages/web-platform/web-tests/tests/react/basic-linear-column-container-main-axis-justify-content-right-left-with-direction-rtl/index.jsx
new file mode 100644
index 0000000000..656f52feea
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/react/basic-linear-column-container-main-axis-justify-content-right-left-with-direction-rtl/index.jsx
@@ -0,0 +1,88 @@
+/*
+// Copyright 2024 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 { Component, root } from '@lynx-js/react';
+import './index.css';
+class Page extends Component {
+  render() {
+    return (
+      <view style='display:flex; flex-direction:row;'>
+        <view
+          id='container-left'
+          class='container left vertical'
+          style='background-color:pink;width:50px;height:300px;'
+        >
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+        <view
+          id='container-right'
+          class='container right vertical'
+          style='background-color:#99ddaa;width:50px;height:300px;'
+        >
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+        <view
+          id='container-left-rtl'
+          class='container left vertical rtl'
+          style='background-color:pink;width:50px;height:300px;'
+        >
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+        <view
+          id='container-right-rtl'
+          class='container right vertical rtl'
+          style='background-color:#99ddaa;width:50px;height:300px;direction:lynx-rtl;'
+        >
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+        <view
+          id='container-left-reverse'
+          class='container left vertical-reverse'
+          style='background-color:pink;width:50px;height:300px;'
+        >
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+        <view
+          id='container-right-reverse'
+          class='container right vertical-reverse'
+          style='background-color:#99ddaa;width:50px;height:300px;'
+        >
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+        <view
+          id='container-left-rtl-reverse'
+          class='container left vertical-reverse rtl'
+          style='background-color:pink;width:50px;height:300px;'
+        >
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+        <view
+          id='container-right-rtl-reverse'
+          class='container right vertical-reverse rtl'
+          style='background-color:#99ddaa;width:50px;height:300px;'
+        >
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+      </view>
+    );
+  }
+}
+root.render(<Page></Page>);
diff --git a/packages/web-platform/web-tests/tests/react/basic-linear-column-container-main-axis-justify-content-start-end-with-direction-rtl/index.css b/packages/web-platform/web-tests/tests/react/basic-linear-column-container-main-axis-justify-content-start-end-with-direction-rtl/index.css
new file mode 100644
index 0000000000..f4c6338a0d
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/react/basic-linear-column-container-main-axis-justify-content-start-end-with-direction-rtl/index.css
@@ -0,0 +1,34 @@
+/*
+// Copyright 2024 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.
+*/
+.container {
+  display: linear;
+}
+.vertical {
+  linear-direction: column;
+}
+.vertical-reverse {
+  linear-direction: column-reverse;
+}
+.start {
+  justify-content: start;
+}
+.end {
+  justify-content: end;
+}
+.flex-start {
+  justify-content: start;
+}
+.flex-end {
+  justify-content: end;
+}
+.container-item {
+  linear-weight: 0;
+  width: 40px;
+  height: 40px;
+}
+.rtl {
+  direction: lynx-rtl;
+}
diff --git a/packages/web-platform/web-tests/tests/react/basic-linear-column-container-main-axis-justify-content-start-end-with-direction-rtl/index.jsx b/packages/web-platform/web-tests/tests/react/basic-linear-column-container-main-axis-justify-content-start-end-with-direction-rtl/index.jsx
new file mode 100644
index 0000000000..19c1883398
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/react/basic-linear-column-container-main-axis-justify-content-start-end-with-direction-rtl/index.jsx
@@ -0,0 +1,128 @@
+/*
+// Copyright 2024 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 { Component, root } from '@lynx-js/react';
+import './index.css';
+class Page extends Component {
+  render() {
+    return (
+      <>
+        <view style='display:flex; flex-direction:row;'>
+          <view
+            id='container-start'
+            class='container start vertical'
+            style='background-color:pink;height:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-end'
+            class='container end vertical'
+            style='background-color:#99ddaa;height:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-start-rtl'
+            class='container start vertical rtl'
+            style='background-color:pink;height:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-end-rtl'
+            class='container end vertical rtl'
+            style='background-color:#99ddaa;height:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+        </view>
+        <view style='display:flex; flex-direction:row;'>
+          <view
+            id='container-start-reverse'
+            class='container start vertical-reverse'
+            style='background-color:pink;height:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-end-reverse'
+            class='container end vertical-reverse'
+            style='background-color:#99ddaa;height:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-start-rtl-reverse'
+            class='container start vertical-reverse rtl'
+            style='background-color:pink;height:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-end-rtl-reverse'
+            class='container end vertical-reverse rtl'
+            style='background-color:#99ddaa;height:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-start-reverse'
+            class='container flex-start vertical-reverse'
+            style='background-color:pink;height:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-end-reverse'
+            class='container flex-end vertical-reverse'
+            style='background-color:#99ddaa;height:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-start-rtl-reverse'
+            class='container flex-start vertical-reverse rtl'
+            style='background-color:pink;height:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-end-rtl-reverse'
+            class='container flex-end vertical-reverse rtl'
+            style='background-color:#99ddaa;height:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+        </view>
+      </>
+    );
+  }
+}
+root.render(<Page></Page>);
diff --git a/packages/web-platform/web-tests/tests/react/basic-linear-row-container-items-align-self/index.css b/packages/web-platform/web-tests/tests/react/basic-linear-row-container-items-layout-gravity/index.css
similarity index 100%
rename from packages/web-platform/web-tests/tests/react/basic-linear-row-container-items-align-self/index.css
rename to packages/web-platform/web-tests/tests/react/basic-linear-row-container-items-layout-gravity/index.css
diff --git a/packages/web-platform/web-tests/tests/react/basic-linear-row-container-items-align-self/index.jsx b/packages/web-platform/web-tests/tests/react/basic-linear-row-container-items-layout-gravity/index.jsx
similarity index 100%
rename from packages/web-platform/web-tests/tests/react/basic-linear-row-container-items-align-self/index.jsx
rename to packages/web-platform/web-tests/tests/react/basic-linear-row-container-items-layout-gravity/index.jsx
diff --git a/packages/web-platform/web-tests/tests/react/basic-linear-row-container-main-axis-justify-content-right-left-with-direction-rtl/index.css b/packages/web-platform/web-tests/tests/react/basic-linear-row-container-main-axis-justify-content-right-left-with-direction-rtl/index.css
new file mode 100644
index 0000000000..96a4159cee
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/react/basic-linear-row-container-main-axis-justify-content-right-left-with-direction-rtl/index.css
@@ -0,0 +1,30 @@
+/*
+// Copyright 2024 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.
+*/
+.container {
+  display: linear;
+  linear-cross-gravity: none;
+  linear-weight-sum: 0;
+}
+.row {
+  linear-direction: row;
+}
+.row-reverse {
+  linear-direction: row-reverse;
+}
+.left {
+  justify-content: left;
+}
+.right {
+  justify-content: right;
+}
+.container-item {
+  linear-weight: 0;
+  width: 50px;
+  height: 50px;
+}
+.rtl {
+  direction: lynx-rtl;
+}
diff --git a/packages/web-platform/web-tests/tests/react/basic-linear-row-container-main-axis-justify-content-right-left-with-direction-rtl/index.jsx b/packages/web-platform/web-tests/tests/react/basic-linear-row-container-main-axis-justify-content-right-left-with-direction-rtl/index.jsx
new file mode 100644
index 0000000000..e64f401777
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/react/basic-linear-row-container-main-axis-justify-content-right-left-with-direction-rtl/index.jsx
@@ -0,0 +1,88 @@
+/*
+// Copyright 2024 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 { Component, root } from '@lynx-js/react';
+import './index.css';
+class Page extends Component {
+  render() {
+    return (
+      <view style='display:flex; flex-direction:column;'>
+        <view
+          id='container-left'
+          class='container left row'
+          style='background-color:pink;width:50px;width:300px;'
+        >
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+        <view
+          id='container-right'
+          class='container right row'
+          style='background-color:#99ddaa;width:50px;width:300px;'
+        >
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+        <view
+          id='container-left-rtl'
+          class='container left row rtl'
+          style='background-color:pink;width:50px;width:300px;'
+        >
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+        <view
+          id='container-right-rtl'
+          class='container right row rtl'
+          style='background-color:#99ddaa;width:50px;width:300px;'
+        >
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+        <view
+          id='container-left-reverse'
+          class='container left row-reverse'
+          style='background-color:pink;width:50px;width:300px;'
+        >
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+        <view
+          id='container-right-reverse'
+          class='container right row-reverse'
+          style='background-color:#99ddaa;width:50px;width:300px;'
+        >
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+        <view
+          id='container-left-rtl-reverse'
+          class='container left row-reverse rtl'
+          style='background-color:pink;width:50px;width:300px;'
+        >
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+        <view
+          id='container-right-rtl-reverse'
+          class='container right row-reverse rtl'
+          style='background-color:#99ddaa;width:50px;width:300px;'
+        >
+          <view class='container-item' style='background-color:red;' />
+          <view class='container-item' style='background-color:green;' />
+          <view class='container-item' style='background-color:blue;' />
+        </view>
+      </view>
+    );
+  }
+}
+root.render(<Page></Page>);
diff --git a/packages/web-platform/web-tests/tests/react/basic-linear-row-container-main-axis-justify-content-start-end-with-direction-rtl/index.css b/packages/web-platform/web-tests/tests/react/basic-linear-row-container-main-axis-justify-content-start-end-with-direction-rtl/index.css
new file mode 100644
index 0000000000..819e659f9c
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/react/basic-linear-row-container-main-axis-justify-content-start-end-with-direction-rtl/index.css
@@ -0,0 +1,34 @@
+/*
+// Copyright 2024 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.
+*/
+.container {
+  display: linear;
+}
+.row {
+  linear-direction: row;
+}
+.row-reverse {
+  linear-direction: row-reverse;
+}
+.start {
+  justify-content: start;
+}
+.end {
+  justify-content: end;
+}
+.flex-start {
+  justify-content: start;
+}
+.flex-end {
+  justify-content: end;
+}
+.container-item {
+  linear-weight: 0;
+  width: 40px;
+  height: 40px;
+}
+.rtl {
+  direction: lynx-rtl;
+}
diff --git a/packages/web-platform/web-tests/tests/react/basic-linear-row-container-main-axis-justify-content-start-end-with-direction-rtl/index.jsx b/packages/web-platform/web-tests/tests/react/basic-linear-row-container-main-axis-justify-content-start-end-with-direction-rtl/index.jsx
new file mode 100644
index 0000000000..c52d209c35
--- /dev/null
+++ b/packages/web-platform/web-tests/tests/react/basic-linear-row-container-main-axis-justify-content-start-end-with-direction-rtl/index.jsx
@@ -0,0 +1,128 @@
+/*
+// Copyright 2024 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 { Component, root } from '@lynx-js/react';
+import './index.css';
+class Page extends Component {
+  render() {
+    return (
+      <>
+        <view style='display:flex; flex-direction:column;'>
+          <view
+            id='container-start'
+            class='container start row'
+            style='background-color:pink;width:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-end'
+            class='container end row'
+            style='background-color:#99ddaa;width:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-start-rtl'
+            class='container start row rtl'
+            style='background-color:pink;width:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-end-rtl'
+            class='container end row rtl'
+            style='background-color:#99ddaa;width:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+        </view>
+        <view style='display:flex; flex-direction:column;'>
+          <view
+            id='container-start-reverse'
+            class='container start row-reverse'
+            style='background-color:pink;width:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-end-reverse'
+            class='container end row-reverse'
+            style='background-color:#99ddaa;width:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-start-rtl-reverse'
+            class='container start row-reverse rtl'
+            style='background-color:pink;width:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-end-rtl-reverse'
+            class='container end row-reverse rtl'
+            style='background-color:#99ddaa;width:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-start-reverse'
+            class='container flex-start row-reverse'
+            style='background-color:pink;width:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-end-reverse'
+            class='container flex-end row-reverse'
+            style='background-color:#99ddaa;width:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-start-rtl-reverse'
+            class='container flex-start row-reverse rtl'
+            style='background-color:pink;width:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+          <view
+            id='container-end-rtl-reverse'
+            class='container flex-end row-reverse rtl'
+            style='background-color:#99ddaa;width:300px;'
+          >
+            <view class='container-item' style='background-color:red;' />
+            <view class='container-item' style='background-color:green;' />
+            <view class='container-item' style='background-color:blue;' />
+          </view>
+        </view>
+      </>
+    );
+  }
+}
+root.render(<Page></Page>);
diff --git a/packages/web-platform/web-worker-rpc/tsconfig.json b/packages/web-platform/web-worker-rpc/tsconfig.json
index 7121eb89de..f68819d353 100644
--- a/packages/web-platform/web-worker-rpc/tsconfig.json
+++ b/packages/web-platform/web-worker-rpc/tsconfig.json
@@ -5,7 +5,6 @@
     "rootDir": "./src",
     "outDir": "./dist",
     "lib": ["ESNext", "WebWorker"],
-    "verbatimModuleSyntax": true,
     "isolatedDeclarations": true,
   },
   "include": ["src"],
diff --git a/packages/web-platform/web-worker-runtime/tsconfig.json b/packages/web-platform/web-worker-runtime/tsconfig.json
index a2143ace31..db7f63cf82 100644
--- a/packages/web-platform/web-worker-runtime/tsconfig.json
+++ b/packages/web-platform/web-worker-runtime/tsconfig.json
@@ -5,7 +5,6 @@
     "rootDir": "./src",
     "outDir": "./dist",
     "lib": ["ESNext", "WebWorker"],
-    "verbatimModuleSyntax": true,
   },
   "include": ["src"],
   "references": [