[css-nav-1] Fix the markup for hiding API description

Jihye Hong · Jihye Hong · commit d30b3e566802 · 2019-11-05T19:01:45.000+09:00
diff --git a/css-nav-1/Overview.bs b/css-nav-1/Overview.bs
@@ -995,36 +995,45 @@ To run the <dfn>spatial navigation steps</dfn> in <var>direction</var>, do the f
 3. If <var>eventTarget</var> is the <a>Document</a> or the <a>document element</a>,
         set <var>eventTarget</var> be <a>the body element</a> if it is not <code>null</code>
         or to the <a>document element</a> otherwise.
-4.
-    * <span class=cssapi>If <var>searchOrigin</var> is <a>scroll container</a>
-        and the computed value of the 'spatial-navigation-action' property on <var>searchOrigin</var> is ''spatial-navigation-action/scroll''
-        and <var>searchOrigin</var> [=can be manually scrolled=],
-        then [=directionally scroll the element=] <var>searchOrigin</var> and return.</span>
-    * <span class=cssapi>Else,</span> if <var>searchOrigin</var> is either a <a>scroll container</a> or the <a>document</a>
-        1. Let <var>candidates</var> be the result of <a>finding focusable areas</a>
-            within <var>searchOrigin</var>
-            with the argument <var>visibleOnly</var> set to <code>false</code>
-            <span class=cssapi>if computed value of the 'spatial-navigation-action' property on <var>searchOrigin</var>
-            is ''spatial-navigation-action/focus'' or to <code>true</code> otherwise.
-            </span>
-        2.
-            * If <var>candidates</var> contains at least 1 item:
-                1. Let <var>bestCandidate</var> be the result of <a>selecting the best candidate</a>
-                    within <var>candidates</var> in <var>direction</var> starting from <var>searchOrigin</var>
-                2. If <a>navigation-override</a> <a>is enabled</a> in the [=node document=] of <var>eventTarget</var> for the <a spec=html for="/">origin</a> of the [=active document=] of the [=top-level browsing context=], then
-                    <span class=api><a>fire an event</a> named <a event>navbeforefocus</a> at <var>eventTarget</var> using {{NavigationEvent}} with:
-                    * {{NavigationEvent/dir}} set to <var>direction</var>
-                    * {{NavigationEvent/relatedTarget}} set to <var>bestCandidate</var>
-                    * the <code>bubbles</code> and <code>cancelable</code> attributes set to <code>true</code>
-
-                    and return if the result is <code>false</code>.</span>
-                3. Run the <a>focusing steps</a> for <var>bestCandidate</var> and return
-                    <span class=cssapi>* Else if the computed value of the 'spatial-navigation-action' property on <var>eventTarget</var>
-                    is not ''spatial-navigation-action/focus''
-                    and <var>eventTarget</var> <a>can be manually scrolled</a>,
-                    then <a>directionally scroll the element</a> <var>eventTarget</var> in <var>direction</var> and return.</span>
-            * Else, fall back to the next step.
-    * Else, fall back to the next step.
+4.  <ul>
+        <span class=cssapi><li>If <var>searchOrigin</var> is <a>scroll container</a>
+            and the computed value of the 'spatial-navigation-action' property on <var>searchOrigin</var> is ''spatial-navigation-action/scroll''
+            and <var>searchOrigin</var> [=can be manually scrolled=],
+            then [=directionally scroll the element=] <var>searchOrigin</var> and return.</li></span>
+        <li><span class=cssapi>Else,</span> if <var>searchOrigin</var> is either a <a>scroll container</a> or the <a>document</a>
+            1. Let <var>candidates</var> be the result of <a>finding focusable areas</a>
+                within <var>searchOrigin</var>
+                with the argument <var>visibleOnly</var> set to <code>false</code>
+                <span class=cssapi>if computed value of the 'spatial-navigation-action' property on <var>searchOrigin</var>
+                is ''spatial-navigation-action/focus'' or to <code>true</code> otherwise.
+                </span>
+            2.  
+                <ul>
+                    <span class=cssapi><li>If 
+                        the computed value of the 'spatial-navigation-action' property on <var>eventTarget</var> is not ''spatial-navigation-action/focus''
+                        and <var>eventTarget</var> <a>can be manually scrolled</a>,
+                        then <a>directionally scroll the element</a> <var>eventTarget</var> in <var>direction</var> and return.</li></span>
+                    <li><span class=cssapi>Else </span>if <var>candidates</var> contains at least 1 item:
+                        1. Let <var>bestCandidate</var> be the result of <a>selecting the best candidate</a>
+                            within <var>candidates</var> in <var>direction</var> starting from <var>searchOrigin</var>
+                        <p class=api>
+                        2. If <a>navigation-override</a> <a>is enabled</a> in the [=node document=] of <var>eventTarget</var> for 
+                            the <a spec=html for="/">origin</a> of the [=active document=] of the [=top-level browsing context=], then
+                                <a>fire an event</a> named <a event>navbeforefocus</a> at <var>eventTarget</var> using {{NavigationEvent}} with:
+                                    <ul>
+                                        <li>{{NavigationEvent/dir}} set to <var>direction</var>
+                                        <li>{{NavigationEvent/relatedTarget}} set to <var>bestCandidate</var>
+                                        <li>the <code>bubbles</code> and <code>cancelable</code> attributes set to <code>true</code>
+                                    </ul>
+                                and return if the result is <code>false</code>.
+                        </p>
+                        3. Run the <a>focusing steps</a> for <var>bestCandidate</var> and return
+                    </li>
+                    <li>Else, fall back to the next step.</li>
+                </ul>
+        </li>
+        <li>Else, fall back to the next step.</li>
+    </ul>
 5. Let <var>container</var> be the nearest ancestor of <var>eventTarget</var> that is a <a>spatial navigation container</a>.
 6. <i>Loop</i>: Let <var>candidates</var> be the result of <a>finding focusable areas</a>
     within <var>container</var>
@@ -1035,29 +1044,31 @@ To run the <dfn>spatial navigation steps</dfn> in <var>direction</var>, do the f
     excluding <var>searchOrigin</var>
     </span>
 7. If <var>candidates</var> is empty:
-    *  <span class=cssapi>If the computed value of the 'spatial-navigation-action' property on <var>container</var> is not ''spatial-navigation-action/focus''
-        and <var>container</var> is a <a>scroll container</a> that <a>can be manually scrolled</a>,
-        <a>directionally scroll the element</a> <var>container</var> in <var>direction</var> and return.
-        </span>
-    * <span class=cssapi>Else,</span>
-        1. If <a>navigation-override</a> <a>is enabled</a> in the [=node document=] of <var>eventTarget</var> for the <a spec=html for="/">origin</a> of the [=active document=] of the [=top-level browsing context=], then
-            <span class=api><a>fire an event</a> named <a event>navnotarget</a> at <var>eventTarget</var> using {{NavigationEvent}} with:
-            * {{NavigationEvent/dir}} set to <var>direction</var>
-            * {{NavigationEvent/relatedTarget}} set to <var>container</var>
-            * the <code>bubbles</code> and <code>cancelable</code> attributes set to <code>true</code>
-
-            and return if the result is <code>false</code>.</span>
-        2.
-            * If <var>container</var> is the <a>document element</a> of the <a>top-level browsing context</a>,
-                then return.
-                The User Agent may transfer focus to its own controls (if any) honouring <var>direction</var>.
-            * Else, if <var>container</var> is the <a>document element</a> of a <a>nested browsing context</a> then:
-                1. Set <var>searchOrigin</var> to <var>container</var>'s <a>browsing context container</a>
-                2. Set <var>eventTarget</var> be <var>searchOrigin</var>
-                3. Set <var>container</var> to the nearest ancestor of <var>searchOrigin</var> that is a <a>spatial navigation container</a>.
-                4. Return to the step labeled <i>loop</i>.
-            * Else, set <var>container</var> to its closest ancestor that is itself a <a>spatial navigation container</a>
-                and return to the step labeled <i>loop</i>.
+    <ul>
+        <span class=cssapi><li>If the computed value of the 'spatial-navigation-action' property on <var>container</var> is not ''spatial-navigation-action/focus''
+            and <var>container</var> is a <a>scroll container</a> that <a>can be manually scrolled</a>,
+            <a>directionally scroll the element</a> <var>container</var> in <var>direction</var> and return.
+        </li></span>
+        <span class=cssapi><li>Else,</li></span>
+            1. If <a>navigation-override</a> <a>is enabled</a> in the [=node document=] of <var>eventTarget</var> for the <a spec=html for="/">origin</a> of the [=active document=] of the [=top-level browsing context=], then
+                <span class=api><a>fire an event</a> named <a event>navnotarget</a> at <var>eventTarget</var> using {{NavigationEvent}} with:
+                * {{NavigationEvent/dir}} set to <var>direction</var>
+                * {{NavigationEvent/relatedTarget}} set to <var>container</var>
+                * the <code>bubbles</code> and <code>cancelable</code> attributes set to <code>true</code>
+
+                and return if the result is <code>false</code>.</span>
+            2.
+                * If <var>container</var> is the <a>document element</a> of the <a>top-level browsing context</a>,
+                    then return.
+                    The User Agent may transfer focus to its own controls (if any) honouring <var>direction</var>.
+                * Else, if <var>container</var> is the <a>document element</a> of a <a>nested browsing context</a> then:
+                    1. Set <var>searchOrigin</var> to <var>container</var>'s <a>browsing context container</a>
+                    2. Set <var>eventTarget</var> be <var>searchOrigin</var>
+                    3. Set <var>container</var> to the nearest ancestor of <var>searchOrigin</var> that is a <a>spatial navigation container</a>.
+                    4. Return to the step labeled <i>loop</i>.
+                * Else, set <var>container</var> to its closest ancestor that is itself a <a>spatial navigation container</a>
+                    and return to the step labeled <i>loop</i>.
+    </ul>
 8. Let <var>bestCandidate</var> be the result of <a>selecting the best candidate</a>
     within <var>candidates</var> in <var>direction</var> starting from <var>searchOrigin</var>.
 9. If <a>navigation-override</a> <a>is enabled</a> in the [=node document=] of <var>eventTarget</var> for the <a spec=html for="/">origin</a> of the [=active document=] of the [=top-level browsing context=], then
@@ -1238,9 +1249,9 @@ find the points <var>P1</var> and <var>P2</var>,
 respectively within the boundary boxes of the <var>reference</var> and of the <var>candidate</var>,
 that minimize the <var>distance</var> as defined as below:
 
-<pre><code>
+<pre class="prod">
     <var>distance</var> = <var>euclidean</var> + <var>displacement</var> - <var>alignment</var> - <var>sqrt(Overlap)</var>
-</code></pre>
+</pre>
 
 The meaning of each term is as follows:
 
