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.
Created attachment 77048 [details] Screenshot of provided data: url.
Confirmed, happens in Safari 5 too.
Place to start looking is RenderTableSection::layoutRows().
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!
Thanks for testing.