From 4efe1b4af922aedd51236d5825d94677f35ec73f Mon Sep 17 00:00:00 2001
From: pupiltong <12288479+PupilTong@users.noreply.github.com>
Date: Thu, 16 Apr 2026 18:40:03 +0800
Subject: [PATCH 1/2] fix: update rpx unit calculation and support
 container-based viewport units for transformVH

---
 .changeset/red-pears-kiss.md                  |  5 +++
 .changeset/warm-zoos-prove.md                 |  5 +++
 .../web-core-e2e/tests/reactlynx.spec.ts      | 20 +++++++++++
 packages/web-platform/web-core/css/index.css  | 35 ++++---------------
 4 files changed, 37 insertions(+), 28 deletions(-)
 create mode 100644 .changeset/red-pears-kiss.md
 create mode 100644 .changeset/warm-zoos-prove.md

diff --git a/.changeset/red-pears-kiss.md b/.changeset/red-pears-kiss.md
new file mode 100644
index 0000000000..ec448fd976
--- /dev/null
+++ b/.changeset/red-pears-kiss.md
@@ -0,0 +1,5 @@
+---
+"@lynx-js/web-core": patch
+---
+
+fix: transformVH not work with cqw unit as the base length
diff --git a/.changeset/warm-zoos-prove.md b/.changeset/warm-zoos-prove.md
new file mode 100644
index 0000000000..b137199420
--- /dev/null
+++ b/.changeset/warm-zoos-prove.md
@@ -0,0 +1,5 @@
+---
+"@lynx-js/web-core": patch
+---
+
+fix: the default value of rpx is supposed to be 1/750 cqw
diff --git a/packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts b/packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts
index bc4fe738e3..ced3ac1f4c 100644
--- a/packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts
+++ b/packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts
@@ -394,6 +394,7 @@ test.describe('reactlynx3 tests', () => {
       const lynxView = await page.locator('lynx-view');
       await lynxView.evaluate((node) => {
         node.style.width = '50px';
+        node.style.setProperty('--rpx-unit', '1cqw');
       });
       const target = await page.locator('#target');
       await expect(target).toHaveCSS('height', '10px'); // 20cqw, 50 / 100 * 20 = 10px
@@ -406,6 +407,7 @@ test.describe('reactlynx3 tests', () => {
       const lynxView = await page.locator('lynx-view');
       await lynxView.evaluate((node) => {
         node.style.width = '50px';
+        node.style.setProperty('--rpx-unit', '1cqw');
       });
       const target = await page.locator('#target');
       await expect(target).toHaveCSS('height', '10px'); // 20cqw, 50 / 100 * 20 = 10px
@@ -450,7 +452,25 @@ test.describe('reactlynx3 tests', () => {
       await wait(500); // Wait for the reload to rebuild the CSS properly
       await expect(target).not.toHaveCSS('width', '25px');
       await expect(target).not.toHaveCSS('height', '50px');
+
+      // now make sure the cqw/cqh work
+      await lynxView.evaluate((node: any) => {
+        node.transformVW = true;
+        node.transformVH = true;
+        node.style.height = '500px';
+        node.style.weight = '500px';
+        node.style.minHeight = '500px';
+        node.style.minWidth = '500px';
+        node.style.setProperty('--vh-unit', '1cqh');
+        node.style.setProperty('--vw-unit', '1cqw');
+        node.reload();
+      });
+      await wait(500); // Wait for the reload to rebuild the CSS properly
+
+      await expect(target).toHaveCSS('width', '250px');
+      await expect(target).toHaveCSS('height', '250px');
     });
+
     test('basic-image', async ({ page }, { title }) => {
       await goto(page, title);
       await wait(100);
diff --git a/packages/web-platform/web-core/css/index.css b/packages/web-platform/web-core/css/index.css
index d73bf259ef..c58cf6fbaf 100644
--- a/packages/web-platform/web-core/css/index.css
+++ b/packages/web-platform/web-core/css/index.css
@@ -10,10 +10,14 @@ lynx-view {
   width: 100%;
   container-name: lynx-view;
   container-type: inline-size;
-  --rpx-unit: 1cqw;
+  --rpx-unit: calc(1cqw / 7.5);
   --ppx-unit: 1cqw;
-  --vw-unit: 1vw;
-  --vh-unit: 1vh;
+  --vw-unit: 1cqw;
+  --vh-unit: 1cqh;
+}
+
+lynx-view[transform-vh] {
+  container-type: size;
 }
 
 lynx-view[ssr] {
@@ -40,31 +44,6 @@ lynx-view::part(page) {
   --vh-unit: inherit;
 }
 
-@property --rem-unit {
-  syntax: "<length>";
-  inherits: true;
-}
-
-@property --rpx-unit {
-  syntax: "<length>";
-  inherits: true;
-}
-
-@property --ppx-unit {
-  syntax: "<length>";
-  inherits: true;
-}
-
-@property --vw-unit {
-  syntax: "<length>";
-  inherits: true;
-}
-
-@property --vh-unit {
-  syntax: "<length>";
-  inherits: true;
-}
-
 @property --lynx-display {
   syntax: "linear | flex";
   inherits: false;

From c792e408513e61645c8b628c4dafd4a6f46e9880 Mon Sep 17 00:00:00 2001
From: pupiltong <12288479+PupilTong@users.noreply.github.com>
Date: Mon, 20 Apr 2026 17:52:56 +0800
Subject: [PATCH 2/2] + typo

---
 packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts b/packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts
index ced3ac1f4c..c93d3eae21 100644
--- a/packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts
+++ b/packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts
@@ -458,7 +458,7 @@ test.describe('reactlynx3 tests', () => {
         node.transformVW = true;
         node.transformVH = true;
         node.style.height = '500px';
-        node.style.weight = '500px';
+        node.style.width = '500px';
         node.style.minHeight = '500px';
         node.style.minWidth = '500px';
         node.style.setProperty('--vh-unit', '1cqh');