fix: Revert "feat: Corner Smoothing CSS rule" (#46231)

Revert "feat: Corner Smoothing CSS rule (#45185)"

This reverts commit b75e802280.
This commit is contained in:
Calvin 2025-03-24 13:36:49 -06:00 committed by GitHub
parent cfd64b5f89
commit abaef13c0b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
26 changed files with 1 additions and 1313 deletions

View file

@ -1,156 +0,0 @@
import { NativeImage, nativeImage } from 'electron/common';
import { BrowserWindow } from 'electron/main';
import { AssertionError, expect } from 'chai';
import path = require('node:path');
import { createArtifact } from './lib/artifacts';
import { ifdescribe } from './lib/spec-helpers';
import { closeAllWindows } from './lib/window-helpers';
const FIXTURE_PATH = path.resolve(
__dirname,
'fixtures',
'api',
'corner-smoothing'
);
/**
* Rendered images may "match" but slightly differ due to rendering artifacts
* like anti-aliasing and vector path resolution, among others. This tolerance
* is the cutoff for whether two images "match" or not.
*
* From testing, matching images were found to have an average global difference
* up to about 1.3 and mismatched images were found to have a difference of at
* least about 7.3.
*
* See the documentation on `compareImages` for more information.
*/
const COMPARISON_TOLERANCE = 2.5;
/**
* Compares the average global difference of two images to determine if they
* are similar enough to "match" each other.
*
* "Average global difference" is the average difference of pixel components
* (RGB each) across an entire image.
*
* The cutoff for matching/not-matching is defined by the `COMPARISON_TOLERANCE`
* constant.
*/
function compareImages (img1: NativeImage, img2: NativeImage): boolean {
expect(img1.getSize()).to.deep.equal(
img2.getSize(),
'Cannot compare images with different sizes'
);
const bitmap1 = img1.toBitmap();
const bitmap2 = img2.toBitmap();
const { width, height } = img1.getSize();
let totalDiff = 0;
for (let x = 0; x < width; x++) {
for (let y = 0; y < height; y++) {
const index = (x + y * width) * 4;
const pixel1 = bitmap1.subarray(index, index + 4);
const pixel2 = bitmap2.subarray(index, index + 4);
const diff =
Math.abs(pixel1[0] - pixel2[0]) +
Math.abs(pixel1[1] - pixel2[1]) +
Math.abs(pixel1[2] - pixel2[2]);
totalDiff += diff;
}
}
const avgDiff = totalDiff / (width * height);
return avgDiff <= COMPARISON_TOLERANCE;
}
/**
* Recipe for tests.
*
* The page is rendered, captured as an image, then compared to an expected
* result image.
*/
async function pageCaptureTestRecipe (
pagePath: string,
expectedImgPath: string,
artifactName: string,
cornerSmoothingAvailable: boolean = true
): Promise<void> {
const w = new BrowserWindow({
show: false,
width: 800,
height: 600,
useContentSize: true,
webPreferences: {
enableCornerSmoothingCSS: cornerSmoothingAvailable
}
});
await w.loadFile(pagePath);
w.show();
// Wait for a render frame to prepare the page.
await w.webContents.executeJavaScript(
'new Promise((resolve) => { requestAnimationFrame(() => resolve()); })'
);
const actualImg = await w.webContents.capturePage();
expect(actualImg.isEmpty()).to.be.false('Failed to capture page image');
const expectedImg = nativeImage.createFromPath(expectedImgPath);
expect(expectedImg.isEmpty()).to.be.false(
'Failed to read expected reference image'
);
const matches = compareImages(actualImg, expectedImg);
if (!matches) {
const artifactFileName = `corner-rounding-expected-${artifactName}.png`;
await createArtifact(artifactFileName, actualImg.toPNG());
throw new AssertionError(
`Actual image did not match expected reference image. Actual: "${artifactFileName}" in artifacts, Expected: "${path.relative(
path.resolve(__dirname, '..'),
expectedImgPath
)}" in source`
);
}
}
// FIXME: these tests rely on live rendering results, which are too variable to
// reproduce outside of CI, primarily due to display scaling.
ifdescribe(!!process.env.CI)('-electron-corner-smoothing', () => {
afterEach(async () => {
await closeAllWindows();
});
describe('shape', () => {
for (const available of [true, false]) {
it(`matches the reference with web preference = ${available}`, async () => {
await pageCaptureTestRecipe(
path.join(FIXTURE_PATH, 'shape', 'test.html'),
path.join(FIXTURE_PATH, 'shape', `expected-${available}.png`),
`shape-${available}`,
available
);
});
}
});
describe('system-ui keyword', () => {
const { platform } = process;
it(`matches the reference for platform = ${platform}`, async () => {
await pageCaptureTestRecipe(
path.join(FIXTURE_PATH, 'system-ui-keyword', 'test.html'),
path.join(
FIXTURE_PATH,
'system-ui-keyword',
`expected-${platform}.png`
),
`system-ui-${platform}`
);
});
});
});

Binary file not shown.

Before

Width:  |  Height:  |  Size: 163 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 167 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 721 KiB

View file

@ -1,136 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<style>
/* Page is expected to be exactly 800x600 */
html, body {
width: 800px;
height: 600px;
margin: 0;
overflow: hidden;
display: flex;
flex-flow: column nowrap;
justify-content: space-around;
align-items: stretch;
}
.row {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
align-items: center;
}
.row.rounding-0 > .box {
-electron-corner-smoothing: 0%;
}
.row.rounding-30 > .box {
-electron-corner-smoothing: 30%;
}
.row.rounding-60 > .box {
-electron-corner-smoothing: 60%;
}
.row.rounding-100 > .box {
-electron-corner-smoothing: 100%;
}
.row.rounding-invalid > .box {
-electron-corner-smoothing: 200%;
}
.row.rounding-invalid > .box:nth-child(2) {
-electron-corner-smoothing: -10%;
}
.row.rounding-invalid > .box:nth-child(3) {
-electron-corner-smoothing: -200%;
}
.box {
--boxes-x: 7;
--boxes-y: 5;
--box-shadow-offset: 4px;
--box-shadow-spread: 2px;
--box-shadow-grow: 2px;
--box-gap: calc(var(--box-shadow-offset) + var(--box-shadow-spread) + var(--box-shadow-grow) + 4px);
--box-size: min(calc(((100vw - var(--box-gap)) / var(--boxes-x)) - var(--box-gap)), calc(((100vh - var(--box-gap)) / var(--boxes-y)) - var(--box-gap)));
width: var(--box-size);
height: var(--box-size);
border-radius: calc((var(--box-size) / 4) - 4px);
box-sizing: border-box;
background-color: black;
}
.box.outline {
background-color: bisque;
border: 8px solid black;
}
.box.outline.dashed {
background-color: darkkhaki;
border-style: dashed;
}
.box.outline.double {
background-color: darkseagreen;
border-style: double;
}
.box.outer {
overflow: clip;
}
.box.outer > .inner {
width: 100%;
height: 100%;
background-color: blueviolet;
}
.box.shadow {
background-color: skyblue;
box-shadow: var(--box-shadow-offset) var(--box-shadow-offset) var(--box-shadow-spread) var(--box-shadow-grow) cornflowerblue;
}
</style>
</head>
<body>
<div class="row rounding-0">
<div class="box"></div>
<img class="box" src="image.png" />
<div class="box outline"></div>
<div class="box outline dashed"></div>
<div class="box outline double"></div>
<div class="box outer"><div class="inner"></div></div>
<div class="box shadow"></div>
</div>
<div class="row rounding-30">
<div class="box"></div>
<img class="box" src="image.png" />
<div class="box outline"></div>
<div class="box outline dashed"></div>
<div class="box outline double"></div>
<div class="box outer"><div class="inner"></div></div>
<div class="box shadow"></div>
</div>
<div class="row rounding-60">
<div class="box"></div>
<img class="box" src="image.png" />
<div class="box outline"></div>
<div class="box outline dashed"></div>
<div class="box outline double"></div>
<div class="box outer"><div class="inner"></div></div>
<div class="box shadow"></div>
</div>
<div class="row rounding-100">
<div class="box"></div>
<img class="box" src="image.png" />
<div class="box outline"></div>
<div class="box outline dashed"></div>
<div class="box outline double"></div>
<div class="box outer"><div class="inner"></div></div>
<div class="box shadow"></div>
</div>
<div class="row rounding-invalid">
<div class="box"></div>
<img class="box" src="image.png" />
<div class="box outline"></div>
<div class="box outline dashed"></div>
<div class="box outline double"></div>
<div class="box outer"><div class="inner"></div></div>
<div class="box shadow"></div>
</div>
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.9 KiB

View file

@ -1,42 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<style>
/* Page is expected to be exactly 800x600 */
html, body {
width: 800px;
height: 600px;
margin: 0;
overflow: hidden;
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
align-items: center;
}
.box {
width: 256px;
height: 256px;
border-radius: 48px;
background-color: cornflowerblue;
}
.box.rounding-0 {
-electron-corner-smoothing: 0%;
}
.box.rounding-system-ui {
-electron-corner-smoothing: system-ui;
}
.box.rounding-100 {
-electron-corner-smoothing: 100%;
}
</style>
</head>
<body>
<div class="box rounding-0"></div>
<div class="box rounding-system-ui"></div>
<div class="box rounding-100"></div>
</body>
</html>