Bug 196175

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:

Keywords:

HasReduction, InRadar

Version:

WebKit Nightly Build

Hardware:

All

OS:

All

See Also:

https://github.com/web-platform-tests/wpt/pull/32026

Attachments:

Description	Flags
Simple HTML bug demo	none
Comparison of different browsers	none
To check layout test result	none
Add wpt test case	none
Update layout test result for mac/ios	none
Update layout test result for mac-catalina/mojave	none
Patch for landing	none

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	Details Formatted Diff Diff
Add wpt test case (11.36 KB, patch) 2021-12-13 02:10 PST, Joonghun Park	no flags	Details Formatted Diff Diff
Update layout test result for mac/ios (16.32 KB, patch) 2021-12-13 13:37 PST, Joonghun Park	no flags	Details Formatted Diff Diff
Update layout test result for mac-catalina/mojave (19.92 KB, patch) 2021-12-13 14:52 PST, Joonghun Park	no flags	Details Formatted Diff Diff
Patch for landing (18.73 KB, patch) 2021-12-14 20:29 PST, Joonghun Park	no flags	Details Formatted Diff Diff
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.