From bd803f3a52a72606488b6dfbdcb6d2aa6dc8d9a2 Mon Sep 17 00:00:00 2001
From: Gary Kacmarcik <garykac@gmail.com>
Date: Tue, 27 Jun 2023 22:11:53 +0000
Subject: [PATCH] Fix #340 - Broken references to key and code specs

SHA: e186b4427f7cd9b8183b09a70628b8c058289403
Reason: push, by garykac

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 index.html | 648 +++++++++++++++++++++++++++++++++++------------------
 1 file changed, 429 insertions(+), 219 deletions(-)

diff --git a/index.html b/index.html
index a491f97..6c21dff 100644
--- a/index.html
+++ b/index.html
@@ -5,11 +5,10 @@
   <title>UI Events</title>
   <meta content="ED" name="w3c-status">
   <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-ED" rel="stylesheet">
-  <link href="https://www.w3.org/2008/site/images/favicon.ico" rel="icon">
-  <meta content="Bikeshed version 3383f409d, updated Fri Apr 28 15:49:22 2023 -0700" name="generator">
+  <meta content="Bikeshed version 5edf5e459, updated Thu Jun 22 11:28:01 2023 -0700" name="generator">
   <link href="https://www.w3.org/TR/uievents/" rel="canonical">
-  <meta content="157ddf47c55f28d98615e8564e979b9959819bca" name="document-revision">
-<style>/* style-autolinks */
+  <meta content="e186b4427f7cd9b8183b09a70628b8c058289403" name="document-revision">
+<style>/* Boilerplate: style-autolinks */
 .css.css, .property.property, .descriptor.descriptor {
     color: var(--a-normal-text);
     font-size: inherit;
@@ -70,8 +69,16 @@
 [data-link-type=biblio] {
     white-space: pre;
 }
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --selflink-text: black;
+        --selflink-bg: silver;
+        --selflink-hover-text: white;
+    }
+}
 </style>
-<style>/* style-colors */
+<style>/* Boilerplate: style-colors */
 
 /* Any --*-text not paired with a --*-bg is assumed to have a transparent bg */
 :root {
@@ -180,8 +187,120 @@
 
     --editedrec-bg: darkorange;
 }
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --text: #ddd;
+        --bg: black;
+
+        --unofficial-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23100808' transform='translate(200 200) rotate(-45) translate(-200 -200)' stroke='%23100808' stroke-width='3'%3E%3Ctext x='50%25' y='220' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EUNOFFICIAL%3C/text%3E%3Ctext x='50%25' y='305' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EDRAFT%3C/text%3E%3C/g%3E%3C/svg%3E");
+
+        --logo-bg: #1a5e9a;
+        --logo-active-bg: #c00;
+        --logo-text: white;
+
+        --tocnav-normal-text: #999;
+        --tocnav-normal-bg: var(--bg);
+        --tocnav-hover-text: var(--tocnav-normal-text);
+        --tocnav-hover-bg: #080808;
+        --tocnav-active-text: #f44;
+        --tocnav-active-bg: var(--tocnav-normal-bg);
+
+        --tocsidebar-text: var(--text);
+        --tocsidebar-bg: #080808;
+        --tocsidebar-shadow: rgba(255,255,255,.1);
+        --tocsidebar-heading-text: hsla(203,20%,40%,.7);
+
+        --toclink-text: var(--text);
+        --toclink-underline: #6af;
+        --toclink-visited-text: var(--toclink-text);
+        --toclink-visited-underline: #054572;
+
+        --heading-text: #8af;
+
+        --hr-text: var(--text);
+
+        --algo-border: #456;
+
+        --del-text: #f44;
+        --del-bg: transparent;
+        --ins-text: #4a4;
+        --ins-bg: transparent;
+
+        --a-normal-text: #6af;
+        --a-normal-underline: #555;
+        --a-visited-text: var(--a-normal-text);
+        --a-visited-underline: var(--a-normal-underline);
+        --a-hover-bg: rgba(25%, 25%, 25%, .2);
+        --a-active-text: #f44;
+        --a-active-underline: var(--a-active-text);
+
+        --borderedblock-bg: rgba(255, 255, 255, .05);
+
+        --blockquote-border: silver;
+        --blockquote-bg: var(--borderedblock-bg);
+        --blockquote-text: currentcolor;
+
+        --issue-border: #e05252;
+        --issue-bg: var(--borderedblock-bg);
+        --issue-text: var(--text);
+        --issueheading-text: hsl(0deg, 70%, 70%);
+
+        --example-border: hsl(50deg, 90%, 60%);
+        --example-bg: var(--borderedblock-bg);
+        --example-text: var(--text);
+        --exampleheading-text: hsl(50deg, 70%, 70%);
+
+        --note-border: hsl(120deg, 100%, 35%);
+        --note-bg: var(--borderedblock-bg);
+        --note-text: var(--text);
+        --noteheading-text: hsl(120, 70%, 70%);
+        --notesummary-underline: silver;
+
+        --assertion-border: #444;
+        --assertion-bg: var(--borderedblock-bg);
+        --assertion-text: var(--text);
+
+        --advisement-border: orange;
+        --advisement-bg: #222218;
+        --advisement-text: var(--text);
+        --advisementheading-text: #f84;
+
+        --warning-border: red;
+        --warning-bg: hsla(40,100%,20%,0.95);
+        --warning-text: var(--text);
+
+        --amendment-border: #330099;
+        --amendment-bg: #080010;
+        --amendment-text: var(--text);
+        --amendmentheading-text: #cc00ff;
+
+        --def-border: #8ccbf2;
+        --def-bg: #080818;
+        --def-text: var(--text);
+        --defrow-border: #136;
+
+        --datacell-border: silver;
+
+        --indexinfo-text: #aaa;
+
+        --indextable-hover-text: var(--text);
+        --indextable-hover-bg: #181818;
+
+        --outdatedspec-bg: rgba(255, 255, 255, .5);
+        --outdatedspec-text: black;
+        --outdated-bg: maroon;
+        --outdated-text: white;
+        --outdated-shadow: red;
+
+        --editedrec-bg: darkorange;
+    }
+    /* In case a transparent-bg image doesn't expect to be on a dark bg,
+       which is quite common in practice... */
+    img { background: white; }
+}
 </style>
-<style>/* style-counters */
+<style>/* Boilerplate: style-counters */
 body {
     counter-reset: example figure issue;
 }
@@ -210,11 +329,70 @@
     content: "Figure " counter(figure) " ";
 }
 </style>
-<style>/* style-dfn-panel */
+<style>/* Boilerplate: style-dfn-panel */
+:root {
+    --dfnpanel-bg: #ddd;
+    --dfnpanel-text: var(--text);
+}
+@media (prefers-color-scheme: dark) {
+    :root {
+        --dfnpanel-bg: #222;
+        --dfnpanel-text: var(--text);
+    }
+}
+.dfn-panel {
+    position: absolute;
+    z-index: 35;
+    width: 20em;
+    width: 300px;
+    height: auto;
+    max-height: 500px;
+    overflow: auto;
+    padding: 0.5em 0.75em;
+    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
+    background: var(--dfnpanel-bg);
+    color: var(--dfnpanel-text);
+    border: outset 0.2em;
+    white-space: normal; /* in case it's moved into a pre */
+}
+.dfn-panel:not(.on) { display: none; }
+.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
+.dfn-panel > b { display: block; }
+.dfn-panel a { color: var(--dfnpanel-text); }
+.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
+.dfn-panel > b + b { margin-top: 0.25em; }
+.dfn-panel ul { padding: 0 0 0 1em; list-style: none; }
+.dfn-panel li a {
+    white-space: pre;
+    display: inline-block;
+    max-width: calc(300px - 1.5em - 1em);
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.dfn-panel.activated {
+    display: inline-block;
+    position: fixed;
+    left: .5em;
+    bottom: 2em;
+    margin: 0 auto;
+    max-width: calc(100vw - 1.5em - .4em - .5em);
+    max-height: 30vh;
+}
+
+.dfn-paneled[role="button"] { cursor: pointer; }
+</style>
+<style>/* Boilerplate: style-dfn-panel */
 :root {
     --dfnpanel-bg: #ddd;
     --dfnpanel-text: var(--text);
 }
+@media (prefers-color-scheme: dark) {
+    :root {
+        --dfnpanel-bg: #222;
+        --dfnpanel-text: var(--text);
+    }
+}
 .dfn-panel {
     position: absolute;
     z-index: 35;
@@ -257,7 +435,7 @@
 
 .dfn-paneled[role="button"] { cursor: pointer; }
 </style>
-<style>/* style-issues */
+<style>/* Boilerplate: style-issues */
 a[href].issue-return {
     float: right;
     float: inline-end;
@@ -266,7 +444,7 @@
     text-decoration: none;
 }
 </style>
-<style>/* style-md-lists */
+<style>/* Boilerplate: style-md-lists */
 /* This is a weird hack for me not yet following the commonmark spec
    regarding paragraph and lists. */
 [data-md] > :first-child {
@@ -276,12 +454,19 @@
     margin-bottom: 0;
 }
 </style>
-<style>/* style-mdn-anno */
+<style>/* Boilerplate: style-mdn-anno */
 :root {
 	--mdn-bg: #EEE;
 	--mdn-shadow: #999;
 	--mdn-nosupport-text: #ccc;
 }
+@media (prefers-color-scheme: dark) {
+	:root {
+		--mdn-bg: #222;
+		--mdn-shadow: #444;
+		--mdn-nosupport-text: #666;
+	}
+}
 .mdn-anno {
 	background: var(--mdn-bg, #EEE);
 	border-radius: .25em;
@@ -489,7 +674,7 @@
 	margin: -40px 0 0 0;
 }
 </style>
-<style>/* style-selflinks */
+<style>/* Boilerplate: style-selflinks */
 
 :root {
     --selflink-text: white;
@@ -549,12 +734,15 @@
 .heading > a.self-link::before { content: "§"; }
 dfn > a.self-link::before      { content: "#"; }
 </style>
-<style>/* style-syntax-highlighting */
+<style>/* Boilerplate: style-syntax-highlighting */
 
             pre.idl.highlight {
                 background: var(--borderedblock-bg, var(--def-bg));
             }
             
+</style>
+<style>/* Boilerplate: style-syntax-highlighting */
+
 code.highlight { padding: .1em; border-radius: .3em; }
 pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
 
@@ -607,146 +795,12 @@
 c-[sx] { color: #a67f59 } /* Literal.String.Other */
 c-[sr] { color: #a67f59 } /* Literal.String.Regex */
 c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
-c-[vc] { color: #0077aa } /* Name.Variable.Class */
-c-[vg] { color: #0077aa } /* Name.Variable.Global */
-c-[vi] { color: #0077aa } /* Name.Variable.Instance */
-c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
-</style>
-<style>/* style-darkmode */
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        --text: #ddd;
-        --bg: black;
-
-        --unofficial-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%23100808' transform='translate(200 200) rotate(-45) translate(-200 -200)' stroke='%23100808' stroke-width='3'%3E%3Ctext x='50%25' y='220' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EUNOFFICIAL%3C/text%3E%3Ctext x='50%25' y='305' style='font: bold 70px sans-serif; text-anchor: middle; letter-spacing: 6px;'%3EDRAFT%3C/text%3E%3C/g%3E%3C/svg%3E");
-
-        --logo-bg: #1a5e9a;
-        --logo-active-bg: #c00;
-        --logo-text: white;
-
-        --tocnav-normal-text: #999;
-        --tocnav-normal-bg: var(--bg);
-        --tocnav-hover-text: var(--tocnav-normal-text);
-        --tocnav-hover-bg: #080808;
-        --tocnav-active-text: #f44;
-        --tocnav-active-bg: var(--tocnav-normal-bg);
-
-        --tocsidebar-text: var(--text);
-        --tocsidebar-bg: #080808;
-        --tocsidebar-shadow: rgba(255,255,255,.1);
-        --tocsidebar-heading-text: hsla(203,20%,40%,.7);
-
-        --toclink-text: var(--text);
-        --toclink-underline: #6af;
-        --toclink-visited-text: var(--toclink-text);
-        --toclink-visited-underline: #054572;
-
-        --heading-text: #8af;
-
-        --hr-text: var(--text);
-
-        --algo-border: #456;
-
-        --del-text: #f44;
-        --del-bg: transparent;
-        --ins-text: #4a4;
-        --ins-bg: transparent;
-
-        --a-normal-text: #6af;
-        --a-normal-underline: #555;
-        --a-visited-text: var(--a-normal-text);
-        --a-visited-underline: var(--a-normal-underline);
-        --a-hover-bg: rgba(25%, 25%, 25%, .2);
-        --a-active-text: #f44;
-        --a-active-underline: var(--a-active-text);
-
-        --borderedblock-bg: rgba(255, 255, 255, .05);
-
-        --blockquote-border: silver;
-        --blockquote-bg: var(--borderedblock-bg);
-        --blockquote-text: currentcolor;
-
-        --issue-border: #e05252;
-        --issue-bg: var(--borderedblock-bg);
-        --issue-text: var(--text);
-        --issueheading-text: hsl(0deg, 70%, 70%);
-
-        --example-border: hsl(50deg, 90%, 60%);
-        --example-bg: var(--borderedblock-bg);
-        --example-text: var(--text);
-        --exampleheading-text: hsl(50deg, 70%, 70%);
-
-        --note-border: hsl(120deg, 100%, 35%);
-        --note-bg: var(--borderedblock-bg);
-        --note-text: var(--text);
-        --noteheading-text: hsl(120, 70%, 70%);
-        --notesummary-underline: silver;
-
-        --assertion-border: #444;
-        --assertion-bg: var(--borderedblock-bg);
-        --assertion-text: var(--text);
-
-        --advisement-border: orange;
-        --advisement-bg: #222218;
-        --advisement-text: var(--text);
-        --advisementheading-text: #f84;
-
-        --warning-border: red;
-        --warning-bg: hsla(40,100%,20%,0.95);
-        --warning-text: var(--text);
-
-        --amendment-border: #330099;
-        --amendment-bg: #080010;
-        --amendment-text: var(--text);
-        --amendmentheading-text: #cc00ff;
-
-        --def-border: #8ccbf2;
-        --def-bg: #080818;
-        --def-text: var(--text);
-        --defrow-border: #136;
-
-        --datacell-border: silver;
-
-        --indexinfo-text: #aaa;
-
-        --indextable-hover-text: var(--text);
-        --indextable-hover-bg: #181818;
-
-        --outdatedspec-bg: rgba(255, 255, 255, .5);
-        --outdatedspec-text: black;
-        --outdated-bg: maroon;
-        --outdated-text: white;
-        --outdated-shadow: red;
-
-        --editedrec-bg: darkorange;
-    }
-    /* In case a transparent-bg image doesn't expect to be on a dark bg,
-       which is quite common in practice... */
-    img { background: white; }
-}
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        --selflink-text: black;
-        --selflink-bg: silver;
-        --selflink-hover-text: white;
-    }
-}
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        --dfnpanel-bg: #222;
-        --dfnpanel-text: var(--text);
-    }
-}
-@media (prefers-color-scheme: dark) {
-	:root {
-		--mdn-bg: #222;
-		--mdn-shadow: #444;
-		--mdn-nosupport-text: #666;
-	}
-}
+c-[vc] { color: #0077aa } /* Name.Variable.Class */
+c-[vg] { color: #0077aa } /* Name.Variable.Global */
+c-[vi] { color: #0077aa } /* Name.Variable.Instance */
+c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
+
+
 @media (prefers-color-scheme: dark) {
     .highlight:not(.idl) { background: rgba(255, 255, 255, .05); }
 
@@ -814,7 +868,7 @@
   <div class="head">
    <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2021/logos/W3C" width="72"> </a> </p>
    <h1>UI Events</h1>
-   <p id="w3c-state"><a href="https://www.w3.org/standards/types#ED">Editor’s Draft</a>, <time class="dt-updated" datetime="2023-05-09">9 May 2023</time></p>
+   <p id="w3c-state"><a href="https://www.w3.org/standards/types#ED">Editor’s Draft</a>, <time class="dt-updated" datetime="2023-06-27">27 June 2023</time></p>
    <details open>
     <summary>More details about this document</summary>
     <div data-fill-with="spec-metadata">
@@ -824,7 +878,7 @@ <h1>UI Events</h1>
       <dt>Latest published version:
       <dd><a href="https://www.w3.org/TR/uievents/">https://www.w3.org/TR/uievents/</a>
       <dt>Previous Versions:
-      <dd><a href="https://www.w3.org/TR/2022/WD-uievents-20220913/" rel="prev">https://www.w3.org/TR/2022/WD-uievents-20220913/</a>
+      <dd><a href="https://www.w3.org/TR/2023/CR-uievents-code-20230530/" rel="prev">https://www.w3.org/TR/2023/CR-uievents-code-20230530/</a>
       <dt>Feedback:
       <dd><a href="https://github.com/w3c/uievents/issues/">GitHub</a>
       <dt class="editor">Editors:
@@ -838,7 +892,7 @@ <h1>UI Events</h1>
     </div>
    </details>
    <div data-fill-with="warning"></div>
-   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2023 <a href="https://www.w3.org/">World Wide Web Consortium</a>. <abbr title="World Wide Web Consortium">W3C</abbr><sup>®</sup> <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document" rel="license">permissive document license</a> rules apply. </p>
+   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 2023 <a href="https://www.w3.org/">World Wide Web Consortium</a>. <abbr title="World Wide Web Consortium">W3C</abbr><sup>®</sup> <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/copyright-software" rel="license" title="W3C Software and Document License">permissive document license</a> rules apply. </p>
    <hr title="Separator for header">
   </div>
   <div class="p-summary" data-fill-with="abstract">
@@ -5073,8 +5127,8 @@ <h4 class="heading settled" data-level="6.2.2" id="relationship-between-key-code
 				the remote host). 
     </dl>
     <h4 class="heading settled" data-level="6.2.3" id="code-examples"><span class="secno">6.2.3. </span><span class="content"><code>code</code> Examples</span><a class="self-link" href="#code-examples"></a></h4>
-    <div class="example" id="example-ea385427">
-     <a class="self-link" href="#example-ea385427"></a> Handling the Left and Right Alt Keys 
+    <div class="example" id="example-9ff74ec4">
+     <a class="self-link" href="#example-9ff74ec4"></a> Handling the Left and Right Alt Keys 
      <table class="event-sequence-table">
       <thead>
        <tr>
@@ -5100,7 +5154,7 @@ <h4 class="heading settled" data-level="6.2.3" id="code-examples"><span class="s
         <td><code class="idl"><a data-link-type="idl" href="#dom-keyboardevent-dom_key_location_right" id="ref-for-dom-keyboardevent-dom_key_location_right④">DOM_KEY_LOCATION_RIGHT</a></code>
        <tr>
         <td>French
-        <td style="text-align:center"><code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-AltGr">AltGr</a>"</code>
+        <td style="text-align:center"><code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-AltGraph">AltGraph</a>"</code>
         <td style="text-align:center"><code class="code">"<a href="http://www.w3.org/TR/uievents-code/#code-AltRight">AltRight</a>"</code>
         <td><code class="idl"><a data-link-type="idl" href="#dom-keyboardevent-dom_key_location_right" id="ref-for-dom-keyboardevent-dom_key_location_right⑤">DOM_KEY_LOCATION_RIGHT</a></code>
      </table>
@@ -5109,7 +5163,7 @@ <h4 class="heading settled" data-level="6.2.3" id="code-examples"><span class="s
 			right) was pressed. Checking the <code class="idl"><a data-link-type="idl" href="#dom-keyboardevent-code" id="ref-for-dom-keyboardevent-code①⑥">code</a></code> attribute
 			permits matching the right Alt key (<code class="code">"<a href="http://www.w3.org/TR/uievents-code/#code-AltRight">AltRight</a>"</code>) without worrying
 			about which layout is currently in effect.</p>
-     <p>Note that, in the French example, the <code class="keycap">Alt</code> and <code class="keycap">AltGr</code> keys
+     <p>Note that, in the French example, the <code class="keycap">Alt</code> and <code class="keycap">AltGraph</code> keys
 			retain their left and right location, even though there is only one of
 			each key.</p>
     </div>
@@ -5220,7 +5274,7 @@ <h4 class="heading settled" data-level="6.2.3" id="code-examples"><span class="s
         <td class="cell-number">3
         <td><a data-link-type="dfn" href="#keypress" id="ref-for-keypress②"><code>keypress</code></a>
         <td style="text-align:center"><code class="key">"@"</code>
-        <td style="text-align:center"><code class="code">"<a href="http://www.w3.org/TR/uievents-code/#code-"></a>"</code>
+        <td style="text-align:center"><code class="code">"<a href="http://www.w3.org/TR/uievents-code/#code-Digit2">Digit2</a>"</code>
         <td>(if supported)
        <tr>
         <td class="cell-number">4
@@ -5262,7 +5316,7 @@ <h4 class="heading settled" data-level="6.2.3" id="code-examples"><span class="s
         <td class="cell-number">3
         <td><a data-link-type="dfn" href="#keypress" id="ref-for-keypress③"><code>keypress</code></a>
         <td style="text-align:center"><code class="key">"@"</code>
-        <td style="text-align:center"><code class="code">"<a href="http://www.w3.org/TR/uievents-code/#code-"></a>"</code>
+        <td style="text-align:center"><code class="code">"<a href="http://www.w3.org/TR/uievents-code/#code-Digit2">Digit2</a>"</code>
         <td>(if supported)
        <tr>
         <td class="cell-number">4
@@ -6178,14 +6232,14 @@ <h5 class="heading settled" data-level="6.3.3.1" id="keys-IME-keys"><span class=
     <p>Some keys on certain devices are intended to activate <a data-link-type="dfn" href="#input-method-editor" id="ref-for-input-method-editor④">input
 			method editor</a> functionality, or to change the mode of an active <a data-link-type="dfn" href="#input-method-editor" id="ref-for-input-method-editor⑤">input method editor</a>.  Custom keys for this purpose can be
 			defined for different devices or language modes. The keys defined in
-			this specification for this purpose are: <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-Alphanumeric">Alphanumeric</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-CodeInput">CodeInput</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-FinalMode">FinalMode</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-HangulMode">HangulMode</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-HanjaMode">HanjaMode</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-Hiragana">Hiragana</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-JunjaMode">JunjaMode</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-KanaMode">KanaMode</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-KanjiMode">KanjiMode</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-Katakana">Katakana</a>"</code>, and <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-RomanCharacters">RomanCharacters</a>"</code>.  When one of these keys is
+			this specification for this purpose are: <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-Alphanumeric">Alphanumeric</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-CodeInput">CodeInput</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-FinalMode">FinalMode</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-HangulMode">HangulMode</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-HanjaMode">HanjaMode</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-Hiragana">Hiragana</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-JunjaMode">JunjaMode</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-KanaMode">KanaMode</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-KanjiMode">KanjiMode</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-Katakana">Katakana</a>"</code>, and <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-Romaji">Romaji</a>"</code>.  When one of these keys is
 			pressed, and no <a data-link-type="dfn" href="#ime" id="ref-for-ime⑨">IME</a> is currently active, the appropriate <a data-link-type="dfn" href="#ime" id="ref-for-ime①⓪">IME</a> is expected to be activated in the mode indicated by the
 			key (if available). If an <a data-link-type="dfn" href="#ime" id="ref-for-ime①①">IME</a> is already active when the key
 			is pressed, the active <a data-link-type="dfn" href="#ime" id="ref-for-ime①②">IME</a> might change to the indicated
 			mode, or a different <a data-link-type="dfn" href="#ime" id="ref-for-ime①③">IME</a> might be launched, or the might MAY
 			be ignored, on a device- and application-specific basis.</p>
     <p>This specification also defines other keys which are intended for
-			operation specifically with <a data-link-type="dfn" href="#input-method-editor" id="ref-for-input-method-editor⑥">input method editors</a>: <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-Accept">Accept</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-AllCandidates">AllCandidates</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-Cancel">Cancel</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-Convert">Convert</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-Compose">Compose</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-FullWidth">FullWidth</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-HalfWidth">HalfWidth</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-NextCandidate">NextCandidate</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-Nonconvert">Nonconvert</a>"</code>, and <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-PreviousCandidate">PreviousCandidate</a>"</code>.  The functions of these
+			operation specifically with <a data-link-type="dfn" href="#input-method-editor" id="ref-for-input-method-editor⑥">input method editors</a>: <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-Accept">Accept</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-AllCandidates">AllCandidates</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-Cancel">Cancel</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-Convert">Convert</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-Compose">Compose</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-Zenkaku">Zenkaku</a>"</code> (FullWidth), <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-Hankaku">Hankaku</a>"</code> (HalfWidth), <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-NextCandidate">NextCandidate</a>"</code>, <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-NonConvert">NonConvert</a>"</code>, and <code class="key">"<a href="http://www.w3.org/TR/uievents-key/#key-PreviousCandidate">PreviousCandidate</a>"</code>.  The functions of these
 			keys are not defined in this specification — refer to other
 			resources for details on <a data-link-type="dfn" href="#input-method-editor" id="ref-for-input-method-editor⑦">input method editor</a> functionality.</p>
     <p class="note" role="note"> Keys with <a data-link-type="dfn" href="#input-method-editor" id="ref-for-input-method-editor⑧">input method editor</a> functions are not restricted to
@@ -9167,9 +9221,9 @@ <h3 class="no-num no-ref heading settled" id="normative"><span class="content">N
    <dt id="biblio-rfc2119">[RFC2119]
    <dd>S. Bradner. <a href="https://datatracker.ietf.org/doc/html/rfc2119"><cite>Key words for use in RFCs to Indicate Requirement Levels</cite></a>. March 1997. Best Current Practice. URL: <a href="https://datatracker.ietf.org/doc/html/rfc2119">https://datatracker.ietf.org/doc/html/rfc2119</a>
    <dt id="biblio-uievents-code">[UIEvents-Code]
-   <dd>Gary Kacmarcik; Travis Leithead. <a href="https://w3c.github.io/uievents-code/"><cite>UI Events KeyboardEvent code Values</cite></a>. URL: <a href="https://w3c.github.io/uievents-code/">https://w3c.github.io/uievents-code/</a>
+   <dd>Travis Leithead; Gary Kacmarcik. <a href="https://w3c.github.io/uievents-code/"><cite>UI Events KeyboardEvent code Values</cite></a>. URL: <a href="https://w3c.github.io/uievents-code/">https://w3c.github.io/uievents-code/</a>
    <dt id="biblio-uievents-key">[UIEvents-Key]
-   <dd>Gary Kacmarcik; Travis Leithead. <a href="https://w3c.github.io/uievents-key/"><cite>UI Events KeyboardEvent key Values</cite></a>. URL: <a href="https://w3c.github.io/uievents-key/">https://w3c.github.io/uievents-key/</a>
+   <dd>Travis Leithead; Gary Kacmarcik. <a href="https://w3c.github.io/uievents-key/"><cite>UI Events KeyboardEvent key Values</cite></a>. URL: <a href="https://w3c.github.io/uievents-key/">https://w3c.github.io/uievents-key/</a>
    <dt id="biblio-webidl">[WebIDL]
    <dd>Edgar Chen; Timothy Gu. <a href="https://webidl.spec.whatwg.org/"><cite>Web IDL Standard</cite></a>. Living Standard. URL: <a href="https://webidl.spec.whatwg.org/">https://webidl.spec.whatwg.org/</a>
   </dl>
@@ -9638,22 +9692,6 @@ <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">I
     </div>
    </div>
   </details>
-  <details class="mdn-anno unpositioned" data-anno-for="event-type-error">
-   <summary><b class="all-engines-flag" title="This feature is in all current engines.">✔</b><span>MDN</span></summary>
-   <div class="feature">
-    <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/error_event" title="The error event is fired on an element when a resource failed to load, or can&apos;t be used. For example, if a script has an execution error or an image can&apos;t be found or is invalid.">Element/error_event</a></p>
-    <p class="all-engines-text">In all current engines.</p>
-    <div class="support">
-     <span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span>
-     <hr>
-     <span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span>
-     <hr>
-     <span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>IE</span><span>9+</span></span>
-     <hr>
-     <span class="firefox_android no"><span>Firefox for Android</span><span>?</span></span><span class="safari_ios no"><span>iOS Safari</span><span>?</span></span><span class="chrome_android no"><span>Chrome for Android</span><span>?</span></span><span class="webview_android no"><span>Android WebView</span><span>?</span></span><span class="samsunginternet_android no"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Mobile</span><span>12.1+</span></span>
-    </div>
-   </div>
-  </details>
   <details class="mdn-anno unpositioned" data-anno-for="event-type-focus">
    <summary><b class="all-engines-flag" title="This feature is in all current engines.">✔</b><span>MDN</span></summary>
    <div class="feature">
@@ -9939,6 +9977,22 @@ <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">I
     </div>
    </div>
   </details>
+  <details class="mdn-anno unpositioned" data-anno-for="event-type-error">
+   <summary><b class="all-engines-flag" title="This feature is in all current engines.">✔</b><span>MDN</span></summary>
+   <div class="feature">
+    <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/error_event" title="The error event is fired on an element when a resource failed to load, or can&apos;t be used. For example, if a script has an execution error or an image can&apos;t be found or is invalid.">HTMLElement/error_event</a></p>
+    <p class="all-engines-text">In all current engines.</p>
+    <div class="support">
+     <span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>1+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span>
+     <hr>
+     <span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span>
+     <hr>
+     <span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>IE</span><span>9+</span></span>
+     <hr>
+     <span class="firefox_android no"><span>Firefox for Android</span><span>?</span></span><span class="safari_ios no"><span>iOS Safari</span><span>?</span></span><span class="chrome_android no"><span>Chrome for Android</span><span>?</span></span><span class="webview_android no"><span>Android WebView</span><span>?</span></span><span class="samsunginternet_android no"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Mobile</span><span>12.1+</span></span>
+    </div>
+   </div>
+  </details>
   <details class="mdn-anno unpositioned" data-anno-for="event-type-input">
    <summary><b class="all-engines-flag" title="This feature is in all current engines.">✔</b><span>MDN</span></summary>
    <div class="feature">
@@ -10610,50 +10664,160 @@ <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">I
     </div>
    </div>
   </details>
-<script>/* position-annos */
+<script>/* Boilerplate: script-dfn-panel */
 "use strict";
 {
+    const dfnsJson = window.dfnsJson || {};
 
-function repositionAnnoPanels(){
-    const panels = [...document.querySelectorAll("[data-anno-for]")];
-    const main = document.querySelector("main");
-    let mainRect;
-    if(main) mainRect = main.getBoundingClientRect();
-    for(const panel of panels) {
-        const dfn = document.getElementById(panel.getAttribute("data-anno-for"));
-        if(!dfn) {
-            console.log("Can't find the annotation panel target:", panel);
-            continue;
+    function genDfnPanel({dfnID, url, dfnText, refSections, external}) {
+        return mk.aside({
+            class: "dfn-panel",
+            id: `infopanel-for-${dfnID}`,
+            "data-for": dfnID,
+            "aria-labelled-by":`infopaneltitle-for-${dfnID}`,
+            },
+            mk.span({id:`infopaneltitle-for-${dfnID}`, style:"display:none"},
+                `Info about the '${dfnText}' ${external?"external":""} reference.`),
+            mk.a({href:url}, url),
+            mk.b({}, "Referenced in:"),
+            mk.ul({},
+                ...refSections.map(section=>
+                    mk.li({},
+                        ...section.refs.map((ref, refI)=>
+                            [
+                                mk.a({
+                                    href: `#${ref.id}`
+                                    },
+                                    (refI == 0) ? section.title : `(${refI + 1})`
+                                ),
+                                " ",
+                            ]
+                        ),
+                    ),
+                ),
+            ),
+        );
+    }
+
+    function genAllDfnPanels() {
+        for(const panelData of Object.values(window.dfnpanelData)) {
+            const dfnID = panelData.dfnID;
+            const dfn = document.getElementById(dfnID);
+            if(!dfn) {
+                console.log(`Can't find dfn#${dfnID}.`, panelData);
+            } else {
+                const panel = genDfnPanel(panelData);
+                append(document.body, panel);
+                insertDfnPopupAction(dfn, panel)
+            }
         }
-        const rect = dfn.getBoundingClientRect();
-        const top = window.scrollY + rect.top
-        panel.style.top = top + "px";
-        panel.top = top;
-        panel.height = rect.height;
-        panel.classList.remove("unpositioned");
-        const panelRect = panel.getBoundingClientRect()
-        if(main) {
-            panel.classList.toggle("overlapping-main", panelRect.left < mainRect.right)
+    }
+
+    document.addEventListener("DOMContentLoaded", ()=>{
+        genAllDfnPanels();
+
+        // Add popup behavior to all dfns to show the corresponding dfn-panel.
+        var dfns = queryAll('.dfn-paneled');
+        for(let dfn of dfns) { ; }
+
+        document.body.addEventListener("click", (e) => {
+            // If not handled already, just hide all dfn panels.
+            hideAllDfnPanels();
+        });
+    })
+
+
+    function hideAllDfnPanels() {
+        // Turn off any currently "on" or "activated" panels.
+        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(el=>hideDfnPanel(el));
+    }
+
+    function showDfnPanel(dfnPanel, dfn) {
+        hideAllDfnPanels(); // Only display one at this time.
+        dfn.setAttribute("aria-expanded", "true");
+        dfnPanel.classList.add("on");
+        dfnPanel.style.left = "5px";
+        dfnPanel.style.top = "0px";
+        const panelRect = dfnPanel.getBoundingClientRect();
+        const panelWidth = panelRect.right - panelRect.left;
+        if (panelRect.right > document.body.scrollWidth) {
+            // Panel's overflowing the screen.
+            // Just drop it below the dfn and flip it rightward instead.
+            // This still wont' fix things if the screen is *really* wide,
+            // but fixing that's a lot harder without 'anchor()'.
+            dfnPanel.style.top = "1.5em";
+            dfnPanel.style.left = "auto";
+            dfnPanel.style.right = "0px";
         }
     }
-    let vSoFar = 0;
-    for(const panel of panels.sort(cmpTops)) {
-        if(panel.top < vSoFar) {
-            panel.top = vSoFar;
-            panel.style.top = vSoFar + "px";
+
+    function pinDfnPanel(dfnPanel) {
+        // Switch it to "activated" state, which pins it.
+        dfnPanel.classList.add("activated");
+        dfnPanel.style.left = null;
+        dfnPanel.style.top = null;
+    }
+
+    function hideDfnPanel(dfnPanel, dfn) {
+        if(!dfn) {
+            dfn = document.getElementById(dfnPanel.getAttribute("data-for"));
         }
-        vSoFar = panel.top + panel.height + 15;
+        dfn.setAttribute("aria-expanded", "false")
+        dfnPanel.classList.remove("on");
+        dfnPanel.classList.remove("activated");
     }
-}
 
-function cmpTops(a,b) {
-    return a.top - b.top;
-}
+    function toggleDfnPanel(dfnPanel, dfn) {
+        if(dfnPanel.classList.contains("on")) {
+            hideDfnPanel(dfnPanel, dfn);
+        } else {
+            showDfnPanel(dfnPanel, dfn);
+        }
+    }
 
-window.addEventListener("load", repositionAnnoPanels);
-window.addEventListener("resize", repositionAnnoPanels);
-}</script>
-<script>/* script-dfn-panel */
+    function insertDfnPopupAction(dfn, dfnPanel) {
+        // Find dfn panel
+        const panelWrapper = document.createElement('span');
+        panelWrapper.appendChild(dfnPanel);
+        panelWrapper.style.position = "relative";
+        panelWrapper.style.height = "0px";
+        dfn.insertAdjacentElement("afterend", panelWrapper);
+        dfn.setAttribute('role', 'button');
+        dfn.setAttribute('aria-expanded', 'false')
+        dfn.tabIndex = 0;
+        dfn.classList.add('has-dfn-panel');
+        dfn.addEventListener('click', (event) => {
+            showDfnPanel(dfnPanel, dfn);
+            event.stopPropagation();
+        });
+        dfn.addEventListener('keypress', (event) => {
+            const kc = event.keyCode;
+            // 32->Space, 13->Enter
+            if(kc == 32 || kc == 13) {
+                toggleDfnPanel(dfnPanel, dfn);
+                event.stopPropagation();
+                event.preventDefault();
+            }
+        });
+
+        dfnPanel.addEventListener('click', (event) => {
+            if (event.target.nodeName == 'A') {
+                pinDfnPanel(dfnPanel);
+            }
+            event.stopPropagation();
+        });
+
+        dfnPanel.addEventListener('keydown', (event) => {
+            if(event.keyCode == 27) { // Escape key
+                hideDfnPanel(dfnPanel, dfn);
+                event.stopPropagation();
+                event.preventDefault();
+            }
+        })
+    }
+}
+</script>
+<script>/* Boilerplate: script-dfn-panel */
 "use strict";
 {
     const dfnsJson = window.dfnsJson || {};
@@ -10806,7 +10970,7 @@ <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">I
     }
 }
 </script>
-<script>/* script-dfn-panel-json */
+<script>/* Boilerplate: script-dfn-panel-json */
 window.dfnpanelData = {};
 window.dfnpanelData['1be12cdd'] = {"dfnID": "1be12cdd", "url": "https://dom.spec.whatwg.org/#dom-event-at_target", "dfnText": "AT_TARGET", "refSections": [{"refs": [{"id": "ref-for-dom-event-at_target"}], "title": "4. Basic Event Interfaces"}], "external": true};
 window.dfnpanelData['12ddbdca'] = {"dfnID": "12ddbdca", "url": "https://dom.spec.whatwg.org/#dom-event-bubbling_phase", "dfnText": "BUBBLING_PHASE", "refSections": [{"refs": [{"id": "ref-for-dom-event-bubbling_phase"}], "title": "4. Basic Event Interfaces"}], "external": true};
@@ -11053,8 +11217,9 @@ <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">I
 window.dfnpanelData['unicode-character-categories'] = {"dfnID": "unicode-character-categories", "url": "#unicode-character-categories", "dfnText": "Unicode character categories", "refSections": [{"refs": [{"id": "ref-for-unicode-character-categories"}], "title": "14. Glossary"}], "external": false};
 window.dfnpanelData['un-initialized-value'] = {"dfnID": "un-initialized-value", "url": "#un-initialized-value", "dfnText": "un-initialized value", "refSections": [{"refs": [{"id": "ref-for-un-initialized-value"}, {"id": "ref-for-un-initialized-value\u2460"}], "title": "5.1.1.1. UIEvent"}, {"refs": [{"id": "ref-for-un-initialized-value\u2461"}], "title": "5.2.1.1. FocusEvent"}, {"refs": [{"id": "ref-for-un-initialized-value\u2462"}, {"id": "ref-for-un-initialized-value\u2463"}, {"id": "ref-for-un-initialized-value\u2464"}, {"id": "ref-for-un-initialized-value\u2465"}, {"id": "ref-for-un-initialized-value\u2466"}, {"id": "ref-for-un-initialized-value\u2467"}, {"id": "ref-for-un-initialized-value\u2468"}, {"id": "ref-for-un-initialized-value\u2460\u24ea"}, {"id": "ref-for-un-initialized-value\u2460\u2460"}, {"id": "ref-for-un-initialized-value\u2460\u2461"}, {"id": "ref-for-un-initialized-value\u2460\u2462"}, {"id": "ref-for-un-initialized-value\u2460\u2463"}], "title": "5.3.1.1. MouseEvent"}, {"refs": [{"id": "ref-for-un-initialized-value\u2460\u2464"}, {"id": "ref-for-un-initialized-value\u2460\u2465"}, {"id": "ref-for-un-initialized-value\u2460\u2466"}, {"id": "ref-for-un-initialized-value\u2460\u2467"}], "title": "5.4.1.1. WheelEvent"}, {"refs": [{"id": "ref-for-un-initialized-value\u2460\u2468"}, {"id": "ref-for-un-initialized-value\u2461\u24ea"}, {"id": "ref-for-un-initialized-value\u2461\u2460"}], "title": "5.5.1.1. InputEvent"}, {"refs": [{"id": "ref-for-un-initialized-value\u2461\u2461"}, {"id": "ref-for-un-initialized-value\u2461\u2462"}, {"id": "ref-for-un-initialized-value\u2461\u2463"}, {"id": "ref-for-un-initialized-value\u2461\u2464"}, {"id": "ref-for-un-initialized-value\u2461\u2465"}, {"id": "ref-for-un-initialized-value\u2461\u2466"}, {"id": "ref-for-un-initialized-value\u2461\u2467"}, {"id": "ref-for-un-initialized-value\u2461\u2468"}, {"id": "ref-for-un-initialized-value\u2462\u24ea"}], "title": "5.6.1.1. KeyboardEvent"}, {"refs": [{"id": "ref-for-un-initialized-value\u2462\u2460"}], "title": "5.7.1.1. CompositionEvent"}, {"refs": [{"id": "ref-for-un-initialized-value\u2462\u2461"}, {"id": "ref-for-un-initialized-value\u2462\u2462"}, {"id": "ref-for-un-initialized-value\u2462\u2463"}, {"id": "ref-for-un-initialized-value\u2462\u2464"}, {"id": "ref-for-un-initialized-value\u2462\u2465"}], "title": "9.4.1. Interface MutationEvent"}], "external": false};
 window.dfnpanelData['user-agent'] = {"dfnID": "user-agent", "url": "#user-agent", "dfnText": "user agent", "refSections": [{"refs": [{"id": "ref-for-user-agent"}, {"id": "ref-for-user-agent\u2460"}, {"id": "ref-for-user-agent\u2461"}], "title": "1.2. Conformance"}, {"refs": [{"id": "ref-for-user-agent\u2462"}, {"id": "ref-for-user-agent\u2463"}], "title": "1.2.1. Web browsers and other dynamic or interactive user agents"}, {"refs": [{"id": "ref-for-user-agent\u2464"}], "title": "2. Stylistic Conventions"}, {"refs": [{"id": "ref-for-user-agent\u2465"}, {"id": "ref-for-user-agent\u2466"}], "title": "3.4. Trusted events"}, {"refs": [{"id": "ref-for-user-agent\u2467"}], "title": "5.1.2.1. load"}, {"refs": [{"id": "ref-for-user-agent\u2468"}], "title": "5.1.2.2. unload"}, {"refs": [{"id": "ref-for-user-agent\u2460\u24ea"}], "title": "5.1.2.3. abort"}, {"refs": [{"id": "ref-for-user-agent\u2460\u2460"}], "title": "5.1.2.4. error"}, {"refs": [{"id": "ref-for-user-agent\u2460\u2461"}], "title": "5.1.2.5. select"}, {"refs": [{"id": "ref-for-user-agent\u2460\u2462"}], "title": "5.2.4.1. blur"}, {"refs": [{"id": "ref-for-user-agent\u2460\u2463"}], "title": "5.2.4.2. focus"}, {"refs": [{"id": "ref-for-user-agent\u2460\u2464"}], "title": "5.2.4.3. focusin"}, {"refs": [{"id": "ref-for-user-agent\u2460\u2465"}], "title": "5.2.4.4. focusout"}, {"refs": [{"id": "ref-for-user-agent\u2460\u2466"}], "title": "5.3.4.3. contextmenu"}, {"refs": [{"id": "ref-for-user-agent\u2460\u2467"}], "title": "5.3.4.4. dblclick"}, {"refs": [{"id": "ref-for-user-agent\u2460\u2468"}], "title": "5.3.4.5. mousedown"}, {"refs": [{"id": "ref-for-user-agent\u2461\u24ea"}, {"id": "ref-for-user-agent\u2461\u2460"}], "title": "5.3.4.6. mouseenter"}, {"refs": [{"id": "ref-for-user-agent\u2461\u2461"}, {"id": "ref-for-user-agent\u2461\u2462"}], "title": "5.3.4.7. mouseleave"}, {"refs": [{"id": "ref-for-user-agent\u2461\u2463"}], "title": "5.3.4.8. mousemove"}, {"refs": [{"id": "ref-for-user-agent\u2461\u2464"}], "title": "5.3.4.9. mouseout"}, {"refs": [{"id": "ref-for-user-agent\u2461\u2465"}], "title": "5.3.4.10. mouseover"}, {"refs": [{"id": "ref-for-user-agent\u2461\u2466"}], "title": "5.3.4.11. mouseup"}, {"refs": [{"id": "ref-for-user-agent\u2461\u2467"}, {"id": "ref-for-user-agent\u2461\u2468"}], "title": "5.4.2.1. wheel"}, {"refs": [{"id": "ref-for-user-agent\u2462\u24ea"}], "title": "5.5.3.1. beforeinput"}, {"refs": [{"id": "ref-for-user-agent\u2462\u2460"}], "title": "5.5.3.2. input"}, {"refs": [{"id": "ref-for-user-agent\u2462\u2461"}], "title": "5.6.1.1. KeyboardEvent"}, {"refs": [{"id": "ref-for-user-agent\u2462\u2462"}, {"id": "ref-for-user-agent\u2462\u2463"}], "title": "5.6.4.1. keydown"}, {"refs": [{"id": "ref-for-user-agent\u2462\u2464"}], "title": "5.6.4.2. keyup"}, {"refs": [{"id": "ref-for-user-agent\u2462\u2465"}], "title": "5.7.7.1. compositionstart"}, {"refs": [{"id": "ref-for-user-agent\u2462\u2466"}], "title": "5.7.7.2. compositionupdate"}, {"refs": [{"id": "ref-for-user-agent\u2462\u2467"}, {"id": "ref-for-user-agent\u2462\u2468"}], "title": "5.7.7.3. compositionend"}, {"refs": [{"id": "ref-for-user-agent\u2463\u24ea"}], "title": "7. Legacy Event Initializers"}, {"refs": [{"id": "ref-for-user-agent\u2463\u2460"}, {"id": "ref-for-user-agent\u2463\u2461"}, {"id": "ref-for-user-agent\u2463\u2462"}], "title": "8. Legacy Key & Mouse Event Attributes"}, {"refs": [{"id": "ref-for-user-agent\u2463\u2463"}], "title": "8.1. Legacy UIEvent supplemental interface"}, {"refs": [{"id": "ref-for-user-agent\u2463\u2464"}], "title": "8.2. Legacy KeyboardEvent supplemental interface"}, {"refs": [{"id": "ref-for-user-agent\u2463\u2465"}], "title": "9. Legacy Event Types"}, {"refs": [{"id": "ref-for-user-agent\u2463\u2466"}, {"id": "ref-for-user-agent\u2463\u2467"}, {"id": "ref-for-user-agent\u2463\u2468"}, {"id": "ref-for-user-agent\u2464\u24ea"}, {"id": "ref-for-user-agent\u2464\u2460"}], "title": "9.1.1.1. DOMActivate"}, {"refs": [{"id": "ref-for-user-agent\u2464\u2461"}, {"id": "ref-for-user-agent\u2464\u2462"}, {"id": "ref-for-user-agent\u2464\u2463"}], "title": "9.1.2. Activation event order"}, {"refs": [{"id": "ref-for-user-agent\u2464\u2464"}], "title": "9.2.1.1. DOMFocusIn"}, {"refs": [{"id": "ref-for-user-agent\u2464\u2465"}], "title": "9.2.1.2. DOMFocusOut"}, {"refs": [{"id": "ref-for-user-agent\u2464\u2466"}], "title": "9.3.1.1. keypress"}, {"refs": [{"id": "ref-for-user-agent\u2464\u2467"}], "title": "9.4. Legacy MutationEvent events"}, {"refs": [{"id": "ref-for-user-agent\u2464\u2468"}], "title": "9.4.2.1. DOMAttrModified"}, {"refs": [{"id": "ref-for-user-agent\u2465\u24ea"}], "title": "9.4.2.2. DOMCharacterDataModified"}, {"refs": [{"id": "ref-for-user-agent\u2465\u2460"}, {"id": "ref-for-user-agent\u2465\u2461"}], "title": "9.4.2.3. DOMNodeInserted"}, {"refs": [{"id": "ref-for-user-agent\u2465\u2462"}, {"id": "ref-for-user-agent\u2465\u2463"}], "title": "9.4.2.4. DOMNodeInsertedIntoDocument"}, {"refs": [{"id": "ref-for-user-agent\u2465\u2464"}, {"id": "ref-for-user-agent\u2465\u2465"}], "title": "9.4.2.5. DOMNodeRemoved"}, {"refs": [{"id": "ref-for-user-agent\u2465\u2466"}, {"id": "ref-for-user-agent\u2465\u2467"}], "title": "9.4.2.6. DOMNodeRemovedFromDocument"}, {"refs": [{"id": "ref-for-user-agent\u2465\u2468"}, {"id": "ref-for-user-agent\u2466\u24ea"}], "title": "14. Glossary"}], "external": false};
-window.dfnpanelData['window'] = {"dfnID": "window", "url": "#window", "dfnText": "Window", "refSections": [{"refs": [{"id": "ref-for-window"}, {"id": "ref-for-window\u2460"}], "title": "3.1. Event dispatch and DOM event flow"}, {"refs": [{"id": "ref-for-window\u2461"}, {"id": "ref-for-window\u2462"}, {"id": "ref-for-window\u2463"}, {"id": "ref-for-window\u2464"}, {"id": "ref-for-window\u2465"}, {"id": "ref-for-window\u2466"}, {"id": "ref-for-window\u2467"}, {"id": "ref-for-window\u2468"}, {"id": "ref-for-window\u2460\u24ea"}], "title": "4.1. List of Event Types"}, {"refs": [{"id": "ref-for-window\u2460\u2462"}, {"id": "ref-for-window\u2460\u2463"}, {"id": "ref-for-window\u2460\u2464"}], "title": "5.1.2.1. load"}, {"refs": [{"id": "ref-for-window\u2460\u2465"}, {"id": "ref-for-window\u2460\u2466"}], "title": "5.1.2.2. unload"}, {"refs": [{"id": "ref-for-window\u2460\u2467"}, {"id": "ref-for-window\u2460\u2468"}], "title": "5.1.2.3. abort"}, {"refs": [{"id": "ref-for-window\u2461\u24ea"}, {"id": "ref-for-window\u2461\u2460"}], "title": "5.1.2.4. error"}, {"refs": [{"id": "ref-for-window\u2461\u2461"}], "title": "5.1.2.5. select"}, {"refs": [{"id": "ref-for-window\u2461\u2462"}, {"id": "ref-for-window\u2461\u2463"}], "title": "5.2.4.1. blur"}, {"refs": [{"id": "ref-for-window\u2461\u2464"}, {"id": "ref-for-window\u2461\u2465"}], "title": "5.2.4.2. focus"}, {"refs": [{"id": "ref-for-window\u2461\u2466"}, {"id": "ref-for-window\u2461\u2467"}], "title": "5.2.4.3. focusin"}, {"refs": [{"id": "ref-for-window\u2461\u2468"}, {"id": "ref-for-window\u2462\u24ea"}], "title": "5.2.4.4. focusout"}, {"refs": [{"id": "ref-for-window\u2462\u2460"}], "title": "5.3.4.1. auxclick"}, {"refs": [{"id": "ref-for-window\u2462\u2461"}], "title": "5.3.4.2. click"}, {"refs": [{"id": "ref-for-window\u2462\u2462"}], "title": "5.3.4.3. contextmenu"}, {"refs": [{"id": "ref-for-window\u2462\u2463"}], "title": "5.3.4.4. dblclick"}, {"refs": [{"id": "ref-for-window\u2462\u2464"}], "title": "5.3.4.5. mousedown"}, {"refs": [{"id": "ref-for-window\u2462\u2465"}], "title": "5.3.4.6. mouseenter"}, {"refs": [{"id": "ref-for-window\u2462\u2466"}], "title": "5.3.4.7. mouseleave"}, {"refs": [{"id": "ref-for-window\u2462\u2467"}], "title": "5.3.4.8. mousemove"}, {"refs": [{"id": "ref-for-window\u2462\u2468"}], "title": "5.3.4.9. mouseout"}, {"refs": [{"id": "ref-for-window\u2463\u24ea"}], "title": "5.3.4.10. mouseover"}, {"refs": [{"id": "ref-for-window\u2463\u2460"}], "title": "5.3.4.11. mouseup"}, {"refs": [{"id": "ref-for-window\u2463\u2461"}], "title": "5.4.2.1. wheel"}, {"refs": [{"id": "ref-for-window\u2463\u2462"}], "title": "5.5.3.1. beforeinput"}, {"refs": [{"id": "ref-for-window\u2463\u2463"}], "title": "5.5.3.2. input"}, {"refs": [{"id": "ref-for-window\u2463\u2464"}], "title": "5.6.4.1. keydown"}, {"refs": [{"id": "ref-for-window\u2463\u2465"}], "title": "5.6.4.2. keyup"}, {"refs": [{"id": "ref-for-window\u2463\u2466"}], "title": "5.7.7.1. compositionstart"}, {"refs": [{"id": "ref-for-window\u2463\u2467"}], "title": "5.7.7.2. compositionupdate"}, {"refs": [{"id": "ref-for-window\u2463\u2468"}], "title": "5.7.7.3. compositionend"}, {"refs": [{"id": "ref-for-window\u2464\u2462"}, {"id": "ref-for-window\u2464\u2463"}, {"id": "ref-for-window\u2464\u2464"}], "title": "9. Legacy Event Types"}, {"refs": [{"id": "ref-for-window\u2464\u2465"}], "title": "9.1.1.1. DOMActivate"}, {"refs": [{"id": "ref-for-window\u2464\u2466"}, {"id": "ref-for-window\u2464\u2467"}], "title": "9.2.1.1. DOMFocusIn"}, {"refs": [{"id": "ref-for-window\u2464\u2468"}, {"id": "ref-for-window\u2465\u24ea"}], "title": "9.2.1.2. DOMFocusOut"}, {"refs": [{"id": "ref-for-window\u2465\u2460"}], "title": "9.3.1.1. keypress"}, {"refs": [{"id": "ref-for-window\u2465\u2461"}], "title": "9.4.2.7. DOMSubtreeModified"}, {"refs": [{"id": "ref-for-window\u2465\u2462"}], "title": "12.1.1. Changes to DOM Level 2 event flow"}, {"refs": [{"id": "ref-for-window\u2465\u2463"}], "title": "14. Glossary"}], "external": false};</script>
-<script>/* script-dom-helper */
+window.dfnpanelData['window'] = {"dfnID": "window", "url": "#window", "dfnText": "Window", "refSections": [{"refs": [{"id": "ref-for-window"}, {"id": "ref-for-window\u2460"}], "title": "3.1. Event dispatch and DOM event flow"}, {"refs": [{"id": "ref-for-window\u2461"}, {"id": "ref-for-window\u2462"}, {"id": "ref-for-window\u2463"}, {"id": "ref-for-window\u2464"}, {"id": "ref-for-window\u2465"}, {"id": "ref-for-window\u2466"}, {"id": "ref-for-window\u2467"}, {"id": "ref-for-window\u2468"}, {"id": "ref-for-window\u2460\u24ea"}], "title": "4.1. List of Event Types"}, {"refs": [{"id": "ref-for-window\u2460\u2462"}, {"id": "ref-for-window\u2460\u2463"}, {"id": "ref-for-window\u2460\u2464"}], "title": "5.1.2.1. load"}, {"refs": [{"id": "ref-for-window\u2460\u2465"}, {"id": "ref-for-window\u2460\u2466"}], "title": "5.1.2.2. unload"}, {"refs": [{"id": "ref-for-window\u2460\u2467"}, {"id": "ref-for-window\u2460\u2468"}], "title": "5.1.2.3. abort"}, {"refs": [{"id": "ref-for-window\u2461\u24ea"}, {"id": "ref-for-window\u2461\u2460"}], "title": "5.1.2.4. error"}, {"refs": [{"id": "ref-for-window\u2461\u2461"}], "title": "5.1.2.5. select"}, {"refs": [{"id": "ref-for-window\u2461\u2462"}, {"id": "ref-for-window\u2461\u2463"}], "title": "5.2.4.1. blur"}, {"refs": [{"id": "ref-for-window\u2461\u2464"}, {"id": "ref-for-window\u2461\u2465"}], "title": "5.2.4.2. focus"}, {"refs": [{"id": "ref-for-window\u2461\u2466"}, {"id": "ref-for-window\u2461\u2467"}], "title": "5.2.4.3. focusin"}, {"refs": [{"id": "ref-for-window\u2461\u2468"}, {"id": "ref-for-window\u2462\u24ea"}], "title": "5.2.4.4. focusout"}, {"refs": [{"id": "ref-for-window\u2462\u2460"}], "title": "5.3.4.1. auxclick"}, {"refs": [{"id": "ref-for-window\u2462\u2461"}], "title": "5.3.4.2. click"}, {"refs": [{"id": "ref-for-window\u2462\u2462"}], "title": "5.3.4.3. contextmenu"}, {"refs": [{"id": "ref-for-window\u2462\u2463"}], "title": "5.3.4.4. dblclick"}, {"refs": [{"id": "ref-for-window\u2462\u2464"}], "title": "5.3.4.5. mousedown"}, {"refs": [{"id": "ref-for-window\u2462\u2465"}], "title": "5.3.4.6. mouseenter"}, {"refs": [{"id": "ref-for-window\u2462\u2466"}], "title": "5.3.4.7. mouseleave"}, {"refs": [{"id": "ref-for-window\u2462\u2467"}], "title": "5.3.4.8. mousemove"}, {"refs": [{"id": "ref-for-window\u2462\u2468"}], "title": "5.3.4.9. mouseout"}, {"refs": [{"id": "ref-for-window\u2463\u24ea"}], "title": "5.3.4.10. mouseover"}, {"refs": [{"id": "ref-for-window\u2463\u2460"}], "title": "5.3.4.11. mouseup"}, {"refs": [{"id": "ref-for-window\u2463\u2461"}], "title": "5.4.2.1. wheel"}, {"refs": [{"id": "ref-for-window\u2463\u2462"}], "title": "5.5.3.1. beforeinput"}, {"refs": [{"id": "ref-for-window\u2463\u2463"}], "title": "5.5.3.2. input"}, {"refs": [{"id": "ref-for-window\u2463\u2464"}], "title": "5.6.4.1. keydown"}, {"refs": [{"id": "ref-for-window\u2463\u2465"}], "title": "5.6.4.2. keyup"}, {"refs": [{"id": "ref-for-window\u2463\u2466"}], "title": "5.7.7.1. compositionstart"}, {"refs": [{"id": "ref-for-window\u2463\u2467"}], "title": "5.7.7.2. compositionupdate"}, {"refs": [{"id": "ref-for-window\u2463\u2468"}], "title": "5.7.7.3. compositionend"}, {"refs": [{"id": "ref-for-window\u2464\u2462"}, {"id": "ref-for-window\u2464\u2463"}, {"id": "ref-for-window\u2464\u2464"}], "title": "9. Legacy Event Types"}, {"refs": [{"id": "ref-for-window\u2464\u2465"}], "title": "9.1.1.1. DOMActivate"}, {"refs": [{"id": "ref-for-window\u2464\u2466"}, {"id": "ref-for-window\u2464\u2467"}], "title": "9.2.1.1. DOMFocusIn"}, {"refs": [{"id": "ref-for-window\u2464\u2468"}, {"id": "ref-for-window\u2465\u24ea"}], "title": "9.2.1.2. DOMFocusOut"}, {"refs": [{"id": "ref-for-window\u2465\u2460"}], "title": "9.3.1.1. keypress"}, {"refs": [{"id": "ref-for-window\u2465\u2461"}], "title": "9.4.2.7. DOMSubtreeModified"}, {"refs": [{"id": "ref-for-window\u2465\u2462"}], "title": "12.1.1. Changes to DOM Level 2 event flow"}, {"refs": [{"id": "ref-for-window\u2465\u2463"}], "title": "14. Glossary"}], "external": false};
+</script>
+<script>/* Boilerplate: script-dom-helper */
 function query(sel) { return document.querySelector(sel); }
 
 function queryAll(sel) { return [...document.querySelectorAll(sel)]; }
@@ -11248,4 +11413,49 @@ <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">I
 		el.innerHTML = markup;
 		return el.content;
 	}
-}</script>
\ No newline at end of file
+}
+</script>
+<script>/* Boilerplate: script-position-annos */
+"use strict";
+{
+
+function repositionAnnoPanels(){
+    const panels = [...document.querySelectorAll("[data-anno-for]")];
+    const main = document.querySelector("main");
+    let mainRect;
+    if(main) mainRect = main.getBoundingClientRect();
+    for(const panel of panels) {
+        const dfn = document.getElementById(panel.getAttribute("data-anno-for"));
+        if(!dfn) {
+            console.log("Can't find the annotation panel target:", panel);
+            continue;
+        }
+        const rect = dfn.getBoundingClientRect();
+        const top = window.scrollY + rect.top
+        panel.style.top = top + "px";
+        panel.top = top;
+        panel.height = rect.height;
+        panel.classList.remove("unpositioned");
+        const panelRect = panel.getBoundingClientRect()
+        if(main) {
+            panel.classList.toggle("overlapping-main", panelRect.left < mainRect.right)
+        }
+    }
+    let vSoFar = 0;
+    for(const panel of panels.sort(cmpTops)) {
+        if(panel.top < vSoFar) {
+            panel.top = vSoFar;
+            panel.style.top = vSoFar + "px";
+        }
+        vSoFar = panel.top + panel.height + 15;
+    }
+}
+
+function cmpTops(a,b) {
+    return a.top - b.top;
+}
+
+window.addEventListener("load", repositionAnnoPanels);
+window.addEventListener("resize", repositionAnnoPanels);
+}
+</script>
\ No newline at end of file