fix: Revert "feat: Corner Smoothing CSS rule" (#46231)
Revert "feat: Corner Smoothing CSS rule (#45185)"
This reverts commit b75e802280
.
This commit is contained in:
parent
cfd64b5f89
commit
abaef13c0b
26 changed files with 1 additions and 1313 deletions
|
@ -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 |
BIN
spec/fixtures/api/corner-smoothing/shape/image.png
vendored
BIN
spec/fixtures/api/corner-smoothing/shape/image.png
vendored
Binary file not shown.
Before Width: | Height: | Size: 721 KiB |
136
spec/fixtures/api/corner-smoothing/shape/test.html
vendored
136
spec/fixtures/api/corner-smoothing/shape/test.html
vendored
|
@ -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 |
|
@ -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>
|
Loading…
Add table
Add a link
Reference in a new issue