[csswg-drafts] [css-boxmodel] Allow the texts in input element to be painted into the top and bottom padding area.

yachiehwu has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-boxmodel] Allow the texts in input element to be painted into the top and bottom padding area. ==
Browser tests: Firefox, Chrome, Safari, Edge
 

**Test Summary:** 

(1) In the vertical direction: when the height of the text is larger than the height of the content area.
* Firefox: Texts can only be painted into the content area. Visually, the out of the content texts is clipped.   
* Safari, Edge: Texts can be painted into the vertical padding area(top padding and bottom padding). If the top and bottom padding don’t have enough spaces, the texts are clipped on top and bottom.  
* Chrome: Texts can be painted out of the content area in the vertical direction( including the top padding/border and the bottom padding/border. And texts can even be painted out of the input element's box model in the vertical direction). Visually, the texts are painted without clipping anyway.

(2) In the horizontal direction:
None of these four browsers paints the texts out of the content in the horizontal direction.

 
Things which don't have impacts on these four browsers:
* border thickness
* line-height
* vertical-align
* -(moz|webkit)-appearance: none
* overflow: visible/hidden/auto/scroll 
* box-sizing: No matter how we change the calculation model, it will be the same, as long as the height of the content is the same after the calculation. 


Things which change on these four browsers:
* font-size: Changing the font-size could fit the texts into the content area. 
 
**Proposal:**

Allow the texts in input to be painted into the top and bottom padding area. 
With this change, this is likely to resolve the web-compatible issue as the research we described above. Also, there are some sites with this web-compatible issue have been posted on [Mozilla bug 752790](https://bugzilla.mozilla.org/show_bug.cgi?id=752790).
Furthermore, visually, for users/developers when content's background color is the same as the padding’s background color, it is not clear where the boundaries of the content area are. Ｗithout clipping the texts in the vertical padding, it makes the texts in input look more friendly to users.  


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1941 using your GitHub account

Received on Monday, 6 November 2017 06:59:41 UTC