[css-nav-1] Add spatial-navigation-function CSS property

During the CSS WG F2F, it was resolved to add `spatial-navigation-function` CSS property.
This property is used for setting the focus navigation algorithm with the predefined values.

Close w3c#3964

Author: Jihye Hong

css-nav-1/Overview.bs

@@ -15,6 +15,7 @@ At risk: {{getSpatialNavigationContainer()}}
 At risk: {{focusableAreas()}}
 At risk: 'spatial-navigation-contain'
 At risk: ''spatial-navigation-action: scroll''
+At risk: 'spatial-navigation-function'
 </pre>
 <pre class="anchors">
 spec: ui-events; urlPrefix: https://w3c.github.io/uievents/;
@@ -1496,6 +1497,56 @@ Pressing the down arrow key moves the focus directly to it without scrolling man
 
 </div>
 
+<h3 id=css-property-spatialnavigationfunction>
+Selecting the navigation algorithm: the 'spatial-navigation-function' property</h3>
+
+<pre class='propdef'>
+Name: spatial-navigation-function
+Value: normal | grid
+Initial: normal
+Applies to: <a>spatial navigation container</a>
+Inherited: yes
+</pre>
+
+Depending on the layout types, the default algorithm of spatial navigation may need the fine tune.
+
+<dl dfn-for=spatial-navigation-function dfn-type=value>
+    <dt><dfn>normal</dfn>
+    <dd>
+        Moves the focus with the default focus navigation algorithm defined by UA.
+        In general, the focus moves to the closest element from the <a>spatial navigation starting point</a>.
+
+    <dt><dfn>grid</dfn>
+    <dd>
+        Moves the focus to the closest element based on 2D rectilinear distance.
+
+        If there are more than one aligned candidates in the navigation direction,
+            Among the aligned candidates, select the best one as a result of the calculation from the distance
+            along the axis which corresponds to the navigation direction.
+            In case of best candidates more than two, select the best one with the minimum amount of alignment.
+
+        Else if there isn't any aligned candidate in a given direction,
+            Among not aligned)candidates, select the best ones as a result of calculation from the distance
+             along the axis which corresponds to the navigation direction.
+            In case of best candidates more than two, select the best one with the minimum distance
+            along the axis which is orthogonal to the navigation direction.
+</dl>
+
+<div class=example>
+    This example shows how the focus moves differently by the value of <code>spatial-navigation-function</code>.
+
+    <figure>
+        <img alt="" src="images/spatnav-function.png" style="width: 500px;"/>
+        <figcaption>Moving focus from "A" to one of the candidate elements</figcaption>
+    </figure>
+
+    Let the element which contains "A", "B", "C" and "D" is the <a>spatial navigation focus container</a>.
+
+    If <code>normal</code> value is given to <code>spatial-navigation-function</code> of the element,
+    when the user presses the down arrow key, the focus will move to "C".
+    Otherwise, <code>grid</code> was specified to the element, the focus will move to "B".
+</div>
+
 <h2 class=no-num id=scrolling>Appendix A. Scroll extensions</h2>
 
 This section proposes a few extensions to CSS