Bug 59613 – Speech input button layout issues with padding and border.

• Status: RESOLVED
• Resolution: FIXED
• Component: Forms

[Satish Sampath]

The bounding box where the mouse cursor turns from an text insert cursor to a pointer is misaligned with the speech input mic icon. Here's one example that illustrates the problem: http://slides.html5rocks.com/#speech-input - the mic icon appears to partially overlap the right padding and for the right half of the mic icon the cursor turns into the text insert cursor. Ideally the button should appear inside and honour the padding of the input field.

[Satish Sampath]

Created attachment 91300 [details]
Patch

[Tony Gentilcore]

Comment on attachment 91300 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=91300&action=review

> Source/WebCore/ChangeLog:8
> +        No new tests, existing tests cover this code.

Is it really impossible to add a regression test for this bug? Seems like it would be easy to add a test for an input with padding, and click in particular locations to verify the bounds of the button target.

> Source/WebCore/rendering/RenderTextControlSingleLine.cpp:311
> +            int x = width() - borderRight() - paddingRight() - button->width();

Does this work for RTL? Seems worth adding an rtl input to the click target test suggested above.

[Satish Sampath]

Created attachment 91494 [details]
Updated an existing layout test to check for padding and rtl cases. Also fixed the code to handle RTL cases properly.

[Satish Sampath]

Committed r85190: <http://trac.webkit.org/changeset/85190>

[Pavel Feldman]

Committed r85191: <http://trac.webkit.org/changeset/85191>