Last Comment Bug 317270 - pseudo classes :link :visited :focus :active not supported
: pseudo classes :link :visited :focus :active not supported
Product: Core
Classification: Components
Component: SVG (show other bugs)
: Trunk
: All All
: -- major (vote)
: ---
Assigned To: General SVG Bugs
: Hixie (not reading bugmail)
: Jet Villegas (:jet)
Depends on:
  Show dependency treegraph
Reported: 2005-11-21 03:41 PST by jonathan chetwynd
Modified: 2007-03-16 07:07 PDT (History)
2 users (show)
jwatt: in‑testsuite+
See Also:
Crash Signature:
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---

demonstration of various pseudo classes (841 bytes, image/svg+xml)
2005-11-21 03:42 PST, jonathan chetwynd
no flags Details

Description jonathan chetwynd 2005-11-21 03:41:49 PST
User-Agent:       Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8) Gecko/20051111 Firefox/1.5
Build Identifier: Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8) Gecko/20051111 Firefox/1.5

however 'a' and a:hover are.

the first 'music' should be green

having clicked on 'music' that link should be purple

tab key navigate to 'music' should be yellow

Reproducible: Always

Actual Results:  
only the fill set for anchors, and the hover pseudo class are working

In terms of accessibility and web standardisation this makes the SVG experience non-standard.

It is a considerable difficulty for web designers to create a work-around.
Comment 1 jonathan chetwynd 2005-11-21 03:42:40 PST
Created attachment 203774 [details]
demonstration of various pseudo classes
Comment 2 jonathan chetwynd 2005-11-21 03:44:18 PST

CSS2's  dynamic pseudo-classes :hover, :active and :focus and pseudo-classes  :first-child, :visited, :link and :lang. The remaining CSS2 pseudo-classes, including those having to do with generated content, are not part of the SVG language definition. (Note: an SVG element gains focus when it is selected. See Text selection.)
Comment 3 Anne (:annevk) 2005-11-21 05:39:53 PST
The other ones are not pseudo-classes, but pseudo-elements. :active does work. :link does not work yet because XLink is not recognized on the SVG namespace namespace (that it works on the svg:a element is some workaround). :focus does not apply because the elements can not be focused. That bug is also already filed.

What's new here?
Comment 4 jonathan chetwynd 2005-11-21 07:17:21 PST
reply to comment #3 Anne, please could you point to the bug already filed?
I ran a search for pseudo and no relevant bugs came up

why do you say "focus does not apply because the elements can not be focused." ?
there are 2 anchors in the attachment, and using tab key one can give focus to either, and visit the destination URI by then depressing the enter or return key.

do you have examples demonstrating :link and :active working?

Anne, according to the W3-SVG specification in comment #2 these are all pseudo-classes, my apologies if this is wrong, I am merely following their methodology.
Comment 5 Jonathan Watt [:jwatt] 2007-01-06 09:45:30 PST
Fixed by my work for bug 267664. Marking duplicate.

*** This bug has been marked as a duplicate of bug 267664 ***
Comment 6 Boris Zbarsky [:bz] (still a bit busy) 2007-01-07 18:36:49 PST
Need to add testcases.
Comment 7 jonathan chetwynd 2007-02-01 05:56:06 PST
open the attachment.
tab to the first anchor, it doesn't change colour to yellow
the second one does.

my apologies if you would prefer that a separate bug was filed.
Comment 8 Jonathan Watt [:jwatt] 2007-02-01 09:09:58 PST
That's exactly what should happen. "#symbol3Text a:link" is more specific than "a:focus".
Comment 9 jonathan chetwynd 2007-02-01 10:16:32 PST
yes but shouldn't onevent handling over-ride this?

either way there is a problem.

click on the first link,
now mouseover changes to red and focus changes to yellow.

so this is an issue.
Comment 10 Jonathan Watt [:jwatt] 2007-02-01 14:42:06 PST
No "onevent handling" does not override anything. In fact it's not a meaningful phrase here. What we have is a pseudo-class (:focus), and that's CSS. As such the behavior here is governed by the rules of CSS. Please read

"#symbol3Text a:link" has a specificity of 0,1,1,1 (one id attribute (#symbol3Text), one pseudo-class (:link) and one element name (a)).

"a:focus" has a specificity of 0,0,1,1 (one pseudo-class (:focus) and one element name (a)).

0,1,1,1 beats 0,0,1,1. Therefore the value for the 'fill' property specified by the selector "#symbol3Text a:link" beats the value of the 'fill' property specified by the "a:focus" selector, and so the text _should_ be green even when focused. The behavior you're seeing is as it should be.
Comment 11 Jonathan Watt [:jwatt] 2007-02-01 15:02:48 PST
Oh, and about the behavior _after_ the link has been visited, the pseudo-class :link only applies to links that have not yet been visited. See:

Therefore the "#symbol3Text a:link" selector no longer matches at all once you've visited the link. Hence the behavior you're seeing is again correct.
Comment 12 jonathan chetwynd 2007-02-01 23:12:22 PST

really you have my sympathy and thanks.

I'm looking at this from an accessibility perspective, particualrly people with learning disabilities, and it's awful.

my apologies, and I'll try to find time to take this up with the relevant working groups.
Comment 13 jonathan chetwynd 2007-02-08 05:35:39 PST

duly filed query with CSS and SVG WG

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