Merge branch 'master' of https://github.com/w3c/csswg-drafts

Author: Adam Argyle

css-2020/Overview.bs

@@ -717,7 +717,9 @@ Safe to Release pre-CR Exceptions</h2>
                <li>The ''min-content'' and ''max-content'' keywords of the sizing properties.
                See <a href="https://lists.w3.org/Archives/Public/www-style/2015Aug/0109.html">decision</a>
                and <a href="https://www.w3.org/TR/css-sizing-3/#sizing-values">specification</a>.
-	       <li>The ''conic-gradient()'' gradient notation. See <a href="https://github.com/w3c/csswg-drafts/issues/2383#issuecomment-371340088">decision</a>.
+               <li>The ''conic-gradient()'' gradient notation. See <a href="https://github.com/w3c/csswg-drafts/issues/2383#issuecomment-371340088">decision</a>.
+
+               <li>The 'aspect-ratio' property. [[!CSS-SIZING-4]]
        </ul>
 
        The following features have been explicitly and retroactively cleared

css-backgrounds-3/Overview.bs

@@ -1,8 +1,6 @@
 <pre class='metadata'>
 Title: CSS Backgrounds and Borders Module Level 3
-Status: CR
-Date: 2017-10-17
-Deadline:  2017-11-30
+Status: ED
 Work Status: Testing
 Shortname: css-backgrounds
 Level: 3
@@ -961,7 +959,7 @@ layer.
     neither an intrinsic width nor an intrinsic height, its size is
     determined as for ''contain''.
 
-    <p>Negative values are not allowed.
+    <p>Negative values are invalid.
   </dd>
 </dl>
 
@@ -1416,11 +1414,21 @@ color ('border-color'), and thickness ('border-width') of the border.
 <p>These properties set the foreground color of the border specified
 by the <span class=property>border-style</span> properties.
 
-<p>'Border-color' is a shorthand for the
-four 'border-*-color' properties. The four values set the top, right,
-bottom and left border, respectively. A missing left is the same as
-right, a missing bottom is the same as top, and a missing right is
-also the same as top.
+<p>The 'border-color' property is a shorthand property for setting
+'border-top-color', 'border-right-color', 'border-bottom-color', and 'border-left-color'
+in a single declaration.
+
+<p>If there is only one component value,
+it applies to all sides.
+If there are two values,
+the top and bottom are set to the first value
+and the right and left are set to the second.
+If there are three values,
+the top is set to the first value,
+the left and right are set to the second,
+and the bottom is set to the third.
+If there are four values
+they apply to the top, right, bottom, and left, respectively.
 
 
 
@@ -1488,10 +1496,21 @@ also the same as top.
   and if it does what style it's drawn in
   (if it is not overridden by a <a href="#border-images">border image</a>).
 
-<p>'Border-style' is a shorthand for the
-other four. Its four values set the top, right, bottom and left border
-respectively. A missing left is the same as right, a missing bottom is
-the same as top, and a missing right is also the same as top.
+<p>The 'border-style' property is a shorthand property for setting
+'border-top-style', 'border-right-style', 'border-bottom-style', and 'border-left-style'
+in a single declaration.
+
+<p>If there is only one component value,
+it applies to all sides.
+If there are two values,
+the top and bottom are set to the first value
+and the right and left are set to the second.
+If there are three values,
+the top is set to the first value,
+the left and right are set to the second,
+and the bottom is set to the third.
+If there are four values
+they apply to the top, right, bottom, and left, respectively.
 
 <p>Where
 <pre class=prod><dfn><<line-style>></dfn> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset</pre>
@@ -1644,13 +1663,23 @@ are not specified, but the values are constant throughout a
 <span>document</span> and thin &le; medium &le; thick. A UA could,
 e.g., make the thickness depend on the ''medium'' font size: one
 choice might be 1, 3 &amp; 5px when the ''medium'' font size is 17px or
-less. Negative values are not allowed.
-
-<p>'Border-width' is a shorthand that sets the
-four 'border-*-width' properties. If it has four values, they set top, right,
-bottom and left in that order. If left is missing, it is the same as right;
-if bottom is missing, it is the same as top; if right is missing, it is the
-same as top.
+less. Negative values are invalid.
+
+<p>The 'border-width' property is a shorthand property for setting
+'border-top-width', 'border-right-width', 'border-bottom-width', and 'border-left-width'
+in a single declaration.
+
+<p>If there is only one component value,
+it applies to all sides.
+If there are two values,
+the top and bottom are set to the first value
+and the right and left are set to the second.
+If there are three values,
+the top is set to the first value,
+the left and right are set to the second,
+and the bottom is set to the third.
+If there are four values
+they apply to the top, right, bottom, and left, respectively.
 
 <p class="note">Note that the initial width is ''medium'', but the initial
 style is ''border-style/none'' and therefore the used width is 0.
@@ -1854,7 +1883,7 @@ radius. If the second value is omitted it is copied from the first.
 If either length is zero, the corner is square, not rounded.
 Percentages for the horizontal radius refer to the width of the
 border box, whereas percentages for the vertical radius refer to
-the height of the border box. Negative values are not allowed.
+the height of the border box. Negative values are invalid.
 
 <div class="figure">
   <p><img alt="Diagram of the inscribed ellipse" src="images/corner.png">
@@ -1964,16 +1993,21 @@ the margin is multiplied by the proportion 1 + (<var>r</var>-1)<sup>3</sup>,
 where <var>r</var> is the ratio of the border radius to the margin,
 in calculating the corner radii of the margin box shape.
 
-<h3 id="corner-clipping">Corner Clipping</h3>
 
-<p>A box's backgrounds, but not its <a href="#the-border-image">border-image</a>,
-are clipped to the appropriate curve (as determined by 'background-clip').
-Other effects that clip to the border or padding edge (such as 'overflow'
-other than ''visible'') also must clip to the curve. The content of
-replaced elements is always trimmed to the content edge curve.
 
-<p>Also, the area outside the curve of the border edge does not
-accept pointer events on behalf of the element.
+<h3 id="corner-clipping">Corner Clipping</h3>
+
+<p>Although <a href="#the-border-image">border images</a> are not affected
+by 'border-radius',
+other effects that clip painting or event handling
+to the border, padding, or content edge
+must clip to their respective curves.
+For example,
+backgrounds clip to the curve specified by 'background-clip',
+'overflow' values other than ''visible'' to the curved padding edge,
+[=replaced element=] content to the curved content edge,
+pointer events to the curved border edge,
+etc.
 
 <p class="note">As 'border-radius' reduces the interactive area of an element
 authors should make sure the remaining interactive area conforms
@@ -2265,10 +2299,17 @@ The middle image part is discarded (treated as fully transparent)
 unless the ''fill'' keyword is present. (It is drawn over the background;
 see <a href="#border-image-process">Drawing the Border Image</a>.)
 
-<p>When four values are specified, they set the offsets on the top,
-right, bottom and left sides in that order. If the left is missing, it is
-the same as the right; if the bottom is missing, it is the same as the top;
-if the right is missing, it is the same as the top.
+<p>If there is only one component value,
+it applies to all sides.
+If there are two values,
+the top and bottom are set to the first value
+and the right and left are set to the second.
+If there are three values,
+the top is set to the first value,
+the left and right are set to the second,
+and the bottom is set to the third.
+If there are four values
+they apply to the top, right, bottom, and left, respectively.
 
 <dl dfn-for=border-image-slice dfn-type=value>
   <dt><dfn><<percentage [0,&infin;]>></dfn>
@@ -2286,7 +2327,7 @@ if the right is missing, it is the same as the top.
     i.e., treated as empty.)
 </dl>
 
-<p>Negative values are not allowed.
+<p>Negative values are invalid.
 Computed values larger than the size of the image are interpreted as ''100%''.
 
 <p>The regions given by the 'border-image-slice' values may overlap.
@@ -2346,9 +2387,21 @@ by default correspond to the border box, see 'border-image-outset'.
 <p>The four values of 'border-image-width' specify offsets that are used
 to divide the border image area into nine parts. They represent inward
 distances from the the top, right, bottom, and left sides of the
-area, respectively. If the left width is missing, it is the same as the right;
-if the bottom is missing, it is the same as the top; if the right is missing,
-it is the same as the top. Values have the following meanings:</p>
+area, respectively.
+
+<p>If there is only one component value,
+it applies to all sides.
+If there are two values,
+the top and bottom are set to the first value
+and the right and left are set to the second.
+If there are three values,
+the top is set to the first value,
+the left and right are set to the second,
+and the bottom is set to the third.
+If there are four values
+they apply to the top, right, bottom, and left, respectively.
+
+Values have the following meanings:</p>
 
 <dl dfn-for=border-image-width dfn-type=value>
   <dt><dfn><<length-percentage [0,&infin;]>></dfn>
@@ -2368,7 +2421,7 @@ it is the same as the top. Values have the following meanings:</p>
     instead.
 </dl>
 
-<p>Negative values are not allowed for any 'border-image-width' values.
+<p>Negative values are invalid for any 'border-image-width' values.
 
 <p>If two opposite 'border-image-width' offsets are large enough that
 they overlap, then the used values of all 'border-image-width' offsets
@@ -2414,10 +2467,18 @@ them by <var>f</var>.
 
 
 <p>The values specify the amount by which the <a>border image area</a> extends beyond the border box.
-If it has four values, they set the outsets on the top, right, bottom and
-left sides in that order. If the left is missing, it is the same as the right;
-if the bottom is missing, it is the same as the top; if the right is missing,
-it is the same as the top.
+
+If there is only one component value,
+it applies to all sides.
+If there are two values,
+the top and bottom are set to the first value
+and the right and left are set to the second.
+If there are three values,
+the top is set to the first value,
+the left and right are set to the second,
+and the bottom is set to the third.
+If there are four values
+they apply to the top, right, bottom, and left, respectively.
 
 <dl dfn-for=border-image-outset dfn-type=value>
   <dt><<length [0,&infin;]>>
@@ -2427,7 +2488,7 @@ it is the same as the top.
   <dd>Represents an outset of the specified multiple of the corresponding computed <a href="#the-border-width">border-width</a>.
 </dl>
 
-<p>Negative values are not allowed.
+<p>Negative values are invalid.
 
 <p>Portions of the border-image that are rendered outside the border
 box do not trigger scrolling. Also such portions are invisible to mouse
@@ -2692,7 +2753,7 @@ has been moved to the <a href="https://www.w3.org/TR/css3-break/">CSS Fragmentat
 
     <dt><dfn id="shadow-blur-radius">3rd <<length [0,&infin;]>></dfn>
     <dd>Specifies the <dfn>blur radius</dfn>.
-      Negative values are not allowed.
+      Negative values are invalid.
       If the blur value is zero, the shadow’s edge is sharp.
       Otherwise, the larger the value, the more the shadow’s edge is blurred.
       See <a href="#shadow-blur">Shadow Blurring</a>, below.
@@ -2860,8 +2921,10 @@ Shadow Shape, Spread, and Knockout</h4>
   the <i>spread distance</i> (and flooring at zero).
   However, in order to create a sharper corner when the border radius is small
   (and thus ensure continuity between round and sharp corners),
-  when the <i>border radius</i> is less than the <i>spread distance</i>,
-  the <i>spread distance</i> of an outer shadow
+  when the <i>border radius</i> is less than the <i>spread distance</i>
+  (or in the case of an inner shadow,
+  less than the absolute value of a negative <i>spread distance</i>),
+  the <i>spread distance</i>
   is multiplied by the proportion 1 + (<var>r</var>-1)<sup>3</sup>,
   where <var>r</var> is the ratio of the border radius to the <i>spread distance</i>,
   in calculating the corner radii of the spread shadow shape.
@@ -2996,8 +3059,8 @@ Changes since the 17 October 2017 Candidate Recommendation</h3>
         <pre><<shadow>> = <del>inset</del><ins><<color>></ins>? &amp;&amp; <<length>>{2,4} &amp;&amp; <del><<color>></del><ins>inset</ins>?</pre>
       </blockquote>
   <li>
-    Spread radius adjustment is only applied to outer shadows (and positive margins)--
-    i.e. cases where the radius of curvature grows, rather than shrinks.
+    Spread radius adjustment is only applied to shadows and margins
+    where the radius of curvature grows, rather than shrinks.
     (<a href="https://github.com/w3c/csswg-drafts/issues/1900">Issue 1900</a>)
       <blockquote>
         <p>To preserve the box's shape when spread is applied,
@@ -3006,8 +3069,10 @@ Changes since the 17 October 2017 Candidate Recommendation</h3>
         the <i>spread distance</i> (and flooring at zero).
         However, in order to create a sharper corner when the border radius is small
         <ins>(and thus ensure continuity between round and sharp corners)</ins>,
-        when the <i>border radius</i> is less than the <i>spread distance</i>,
-        the <i>spread distance</i> <ins>of an outer shadow</ins>
+        when the <i>border radius</i> is less than the <i>spread distance</i>
+        <ins>(or in the case of an inner shadow,
+        less than the absolute value of a negative <i>spread distance</i>)</ins>,
+        the <i>spread distance</i>
         is multiplied by the proportion 1 + (<var>r</var>-1)<sup>3</sup>,
         where <var>r</var> is the ratio of the border radius to the <i>spread distance</i>,
         in calculating the corner radii of the spread shadow shape.
@@ -3024,8 +3089,11 @@ Changes since the 17 October 2017 Candidate Recommendation</h3>
     Cleaned up and regularized “Animation type” and “Computed value” lines
     in the property definition tables.
   <li>
-    Changed syntax to use <a>bracketed range notation</a>
-    to reflect the prose restrictions on negative values.
+    Changed syntax to use the new <a>CSS bracketed range notation</a>
+    to reflect the prose restrictions on negative values,
+    and corrected a few grammar definition errors introduced in the previous publication.
+  <li>
+    Minor editorial improvements.
 </ul>
 
 <h3 id="changes-2014-09">
@@ -3122,10 +3190,10 @@ review period. For details, see the full <a href="https://drafts.csswg.org/css-b
   property reset.
 
   <li><a href="#the-border-width">Section 4.3</a>: Added that negative
-  lengths are not allowed on 'border-width'.
+  lengths are invalid on 'border-width'.
 
   <li><a href="#the-border-radius">Section 5.1</a>: Added that
-  negative lengths are not allowed on 'border-radius'.
+  negative lengths are invalid on 'border-radius'.
 
   <li><a href="#border-image-tables">Section 6.8</a>: Added a section
   about the effect of 'border-image' on tables with collapsed borders

css-box-3/Overview.bs

@@ -465,6 +465,7 @@ Changes Since CSS Level 2 {#changes}
 	since <a href="https://www.w3.org/TR/CSS2/box.html">CSS Level 2</a>:
 	<ul>
 		<li>Adapting the prose slightly to account for vertical <a>writing modes</a>.
+		<li>Cross-linking to relevant concepts in [[css-break-3]] and [[css-backgrounds-3]].
 		<li>Defining the non-applicability of 'margin', 'padding' and their longhands
 			to [=ruby base containers=] and [=ruby annotation containers=] (at risk).
 		<li>Providing a [[#keywords|centralized common definition]]