[css4-images] Tweak the interpolation section, rewrite the issue about gradient interpolation.

Author: tabatkins

css4-images/Overview.html

@@ -3535,29 +3535,40 @@ <h3 id=interpolating-image-combinations><span class=secno>7.2. </span>
   <h3 id=interpolating-gradients><span class=secno>7.3. </span> Interpolating
    <a href="#gradient-type"><var>&lt;gradient></var></a></h3>
 
-  <p class=issue> Redo this to actually work right with the current syntax.
+  <p class=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.
 
   <p> 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:
 
   <ol>
    <li> 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().)
-
-   <li> Both the starting and ending gradient must have the same number of
-    color-stops. For this purpose, a repeating gradient is considered to have
-    infinite color-stops, and thus all repeating gradients have the same
-    number of color-stops. (Note that one may pad a gradient with additional
-    color-stops placed atop each other, if necessary to make two gradients
-    have the same number of color-stops.)
+    function. (For example, you can transition from a ‘<code
+    class=css>linear-gradient()</code>’ to a ‘<code
+    class=css>linear-gradient()</code>’, but not from a ‘<code
+    class=css>linear-gradient()</code>’ to a ‘<code
+    class=css>radial-gradient()</code>’ or a ‘<code
+    class=css>repeating-linear-gradient()</code>’.)
+
+   <li> Both the starting and ending gradient must have the same number of <a
+    href="#color-stop-type"><var>&lt;color-stop></var></a>s. For this
+    purpose, a repeating gradient is considered to have infinite <a
+    href="#color-stop-type"><var>&lt;color-stop></var></a>s, and thus all
+    repeating gradients have the same number of <a
+    href="#color-stop-type"><var>&lt;color-stop></var></a>s. (Note that one
+    may pad a gradient with additional <a
+    href="#color-stop-type"><var>&lt;color-stop></var></a>s placed atop each
+    other, if necessary to make two gradients have the same number of <a
+    href="#color-stop-type"><var>&lt;color-stop></var></a>s.)
   </ol>
 
   <p> If the two gradients satisfy both of those constraints, they must be
    interpolated as described below. If not, they must be interpolated as a
-   generic image.
+   generic <a href="#image-type"><var>&lt;image></var></a>.
 
   <ol>
    <li> Convert both the start and end gradients to their explicit forms:
@@ -3573,15 +3584,14 @@ <h3 id=interpolating-gradients><span class=secno>7.3. </span> Interpolating
         [‘<code class=css>0deg</code>’,‘<code
         class=css>360deg</code>’) that would produce an equivalent
         rendering.
-
-       <li> 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>
+        <p> 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>
       </ul>
 
      <dt>For radial gradients:
@@ -3594,7 +3604,10 @@ <h3 id=interpolating-gradients><span class=secno>7.3. </span> Interpolating
 
        <li> Otherwise, the size must be changed to a pair of <a
         href="#radial-size-circle"><var>&lt;length></var></a>s that would
-        produce an equivalent ending-shape.
+        produce an equivalent ending-shape. If the <a
+        href="#shape"><var>&lt;shape></var></a> was specified as ‘<code
+        class=css>circle</code>’, change it to ‘<code
+        class=css>ellipse</code>’.
       </ul>
     </dl>
 

css4-images/Overview.src.html

@@ -2984,7 +2984,12 @@ <h3 id='interpolating-gradients'>
 Interpolating <var>&lt;gradient></var></h3>
 
 	<p class='issue'>
-		Redo this to actually work right with the current syntax.
+		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.
 
 	<p>
 		Gradient images can be interpolated directly in CSS transitions and animations, 
@@ -2994,21 +2999,21 @@ <h3 id='interpolating-gradients'>
 	<ol>
 		<li>
 			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().)
+			(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()''.)
 
 		<li>
-			Both the starting and ending gradient must have the same number of color-stops.  
-			For this purpose, a repeating gradient is considered to have infinite color-stops, 
-			and thus all repeating gradients have the same number of color-stops.  
-			(Note that one may pad a gradient with additional color-stops placed atop each other, 
-			if necessary to make two gradients have the same number of color-stops.)
+			Both the starting and ending gradient must have the same number of <var>&lt;color-stop></var>s.  
+			For this purpose, a repeating gradient is considered to have infinite <var>&lt;color-stop></var>s, 
+			and thus all repeating gradients have the same number of <var>&lt;color-stop></var>s.  
+			(Note that one may pad a gradient with additional <var>&lt;color-stop></var>s placed atop each other, 
+			if necessary to make two gradients have the same number of <var>&lt;color-stop></var>s.)
 	</ol>
 
 	<p>
 		If the two gradients satisfy both of those constraints, 
 		they must be interpolated as described below.  
-		If not, they must be interpolated as a generic image.
+		If not, they must be interpolated as a generic <var>&lt;image></var>.
 
 	<ol>
 		<li>
@@ -3027,15 +3032,15 @@ <h3 id='interpolating-gradients'>
 							change its direction to an <var>&lt;angle></var> in [''0deg'',''360deg'')
 							that would produce an equivalent rendering.
 
-						<li>
-							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>
+							<p>
+								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>
 					</ul>
 
 
@@ -3049,8 +3054,9 @@ <h3 id='interpolating-gradients'>
 						<li>
 							Otherwise, the size must be changed to a pair of <var>&lt;length></var>s 
 							that would produce an equivalent ending-shape.
+							If the <var>&lt;shape></var> was specified as ''circle'',
+							change it to ''ellipse''.
 					</ul>
-				
 			</dl>