94 lines
3.3 KiB
TypeScript
94 lines
3.3 KiB
TypeScript
import { expect, test, type Locator } from "@playwright/test";
|
|
|
|
test("native scroll regions share the workbench scrollbar presentation", async ({ page }) => {
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
await page.getByRole("button", { name: "工况任务", exact: true }).click();
|
|
|
|
const reference = page
|
|
.getByRole("region", { name: "工况任务", exact: true })
|
|
.getByTestId("scheduled-condition-timeline")
|
|
.locator(".scheduled-feed-scroll.flex-1");
|
|
|
|
await page.evaluate(() => {
|
|
const probe = document.createElement("div");
|
|
const content = document.createElement("div");
|
|
|
|
probe.dataset.testid = "global-scrollbar-probe";
|
|
probe.style.cssText =
|
|
"position:fixed;left:8px;bottom:8px;width:40px;height:40px;overflow:auto;z-index:9999";
|
|
content.style.cssText = "width:80px;height:80px";
|
|
probe.append(content);
|
|
document.body.append(probe);
|
|
});
|
|
|
|
const probe = page.getByTestId("global-scrollbar-probe");
|
|
const presentation = await readScrollbarPresentation(reference);
|
|
expect(await readScrollbarPresentation(probe)).toEqual(presentation);
|
|
expect(presentation).toMatchObject({
|
|
height: "4px",
|
|
thumbRadius: "2px",
|
|
trackRadius: "0px",
|
|
width: "4px"
|
|
});
|
|
|
|
await reference.hover();
|
|
const referenceHoverThumb = await readScrollbarThumb(reference);
|
|
await probe.hover();
|
|
expect(await readScrollbarThumb(probe)).toBe(referenceHoverThumb);
|
|
});
|
|
|
|
test("intentional hidden-scrollbar regions remain hidden", async ({ page }) => {
|
|
await page.goto("/", { waitUntil: "domcontentloaded" });
|
|
|
|
await page.evaluate(() => {
|
|
const probe = document.createElement("div");
|
|
const content = document.createElement("div");
|
|
|
|
probe.dataset.testid = "hidden-scrollbar-probe";
|
|
probe.className = "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden";
|
|
probe.style.cssText = "width:40px;height:40px;overflow:auto";
|
|
content.style.cssText = "width:80px;height:80px";
|
|
probe.append(content);
|
|
document.body.append(probe);
|
|
});
|
|
|
|
const hiddenProbe = page.getByTestId("hidden-scrollbar-probe");
|
|
const presentation = await hiddenProbe.evaluate((element) => ({
|
|
display: getComputedStyle(element, "::-webkit-scrollbar").display,
|
|
width: getComputedStyle(element).scrollbarWidth
|
|
}));
|
|
|
|
expect(presentation).toEqual({
|
|
display: "none",
|
|
width: "none"
|
|
});
|
|
});
|
|
|
|
async function readScrollbarPresentation(locator: Locator) {
|
|
return locator.evaluate((element) => {
|
|
const style = getComputedStyle(element);
|
|
const scrollbar = getComputedStyle(element, "::-webkit-scrollbar");
|
|
const track = getComputedStyle(element, "::-webkit-scrollbar-track");
|
|
const thumb = getComputedStyle(element, "::-webkit-scrollbar-thumb");
|
|
const corner = getComputedStyle(element, "::-webkit-scrollbar-corner");
|
|
|
|
return {
|
|
color: style.scrollbarColor,
|
|
cornerBackground: corner.backgroundColor,
|
|
height: scrollbar.height,
|
|
thumbBackground: thumb.backgroundColor,
|
|
thumbRadius: thumb.borderRadius,
|
|
trackBackground: track.backgroundColor,
|
|
trackRadius: track.borderRadius,
|
|
width: scrollbar.width,
|
|
widthMode: style.scrollbarWidth
|
|
};
|
|
});
|
|
}
|
|
|
|
async function readScrollbarThumb(locator: Locator) {
|
|
return locator.evaluate(
|
|
(element) => getComputedStyle(element, "::-webkit-scrollbar-thumb").backgroundColor
|
|
);
|
|
}
|