132696 - background-image on form fields only as high as current font-size

Status: VERIFIED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Brian Wilson]

I had this nifty idea of trying to achieve partial transparency on a form field

The only standards-compliant way I've found to do that so far is to set the 
background-color of the form field to transparent, and then apply a partially 
transparent background image on a SPAN that wraps around it.

But it looks like Mozilla limits the line-height of the application of the 
background-image in the SPAN to the font-size set on the SPAN, not the size of 
the height of the form control.

This doesn't seem correct to me. This *sounds* like a border case, until you 
think of the transparency applications. 

Here is the code snippet:
<form>
<span style="background-image: url
(http://www.blooberry.com/pics/right.gif);"><textarea rows=3 cols=20 name=nth 
style="background-color: transparent"></textarea></span>
</form>

It basically applies the background image upwards to the current font-size (I 
think...adding/adjusting a 'font-size' on the encapsulating span increased the 
coverage height on the textarea as the font-size increased.

This behavior is best exposed with TEXTAREA, but can be seen on button widgets 
too. Input Text fields are usually of sufficient default height compared to the 
font size to hide this behavior.

Notes: 
- Select form fields react interestingly to this scenario too...interestingly 
enough to warrant a separate bug.
- IE handles this as I expect (applying the background-image to the entire 
textarea) - isn't this correct?
- I got the idea to try this today when I saw a cutesy Flash application that 
had semi-transparent form fields. Authors/designers seem to have SOME desire to 
do this. It would be a shame to have them resort to flash.

Comment 1

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Our behavior is correct.  See CSS2, section 10.6.1 (including errata).

If you want to set the background on the form control, you should set the
background on the form control.  If that works, that is...

Comment 2

[Hixie (not reading bugmail)]

Background on inline elements fill the content height of the inline elements.
The content height of an inline element does not take into account its children.
VERIFIED.