Zoom the page in and out, watch the values!

The red and blue boxes should stay the same size regardless of zoom level.

According to W3C spec, on Firefox, Chrome/Chromium, the Pixel ratio will change with the zoom level, but the boxes stay the same size.

On MacOS Safari, the blue box using the @property defined prop misbehaves, the pixel ratio does NOT change with zoom level, and the blue box grows in size, when it should not.

@property --var-prop {
	syntax: "<length>";
	inherits: true;
	initial-value: 200px;
}

:root {
	--var-1: 200px;
	--var-prop: 200px;
}

.test {
	background: pink;
	width: var(--var-1);
}

.test-prop {
	background: lightblue;
	width: var(--var-prop);
}
...