Bug 220565

STR:
(1) Load https://jsfiddle.net/dholbert/r3dwmpsq/

EXPECTED RESULTS:
The third and fourth black boxes should be square -- they should have the same width as the first and second black boxes.

ACTUAL RESULTS:
The third and fourth black boxes are wide instead.


Firefox and EdgeHTML give my expected results here.
Chromium 89 and Safari 14 give me "Actual results".

The authoritative spec text here (which I believe requires my expected result) is css-sizing level 3, section 5.2.1 subsection "b":
https://drafts.csswg.org/css-sizing/#cyclic-percentage-contribution
> Intrinsic Contributions of Percentage-Sized Boxes
> When calculating the intrinsic size contribution of such a box, ... 	a percentage value that resolves against a size in the same axis as the intrinsic size contribution (a cyclic percentage size) is resolved specially:
> ...
>  if the box is replaced, then the entire value of any [...] preferred size property specified as an expression containing a percentage that is cyclic is treated for the purpose of calculating the box’s max-content contributions only as that property’s initial value. 

So that means that, in my jsfiddle here, the canvas's contribution to the black box's size should be the same for the first four boxes.  (In boxes #3 and #4, the canvases have percentage values which are considered cyclic by this spec section, and so their specified widths are to be treated as if they were the initial value when determining their intrinsic-size contribution to the width of their container; and so the container should end up the same size for those first four boxes.)

(Note: this is a bug that Chromium and WebKit share; it might go back to before the fork. The chromium version of this bug is https://bugs.chromium.org/p/chromium/issues/detail?id=1165896 ; I'm mostly copypasting the bug report to save myself some time.)