Add 'space' value to border-image-repeat, since we have use cases for it now (fancy dotted-type borders, etc.)

Author: fantasai

css3-background/Overview.html

@@ -739,8 +739,9 @@ <h3 id=the-background-repeat><span class=secno>3.4 </span>The &lsquo;<code
     <p><img alt="Image of an element with a dotted background" src=bg-space>
 
     <p class=caption>The effect of &lsquo;<code class=property><a
-     href="#space">space</a></code>&rsquo;: the image of a dot is tiled to
-     cover the whole background and the images are equally spaced.
+     href="#border-image-space">space</a></code>&rsquo;: the image of a dot
+     is tiled to cover the whole background and the images are equally
+     spaced.
    </div>
   </div>
 
@@ -3155,6 +3156,12 @@ <h3 id=the-border-image-repeat><span class=secno>5.5 </span>The
    <dd>The image is tiled (repeated) to fill the area. If it does not fill
     the area with a whole number of tiles, the image is rescaled so that it
     does.
+
+   <dt><dfn id=border-image-space>space</dfn>
+
+   <dd>The image is tiled (repeated) to fill the area. If it does not fill
+    the area with a whole number of tiles, the extra space is distributed
+    around the tiles.
   </dl>
 
   <p>The exact process for scaling and tiling the border-image parts is given
@@ -3218,43 +3225,53 @@ <h3 id=border-image-process><span class=secno>5.6 </span>Border-image
        property.
 
      <li>
-      <p>If the first keyword is &lsquo;<code class=property><a
-       href="#border-image-repeat">repeat</a></code>&rsquo;, the top, middle,
-       and bottom images are not changed any further.
+      <p>If the first keyword is &lsquo;<code class=css><a
+       href="#border-image-repeat">repeat</a></code>&rsquo; or &lsquo;<code
+       class=css><a href="#border-image-space">space</a></code>&rsquo;, the
+       top, middle, and bottom images are not changed any further.
 
      <li>
       <p>The effects of &lsquo;<code class=css><a
        href="#border-image-stretch">stretch</a></code>&rsquo;, &lsquo;<code
-       class=css><a href="#border-image-round">round</a></code>&rsquo;, and
+       class=css><a href="#border-image-round">round</a></code>&rsquo;,
        &lsquo;<code class=css><a
-       href="#border-image-repeat">repeat</a></code>&rsquo; for the second
-       keyword are analogous, acting on the height of the left, middle and
-       right images.
+       href="#border-image-repeat">repeat</a></code>&rsquo;, and &lsquo;<code
+       class=css><a href="#border-image-space">space</a></code>&rsquo; for
+       the second keyword are analogous, acting on the height of the left,
+       middle and right images.
     </ul>
 
    <li>Position the first tile.
     <ul>
      <li>
       <p>If the first keyword is &lsquo;<code class=css><a
-       href="#border-image-round">round</a></code>&rsquo;, the top, middle,
-       and bottom images are placed at the left edge of their respective
-       parts of the border-image area. Otherwise the images are centered
-       horizontally in their respective areas.
+       href="#border-image-repeat">repeat</a></code>&rsquo;, the top, middle,
+       and bottom images are centered horizontally in their respective areas.
+       Otherwise the images are placed at the left edge of their respective
+       parts of the border-image area.
 
      <li>
-      <p>If the second keyword is &lsquo;<code class=css><a
-       href="#border-image-round">round</a></code>&rsquo;, the left, middle,
-       and right images are placed at the top edge of their respective parts
-       of the border-image area. Otherwise the images are centered vertically
-       in their respective areas.
+      <p>If the first keyword is &lsquo;<code class=css><a
+       href="#border-image-repeat">repeat</a></code>&rsquo;, the left,
+       middle, and right images are centered vertically in their respective
+       areas. Otherwise the images are placed at the top edge of their
+       respective parts of the border-image area.
     </ul>
 
    <li>Tile and draw.
     <ul>
      <li>
-      <p>The images are then tiled within their respective areas. All images
+      <p>The images are then tiled to fill their respective areas. All images
        are drawn at the same stacking level as normal borders: immediately in
        front of the background layers.
+
+     <li>
+      <p>In the case of &lsquo;<code class=css><a
+       href="#border-image-space">space</a></code>&rsquo;, any partial tiles
+       are discarded and the extra space distributed before, after, and
+       between the tiles. (I.e. the gap before the first tile, the gap after
+       the last tile, and the gaps between tiles are equalized.) <span
+       class=note>This can result in empty border-image side areas.</span>
     </ul>
   </ol>
 
@@ -4891,8 +4908,10 @@ <h2 class=no-num id=index>Index</h2>
 
    <li>solid, <a href="#solid" title=solid><strong>4.2</strong></a>
 
-   <li>space, <a href="#space" title=space><strong>3.4</strong></a>, <a
-    href="#space-space" title=space><strong>3.4</strong></a>
+   <li>space, <a href="#border-image-space"
+    title=space><strong>5.5</strong></a>, <a href="#space"
+    title=space><strong>3.4</strong></a>, <a href="#space-space"
+    title=space><strong>3.4</strong></a>
 
    <li>stretch, <a href="#border-image-stretch"
     title=stretch><strong>5.5</strong></a>

css3-background/Overview.src.html

@@ -2305,6 +2305,10 @@ <h3 id="the-border-image-repeat">The 'border-image-repeat' property</h3>
   <dd>The image is tiled (repeated) to fill the area. If it does not
     fill the area with a whole number of tiles, the image is rescaled
     so that it does.
+  <dt><dfn id="border-image-space">space</dfn></dt>
+  <dd>The image is tiled (repeated) to fill the area. If it does not
+    fill the area with a whole number of tiles, the extra space is
+    distributed around the tiles.
 </dl>
 
 <p>The exact process for scaling and tiling the border-image parts is
@@ -2351,32 +2355,36 @@ <h3 id="border-image-process">Border-image drawing process</h3>
   fit in the middle part of the border-image area, exactly as for
   ''round'' in the 'background-repeat' property.
 
-  <li><p>If the first keyword is 'repeat', the top, middle, and bottom
-    images are not changed any further.
-
+  <li><p>If the first keyword is ''repeat'' or ''space'', the top, middle,
+    and bottom images are not changed any further.
 
-  <li><p>The effects of ''stretch'', ''round'', and ''repeat'' for the
-    second keyword are analogous, acting on the height of the left,
+  <li><p>The effects of ''stretch'', ''round'', ''repeat'', and ''space''
+    for the second keyword are analogous, acting on the height of the left,
     middle and right images.
   </ul>
 
 <li>Position the first tile.
   <ul>
-  <li><p>If the first keyword is ''round'', the top, middle, and bottom
-    images are placed at the left edge of their respective parts of the
-    border-image area. Otherwise the images are centered horizontally
-    in their respective areas.
-  <li><p>If the second keyword is ''round'', the left, middle, and right
-    images are placed at the top edge of their respective parts of the
-    border-image area. Otherwise the images are centered vertically in
-    their respective areas.
+  <li><p>If the first keyword is ''repeat'', the top, middle, and bottom
+    images are centered horizontally in their respective areas. Otherwise
+    the images are placed at the left edge of their respective parts
+    of the border-image area.
+  <li><p>If the first keyword is ''repeat'', the left, middle, and right
+    images are centered vertically in their respective areas. Otherwise
+    the images are placed at the top edge of their respective parts
+    of the border-image area.
   </ul>
 
 <li>Tile and draw.
   <ul>
-  <li><p>The images are then tiled within their respective areas. All
+  <li><p>The images are then tiled to fill their respective areas. All
     images are drawn at the same stacking level as normal borders:
     immediately in front of the background layers.
+  <li><p>In the case of ''space'', any partial tiles are discarded and
+    the extra space distributed before, after, and between the tiles.
+    (I.e. the gap before the first tile, the gap after the last tile,
+    and the gaps between tiles are equalized.)
+    <span class="note">This can result in empty border-image side areas.</span>
   </ul>
 </ol>