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.
http://www.w3.org/TR/SVG/styling.html 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.) http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes
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?
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.
Fixed by my work for bug 267664. Marking duplicate.
Need to add testcases.
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.
That's exactly what should happen. "#symbol3Text a:link" is more specific than "a:focus".
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.
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 http://www.w3.org/TR/CSS21/cascade.html#specificity "#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.
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: http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes 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.
jwatt, 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.
http://lists.w3.org/Archives/Public/www-style/2007Feb/0012.html duly filed query with CSS and SVG WG
Added reftests: http://lxr.mozilla.org/seamonkey/source/layout/reftests/svg/pseudo-classes-01.svg http://lxr.mozilla.org/seamonkey/source/layout/reftests/svg/pseudo-classes-02.svg