233032 2021-11-12 01:11:51 -0800 Percentage size inside a fit-content parent in quirk mode 2024-07-25 09:03:42 -0700 1 1 1 Unclassified WebKit CSS WebKit Local Build Unspecified Unspecified NEW BrowserCompat, InRadar P2 Normal --- 1 cathiechen webkit-unassigned ahmad.saleem792 webkit-bug-importer oldest_to_newest 1814370 0 cathiechen 2021-11-12 01:11:51 -0800 We found the behavior of the following case is different in browsers. The img and div size is 1x1 in Chrome. While the img and div size is 1xA in Safari and FireFox, where A is the screen height. Test case: ``` <div style="width:fit-content;height:fit-content;"> <img style="width: 100%; height: 100%" src="https://w3c-test.org/images/green-1x1.png"/> </div> ``` Or open https://output.jsbin.com/nodecov/quiet We have discussed this in https://bugs.chromium.org/p/chromium/issues/detail?id=1268427 According to https://quirks.spec.whatwg.org/#the-percentage-height-calculation-quirk The containing block is DIV. Then according to https://www.w3.org/TR/CSS22/visudet.html#the-height-property > If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the used height is calculated as if 'auto' was specified. So the height of IMG is “Behaving as auto” (https://drafts.csswg.org/css-sizing-3/#behave-auto) So the IMG size should be 1x1, so as to DIV's. WDYT? Do we need a consistent here? 1816775 1 webkit-bug-importer 2021-11-19 01:12:20 -0800 <rdar://problem/85591164> 2048341 2 471965 ahmad.saleem792 2024-07-25 09:03:24 -0700 Created attachment 471965 Test Case 471965 2024-07-25 09:03:24 -0700 2024-07-25 09:03:24 -0700 Test Case Test Case - Quirk - Fit-Content.html text/html 157 ahmad.saleem792 PGRpdiBpZD0icGFyZW50IiBzdHlsZT0id2lkdGg6Zml0LWNvbnRlbnQ7aGVpZ2h0OmZpdC1jb250 ZW50OyI+CiAgICA8aW1nIGlkPSJjaGlsZCIgc3R5bGU9IndpZHRoOiAxMDAlOyBoZWlnaHQ6IDEw MCUiIHNyYz0iaHR0cHM6Ly9wbGFjZWhvbGQuY28vMVgxIi8+CjwvZGl2Pg==