Expand battery example to be more explicit

source

@@ -87643,25 +87643,45 @@ interface <dfn>NavigatorOnLine</dfn> {
    <code>Navigator</code> object on which it is invoked. This has the following impact: <ref
    spec=BATTERY>
 
-   <pre>&lt;!DOCTYPE html>
+   <pre>&lt;!-- outer.html -->
+&lt;!DOCTYPE html>
 &lt;html lang="en">
-&lt;title>Relevant Realm demo&lt;/title>
+&lt;title>Relevant Realm demo: outer page&lt;/title>
+&lt;script>
+  function doTest() {
+    const promise = navigator.getBattery().call(frames[0].navigator);
+
+    console.log(promise instanceof Promise);           // logs false
+    console.log(promise instanceof frames[0].Promise); // logs true
+
+    frames[0].hello();
+  }
+&lt;/script>
+&lt;iframe src="inner.html" onload="doTest()">&lt;/iframe>
 
-&lt;iframe src="about:blank">&lt;/iframe>
+&lt;!-- inner.html -->
+&lt;!DOCTYPE html>
+&lt;html lang="en">
+&lt;title>Relevant Realm demo: inner page&lt;/title>
 &lt;script>
-  const promise = navigator.getBattery().call(frames[0].navigator);
+  function hello() {
+    const promise = navigator.getBattery();
 
-  console.log(promise instanceof Promise);           // logs false
-  console.log(promise instanceof frames[0].Promise); // logs true
+    console.log(promise instanceof Promise);        // logs true
+    console.log(promise instanceof parent.Promise); // logs false
+  }
 &lt;/script></pre>
 
    <p>If the algorithm for the <code data-x="dom-navigator-getBattery">getBattery()</code> method
-   had instead used the <span data-x="current Realm Record">current Realm</span>, the results would
-   be reversed. The downside of such an approach would be that all future calls to that frame's
-   <code data-x="dom-navigator-getBattery">getBattery()</code>, even ones from within the
-   <code>iframe</code> and without cross-frame shenanigans, would forever return <code
-   data-x="">Promise</code> objects from the outer realm. Since this is undesirable, the algorithm
-   instead uses the <span data-x="concept-relevant-realm">relevant Realm</span>.</p>
+   had instead used the <span data-x="current Realm Record">current Realm</span>, all the results
+   would be reversed. That is, after the first call to <code
+   data-x="dom-navigator-getBattery">getBattery()</code> in <code data-x="">outer.html</code>, the
+   <code>Navigator</code> object in <code data-x="">inner.html</code> would be permanently storing
+   a <code data-x="">Promise</code> object created in <code data-x="">outer.html</code>'s
+   <span>JavaScript realm</span>, and calls like that inside the <code data-x="">hello()</code>
+   function would thus return a promise from the "wrong" realm. Since this is undesirable, the
+   algorithm instead uses the <span data-x="concept-relevant-realm">relevant Realm</span>, giving
+   the sensible results indicated in the comments above.</p>
   </div>
 
   <hr>