[Webkit-unassigned] [Bug 101848] REGRESSION (r133351): Layout issues at bugs.webkit.org, all standard buttons have incorrect text baseline

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=101848


Zalan Bujtas <zalan at apple.com> changed:

           What    |Removed                     |Added
----------------------------------------------------------------------------
                 CC|                            |zalan at apple.com




--- Comment #6 from Zalan Bujtas <zalan at apple.com>  2013-04-10 03:59:12 PST ---
Interestingly, while <input type='button' renders the text off by one pixel, <button> has the text at the correct position.
The sub-pixel layout rounding at InlineTextBox::paint() pushes the text 'down' by one pixel. The reason why the text position stays the same after enabling sub-pixel for <button> but not for <input type='button' is that they use different top/bottom paddings. With <button>'s padding no rounding happens at http://trac.webkit.org/browser/trunk/Source/WebCore/rendering/InlineTextBox.cpp#L505

<input type='button' has hardcoded values for padding (top:0x, bottom:0px) while <button> applies the default style values(top:2px bottom: 3px -html.css). Normal button size is 18px (hardcoded again) and the line spacing (default font) for the text is 13px. With 0px padding, the content position is calculated as (18px-13px)/2 at RenderFlexibleBox::updateAutoMarginsInCrossAxis(), which, after the roundedIntPoint() call at InlineTextBox::paint(), ends up 2px for non-sub-pixel and 3px for sub-pixel. Hence the off by one pixel regression.

Before sub-pixel:
<input type=button -> padding-top/bottom: 0px -> calculated 2px off of top border
<button> -> padding-top:2px, padding-bottom:3px,
same, 2px adjusted text position result

With sub-pixel:
<input type=button -> padding-top/bottom: 0px -> rounded 3px off of top border
<button> -> padding-top:2px, padding-bottom:3px
off by one for <input type=button


1, Removing the hard-coded padding values fixes the off by one issue, but it makes the <input type=button look different when user css defines padding other than the default. (/LayoutTests/fast/forms/basic-buttons.html)
2, Hardcoding it to top:2px bottom:3px also fixes the text placement (and it even works for the different control sizes(hardcoded): 21,15,13) but highly error prone.
3, As per Darin's suggestion, fix the rounding to round the pixel value 'up' vertical direction instead of 'down'.

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.