Created attachment 418862 [details]
** 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.
Thanks for filing, I'm seeing this issue reproduce on Safari 13.1.3 as well as TOT.
Created attachment 427894 [details]
Created attachment 427915 [details]
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]
Created attachment 427975 [details]
Created attachment 427976 [details]
Comment on attachment 427976 [details]
View in context: https://bugs.webkit.org/attachment.cgi?id=427976&action=review
> + 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:
Created attachment 430000 [details]
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].