[selectors][css-position-4] `:modal` pseudo-class needs to account for top layer exit animations

[nt1m]

Right now, if you don't account for exit animations, the dialog ends up shifting in position before the exit animation, due to the pseudo-class not applying. This makes me concerned about what other kinds of state we might need to persist through out exit animations too...

cc @emilio @keithamus @annevk

[emilio]

@josepharhar curious, does Blink effectively keep matching :modal until the end of the animation? That seems kinda... interesting? Definitely doesn't match the spec.

[emilio]

Should this issue be against HTML? The issue afaict is here: https://html.spec.whatwg.org/#close-the-dialog

6. If is modal of subject is true, then request an element to be removed from the top layer given subject.

7. Let wasModal be the value of subject's is modal flag.

8. Set is modal of subject to false.

At no point there's any waiting for the animation to end between 6 and 8.

[josepharhar]

Isnt this the same issue as whatwg/html#9387 which was then moved to #9912

[nt1m]

#9912 might be related. I think it doesn't solve the problem of author styles on :modal changing the position though

[emilio]

Right, I think the issue is more general that UA styles

[annevk]

cc @tabatkins

[josepharhar]

So there's two pseudo-classes you could use for top layer animations on a dialog element, :open and :modal. Right now, they both match and stop matching at the same time, right? So today (in chromium) you can make a top layer exit animation using either of those:

dialog {
  opacity: 0;
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

/* dialog:open and dialog:modal are interchangeable */
dialog:open,
dialog:modal {
  opacity: 1;
}

If we made :modal continue to match while the dialog is in the top layer, then opacity would not animate during the exit animation because it would continue to have opacity:1 match, right? Authors would have to know to use :open instead of :modal, which they might already be doing, but I'm not sure if this would break sites or not.

I think it doesn't solve the problem of author styles on :modal changing the position though

What is the use case for authors? Couldn't they put their positioning styles on dialog even when it is closed? The reason that I added the :-internal-dialog-in-top-layer pseudo-class in chromium is because we have to differentiate between modal and non-modal dialogs, which is something that I don't imagine authors will be doing.