merge

Author: Peter Linss

css-round-display/Overview.bs

@@ -6,7 +6,6 @@ Work Status: Exploring
 ED: https://drafts.csswg.org/css-round-display/
 Shortname: css-round-display
 TR: https://www.w3.org/TR/css-round-display-1/
-Previous Version: https://www.w3.org/TR/2015/WD-motion-1-20150409/
 Group: csswg
 Link Defaults: css-shapes-1 (type) <basic-shape>, css-transforms-1 (property) transform/transform-origin
 Previous Version: https://www.w3.org/TR/2016/WD-css-round-display-1-20160301/

css-round-display/Overview.html

@@ -5,6 +5,7 @@
   <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
   <meta content="exploring" name="csswg-work-status">
   <meta content="ED" name="w3c-status">
+  <meta content="Motion paths allow authors to animate any graphical object along an author specified path." name="abstract">
   <link href="../default.css" rel="stylesheet" type="text/css">
   <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
 <style>
@@ -259,15 +260,14 @@
   <div class="head">
    <p data-fill-with="logo"><a class="logo" href="http://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
    <h1>CSS Round Display Level 1</h1>
-   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="2016-06-14">14 June 2016</time></span></h2>
+   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="2016-06-17">17 June 2016</time></span></h2>
    <div data-fill-with="spec-metadata">
     <dl>
      <dt>This version:
      <dd><a class="u-url" href="https://drafts.csswg.org/css-round-display/">https://drafts.csswg.org/css-round-display/</a>
      <dt>Latest published version:
      <dd><a href="https://www.w3.org/TR/css-round-display-1/">https://www.w3.org/TR/css-round-display-1/</a>
      <dt>Previous Versions:
-     <dd><a href="https://www.w3.org/TR/2015/WD-motion-1-20150409/" rel="previous">https://www.w3.org/TR/2015/WD-motion-1-20150409/</a>
      <dd><a href="https://www.w3.org/TR/2016/WD-css-round-display-1-20160301/" rel="previous">https://www.w3.org/TR/2016/WD-css-round-display-1-20160301/</a>
      <dd><a href="https://www.w3.org/TR/2015/WD-css-round-display-1-20150922/" rel="previous">https://www.w3.org/TR/2015/WD-css-round-display-1-20150922/</a>
      <dt>Issue Tracking:
@@ -466,7 +466,8 @@ <h3 class="heading settled" data-level="3.1" id="shape-media-feature"><span clas
         <span class="p">&lt;/</span><span class="nt">div</span><span class="p">></span>
     <span class="p">&lt;/</span><span class="nt">div</span><span class="p">></span>
 <span class="p">&lt;/</span><span class="nt">body</span><span class="p">></span>
-<span class="p">&lt;/</span><span class="nt">html</span><span class="p">></span></pre>
+<span class="p">&lt;/</span><span class="nt">html</span><span class="p">></span>
+</pre>
     <div class="figure">
      <div style="height: 350px">
       <div style="float: left; width: 250px;">
@@ -485,7 +486,8 @@ <h3 class="heading settled" data-level="3.1" id="shape-media-feature"><span clas
 <span class="p">&lt;</span><span class="nt">head</span><span class="p">></span>
     <span class="p">&lt;</span><span class="nt">link</span> <span class="na">media</span><span class="o">=</span><span class="s">"screen and (shape: rect)"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"rectangle.css"</span> <span class="p">/></span>
     <span class="p">&lt;</span><span class="nt">link</span> <span class="na">media</span><span class="o">=</span><span class="s">"screen and (shape: round)"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"round.css"</span> <span class="p">/></span>
-<span class="p">&lt;/</span><span class="nt">head</span><span class="p">></span></pre>
+<span class="p">&lt;/</span><span class="nt">head</span><span class="p">></span>
+</pre>
     <p>If this example code is loaded in a round display, 'round.css' will be applied by the media queries mechanism.</p>
     <div class="figure">
      <div style="height: 350px">
@@ -558,15 +560,17 @@ <h3 class="heading settled" data-level="4.1" id="viewport-fit-descriptor"><span
     <p>When the <a class="property" data-link-type="propdesc" href="#descdef-viewport-viewport-fit" id="ref-for-descdef-viewport-viewport-fit-5">viewport-fit</a> is specified with contain, the initial viewport is applied to the largest inscribed rectangle of the display.</p>
 <pre class="lang-css highlight"><span></span><span class="n">@viewport</span> <span class="p">(</span>viewport-fit<span class="nt">: contain) </span><span class="p">{</span>
     <span class="c">/* CSS for the rectangular design */</span>
-<span class="p">}</span></pre>
+<span class="p">}</span>      
+</pre>
     <div class="figure">
       <img alt="An image about the viewport applied to the bounding box specified with &apos;viewport-fit: contain&apos;" src="images/viewport_fit_contain.png" style="width: 300px; text-align: center"> 
      <figcaption> With '<code>viewport-fit: contain</code>' </figcaption>
     </div>
     <p>When cover is given to the <a class="property" data-link-type="propdesc" href="#descdef-viewport-viewport-fit" id="ref-for-descdef-viewport-viewport-fit-6">viewport-fit</a>, the initial viewport is applied to the circumscribed rectangle of the display.</p>
 <pre class="lang-css highlight"><span></span><span class="n">@viewport</span> <span class="p">(</span>viewport-fit<span class="nt">: cover) </span><span class="p">{</span>
     <span class="c">/* CSS for the rectangular design */</span>
-<span class="p">}</span></pre>
+<span class="p">}</span>
+</pre>
     <div class="figure">
       <img alt="An image about the viewport applied to the bounding box specified with &apos;viewport-fit: cover&apos;" src="images/viewport_fit_cover.png" style="width: 300px; text-align: center"> 
      <figcaption> With '<code>viewport-fit: cover</code>' </figcaption>
@@ -624,7 +628,8 @@ <h3 class="heading settled" data-level="5.1" id="shape-inside-property"><span cl
         <span class="p">&lt;</span><span class="nt">img</span> <span class="na">id</span><span class="o">=</span><span class="s">"blue-box"</span> <span class="na">src</span><span class="o">=</span><span class="s">"blue-box.jpg"</span> <span class="p">/></span>
         simple box with a circle shape-inside.
     <span class="p">&lt;/</span><span class="nt">p</span><span class="p">></span>
-<span class="p">&lt;/</span><span class="nt">div</span><span class="p">></span></pre>
+<span class="p">&lt;/</span><span class="nt">div</span><span class="p">></span>
+</pre>
     <p><br></p>
     <div class="figure">
      <div style="height: 400px;">
@@ -701,7 +706,8 @@ <h3 class="heading settled" data-level="6.1" id="border-boundary-property"><span
     <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"redBox"</span><span class="p">>&lt;/</span><span class="nt">div</span><span class="p">></span>
     <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"greenBox"</span><span class="p">>&lt;/</span><span class="nt">div</span><span class="p">></span>
     <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"blueBox"</span><span class="p">>&lt;/</span><span class="nt">div</span><span class="p">></span>
-<span class="p">&lt;/</span><span class="nt">div</span><span class="p">></span></pre>
+<span class="p">&lt;/</span><span class="nt">div</span><span class="p">></span>
+</pre>
     <p><br></p>
     <div class="figure">
      <div style="height: 300px;">
@@ -937,7 +943,8 @@ <h3 class="heading settled" data-level="7.3" id="offset-distance-property"><span
        <span class="n">offset</span><span class="o">-</span><span class="n">distance</span><span class="o">:</span> <span class="m">100%</span><span class="p">;</span>
        <span class="n">offset</span><span class="o">-</span><span class="n">origin</span><span class="o">:</span> <span class="m">50%</span> <span class="m">50%</span><span class="p">;</span>
     <span class="p">}</span>
-<span class="p">&lt;/</span><span class="nt">style</span><span class="p">></span></pre>
+<span class="p">&lt;/</span><span class="nt">style</span><span class="p">></span>
+</pre>
     <div class="figure">
       <img alt="An image of three elements positioned to polar coordinates" src="images/simple_offset_position.png" style="width: 300px;"> 
      <figcaption> An example of positioning element in polar coordinates </figcaption>
@@ -948,7 +955,8 @@ <h3 class="heading settled" data-level="7.3" id="offset-distance-property"><span
 <pre class="lang-html highlight"><span></span><span class="p">&lt;</span><span class="nt">body</span><span class="p">></span>
   <span class="p">&lt;</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"offset-path: 45deg; offset-distance: 100%"</span><span class="err">&lt;/</span><span class="na">div</span><span class="p">></span>
   <span class="p">&lt;</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"offset-path: 180deg; offset-distance: 100%"</span><span class="err">&lt;/</span><span class="na">div</span><span class="p">></span>
-<span class="p">&lt;/</span><span class="nt">body</span><span class="p">></span></pre>
+<span class="p">&lt;/</span><span class="nt">body</span><span class="p">></span>
+</pre>
     <div class="figure">
       <img alt="An image of elements positioned without contain" src="images/offset_distance_without_contain.png" style="width: 300px;"> 
      <figcaption> <a class="property" data-link-type="propdesc" href="#propdef-offset-distance" id="ref-for-propdef-offset-distance-7">offset-distance</a> without <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-containment-3/#propdef-contain">contain</a> </figcaption>
@@ -957,7 +965,8 @@ <h3 class="heading settled" data-level="7.3" id="offset-distance-property"><span
 <pre class="lang-html highlight"><span></span><span class="p">&lt;</span><span class="nt">body</span><span class="p">></span>
   <span class="p">&lt;</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"offset-path: 45deg; offset-distance: 100% contain"</span><span class="err">&lt;/</span><span class="na">div</span><span class="p">></span>
   <span class="p">&lt;</span><span class="nt">div</span> <span class="na">style</span><span class="o">=</span><span class="s">"offset-path: 180deg; offset-distance: 100% contain"</span><span class="err">&lt;/</span><span class="na">div</span><span class="p">></span>
-<span class="p">&lt;/</span><span class="nt">body</span><span class="p">></span></pre>
+<span class="p">&lt;/</span><span class="nt">body</span><span class="p">></span>
+</pre>
     <div class="figure">
       <img alt="An image of elements positioned without contain" src="images/offset_distance_with_contain.png" style="width: 300px;"> 
      <figcaption> <a class="property" data-link-type="propdesc" href="#propdef-offset-distance" id="ref-for-propdef-offset-distance-9">offset-distance</a> with <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-containment-3/#propdef-contain">contain</a> </figcaption>
@@ -1012,7 +1021,8 @@ <h3 class="heading settled" data-level="7.4" id="offset-anchor-property"><span c
     <a class="self-link" href="#example-badd81dd"></a> The following explains how to set the origin of the element. 
 <pre class="lang-css highlight"><span></span><span class="nt">#plane </span><span class="p">{</span>
     <span class="k">offset-anchor</span><span class="p">:</span> center<span class="p">;</span>
-<span class="p">}</span></pre>
+<span class="p">}</span>
+</pre>
     <p>The red dot in the middle of the shape indicates the origin of the shape.</p>
     <div class="figure">
       <img alt="Shape with its origin" height="140" src="images/plane.svg" width="160"> 
@@ -1048,7 +1058,8 @@ <h3 class="heading settled" data-level="7.4" id="offset-anchor-property"><span c
     <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"item2"</span><span class="p">>&lt;/</span><span class="nt">div</span><span class="p">></span>
     <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"item3"</span><span class="p">>&lt;/</span><span class="nt">div</span><span class="p">></span>
     <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"item4"</span><span class="p">>&lt;/</span><span class="nt">div</span><span class="p">></span>
-<span class="p">&lt;/</span><span class="nt">body</span><span class="p">></span></pre>
+<span class="p">&lt;/</span><span class="nt">body</span><span class="p">></span>
+</pre>
     <div class="figure">
       <img alt="An example of offset-anchor" src="images/offset_anchor.png" style="width: 300px;"> 
      <figcaption> An example of <a class="property" data-link-type="propdesc" href="#propdef-offset-anchor" id="ref-for-propdef-offset-anchor-4">offset-anchor</a> </figcaption>
@@ -1169,7 +1180,8 @@ <h3 class="heading settled" data-level="7.5" id="offset-rotation-property"><span
   <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"item4"</span><span class="p">></span>4<span class="p">&lt;/</span><span class="nt">div</span><span class="p">></span>
   <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"item5"</span><span class="p">></span>5<span class="p">&lt;/</span><span class="nt">div</span><span class="p">></span>
   <span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"item6"</span><span class="p">></span>6<span class="p">&lt;/</span><span class="nt">div</span><span class="p">></span>
-<span class="p">&lt;/</span><span class="nt">body</span><span class="p">></span></pre>
+<span class="p">&lt;/</span><span class="nt">body</span><span class="p">></span>
+</pre>
     <div class="figure">
       <img alt="An image of example for offset-rotation" src="images/2d_rotate_function.png" style="width: 250px; text-align: center"> 
      <figcaption> The elements are rotated by the value of <a class="css" data-link-type="maybe" href="#valdef-mask-rotation-auto" id="ref-for-valdef-mask-rotation-auto-6">auto</a> with a fixed amount of degree. </figcaption>