[Webkit-unassigned] [Bug 196175] New: Height is calculated incorrectly when using display:table, box-sizing:border-box and padding

[bugzilla-daemon at webkit.org]

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

            Bug ID: 196175
           Summary: Height is calculated incorrectly when using
                    display:table, box-sizing:border-box and padding
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: All
                OS: All
            Status: NEW
          Keywords: HasReduction
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: webkitonly at o2.pl

Created attachment 365810

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

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.

-- 
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/20190323/90ffdede/attachment-0001.html>