Merge branch 'master' into computed-color-scheme-as-specified

Author: lilles

README.markdown

@@ -17,3 +17,4 @@ contributing using Mercurial is also possible.
 Also see the related repositories:
 * [fxtf-drafts github repository](https://github.com/w3c/fxtf-drafts/) - [fxtf mercurial repository](https://hg.fxtf.org/drafts/) - [FX Task Force generated specification index](https://drafts.fxtf.org/)
 * [css-houdini-drafts github repository](https://github.com/w3c/css-houdini-drafts/) - [css-houdini mercurial repository](https://hg.css-houdini.org/drafts/) - [CSS-TAG Houdini Task Force generated specification index](https://drafts.css-houdini.org/)
+

css-align-3/Overview.bs

@@ -27,7 +27,7 @@ Previous Version: https://www.w3.org/TR/2012/WD-css3-animations-20120403/
 Editor: Dean Jackson, Apple Inc., dino@apple.com, w3cid 42080
 Editor: L. David Baron, Mozilla https://www.mozilla.org/, https://dbaron.org/, w3cid 15393
 Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/, w3cid 42199
-Editor: Brian Birtles, Mozilla, bbirtles@mozilla.com, w3cid 43194
+Editor: Brian Birtles, Invited Expert, brian@birchill.co.jp, w3cid 43194
 Former Editor: David Hyatt, Apple Inc.
 Former Editor: Chris Marrin, Apple Inc.
 Former Editor: Sylvain Galineau, Adobe, galineau@adobe.com
@@ -248,31 +248,31 @@ Keyframes</h2>
 		so the first will be ignored:
 
 		<pre class=lang-css>
-		@keyframes foo { ... }
-		@keyframes "foo" { ... }
+		@keyframes foo { /* ... */ }
+		@keyframes "foo" { /* ... */ }
 		</pre>
 
 		On the other hand,
 		the following ''@keyframes'' rule's name is <em>different</em> from the previous two rules:
 
 		<pre class=lang-css>
-		@keyframes FOO { ... }
+		@keyframes FOO { /* ... */ }
 		</pre>
 
 		The following ''@keyframes'' rules are invalid
 		because they use disallowed <<custom-ident>> values:
 
 		<pre class=lang-css>
-		@keyframes initial { ... }
-		@keyframes None { ... }
+		@keyframes initial { /* ... */ }
+		@keyframes None { /* ... */ }
 		</pre>
 
-		However, those names *can* be specified with a <<string>>,
+		However, those names <em>can</em> be specified with a <<string>>,
 		so the following are both <em>valid</em>:
 
 		<pre class=lang-css>
-		@keyframes "initial" { ... }
-		@keyframes "None" { ... }
+		@keyframes "initial" { /* ... */ }
+		@keyframes "None" { /* ... */ }
 		</pre>
 	</div>
 
@@ -295,58 +295,62 @@ Keyframes</h2>
 	the last one in document order wins,
 	and all preceding ones are ignored.
 
-	<div class='example'>
-		<pre>
-		div {
-		  animation-name: slide-right;
-		  animation-duration: 2s;
-		}
+<div class='example'>
+<pre>
+div {
+  animation-name: slide-right;
+  animation-duration: 2s;
+}
 
-		@keyframes slide-right {
+@keyframes slide-right {
 
-		  from {
-		    margin-left: 0px;
-		  }
+  from {
+    margin-left: 0px;
+  }
 
-		  50% {
-		  	margin-left: 110px;
-		  	opacity: 1;
-		  }
+  50% {
+    margin-left: 110px;
+    opacity: 1;
+  }
 
-		  50% {
-		  	 opacity: 0.9;
-		  }
+  50% {
+    opacity: 0.9;
+  }
 
-		  to {
-		    margin-left: 200px;
-		  }
+  to {
+    margin-left: 200px;
+  }
 
-		}
-		</pre>
+}
+</pre>
 
-		At the 1s mark, the slide-right animation will have the same state as if we had defined the 50% rule like this:
+The two 50% rules from above can also be combined into an equivalent single rule
+as illustrated below:
 
-		<pre>
+<pre>
 
-		@keyframes slide-right {
+@keyframes slide-right {
 
-		  50% {
-		  	margin-left: 110px;
-		  	opacity: 0.9;
-		  }
+  from {
+    margin-left: 0px;
+  }
 
-		  to {
-		    margin-left: 200px;
-		  }
+  50% {
+    margin-left: 110px;
+    opacity: 0.9;
+  }
 
-		}
-		</pre>
+  to {
+    margin-left: 200px;
+  }
 
-	</div>
+}
+</pre>
+</div>
 
 	To determine the set of keyframes, all of the values in the selectors are sorted in increasing order
-	by time. The rules within the @keyframes rule then cascade; the properties of a keyframe may thus derive
-	from more than one @keyframes rule with the same selector value.
+	by time. The rules within the ''@keyframes'' rule then cascade; the properties of a keyframe may thus derive
+	from more than one ''@keyframes'' rule with the same selector value.
 
 	If a property is not specified for a keyframe, or is specified but invalid, the animation of that
 	property proceeds as if that keyframe did not exist. Conceptually, it is as if a set of keyframes is
@@ -509,26 +513,27 @@ The 'animation-duration' property</h3>
 	Canonical order: per grammar
 	</pre>
 
-	<dl>
-		<dt><dfn value for=animation-duration><<time>></dfn>
-		<dd>
-			The <<time>> specifies the length of time that an animation takes to complete one cycle.
-			A negative <<time>> is invalid.
-
-			If the <<time>> is ''0s'', like the initial value,
-			the keyframes of the animation have no effect,
-			but the animation itself still occurs instantaneously.
-			Specifically, start and end events are fired; if
-			'animation-fill-mode' is set to ''backwards'' or
-			''both'', the first frame of the animation, as defined by
-			'animation-direction', will be displayed during the
-			'animation-delay'. Then the last frame of the animation,
-      as defined by 'animation-direction', will be displayed if
-      'animation-fill-mode' is set to ''forwards'' or ''both''.  If
-      'animation-fill-mode' is set to ''animation-fill-mode/none''
-			then the animation has no visible effect.
-		</dd>
-	</dl>
+<dl>
+<dt><dfn value for=animation-duration><<time>></dfn>
+<dd>
+The <<time>> specifies the length of time that an animation takes to complete one cycle.
+A negative <<time>> is invalid.
+
+If the <<time>> is ''0s'', like the initial value,
+the keyframes of the animation have no effect,
+but the animation itself still occurs instantaneously.
+Specifically, start and end events are fired;
+if 'animation-fill-mode' is set to ''backwards'' or ''both'',
+the first frame of the animation,
+as defined by 'animation-direction',
+will be displayed during the 'animation-delay'.
+After the 'animation-delay' the last frame of the animation,
+as defined by 'animation-direction',
+will be displayed if 'animation-fill-mode' is set to ''forwards'' or ''both''.
+If 'animation-fill-mode' is set to ''animation-fill-mode/none''
+the animation will have no visible effect.
+</dd>
+</dl>
 
 <h3 id="animation-timing-function">
 The 'animation-timing-function' property</h3>
@@ -719,7 +724,7 @@ The 'animation-delay' property</h3>
 	Initial: 0s
 	Applies to: all elements
 	Inherited: no
-	Animatable: no
+	Animation type: not animatable
 	Percentages: N/A
 	Computed value: list, each item a duration
 	Canonical order: per grammar
@@ -1156,9 +1161,10 @@ The <code>appendRule</code> method</h4>
 <h4 id="interface-csskeyframesrule-deleterule">
 The <code>deleteRule</code> method</h4>
 
-	The <dfn method for="CSSKeyframesRule" lt="deleteRule(select)">deleteRule</dfn> method deletes the
-    last declared {{CSSKeyframeRule}} matching the specified keyframe selector.
-    If no matching rule exists, the method does nothing.
+The <dfn method for="CSSKeyframesRule" lt="deleteRule(select)">deleteRule</dfn> method
+deletes the last declared {{CSSKeyframeRule}}
+matching the specified keyframe selector.
+If no matching rule exists, the method does nothing.
 
 	Parameters:
 

css-animations-1/Overview.bs

@@ -252,7 +252,7 @@ value associated with the bottom-most background image layer.
       <td>N/A
     <tr>
       <th>Computed value:
-      <td>as specified, but with URIs made absolute
+      <td>computed <<image>>
     <tr>
       <th>Animation type:
       <td>discrete
@@ -615,15 +615,15 @@ their initial position (after any <a href="#the-background-size">resizing</a>)
 within their corresponding <span>background positioning area.</span>
 
 <p>Where
-<pre class=prod><dfn><<bg-position>></dfn> = [
+<pre class=prod><dfn><<bg-position>></dfn> =
   [ left | center | right | top | bottom | <<length-percentage>> ]
 |
   [ left | center | right | <<length-percentage>> ]
   [ top | center | bottom | <<length-percentage>> ]
 |
   [ center | [ left | right ] <<length-percentage>>? ] &amp;&amp;
   [ center | [ top | bottom ] <<length-percentage>>? ]
-]</pre>
+</pre>
 
 <p>If only one value is specified, the second value is assumed to be
 ''center''. If two values are given, a <<length-percentage>> as the first
@@ -2210,7 +2210,7 @@ this:
     <td>N/A
   <tr>
     <th>Computed value:
-    <td>the keyword ''border-image-source/none'' or the specified image with URIs made absolute
+    <td>the keyword ''border-image-source/none'' or the computed <<image>>
   <tr>
     <th>Animation type:
     <td>discrete

css-backgrounds-3/Overview.bs

@@ -253,7 +253,7 @@ Corner Shaping: the 'corner-shape' property</h3>
 
 	<pre class="propdef">
 		Name:            corner-shape
-		Value:           [ round | bevel | scoop | notch ]{1,4}
+		Value:           [ round | angle ]{1,4}
 		Initial:         round
 		Applies to:      all elements, except table element when 'border-collapse' is ''collapse''
 		Inherited:       no
@@ -268,33 +268,47 @@ Corner Shaping: the 'corner-shape' property</h3>
 	<dl dfn-type="value" dfn-for="corner-shape">
 		<dt><dfn>''round''</dfn>
 		<dd>Border radii define a convex elliptical curve at the corner.
-		<dt><dfn>''bevel''</dfn>
+		<dt><dfn>''angle''</dfn>
 		<dd>Border radii define a diagonal slice at the corner.
-		<dt><dfn>''scoop''</dfn>
-		<dd>Border radii define a concave elliptical curve at the corner.
-		<dt><dfn>''notch''</dfn>
-		<dd>Border radii define a concave rectangular notch at the corner.
 	</dl>
 
 	<div class="example">
 		For example, the following declarations create a right-pointing next button.
 		<pre>
 			a {
-				border-radius: 0 2em 2em 0;
-				corner-shape: bevel;
-				padding: 0.5em 2em 0.5em 0.5em;
+				border-radius: .3em .8em .8em .3em / .3em 50% 50% .3em;
+				corner-shape: round angle angle round;
+				padding: .5em 1em .5em .5em;
+			}
 		</pre>
+		<div style='font: bold 200%/1 sans-serif;
+			width: 2.3em;
+			width: min-content;
+			white-space: nowrap;
+			padding: .5em 1em .5em .5em;
+			border-radius: .3em 0 0 .3em;
+			background: url(&apos;data:image/svg+xml,\
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 40">\
+			    <path d="m 0 0 h 65 l 10 20 l -10 20 h -65 z" fill="yellowgreen" />\
+			</svg>&apos;) no-repeat 0 / auto 100%'>
+			Next
+		</div>
 		As a fallback in UAs that don't support 'border-radius',
-		the right side would be rounded rather than pointy.
+		the right side would be rounded rather than pointy:
+		<div style='font: bold 200%/1 sans-serif;
+			width: 2.3em;
+			width: min-content;
+			white-space: nowrap;
+			padding: .5em 1em .5em .5em;
+			border-radius: .3em .8em .8em .3em / .3em 50% 50% .3em;
+			background: yellowgreen'>
+			Next
+		</div>
 	</div>
 
 	<p class="issue">
-		For ''scoop'' and ''notch'', how do the color/style/width transitions work?
-		Do they transition once in the middle, or alternate to match the topness/sideness of that segment of the border?
-
-	<p class="issue">
-		Add a ''cubic-bezier()'' function for random other shapes?
-		Or some other functions?
+		How to allow custom corners? Perhaps a ''path()'' function? Or a ''cubic-bezier()''?
+		Something else?
 
 <h3 id="corners-shorthand">
 Corner Shape and Size: the 'corners' shorthand</h3>
@@ -309,7 +323,7 @@ Corner Shape and Size: the 'corners' shorthand</h3>
 
 	<div class="example">
 		For example, the following declaration creates a diamond shape.
-		<pre>corners: bevel 50%;</pre>
+		<pre>corners: angle 50%;</pre>
 		In UAs that don't support 'corner-shape', the declaration is ignored
 		(falls back to a rectangle).
 	</div>
@@ -319,7 +333,7 @@ Corner Shape and Size: the 'corners' shorthand</h3>
 		while the second example makes them trapezoid-shaped in UAs that support 'corners'.
 		<pre>
 			border-radius: 0.25em 0.25em 0 0;
-			corners: bevel 0.25em 0.25em 0 0 / 50% 50% 0 0;
+			corners: angle 0.25em 0.25em 0 0 / 50% 50% 0 0;
 		</pre>
 	</div>
 
@@ -386,11 +400,11 @@ Partial Borders: the 'border-limit' property</h3>
 		<p>The following example draws only the first 10px of each corner:</p>
 		<pre>box { border: solid; border-parts: corners 10px; }</pre>
 		<p>The following example draws the curved part of the corner plus 5px
-		along ths sides:</p>
-		<pre>box { border: solid; border-radius: 5px; border-shape: scoop; border-parts: corners 5px; }</pre>
+		along the sides:</p>
+		<pre>box { border: solid; border-radius: 5px; border-shape: round; border-parts: corners 5px; }</pre>
 		<p>The following example draws the curved part of the corner and all of
 		the side except the middle 40%.</p>
-		<pre>box { border: solid; border-radius: 5px; border-shape: scoope; border-parts: corners 30%; }</pre>
+		<pre>box { border: solid; border-radius: 5px; border-shape: round; border-parts: corners 30%; }</pre>
 	</div>
 
 <h3 id="border-clip">