fix: update rpx unit calculation and support container-based viewport…

.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

.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

packages/web-platform/web-core-e2e/tests/reactlynx.spec.ts

@@ -21,7 +21,7 @@
     ReturnType<typeof expect<Page>>['toHaveScreenshot']
   >[0],
 ) => {
   await expect(page).toHaveScreenshot([
     `${caseName}`,
     `${subcaseName}`,
     `${label}.png`,
@@ -394,6 +394,7 @@
       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 @@
       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 @@
       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.width = '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);
@@ -1382,7 +1402,7 @@
         document.querySelector('lynx-view')!.remove();
       });
       await wait(50);
       expect(message).toContain('fin');
       expect(currentWorkerCount - page.workers().length).toStrictEqual(1);
     });
 
@@ -1870,7 +1890,7 @@
           .sendGlobalEvent('event-test', ['change']);
       });
       await wait(200);
       await expect(target).toHaveCSS(
         'background-color',
         'rgb(0, 128, 0)',
       ); // green;
@@ -2645,7 +2665,7 @@
         await goto(page, title);
         await expect(
           await page.locator('#result'),
         ).toHaveCSS(
           'background-color',
           'rgb(0, 128, 0)',
         );
@@ -2974,7 +2994,7 @@
           });
           await wait(1000);
           const lastEvent = eventDetails.pop();
           expect(lastEvent.index).toBe(1);
           expect(lastEvent.isDragged).not.toBe(undefined);
         },
       );
@@ -3114,7 +3134,7 @@
 
           await page.getByTestId('last').click();
           await wait(1000);
           expect(changeCalledCount).toBe(1);
           if (browserName !== 'webkit') {
             expect(currentIndex).toBe(5);
           }
@@ -3185,7 +3205,7 @@
         await page.locator('input').click({ force: true });
         await wait(100);
         const result = await page.locator('.result').first().innerText();
         expect(result).toBe('bindfocus');
       });
       // input/bindfocus test-case end
 
@@ -3289,7 +3309,7 @@
             inputDom?.setSelectionRange(2, 5);
           });
           const result = await page.locator('.result').first().innerText();
           expect(result).toBe('2-5');
         },
       );
       test(

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;