Remove inline sidebar width probe styles in visual test

This commit is contained in:
thePR0M3TH3AN committed 2025-10-20 10:45:52 -04:00
1 parent 779e0366f0
commit 1e13acbc78
1 file changed
+72 -6
+72 -6
View File
@@ -57,11 +57,44 @@ test.describe("overlay layering tokens", () => {
throw new Error("Missing sidebar layout nodes");
}
const ensureProbeStyles = () => {
if (document.getElementById("sidebar-width-probe-style")) {
return;
}
const style = document.createElement("style");
style.id = "sidebar-width-probe-style";
style.textContent = `
.sidebar-width-probe {
position: absolute;
visibility: hidden;
}
.sidebar-width-probe--collapsed {
width: calc(var(--sidebar-width-collapsed) + var(--sidebar-content-gap));
}
.sidebar-width-probe--expanded {
width: calc(var(--sidebar-width-expanded) + var(--sidebar-content-gap));
}
`;
document.head.appendChild(style);
};
ensureProbeStyles();
const computeMargin = (widthVar) => {
const variant =
widthVar === "--sidebar-width-collapsed"
? "sidebar-width-probe--collapsed"
: widthVar === "--sidebar-width-expanded"
? "sidebar-width-probe--expanded"
: null;
if (!variant) {
throw new Error(`Unsupported sidebar width variable: ${widthVar}`);
}
const probe = document.createElement("div");
probe.style.position = "absolute";
probe.style.visibility = "hidden";
probe.style.width = `calc(var(${widthVar}) + var(--sidebar-content-gap))`;
probe.classList.add("sidebar-width-probe", variant);
document.body.appendChild(probe);
const width = parseFloat(window.getComputedStyle(probe).width);
probe.remove();
@@ -101,11 +134,44 @@ test.describe("overlay layering tokens", () => {
throw new Error("Missing sidebar layout nodes");
}
const ensureProbeStyles = () => {
if (document.getElementById("sidebar-width-probe-style")) {
return;
}
const style = document.createElement("style");
style.id = "sidebar-width-probe-style";
style.textContent = `
.sidebar-width-probe {
position: absolute;
visibility: hidden;
}
.sidebar-width-probe--collapsed {
width: calc(var(--sidebar-width-collapsed) + var(--sidebar-content-gap));
}
.sidebar-width-probe--expanded {
width: calc(var(--sidebar-width-expanded) + var(--sidebar-content-gap));
}
`;
document.head.appendChild(style);
};
ensureProbeStyles();
const computeMargin = (widthVar) => {
const variant =
widthVar === "--sidebar-width-collapsed"
? "sidebar-width-probe--collapsed"
: widthVar === "--sidebar-width-expanded"
? "sidebar-width-probe--expanded"
: null;
if (!variant) {
throw new Error(`Unsupported sidebar width variable: ${widthVar}`);
}
const probe = document.createElement("div");
probe.style.position = "absolute";
probe.style.visibility = "hidden";
probe.style.width = `calc(var(${widthVar}) + var(--sidebar-content-gap))`;
probe.classList.add("sidebar-width-probe", variant);
document.body.appendChild(probe);
const width = parseFloat(window.getComputedStyle(probe).width);
probe.remove();