317270 - pseudo classes :link :visited :focus :active not supported

Status: RESOLVED WORKSFORME

(Core :: SVG, defect)

Description

[jonathan chetwynd]

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]

Attachment: demonstration of various pseudo classes

Comment 2

[jonathan chetwynd]

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

Comment 3

[Anne (:annevk)]

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]

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]]

Fixed by my work for bug 267664. Marking duplicate.

Comment 6

[Boris Zbarsky [:bzbarsky]]

Need to add testcases.

Comment 7

[jonathan chetwynd]

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]]

That's exactly what should happen. "#symbol3Text a:link" is more specific than "a:focus".

Comment 9

[jonathan chetwynd]

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]]

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.

Comment 11

[Jonathan Watt [:jwatt]]

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.

Comment 12

[jonathan chetwynd]

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.

Comment 13

[jonathan chetwynd]

http://lists.w3.org/Archives/Public/www-style/2007Feb/0012.html

duly filed query with CSS and SVG WG

Comment 14

[Jonathan Watt [:jwatt]]

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