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

css-round-display/Overview.bs

@@ -459,6 +459,76 @@ The example below shows how the 'border-boundary' property works on drawing bord
 <p class="note">Note: If the value of 'border-boundary' is parent or display, border lines of the element are actually just a visual effect. It triggers a layout for rendering in a general way, but in the above cases (border-boundary: parent|display), the layout doesn't occur and it only draws the border lines inward from the containing block's borders. With this situation, the borders might hide contents around the display edge.
 </p>
 
+Constants for content safe area {#content-safe-area}
+==================================================
+
+In a situation where 'viewport-fit' is ''cover'', there is a chance that some content
+will be obscured due to the shape of the display. There are other similar cases
+to this, such as older television displays, where not all of the content sent
+to the display is guaranteed to fit on the screen. Each display has a region
+that will definitely be visible, and the industry refers to this as the
+<a href="https://en.wikipedia.org/wiki/Safe_area_(television)">safe area</a>.
+
+The safe area in CSS is exposed by four properties, defining the top, right,
+bottom and left inset amounts from the edge of the document. These properties
+are exposed as constants since they cannot be altered by the author. Instead,
+the User Agent will change the values in alignment with the safe area.
+
+<pre class='propdef'>
+    Name: safe-area-inset-top
+    Applies to: all elements
+    Value: <<length>>
+    Initial: 0
+    Inherited: yes
+    Media: visual
+    Animatable: no
+</pre>
+
+<pre class='propdef'>
+    Name: safe-area-inset-right
+    Applies to: all elements
+    Value: <<length>>
+    Initial: 0
+    Inherited: yes
+    Media: visual
+    Animatable: no
+</pre>
+
+<pre class='propdef'>
+    Name: safe-area-inset-bottom
+    Applies to: all elements
+    Value: <<length>>
+    Initial: 0
+    Inherited: yes
+    Media: visual
+    Animatable: no
+</pre>
+
+<pre class='propdef'>
+    Name: safe-area-inset-left
+    Applies to: all elements
+    Value: <<length>>
+    Initial: 0
+    Inherited: yes
+    Media: visual
+    Animatable: no
+</pre>
+
+<div class='example'>
+
+    The example below shows the 'safe-area-inset-top' and related property values
+    apply to a display that has rounded corners. The safe area is shown shaded.
+    Content within the safe area would never be occluded by the shape of the
+    display.
+
+    <figure>
+        <img alt="A display with rounded corners, showing the safe area that is inset from all corners, and the property values that measure the insets"
+        src="images/safe-area.svg" style="width: 95%"> 
+        <figcaption>Safe area insets on a display with rounded corners.</figcaption>
+    </figure>
+</div>
+
+
 Use Cases {#usecases}
 ==================================================