Created attachment 418862 [details] Test case ** Short description: Webkit doesn't calculate height in % correctly when the parent element has padding, not even when `box-sizing: border-box;` is set. This applies to child elements with `height: 100%` and/or `padding-bottom: 100%`. ** Steps to reproduce: 1) Open the attached test-case (or http://testcase.rejh.nl/webkit-border-box-width-height-padding/) in Safari (Big Sur, Tech Prev 119, iOS and iPadOS 14.4) 2) Observe that none of the red boxes are the same height as their parent (yellow) [*] 3) Open the same test-case in Chrome or Firefox. 4) All red boxes are the same height as their parents [**] ** Expected result: All red boxes should be the exact same with/height as their parent [**] ** Actual result: The red boxes do not account for their parent's padding when calculating 100% height/padding-bottom. --- [*] All red boxes have a 10px top/left offset to better illustrate they are two elements. [**] I've included two boxes that use the experimental `aspect-ratio` css property as these are currently available in Tech Preview. As expected, the only browser that supports this in 'stable' releases is currently Chrome v88. However, I did expect Safari TP 119 to work correctly as its changelog states: * Added support for aspect-ratio on positioned elements (r271061) * Changed to take aspect-ratio into account for percentage resolution (r271293) It seems Webkit's implementation is not (yet) working as expected..?
Created attachment 418863 [details] Result of test-case in Safari 14.0.2 on Big Sur
Created attachment 418864 [details] Result of test-case in Chrome 88
Created attachment 418865 [details] Test case v2 Updated test case where the first box's css was incorrect. It looks like `height: 100%` *is* correctly calculated but only `padding-bottom: 100%` is not.
<rdar://problem/74093422>
Thanks for filing, I'm seeing this issue reproduce on Safari 13.1.3 as well as TOT.
Created attachment 427894 [details] Patch
Created attachment 427915 [details] Patch
This patch modifies the imported WPT tests. Please ensure that any changes on the tests (not coming from a WPT import) are exported to WPT. Please see https://trac.webkit.org/wiki/WPTExportProcess
Created attachment 427923 [details] Patch
Created attachment 427975 [details] Patch
Created attachment 427976 [details] Patch
Comment on attachment 427976 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=427976&action=review r=me > Source/WebCore/ChangeLog:9 > + https://www.w3.org/TR/CSS2/visudet.html#containing-block-details (4.2). Nit: Maybe you can link the new CSS specs here, as this is quite an old reference: https://drafts.csswg.org/css-position-3/#absolute-positioning-containing-block
Created attachment 430000 [details] Patch
Committed r278194 (238237@main): <https://commits.webkit.org/238237@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 430000 [details].
*** Bug 133049 has been marked as a duplicate of this bug. ***