RESOLVED FIXED 196175
Height is calculated incorrectly when using display:table, box-sizing:border-box and padding 
https://bugs.webkit.org/show_bug.cgi?id=196175
Summary Height is calculated incorrectly when using display:table, box-sizing:border-...
Concerned user
Reported 2019-03-23 03:39:42 PDT
Created attachment 365810 [details] Simple HTML bug demo Using display:table is VERY common in responsive web design when some elements have fixed height and other elements should cover the remaining portion of the screen, that's how this bug has been discovered. All major browsers handle the described scenario correctly (tested latest versions of Chrome [windows, linux], Firefox [windows, linux], Opera [windows, linux], Internet Explorer, Edge, Maxton). All webkit based browsers handle it incorrectly (tested Safari 11, 12 and on linux: Midori and latest nightly build of Epiphany downloaded yesterday [3.31.90-6353d94e3]) Attached is a simple test page (one HTML file with css embedded - demo.html). Expected behavior: the demo page should have orange header, orange footer and yellow middle section. No red background should be visible, it should be fully covered. This correct behavior is observed in all non-webkit based browsers. Current behavior: red section is visible on the bottom portion of the content div, as its height is incorrect (not 100%). Probable cause: height calculation inside display:table child elements does not include padding values, while it should have been when box-sizing:border-box is used.
Attachments
Simple HTML bug demo (1.08 KB, text/html)
2019-03-23 03:39 PDT, Concerned user 		no flags
Details
Comparison of different browsers (158.89 KB, image/jpeg)
2019-03-23 03:42 PDT, Concerned user 		no flags
Details
To check layout test result (2.04 KB, patch)
2021-12-12 06:13 PST, Joonghun Park 		no flags
DetailsFormatted DiffDiff
Add wpt test case (11.36 KB, patch)
2021-12-13 02:10 PST, Joonghun Park 		no flags
DetailsFormatted DiffDiff
Update layout test result for mac/ios (16.32 KB, patch)
2021-12-13 13:37 PST, Joonghun Park 		no flags
DetailsFormatted DiffDiff
Update layout test result for mac-catalina/mojave (19.92 KB, patch)
2021-12-13 14:52 PST, Joonghun Park 		no flags
DetailsFormatted DiffDiff
Patch for landing (18.73 KB, patch)
2021-12-14 20:29 PST, Joonghun Park 		no flags
DetailsFormatted DiffDiff
Show Obsolete (4) View All Add attachment proposed patch, testcase, etc.
Concerned user
Comment 1 2019-03-23 03:42:02 PDT
Created attachment 365811 [details] Comparison of different browsers Chromium, Firefox, IE, Epiphany
Radar WebKit Bug Importer
Comment 2 2019-03-24 13:40:37 PDT
<rdar://problem/49199653>
Joonghun Park
Comment 3 2021-12-12 06:13:24 PST
Created attachment 446930 [details] To check layout test result
Joonghun Park
Comment 4 2021-12-13 02:10:34 PST
Created attachment 446982 [details] Add wpt test case
EWS Watchlist
Comment 5 2021-12-13 02:11:27 PST
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
Joonghun Park
Comment 6 2021-12-13 13:37:11 PST
Created attachment 447052 [details] Update layout test result for mac/ios
Joonghun Park
Comment 7 2021-12-13 14:52:29 PST
Created attachment 447071 [details] Update layout test result for mac-catalina/mojave
Joonghun Park
Comment 8 2021-12-14 20:29:30 PST
Created attachment 447198 [details] Patch for landing
EWS
Comment 9 2021-12-14 22:55:07 PST
Committed r287063 (245258@main): <https://commits.webkit.org/245258@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 447198 [details].
Brent Fulgham
Comment 10 2022-02-04 14:30:16 PST
This change should be present in STP 139, iOS 15.4 Beta, and macOS 12.3 Beta.
Note You need to log in before you can comment on or make changes to this bug.