diff --git a/css-gaps-1/Overview.bs b/css-gaps-1/Overview.bs index a2a0e19043a..bc5ef39a8e4 100644 --- a/css-gaps-1/Overview.bs +++ b/css-gaps-1/Overview.bs @@ -712,7 +712,7 @@ Gap decoration color: The 'column-rule-color' and 'row-rule-color' propertiesgrid containers, flex containers, multicol containers, and masonry containers Inherited: no - Animation type: by computed value type + Animation type: repeatable list, see [[#interpolation-behavior]]. 
@@ -807,7 +807,7 @@ Gap decoration width: The 'column-rule-width' and 'row-rule-width' propertiesgrid containers, flex containers, multicol containers, and masonry containers
 		Inherited: no
 		Computed value: list of absolute lengths, snapped as a border width, or ''0'' under conditions described below
-		Animation type: by computed value type
+		Animation type: repeatable list, see [[#interpolation-behavior]].
 	
@@ -982,6 +982,162 @@ Lists of values and the ''repeat-line-color/repeat()'' notation
 		except that in step 2, change all instances of "first" to "last".
 	
 
+
Interpolation behavior

+When interpolating ''repeat()'' values, or lists of values for 'rule-color' or 'rule-width', the interpolation proceeds in two steps:
+
+	
    
+	
  1.  Expansion: Expand any [=integer repeater=] into its equivalent list of values. 
    2. 
+	
  2.  List Interpolation: Apply the [=repeatable list=] interpolation algorithm to the expanded lists, interpolating each item against its counterpart.
    3. 
+	

+	

+		
+		@keyframes example {
+			from { column-rule-width: 10px }
+			to   { column-rule-width: 20px 40px }
+		}
+		

+		Interpolation of the above values would result in expansion of the
+		"from" and "to" values to create lists of equal lengths:
+		
+		From:   10px 10px
+		At 50%: 15px 25px
+		To:     20px 40px
+		

+	

+	

+		
+		@keyframes example {
+			from { column-rule-width: repeat(2, 5px 10px); }
+			to   { column-rule-width: repeat(2, 15px 20px); }
+		}
+		

+		Interpolation of the above values would result in expansion of the
+		"from" and "to" values to create lists of equal lengths:
+		
+		From:   5px 10px 5px 10px
+		At 50%: 10px 15px 10px 15px
+		To:     15px 20px 15px 20px
+		

+	

+
+	

+		
+		@keyframes example {
+			from { column-rule-width: repeat(2, 10px 20px); }
+			to   { column-rule-width: 20px; }
+		}
+		

+		Interpolation of the above values would result in expansion of the
+		"from" and "to" values to create lists of equal lengths:
+		
+		From:   10px 20px 10px 20px
+		At 50%: 15px 20px 15px 20px
+		To:     20px 20px 20px 20px
+		

+	

+	

+		
+		@keyframes example {
+			from { column-rule-width: repeat(2, 10px 20px); }
+			to   { column-rule-width: 20px 30px; }
+		}
+		

+		Interpolation of the above values would result in expansion of the
+		"from" and "to" values to create lists of equal lengths:
+		
+		From:   10px 20px 10px 20px
+		At 50%: 15px 25px 15px 25px
+		To:     20px 30px 20px 30px
+		

+	

+
+
+
Lists with Auto Repeaters

+	

+
+		To interpolate with auto repeaters, when either of the lists we are interpolating between (let's call them |from| and |to|) include an auto repeater, we conceptually split the list into three segments, similar
+		to how we [=assign gap decoration values=]:
+		- |leading gaps|
+		- |auto repeat|
+		- |trailing gaps|
+
+			
    
+				
  1. Let |segment lengths| be the length of the |leading gaps| and |trailing gaps| segments (i.e. the number of items in each list, after expansion).
    2. 
+				
  2. We split |to| and/or |from| into their respective segments.
    3. 
+				
  3. If either of |leading gaps| or |trailing gaps| in |to| or |from| is empty and the other has an auto repeater, we do [=discrete=] interpolation.
    4. 
+				
  4. Expand any integer repeaters on each segment.
    5. 
+				
  5. If the |segment lengths| don't match, we fall back to [=discrete=] interpolation.
    6. 
+				
  6. When both |from| and |to| contain auto-repeaters and |segment lengths| match, we apply list interpolation to each segment. Applying list interpolation to the |auto repeat| means applying it to the list of values inside the repeater.
    7. 
+				
  7. If only one of |from| or |to| contains an auto-repeater, we do [=discrete=] interpolation.
    8. 
+			

+	

+	

+		
+		@keyframes example {
+			from { column-rule-width: 10px repeat(auto, 20px) 30px }
+			to   { column-rule-width: 20px repeat(auto, 40px) 40px }
+		}
+		

+		Length of the |leading gaps| and |trailing gaps| match, so we can apply the [=repeatable list=] algorithm to each segment.
+		
+		From:   10px repeat(auto, 20px) 30px
+		At 50%: 15px repeat(auto, 30px) 35px
+		To:     20px repeat(auto, 40px) 40px
+		

+	

+
+	

+		
+		@keyframes example {
+			from { column-rule-width: 10px repeat(auto, 20px) 30px }
+			to   { column-rule-width: 20px repeat(auto, 40px 50px) 40px }
+		}
+		

+		Length of the |leading gaps| and |trailing gaps| match, so we can apply the [=repeatable list=] algorithm to each segment,
+		applying list interpolation to list of values in the |auto repeat| segment.
+		
+		From:   10px repeat(auto, 20px 20px) 30px
+		At 50%: 15px repeat(auto, 30px 35px) 35px
+		To:     20px repeat(auto, 40px 50px) 40px
+		

+	

+
+	

+		
+		@keyframes example {
+			from { column-rule-width: 10px repeat(auto, 20px) }
+			to   { column-rule-width: 20px 30px repeat(auto, 40px 50px) }
+		}
+		

+		Length of the |leading gaps| and |trailing gaps| match, so we can apply the [=repeatable list=] algorithm to each segment,
+		applying list interpolation to list of values in the |auto repeat| segment.
+		
+		From:   10px 10px repeat(auto, 20px 20px)
+		At 50%: 15px 20px repeat(auto, 30px 35px)
+		To:     20px 30px repeat(auto, 40px 50px)
+		

+	

+
+	

+		
+		@keyframes example {
+			from { column-rule-width: 10px repeat(auto, 20px) 30px }
+			to   { column-rule-width: 20px repeat(auto, 40px) 40px 50px }
+		}
+		

+		Length of the |trailing gaps| and |leading gaps| in |to| do not match, so we fall back to [=discrete=] interpolation.
+	

+
+	

+		
+		@keyframes example {
+			from { column-rule-width: 10px repeat(auto, 20px) 30px }
+			to   { column-rule-width: 20px }
+		}
+		

+		Only |from| contains an auto repeater, so we fall back to [=discrete=] interpolation.
+	

+
 

 Gap decoration shorthands: The 'column-rule' and 'row-rule' properties

 
@@ -1068,4 +1224,6 @@ Changes since the 1
 		
  • Added links to WPT suite.
 		
  • Updated 'rule-paint-order' to 'rule-overlap'. (Issue 12540)
 		
  • Updated the definition for intersections to use 'gutter'. (Issue 12084)
+    
  • Specified the interpolation behavior for values which may contain repeaters.
+			(Issue 12431)