Dev edition: display the caniuse panels

Fixes whatwg#2794. Most of the work is done in
whatwg/wattsi#54; this commit consists of:

* Incorporating the styles for the caniuse boxes into the dev edition,
  with some tweaks.
* Marking up, or in some cases adding, appropriate subdfns for topics
  that appear on caniuse but are missing in the dev edition.

Fyrd/caniuse#3593 will also be important to get
two caniuse boxes to show up properly.

Author: domenic

dev/styles.css

@@ -342,6 +342,13 @@ var > var::after {
   background: transparent;
 }
 
+/* Caniuse boxes */
+
+.status {
+  right: auto;
+  left: calc(50% + 586px / 2 - 9em / 2);
+}
+
 /* SPECIFIC ELEMENTS */
 /* Header */
 
@@ -558,6 +565,11 @@ html:not(.index) ol.toc ol {
     margin-left: 0.5em;
   }
 
+ .status {
+    left: auto;
+    right: -8.9em;
+  }
+
   /* Search */
   #search {
     position: relative;

source

@@ -29,23 +29,13 @@
   <title w-nohtml>HTML Standard, Developer's Edition</title>
   <meta name="theme-color" content="#3c790a">
   <link w-nodev rel="stylesheet" href="https://resources.whatwg.org/standard.css">
-  <link w-nohtml rel="stylesheet" href="styles.css">
   <link rel="icon" href="https://resources.whatwg.org/logo.svg">
   <script>
    function toggleStatus(div) {
      div.parentNode.classList.toggle('wrapped');
    }
   </script>
-  <style w-nodev>
-   [hidden] { display: none; }
-
-   .bad, .bad *:not(.X\58X) { color: gray; border-color: gray; background: transparent; }
-
-   .fingerprint { position: absolute; right: 0; z-index: 5; }
-   @media (max-width: 767px) {
-     .fingerprint { max-width: 35px; }
-   }
-
+  <style>
    .status { min-height: 0.6em; font: 1em sans-serif; width: 9em; padding: 0.3em; position: absolute; z-index: 8; right: 0.3em; background: #EEE; color: black; box-shadow: 0 0 3px #999; overflow: hidden; margin: -2em 0 0 0; border-collapse: initial; border-spacing: initial; }
    .status:hover { z-index: 9; }
    .status:focus-within { z-index: 9; }
@@ -80,12 +70,23 @@
    .status > .support > .opera::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.png); }
    .status > .support > .safari::before { background-image: url(https://resources.whatwg.org/browser-logos/safari.png); }
    .status > .support > .samsung::before { background-image: url(https://resources.whatwg.org/browser-logos/samsung.png); }
-   .status > .caniuse { text-align: right; font-style: italic; }
+   .status > .caniuse { text-align: right; font-style: italic; width: 100%; }
    .status > .caniuse + p { margin-top: 0.5em; border-top: 1px solid silver; }
 
    @media (max-width: 767px) {
      .status { right: -9em; }
    }
+  </style>
+  <link w-nohtml rel="stylesheet" href="styles.css">
+  <style w-nodev>
+   [hidden] { display: none; }
+
+   .bad, .bad *:not(.X\58X) { color: gray; border-color: gray; background: transparent; }
+
+   .fingerprint { position: absolute; right: 0; z-index: 5; }
+   @media (max-width: 767px) {
+     .fingerprint { max-width: 35px; }
+   }
 
    .applies .yes, .yesno .yes { background: yellow; }
    .yesno .yes, .yesno .no { text-align: center; }
@@ -9190,10 +9191,17 @@ partial interface <dfn id="document" data-lt="">Document</dfn> {
    <dt><var>document</var> . <code subdfn data-x="dom-document-readyState">readyState</code></dt>
    <dd>
     <p>Returns "<code data-x="">loading</code>" while the <code>Document</code> is loading, "<code
-    data-x="">interactive</code>" once it is finished parsing but still loading sub-resources, and
+    data-x="">interactive</code>" once it is finished parsing but still loading subresources, and
     "<code data-x="">complete</code>" once it has loaded.</p>
+
     <p>The <code data-x="event-readystatechange">readystatechange</code> event fires on the
     <code>Document</code> object when this value changes.</p>
+
+    <p><span w-nohtml subdfn data-x="stop parsing"></span>The <code
+    data-x="event-DOMContentLoaded">DOMContentLoaded</code> event fires after the transition to
+    "<code data-x="">interactive</code>" but before the transition to "<code
+    data-x="">complete</code>", at the point where all subresources apart from <code
+    data-x="attr-script-async">async</code> <code>script</code> elements have loaded.</p>
    </dd>
 
   </dl>
@@ -22342,10 +22350,11 @@ document.body.appendChild(wbr);</pre>
   <span>HTTP(S) scheme</span>. <span w-nodev>The value is used by the user agent for <span>hyperlink
   auditing</span>.</span></p>
 
-  <p>The <dfn><code data-x="attr-hyperlink-rel">rel</code></dfn> attribute on <code>a</code> and
-  <code>area</code> elements controls what kinds of links the elements create. The attribute's value
-  must be a <span>set of space-separated tokens</span>. The <a href="#linkTypes">allowed keywords
-  and their meanings</a> are defined below.</p>
+  <p><span w-nohtml subdfn data-x="dom-a-rellist"></span>The <dfn><code
+  data-x="attr-hyperlink-rel">rel</code></dfn> attribute on <code>a</code> and <code>area</code>
+  elements controls what kinds of links the elements create. The attribute's value must be a
+  <span>set of space-separated tokens</span>. The <a href="#linkTypes">allowed keywords and their
+  meanings</a> are defined below.</p>
 
   <p><code data-x="attr-hyperlink-rel">rel</code>'s
   <span data-x="concept-supported-tokens">supported tokens</span> are the keywords defined in
@@ -25629,8 +25638,8 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
 
   <dl class="domintro">
 
-   <dt><var>image</var> . <code data-x="dom-img-width">width</code> [ = <var>value</var> ]</dt>
-   <dt><var>image</var> . <code data-x="dom-img-height">height</code> [ = <var>value</var> ]</dt>
+   <dt><var>image</var> . <code subdfn data-x="dom-img-width">width</code> [ = <var>value</var> ]</dt>
+   <dt><var>image</var> . <code subdfn data-x="dom-img-height">height</code> [ = <var>value</var> ]</dt>
 
    <dd>
 
@@ -25643,8 +25652,8 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
 
    </dd>
 
-   <dt><var>image</var> . <code data-x="dom-img-naturalWidth">naturalWidth</code></dt>
-   <dt><var>image</var> . <code data-x="dom-img-naturalHeight">naturalHeight</code></dt>
+   <dt><var>image</var> . <code subdfn data-x="dom-img-naturalWidth">naturalWidth</code></dt>
+   <dt><var>image</var> . <code subdfn data-x="dom-img-naturalHeight">naturalHeight</code></dt>
 
    <dd>
 
@@ -25654,7 +25663,7 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
 
    </dd>
 
-   <dt><var>image</var> . <code data-x="dom-img-complete">complete</code></dt>
+   <dt><var>image</var> . <code subdfn data-x="dom-img-complete">complete</code></dt>
 
    <dd>
 
@@ -25664,15 +25673,15 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
 
    </dd>
 
-   <dt><var>image</var> . <code data-x="dom-img-currentSrc">currentSrc</code></dt>
+   <dt><var>image</var> . <code subdfn data-x="dom-img-currentSrc">currentSrc</code></dt>
 
    <dd>
 
     <p>Returns the image's <span>absolute URL</span>.</p>
 
    </dd>
 
-   <dt><var>image</var> . <code data-x="dom-img-decode">decode</code>()</dt>
+   <dt><var>image</var> . <code subdfn data-x="dom-img-decode">decode</code>()</dt>
 
    <dd>
 
@@ -25689,7 +25698,7 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
 
    </dd>
 
-   <dt><var>image</var> = new <code data-x="dom-image">Image</code>( [ <var>width</var> [, <var>height</var> ] ] )</dt>
+   <dt><var>image</var> = new <code subdfn data-x="dom-image">Image</code>( [ <var>width</var> [, <var>height</var> ] ] )</dt>
 
    <dd>