STR: 1. Load attached testcase, or this jsfiddle: https://jsfiddle.net/do8n64Lq/ EXPECTED OUTPUT: The orange area should extend outside of its container. (Its height:100% resolves to the height of its container -- and then it has explicit pixel-valued vertical padding on top of that, which should make it taller.) ACTUAL OUTPUT: The orange area is only as tall as its container. (It seems to be ignoring its padding.) Chrome 50 and Safari 9 give ACTUAL OUTPUT. Firefox and Edge both give EXPECTED OUTPUT. I can adjust the testcase to make Chrome and Safari give EXPECTED OUTPUT with either of the following tweaks: - Changing the orange thing to be display:block instead of display:table: https://jsfiddle.net/do8n64Lq/1/ (working) - Replacing the % height with an explicit pixel height. https://jsfiddle.net/do8n64Lq/2/ (working) So, this works correctly with blocks in general, and with tables that have an explicit pixel height -- but it does not work with percent-height tables, as demonstrated in the attached testcase (and the original version of my jsfiddle with no /[number]/ suffix)
Created attachment 274972 [details] testcase 1
Chrome/Blink instance of this bug: https://bugs.chromium.org/p/chromium/issues/detail?id=598134
I am able to reproduce this bug in Safari Technology Preview 154 and it show "organe" bar to be constrained within container while all other browsers (Chrome Canary 108 and Firefox Nightly 107) being overflowed. It was fixed in Chrome / Blink due to TableNg project in Chrome 91. Thanks!
table-has-box-sizing-border-box-002.html ^ https://wpt.fyi/results/css/css-tables/table-has-box-sizing-border-box-002.html?label=master&label=experimental&aligned=&q=table-has-box-sizing-border-box Live link - http://wpt.live/css/css-tables/table-has-box-sizing-border-box-002.html
<rdar://problem/122587242>