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

Author: rachelandrew

css-fonts-4/Overview.bs

@@ -1012,7 +1012,7 @@ Relative sizing: the 'font-size-adjust' property</h3>
 	The value of 'font-size-adjust' affects the used value of 'font-size'
 	but does not affect the computed value.
 	It affects the size of relative units
-	that are based on font metrics of the <a>first available font</a>
+	that are based on font metrics
 	such as <code>ex</code> and <code>ch</code>
 	but does not affect the size of <code>em</code> units.
 	Since numeric values of 'line-height'
@@ -3175,7 +3175,7 @@ to ensure that the results are as consistent as possible across user agents,
 given an identical set of available fonts and rendering technology.
 
 The <dfn export>first available font</dfn>,
-used for example in the definition of <a>font-relative lengths</a> such as ''ex'' and ''ch''
+used for example in the definition of <a>font-relative lengths</a> such as ''ex''
 or in the definition of the 'line-height' property
 is defined to be the first available font
 that would match the U+0020 (space) character
@@ -5101,4 +5101,4 @@ Changes from the <a	href="https://www.w3.org/TR/2018/WD-css-fonts-4-20180410/">1
 	<li>Consistently use the new generic font families</li>
 	<li>Editorial cleanup, clarifying examples, markup improvements, linkfixes,
 		updating to latest references, and so on</li>
-</ul>
+</ul>

css-images-4/Overview.bs

@@ -1107,7 +1107,7 @@ Conic Gradients: the ''conic-gradient()'' notation</h3>
 		<div style="overflow: hidden">
 			<img style="float: right; margin-left: 1em;" src='images/conic-diagram.png' alt="[An image showing a box with a background shading gradually clockwise from white to black, starting from the top. A gradient circle is shown, and the colors at 0 and 216 degrees respectively.]">
 
-			This example visually illustrates how ''conic-gradient(at 25% 30%, white, black 60%)'' would be drawn. Note that since color stop positions always resolve to angles, the only effect of the center center is a 2D translation of the gradient, i.e. it does not affect how the gradient is drawn.
+			This example visually illustrates how ''conic-gradient(at 25% 30%, white, black 60%)'' would be drawn. Note that since color stop positions always resolve to angles, the only effect of the ''at 25% 30%'' is a 2D translation of the gradient, i.e. it does not affect how the gradient is drawn.
 		</div>
 	</div>
 
@@ -1134,7 +1134,7 @@ Conic Gradients: the ''conic-gradient()'' notation</h3>
 
 		<dt><dfn><<position>></dfn>
 		<dd>
-			Determines the <dfn dfn>gradient center</dfn> of the gradient.
+			Determines the <dfn dfn export>gradient center</dfn> of the gradient.
 			The <<position>> value type (which is also used for 'background-position')
 			is defined in [[css-values-3]],
 			and is resolved using the center-point as the object area
@@ -1154,7 +1154,7 @@ Conic Gradients: the ''conic-gradient()'' notation</h3>
 <h4 id='conic-color-stops' class='no-toc'>
 Placing Color Stops</h4>
 
-	Color stops are placed on a <a>gradient line</a> that curves around the center in a circle,
+	Color stops are placed on a <a>gradient line</a> that curves around the <a>gradient center</a> in a circle,
 	with both the 0% and 100% locations at 0deg.
 	Just like linear gradients,
 	0deg points to the top of the page,
@@ -1215,7 +1215,7 @@ Conic Gradient Examples</h4>
 
 		<pre class=lang-css>
 			background: conic-gradient(from 45deg, white, black, white);
-			background: conic-gradient(hsl(0,0%,87.5%), white 45deg, black 225deg, hsl(0,0%,87.5%));
+			background: conic-gradient(hsl(0,0%,75%), white 45deg, black 225deg, hsl(0,0%,75%));
 		</pre>
 
 		<img src="images/conic3.png" alt="" >
@@ -1908,8 +1908,8 @@ Interpolating <<image>> {#interpolating-images}
 	(like some gradients)
 	have their own special interpolation rules.
 	In general terms,
-	images are interpolated by scaling them to the size of the start image
-	and cross-fading the two while they transition to the size of the end image.
+	images are interpolated by scaling them to the size of the <var>start image</var>
+	and cross-fading the two while they transition to the size of the <var>end image</var>.
 
 	In specific terms,
 	at each point in the interpolation
@@ -1986,7 +1986,7 @@ Interpolating <<gradient>> {#interpolating-gradients}
 
 			* Otherwise, the size must be changed to a pair of <<length>>s
 				that would produce an equivalent ending-shape.
-				If the <<ending-shape>> was specified as ''circle'',
+				If the <<ending-shape>> was specified as <a value spec=css-images-3>circle</a>,
 				change it to ''ellipse''.
 
 	2. Interpolate each component and color-stop of the gradients independently.

css-shadow-parts-1/Overview.bs

@@ -121,7 +121,7 @@ as authors can use ''::part()'' without fear of accidental over-styling.
 Exposing a Shadow Element: {#exposing}
 =============================================================
 Elements in a <a>shadow tree</a> may be exposed for styling by stylesheets outside the tree
-using the part and partmap attributes.
+using the part and exposedparts attributes.
 
 Each element has a <dfn export for="element">part name list</dfn>
 which is an [=ordered set=] of tokens.
@@ -133,8 +133,6 @@ with keys that are [=strings=]
 and values that are [=ordered sets=] of [=strings=]
 (part names that are selectable inside this element).
 
-Issue(w3c/csswg-drafts#2414): Document how the part name map will be exposed via IDL.
-
 Each <a>shadow root</a> can be thought of as having a <dfn export for="shadow root">part element map</dfn>
 with keys that are [=strings=]
 and values that are [=ordered sets=] of elements.
@@ -199,16 +197,16 @@ not an id or tagname.
 &lt;/script&gt;
 </pre>
 
-Forwarding a Shadow Element: the <{html-global/partmap}> attribute {#partmap-attr}
+Forwarding a Shadow Element: the <{html-global/exposedparts}> attribute {#exposedparts-attr}
 ----------------------------------------------------------------------------------
-Any element in a shadow tree can have a <dfn element-attr for=html-global>partmap</dfn> attribute.
+Any element in a shadow tree can have a <dfn element-attr for=html-global>exposedparts</dfn> attribute.
 If the element is a shadow host,
 this is used to allow styling of parts from hosts inside the <a>shadow tree</a>
 by rules outside this the <a>shadow tree</a>
 (as if they were elements in the same tree as the host,
 named by a part attribute).
 
-The partmap attribute is parsed as a comma-separated list of part mappings.
+The exposedparts attribute is parsed as a comma-separated list of part mappings.
 Each part mapping is one of:
 
 <dl class=switch>
@@ -233,7 +231,7 @@ Issue(w3c/csswg-drafts#2411): Decide whether to allow "ident1 => ident2 ident3 .
 as shorthand for "ident1 ident2, ident1 ident3, ...".
 
 Issue(w3c/csswg-drafts#2411): Decide whether to allow wild-card forwarding,
-e.g partmap="button-* buttons".
+e.g exposedparts="button-* buttons".
 Consider excluding sub-parts that have been explicitly forwarded.
 Consider a mechanism to exclude sub-parts without forwarding them.
 
@@ -243,7 +241,7 @@ Consider a mechanism to exclude sub-parts without forwarding them.
 &lt;/style&gt;
 
 &lt;template id="c-e-outer-template"&gt;
-  &lt;c-e-inner <b>partmap="innerspan textspan"</b>&gt;&lt;/c-e-inner&gt;
+  &lt;c-e-inner <b>exposedparts="innerspan textspan"</b>&gt;&lt;/c-e-inner&gt;
 &lt;/template&gt;
 
 &lt;template id="c-e-inner-template"&gt;
@@ -366,3 +364,15 @@ but never match additional <a>shadow-part pseudo-elements</a>.
     would select just the one button's label,
     ignoring any other labels.
 </div>
+
+Extensions to the {{Element}} Interface {#idl}
+==============================================
+
+We expose the `part` and `exposedparts` attributes as read/write string properties on Element.
+
+<pre class=idl>
+partial interface Element {
+  attribute DOMString part;
+  attribute DOMString exposedParts;
+};
+</pre>

css-values-4/Overview.bs

@@ -20,6 +20,9 @@ spec: css-backgrounds-3; type: type; text: <position>
 spec: css2; type: property; text: border-collapse
 spec: css-color-4; type: value; text: currentcolor
 spec: css-cascade-4; type: at-rule; text: @import
+spec: css-sizing-3; type: property;
+	text: min-width
+	text: box-sizing
 </pre>
 <style>
 code, small { white-space: nowrap }
@@ -1633,59 +1636,90 @@ Mathematical Expressions: ''calc()'', ''min()'', ''max()'', and ''clamp()''</h3>
 	that evaluate to a valid argument type (like <<length>>).
 
 	<div class="example">
-		<pre>
+
+		[=Math functions=] can be used to combine value that use different units.
+		In this example the author wants the <em>margin box</em> of each section
+		to take up 1/3 of the space,
+		so they start with <css>100%/3</css>,
+		then subtract the element's borders and margins.
+		('box-sizing' can automatically achieve this effect for borders and padding,
+		but a [=math function=] is needed if you want to include margins.)
+
+		<pre class=lang-css>
 		section {
 		  float: left;
 		  margin: 1em; border: solid 1px;
 		  width: calc(100%/3 - 2*1em - 2*1px);
 		}
 		</pre>
-	</div>
 
-	<div class="example">
-		<pre>
-		p {
-		  margin: calc(1rem - 2px) calc(1rem - 1px);
+		Similarly, in this example the gradient will show a color transition
+		only in the first and last ''20px'' of the element:
+
+		<pre class=lang-css>
+		.fade {
+			background-image: linear-gradient(silver 0%, white 20px,
+			                                  white calc(100% - 20px), silver 100%);
 		}
 		</pre>
 	</div>
 
 	<div class="example">
-		The following sets the 'font-size' so that exactly 40em fits within the viewport,
+
+		[=Math functions=] can also be useful just to express values
+		in a more natural, readable fashion,
+		rather than as an obscure decimal.
+		For example, the following sets the 'font-size' so that exactly 35em fits within the viewport,
 		ensuring that roughly the same amount of text always fills the screen no matter the screen size.
 
-		<pre>
+		<pre class=lang-css>
 		:root {
-			font-size: calc(100vw / 40);
+			font-size: calc(100vw / 35);
 		}
 		</pre>
 
-		If the rest of the design is specified using the ''rem'' unit,
-		the entire layout will scale to match the viewport width.
+		Functionality-wise, this is identical to just writing ''font-size: 2.857vw'',
+		but then the intent
+		(that ''35em'' fills the viewport)
+		is much less clear to someone reading the code;
+		the later reader will have to reverse the math themselves
+		to figure out that 2.857 is meant to approximate 100/35.
 	</div>
 
-	<div class='example'>
-		The following example stacks two centered background images,
-		with one offset slightly from the other.
+	<div class="example">
 
-		<pre>
-		.foo {
-			background: url(top.png), url(bottom.png);
-			background-repeat: no-repeat;
-			background-position: calc(50% + 20px) calc(50% + 20px), 50% 50%;
+		''min()'', ''max()'', and ''clamp()'' can be used to make sure a value doesn't exceed a "safe" limit:
+		For example, "responsive type" that sets 'font-size' with viewport units
+		might still want a minimum size to ensure readability:
+
+		<pre class=lang-css>
+		.type {
+			/* Set font-size to 10x the average of vw and vh,
+			   but don't let it go below 12px. */
+			font-size: max(10 * (1vw + 1vh) / 2, 12px);
 		}
 		</pre>
-	</div>
 
-	<div class='example'>
-		This example shows how to place color-stops on a gradient an equal distance from either end.
+		Note: Full math expressions are allowed in each of the arguments;
+		there's no need to nest a ''calc()'' inside!
+		You can also provide more than two arguments,
+		if you have multiple constraints to apply.
+	</div>
 
-		<pre>
-		.foo {
-			background-image: linear-gradient(to right, silver,
-			                                            white 50px,
-			                                            white calc(100% - 50px),
-			                                            silver);
+	<div class="example">
+		An occasional point of confusion when using ''min()''/''max()''
+		is that you use ''max()'' to impose a minimum value on something
+		(that is, properties like 'min-width' effectively use ''max()''),
+		and ''min()'' to impose a maximum value on something;
+		it's easy to accidentally reach for the opposite function
+		and try to use ''min()'' to add a minimum size.
+		Using ''clamp()'' can make the code read more naturally,
+		as the value is nestled between its minimum and maximum:
+
+		<pre class=lang-css>
+		.type {
+			/* Force the font-size to stay between 12px and 100px */
+			font-size: clamp(12px, 10 * (1vw + 1vh) / 2, 100px);
 		}
 		</pre>
 	</div>