Issue #2472 - Part 5: Make modal versions of <dialog> work, and tune styles.

This adds a pseudo-class `:-moz-modal-dialog` to be able to track whether the
dialog is in the top layer in CSS.
This implements default styling for modal dialogs following the HTML standard.
Slightly off-extreme color scheme chosen for unstyled <dialog> elements.

layout/style/res/html.css

@@ -811,14 +811,15 @@ dialog {
   position: absolute;
   inset-inline-start: 0;
   inset-inline-end: 0;
-  color: black;
   margin: auto;
   border-width: initial;
   border-style: solid;
-  border-color: initial;
+  border-color: dimgrey;
   border-image: initial;
+  border-radius: 5px;
   padding: 1em;
-  background: white;
+  color: #222; /*CanvasText*/
+  background: snow; /*Canvas*/
   width: -moz-fit-content;
 }
 
@@ -826,6 +827,15 @@ dialog:not([open]) {
   display: none;
 }
 
+dialog:-moz-modal-dialog {
+  -moz-top-layer: top !important;
+}
+
+/* https://html.spec.whatwg.org/#flow-content-3 */
+dialog::backdrop {
+  background: rgba(0, 0, 0, 0.1);
+}
+
 /* emulation of non-standard HTML <marquee> tag */
 marquee {
   inline-size: -moz-available;