Define :user-valid and :user-invalid pseudo-classes

[annevk]

User agents are implementing :user-valid and :user-invalid pseudo-classes, but it seems these are not yet defined in HTML so there's some potential for issues with them.

cc @whatwg/css

[domenic]

Note some discussion at web-platform-tests/interop#178 (comment)

[nt1m]

My implementation in WebKit/WebKit#7730 is matching the :user-* pseudos between the last user-initiated form submission (if any) and the last user-initiated change event. If there isn't a user-initiated change event, the pseudos do not match.

User-initiated form submissions acts like a "reset" for the pseudo-class as the CSS spec defines: https://w3c.github.io/csswg-drafts/selectors/#user-pseudos

From an user-POV this seems to match FF's behavior, though I haven't looked deeply into how it works. cc @emilio

Can we spec it that way?

[annevk]

Thanks, that helps, but I have some more questions.

Should requestSubmit() count as a "user" submit? What if you do click() on a submit button? Or are we adding a "user activated" check for this somewhere? Form submission doesn't have that currently except if the target is a new window. And at what point in the form submission algorithm does it start counting? (As in, ideally we identify how to modify the form submission algorithm to set that bit of state.)

[nt1m]

I use UserGestureIndicator::processingUserGesture() which matches anything that comes from the an user gesture (keypress, click) and that happens in the same run-loop as that user gesture (e.g. any submission done async won't match).

Perhaps a better a model would be to just make every form submission reset the state. (I haven't dived too deeply into what FF does)

[nt1m]

I have a rough vision of how to spec user-valid and invalid