Steps to reproduce the problem

1. Consider two wrapper elements, each with a child. The body has display: grid and so do these wrappers. These wrappers are also containers.

body, div { display: grid }

body {
	grid-gap: 1em;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20em), 1fr))
}

.wrap {
	container-type: size;
	height: Max(9em, 65vw)
}

2. The child elements inside these wrappers get radial gradient backgrounds.

background: radial-gradient(25cqmin, red 100%, #0000 0) blue

Problem Description

The problem is that when setting the size of the gradient end shape in cqmin, this does not get computed correctly in Chrome (this is not a problem in Firefox or Safari). We can test this by not specifying this size and instead using the same cqmin value for the gradient stops.

radial-gradient(circle, red 25cqmin, #0000 0)

and

radial-gradient(25cqmin, red 100%, #0000 0)

should be identical (they are for other units in all browsers and for cqmin as well in Firefox and Safari). But they aren't in Chromium browsers.

Live test using a difference blend mode to compare the two gradients: https://codepen.io/thebabydino/pen/rNgaYwd (we get black where the two radial-gradient-generated circles coincide... which should be everywhere)

Summary

cqmin radii inside radial-gradient() not always computed correctly

Custom Questions

Which component does this fall under?

Blink>Layout

Does this work in other browsers?

Yes - This is just a Chrome problem

Additional Data

Category: API
Chrome Channel: Not sure
Regression: N/A