Bug 17619 - defining line height affects height of text box
: defining line height affects height of text box
Status: RESOLVED FIXED
: WebKit
Forms
: 528+ (Nightly build)
: PC Windows XP
: P2 Normal
Assigned To:
: http://developers.facebook.com/tools....
: HasReduction
:
:
  Show dependency treegraph
 
Reported: 2008-02-29 16:36 PST by
Modified: 2013-12-23 22:10 PST (History)


Attachments
screenshot (136.82 KB, image/jpeg)
2008-02-29 16:37 PST, jasneet
no flags Details
reduction (238 bytes, text/html)
2008-02-29 16:37 PST, jasneet
no flags Details
Patch (15.55 KB, patch)
2013-08-29 05:26 PST, gur.trio@gmail.com
no flags Review Patch | Details | Formatted Diff | Diff
Archive of layout-test-results from webkit-ews-10 for mac-mountainlion-wk2 (515.35 KB, application/zip)
2013-08-29 08:18 PST, Build Bot
no flags Details
Archive of layout-test-results from webkit-ews-01 for mac-mountainlion (1.07 MB, application/zip)
2013-08-29 09:03 PST, Build Bot
no flags Details
Patch (60.69 KB, patch)
2013-09-03 03:16 PST, gur.trio@gmail.com
no flags Review Patch | Details | Formatted Diff | Diff
Patch (60.70 KB, patch)
2013-09-03 21:49 PST, gur.trio@gmail.com
no flags Review Patch | Details | Formatted Diff | Diff


Note

You need to log in before you can comment on or make changes to this bug.


Description From 2008-02-29 16:36:15 PST
I Steps:
Go to
http://developers.facebook.com/tools.php?fbml

II Issue:
Notice the height of text box next to "user:" and "profile:"

III Conclusion: Issue is caused due to defining line-height:32px;
On varying the line height say 30px, 20px ; the height of input text box also varies in Safari but no effect seen in FF.

IV Other browsers: 
FF: ok
Opera: ok
IE 7: ok

V Nightly tested: 30236
------- Comment #1 From 2008-02-29 16:37:21 PST -------
Created an attachment (id=19463) [details]
screenshot
------- Comment #2 From 2008-02-29 16:37:52 PST -------
Created an attachment (id=19464) [details]
reduction
------- Comment #4 From 2013-08-29 05:26:22 PST -------
Created an attachment (id=209966) [details]
Patch
------- Comment #5 From 2013-08-29 05:28:26 PST -------
Giving line height to input elements increase the height of the element. To make it work similiar as Mozilla and IE line-height :normal should be applied for input elements.

https://bugzilla.mozilla.org/show_bug.cgi?id=82265

Hi Darin. Could you please review this. Thanks
------- Comment #6 From 2013-08-29 08:18:38 PST -------
(From update of attachment 209966 [details])
Attachment 209966 [details] did not pass mac-wk2-ews (mac-wk2):
Output: http://webkit-queues.appspot.com/results/1624635

New failing tests:
fast/forms/placeholder-position.html
------- Comment #7 From 2013-08-29 08:18:39 PST -------
Created an attachment (id=209983) [details]
Archive of layout-test-results from webkit-ews-10 for mac-mountainlion-wk2

The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews.
Bot: webkit-ews-10  Port: mac-mountainlion-wk2  Platform: Mac OS X 10.8.4
------- Comment #8 From 2013-08-29 09:03:53 PST -------
(From update of attachment 209966 [details])
Attachment 209966 [details] did not pass mac-ews (mac):
Output: http://webkit-queues.appspot.com/results/1581987

New failing tests:
fast/workers/termination-with-port-messages.html
fast/forms/placeholder-position.html
------- Comment #9 From 2013-08-29 09:03:56 PST -------
Created an attachment (id=209988) [details]
Archive of layout-test-results from webkit-ews-01 for mac-mountainlion

The attached test failures were seen while running run-webkit-tests on the mac-ews.
Bot: webkit-ews-01  Port: mac-mountainlion  Platform: Mac OS X 10.8.4
------- Comment #10 From 2013-09-03 03:16:37 PST -------
Created an attachment (id=210346) [details]
Patch
------- Comment #11 From 2013-09-03 19:10:19 PST -------
(From update of attachment 210346 [details])
View in context: https://bugs.webkit.org/attachment.cgi?id=210346&action=review

> Source/WebCore/css/html.css:425
> +input {
> +    line-height:normal !important;
> +}

Trying to prevent this with a user-agent stylesheet change will make line-height value of normal visible in getComputedStyle on the input element; because of that I think this is wrong. Unless the specification or standard practice in other browsers is to return "normal" as the computed style for the input element. Instead we can turn off the line-height inside the shadow DOM constructed by the input element somewhere in the RenderTextControl class.

Can you please test what getComputedStyle does in these other browsers?
------- Comment #12 From 2013-09-03 21:27:00 PST -------
(In reply to comment #11)
> (From update of attachment 210346 [details] [details])
> View in context: https://bugs.webkit.org/attachment.cgi?id=210346&action=review
> 
> > Source/WebCore/css/html.css:425
> > +input {
> > +    line-height:normal !important;
> > +}
> 
> Trying to prevent this with a user-agent stylesheet change will make line-height value of normal visible in getComputedStyle on the input element; because of that I think this is wrong. Unless the specification or standard practice in other browsers is to return "normal" as the computed style for the input element. Instead we can turn off the line-height inside the shadow DOM constructed by the input element somewhere in the RenderTextControl class.
> 
> Can you please test what getComputedStyle does in these other browsers?

The Test case input-line-height.html shows the following results. The test case compares getComputedStyle's line-height with style's line-height

IE : FAIL for all inputs i.e getComputedStyle's line-height and style's line-height are same (both values show 50px)
Mozilla : PASS for all inputs i.e getComputedStyle's line-height and style's line-height are different.(getComputedStyle's line height shows 16px and style's line height shows 50px)

Mozilla as I can see is doing through .css
------- Comment #13 From 2013-09-03 21:30:14 PST -------
(From update of attachment 210346 [details])
View in context: https://bugs.webkit.org/attachment.cgi?id=210346&action=review

>>> Source/WebCore/css/html.css:425
>>> +}
>> 
>> Trying to prevent this with a user-agent stylesheet change will make line-height value of normal visible in getComputedStyle on the input element; because of that I think this is wrong. Unless the specification or standard practice in other browsers is to return "normal" as the computed style for the input element. Instead we can turn off the line-height inside the shadow DOM constructed by the input element somewhere in the RenderTextControl class.
>> 
>> Can you please test what getComputedStyle does in these other browsers?
> 
> The Test case input-line-height.html shows the following results. The test case compares getComputedStyle's line-height with style's line-height
> 
> IE : FAIL for all inputs i.e getComputedStyle's line-height and style's line-height are same (both values show 50px)
> Mozilla : PASS for all inputs i.e getComputedStyle's line-height and style's line-height are different.(getComputedStyle's line height shows 16px and style's line height shows 50px)
> 
> Mozilla as I can see is doing through .css

OK, lets go with the CSS solution.

There should be a space after the colon to match the rest of the html.css file.
------- Comment #14 From 2013-09-03 21:49:05 PST -------
Created an attachment (id=210429) [details]
Patch
------- Comment #15 From 2013-09-04 20:37:41 PST -------
(In reply to comment #14)
> Created an attachment (id=210429) [details] [details]
> Patch

Uploaded new patch as per the review comments.
------- Comment #16 From 2013-09-08 23:27:32 PST -------
y(In reply to comment #13)
> (From update of attachment 210346 [details] [details])
> View in context: https://bugs.webkit.org/attachment.cgi?id=210346&action=review
> 
> >>> Source/WebCore/css/html.css:425
> >>> +}
> >> 
> >> Trying to prevent this with a user-agent stylesheet change will make line-height value of normal visible in getComputedStyle on the input element; because of that I think this is wrong. Unless the specification or standard practice in other browsers is to return "normal" as the computed style for the input element. Instead we can turn off the line-height inside the shadow DOM constructed by the input element somewhere in the RenderTextControl class.
> >> 
> >> Can you please test what getComputedStyle does in these other browsers?
> > 
> > The Test case input-line-height.html shows the following results. The test case compares getComputedStyle's line-height with style's line-height
> > 
> > IE : FAIL for all inputs i.e getComputedStyle's line-height and style's line-height are same (both values show 50px)
> > Mozilla : PASS for all inputs i.e getComputedStyle's line-height and style's line-height are different.(getComputedStyle's line height shows 16px and style's line height shows 50px)
> > 
> > Mozilla as I can see is doing through .css
> 
> OK, lets go with the CSS solution.
> 
> There should be a space after the colon to match the rest of the html.css file.

Hi Darin. Anything else needs to be done for this issue?
------- Comment #17 From 2013-09-08 23:54:17 PST -------
(From update of attachment 210429 [details])
Clearing flags on attachment: 210429

Committed r155324: <http://trac.webkit.org/changeset/155324>
------- Comment #18 From 2013-09-08 23:54:20 PST -------
All reviewed patches have been landed.  Closing bug.
------- Comment #19 From 2013-12-23 22:10:22 PST -------
*** Bug 17751 has been marked as a duplicate of this bug. ***