62 lines
2.0 KiB
TypeScript
62 lines
2.0 KiB
TypeScript
import { expect, test, type Locator } from "playwright/test";
|
|
|
|
test("scheduled conditions keep acrylic blur outside transformed ancestors", async ({ page }) => {
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
|
|
const panel = page.getByRole("region", { name: "工况任务", exact: true });
|
|
await expect(panel).toBeVisible();
|
|
await page.waitForTimeout(250);
|
|
|
|
await expectAcrylicComposition(panel);
|
|
await expect(panel).toHaveCSS("width", "432px");
|
|
|
|
await panel.getByRole("button", { name: "展开工况任务" }).click();
|
|
await page.waitForTimeout(250);
|
|
|
|
await expectAcrylicComposition(panel);
|
|
await expect(panel).toHaveCSS("width", "880px");
|
|
});
|
|
|
|
async function expectAcrylicComposition(panel: Locator) {
|
|
const composition = await panel.evaluate((element) => {
|
|
const rootStyle = getComputedStyle(element);
|
|
const blockingAncestors: string[] = [];
|
|
const filteredDescendants: string[] = [];
|
|
|
|
let ancestor = element.parentElement;
|
|
while (ancestor && ancestor.tagName !== "MAIN") {
|
|
const style = getComputedStyle(ancestor);
|
|
if (
|
|
style.transform !== "none" ||
|
|
style.filter !== "none" ||
|
|
style.opacity !== "1" ||
|
|
style.isolation !== "auto" ||
|
|
style.willChange.includes("transform")
|
|
) {
|
|
blockingAncestors.push(ancestor.className);
|
|
}
|
|
ancestor = ancestor.parentElement;
|
|
}
|
|
|
|
for (const descendant of element.querySelectorAll("*")) {
|
|
if (getComputedStyle(descendant).backdropFilter !== "none") {
|
|
filteredDescendants.push(descendant.className);
|
|
}
|
|
}
|
|
|
|
return {
|
|
backdropFilter: rootStyle.backdropFilter,
|
|
blockingAncestors,
|
|
filteredDescendants,
|
|
transform: rootStyle.transform,
|
|
willChange: rootStyle.willChange
|
|
};
|
|
});
|
|
|
|
expect(composition.backdropFilter).toContain("blur(");
|
|
expect(composition.blockingAncestors).toEqual([]);
|
|
expect(composition.filteredDescendants).toEqual([]);
|
|
expect(composition.transform).toBe("none");
|
|
expect(composition.willChange).toBe("auto");
|
|
}
|