[css-images] Per WG resolution, punt interpolation of images to level 4.

tabatkins · tabatkins · commit a3ee3a2201ca · 2018-08-03T17:06:32.000-07:00
diff --git a/css-images-3/Overview.bs b/css-images-3/Overview.bs
@@ -17,8 +17,6 @@ Abstract: This module contains the features of CSS level 3 relating to the <<ima
 	definitions for interpolating several <<image>> types,
 	and several properties controlling the interaction of replaced elements and CSS's layout models.
 At Risk: 'image-orientation'
-At Risk: [[#interpolating-gradients]]
-At Risk: recursive interpolation of ''cross-fade()'' arguments
 Issue Tracking: Tracker http://www.w3.org/Style/CSS/Tracker/products/27
 Previous Version: https://www.w3.org/TR/2012/CR-css3-images-20120417/
 Previous Version: https://www.w3.org/TR/2012/WD-css3-images-20120112/
@@ -93,10 +91,7 @@ Image Values: the <<image>> type {#image-values}
 
 	The <<image>> value type denotes a 2D image.
 	It can be a
-	<a href="#url-notation">url reference</a>,
-	a <a href="#cross-fade-function">cross-fade expression combining two images</a>,
-	<!-- an <a href="#image-notation">image notation</a>, -->
-	<!-- <a href="#element-reference">element reference</a>, -->
+	<a href="#url-notation">url reference</a>
 	or a <a href="#gradients">color gradient</a>.
 	Its syntax is:
 
@@ -966,7 +961,7 @@ Sizing Images and Objects in CSS {#sizing}
 	As well, a document may contain many other types of objects,
 	such as video, plugins, or nested documents.
 	These images and objects
-	(just <dfn noexport lt local-lt=object>objects</dfn> hereafter)
+	(just <dfn noexport local-lt=object>objects</dfn> hereafter)
 	may offer many types of sizing information to CSS,
 	or none at all.
 	This section defines generically the size negotiation model between the object and the CSS layout algorithms.
@@ -1590,127 +1585,13 @@ Determining How To Scale an Image: the 'image-rendering' property {#the-image-re
 Interpolation {#interpolation}
 ==============================
 
-	This section describes how to interpolate between new value types defined in this specification,
-	for use with modules such as CSS Transitions and CSS Animations.
-
-	If an algorithm below simply states that two values should be "interpolated" or "transitioned" without further details,
-	then the value should be interpolated as described by the Transitions spec.
-	Otherwise, the algorithm may reference a variable <var>t</var>
-	in its detailed description of the interpolation.
-	This is a number which starts at 0% and goes to 100%,
-	and is set to a value that represents the progress through the transition,
-	based on the duration of the transition,
-	the elapsed time,
-	and the timing function in use.
-	For example, with a linear timing function and a 1s duration,
-	after .3s <var>t</var> is equal to 30%.
-
-Interpolating <<image>> {#interpolating-images}
------------------------------------------------
-
-	All images can be interpolated,
-	though some special types of 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.
-
-	In specific terms,
-	at each point in the interpolation
-	the image is equal to <code>cross-fade( (100% - <var>t</var>) <var>start image</var>, <var>end image</var>)</code>.
-
-	Issue: Special-case interpolating to/from no image,
-	like "background-image: url(foo);" to "background-image: none;".
-
-
-Interpolating cross-fade() {#interpolating-image-combinations}
---------------------------------------------------------------
-
-	The three components of ''cross-fade()'' are interpolated independently.
-	Note this may result in nested ''cross-fade()'' notations.
-
-Interpolating <<gradient>> {#interpolating-gradients}
------------------------------------------------------
-
-	Issue: This section needs review and improvement.
-	In particular, I believe the handling of linear-gradient() is incomplete -
-	I think we want to specifically interpolate the "length" of the gradient line
-	(the distance between 0% and 100%)
-	between the starting and ending positions explicitly,
-	so it doesn't grow and then shrink over a single animation.
-
-	Gradient images can be interpolated directly in CSS transitions and animations,
-	smoothly animating from one gradient to another.
-	There are only a few restrictions on what gradients are allowed to be interpolated:
-
-	1. Both the starting and ending gradient must be expressed with the same function.
-		(For example, you can transition from a ''linear-gradient()'' to a ''linear-gradient()'',
-		but not from a ''linear-gradient()'' to a ''radial-gradient()'' or a ''repeating-linear-gradient()''.)
-
-	2. Both the starting and ending gradient must have the same number of <<color-stop>>s.
-		For this purpose, all repeating gradients are considered to have infinite color stops,
-		and thus all repeating gradients match in this respect.
-
-	3. Neither gradient uses a combination of <<length>> and <<percentage>> color stops.
-
-	If the two gradients satisfy all of those constraints,
-	they must be interpolated as described below.
-	If they fail the third one only,
-	they must be abruptly transitioned at 50%
-	(unless otherwise specified by a future specification).
-	If they fail either of the first two constraints,
-	they must be interpolated using ''cross-fade()''
-	as for generic images.
-
-	Note: The abrupt transition at 50% is so that content will not rely on cross-fading,
-	and smarter interpolation rules can be added for this case in the future.
-
-	1. Convert both the start and end gradients to their explicit forms:
-
-		: For linear gradients:
-		:: * If the direction is specified as an <<angle>>,
-				it is already in its explicit form.
-
-			* Otherwise,
-				change its direction to an <<angle>> in [''0deg'',''360deg'')
-				that would produce an equivalent rendering.
-
-				If both the start and end gradients had their direction specified with keywords,
-				and the absolute difference between the angles their directions mapped to is greater than 180deg,
-				add 360deg to the direction of the gradient with the smaller angle.
-				<span class='note'>This ensures that a transition from, for example,
-				"to left" (270deg) to "to top" (0deg)
-				rotates the gradient a quarter-turn clockwise,
-				as expected,
-				rather than rotating three-quarters of a turn counter-clockwise.</span>
-
-		: For radial gradients:
-		:: * If the size is specified as two <<length>>s or <<percentage>>s,
-				it is already in its explicit form.
-
-			* 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'',
-				change it to ''ellipse''.
-
-	2. Interpolate each component and color-stop of the gradients independently.
-		For linear gradients,
-		the only component is the angle.
-		For radial gradients,
-		the components are the horizontal and vertical position of the center
-		and the horizontal and vertical axis lengths.
-
-	3. To interpolate a color-stop,
-		first match each color-stop in the start gradient
-		to the corresponding color-stop at the same index in the end gradient.
-		For repeating gradients,
-		the first specified color-stop in the start and end gradients
-		are considered to be at the same index,
-		and all other color-stops following and preceding are indexed appropriately,
-		repeating and shifting each gradient's list of color-stops as needed.
-		Then, for each pair of color-stops,
-		interpolate the position and color independently.
+	Interpolation of <<image>> values is not defined in this level.
+	Implementations must abruptly transition them
+	(at 50% transition progress, like other unsupported interpolations),
+	unless otherwise defined by a future specification.
+
+	Note: CSS Images Level 4 is expected to define specialized interpolation for gradients,
+	and define that all other images interpolate by cross-fading.
 
 <!--
  ██████  ████████ ████████  ████    ███    ██       ████ ████████    ███    ████████ ████  ███████  ██    ██
@@ -1735,9 +1616,6 @@ Serialization {#serialization}
 	joining space-separated tokens with a single space,
 	and following each serialized comma with a single space.
 
-	For ''cross-fade()'',
-	always serialize the <<percentage>>.
-
 	<div class='example'>
 		For example, a gradient specified as:
 
@@ -1781,8 +1659,6 @@ Changes Since the <a href="https://www.w3.org/TR/2012/CR-css3-images-20120417/">
 		and the <<angle>> values deprecated.
 	- Added the 'image-rendering' property
 	- Added the ''cross-fade()'' notation
-	- Defined <a href="#interpolation">Interpolation</a>
-	- Defined <a href="#serialization">Serialization</a>
 
 <h3 class=no-num id=changes-last-call>
 Changes Since Last Call</h3>
diff --git a/css-images-4/Overview.bs b/css-images-4/Overview.bs
@@ -1825,6 +1825,7 @@ Overriding Image Resolutions: the 'image-resolution' property {#the-image-resolu
 		(1 image pixel per device pixel).
 	</div>
 
+
 <!--
 ████ ██    ██ ████████ ████████ ████████  ████████   ███████  ██          ███    ████████ ████  ███████  ██    ██
  ██  ███   ██    ██    ██       ██     ██ ██     ██ ██     ██ ██         ██ ██      ██     ██  ██     ██ ███   ██
@@ -1838,7 +1839,127 @@ Overriding Image Resolutions: the 'image-resolution' property {#the-image-resolu
 Interpolation {#interpolation}
 ==============================
 
-Note: No change from [[css3-images]].
+	This section describes how to interpolate between new value types defined in this specification,
+	for use with modules such as CSS Transitions and CSS Animations.
+
+	If an algorithm below simply states that two values should be "interpolated" or "transitioned" without further details,
+	then the value should be interpolated as described by the Transitions spec.
+	Otherwise, the algorithm may reference a variable <var>t</var>
+	in its detailed description of the interpolation.
+	This is a number which starts at 0% and goes to 100%,
+	and is set to a value that represents the progress through the transition,
+	based on the duration of the transition,
+	the elapsed time,
+	and the timing function in use.
+	For example, with a linear timing function and a 1s duration,
+	after .3s <var>t</var> is equal to 30%.
+
+Interpolating <<image>> {#interpolating-images}
+-----------------------------------------------
+
+	All images can be interpolated,
+	though some special types of 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.
+
+	In specific terms,
+	at each point in the interpolation
+	the image is equal to <code>cross-fade( (100% - <var>t</var>) <var>start image</var>, <var>end image</var>)</code>.
+
+	Issue: Special-case interpolating to/from no image,
+	like "background-image: url(foo);" to "background-image: none;".
+
+
+Interpolating cross-fade() {#interpolating-image-combinations}
+--------------------------------------------------------------
+
+	The three components of ''cross-fade()'' are interpolated independently.
+	Note this may result in nested ''cross-fade()'' notations.
+
+Interpolating <<gradient>> {#interpolating-gradients}
+-----------------------------------------------------
+
+	Issue: This section needs review and improvement.
+	In particular, I believe the handling of linear-gradient() is incomplete -
+	I think we want to specifically interpolate the "length" of the gradient line
+	(the distance between 0% and 100%)
+	between the starting and ending positions explicitly,
+	so it doesn't grow and then shrink over a single animation.
+
+	Gradient images can be interpolated directly in CSS transitions and animations,
+	smoothly animating from one gradient to another.
+	There are only a few restrictions on what gradients are allowed to be interpolated:
+
+	1. Both the starting and ending gradient must be expressed with the same function.
+		(For example, you can transition from a ''linear-gradient()'' to a ''linear-gradient()'',
+		but not from a ''linear-gradient()'' to a ''radial-gradient()'' or a ''repeating-linear-gradient()''.)
+
+	2. Both the starting and ending gradient must have the same number of <<color-stop>>s.
+		For this purpose, all repeating gradients are considered to have infinite color stops,
+		and thus all repeating gradients match in this respect.
+
+	3. Neither gradient uses a combination of <<length>> and <<percentage>> color stops.
+
+	If the two gradients satisfy all of those constraints,
+	they must be interpolated as described below.
+	If they fail the third one only,
+	they must be abruptly transitioned at 50%
+	(unless otherwise specified by a future specification).
+	If they fail either of the first two constraints,
+	they must be interpolated using ''cross-fade()''
+	as for generic images.
+
+	Note: The abrupt transition at 50% is so that content will not rely on cross-fading,
+	and smarter interpolation rules can be added for this case in the future.
+
+	1. Convert both the start and end gradients to their explicit forms:
+
+		: For linear gradients:
+		:: * If the direction is specified as an <<angle>>,
+				it is already in its explicit form.
+
+			* Otherwise,
+				change its direction to an <<angle>> in [''0deg'',''360deg'')
+				that would produce an equivalent rendering.
+
+				If both the start and end gradients had their direction specified with keywords,
+				and the absolute difference between the angles their directions mapped to is greater than 180deg,
+				add 360deg to the direction of the gradient with the smaller angle.
+				<span class='note'>This ensures that a transition from, for example,
+				"to left" (270deg) to "to top" (0deg)
+				rotates the gradient a quarter-turn clockwise,
+				as expected,
+				rather than rotating three-quarters of a turn counter-clockwise.</span>
+
+		: For radial gradients:
+		:: * If the size is specified as two <<length>>s or <<percentage>>s,
+				it is already in its explicit form.
+
+			* 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'',
+				change it to ''ellipse''.
+
+	2. Interpolate each component and color-stop of the gradients independently.
+		For linear gradients,
+		the only component is the angle.
+		For radial gradients,
+		the components are the horizontal and vertical position of the center
+		and the horizontal and vertical axis lengths.
+
+	3. To interpolate a color-stop,
+		first match each color-stop in the start gradient
+		to the corresponding color-stop at the same index in the end gradient.
+		For repeating gradients,
+		the first specified color-stop in the start and end gradients
+		are considered to be at the same index,
+		and all other color-stops following and preceding are indexed appropriately,
+		repeating and shifting each gradient's list of color-stops as needed.
+		Then, for each pair of color-stops,
+		interpolate the position and color independently.
 
 <!--
  ██████  ████████ ████████  ████    ███    ██       ████ ████████    ███    ████████ ████  ███████  ██    ██
@@ -1853,7 +1974,28 @@ Note: No change from [[css3-images]].
 Serialization {#serialization}
 ==============================
 
-Note: No change from [[css3-images]].
+	This section describes the serialization of all new properties and value types introduced in this specification,
+	for the purpose of interfacing with the CSS Object Model [[CSSOM]].
+
+	To serialize any function defined in this module,
+	serialize it per its individual grammar,
+	in the order its grammar is written in,
+	omitting components when possible without changing the meaning,
+	joining space-separated tokens with a single space,
+	and following each serialized comma with a single space.
+
+	For ''cross-fade()'',
+	always serialize the <<percentage>>.
+
+	<div class='example'>
+		For example, a gradient specified as:
+
+		<pre>Linear-Gradient( to bottom, red 0%,yellow,black 100px)</pre>
+
+		must serialize as:
+
+		<pre>linear-gradient(red, yellow, black 100px)</pre>
+	</div>
 
 Privacy and Security Considerations {#privsec}
 ==============================================
