Last Comment Bug 480386 - Combining dynamic pseudo-classes hover & focus fails!
: Combining dynamic pseudo-classes hover & focus fails!
Product: Core
Classification: Components
Component: CSS Parsing and Computation (show other bugs)
: unspecified
: x86 Windows XP
: -- major (vote)
: ---
Assigned To: Nobody; OK to take it and work on it
: Jet Villegas (:jet)
Depends on:
  Show dependency treegraph
Reported: 2009-02-26 13:00 PST by John A. Bilicki III
Modified: 2009-02-28 17:57 PST (History)
4 users (show)
See Also:
Crash Signature:
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---

Test Case #1 (734 bytes, application/xhtml+xml)
2009-02-26 23:27 PST, John A. Bilicki III
no flags Details

Description John A. Bilicki III 2009-02-26 13:00:41 PST
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv: Gecko/2009011913 Firefox/3.0.6
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv: Gecko/2009011913 Firefox/3.0.6

a:focus:hover {background-color: #000; color: #fff;} defined by the W3C here...

Reproducible: Always

Steps to Reproduce:
Create an element, add the selector, trigger the selector moving your cursor over the anchor element, moving it away from the anchor, and then tabbing to the element to give it focus using the tab key on your keyboard.
Actual Results:  
Nothing happens.

Expected Results:  
The same properties/values should be applied from the same selector.

This is a *MAJOR* oversight as it would help reduce bandwidth overall and make it insanely easy to add keyboard accessibility to EXISTING code.
Comment 1 Neil Deakin 2009-02-26 18:06:20 PST
Works fine here. When I tab focus the link and hover over it, the link changes to white text on black.
Comment 2 Neil Deakin 2009-02-26 18:07:44 PST
Maybe you're thinking that you want:

a:focus, a:hover { ... }

if you want the highlight when focused OR hovered.
Comment 3 John A. Bilicki III 2009-02-26 23:27:55 PST
Created attachment 364485 [details]
Test Case #1

Did you read the spec? The whole point was not  *NOT* repeat the selector twice for a different pseudo-element. I've attached a test case which does not work in Gecko 1.9.0x and Gecko 1.9.2x.
Comment 4 Jesse Ruderman 2009-02-26 23:37:11 PST
The spec's wording around the example is a little confusing, but pretty much everyone interprets the spec the same way Firefox does:

It would be strange if pseudo-classes were "or" while everything else (id selectors, class selectors, tag names) were "and".
Comment 5 John A. Bilicki III 2009-02-27 01:34:57 PST
Gecko (the rendering engine), not Firefox (the program that uses the engine) doesn't implement the standard. It's not if *other* engines interpret it correctly, it's if THIS engine interprets it correctly; it does not.

CSS2 has been around since 1998 and this bug is valid as I have pointed out. The spec is *VERY* clear: it "combines" two pseudo-elements (focus and hover) in to a single selector so to *AVOID* having to *REPEAT* and entire class. This is more then obvious if you read the page and have a proper understanding of CSS.
Comment 6 Jesse Ruderman 2009-02-27 09:16:39 PST
I disagree, but I guess one of our real CSS experts will need to mark this as invalid rather than me.
Comment 7 Jesse Ruderman 2009-02-27 09:17:14 PST
Can you point to the part of the CSS2.1 or CSS3 Selectors spec that led you to thinking what you think?
Comment 8 David Bolter [:davidb] 2009-02-27 11:21:12 PST
I think one of two cases is true, either:
1. gecko does it right, or
2. "The last selector matches A elements that are in pseudo-class :focus and in pseudo-class :hover." should say "The last selector matches A elements that are in pseudo-class :focus *OR* in pseudo-class :hover."

In order to be clear, the spec has to use the words "and" and "or" very carefully.
Comment 9 John A. Bilicki III 2009-02-28 06:40:46 PST
After the bullet list on the link I'm referencing...

"These pseudo-classes are not mutually exclusive. An element may match several of them at the same time."


"The last selector matches A elements that are in pseudo-class :focus and in pseudo-class :hover."

"and in" means the selector matches *both* pseudo-classes...and "the last selector" means the selector directly above quoted text.

This is *EXPLICITLY* defined.
Comment 10 philippe (part-time) 2009-02-28 17:48:28 PST
First off, better refer to the CSS 2.1 docs
or CSS3 selectors

secondly, the sentence you quote in comment 9
> The last selector matches a elements that are in the pseudo-class :focus and in the pseudo-class :hover.

Note the 'and'. The element must be in both states at the same time for the selector to apply. It is not enough for the element to be focussed for that selector to apply.

As described this bug is invalid.
Comment 11 David Baron :dbaron: ⌚️UTC-10 2009-02-28 17:57:06 PST
Comment 12 David Baron :dbaron: ⌚️UTC-10 2009-02-28 17:57:58 PST
Please note that in the testcase, if you tab to the link and then move the mouse over the focused link, the selector does apply.  This is exactly as it should be.  The selector applies when the link is focused *and* hovered at the same time.

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