UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36

Steps to reproduce the problem:
1. Create a button element (let's call it "btn")
2. Create a function "isActive" with the body - console.debug(btn.matches(':active'));
3. Add isActive as an event listener for 'mousedown', 'mouseup', 'keydown', and 'keyup' on the button
4. Attach the button to the DOM (or, if already part of the DOM, do nothing)
5. Using a mouse or trackpad, press down on the button, and then release
6. Notice how "true" was logged when the mouse was pressed down, followed by "false"
7. Activate the button by pressing the spacebar down, and then quickly releasing
8. Observe the logged output

What is the expected behavior?
Similar to the mousedown event, "true" should be logged on keydown, and "false" should be logged on keyup.

What went wrong?
The opposite of what's expected happens. When the spacebar is pressed, "false" is logged. When it is released, "true" is logged. However if the spacebar is held down, "true" begins to be logged.

Did this work before? N/A 

Chrome version: 52.0.2743.82  Channel: stable
OS Version: OS X 10.11.6
Flash Version: Shockwave Flash 22.0 r0

Reproducible test case at https://jsfiddle.net/2vmtochy/

It seems like this is a race condition between when the keydown event is fire and when the button becomes active. A workaround seems to be  wrapping the matches() call in a requestAnimationFrame, which I've included in the fiddle.

I would imagine that this behavior should be deterministic. According to the specification, "The element is being activated if it is in a formal activation state and it is not disabled...For example, if the user is using a keyboard to push a button element by pressing the space bar, the element would match this pseudo-class in between the time that the element received the keydown event and the time the element received the keyup event." (https://html.spec.whatwg.org/multipage/scripting.html#selector-active)