johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-11 22:14:05 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

♻️ Copy shorthands using user selected color space (#7752)

Browse Source 
* ♻️ Copy shorthands using user selected color space

* ♻️ Add tests to ensure color space changes affect all properties
This commit is contained in:
Xaviju
2025-11-18 10:54:10 +01:00
committed by GitHub
parent 04185b3544
commit 64b892f82d
7 changed files with 88 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/playwright/ui/specs/inspect-tab.spec.js
View File

@@ -120,6 +120,16 @@ const openInspectTab = async (workspacePage) => {
await inspectButton.click();
};
const selectColorSpace = async (workspacePage, colorSpace) => {
const sidebar = workspacePage.page.getByTestId("right-sidebar");
const colorSpaceSelector = sidebar.getByLabel("Select color space");
await colorSpaceSelector.click();
const colorSpaceOption = sidebar.getByRole("option", {
name: colorSpace,
});
await colorSpaceOption.click();
};
test.describe("Inspect tab - Styles", () => {
test("Open Inspect tab", async ({ page }) => {
const workspacePage = new WorkspacePage(page);
@@ -383,6 +393,46 @@ test.describe("Inspect tab - Styles", () => {
expect(propertyRowCount).toBeGreaterThanOrEqual(1);
});
test("Change color space and ensure fill and shorthand changes", async ({
page,
}) => {
const workspacePage = new WorkspacePage(page);
await setupFile(workspacePage);
await selectLayer(workspacePage, shapeToLayerName.fill.solid);
await openInspectTab(workspacePage);
const panel = await getPanelByTitle(workspacePage, "Fill");
await expect(panel).toBeVisible();
const propertyRow = panel.getByTestId("property-row");
const backgroundRow = propertyRow.filter({
hasText: "Background",
});
await expect(backgroundRow).toBeVisible();
// Ensure initial value and copied value are in HEX format
expect(backgroundRow).toContainText("#0438d5 100%");
await copyPropertyFromPropertyRow(panel, "Background");
const backgroundHEX = await page.evaluate(() =>
navigator.clipboard.readText(),
);
expect(backgroundHEX).toContain("background: #0438d5FF;");
// Change color space to RGBA
await selectColorSpace(workspacePage, "rgba");
// Ensure new value and copied value are in RGBA format
expect(backgroundRow).toContainText("4, 56, 213, 1");
await copyPropertyFromPropertyRow(panel, "Background");
const backgroundRGBA = await page.evaluate(() =>
navigator.clipboard.readText(),
);
expect(backgroundRGBA).toContain("background: rgba(4, 56, 213, 1);");
});
test("Shape - Fill - Gradient", async ({ page }) => {
const workspacePage = new WorkspacePage(page);
await setupFile(workspacePage);