[scroll-animations-1] minor tidyup

replace <code> with ``
replace <var> with ||
remove training space
rewrap some sections

Author: majido

scroll-animations-1/Overview.bs

@@ -84,10 +84,13 @@ sample such effects asynchronously as well.
 
 ## Value Definitions ## {#values}
 
-This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from [[!CSS2]]
-using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from [[!CSS-VALUES-3]].
-Value types not defined in this specification are defined in CSS Values &amp; Units [[!CSS-VALUES-3]].
-Combination with other CSS modules may expand the definitions of these value types.
+This specification follows the <a
+href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property
+definition conventions</a> from [[!CSS2]] using the <a
+href="https://www.w3.org/TR/css-values-3/#value-defs">value definition
+syntax</a> from [[!CSS-VALUES-3]]. Value types not defined in this specification
+are defined in CSS Values &amp; Units [[!CSS-VALUES-3]]. Combination with other
+CSS modules may expand the definitions of these value types.
 
 In addition to the property-specific values listed in their definitions,
 all properties defined in this specification
@@ -254,7 +257,7 @@ If we use this API for this case, the example code will be as follow:
 if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches) {
   var animation = div.animate({ width: '100%' }, { duration: 1000, fill: "forwards" });
   animation.timeline = new ScrollTimeline(
-    { 
+    {
       start: 0,
       end: CSS.percent(100)
     }
@@ -328,19 +331,19 @@ enum ScrollDirection {
 The {{ScrollDirection}} enumeration specifies a direction of scroll of a
 scrollable element.
 
-:   <code>block</code>
+:   `block`
 ::  Selects the direction along the [=block axis=], conforming to writing mode
     and directionality.
 
-:   <code>inline</code>
+:   `inline`
 ::  Selects the direction along the [=inline axis=], confirming to writing mode
     and directionality.
 
-:   <code>horizontal</code>
+:   `horizontal`
 ::  Selects the physical horizontal direction (ignoring writing mode and
     directionality).
 
-:   <code>vertical</code>
+:   `vertical`
 ::  Selects the physical vertical direction (ignoring writing mode and
     directionality).
 
@@ -394,13 +397,13 @@ determined not by wall-clock time, but by the progress of scrolling in a
 
         <div class="switch">
 
-        :   If the <code>source</code> member of |options| is missing,
+        :   If the `source` member of |options| is missing,
         ::  The {{scrollingElement}} of the {{Document}} <a lt="document
             associated with a window">associated</a> with the {{Window}} that is
             the <a>current global object</a>.
 
         :   Otherwise,
-        ::  The <code>source</code> member of |options|.
+        ::  The `source` member of |options|.
 
         </div>
 
@@ -429,19 +432,19 @@ determined not by wall-clock time, but by the progress of scrolling in a
 
     On setting, run the procedure to [=set the offset value=] with the provided
     value as |val|.
-    
-    
+
+
     The procedure to <dfn>set the offset value</dfn> with |val| as the provided
     value has the following steps:
-    
+
     1.  If |val| is a {{DOMString}}, let |val| be the result of
         <a lt="rectify a keywordish value">rectifying the keywordish value</a>.
 
     2.  Set the offset value to be the result corresponding to the first
         matching condition from the following:
 
         <div class="switch">
-    
+
         :   If |val| is a {{CSSKeywordValue}} and <a lt="match the grammar">
             matches the grammar</a> `auto`:
         ::  Return |val|.
@@ -511,11 +514,11 @@ the [=effective scroll offset=] that is resolved from {{end}}.
 A <dfn>container-based offset</dfn> is a scroll timeline offset that is declared
 only in relation with the <a>scroll container</a> as specified by {{source}}.
 
-A [=container-based offset=] is provided in the {{CSSNumericValue}} or 
+A [=container-based offset=] is provided in the {{CSSNumericValue}} or
 {{CSSKeywordValue}} forms.
 
 The procedure to <dfn>resolve a container-based offset</dfn> given
-<var>offset</var> is as follows:
+|offset| is as follows:
 
 1.  If <em>any</em> of the following are true:
 
@@ -529,12 +532,12 @@ The procedure to <dfn>resolve a container-based offset</dfn> given
     first matching condition from the following:
     <div class="switch">
 
-    :   If <var>offset</var> is a {{CSSKeywordValue}} and
+    :   If |offset| is a {{CSSKeywordValue}} and
         <a lt="match the grammar">matches</a> `auto`:
     ::  Either the beginning or the ending of {{source}}'s scroll range in
         {{orientation}} depending on whether the offset is {{start}} or {{end}}.
 
-    :   If <var>offset</var> is a {{CSSNumericValue}} and
+    :   If |offset| is a {{CSSNumericValue}} and
         <a lt="match the grammar">matches</a> <<length-percentage>>:
     ::  The distance indicated by the value along {{source}}'s scroll range in
         {{orientation}} as expressed by absolute length, a percentage, or a
@@ -593,14 +596,14 @@ dictionary ElementBasedOffset {
     of the target that is expected to be visible in  {{source}}'s [=scrollport=]
     at the intersection offset.
 
-Issue(5203): The range of the <code>threshold</code> member is not currently
+Issue(5203): The range of the `threshold` member is not currently
 checked anywhere.
 
 </div>
 
 
 The procedure to <dfn>resolve an element-based offset</dfn> given
-<var>offset</var> is as follows:
+|offset| is as follows:
 
 1.  If <em>any</em> of the following are true:
 
@@ -610,63 +613,63 @@ The procedure to <dfn>resolve an element-based offset</dfn> given
 
     The [=effective scroll offset=] is null and abort remaining steps.
 
-1.  Let <var>target</var> be <var>offset</var>'s {{target}}.
+1.  Let |target| be |offset|'s {{target}}.
 
 1.  If <em>any</em> of the following are true:
 
-    * <var>target</var> is null, or
-    * <var>target</var> does not currently have a [=CSS layout box=].
+    * |target| is null, or
+    * |target| does not currently have a [=CSS layout box=].
 
     The [=effective scroll offset=] is null and abort remaining steps.
 
 
-1.  If <var>target</var> 's nearest [=scroll container=] ancestor
+1.  If |target| 's nearest [=scroll container=] ancestor
     is not {{source}}
     abort remaining steps
     since the [=effective scroll offset=] is null.
 
-1.  Let <var>container box</var> be the {{source}}'s [=scrollport=].
+1.  Let |container box| be the {{source}}'s [=scrollport=].
 
-1.  Let <var>target box</var> be the result of finding
+1.  Let |target box| be the result of finding
     the rectangular bounding box
     (axis-aligned in {{source}}’s coordinate space)
-    of <var>target</var>'s transformed border box.
+    of |target|'s transformed border box.
 
-1.  If <var>offset</var>'s {{edge}} is 'start' then
-    let <var>scroll offset</var>
-    be the scroll offset at which <var>container box</var>'s start edge is flush
-    with the <var>target box</var>'s end edge
+1.  If |offset|'s {{edge}} is 'start' then
+    let |scroll offset|
+    be the scroll offset at which |container box|'s start edge is flush
+    with the |target box|'s end edge
     in the axis and direction determined by {{orientation}}.
 
-1.  If <var>offset</var>'s {{edge}} is 'end' then
-    let <var>scroll offset</var>
-    be the scroll offset at which <var>container box</var>'s end edge is flush
-    with the <var>target box</var>'s start edge
+1.  If |offset|'s {{edge}} is 'end' then
+    let |scroll offset|
+    be the scroll offset at which |container box|'s end edge is flush
+    with the |target box|'s start edge
     in the axis and direction determined by {{orientation}}.
 
-1.  Let <var>threshold amount</var> be the result of evaluating the following
-    expression where <var>target dimension</var> is <var>target box</var>'s dimension in the axis
+1.  Let |threshold amount| be the result of evaluating the following
+    expression where |target dimension| is |target box|'s dimension in the axis
     determined by {{orientation}}.
     <blockquote>
-      <code><var>threshold amount</var> = {{threshold}} &times; <var>target dimension</var></code>
+      <code>|threshold amount| = {{threshold}} &times; |target dimension|</code>
     </blockquote>
 
 
-1.  Adjust <var>scroll offset</var> by <var>threshold amount</var> as follow:
+1.  Adjust |scroll offset| by |threshold amount| as follow:
     <div class="switch">
 
-    :   If <var>offset</var>'s {{edge}} is 'start',
-    ::  <var>scroll offset</var> = <var>scroll offset</var> - <var>threshold amount</var>.
+    :   If |offset|'s {{edge}} is 'start',
+    ::  |scroll offset| = |scroll offset| - |threshold amount|.
 
-    :   Otherwise (<var>offset</var>'s {{edge}} is 'end'),
-    ::  <var>scroll offset</var> = <var>scroll offset</var> + <var>threshold amount</var>.
+    :   Otherwise (|offset|'s {{edge}} is 'end'),
+    ::  |scroll offset| = |scroll offset| + |threshold amount|.
 
     </div>
 
-1.  Clamp the value of <var>scroll offset</var> to be within the {{source}}'s
+1.  Clamp the value of |scroll offset| to be within the {{source}}'s
      scroll range.
 
-1.  The [=effective scroll offset=] is <var>scroll offset</var>
+1.  The [=effective scroll offset=] is |scroll offset|
 
 
 <div class="note">
@@ -771,7 +774,7 @@ follows:
 
 <div class="switch">
 
-:   If the {{timeRange}} has the value <code>"auto"</code>,
+:   If the {{timeRange}} has the value `"auto"`,
 ::  The [=effective time range=] is the maximum value of the
     [=target effect end=] of all animations
     directly associated with this timeline.
@@ -803,7 +806,7 @@ The procedure to calculate <dfn>effective scroll range</dfn> of a
     ::  The [=effective scroll range=] is the result of evaluating the following
         expression:
         <blockquote>
-        <code>[=effective end offset=] - [=effective start offset=]</code>
+        `[=effective end offset=] - [=effective start offset=]`
         </blockquote>
 
     </div>
@@ -822,18 +825,18 @@ The [=phase=] of a {{ScrollTimeline}} is calculated as follows:
 
     The [=phase=] is [=inactive phase|inactive=] and abort remaining steps.
 
-1.  Let <var>current scroll offset</var> be the current scroll offset of
+1.  Let |current scroll offset| be the current scroll offset of
     {{source}} in the direction specified by {{orientation}}.
 
 1.  The [=phase=] is the result corresponding to the first matching condition
     from below:
 
 <div class="switch">
 
-:   If <var>current scroll offset</var> is less than [=effective start offset=]:
+:   If |current scroll offset| is less than [=effective start offset=]:
 ::  The [=phase=] is [=before phase|before=]
 
-:   If <var>current scroll offset</var> is greater than or equal to [=effective
+:   If |current scroll offset| is greater than or equal to [=effective
     end offset=] <em>and</em> [=effective end offset=] is less than the maximum
     scroll offset of {{source}} in {{orientation}}:
 
@@ -865,26 +868,26 @@ The [=current time=] of a {{ScrollTimeline}} is calculated as follows:
 
     The [=current time=] is an unresolved time value and abort remaining steps.
 
-1.  Let <var>current scroll offset</var> be the current scroll offset of
+1.  Let |current scroll offset| be the current scroll offset of
     {{source}} in the direction specified by {{orientation}}.
 
 1.  The [=current time=] is the result corresponding to the first matching
     condition from below:
 
 <div class="switch">
 
-:   If <var>current scroll offset</var> is less than [=effective start offset=]:
+:   If |current scroll offset| is less than [=effective start offset=]:
 ::  The [=current time=] is 0.
 
-:   If <var>current scroll offset</var> is greater than or equal to [=effective
+:   If |current scroll offset| is greater than or equal to [=effective
     end offset=]:
 ::  The [=current time=] is the [=effective time range=].
 
 :   Otherwise,
 ::  The [=current time=] is the result of evaluating the following expression:
 
     <blockquote>
-      <code>(<var>current scroll offset</var> - [=effective start offset=]) / [=effective scroll range=] &times; [=effective time range=]</code>
+      `(|current scroll offset| - [=effective start offset=]) / [=effective scroll range=] &times; [=effective time range=]`
     </blockquote>
 
 </div>
@@ -942,18 +945,18 @@ condition from the following:
 :   If 'source' is a 'selector()'
 ::  The [=scroll container=] identified by the <<id-selector>>.
 
-:   If 'source' is <code>auto</code>
+:   If 'source' is `auto`
 ::  The {{scrollingElement}} of the {{Document}} <a lt="document associated with
     a window">associated</a> with the {{Window}} that is the
     <a>current global object</a>.
 
-:   Otherwise ('source' is <code>none</code>)
+:   Otherwise ('source' is `none`)
 ::  null.
 
 </div>
 
 Issue(4338): Consider choosing animation target's nearest scrollable ancestor
-instead of document's scrolling Element for <code>auto</code>.
+instead of document's scrolling Element for `auto`.
 
 <pre class='descdef'>
   Name: orientation
@@ -1177,7 +1180,7 @@ frame.
 Nothing in this section is intended to require that scrolling block on layout
 or script. If a user agent normally composites frames where scrolling has
 occurred but the consequences of scrolling have not been fully propagated in
-layout or script (for example, <code>scroll</code> event listeners have not yet
+layout or script (for example, `scroll` event listeners have not yet
 run), the user agent may likewise choose not to sample scroll-driven animations
 for that composited frame. In such cases, the rendered scroll offset and the
 state of a scroll-driven animation may be inconsistent in the composited frame.