Update the description about distance function

The changes are based on https://wicg.github.io/spatial-navigation/tests/ux/result.html#summary-of-the-proposal

Author: Jihye Hong

css-nav-1/Overview.bs

@@ -1242,34 +1242,62 @@ follow the following steps:
                 of <var>searchOrigin</var> and P2 inside the boundary box of <var>candidate</var>.
             2. Else if the <var>searchOrigin</var> is a point, then let the point <var>P1</var> be the <var>searchOrigin</var> 
                 and find the point <var>P2</var> inside the <a>boundary box</a>.
-        3. Let intersectRect is intersected area between a candidate and the search origin.
-        4. Select the <var>P1</var> and <var>P2</var> that make the smallest <var>distance</var> between those two points, 
-            when <var>distance</var> is defined as follows:
-
-            <dl>
-              <dt><var>distance</var>:
-                <dd><var>A</var> - <var>B</var> + <var>C</var> - <var>D</var>
-
-              <dt><var>A</var>:
-                <dd>The euclidian distance between <var>P1</var> and <var>P2</var>
-
-              <dt><var>B</var>:
-                <dd>The degree of alignment in <var>dir</var> between <var>searchOrigin</var> and <var>candidate</var>
-
-              <dt><var>C</var>:
-                <dd>The degree of dislocation in <var>dir</var> between <var>searchOrigin</var> and <var>candidate</var>
-
-              <dt><var>D</var>:
-                <dd>The square root of the area of intersection between the <a>boundary boxes</a> of <var>candidate</var> and <var>searchOrigin</var>
-            </dl>
-        3. Return the item of the <var>candidates</var> set that has the smallest <var>distance</var>.
+        3. Let <var>intersectRect</var> is intersected area between a candidate and the search origin.
+        4. Select the <var>P1</var> and <var>P2</var> that make the smallest <var>distance</var> between those two points by 
+            <a>calculating the distance</a>.        
+        5. Return the item of the <var>candidates</var> set that has the smallest <var>distance</var>.
             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,
             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.
+            unless it too is overlapped with another higher item at the same distance, recursively.    
+</div>
+
+<div algorithm="to calculate the distance">
+To <dfn lt="calculating the distance | to calculate the distance">calculate the <var>distance</var></dfn>, the function is defined as below:
+
+<var>distance</var> = <var>euclidian</var> - <var>alignment</var> + <var>displacement</var> - <var>sqrt(Overlap)</var>
+
+The meaning of each factor in the function is as follows:
+
+<dl>
+    <dt><var>euclidian</var>:
+    <dd>The euclidian distance between <var>P1</var> and <var>P2</var>
+    <dd>formula = sqrt(pow(P1, 2) + pow(P2, 2))
+
+    <dt><var>alignment</var>:
+    <dd>The degree of alignment in <var>dir</var> between <var>searchOrigin</var> and <var>candidate</var>
+    <dd>formula = <var>alignBias</var> * <var>alignWeight</var>
+
+        * <var>alignBias</var>
+
+            * If the <var>dir</var> is left or right,  height of <var>intersectRect</var> / the height of the candidate
+            * Else if the <var>dir</var> is up or down,  width of <var>intersectRect</var> / the width of the candidate
+
+        * <var>alignWeight</var> is 5
+
+    <dt><var>displacement</var>:
+    <dd>The degree of displacement in <var>dir</var> between <var>searchOrigin</var> and <var>candidate</var>
+    <dd>formula = (absolute distance on the axis orthogonal to <var>dir</var> + <var>orthogonalBias</var>) * <var>orthogonalWeight</var>
+
+        * <var>orthogonalBias</var>:
+            * If the <var>dir</var> is left or right, height of <var>searchOrigin</var> / 2
+            * Else if the <var>dir</var> is up or down, width of <var>searchOrigin</var> / 2
+
+        * <var>orthogonalWeight</var>:
+            * If the <var>dir</var> is left or right, 30
+            * Else if the <var>dir</var> is up or down, 2
+
+    <dt><var>sqrt(Overlap)</var>:
+    <dd>The square root of the <var>intersectRect</var>(overlapped area) between the <a>boundary boxes</a> of <var>candidate</var> and <var>searchOrigin</var>
+    <dd>formula = sqrt(height of <var>intersectRect</var> * width of <var>intersectRect</var>)
+</dl>
 
+NOTE: The values of <var>alignWeight</var> and <var>orthogonalWeight</var> in the function are decided based on 
+        the collected <a href="https://wicg.github.io/spatial-navigation/tests/ux/list.html">UX test cases</a>. 
+        It aims to show the general expected result in the real pages.
+        Everyone is welcome to contribute to the test cases!
 
 </div>