diff --git a/.changeset/bright-animals-stand.md b/.changeset/bright-animals-stand.md
new file mode 100644
index 0000000000..5b3c63c57d
--- /dev/null
+++ b/.changeset/bright-animals-stand.md
@@ -0,0 +1,5 @@
+---
+"@lynx-js/offscreen-document": patch
+---
+
+fix: remove all children after the innerHTML setter is called
diff --git a/.changeset/shiny-eyes-follow.md b/.changeset/shiny-eyes-follow.md
new file mode 100644
index 0000000000..2c7dab0fa3
--- /dev/null
+++ b/.changeset/shiny-eyes-follow.md
@@ -0,0 +1,9 @@
+---
+"@lynx-js/web-elements": patch
+---
+
+fix: x-list should observe property list-type change.
+
+Before this commit, list-type only works when it was first assigned.
+
+use `requestAnimationFrame` instead of `queueMicrotask` to layoutListItem, this is because it may cause crashes in webkit.
diff --git a/.changeset/stale-zebras-add.md b/.changeset/stale-zebras-add.md
deleted file mode 100644
index 20f935e48b..0000000000
--- a/.changeset/stale-zebras-add.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@lynx-js/offscreen-document": patch
----
-
-revert get() innerHTML
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index d82b996a37..42d998e6ad 100644
--- a/.github/workflows/test.yml
+++ b/.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
diff --git a/packages/web-platform/offscreen-document/src/webworker/OffscreenDocument.ts b/packages/web-platform/offscreen-document/src/webworker/OffscreenDocument.ts
index a6834c83c8..222e939b8c 100644
--- a/packages/web-platform/offscreen-document/src/webworker/OffscreenDocument.ts
+++ b/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, '');
}
- 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(' = {};
+ 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;
}
}
diff --git a/packages/web-platform/web-core-server/src/createLynxView.ts b/packages/web-platform/web-core-server/src/createLynxView.ts
index 98455364f7..48988a0849 100644
--- a/packages/web-platform/web-core-server/src/createLynxView.ts
+++ b/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;
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 `
+ } ${lynxViewStyle ? `style="${lynxViewStyle}"` : ''}>
-
+
${innerShadowRootHTML}
`;
diff --git a/packages/web-platform/web-elements/src/XList/XListAttributes.ts b/packages/web-platform/web-elements/src/XList/XListAttributes.ts
index f299520e0f..8d91ce96f5 100644
--- a/packages/web-platform/web-elements/src/XList/XListAttributes.ts
+++ b/packages/web-platform/web-elements/src/XList/XListAttributes.ts
@@ -11,8 +11,6 @@ import {
} from '@lynx-js/web-elements-reactive';
import type { XList } from './XList.js';
-const WATERFALL_SLOT = 'waterfall-slot';
-
export class XListAttributes
implements InstanceType>
{
diff --git a/packages/web-platform/web-elements/src/XList/XListWaterfall.ts b/packages/web-platform/web-elements/src/XList/XListWaterfall.ts
index fd9a55fdc3..7eb40a131e 100644
--- a/packages/web-platform/web-elements/src/XList/XListWaterfall.ts
+++ b/packages/web-platform/web-elements/src/XList/XListWaterfall.ts
@@ -4,8 +4,8 @@
// LICENSE file in the root directory of this source tree.
*/
import {
- boostedQueueMicrotask,
genDomGetter,
+ registerAttributeHandler,
type AttributeReactiveClass,
} from '@lynx-js/web-elements-reactive';
import type { XList } from './XList.js';
@@ -16,7 +16,7 @@ const WATERFALL_STYLE = 'waterfall-style';
export class XListWaterfall
implements InstanceType>
{
- static observedAttributes = [];
+ static observedAttributes = ['list-type'];
#dom: XList;
#getListContainer = genDomGetter(() => this.#dom.shadowRoot!, '#content');
@@ -182,7 +182,7 @@ export class XListWaterfall
this.#resizeObserver = new ResizeObserver(() => {
// may cause: Resizeobserver loop completed with undelivered notifications
// https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#observation_errors
- boostedQueueMicrotask(() => {
+ requestAnimationFrame(() => {
this.#layoutListItem(
spanCount,
isScrollVertical,
@@ -194,8 +194,9 @@ export class XListWaterfall
});
};
- connectedCallback() {
- if (this.#dom.getAttribute('list-type') === 'waterfall') {
+ @registerAttributeHandler('list-type', true)
+ #handlerListType(newVal: string | null) {
+ if (newVal === 'waterfall') {
const spanCount = parseFloat(
this.#dom.getAttribute('span-count')
|| this.#dom.getAttribute('column-count')
@@ -227,6 +228,17 @@ export class XListWaterfall
childList: true,
});
}
+ } else {
+ this.#resizeObserver?.disconnect();
+ this.#resizeObserver = undefined;
+ this.#childrenObserver?.disconnect();
+ this.#childrenObserver = undefined;
+ for (let i = 0; i < this.#dom.children.length; i++) {
+ const listItem = this.#dom.children[i] as HTMLElement;
+ listItem.removeAttribute('slot');
+ }
+ this.#dom.shadowRoot?.querySelector(`slot[name=${WATERFALL_SLOT}]`)
+ ?.remove();
}
}
}
diff --git a/packages/web-platform/web-elements/src/XList/x-list.css b/packages/web-platform/web-elements/src/XList/x-list.css
index fab0e4241f..65efa7d210 100644
--- a/packages/web-platform/web-elements/src/XList/x-list.css
+++ b/packages/web-platform/web-elements/src/XList/x-list.css
@@ -59,6 +59,7 @@ list-item {
display: none;
content-visibility: auto;
flex: 0 0 auto !important;
+ position: static;
}
x-list > list-item, x-list > lynx-wrapper > list-item {
diff --git a/packages/web-platform/web-tests/server.js b/packages/web-platform/web-tests/server.js
index 7f1d52a647..34042622e3 100644
--- a/packages/web-platform/web-tests/server.js
+++ b/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;
diff --git a/packages/web-platform/web-tests/tests/__snapshots__/server.vitest.spec.ts.snap b/packages/web-platform/web-tests/tests/__snapshots__/server.vitest.spec.ts.snap
index da7d41b816..d879810a04 100644
--- a/packages/web-platform/web-tests/tests/__snapshots__/server.vitest.spec.ts.snap
+++ b/packages/web-platform/web-tests/tests/__snapshots__/server.vitest.spec.ts.snap
@@ -2,49 +2,33 @@
exports[`server-tests > basic-performance-div-10 1`] = `
"
-
+
-
-
-
- "
-`;
-
-exports[`server-tests > basic-performance-div-100 1`] = `
-"
-
-
-
-
-
- "
-`;
-
-exports[`server-tests > basic-performance-div-1000 1`] = `
-"
-
-
-
-
-
- "
-`;
-
-exports[`server-tests > basic-performance-div-10000 1`] = `
-"
-
-
-
-
+
+
"
`;
exports[`server-tests > basic-performance-nest-level-100 1`] = `
"
-
+
-
+
"
diff --git a/packages/web-platform/web-tests/tests/fp-only.spec.ts b/packages/web-platform/web-tests/tests/fp-only.spec.ts
index 9dbecbebfa..85de8a2541 100644
--- a/packages/web-platform/web-tests/tests/fp-only.spec.ts
+++ b/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', () => {
});
});
diff --git a/packages/web-platform/web-tests/tests/fp-only.spec.ts-snapshots/basic-css-asset-in-css/show-lynx-logo/index-chromium-linux.png b/packages/web-platform/web-tests/tests/fp-only.spec.ts-snapshots/basic-css-asset-in-css/show-lynx-logo/index-chromium-linux.png
new file mode 100644
index 0000000000..69091acd06
Binary files /dev/null and b/packages/web-platform/web-tests/tests/fp-only.spec.ts-snapshots/basic-css-asset-in-css/show-lynx-logo/index-chromium-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/fp-only.spec.ts-snapshots/basic-css-asset-in-css/show-lynx-logo/index-webkit-linux.png b/packages/web-platform/web-tests/tests/fp-only.spec.ts-snapshots/basic-css-asset-in-css/show-lynx-logo/index-webkit-linux.png
new file mode 100644
index 0000000000..c1f75c2793
Binary files /dev/null and b/packages/web-platform/web-tests/tests/fp-only.spec.ts-snapshots/basic-css-asset-in-css/show-lynx-logo/index-webkit-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/fp-only.spec.ts-snapshots/config-css-default-overflow-visible-unset/index/index-chromium-linux.png b/packages/web-platform/web-tests/tests/fp-only.spec.ts-snapshots/config-css-default-overflow-visible-unset/index/index-chromium-linux.png
new file mode 100644
index 0000000000..3ff928abd7
Binary files /dev/null and b/packages/web-platform/web-tests/tests/fp-only.spec.ts-snapshots/config-css-default-overflow-visible-unset/index/index-chromium-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/fp-only.spec.ts-snapshots/config-css-default-overflow-visible-unset/index/index-webkit-linux.png b/packages/web-platform/web-tests/tests/fp-only.spec.ts-snapshots/config-css-default-overflow-visible-unset/index/index-webkit-linux.png
new file mode 100644
index 0000000000..542232ef37
Binary files /dev/null and b/packages/web-platform/web-tests/tests/fp-only.spec.ts-snapshots/config-css-default-overflow-visible-unset/index/index-webkit-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/server.vitest.spec.ts b/packages/web-platform/web-tests/tests/server.vitest.spec.ts
index 95a12d4b68..25e260c6fc 100644
--- a/packages/web-platform/web-tests/tests/server.vitest.spec.ts
+++ b/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',
]
diff --git a/packages/web-platform/web-tests/tests/web-elements.spec.ts b/packages/web-platform/web-tests/tests/web-elements.spec.ts
index 324d876fb5..6f4a974226 100644
--- a/packages/web-platform/web-tests/tests/web-elements.spec.ts
+++ b/packages/web-platform/web-tests/tests/web-elements.spec.ts
@@ -2351,6 +2351,34 @@ test.describe('web-elements test suite', () => {
await gotoWebComponentPage(page, title);
await diffScreenShot(page, title, 'index');
});
+ test('list-type-change', async ({ page }) => {
+ await gotoWebComponentPage(page, 'x-list/basic-waterfall');
+ await diffScreenShot(page, 'x-list/list-type-change', 'index');
+ await page.evaluate(() => {
+ document.querySelector('x-list')?.setAttribute(
+ 'list-type',
+ 'single',
+ );
+ });
+ await wait(100);
+ await diffScreenShot(page, 'x-list/list-type-change', 'single');
+ await page.evaluate(() => {
+ document.querySelector('x-list')?.setAttribute(
+ 'list-type',
+ 'flow',
+ );
+ });
+ await wait(100);
+ await diffScreenShot(page, 'x-list/list-type-change', 'flow');
+ await page.evaluate(() => {
+ document.querySelector('x-list')?.setAttribute(
+ 'list-type',
+ 'waterfall',
+ );
+ });
+ await wait(100);
+ await diffScreenShot(page, 'x-list/list-type-change', 'waterfall');
+ });
});
test.describe('x-input', () => {
test('placeholder', async ({ page }, { titlePath }) => {
diff --git a/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/flow-chromium-linux.png b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/flow-chromium-linux.png
new file mode 100644
index 0000000000..6c2d74d597
Binary files /dev/null and b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/flow-chromium-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/flow-firefox-linux.png b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/flow-firefox-linux.png
new file mode 100644
index 0000000000..a634455b5b
Binary files /dev/null and b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/flow-firefox-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/flow-webkit-linux.png b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/flow-webkit-linux.png
new file mode 100644
index 0000000000..7dcd188916
Binary files /dev/null and b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/flow-webkit-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/index-chromium-linux.png b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/index-chromium-linux.png
new file mode 100644
index 0000000000..ab63e8db70
Binary files /dev/null and b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/index-chromium-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/index-firefox-linux.png b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/index-firefox-linux.png
new file mode 100644
index 0000000000..4bfd42f94a
Binary files /dev/null and b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/index-firefox-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/index-webkit-linux.png b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/index-webkit-linux.png
new file mode 100644
index 0000000000..6f0f59cb36
Binary files /dev/null and b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/index-webkit-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/single-chromium-linux.png b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/single-chromium-linux.png
new file mode 100644
index 0000000000..5f5adddcf2
Binary files /dev/null and b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/single-chromium-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/single-firefox-linux.png b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/single-firefox-linux.png
new file mode 100644
index 0000000000..5948552a04
Binary files /dev/null and b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/single-firefox-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/single-webkit-linux.png b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/single-webkit-linux.png
new file mode 100644
index 0000000000..b6d01b1f97
Binary files /dev/null and b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/single-webkit-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/waterfall-chromium-linux.png b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/waterfall-chromium-linux.png
new file mode 100644
index 0000000000..ab63e8db70
Binary files /dev/null and b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/waterfall-chromium-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/waterfall-firefox-linux.png b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/waterfall-firefox-linux.png
new file mode 100644
index 0000000000..4bfd42f94a
Binary files /dev/null and b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/waterfall-firefox-linux.png differ
diff --git a/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/waterfall-webkit-linux.png b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/waterfall-webkit-linux.png
new file mode 100644
index 0000000000..6f0f59cb36
Binary files /dev/null and b/packages/web-platform/web-tests/tests/web-elements.spec.ts-snapshots/x-list/list-type-change/waterfall-webkit-linux.png differ