Re: [csswg-drafts] [dialog element] <dialog> positioning should be describable in CSS (#4645)

`<center>` and `[align]` *should* both be describable via `justify-items: legacy center;` (/`legacy right` or `legacy left`); that's what we designed those values for. It does depend on browsers implementing `justify-self` on `display: block`, which hasn't happened yet. We'd be very interested to know if there are quirks we aren't handling there.

As for `<dialog>`, if I'm reading it correctly it means:

* at the time the dialog is first rendered, lay it out as an abspos non-replaced element.
* if the height is less than the height of the viewport, center it in the viewport, adjusting 'top'/'bottom' appropriately to achieve this. (Note: abspos positioning, *not* fixpos positioning! Scrolling the viewport should allow the dialgo to scroll off the screen!)
* if it's taller than the viewport, adjust 'top'/'bottom' to align it with the block-start edge of the viewport.
* if the size of the viewport changes, redo the layout+centering
* if the dialog stops being rendered, then starts again (display:none then non-none, for example), redo the layout+centering

I think that's it?

So the centering behavior, first, is a basic `align-self: safe center;` into the alignment container. 

The missing piece is just setting up the alignment container, as neither abspos nor fixpos give the desired rectangle.  This instead requires a stateful rendering-sensitive "snapshot" of the current viewport position relative to the rest of the document. The timing issue already exists for things like animations, which start their timeline when an element first generates a box, so we can lean on that concept.

I forget - I think dialog is supposed to display in the top layer, too? Is that a necessary thing to capture here?

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4645#issuecomment-574396064 using your GitHub account

Received on Tuesday, 14 January 2020 22:04:56 UTC