776173 - CSS: Issues with a:link:active and a:link:focus (:active remains for too long, and they behave inconsistently)

Status: NEW

Description

[jakub.g]

Created attachment 644538 [details]
active and focus bug.html

User Agent: Mozilla/5.0 (Windows NT 5.1; rv:14.0) Gecko/20100101 Firefox/14.0.1
Build ID: 20120713134347

Steps to reproduce:

<style>
a.link3:link:focus {background-color:green; color:white;}
a.link3:link:active {background-color:red; color:white;}

a.link4:link:active {background-color:red; color:white;}
a.link4:link:focus {background-color:green; color:white;}
</style>

<a class="link3" href="3">Link 3</a>
<a class="link4" href="4">Link 4</a>

1. Drag link 3. Release mouse.
2. Click TAB from keyboard.


Actual results:

1) The behaviour of two links depends on the order of those CSS declarations
2) When I drag the first link, then stop dragging and TAB to second link, then first link have :active class applied and second has :focus class applied.


Expected results:

1) The behaviour should be independent on the order of declarations
2) After the second link got focus after TAB, the first link should get rid of :active class.

Please take a look at the test case HTML.

Same behavior for Fx14 and Fx17nightly.

Comment 1

[Ciprian Muresan [:cmuresan], Desktop Engineering QA]

Hi reporter,

I have tried to reproduce your issue on the latest Firefox release (43.0.4) and latest Nightly build () and managed to do it. However I tried this scenario also on Internet Explorer where it behaves the same as on Firefox, and also on Chrome where it does not.

Build ID 	20160105164030
User Agent 	Mozilla/5.0 (Windows NT 5.1; rv:43.0) Gecko/20100101 Firefox/43.0

Build ID 	20160112030227
User Agent 	Mozilla/5.0 (Windows NT 5.1; rv:46.0) Gecko/20100101 Firefox/46.0

Considering this I will mark this issue as new and assign a component to it in order to see the developers opinion on this.

Thanks,
Cipri