[css-nav-1] Add an example for spatialNavigationSearch with 'inside' attribute

Author: Jihye Hong

css-nav-1/Overview.bs

@@ -624,6 +624,32 @@ and the result will be <code>null</code>.</em>
 </div>
 </div>
 
+<div class=example id=searchInside>
+    This example shows how the different result of {{Element/spatialNavigationSearch()}}
+    depending on the value of {{SpatialNavigationSearchOptions/inside}} attribute.
+
+    When the page has the code snippet as below,
+
+    <pre><code highlight=markup>
+    &lt;body>
+        &lt;div id="container" style="width:300px; height:200px; overflow-x: scroll;">
+            &lt;button id="button1">&lt;/button>
+        &lt;/div>
+        &lt;button id="button2">&lt;/button>
+    &lt;/body>
+    </code></pre>
+
+    <pre><code highlight=javascript>
+        const container = document.getElementById('container');
+
+        const insideBtn = container.spatialNavigationSearch('right', {inside: true});
+        const outsideBtn = container.spatialNavigationSearch('right');
+    </code></pre>
+
+    <code>insideBtn</code> is assigned to the element whose {{Element/id}} matches with <code>'button1'</code>.
+    But <code>outsideBtn</code> is the element with {{Element/id}} <code>'button2'</code>.
+</div>
+
 <div class=api>
 <h2 id="events-navigationevent">
 Navigation Events</h2>