131486 2014-04-10 01:51:06 -0700 Percentage height on replaced elements is computed wildly incorrectly 2014-04-10 01:51:06 -0700 1 1 1 Unclassified WebKit New Bugs 528+ (Nightly build) Mac (Intel) OS X 10.9 NEW P2 Normal --- 1 marc.hoyois webkit-unassigned oldest_to_newest 999476 0 229032 marc.hoyois 2014-04-10 01:51:06 -0700 Created attachment 229032 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 229032 2014-04-10 01:51:06 -0700 2014-04-10 01:51:06 -0700 Reduced test case test.html text/html 207 marc.hoyois PCFET0NUWVBFIGh0bWw+DTxodG1sPg08aGVhZD4NPC9oZWFkPg08Ym9keT4NPGRpdiBzdHlsZT0i YmFja2dyb3VuZC1jb2xvcjpyZWQ7aGVpZ2h0OjUwcHg7cGFkZGluZy1ib3R0b206MTAwcHg7Ij4N PGltZyBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjp5ZWxsb3c7d2lkdGg6MTAwJTsgaGVpZ2h0OjEw MCU7IiBzcmM9IiI+DTwvZGl2Pg08L2JvZHk+DTwvaHRtbD4N