style: refine acrylic workbench surfaces

2026-07-15 17:07:32 +08:00
parent 8978f2d167
commit 16ecb69d00
41 changed files with 838 additions and 606 deletions
@@ -0,0 +1,61 @@
+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");
+}