[css-round-display-1] Update viewport-fit to property of viewport meta element. (#11757)

The @Viewport rule was removed in favor of using viewport meta properties.
This updates viewport-fit to follow this change.

Author: flackr

css-round-display-1/Overview.bs

@@ -217,23 +217,15 @@ For example, when rendering to PDF, the shape is known to be a rectangle, so 'sh
  ''true'' while ''shape: round'' to ''false''
 </p>
 
-Extending the @viewport rule {#extending-viewport-rule}
+Extending the viewport <code class=html>&lt;meta&gt;</code> element {#extending-viewport-meta}
 ==================================================
 
-<h3 id="viewport-fit-descriptor">The 'viewport-fit' descriptor</h3>
+<h3 id="viewport-fit-property">The 'viewport-fit' property</h3>
 
-'viewport-fit' can set the size of the visual viewport.
+The <dfn export><code>viewport-fit</code></dfn> property is recognized in the
+[[css-viewport#viewport-meta]].
+'viewport-fit' can set the size of the layout viewport.
 
-<pre class=descdef>
-    Name: viewport-fit
-    For: @viewport
-    Value: auto | contain | cover
-    Initial: auto
-    Percentages: N/A
-    Computed value: as specified
-</pre>
-
-The initial layout viewport seen through the physical screen of the device.
 On rounded screen, the part of the page that’s currently shown on-screen is round but 
 the viewport is rectangular.
 Because of this, depending on the size of the viewport, some part of the page may be clipped.
@@ -245,7 +237,7 @@ Because of this, depending on the size of the viewport, some part of the page ma
     </figcaption>
 </figure>
 
-'viewport-fit' can control the clipped area by setting the size of the visual viewport.
+'viewport-fit' can control the clipped area by setting the size of the layout viewport.
 
 Values have the following meanings:
 
@@ -293,10 +285,8 @@ If it have to be guaranteed that any part of the web page isn’t hidden, avoidi
 
     When the 'viewport-fit' is specified with <a href="#valdef-viewport-fit-contain">contain</a>, the initial viewport is applied to the largest inscribed rectangle of the display.
 
-    <pre class="lang-css">
-    @viewport (viewport-fit: contain) {
-        /* CSS for the rectangular design */
-    }      
+    <pre class="lang-html">
+    &lt;meta name="viewport" content="viewport-fit=contain"&gt;
     </pre>
 
     <figure>
@@ -308,16 +298,16 @@ If it have to be guaranteed that any part of the web page isn’t hidden, avoidi
 
     When <a href="#valdef-viewport-fit-cover">cover</a> is given to the 'viewport-fit', the initial viewport is applied to the circumscribed rectangle of the display.
 
-    <pre class="lang-css">
-    @viewport {
-        viewport-fit: cover;
-    }
-    @media (shape: round){
-        /* styles for the round design */
-    }
-    @media (shape: rect){
-        /* styles for the rectangular design */
-    }
+    <pre class="lang-html">
+    &lt;meta name="viewport" content="viewport-fit=cover"&gt;
+    &lt;style&gt;
+        @media (shape: round){
+            /* styles for the round design */
+        }
+        @media (shape: rect){
+            /* styles for the rectangular design */
+        }
+    &lt;/style&gt;
     </pre>
 
     <figure>
@@ -479,6 +469,13 @@ Use Cases {#usecases}
 Changes {#changes}
 ==================================================
 
+<h3 id="changes_from_December_22_2016">
+Changes from <a href="http://www.w3.org/TR/2016/WD-css-round-display-1-20161222/">December 22<sup>th</sup> 2016</a> version</h3>
+
+    <ul>
+        <li>Updated 'viewport-fit' to property of viewport <code class=html>&lt;meta&gt;</code> element.</li>
+    </ul>
+
 <h3 id="changes_from_March_01_2016">
 Changes from <a href="http://www.w3.org/TR/2016/WD-css-round-display-1-20160301/">March 1<sup>th</sup> 2016</a> version</h3>