[scroll-animations] Add CSSOM serialization algorithms (w3c#5686)

Co-authored-by: Anders Hartvoll Ruud <andruud@google.com>

Author: andruud

scroll-animations-1/Overview.bs

@@ -1073,6 +1073,109 @@ interface CSSScrollTimelineRule : CSSRule {
   </dd>
 </dl>
 
+<div algorithm>
+  To <dfn export>serialize a CSSScrollTimelineRule</dfn>,
+  return the concatenation of the following:
+
+    1. The string <code>"@scroll-timeline"</code> followed by a SPACE (U+0020).
+    1. The result of performing <a>serialize an identifier</a> on the rule's
+        {{CSSScrollTimelineRule/name}}, followed by a SPACE (U+0020).
+    1. A single LEFT CURLY BRACKET (U+007B), followed by a SPACE (U+0020).
+    1. If the 'source' descriptor is missing, the empty string.
+        Otherwise, the concatenation of the following:
+        1. The string <code>"source:"</code>, followed by a SPACE (U+0020).
+        1. One of the following,
+            depending on the value of the 'source' descriptor:
+            <dl class=switch>
+              : an identifier
+              :: The result of performing <a>serialize an identifier</a>
+                  on that identifier.
+              : selector(&lt;id-selector>)
+              :: The result of performing
+                  <a>serialize a selector() function</a>.
+                </dl>
+        1. A single SEMICOLON (U+003B), followed by a SPACE (U+0020).
+    1. If the 'orientation' descriptor is missing, the empty string.
+        Otherwise, the concatenation of the following:
+        1. The string <code>"orientation:"</code>,
+            followed by a SPACE (U+0020).
+        1. The result of performing <a>serialize an identifier</a>
+            on the value of the 'orientation' descriptor,
+            followed by a SEMICOLON (U+003B),
+            followed by a SPACE (U+0020).
+    1. If the 'start' descriptor is missing, the empty string.
+        Otherwise, the concatenation of the following:
+        1. The string <code>"start:"</code>,
+            followed by a SPACE (U+0020).
+        1. The result of performing <a>serialize a scroll timeline offset</a>
+            on the rule's 'start' descriptor,
+            followed by a SEMICOLON (U+003B),
+            followed by a SPACE (U+0020).
+    1. If the 'end' descriptor is missing, the empty string.
+        Otherwise, the concatenation of the following:
+        1. The string <code>"end:"</code>,
+            followed by a SPACE (U+0020).
+        1. The result of performing <a>serialize a scroll timeline offset</a>
+            on the rule's 'end' descriptor,
+            followed by a SEMICOLON (U+003B),
+            followed by a SPACE (U+0020).
+    1. If the 'time-range' descriptor is missing, the empty string.
+        Otherwise, the concatenation of the following:
+        1. The string <code>"time-range:"</code>,
+            followed by a SPACE (U+0020).
+        1. One of the following,
+            depending on the value of the 'time-range' descriptor:
+            <dl class=switch>
+              : an identifier
+              :: The result of performing <a>serialize an identifier</a>
+                 on that identifier.
+              : &lt;time>
+              :: The result of performing <a>serialize a CSS component value</a>
+                 on that value.
+                </dl>
+        1. A single SEMICOLON (U+003B), followed by a SPACE (U+0020).
+    1. A single RIGHT CURLY BRACKET (U+007D).
+</div>
+
+<div algorithm>
+  To <dfn export>serialize a scroll timeline offset</dfn>,
+  return one the following,
+  depending on the value type:
+
+  <dl class=switch>
+    : an identifier
+    : &lt;length-percentage>
+    :: The result of performing <a>serialize a CSS component value</a>
+        on that value.
+    : &lt;element-offset>
+    :: The concatenation of the following:
+         1. The result of performing <a>serialize a selector() function</a>
+             on the selector() function associated with the element offset.
+         2. If the offset has an associated {{ElementBasedOffset/edge}},
+             a single SPACE (U+0020),
+             followed by the result of <a>serialize an identifier</a>
+             on the value of "edge".
+             Otherwise, the empty string.
+         3. If the offset has an associated {{ElementBasedOffset/threshold}},
+             a single SPACE (U+0020),
+             followed by the result of <a>serialize a CSS component value</a>
+             on the value of "threshold".
+             Otherwise, the empty string.
+  </dl>
+
+</div>
+
+<div algorithm>
+  To <dfn export>serialize a selector() function</dfn>,
+  return the concatenation of the following:
+
+    1. The string <code>"selector"</code>,
+        followed by LEFT PARENTHESIS (U+0028).
+    2. The result of performing <a>serialize a selector</a>
+        on the selector() function's argument.
+    3. A single RIGHT PARENTHESIS (U+0029).
+</div>
+
 ## Examples ## {#timeline-examples}
 
 <div class="example">