[css-nav-1] Add more details about how to set the search origin

* Add how to set the search origin depending on its status change
* Add precise definition about `search origin` and `spatial navigation starting point`
* Seperate the "set the search origin" step from the processing model

* related to #3391

Author: Jihye Hong

css-nav-1/Overview.bs

@@ -955,31 +955,19 @@ Navigation</h3>
     <object type="image/svg+xml" data="images/spatnav_processing_model_diagram.svg"></object>
 </figure>
 
-There can be a <dfn>spatial navigation starting point</dfn>. It is initially unset.
-The user agent may set it when the user indicates that it should be moved.
-
-Note: For example, the user agent could set it to the position of the user's click if the user clicks on the document contents,
-and unset when the focus is moved (by spatial navigation or any other means).
-
-If the User Agent sets both a <a>spatial navigation starting point</a> and a <a>sequential focus navigation starting point</a>,
-they must not be set differently.
-
 <div algorithm="to run the spatial navigation steps">
 To run the <dfn>spatial navigation steps</dfn> in <var>direction</var>, do the following:
 
-1. Let <var>searchOrigin</var> be the <a>DOM anchor</a> of the <a>currently focused area of a top-level browsing context</a>.
-2. If the <a>spatial navigation starting point</a> is not <code>null</code>
-    and it is inside <var>searchOrigin</var>
-    then set <var>searchOrigin</var> to the <a>spatial navigation starting point</a>.
-3.
+1. Let <var>searchOrigin</var> be the result of <a>setting the search origin</a>.
+2.
     * If <var>searchOrigin</var> is an <a>node</a>,
         let <var>eventTarget</var> be <var>searchOrigin</var>
     * else (<a>assert</a>: <var>searchOrigin</var> is a position)
         let <var>eventTarget</var> be the <a>node</a> which contains <var>searchOrigin</var>
-4. If <var>eventTarget</var> is the <a>Document</a> or the <a>document element</a>,
+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.
-5.
+4.
     * 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=],
@@ -1006,14 +994,14 @@ To run the <dfn>spatial navigation steps</dfn> in <var>direction</var>, do the f
                 then <a>directionally scroll the element</a> <var>eventTarget</var> in <var>direction</var> and return.
             * Else, fallback to the next step.
     * Else, fallback to the next step.
-6. Let <var>container</var> be the nearest ancestor of <var>eventTarget</var> that is a <a>spatial navigation container</a>.
-7. <i>Loop</i>: Let <var>candidates</var> be the result of <a>finding focusable areas</a>
+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>
     with the argument <var>visibleOnly</var> set to <code>false</code>
     if computed value of the 'spatial-navigation-action' property on <var>container</var> is ''spatial-navigation-action/focus''
     or to <code>true</code> otherwise,
     excluding <var>searchOrigin</var>
-8. If <var>candidates</var> is empty:
+7. If <var>candidates</var> is empty:
     * 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.
@@ -1036,16 +1024,16 @@ To run the <dfn>spatial navigation steps</dfn> in <var>direction</var>, do the f
                 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>.
-9. Let <var>bestCandidate</var> be the result of <a>selecting the best candidate</a>
+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>.
-10. 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
+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
     <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>
-11. Run the <a>focusing steps</a> for <var>bestCandidate</var> and return.
+10. Run the <a>focusing steps</a> for <var>bestCandidate</var> and return.
 
 </div>
 
@@ -1076,6 +1064,39 @@ The <dfn>inside area </dfn> of an object is defined as follows:
 
 Issue(w3c/csswg-drafts#2324): CSS should have a term for “border box taking into account corner shaping properties like border-radius”.
 
+The <dfn>search origin</dfn> is the origin for searching next target.
+
+The <dfn>spatial navigation starting point</dfn> is the origin for searching next target which is set by the User Agent. It is initially unset and it can be element or point.
+
+Note: For example, the User Agent could set it to the position of the user's click if the user clicks on the document contents,
+and unset when the focus is moved (by spatial navigation or any other means).
+
+If the User Agent sets both a <a>spatial navigation starting point</a> and a <a>sequential focus navigation starting point</a>,
+they must not be set differently.
+
+<div algorithm="to set the search origin">
+
+To <dfn lt="set the search origin | setting the search origin">set the search origin</dfn>,
+run the following steps:
+
+1. Let <var>searchOrigin</var> be the <a>DOM anchor</a> of the <a>currently focused area of a top-level browsing context</a>.
+2. If the <a>spatial navigation starting point</a> is not <code>null</code>
+    and it is inside <var>searchOrigin</var>,
+    then return it.
+3. Otherwise, return <var>searchOrigin</var>.
+
+If the focus changes not by the spatial navigation, the <var>searchOrigin</var> is set from the <var>old focus target</var> as following:
+1. If <var>old focus target</var> becomes out of the viewport by scrolling,
+    then let <var>searchOrigin</var> be the scroll container which triggers the scroll behavior.
+2. If <var>old focus target</var> is inert,
+    then let <var>searchOrigin</var> be the [=boundary box=] of <var>old focus target</var>.
+3. If the property of <var>old focus target</var> changes to <code>display: none</code> or <code>visibility: hidden</code>,
+    then let <var>searchOrigin</var> be the [=boundary box=] of <var>old focus target</var>.
+4. Otherwise,
+    let <var>searchOrigin</var> be the viewport of <var>old focus target</var>'s Document.
+
+</div>
+
 <div algorithm="to find focusable areas">
 
 To <dfn lt="find focusable areas | finding focusable areas">find focusable areas</dfn> within a containing element <var>C</var>,