fix: corner smoothing with 0 radii (36-x-y backport) (#46799)

fix: corner smoothing with 0 radii (36-x-y)
This commit is contained in:
Calvin
2025-04-25 17:10:04 -06:00
committed by GitHub
parent 66f55ead4e
commit 1a797beeea
6 changed files with 51 additions and 27 deletions

View File

@@ -6,7 +6,6 @@ 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(
@@ -42,7 +41,7 @@ const COMPARISON_TOLERANCE = 2.5;
function compareImages (img1: NativeImage, img2: NativeImage): boolean {
expect(img1.getSize()).to.deep.equal(
img2.getSize(),
'Cannot compare images with different sizes'
'Cannot compare images with different sizes. Run tests with --force-device-scale-factor=1'
);
const bitmap1 = img1.toBitmap();
@@ -119,9 +118,7 @@ async function pageCaptureTestRecipe (
}
}
// 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', () => {
describe('-electron-corner-smoothing', () => {
afterEach(async () => {
await closeAllWindows();
});

Binary file not shown.

Before

Width:  |  Height:  |  Size: 163 KiB

After

Width:  |  Height:  |  Size: 122 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 145 KiB

After

Width:  |  Height:  |  Size: 114 KiB

View File

@@ -44,7 +44,7 @@
}
.box {
--boxes-x: 7;
--boxes-x: 8;
--boxes-y: 5;
--box-shadow-offset: 4px;
--box-shadow-spread: 2px;
@@ -84,6 +84,10 @@
background-color: skyblue;
box-shadow: var(--box-shadow-offset) var(--box-shadow-offset) var(--box-shadow-spread) var(--box-shadow-grow) cornflowerblue;
}
.box.multiple-radii {
background-color: coral;
border-radius: 0 0 calc((var(--box-size) / 8) - 2px) calc((var(--box-size) / 2) - 8px);
}
</style>
</head>
<body>
@@ -95,6 +99,7 @@
<div class="box outline double"></div>
<div class="box outer"><div class="inner"></div></div>
<div class="box shadow"></div>
<div class="box multiple-radii"></div>
</div>
<div class="row rounding-30">
<div class="box"></div>
@@ -104,6 +109,7 @@
<div class="box outline double"></div>
<div class="box outer"><div class="inner"></div></div>
<div class="box shadow"></div>
<div class="box multiple-radii"></div>
</div>
<div class="row rounding-60">
<div class="box"></div>
@@ -113,6 +119,7 @@
<div class="box outline double"></div>
<div class="box outer"><div class="inner"></div></div>
<div class="box shadow"></div>
<div class="box multiple-radii"></div>
</div>
<div class="row rounding-100">
<div class="box"></div>
@@ -122,6 +129,7 @@
<div class="box outline double"></div>
<div class="box outer"><div class="inner"></div></div>
<div class="box shadow"></div>
<div class="box multiple-radii"></div>
</div>
<div class="row rounding-invalid">
<div class="box"></div>
@@ -131,6 +139,7 @@
<div class="box outline double"></div>
<div class="box outer"><div class="inner"></div></div>
<div class="box shadow"></div>
<div class="box multiple-radii"></div>
</div>
</body>
</html>