Percentage height on replaced elements is computed wildly incorrectly

• Component: New Bugs
• Status: NEW ---

[Marc Hoyois]

Created attachment 229032 [details]
Reduced test case

Overview:

Percentage height on non-absolutely positioned replaced elements (like <img>, <video>, <object>, etc.) should be computed relative to the height property of the parent element (replaced elements are just like any other element here). However, WebKit computes it with respect to the parent element's height OR its vertical padding, whichever is bigger. That makes no sense... By vertical padding I mean "padding-top + padding-bottom", NOT the padding-box's height.

Steps to reproduce:

Inspect the attached reduced test case:

<div style="background-color:red; height:50px; padding-bottom:100px;">
<img style="background-color:yellow; width:100%; height:100%;" src="">

Here the height of the <img> element should be 50px, but WebKit incorrectly sets it to 100px. You can play around with the numbers and add a padding-top to convince yourself that the height is computed as a percentage of the total vertical padding, provided this is larger than the height.

This bug affects the latest nightly build at the time of this post, and also Safari 7.0.3.

Notes:

1. This affects height only, not width
2. This only affects replaced elements, not ordinary elements like <div>
3. If the replaced element has position:absolute, then the height is correctly computed as a percentage of the parent's padding-box (in accordance with the spec http://www.w3.org/TR/CSS2/visudet.html)
4. Firefox computes the height correctly in all cases