Merge pull request w3c#4369 from jihyerish/revise-select-candidate

[css-nav-1] Fix the unreachability for a focusable element inside the search origin

Author: Jihye Hong

css-nav-1/Overview.bs

@@ -995,9 +995,9 @@ To run the <dfn>spatial navigation steps</dfn> in <var>direction</var>, do the f
 
                     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>
+                <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, fallback to the next step.
     * Else, fallback to the next step.
 5. Let <var>container</var> be the nearest ancestor of <var>eventTarget</var> that is a <a>spatial navigation container</a>.
@@ -1066,11 +1066,14 @@ The <dfn>boundary box</dfn> of an object is defined as follows:
 * if the object is a [=box=] or [=box fragment=], the boundary box is the <a>border box</a> of that box or fragment
 * if the object is a <a>focusable area</a> which is not an element, the boundary box is the axis-aligned the bounding box of that <a>focusable area</a>
 
-The <dfn>inside area </dfn> of an object is defined as follows:
+The <dfn>inside area</dfn> of an object is defined as follows:
 * if the object is a <a>scroll container</a>, its <a>optimal viewing region</a>
 * if the object is a <a>document</a>, the viewport of its <a>browsing context</a>
+* if the object is a [=box=] or [=box fragment=], its <a>boundary box</a>
 * otherwise, the <a>optimal viewing region</a> of its nearest ancestor <a>scroll container</a>
 
+NOTE: If an object is offscreen, the <a>inside area</a> should be the nearest visible ancestor container.
+
 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.
@@ -1159,11 +1162,13 @@ run the following steps:
 1. If <var>candidates</var> is <a spec=infra for=set>empty</a>, return <code>null</code>
 2. If <var>candidates</var> contains a single item, return that item
 3. Let <var>insiders</var> be the subset of <var>candidates</var>
+    * If <var>searchOrigin</var> is the <a>spatial navigation container</a>,
     whose <a>boundary box</a>'s
-    * top edge is below the top edge of <a>inside area</a> of <var>searchOrigin</var> if <var>dir</var> is {{SpatialNavigationDirection/down}}
-    * bottom edge is above the bottom edge of <a>inside area</a> of <var>searchOrigin</var> if <var>dir</var> is {{SpatialNavigationDirection/up}}
-    * right edge is left of the right edge of <a>inside area</a> of <var>searchOrigin</var> if <var>dir</var> is {{SpatialNavigationDirection/left}}
-    * left edge is right of the left edge of <a>inside area</a> of <var>searchOrigin</var> if <var>dir</var> is {{SpatialNavigationDirection/right}}
+        * top edge is below the top edge of <a>inside area</a> of <var>searchOrigin</var> if <var>dir</var> is {{SpatialNavigationDirection/down}}
+        * bottom edge is above the bottom edge of <a>inside area</a> of <var>searchOrigin</var> if <var>dir</var> is {{SpatialNavigationDirection/up}}
+        * right edge is left of the right edge of <a>inside area</a> of <var>searchOrigin</var> if <var>dir</var> is {{SpatialNavigationDirection/left}}
+        * left edge is right of the left edge of <a>inside area</a> of <var>searchOrigin</var> if <var>dir</var> is {{SpatialNavigationDirection/right}}
+    * Else, whose boundary box fully overlaps with <a>inside area</a> of <var>searchOrigin</var>.
 
     Note: this sub-setting is necessary to avoid going in the opposite direction than the one requested.
 4.
@@ -1180,19 +1185,21 @@ run the following steps:
             and that item is higher in the CSS [=painting order=].
             In that case, return that item instead,
             unless it too is overlapped with another higher item, recursively.
-
     * Else
-        1. Set <var>candidates</var> be the subset of its items
-            whose <a>boundary box</a>'s geometric center is within the closed half plane
-            whose boundary goes through the geometric center of the <var>searchOrigin</var>
-            and is perpendicular to <var>dir</var>.
+        1. Set <var>candidates</var> be the subset of its items which satisfies one of the following conditions:
+            * the item overlaps with <var>searchOrigin</var> and its <a>boundary box</a>'s
+                * top edge is below the bottom edge of <var>searchOrigin</var>'s <a>boundary box</a> if <var>dir</var> is {{SpatialNavigationDirection/down}}
+                * bottom edge is above the top edge of <var>searchOrigin</var>'s <a>boundary box</a> if <var>dir</var> is {{SpatialNavigationDirection/up}}
+                * right edge is left of the left edge of <var>searchOrigin</var>'s <a>boundary box</a> if <var>dir</var> is {{SpatialNavigationDirection/left}}
+                * left edge is right of the right edge of <var>searchOrigin</var>'s <a>boundary box</a> if <var>dir</var> is {{SpatialNavigationDirection/right}}
+            * the item partially overlaps with <var>searchOrigin</var> and
+            its two edges which are orthogonal to <var>dir</var> should be on the navigation direction of the respective ones of <var>searchOrigin</var>.
         2. For each <var>candidate</var> in <var>candidates</var>,
-            [=find the shortest distance=] between <var>searchOrigin</var> and <var>candidate</var>
-            in direction <var>dir</var>.
+            [=find the shortest distance=] between <var>searchOrigin</var>.
         3. Return the item of the <var>candidates</var> set that has the smallest distance.
             If several have the same distance,
             return the first one in document order,
-            unless its [=boundary box=] overlaps with the [=boundary box=] of an other item at the same distance,
+            unless its [=boundary box=] overlaps with the [=boundary box=] of another item at the same distance,
             and that item is higher in the CSS [=painting order=].
             In that case, return that item instead,
             unless it too is overlapped with another higher item at the same distance, recursively.