diff --git a/playwright/e2e/crypto/crypto.spec.ts b/playwright/e2e/crypto/crypto.spec.ts index bad9072f0c..d69af46a72 100644 --- a/playwright/e2e/crypto/crypto.spec.ts +++ b/playwright/e2e/crypto/crypto.spec.ts @@ -168,6 +168,7 @@ test.describe("Cryptography", function () { // Take a snapshot of RoomSummaryCard with a verified E2EE icon await expect(page.locator(".mx_RightPanel")).toMatchScreenshot("RoomSummaryCard-with-verified-e2ee.png"); + await expect(page.locator(".mx_MessageComposer_e2eIcon")).toMatchScreenshot("composer-e2e-icon.png"); }, ); diff --git a/playwright/e2e/crypto/device-verification.spec.ts b/playwright/e2e/crypto/device-verification.spec.ts index 5ae53f649e..f325754326 100644 --- a/playwright/e2e/crypto/device-verification.spec.ts +++ b/playwright/e2e/crypto/device-verification.spec.ts @@ -48,31 +48,38 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => { return promiseVerificationRequest; } - test("Verify device with SAS during login", async ({ page, app, credentials, homeserver }) => { - await logIntoElement(page, credentials); + test( + "Verify device with SAS during login", + { tag: "@screenshot" }, + async ({ page, app, credentials, homeserver }) => { + await logIntoElement(page, credentials); - // Launch the verification request between alice and the bot - const verificationRequest = await initiateAliceVerificationRequest(page); + // Launch the verification request between alice and the bot + const verificationRequest = await initiateAliceVerificationRequest(page); - // Handle emoji SAS verification - const infoDialog = page.locator(".mx_InfoDialog"); - // the bot chooses to do an emoji verification - const verifier = await verificationRequest.evaluateHandle((request) => request.startVerification("m.sas.v1")); + // Handle emoji SAS verification + const infoDialog = page.locator(".mx_InfoDialog"); + // the bot chooses to do an emoji verification + const verifier = await verificationRequest.evaluateHandle((request) => + request.startVerification("m.sas.v1"), + ); - // Handle emoji request and check that emojis are matching - await doTwoWaySasVerification(page, verifier); + // Handle emoji request and check that emojis are matching + await doTwoWaySasVerification(page, verifier); - await infoDialog.getByRole("button", { name: "They match" }).click(); - await infoDialog.getByRole("button", { name: "Got it" }).click(); + await infoDialog.getByRole("button", { name: "They match" }).click(); + await expect(page.locator(".mx_E2EIcon_verified")).toMatchScreenshot("device-verified-e2eIcon.png"); + await infoDialog.getByRole("button", { name: "Got it" }).click(); - // Check that our device is now cross-signed - await checkDeviceIsCrossSigned(app); + // Check that our device is now cross-signed + await checkDeviceIsCrossSigned(app); - // Check that the current device is connected to key backup - // For now we don't check that the backup key is in cache because it's a bit flaky, - // as we need to wait for the secret gossiping to happen. - await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, false); - }); + // Check that the current device is connected to key backup + // For now we don't check that the backup key is in cache because it's a bit flaky, + // as we need to wait for the secret gossiping to happen. + await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, false); + }, + ); // Regression test for https://github.com/element-hq/element-web/issues/29110 test("No toast after verification, even if the secrets take a while to arrive", async ({ page, credentials }) => { diff --git a/playwright/snapshots/crypto/crypto.spec.ts/composer-e2e-icon-linux.png b/playwright/snapshots/crypto/crypto.spec.ts/composer-e2e-icon-linux.png new file mode 100644 index 0000000000..05f5af8507 Binary files /dev/null and b/playwright/snapshots/crypto/crypto.spec.ts/composer-e2e-icon-linux.png differ diff --git a/playwright/snapshots/crypto/device-verification.spec.ts/device-verified-e2eIcon-linux.png b/playwright/snapshots/crypto/device-verification.spec.ts/device-verified-e2eIcon-linux.png new file mode 100644 index 0000000000..479a8c17bb Binary files /dev/null and b/playwright/snapshots/crypto/device-verification.spec.ts/device-verified-e2eIcon-linux.png differ diff --git a/res/css/views/rooms/_E2EIcon.pcss b/res/css/views/rooms/_E2EIcon.pcss index a8e3a34095..aea1b942d1 100644 --- a/res/css/views/rooms/_E2EIcon.pcss +++ b/res/css/views/rooms/_E2EIcon.pcss @@ -52,17 +52,10 @@ Please see LICENSE files in the repository root for full details. .mx_E2EIcon_normal::after { mask-image: url("$(res)/img/e2e/normal.svg"); - background-color: var(--cpd-color-icon-tertiary); + background-color: white; } .mx_E2EIcon_verified::after { mask-image: url("$(res)/img/e2e/verified.svg"); background-color: $e2e-verified-color; } - -// When using the "normal" icon as a background for verified or warning icon, -// it should be slightly smaller than the foreground icon -.mx_E2EIcon_verified, .mx_E2EIcon_warning .mx_E2EIcon_normal::after { - mask-size: 90%; - background-color: white; -}