chore: add more tests for fp-only-test

.changeset/bright-animals-stand.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/offscreen-document": patch
+---
+
+fix: remove all children after the innerHTML setter is called

.github/workflows/test.yml

@@ -232,6 +232,7 @@ jobs:
       - code-style-check
       - playwright-linux
       - playwright-linux-all-on-ui
+      - playwright-linux-fp-only
       - test-api
       - test-publish
       - test-react

packages/web-platform/offscreen-document/src/webworker/OffscreenDocument.ts

@@ -6,7 +6,11 @@ import {
   type ElementOperation,
 } from '../types/ElementOperation.js';
 import { styleMapSymbol } from './OffscreenCSSStyleDeclaration.js';
-import { _attributes, OffscreenElement } from './OffscreenElement.js';
+import {
+  _attributes,
+  innerHTML,
+  OffscreenElement,
+} from './OffscreenElement.js';
 import {
   eventPhase,
   OffscreenEvent,
@@ -161,7 +165,7 @@ function getInnerHTMLImpl(
   }
 
   const cssText = Array.from(element.style[styleMapSymbol].entries())
-    .map(([key, value]) => `${key}: ${value};`).join(';');
+    .map(([key, value]) => `${key}: ${value};`).join('');
   if (cssText) {
     buffer.push(' style="', cssText, '"');
   }
@@ -174,13 +178,17 @@ function getInnerHTMLImpl(
       : templateImpl;
     buffer.push('<template shadowrootmode="open">', template, '</template>');
   }
-  for (const child of element.children) {
-    getInnerHTMLImpl(
-      buffer,
-      child as OffscreenElement,
-      shadowrootTemplates,
-      tagTransformMap,
-    );
+  if (element[innerHTML]) {
+    buffer.push(element[innerHTML]);
+  } else {
+    for (const child of element.children) {
+      getInnerHTMLImpl(
+        buffer,
+        child as OffscreenElement,
+        shadowrootTemplates,
+        tagTransformMap,
+      );
+    }
   }
   buffer.push('</');
   buffer.push(tagName);

packages/web-platform/offscreen-document/src/webworker/OffscreenElement.ts

@@ -12,10 +12,12 @@ import { OffscreenNode, uniqueId } from './OffscreenNode.js';
 
 export const ancestorDocument = Symbol('ancestorDocument');
 export const _attributes = Symbol('_attributes');
+export const innerHTML = Symbol('innerHTML');
 const _style = Symbol('_style');
 export class OffscreenElement extends OffscreenNode {
   private [_style]?: OffscreenCSSStyleDeclaration;
   private readonly [_attributes]: Record<string, string> = {};
+  public [innerHTML]: string = '';
 
   /**
    * @private
@@ -141,5 +143,9 @@ export class OffscreenElement extends OffscreenNode {
       text,
       uid: this[uniqueId],
     });
+    for (const child of this.children) {
+      (child as OffscreenElement).remove();
+    }
+    this[innerHTML] = text;
   }
 }

packages/web-platform/web-core-server/src/createLynxView.ts

@@ -1,5 +1,6 @@
 import {
   flushElementTreeEndpoint,
+  inShadowRootStyles,
   mainThreadStartEndpoint,
   type MainThreadStartConfigs,
 } from '@lynx-js/web-constants';
@@ -38,6 +39,7 @@ interface LynxViewConfig extends
   >;
   overrideTagTransformMap?: Record<string, string>;
   autoSize?: boolean;
+  lynxViewStyle?: string;
 }
 
 const builtinElementTemplates = {
@@ -78,6 +80,7 @@ export async function createLynxView(
     hydrateUrl,
     autoSize,
     injectStyles,
+    lynxViewStyle,
   } = config;
 
   const mainToUIChannel = new MessageChannel();
@@ -127,9 +130,9 @@ export async function createLynxView(
     return `
     <lynx-view url="${hydrateUrl}" ssr ${
       autoSize ? 'height="auto" width="auto"' : ''
-    }>
+    } ${lynxViewStyle ? `style="${lynxViewStyle}"` : ''}>
       <template shadowrootmode="open">
-        <style>${injectStyles}</style>
+        <style>${injectStyles}\n${inShadowRootStyles.join('\n')}</style>
         ${innerShadowRootHTML}
       </template>
     </lynx-view>`;

packages/web-platform/web-tests/server.js

@@ -20,13 +20,14 @@ export async function SSR(rawTemplate, caseName, projectName = 'fp-only') {
       pixelWidth: 375,
     },
     tagMap: {},
-    initData: {},
+    initData: { mockData: 'mockData' },
     globalProps: {},
     template: rawTemplate,
     templateName: caseName,
     hydrateUrl: `/dist/${caseName}/index.web.json`,
     injectStyles: `@import url("/${projectName}.css");`,
     autoSize: true,
+    lynxViewStyle: 'width:100vw; max-width: 500px;',
   });
   const ssrHtml = await lynxView.renderToString();
   return ssrHtml;

packages/web-platform/web-tests/tests/fp-only.spec.ts

@@ -44,12 +44,205 @@ const goto = async (
 };
 
 test.describe('SSR no Javascript tests', () => {
-  test('basic-pink-rect', async ({ page }, { title }) => {
-    await goto(page, title);
-    await wait(100);
-    const target = await page.locator('#target');
-    await expect(target).toHaveCSS('height', '100px');
-    await expect(target).toHaveCSS('width', '100px');
-    await expect(target).toHaveCSS('background-color', 'rgb(255, 192, 203)');
+  test.beforeEach(({ browserName }) => {
+    test.skip(browserName === 'firefox', 'firefox does not support @container');
+  });
+  test.describe('basic', () => {
+    test('api-initdata', async ({ page }, { title }) => {
+      await goto(page, title);
+      await wait(100);
+      await expect(page.locator('#target')).toHaveCSS(
+        'background-color',
+        'rgb(0, 128, 0)',
+      ); // green;
+    });
+    test('basic-pink-rect', async ({ page }, { title }) => {
+      await goto(page, title);
+      await wait(100);
+      const target = await page.locator('#target');
+      await expect(target).toHaveCSS('height', '100px');
+      await expect(target).toHaveCSS('width', '100px');
+      await expect(target).toHaveCSS('background-color', 'rgb(255, 192, 203)');
+    });
+    test('basic-class-selector', async ({ page }, { title }) => {
+      await goto(page, title);
+      await wait(100);
+      const computedStyle = await page.locator('#target').evaluate((dom) => {
+        const style = getComputedStyle(dom);
+        const height = style.height;
+        const width = style.width;
+        const backgroundColor = style.backgroundColor;
+        return {
+          height,
+          width,
+          backgroundColor,
+        };
+      });
+      expect(computedStyle.height).toBe('100px');
+      expect(computedStyle.width).toBe('100px');
+      expect(computedStyle.backgroundColor).toBe('rgb(255, 192, 203)');
+    });
+    test.fixme('basic-globalProps', async ({ page }, { title }) => {
+      await goto(page, title);
+      await wait(100);
+      expect(await page.locator('#target').getAttribute('style')).toContain(
+        'pink',
+      );
+    });
+
+    test.fixme('basic-dataprocessor', async ({ page }, { title }) => {
+      await goto(page, title);
+      await wait(100);
+      expect(await page.locator('#target').getAttribute('style')).toContain(
+        'green',
+      );
+    });
+    test('basic-list-rendering', async ({ page }, { title }) => {
+      await goto(page, title);
+      await wait(100);
+      await expect(
+        page.locator('#pink'),
+      ).toHaveAttribute('style', /pink/g);
+      await expect(
+        page.locator('#orange'),
+      ).toHaveAttribute('style', /orange/g);
+      await expect(
+        page.locator('#wheat'),
+      ).toHaveAttribute('style', /wheat/g);
+    });
+
+    test(
+      'basic-wrapper-element-do-not-impact-layout',
+      async ({ page }, { title }) => {
+        await goto(page, title);
+        await wait(100);
+        await expect(
+          page.locator('#pink'),
+        ).toHaveCSS('width', '60px');
+        await expect(
+          page.locator('#parent > * > #orange'),
+        ).toHaveCSS('width', '60px');
+        await expect(
+          page.locator('#parent > * > #wheat'),
+        ).toHaveCSS('width', '60px');
+      },
+    );
+    test('basic-style-combinator', async ({ page }, { title }) => {
+      await goto(page, title);
+      await wait(100);
+      const target = page.locator('#target');
+      await expect(target).toHaveCSS('background-color', 'rgb(0, 128, 0)'); // green
+    });
+    test('basic-style-root-selector', async ({ page }, { title }) => {
+      await goto(page, title);
+      await wait(100);
+      const target = page.locator('#target');
+      await expect(target).toHaveCSS('background-color', 'rgb(0, 128, 0)'); // green
+    });
+    test('basic-image', async ({ page }, { title }) => {
+      await goto(page, title);
+      await wait(100);
+      const target = await page.locator('#target');
+      await expect(target).toHaveCSS('height', '100px');
+      await expect(target).toHaveCSS('width', '100px');
+    });
+    test('basic-scroll-view', async ({ page }, { title }) => {
+      await goto(page, title);
+      await wait(100);
+      const target = await page.locator('#target');
+      await expect(target).toHaveCSS('height', '100px');
+      await expect(target).toHaveCSS('width', '100px');
+      await expect(target).toHaveCSS('background-color', 'rgb(255, 192, 203)');
+    });
+  });
+
+  test.describe('basic-css', () => {
+    test('basic-css-asset-in-css', async ({ page }, { title }) => {
+      await goto(page, title);
+      await wait(500);
+      await diffScreenShot(page, title, 'show-lynx-logo');
+    });
+    test('basic-css-var', async ({ page }, { title }) => {
+      await goto(page, title);
+      await wait(100);
+      const computedStyle = await page.locator('#target').evaluate((dom) => {
+        const style = getComputedStyle(dom);
+        const backgroundColor = style.backgroundColor;
+        return {
+          backgroundColor,
+        };
+      });
+      expect(computedStyle.backgroundColor).toBe('rgb(255, 192, 203)');
+    });
+    test('basic-color-not-inherit', async ({ page }, { title }) => {
+      await goto(page, title);
+      await wait(100);
+      await expect(page.locator('#target')).toHaveCSS('color', 'rgb(0, 0, 0)');
+    });
+  });
+  test.describe('configs', () => {
+    test(
+      'config-css-remove-scope-false',
+      async ({ page }, { title }) => {
+        await goto(page, title);
+        await wait(100);
+        await expect(
+          page.locator('#index'),
+        ).toHaveCSS('background-color', 'rgb(255, 0, 0)');
+        await expect(
+          page.locator('#sub'),
+        ).toHaveCSS('background-color', 'rgb(0, 128, 0)');
+      },
+    );
+    test(
+      'config-css-remove-scope-true',
+      async ({ page }, { title }) => {
+        await goto(page, title);
+        await wait(100);
+        await expect(
+          page.locator('#index'),
+        ).toHaveCSS('background-color', 'rgb(0, 128, 0)');
+        await expect(
+          page.locator('#sub'),
+        ).toHaveCSS('background-color', 'rgb(0, 128, 0)');
+      },
+    );
+    test(
+      'config-css-selector-false-multi-level-selector',
+      async ({ page }, { title }) => {
+        await goto(page, title);
+        await wait(100);
+        const target = page.locator('#target');
+        await expect(target).toHaveCSS(
+          'background-color',
+          'rgb(255, 192, 203)',
+        ); // pink
+      },
+    );
+    test(
+      'config-css-selector-false-type-selector',
+      async ({ page }, { title }) => {
+        await goto(page, title);
+        await wait(100);
+        const target = page.locator('#target');
+        await expect(target).toHaveCSS('background-color', 'rgb(255, 255, 0)'); // yellow
+        await expect(target).toHaveCSS('width', '100px');
+        await expect(target).toHaveCSS('height', '100px');
+      },
+    );
+
+    test(
+      'config-css-default-overflow-visible-unset',
+      async ({ page }, { title }) => {
+        await goto(page, title);
+        await diffScreenShot(
+          page,
+          title,
+          'index',
+        );
+      },
+    );
+  });
+  test.describe('elements', () => {
   });
 });

packages/web-platform/web-tests/tests/server.vitest.spec.ts

@@ -5,9 +5,6 @@ import { genTemplate } from '../server.js';
 describe('server-tests', () => {
   for (
     const testName of [
-      'basic-performance-div-10000',
-      'basic-performance-div-1000',
-      'basic-performance-div-100',
       'basic-performance-div-10',
       'basic-performance-nest-level-100',
     ]