Bug 51362

Summary:

box-sizing: border-box and percentage heights double-count border and padding width when in a table cell

Product:

WebKit

Reporter:

Tab Atkins <tabatkins>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED CONFIGURATION CHANGED

Severity:

Normal

CC:

ahmad.saleem792, ap, bfulgham, fsamuel, hyatt, jamesr, jchaffraix, mitz, rniwa, simon.fraser, tony

Priority:

Version:

528+ (Nightly build)

Hardware:

OS:

Linux

URL:

data:text/html,<!doctype html><table><tr><td style="height: 80px; border: 1px solid black; padding: 0;"><div style="height: 100%; background: silver; -webkit-box-sizing: border-box; border: 5px solid;">foo</div>

Attachments:

Description	Flags
Screenshot of provided data: url.	none
Safari 15.5 matches other browsers	none

Tab Atkins

Reported 2010-12-20 16:14:55 PST

Chrome Version : 8.0.552.224 (Official Build 68599) beta URLs (if applicable) : data:text/html,<!doctype html><table><tr><td style="height: 80px; border: 1px solid black; padding: 0;"><div style="height: 100%; background: silver; -webkit-box-sizing: border-box; border: 5px solid;">foo</div> Other browsers tested: Add OK or FAIL after other browsers where you have tested this issue: Safari 5: didn't test Firefox 3.x: OK IE 7/8: N/A (doesn't support box-sizing) What steps will reproduce the problem? -------------------------------------- 1. Create a table, where a cell contains an element with box-sizing:border-box, percentage height (for ease of viewing, use 100%), and a non-zero border or padding. The cell should have a definite height set that is larger than the element. What is the expected result? ---------------------------- With height:100%, the element should fill the cell exactly. What happens instead? --------------------- The vertical borders or padding are double-counted when figuring the height of the element, so, for example, in the provided data url there is 5px of empty space above and below the element's borders.

Attachments
Screenshot of provided data: url. (642 bytes, image/png) 2010-12-20 16:16 PST, Tab Atkins	no flags	Details
Safari 15.5 matches other browsers (520.97 KB, image/png) 2022-07-12 12:52 PDT, Ahmad Saleem	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Tab Atkins

Comment 1 2010-12-20 16:16:11 PST

Created attachment 77048 [details] Screenshot of provided data: url.

Simon Fraser (smfr)

Comment 2 2010-12-20 16:33:14 PST

Confirmed, happens in Safari 5 too.

Simon Fraser (smfr)

Comment 3 2010-12-20 16:47:03 PST

Place to start looking is RenderTableSection::layoutRows().

Ahmad Saleem

Comment 4 2022-07-12 12:52:44 PDT

Created attachment 460820 [details] Safari 15.5 matches other browsers I am unable to reproduce this bug using test case from Description and URL field in Safari 15.5 on macOS 12.4. I changed the test case into following JSFiddle: Link - https://jsfiddle.net/3qz2t1ah/show Later, as can be seen from attached screenshot, Safari renders the output same as other browser and does not show behavior similar to attached reference screenshot. I think it was fixed along the way and now can be marked as "RESOLVED CONFIGURATION CHANGED". In case, if I am testing incorrectly, please test accordingly. Thanks!

Ryosuke Niwa

Comment 5 2022-07-12 13:11:04 PDT

Thanks for testing.

Note You need to log in before you can comment on or make changes to this bug.