[css-round-display] eliminate warnings of the spec

css-round-display/Overview.bs

@@ -11,7 +11,7 @@ Abstract: This document proposes CSS extensions to support a round display. It e
 </pre>
 
 
-<h2>Introduction</h2>
+<h2 id="introduction">Introduction</h2>
 <p>
 Everything on the web is a rectangle. For example, the window content area in a web browser is a rectangle. Each HTML element follows the W3C box model and thus is also a rectangle. New devices with a round display are now emerging. The current web standards lack some features to support the devices as follows:
 <ol>
@@ -28,20 +28,20 @@ To apply the shape of a display to content area, we propose to extend the 'shape
 </p>
 
 
-<h2>Terminology</h2>
+<h2 id="terminology">Terminology</h2>
 This specification follows the CSS property definition conventions from [[!CSS21]]. <br />
 The detailed description of Media Queries is defined in [[!MEDIAQ]]<br />
 The detailed description of CSS Shapes is defined in [[CSS-SHAPES-1]]<br />
 The detailed description of Borders is defined in [[CSS3-BORDER]]<br />
 The detailed description of Positioned Layout is defined in [[CSS3-POSITIONING]]<br />
 
 
-<h2>Extending Media Queries for a round display</h2>
+<h2 id="extending-media-queries">Extending Media Queries for a round display</h2>
 <p>
  Media Queries [[!MEDIAQ]] define mechanisms to support media-dependent style sheets, tailored for different media types. We propose to extend Media Queries by adding the 'device-radius' media feature to support a round display. This will allow web authors to apply different styles to a web page on the rounded display.
 </p>
 <section>
-<h3>The 'device-radius' media feature</h3>
+<h3 id="device-radius-media-feature">The 'device-radius' media feature</h3>
 To use different style sheets for a rectangle display and for a round display, media queries should support some properties to identify the display shape. The 'device-radius' media feature describes the property of rounded borders of a display.
 <div class='example'>
 This media query indicates that different style sheets will be applied depending on the display shape.
@@ -148,11 +148,14 @@ Using 'device-radius' with just a single value (e.g., device-radius: 50%) is eno
 
 
 
-<h2>Aligning content along the display border</h2>
-<h3>The 'shape-inside' property</h3>
+<h2 id="aligning-content">Aligning content along the display border</h2>
+<h3 id="shape-inside-property">The 'shape-inside' property</h3>
 <p>
 CSS Shapes [[CSS-SHAPES]] define the 'shape-inside' property that aligns contents along a possibly non-rectangular wrapping area. Web authors may use this feature to fit contents inside a round display. However, it could sometimes be hard to specify the wrapping area identical to the shape of a display. Thus, we propose to add a new value '<code>display</code>' to the 'shape-inside' property to facilitate it. When the 'shape-inside' property on an element is set to '<code>display</code>', its content (or contained element) is aligned along the display border automatically.
 </p>
+<pre class='link-defaults'>
+spec:css21; type:type; text:<uri>
+</pre>
 <pre class='propdef'>
     Name: shape-inside
     Applies to: block-level elements
@@ -207,8 +210,8 @@ The example below shows how the 'shape-inside' property works when it is set to
 What if content overflows? Clipping or scrolling?
 </p>
 
-<h2>Drawing borders around the display border</h2>
-<h3>The 'border-boundary' property</h3>
+<h2 id="drawing-borders">Drawing borders around the display border</h2>
+<h3 id="border-boundary-property">The 'border-boundary' property</h3>
 <p>
 We propose the 'border-boundary' property to set a boundary constraint that affects the borders of an element.
 </p>
@@ -261,11 +264,11 @@ The example below shows how the 'border-boundary' property works on drawing bord
     <p class="caption">Align the content along the display border</p>
 </div>
 
-<h2>Positioning content by using the polar coordinate system</h2>
+<h2 id="positioning-content">Positioning content by using the polar coordinate system</h2>
 <p>
 Elements are often placed along a circle or concentric circles, and polar coordinates are useful to handle such cases. This section introduces polar positioning to support layout of elements in the polar coordinate system where the position of an element is determined by a distance from a fixed point within the containing element and an angle from a fixed direction. We propose to add '<code>polar</code>' to the value of the 'position' property to support the polar coordinates of the children of an element. The 'polar-angle' and 'polar-distance' properties specify the position of an element (or a child).
 </p>
-<h3>The 'position' property</h3>
+<h3 id="position-property">The 'position' property</h3>
 When the 'position' property on an element is set to '<code>polar</code>', its children use the polar coordinates.
 <pre class='propdef'>
     Name: position
@@ -275,7 +278,7 @@ When the 'position' property on an element is set to '<code>polar</code>', its c
     Inherited: no
     Media: visual
 </pre>
-<h3>The 'polar-angle' property</h3>
+<h3 id="polar-angle-property">The 'polar-angle' property</h3>
 The 'polar-angle' property specifies the angle from the X-axis (or a fixed direction).
 <pre class='propdef'>
     Name: polar-angle
@@ -287,7 +290,7 @@ The 'polar-angle' property specifies the angle from the X-axis (or a fixed direc
     Inherited: no
     Percentages: relative to radius of circle
 </pre>
-<h3>The 'polar-distance' property</h3>
+<h3 id="polar-distance-property">The 'polar-distance' property</h3>
 The 'polar-distance' property specifies the distance from the center of the parent (or a fixed point).
 <pre class='propdef'>
     Name: polar-distance