[css-round-display] Add safe area properties/constants

[grorg]

Another part of #1693

[jakearchibald]

Any thoughts on safe-area-inset — a combination that can be used in shorthands? Seems useful as it's likely all will be applied as a padding/margin.

[grorg]

@jakearchibald Maybe. But generally you don't use them all at once. For example, if you have a bottom bar you don't really care about the top inset. You just want to make sure any content in your bar avoids the bottom, left and right edges.

[grorg]

You also tend to use them in calc expressions (i.e. adding to an existing padding amount).

[jihyerish]

@grorg Thanks for the inspiring new features! 😄
I think the shorthand safe-area-inset would be useful.
In a circular display, mostly for the main menu page, the insets in all directions are the same.
But as you mentioned, something like the list, we don't need to consider safe-area-inset-top and safe-area-inset-bottom.

[jakearchibald]

@grorg you're right. Outside of simple demos, you'd rarely use all 4 on a single element. I guess it's more productive to watch out for mistakes in documentation & correct them. Ta!

[frivoal]

Should we (normatively) say what happens when the screen, instead of a rounded corner rectangle, is a circle? Strictly speaking, there's not safe are, but some areas are safer than others. Should this be up to the UA, safe-area-inset-* being 0, or safe-area-inset-* being large enough to reduce the remaining area of the screen to 0?

[Jessidhia]

@frivoal I'm not overly familiar with this but the most trivial guess would be that the insets should then be the difference between viewport-fit=cover and viewport-fit=contain. This is probably not the best way to go about it, but it definitely is the easiest way to ensure rectangular content is not clipped if it abides by the safe area.

[jakearchibald]

@frivoal the largest square that can be contained within the circle is the safe area, no?

I agree that there's ambiguity with curved corners, but it feels like the safe area should be the largest possible rectangular area of usable pixels.

[frivoal]

the insets should then be the difference between viewport-fit=cover and viewport-fit=contain

the largest square that can be contained within the circle is the safe area, no?

These are the same thing, and this is a good idea. 👍

[jihyerish]

the largest square that can be contained within the circle is the safe area, no?
I agree with this.

safe-area-inset-* is also useful for viewport-fit: contain.
If there is enough clipped area between the display and the safe area (largest rectangle which is inscribed in the display), an element positioned there can be rendered because UA paints the element outside of the viewport.
When positioning an element in the clipped area, safe-area-inset-* is used.

[smfr]

We decided on the call to list these UA-specified variables in Variables Level 2.

[qinyuhang]

It seems work like a px value. How's it work on rem while set html font-size of 48px?

[astearns]

@grorg do you want to re-work this PR to add the explanatory text and examples to css-env-1, or close this PR and do that part separately?