blitz-pdf 0.1.2 → 0.1.4

package/vendor/blitz-dom/assets/default.css

@@ -0,0 +1,1142 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@namespace url(http://www.w3.org/1999/xhtml);
+/* set default namespace to HTML */
+@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
+
+@font-face {
+    font-family: -moz-bullet-font;
+    src: url("data:font/woff2;base64,d09GMgABAAAAAARYAAwAAAAACqAAAAQFAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cBmAAgwIRCAqKDIcYATYCJAMsCxgABCAFg2AHIBtDCFGUrM0MyM/DGJyndUclpZwnU8QPQ6wsFOHO+/yHNvV9IEqSQgsVJW2p+uZkohKbVExPEz/JUW7zk6rzYH9723UJ/4DzBII8CSzwgFMOOE4KW2rjAmh4qQWSiid60f7Y9FsXScfUpeluagFqTTQYyoQaQSubXil0lHRsBehAI9KofG/6ogF9/Hl6lBd920LmeTxj8JXBfFWKwYAY3QsAAXD17ZAB4M6Ocv/nsZlkaTl0gLipewIQEMB2d9lKDAT1ZjP/F7jmWsQ3wn8AZvZFgIIC7ESh4AP1iFb4nPnfWyJgcQArpUWqW9W96j71kHr/L9a/dNRbj+8/ujXLWCMMFYVYiXoEaZQ4YOC/E7Dkz3JEjaokxAP6i3hIUjv9fwYyE6I3yIozKkaGN63fP36aeLJmxlRZwZiFziPrMVvOlnCF98SQJfGO/Xllv/FnWAcEjrMqaMCPwVmktCDO5zzxcXqeKS+QFxYnvJLFVzKZAFcKnlZRwHEPVM3mXxNt2gdZEpkKaIAG9gbgDTU5SOYDcmX7Rr61evEA1U+1/3SMb6FFtUqh55nYleE95j2zPNxzdlnGoR5xu/PxQKzb7bFaFLvl79Z54Lx9OH+g0/PPYlcsNo/nwP2V2vsHUHsV4KqEsd+e2r6Fu2v7abkfvsb65b41uwvRvqewH25kTntqolbYsEr5DAqrX97a0jrBLjFRExVHR2dH1Za6unyZfCVZHqQP0BtYjuUYlg9J6SurcrTEiOr26m5xcuTW4Sp3ljkUYWJ9+/iVmzbzPpcuXnGeqU3U7IKjz/qeKSSCltyhuSoxkqqTZX+DXt/OMmAikC8SzVD0jg3dbhIE0eUqc04UFFrxCSXzFxgHclzRMPe0ocOjiKRoSZISE0OtpkBjECdxkkRM1KiaJV0ed0V5umBP1wyUPL2ZBGLSDh5itIHahHRF0CY5nZMGib6T3cOmDvcTSZKuPiFJFpPRGNTIOq7jl5OjDiGIoo6qEE0QtfQJ3VYUD2RZvbm5uWWCWOgR4HXAk5GxLEO0izhLdvPTfpTV3xeOnOfT96uR53CdPrPq+P9HZvzO4QCMmDr7lTcNZorT6iMOYgI+IxClMzeCspeoLt5ABGSpta6gRZmQSnzk9e9jmOAYKC7RsyGMYaB6MpbNKMiRq2U6vI0yPZuTMiODFytMrGEBi7pjGgkAMoaNLGOFSoYceaZMx1+XTC/UNpmRzY1nmwT7AIcK+fK5lYNjz893lwMTuXlD2AKl8Md+24AxitRaLH/MUMqd9z862owy/bZTuZUqs1iRQop0KdLgZwPc9JS0lprnkef1gitBCRhjgV+vjGK8BfIV8CrlVghj1vIyZfyC/AJvqbsQYAEA/v+IAQA=");
+}
+
+/* bidi
+ *
+ * The dir attribute mapping uses the attribute-selector form from the HTML
+ * spec's bidi rendering section rather than Gecko's internal pseudo-classes
+ * (:-moz-dir-attr-rtl and friends), which this engine's selector parser
+ * does not know: it dropped these rules, and the dir attribute did nothing.
+ * dir=auto keeps its isolation but not the content-based direction, which
+ * needs bidi analysis no selector can express.
+ */
+
+[dir="ltr" i] {
+    direction: ltr;
+    unicode-bidi: isolate;
+}
+
+[dir="rtl" i] {
+    direction: rtl;
+    unicode-bidi: isolate;
+}
+
+[dir="auto" i] {
+    unicode-bidi: isolate;
+}
+
+[popover]:not(:popover-open):not(dialog[open]) {
+    display: none;
+}
+
+/* https://html.spec.whatwg.org/#phrasing-content-3: only links are styled */
+a[href] {
+    color: rgb(0, 0, 238);
+    text-decoration: underline;
+}
+
+/* https://html.spec.whatwg.org/#bidi-rendering */
+input[type=tel]:dir(ltr) {
+    direction: ltr;
+}
+
+input {
+    display: inline-block;
+}
+
+/* https://html.spec.whatwg.org/#hidden-elements */
+input[type="hidden" i] {
+    display: none !important;
+}
+
+input[type="checkbox"] {
+    width: 14px;
+    height: 14px;
+    margin: 3px 3px 3px 4px;
+}
+
+input[type="radio"] {
+    width: 14px;
+    height: 14px;
+    border-radius: 14px;
+    border: none;
+    margin: 3px 3px 3px 4px;
+}
+
+input,
+textarea {
+    border: 1px solid #999;
+    padding: 2px;
+    background-color: white;
+}
+
+input,
+select,
+button {
+    font-family: system-ui, sans-serif;
+}
+
+textarea {
+    font-family: monospace;
+}
+
+input:focus,
+textarea:focus {
+    outline: 2px solid #4D90FE;
+}
+
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+    border: 1px solid #999;
+    border-radius: 1px;
+    padding: 1px 6px;
+    color: black;
+    background-color: #EFEFEF;
+    text-align: center;
+    display: inline-block;
+}
+
+/* Button-flavored inputs clip their contents to the border box and never
+ * produce a scrolling mechanism. This matches the UA stylesheet mandated by
+ * the HTML standard (https://html.spec.whatwg.org/#form-controls) and prevents
+ * an over-long value label from contributing overflow to the page. */
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+    overflow: clip !important;
+}
+
+input[type="file"] {
+    border: none;
+    padding: 0;
+    background-color: transparent;
+}
+
+/* https://html.spec.whatwg.org/#the-fieldset-and-legend-elements */
+fieldset {
+    display: block;
+    margin-inline-start: 2px;
+    margin-inline-end: 2px;
+    border: 2px groove #c0c0c0;
+    padding-block-start: 0.35em;
+    padding-block-end: 0.625em;
+    padding-inline-start: 0.75em;
+    padding-inline-end: 0.75em;
+    min-inline-size: min-content;
+}
+
+legend {
+    display: block;
+    padding-inline-start: 2px;
+    padding-inline-end: 2px;
+}
+
+option {
+    display: none;
+}
+
+picture {
+    display: contents;
+}
+
+source {
+    display: none;
+}
+
+/* To ensure http://www.w3.org/TR/REC-html40/struct/dirlang.html#style-bidi:
+ *
+ * "When a block element that does not have a dir attribute is transformed to
+ * the style of an inline element by a style sheet, the resulting presentation
+ * should be equivalent, in terms of bidirectional formatting, to the
+ * formatting obtained by explicitly adding a dir attribute (assigned the
+ * inherited value) to the transformed element."
+ *
+ * and the rules in http://dev.w3.org/html5/spec/rendering.html#rendering
+ */
+
+address,
+article,
+aside,
+blockquote,
+body,
+caption,
+center,
+col,
+colgroup,
+dd,
+dir,
+div,
+dl,
+dt,
+fieldset,
+figcaption,
+figure,
+footer,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+header,
+hgroup,
+hr,
+html,
+legend,
+li,
+listing,
+main,
+marquee,
+menu,
+nav,
+noframes,
+ol,
+p,
+plaintext,
+pre,
+search,
+section,
+summary,
+table,
+tbody,
+td,
+tfoot,
+th,
+thead,
+tr,
+ul,
+xmp {
+    unicode-bidi: isolate;
+}
+
+bdi,
+output {
+    unicode-bidi: isolate;
+}
+
+/* We need the "bdo:-moz-has-dir-attr" bit because "bdo" has lower
+   specificity than the ":-moz-has-dir-attr" selector above. */
+bdo,
+bdo:-moz-has-dir-attr {
+    unicode-bidi: isolate-override;
+}
+
+textarea:-moz-dir-attr-like-auto,
+pre:-moz-dir-attr-like-auto {
+    unicode-bidi: plaintext;
+}
+
+/* blocks */
+
+article,
+aside,
+details,
+div,
+dt,
+figcaption,
+footer,
+form,
+header,
+hgroup,
+html,
+main,
+nav,
+search,
+section,
+summary {
+    display: block;
+}
+
+body {
+    display: block;
+    margin: 8px;
+}
+
+p,
+dl,
+multicol {
+    display: block;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+}
+
+dd {
+    display: block;
+    margin-inline-start: 40px;
+}
+
+blockquote,
+figure {
+    display: block;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 40px;
+    margin-inline-end: 40px;
+}
+
+address {
+    display: block;
+    font-style: italic;
+}
+
+center {
+    display: block;
+    text-align: -moz-center;
+}
+
+h1 {
+    display: block;
+    font-size: 2em;
+    font-weight: bold;
+    margin-block-start: .67em;
+    margin-block-end: .67em;
+}
+
+h2 {
+    display: block;
+    font-size: 1.5em;
+    font-weight: bold;
+    margin-block-start: .83em;
+    margin-block-end: .83em;
+}
+
+h3 {
+    display: block;
+    font-size: 1.17em;
+    font-weight: bold;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+}
+
+h4 {
+    display: block;
+    font-size: 1.00em;
+    font-weight: bold;
+    margin-block-start: 1.33em;
+    margin-block-end: 1.33em;
+}
+
+h5 {
+    display: block;
+    font-size: 0.83em;
+    font-weight: bold;
+    margin-block-start: 1.67em;
+    margin-block-end: 1.67em;
+}
+
+h6 {
+    display: block;
+    font-size: 0.67em;
+    font-weight: bold;
+    margin-block-start: 2.33em;
+    margin-block-end: 2.33em;
+}
+
+listing {
+    display: block;
+    font-family: -moz-fixed;
+    font-size: medium;
+    white-space: pre;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+}
+
+xmp,
+pre,
+plaintext {
+    display: block;
+    font-family: -moz-fixed;
+    white-space: pre;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+}
+
+/* tables */
+
+table {
+    display: table;
+    border-spacing: 2px;
+    border-collapse: separate;
+    /* XXXldb do we want this if we're border-collapse:collapse ? */
+    box-sizing: border-box;
+    text-indent: 0;
+}
+
+table[align="left"] {
+    float: left;
+}
+
+table[align="right"] {
+    float: right;
+    text-align: start;
+}
+
+td[nowrap],
+th[nowrap] {
+    white-space: nowrap;
+}
+
+
+/* border collapse rules */
+
+/* Set hidden if we have 'frame' or 'rules' attribute.
+     Set it on all sides when we do so there's more consistency
+     in what authors should expect */
+
+/* Put this first so 'border' and 'frame' rules can override it. */
+table[rules] {
+    border-width: thin;
+    border-style: hidden;
+}
+
+/* 'border' before 'frame' so 'frame' overrides
+      A border with a given value should, of course, pass that value
+      as the border-width in pixels -> attr mapping */
+
+/* :-moz-table-border-nonzero is like [border]:not([border="0"]) except it
+     also checks for other zero-like values according to HTML attribute
+     parsing rules */
+table:-moz-table-border-nonzero {
+    border-width: thin;
+    border-style: outset;
+}
+
+table[frame] {
+    border: thin hidden;
+}
+
+/* specificity must beat table:-moz-table-border-nonzero rule above */
+table[frame="void"] {
+    border-style: hidden;
+}
+
+table[frame="above"] {
+    border-style: outset hidden hidden hidden;
+}
+
+table[frame="below"] {
+    border-style: hidden hidden outset hidden;
+}
+
+table[frame="lhs"] {
+    border-style: hidden hidden hidden outset;
+}
+
+table[frame="rhs"] {
+    border-style: hidden outset hidden hidden;
+}
+
+table[frame="hsides"] {
+    border-style: outset hidden;
+}
+
+table[frame="vsides"] {
+    border-style: hidden outset;
+}
+
+table[frame="box"],
+table[frame="border"] {
+    border-style: outset;
+}
+
+
+/* Internal Table Borders */
+
+/* 'border' cell borders first */
+
+table:-moz-table-border-nonzero>*>tr>td,
+table:-moz-table-border-nonzero>*>tr>th,
+table:-moz-table-border-nonzero>*>td,
+table:-moz-table-border-nonzero>*>th,
+table:-moz-table-border-nonzero>td,
+table:-moz-table-border-nonzero>th {
+    border-width: thin;
+    border-style: inset;
+}
+
+/* collapse only if rules are really specified */
+table[rules]:not([rules="none"], [rules=""]) {
+    border-collapse: collapse;
+}
+
+/* only specified rules override 'border' settings
+  (increased specificity to achieve this) */
+table[rules]:not([rules=""])>tr>td,
+table[rules]:not([rules=""])>*>tr>td,
+table[rules]:not([rules=""])>tr>th,
+table[rules]:not([rules=""])>*>tr>th,
+table[rules]:not([rules=""])>td,
+table[rules]:not([rules=""])>th {
+    border-width: thin;
+    border-style: none;
+}
+
+
+table[rules][rules="none"]>tr>td,
+table[rules][rules="none"]>*>tr>td,
+table[rules][rules="none"]>tr>th,
+table[rules][rules="none"]>*>tr>th,
+table[rules][rules="none"]>td,
+table[rules][rules="none"]>th {
+    border-width: thin;
+    border-style: none;
+}
+
+table[rules][rules="all"]>tr>td,
+table[rules][rules="all"]>*>tr>td,
+table[rules][rules="all"]>tr>th,
+table[rules][rules="all"]>*>tr>th,
+table[rules][rules="all"]>td,
+table[rules][rules="all"]>th {
+    border-width: thin;
+    border-style: solid;
+}
+
+table[rules][rules="rows"]>tr,
+table[rules][rules="rows"]>*>tr {
+    border-block-start-width: thin;
+    border-block-end-width: thin;
+    border-block-start-style: solid;
+    border-block-end-style: solid;
+}
+
+
+table[rules][rules="cols"]>tr>td,
+table[rules][rules="cols"]>*>tr>td,
+table[rules][rules="cols"]>tr>th,
+table[rules][rules="cols"]>*>tr>th {
+    border-inline-start-width: thin;
+    border-inline-end-width: thin;
+    border-inline-start-style: solid;
+    border-inline-end-style: solid;
+}
+
+table[rules][rules="groups"]>colgroup {
+    border-inline-start-width: thin;
+    border-inline-end-width: thin;
+    border-inline-start-style: solid;
+    border-inline-end-style: solid;
+}
+
+table[rules][rules="groups"]>tfoot,
+table[rules][rules="groups"]>thead,
+table[rules][rules="groups"]>tbody {
+    border-block-start-width: thin;
+    border-block-end-width: thin;
+    border-block-start-style: solid;
+    border-block-end-style: solid;
+}
+
+
+/* caption inherits from table not table-outer */
+caption {
+    display: table-caption;
+    text-align: center;
+}
+
+table[align="center"]>caption {
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+}
+
+table[align="center"]>caption[align="left"]:dir(ltr) {
+    margin-inline-end: 0;
+}
+
+table[align="center"]>caption[align="left"]:dir(rtl) {
+    margin-inline-start: 0;
+}
+
+table[align="center"]>caption[align="right"]:dir(ltr) {
+    margin-inline-start: 0;
+}
+
+table[align="center"]>caption[align="right"]:dir(rtl) {
+    margin-inline-end: 0;
+}
+
+tr {
+    display: table-row;
+    vertical-align: inherit;
+}
+
+col {
+    display: table-column;
+}
+
+colgroup {
+    display: table-column-group;
+}
+
+tbody {
+    display: table-row-group;
+    vertical-align: middle;
+}
+
+thead {
+    display: table-header-group;
+    vertical-align: middle;
+}
+
+tfoot {
+    display: table-footer-group;
+    vertical-align: middle;
+}
+
+/* for XHTML tables without tbody */
+table>tr {
+    vertical-align: middle;
+}
+
+td {
+    display: table-cell;
+    vertical-align: inherit;
+    text-align: unset;
+    padding: 1px;
+}
+
+th {
+    display: table-cell;
+    vertical-align: inherit;
+    font-weight: bold;
+    padding: 1px;
+    text-align: -moz-center-or-inherit;
+}
+
+:is(tr, tbody, thead, tfoot, table)>form:-moz-is-html {
+    /* Important: don't show these forms in HTML */
+    display: none !important;
+}
+
+table[bordercolor]>tbody,
+table[bordercolor]>thead,
+table[bordercolor]>tfoot,
+table[bordercolor]>col,
+table[bordercolor]>colgroup,
+table[bordercolor]>tr,
+table[bordercolor]>*>tr,
+table[bordercolor]>tr>td,
+table[bordercolor]>*>tr>td,
+table[bordercolor]>tr>th,
+table[bordercolor]>*>tr>th {
+    border-color: inherit;
+}
+
+/* inlines */
+
+q:before {
+    content: open-quote;
+}
+
+q:after {
+    content: close-quote;
+}
+
+b,
+strong {
+    font-weight: bolder;
+}
+
+i,
+cite,
+em,
+var,
+dfn {
+    font-style: italic;
+}
+
+tt,
+code,
+kbd,
+samp {
+    font-family: -moz-fixed;
+}
+
+u,
+ins {
+    text-decoration: underline;
+}
+
+s,
+strike,
+del {
+    text-decoration: line-through;
+}
+
+big {
+    font-size: larger;
+}
+
+small {
+    font-size: smaller;
+}
+
+sub {
+    vertical-align: sub;
+    font-size: smaller;
+}
+
+sup {
+    vertical-align: super;
+    font-size: smaller;
+}
+
+nobr {
+    white-space: nowrap;
+}
+
+mark {
+    background: Mark;
+    color: MarkText;
+}
+
+/* titles */
+abbr[title],
+acronym[title] {
+    text-decoration: dotted underline;
+}
+
+/* lists */
+
+ul,
+menu,
+dir {
+    display: block;
+    list-style-type: disc;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    padding-inline-start: 40px;
+}
+
+ul,
+ol,
+menu {
+    counter-reset: list-item;
+}
+
+ol {
+    display: block;
+    list-style-type: decimal;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    padding-inline-start: 40px;
+}
+
+li {
+    display: list-item;
+    text-align: match-parent;
+}
+
+/* nested lists have no top/bottom margins */
+:is(ul, ol, dir, menu, dl) ul,
+:is(ul, ol, dir, menu, dl) ol,
+:is(ul, ol, dir, menu, dl) dir,
+:is(ul, ol, dir, menu, dl) menu,
+:is(ul, ol, dir, menu, dl) dl {
+    margin-block-start: 0;
+    margin-block-end: 0;
+}
+
+/* 2 deep unordered lists use a circle */
+:is(ol, ul, menu, dir) ul,
+:is(ol, ul, menu, dir) menu,
+:is(ol, ul, menu, dir) dir {
+    list-style-type: circle;
+}
+
+/* 3 deep (or more) unordered lists use a square */
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu,
+:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir {
+    list-style-type: square;
+}
+
+
+/* leafs */
+
+/* <hr> noshade and color attributes are handled completely by
+ * HTMLHRElement::MapAttributesIntoRule.
+ * https://html.spec.whatwg.org/#the-hr-element-2
+ */
+hr {
+    color: gray;
+    border-width: 1px;
+    border-style: inset;
+    margin-block-start: 0.5em;
+    margin-block-end: 0.5em;
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+    overflow: hidden;
+
+    /* FIXME: This is not really per spec */
+    display: block;
+}
+
+hr[size="1"] {
+    border-style: solid none none none;
+}
+
+/* Note that we only intend for the alt content to show up if the image is
+ * broken. But non-broken images/inputs will have a replaced box, and thus we
+ * won't we don't generate the pseudo-element anyways. This prevents
+ * unnecessary reframing when images become broken / non-broken. */
+input[type=image]::before,
+img::before {
+    content: -moz-alt-content !important;
+    unicode-bidi: isolate;
+}
+
+img[usemap],
+object[usemap] {
+    color: blue;
+}
+
+frameset {
+    display: block ! important;
+    overflow: clip;
+    position: static ! important;
+    float: none ! important;
+    border: none ! important;
+}
+
+frame {
+    border-radius: 0 ! important;
+}
+
+iframe {
+    border: 2px inset;
+}
+
+spacer {
+    position: static ! important;
+    float: none ! important;
+}
+
+canvas {
+    user-select: none;
+}
+
+iframe:focus-visible,
+body:focus-visible,
+html:focus-visible {
+    /* These elements historically don't show outlines when focused by default.
+   * We could consider changing that if needed. */
+    outline-style: none;
+}
+
+/* hidden elements: https://html.spec.whatwg.org/#hidden-elements
+ *
+ * Exceptions:
+ *
+ *  * area declaration needs to be !important, see below / bug 135040.  That's
+ *    hacky and broken.
+ *
+ *  * [hidden] is implemented as a presentation attribute to avoid a global
+ *    selector in a UA sheet.
+ */
+base,
+basefont,
+datalist,
+head,
+link,
+meta,
+noembed,
+noframes,
+param,
+rp,
+script,
+style,
+template,
+title {
+    display: none;
+}
+
+area {
+    /* Don't give it frames other than its imageframe */
+    display: none ! important;
+}
+
+iframe:fullscreen {
+    /* iframes in full-screen mode don't show a border. */
+    border: none !important;
+    padding: unset !important;
+}
+
+/* Details and summary
+ * https://html.spec.whatwg.org/#the-details-and-summary-elements
+ *
+ * Note that these rules need to be duplicated in details.css for the anonymous
+ * summary, which wouldn't match otherwise.
+ *
+ * The spec here says something different, see
+ * https://github.com/whatwg/html/issues/8610
+ */
+details>summary:first-of-type {
+    display: list-item;
+    counter-increment: list-item 0;
+    list-style: disclosure-closed inside;
+}
+
+details[open]>summary:first-of-type {
+    list-style-type: disclosure-open;
+}
+
+/* When a <details> is closed, only its first <summary> is shown. Everything
+ * else (including any additional summaries) is hidden. */
+details:not([open])>:not(summary:first-of-type) {
+    display: none !important;
+}
+
+/* media elements */
+video {
+    object-fit: contain;
+}
+
+video>img:-moz-native-anonymous {
+    /* Video poster images should render with the video element's "object-fit" &
+     "object-position" properties */
+    object-fit: inherit !important;
+    object-position: inherit !important;
+}
+
+audio:not([controls]) {
+    display: none !important;
+}
+
+audio[controls] {
+    /* This ensures that intrinsic sizing can reliably shrinkwrap our
+      controls (which are also always horizontal) and produce a
+      reasonable intrinsic size from them. */
+    writing-mode: horizontal-tb !important;
+}
+
+*|*::-moz-html-canvas-content {
+    display: block !important;
+    /* we want to be an absolute and fixed container */
+    transform: translate(0) !important;
+}
+
+video>.caption-box {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+/**
+ * The pseudo element won't inherit CSS styles from its direct parent, `::cue`
+ * would actually inherit styles from video because it's video's pseudo element.
+ * Therefore, we have to explicitly set some styles which are already defined
+ * in its parent element in vtt.jsm.
+ */
+::cue {
+    color: rgba(255, 255, 255, 1);
+    white-space: pre-line;
+    background-color: rgba(0, 0, 0, 0.8);
+    font: 10px sans-serif;
+    overflow-wrap: break-word;
+    /* TODO : enable unicode-bidi, right now enable it would cause incorrect
+            display direction, maybe related with bug 1558431. */
+}
+
+/* <dialog> element styles */
+
+dialog {
+    position: absolute;
+    display: block;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    margin: auto;
+    border-width: initial;
+    border-style: solid;
+    border-color: initial;
+    border-image: initial;
+    padding: 1em;
+    background-color: Canvas;
+    color: CanvasText;
+    width: -moz-fit-content;
+    height: -moz-fit-content;
+}
+
+dialog:not([open]) {
+    display: none;
+}
+
+dialog:modal {
+    -moz-top-layer: top !important;
+    position: fixed;
+    overflow: auto;
+    visibility: visible;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    max-width: calc(100% - 6px - 2em);
+    max-height: calc(100% - 6px - 2em);
+}
+
+/* https://html.spec.whatwg.org/#flow-content-3 */
+dialog::backdrop {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+marquee {
+    inline-size: -moz-available;
+    display: inline-block;
+    vertical-align: text-bottom;
+    text-align: start;
+}
+
+marquee:is([direction="up"], [direction="down"]) {
+    block-size: 200px;
+}
+
+/* Ruby */
+
+ruby {
+    display: ruby;
+}
+
+rb {
+    display: ruby-base;
+    white-space: nowrap;
+}
+
+rt {
+    display: ruby-text;
+}
+
+rtc {
+    display: ruby-text-container;
+}
+
+rtc,
+rt {
+    white-space: nowrap;
+    font-size: 50%;
+    -moz-min-font-size-ratio: 50%;
+    line-height: 1;
+}
+
+@media not (-moz-platform: windows) {
+
+    rtc,
+    rt {
+        /* The widely-used Windows font Meiryo doesn't work fine with this
+    * setting, so disable this on Windows. We should re-enable it once
+    * Microsoft fixes this issue. See bug 1164279. */
+        font-variant-east-asian: ruby;
+    }
+}
+
+rtc,
+rt {
+    text-emphasis: none;
+}
+
+rtc:lang(zh),
+rt:lang(zh) {
+    ruby-align: center;
+}
+
+rtc:lang(zh-TW),
+rt:lang(zh-TW) {
+    font-size: 30%;
+    /* bopomofo */
+    -moz-min-font-size-ratio: 30%;
+}
+
+rtc>rt {
+    font-size: unset;
+}
+
+ruby,
+rb,
+rt,
+rtc {
+    unicode-bidi: isolate;
+}
+
+/* Shadow DOM v1
+ * https://drafts.csswg.org/css-scoping/#slots-in-shadow-tree */
+slot {
+    display: contents;
+}
+
+/* Un-invert images and videos for users using inverted colors.
+ * "User agents must add the following rule to their UA style sheet"
+ * https://www.w3.org/TR/mediaqueries-5/#inverted
+ */
+@media (inverted-colors) {
+
+    img:not(picture > img),
+    picture,
+    video {
+        filter: invert(100%);
+    }
+}
+
+/* Hide noscript elements if scripting is enabled */
+@media (scripting) {
+    noscript {
+        display: none !important;
+    }
+}
+
+@media print {
+
+    input,
+    textarea,
+    select,
+    button,
+    details {
+        -moz-user-input: none !important;
+        pointer-events: none !important;
+    }
+}
+
+/* Popover UA style, https://html.spec.whatwg.org/#flow-content-3 */
+/* stylelint-disable-next-line media-query-no-invalid */
+@media (-moz-bool-pref: "dom.element.popover.enabled") {
+    [popover]:not(:popover-open):not(dialog[open]) {
+        display: none;
+    }
+
+    dialog:popover-open {
+        display: block;
+    }
+
+    [popover] {
+        position: fixed;
+        inset: 0;
+        width: fit-content;
+        height: fit-content;
+        margin: auto;
+        border: solid;
+        padding: 0.25em;
+        overflow: auto;
+        color: CanvasText;
+        background-color: Canvas;
+    }
+
+    :popover-open {
+        -moz-top-layer: top;
+    }
+
+    :popover-open::backdrop {
+        position: fixed;
+        inset: 0;
+        pointer-events: none !important;
+        background-color: transparent;
+    }
+}