Bug 221202 - Webkit doesn't calculate padding-top/-bottom in % correctly when parent has padding
Summary: Webkit doesn't calculate padding-top/-bottom in % correctly when parent has p...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 14
Hardware: All All
: P2 Normal
Assignee: Rob Buis
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-02-01 05:43 PST by ik
Modified: 2021-05-28 04:36 PDT (History)
18 users (show)

See Also:


Attachments
Test case (1.10 KB, application/x-zip-compressed)
2021-02-01 05:43 PST, ik
no flags Details
Result of test-case in Safari 14.0.2 on Big Sur (133.75 KB, image/jpeg)
2021-02-01 05:46 PST, ik
no flags Details
Result of test-case in Chrome 88 (71.85 KB, image/jpeg)
2021-02-01 05:46 PST, ik
no flags Details
Test case v2 (1.10 KB, application/x-zip-compressed)
2021-02-01 05:55 PST, ik
no flags Details
Patch (1.48 KB, patch)
2021-05-06 09:38 PDT, Rob Buis
no flags Details | Formatted Diff | Diff
Patch (5.11 KB, patch)
2021-05-06 11:42 PDT, Rob Buis
no flags Details | Formatted Diff | Diff
Patch (5.11 KB, patch)
2021-05-06 12:54 PDT, Rob Buis
no flags Details | Formatted Diff | Diff
Patch (5.33 KB, patch)
2021-05-06 23:20 PDT, Rob Buis
no flags Details | Formatted Diff | Diff
Patch (5.54 KB, patch)
2021-05-07 00:49 PDT, Rob Buis
no flags Details | Formatted Diff | Diff
Patch (5.51 KB, patch)
2021-05-28 03:39 PDT, Rob Buis
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description ik 2021-02-01 05:43:19 PST
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..?
Comment 1 ik 2021-02-01 05:46:12 PST
Created attachment 418863 [details]
Result of test-case in Safari 14.0.2 on Big Sur
Comment 2 ik 2021-02-01 05:46:37 PST
Created attachment 418864 [details]
Result of test-case in Chrome 88
Comment 3 ik 2021-02-01 05:55:12 PST
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.
Comment 4 Radar WebKit Bug Importer 2021-02-08 05:44:12 PST
<rdar://problem/74093422>
Comment 5 Smoley 2021-02-15 18:03:10 PST
Thanks for filing, I'm seeing this issue reproduce on Safari 13.1.3 as well as TOT.
Comment 6 Rob Buis 2021-05-06 09:38:50 PDT
Created attachment 427894 [details]
Patch
Comment 7 Rob Buis 2021-05-06 11:42:12 PDT
Created attachment 427915 [details]
Patch
Comment 8 EWS Watchlist 2021-05-06 11:42:56 PDT
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
Comment 9 Rob Buis 2021-05-06 12:54:22 PDT
Created attachment 427923 [details]
Patch
Comment 10 Rob Buis 2021-05-06 23:20:13 PDT
Created attachment 427975 [details]
Patch
Comment 11 Rob Buis 2021-05-07 00:49:20 PDT
Created attachment 427976 [details]
Patch
Comment 12 Manuel Rego Casasnovas 2021-05-27 05:24:14 PDT
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
Comment 13 Rob Buis 2021-05-28 03:39:48 PDT
Created attachment 430000 [details]
Patch
Comment 14 EWS 2021-05-28 04:36:04 PDT
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].