41819 - :hover not working for text/password/textarea in content area

Status: VERIFIED FIXED

(Core :: Layout: Form Controls, defect, P3)

Description

[James Lariviere]

DESCRIPTION:
Clicking an input[type="text"] puts it permanently into a state that nearly 
matches the :hover pseudo declared in CSS until the page is reloaded.

STEPS TO REPRODUCE:

1. Move cursor over any input[type="text"] to see the :hover styling markup.
2. Click one input[type="text"] and it now has the styling markup of :hover.
3. Click to another object.

ACTUAL RESULTS:

The once "focused" field renders with white text and a red background-color.  
However, the white border-color does not render as declared in :hover, instead 
the border-color remains navy.

EXPECTED RESULTS:

The once "focused" field should return to the default style declared in the 
stylesheet: cream background-color, blue text, and navy border-color.


DOES NOT WORK CORRECTLY ON:

Win98 build 200060520 (6-5-00 nightly build I think)


Note: I'll provide a second test case that shows that if you declare a input
[type="text"]:focus state that it renders its border correctly green but then 
uses the :hover background-color and text color instead of the one declared 
in :focus.

THis bug might be related to one I just posted (#41815)

Comment 1

[James Lariviere]

Attachment: test case with just :hover declared

Comment 2

[James Lariviere]

Attachment: test case with both :hover and focus declared

Comment 3

[Matthew Cline]

Confirmed on Linux build 2000060908; someone should change the platform
to "All".

Comment 4

[James Lariviere]

Now in build 60908 the bug is different from my first bug description so 
disregard it.

My first test case still shows this bug.  Disregard my second test case as 
the :focus problems have been fixed in bug #41815.

Here is the revised bug report for build 2000060908:

DESCRIPTION:

input[type="text"]:hover does not stay "hovered" with the mouse over a field.

STEPS TO REPRODUCE:

move you cursor over a input[type="text"]

ACTUAL RESULTS:

The input[type="text"] field and the :hover renders for a split second but then 
goes back to the default styled rendering.

EXPECTED RESULTS:

The input[type="text"] that has the cursor over it should render with a red 
background-color and white text and border-color until the cursor is no longer 
over the field.


DOES NOT WORK CORRECTLY ON:

Win98 build 200060908 (6-9-00 nightly build I think)

Comment 5

[rods (gone)]

It appear to work when the cursor is over the border, but when it is over the 
inside contents is doesn't do the right thing. Somehow the internal content 
isn't inheriting the hover style

reassigning

Comment 6

[rubydoo123]

assigning to SImon to take a look at this one

Comment 7

[Simon Fraser [no longer active]]

This is likey a problem with XBL styles.

Comment 8

[Matthias Kerkhoff]

Problem also applies to other control types. Changed subject. FYI, :hover on 
textarea's has no effect at all.

Comment 9

[Matthias Kerkhoff]

Oops. That was a bit too fast. Textarea has the same problem, but there seems to 
be an additional bug. (Can't change the border in :hover).

Comment 10

[Simon Fraser [no longer active]]

Because of that comment "Problem also applies to other control types", this bug 
should be owned by someone who works on HTML form widgets.

Comment 11

[John Morrison]

moving evaughan non-nsbeta3+ bugs to Future milestone, per xptoolkit triage.

Comment 12

[James Lariviere]

Attachment: new test case for :hover & :focus for all form elements

Comment 13

[Eric Vaughan]

This looks like a anonymous content bug or something. When you move into the 
inner block frame inside the textfield it thinks it has left the textfield or 
something.

Comment 14

[Hixie (not reading bugmail)]

This was probably fixed by the fix to 5693.

WORKSFORME on Win2K comm bits 2000091805, Linux comm bits 2000091806.

Comment 15

[bsharma]

Updating QA contact.

Comment 16

[James "Kovu" Russell]

This is still a problem here (Windows 98 o.g., 2000/9/27/11), viewing the third
test case indeed displays the ACTUAL RESULTS described in the bug. Hovering over
the text fields only lights the text field red when hovering over the border.
Suggesting reopen.

Comment 17

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

Reopening based on above comment to get back on radar.

Comment 18

[James Lariviere]

David,

This is a [regression] over the last day (sept 27 nightly).  The only styling
part (normal, :focus, :hover) that was wrong as of yesterday was for the input
type=file, as newly reported in bug 52813.

I think that this [regression] has something to do with work being done on your
old bug 5693.  But right now almost any element :hover is completely broken in
mozilla!

Comment 19

[James Lariviere]

Since this seems this regression caused by bug 5693, I think we should add it to
the depends.  Strangely though it seems that the :hover select and button
elements work. go figure.

Comment 20

[James Lariviere]

The work on bug 5693 did not help this bug.  I still wonder why the select,
checkbox, radio, and button work fine with :hover (check test case 3) while for
textboxes and text inputs the :hover only works on the "border" and not in the
content area of these html form controls.

Comment 21

[James Lariviere]

I'm adding a professional site url to a real functional form (not just a lab
test case) that chokes on this bug.  This bug is so noticeable (on any of our
site's pages) and a recent REGRESSION, our site will have to take :hover for
form elements off entirely.

It is too bad we have to disable this feature since most form elements (button,
checkbox, radio, select) handle :hover correctly.

Comment 22

[James Lariviere]

Rewriting summary to distinguish between this report and bug 62428.

Sorry for the SPAM.

Comment 23

[Vladimir Ermakov]

QA Contact Update

Comment 24

[James Lariviere]

Comment on attachment 12896 [details]
new test case for :hover & :focus for all form elements

><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"><html lang="en"><head><title></title>
>
><style type="text/css">
>&lt;!--
>body {
>	color: #ff0;
>	background-color: #000;
>	font-family: "MS Sans Serif", sans-serif;
>	margin: 0;
>	padding: 1em;
>	}
>input[type="text"],
>input[type="password"],
>input[type="file"],
>input[type="radio"],
>input[type="checkbox"],
>input[type="button"],
>input[type="submit"],
>input[type="reset"],
>button,
>select,
>textarea {
>	background-color: #333;
>	color: #f2a204;
>	border-color: #ff0;
>	}
>input[type="text"]:hover,
>input[type="password"]:hover,
>input[type="file"]:hover,
>input[type="radio"]:hover,
>input[type="checkbox"]:hover,
>input[type="button"]:hover,
>input[type="submit"]:hover,
>input[type="reset"]:hover,
>button:hover,
>select:hover,
>textarea:hover {
>	background-color: #f00;
>	color: #ff0;
>	border-color: #f2a204;
>	}
>input[type="text"]:focus,
>input[type="password"]:focus,
>input[type="file"]:focus,
>input[type="radio"]:focus,
>input[type="checkbox"]:focus,
>input[type="button"]:focus,
>input[type="submit"]:focus,
>input[type="reset"]:focus,
>button:focus,
>select:focus,
>textarea:focus {
>	background-color: #f2a204;
>	color: #000;
>	border-color: #ff0;
>	}
>--&gt;
></style></head>
>
>
><body>
>
><p>Why doesn't the Mozilla.org website use any CSS for presentation?</p>
>
><form>
>
><table border="1">
>
><tbody><tr>
><td width="800"><input type="text" value="this is a text input"/></td>
></tr>
><tr>
><td><input type="text" value="this is a text input"/></td>
></tr>
><tr>
><td><input type="password" value="this is a password input"/></td>
></tr>
><tr>
><td><input type="password" value="this is a password input"/></td>
></tr>
><tr>
><td><input type="file"/></td>
></tr>
><tr>
><td><input type="file"/></td>
></tr>
><tr>
><td><input type="radio" name="group"/> <input type="radio" name="group" checked="checked"/> <input type="radio" name="group"/> <input type="radio" name="group"/> <input type="radio" name="group"/></td>
></tr>
><tr>
><td><input type="checkbox"/> <input type="checkbox" checked="checked"/> <input type="checkbox"/> <input type="checkbox"/> <input type="checkbox"/></td>
></tr>
><tr>
><td><input type="button" value="input button1"/> <input type="button" value="input button2"/> <input type="button" value="input button3"/></td>
></tr>
><tr>
><td><input type="submit" value="submit1"/> <input type="submit" value="submit2"/> <input type="submit" value="submit3"/></td>
></tr>
><tr>
><td><input type="reset" value="reset1"/> <input type="reset" value="reset2"/> <input type="reset" value="reset3"/></td>
></tr>
><tr>
><td><button type="submit">Button 1</button> <button type="submit">Button 2</button> <button type="submit">Button 3</button></td>
></tr>
><tr>
><td><select><option _moz-option-selected="">one line select</option><option>2</option><option>3</option></select> <select><option _moz-option-selected="">one line select</option><option>2</option><option>3</option></select></td>
></tr>
><tr>
><td><textarea defaultvalue="THis is a textarea" value="THis is a textarea"/> <textarea defaultvalue="THis is a textarea" value="THis is a textarea"/></td>
></tr>
>
></tbody></table>
>
></form>
>
></body></html>

Comment 25

[James Lariviere]

sorry for the SPAM I thought I could edit my attachment.  again sorry.

Comment 26

[basic]

with build 2001122703 win32 trunk

the first testcase (the one with only :hover declared) triggers the hover when
the mouse cursor is over the border *and* ... when something is typed into the
<input> box.

This happens regardless of the position of the mouse cursor (meaning that the
mouse does not need to be over the input box). And when this happens, if one
moves the mouse cursor within the page (if it is not in the page nothing
happens) it goes back to normal (even if the mouse is over the input box).

Seems to me that :hover somehow gets tied to the text cursor rather than the
mouse cursor in an input box (note that I've tested this with password and
textarea with the same results).

Another test is to tab to the input box rather than using the mouse. When an
input box gain focus it triggers the hover ! Note that this does not happen when
the focus before the tab is not in the page. 

Comment 27

[Matthew Mastracci]

With the changes from 5693, all of the testcases work 100% as expected, with the
exception of the file picker - it doesn't get the :focus style as expected (but
:hover works).

If the file testcase could be fixed, this bug could be closed.  

Comment 28

[Greg K.]

All form elements in the third testcase react to :hover, so this WorksForMe
using FizzillaCFM/2002071208. Since this bug specifies :hover rather than
:focus, the remaining issue of :focus not working on the file picker should
probably be filed as a new bug and this one resolved.

Comment 29

[James Lariviere]

yep agree that it has been fixed (prob because of bug 5693).

marking.

Comment 30

[Vladimir Ermakov]

verifying on build 2002-07-12-08-trunk.