[Webkit-unassigned] [Bug 221202] New: Webkit doesn't calculate height in % correctly when parent has padding

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=221202

            Bug ID: 221202
           Summary: Webkit doesn't calculate height in % correctly when
                    parent has padding
           Product: WebKit
           Version: Safari 14
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: ik at rejh.nl

Created attachment 418862

  --> https://bugs.webkit.org/attachment.cgi?id=418862&action=review

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..?

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20210201/634e11c6/attachment-0001.htm>