| Summary: | Height is calculated incorrectly when using display:table, box-sizing:border-box and padding | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Concerned user <webkitonly> | ||||||||||||||||
| Component: | CSS | Assignee: | Joonghun Park <jh718.park> | ||||||||||||||||
| Status: | RESOLVED FIXED | ||||||||||||||||||
| Severity: | Normal | CC: | bfulgham, changseok, clopez, darin, esprehn+autocc, ews-watchlist, glenn, jh718.park, kondapallykalyan, pdr, simon.fraser, webkit-bug-importer, youennf, zalan | ||||||||||||||||
| Priority: | P2 | Keywords: | HasReduction, InRadar | ||||||||||||||||
| Version: | WebKit Nightly Build | ||||||||||||||||||
| Hardware: | All | ||||||||||||||||||
| OS: | All | ||||||||||||||||||
| See Also: | https://github.com/web-platform-tests/wpt/pull/32026 | ||||||||||||||||||
| Attachments: |
|
||||||||||||||||||
Created attachment 365811 [details]
Comparison of different browsers
Chromium, Firefox, IE, Epiphany
Created attachment 446930 [details]
To check layout test result
Created attachment 446982 [details]
Add wpt test case
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 447052 [details]
Update layout test result for mac/ios
Created attachment 447071 [details]
Update layout test result for mac-catalina/mojave
Created attachment 447198 [details]
Patch for landing
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]. This change should be present in STP 139, iOS 15.4 Beta, and macOS 12.3 Beta. |
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.