Bug 137693 - box-sizing border-box not working on input field inside table cell with percentage height
Summary: box-sizing border-box not working on input field inside table cell with perce...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Critical
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2014-10-14 07:13 PDT by Martin Schaus
Modified: 2017-02-22 12:44 PST (History)
1 user (show)

See Also:

Attachments
Test Case (776 bytes, text/html)
2017-02-22 12:43 PST, Phil 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Martin Schaus 2014-10-14 07:13:27 PDT 
box-sizing border-box not working on input field inside table cell with percentage height.
I think accidently the inner padding-top and padding-left of the input field is added to the table cell, as the effect increases if you set a higher padding value to the input element.
Try the below example (Chrome wrong, IE10 ok, FF ok) 

<!doctype html>

<html>
<body>

	<div style="height: 100px; width: 100px">
		<input style="box-sizing: border-box; padding 10px; height: 100%; width: 100%" value="correct">

	</div>
	<div style="height: 100px; width: 100px">
		<table cellpadding="0" cellspacing="0" style="height: 100%; width: 100%;">
			<tbody>
				<tr>
					<td class="" style="height: 100%;">
                                               <input type="text" style="height: 100%; width: 100%; box-sizing: border-box; padding: 10px;" value="wrong">
                                          </td>
				</tr>
			</tbody>
		</table>
	</div>


</body>
</html>
Comment 1 Martin Schaus 2014-10-14 07:14:26 PDT 
Sorry, i meant padding-top and padding-bottom
Comment 2 Martin Schaus 2014-10-20 00:25:38 PDT 
This becomes critical as it worked before and a layout editor relies on this.
Comment 3 Phil 2017-02-22 12:43:41 PST 
Created attachment 302425 [details]
Test Case
Comment 4 Phil 2017-02-22 12:44:37 PST 
I've attached an additional test case that demonstrates the issue using a pair of divs with display table and table-cell with an input inside the table cell using 100% height.

It would be really great if we could get this fixed.  Thanks!