Add m-esr52 at 52.6.0

28 files changed, 3191 insertions, 0 deletions

diff --git a/layout/style/res/accessiblecaret-normal@1.5x.png b/layout/style/res/accessiblecaret-normal@1.5x.png
new file mode 100644
index 000000000..8b27c3c20
--- /dev/null
+++ b/layout/style/res/accessiblecaret-normal@1.5x.png
diff --git a/layout/style/res/accessiblecaret-normal@1x.png b/layout/style/res/accessiblecaret-normal@1x.png
new file mode 100644
index 000000000..828315b9a
--- /dev/null
+++ b/layout/style/res/accessiblecaret-normal@1x.png
diff --git a/layout/style/res/accessiblecaret-normal@2.25x.png b/layout/style/res/accessiblecaret-normal@2.25x.png
new file mode 100644
index 000000000..685670e01
--- /dev/null
+++ b/layout/style/res/accessiblecaret-normal@2.25x.png
diff --git a/layout/style/res/accessiblecaret-normal@2x.png b/layout/style/res/accessiblecaret-normal@2x.png
new file mode 100644
index 000000000..bad59253f
--- /dev/null
+++ b/layout/style/res/accessiblecaret-normal@2x.png
diff --git a/layout/style/res/accessiblecaret-tilt-left@1.5x.png b/layout/style/res/accessiblecaret-tilt-left@1.5x.png
new file mode 100644
index 000000000..840b21868
--- /dev/null
+++ b/layout/style/res/accessiblecaret-tilt-left@1.5x.png
diff --git a/layout/style/res/accessiblecaret-tilt-left@1x.png b/layout/style/res/accessiblecaret-tilt-left@1x.png
new file mode 100644
index 000000000..b96f674c2
--- /dev/null
+++ b/layout/style/res/accessiblecaret-tilt-left@1x.png
diff --git a/layout/style/res/accessiblecaret-tilt-left@2.25x.png b/layout/style/res/accessiblecaret-tilt-left@2.25x.png
new file mode 100644
index 000000000..d69ca4fe4
--- /dev/null
+++ b/layout/style/res/accessiblecaret-tilt-left@2.25x.png
diff --git a/layout/style/res/accessiblecaret-tilt-left@2x.png b/layout/style/res/accessiblecaret-tilt-left@2x.png
new file mode 100644
index 000000000..f76cb333c
--- /dev/null
+++ b/layout/style/res/accessiblecaret-tilt-left@2x.png
diff --git a/layout/style/res/accessiblecaret-tilt-right@1.5x.png b/layout/style/res/accessiblecaret-tilt-right@1.5x.png
new file mode 100644
index 000000000..02dde485c
--- /dev/null
+++ b/layout/style/res/accessiblecaret-tilt-right@1.5x.png
diff --git a/layout/style/res/accessiblecaret-tilt-right@1x.png b/layout/style/res/accessiblecaret-tilt-right@1x.png
new file mode 100644
index 000000000..6a95a9664
--- /dev/null
+++ b/layout/style/res/accessiblecaret-tilt-right@1x.png
diff --git a/layout/style/res/accessiblecaret-tilt-right@2.25x.png b/layout/style/res/accessiblecaret-tilt-right@2.25x.png
new file mode 100644
index 000000000..ec6a50f0a
--- /dev/null
+++ b/layout/style/res/accessiblecaret-tilt-right@2.25x.png
diff --git a/layout/style/res/accessiblecaret-tilt-right@2x.png b/layout/style/res/accessiblecaret-tilt-right@2x.png
new file mode 100644
index 000000000..c24e66d0a
--- /dev/null
+++ b/layout/style/res/accessiblecaret-tilt-right@2x.png
diff --git a/layout/style/res/arrow-left.gif b/layout/style/res/arrow-left.gif
new file mode 100644
index 000000000..a8c200447
--- /dev/null
+++ b/layout/style/res/arrow-left.gif
diff --git a/layout/style/res/arrow-right.gif b/layout/style/res/arrow-right.gif
new file mode 100644
index 000000000..044fe8152
--- /dev/null
+++ b/layout/style/res/arrow-right.gif
diff --git a/layout/style/res/arrow.gif b/layout/style/res/arrow.gif
new file mode 100644
index 000000000..afb464122
--- /dev/null
+++ b/layout/style/res/arrow.gif
diff --git a/layout/style/res/arrowd-left.gif b/layout/style/res/arrowd-left.gif
new file mode 100644
index 000000000..227def79b
--- /dev/null
+++ b/layout/style/res/arrowd-left.gif
diff --git a/layout/style/res/arrowd-right.gif b/layout/style/res/arrowd-right.gif
new file mode 100644
index 000000000..999cf3983
--- /dev/null
+++ b/layout/style/res/arrowd-right.gif
diff --git a/layout/style/res/arrowd.gif b/layout/style/res/arrowd.gif
new file mode 100644
index 000000000..02173c700
--- /dev/null
+++ b/layout/style/res/arrowd.gif
diff --git a/layout/style/res/counterstyles.css b/layout/style/res/counterstyles.css
new file mode 100644
index 000000000..284801ef6
--- /dev/null
+++ b/layout/style/res/counterstyles.css
@@ -0,0 +1,365 @@
+/* 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/. */
+
+/* Defined in CSS Counter Styles Level 3 */
+
+/* 6 Simple Predefined Counter Styles */
+
+/* 6.1 Numeric */
+
+@counter-style decimal-leading-zero {
+  system: extends decimal;
+  pad: 2 '0';
+}
+
+@counter-style arabic-indic {
+  system: numeric;
+  symbols: \660  \661  \662  \663  \664  \665  \666  \667  \668  \669;
+}
+
+@counter-style armenian {
+  system: additive;
+  range: 1 9999;
+  additive-symbols: 9000 \554, 8000 \553, 7000 \552, 6000 \551, 5000 \550, 4000 \54F, 3000 \54E, 2000 \54D, 1000 \54C, 900 \54B, 800 \54A, 700 \549, 600 \548, 500 \547, 400 \546, 300 \545, 200 \544, 100 \543, 90 \542, 80 \541, 70 \540, 60 \53F, 50 \53E, 40 \53D, 30 \53C, 20 \53B, 10 \53A, 9 \539, 8 \538, 7 \537, 6 \536, 5 \535, 4 \534, 3 \533, 2 \532, 1 \531;
+}
+
+@counter-style upper-armenian {
+  system: additive;
+  range: 1 9999;
+  additive-symbols: 9000 \554, 8000 \553, 7000 \552, 6000 \551, 5000 \550, 4000 \54F, 3000 \54E, 2000 \54D, 1000 \54C, 900 \54B, 800 \54A, 700 \549, 600 \548, 500 \547, 400 \546, 300 \545, 200 \544, 100 \543, 90 \542, 80 \541, 70 \540, 60 \53F, 50 \53E, 40 \53D, 30 \53C, 20 \53B, 10 \53A, 9 \539, 8 \538, 7 \537, 6 \536, 5 \535, 4 \534, 3 \533, 2 \532, 1 \531;
+}
+
+@counter-style lower-armenian {
+  system: additive;
+  range: 1 9999;
+  additive-symbols: 9000 \584, 8000 \583, 7000 \582, 6000 \581, 5000 \580, 4000 \57F, 3000 \57E, 2000 \57D, 1000 \57C, 900 \57B, 800 \57A, 700 \579, 600 \578, 500 \577, 400 \576, 300 \575, 200 \574, 100 \573, 90 \572, 80 \571, 70 \570, 60 \56F, 50 \56E, 40 \56D, 30 \56C, 20 \56B, 10 \56A, 9 \569, 8 \568, 7 \567, 6 \566, 5 \565, 4 \564, 3 \563, 2 \562, 1 \561;
+}
+
+@counter-style bengali {
+  system: numeric;
+  symbols: \9E6  \9E7  \9E8  \9E9  \9EA  \9EB  \9EC  \9ED  \9EE  \9EF;
+}
+
+@counter-style cambodian {
+  system: extends khmer;
+}
+
+@counter-style khmer {
+  system: numeric;
+  symbols: \17E0  \17E1  \17E2  \17E3  \17E4  \17E5  \17E6  \17E7  \17E8  \17E9;
+}
+
+@counter-style cjk-decimal {
+  system: numeric;
+  range: 0 infinite;
+  symbols: \3007  \4E00  \4E8C  \4E09  \56DB  \4E94  \516D  \4E03  \516B  \4E5D;
+  suffix: '\3001';
+}
+
+@counter-style devanagari {
+  system: numeric;
+  symbols: \966  \967  \968  \969  \96A  \96B  \96C  \96D  \96E  \96F;
+}
+
+@counter-style georgian {
+  system: additive;
+  range: 1 19999;
+  additive-symbols: 10000 \10F5, 9000 \10F0, 8000 \10EF, 7000 \10F4, 6000 \10EE, 5000 \10ED, 4000 \10EC, 3000 \10EB, 2000 \10EA, 1000 \10E9, 900 \10E8, 800 \10E7, 700 \10E6, 600 \10E5, 500 \10E4, 400 \10F3, 300 \10E2, 200 \10E1, 100 \10E0, 90 \10DF, 80 \10DE, 70 \10DD, 60 \10F2, 50 \10DC, 40 \10DB, 30 \10DA, 20 \10D9, 10 \10D8, 9 \10D7, 8 \10F1, 7 \10D6, 6 \10D5, 5 \10D4, 4 \10D3, 3 \10D2, 2 \10D1, 1 \10D0;
+}
+
+@counter-style gujarati {
+  system: numeric;
+  symbols: \AE6  \AE7  \AE8  \AE9  \AEA  \AEB  \AEC  \AED  \AEE  \AEF;
+}
+
+@counter-style gurmukhi {
+  system: numeric;
+  symbols: \A66  \A67  \A68  \A69  \A6A  \A6B  \A6C  \A6D  \A6E  \A6F;
+}
+
+/* hebrew is not included because our builtin algorithm can generate a wider
+ * range of number in this style than what the spec defines. */
+
+@counter-style kannada {
+  system: numeric;
+  symbols: \CE6  \CE7  \CE8  \CE9  \CEA  \CEB  \CEC  \CED  \CEE  \CEF;
+}
+
+@counter-style lao {
+  system: numeric;
+  symbols: \ED0  \ED1  \ED2  \ED3  \ED4  \ED5  \ED6  \ED7  \ED8  \ED9;
+}
+
+@counter-style malayalam {
+  system: numeric;
+  symbols: \D66  \D67  \D68  \D69  \D6A  \D6B  \D6C  \D6D  \D6E  \D6F;
+}
+
+@counter-style mongolian {
+  system: numeric;
+  symbols: \1810  \1811  \1812  \1813  \1814  \1815  \1816  \1817  \1818  \1819;
+}
+
+@counter-style myanmar {
+  system: numeric;
+  symbols: \1040  \1041  \1042  \1043  \1044  \1045  \1046  \1047  \1048  \1049;
+}
+
+@counter-style oriya {
+  system: numeric;
+  symbols: \B66  \B67  \B68  \B69  \B6A  \B6B  \B6C  \B6D  \B6E  \B6F;
+}
+
+@counter-style persian {
+  system: numeric;
+  symbols: \6F0  \6F1  \6F2  \6F3  \6F4  \6F5  \6F6  \6F7  \6F8  \6F9;
+}
+
+@counter-style lower-roman {
+  system: additive;
+  range: 1 3999;
+  additive-symbols: 1000 m, 900 cm, 500 d, 400 cd, 100 c, 90 xc, 50 l, 40 xl, 10 x, 9 ix, 5 v, 4 iv, 1 i;
+}
+
+@counter-style upper-roman {
+  system: additive;
+  range: 1 3999;
+  additive-symbols: 1000 M, 900 CM, 500 D, 400 CD, 100 C, 90 XC, 50 L, 40 XL, 10 X, 9 IX, 5 V, 4 IV, 1 I;
+}
+
+@counter-style tamil {
+  system: numeric;
+  symbols: \BE6  \BE7  \BE8  \BE9  \BEA  \BEB  \BEC  \BED  \BEE  \BEF;
+}
+
+@counter-style telugu {
+  system: numeric;
+  symbols: \C66  \C67  \C68  \C69  \C6A  \C6B  \C6C  \C6D  \C6E  \C6F;
+}
+
+@counter-style thai {
+  system: numeric;
+  symbols: \E50  \E51  \E52  \E53  \E54  \E55  \E56  \E57  \E58  \E59;
+}
+
+@counter-style tibetan {
+  system: numeric;
+  symbols: \F20  \F21  \F22  \F23  \F24  \F25  \F26  \F27  \F28  \F29;
+}
+
+/* 6.2 Alphabetic */
+
+@counter-style lower-alpha {
+  system: alphabetic;
+  symbols: a b c d e f g h i j k l m n o p q r s t u v w x y z;
+}
+
+@counter-style lower-latin {
+  system: extends lower-alpha;
+}
+
+@counter-style upper-alpha {
+  system: alphabetic;
+  symbols: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z;
+}
+
+@counter-style upper-latin {
+  system: extends upper-alpha;
+}
+
+@counter-style cjk-heavenly-stem {
+  system: alphabetic;
+  symbols: \7532  \4E59  \4E19  \4E01  \620A  \5DF1  \5E9A  \8F9B  \58EC  \7678;
+  fallback: cjk-decimal;
+  suffix: '\3001';
+}
+
+@counter-style cjk-earthly-branch {
+  system: alphabetic;
+  symbols: \5B50  \4E11  \5BC5  \536F  \8FB0  \5DF3  \5348  \672A  \7533  \9149  \620C  \4EA5;
+  fallback: cjk-decimal;
+  suffix: '\3001';
+}
+
+@counter-style lower-greek {
+  system: alphabetic;
+  symbols: \3B1  \3B2  \3B3  \3B4  \3B5  \3B6  \3B7  \3B8  \3B9  \3BA  \3BB  \3BC  \3BD  \3BE  \3BF  \3C0  \3C1  \3C3  \3C4  \3C5  \3C6  \3C7  \3C8  \3C9;
+}
+
+@counter-style hiragana {
+  system: alphabetic;
+  symbols: \3042  \3044  \3046  \3048  \304A  \304B  \304D  \304F  \3051  \3053  \3055  \3057  \3059  \305B  \305D  \305F  \3061  \3064  \3066  \3068  \306A  \306B  \306C  \306D  \306E  \306F  \3072  \3075  \3078  \307B  \307E  \307F  \3080  \3081  \3082  \3084  \3086  \3088  \3089  \308A  \308B  \308C  \308D  \308F  \3090  \3091  \3092  \3093;
+  suffix: '\3001';
+}
+
+@counter-style hiragana-iroha {
+  system: alphabetic;
+  symbols: \3044  \308D  \306F  \306B  \307B  \3078  \3068  \3061  \308A  \306C  \308B  \3092  \308F  \304B  \3088  \305F  \308C  \305D  \3064  \306D  \306A  \3089  \3080  \3046  \3090  \306E  \304A  \304F  \3084  \307E  \3051  \3075  \3053  \3048  \3066  \3042  \3055  \304D  \3086  \3081  \307F  \3057  \3091  \3072  \3082  \305B  \3059;
+  suffix: '\3001';
+}
+
+@counter-style katakana {
+  system: alphabetic;
+  symbols: \30A2  \30A4  \30A6  \30A8  \30AA  \30AB  \30AD  \30AF  \30B1  \30B3  \30B5  \30B7  \30B9  \30BB  \30BD  \30BF  \30C1  \30C4  \30C6  \30C8  \30CA  \30CB  \30CC  \30CD  \30CE  \30CF  \30D2  \30D5  \30D8  \30DB  \30DE  \30DF  \30E0  \30E1  \30E2  \30E4  \30E6  \30E8  \30E9  \30EA  \30EB  \30EC  \30ED  \30EF  \30F0  \30F1  \30F2  \30F3;
+  suffix: '\3001';
+}
+
+@counter-style katakana-iroha {
+  system: alphabetic;
+  symbols: \30A4  \30ED  \30CF  \30CB  \30DB  \30D8  \30C8  \30C1  \30EA  \30CC  \30EB  \30F2  \30EF  \30AB  \30E8  \30BF  \30EC  \30BD  \30C4  \30CD  \30CA  \30E9  \30E0  \30A6  \30F0  \30CE  \30AA  \30AF  \30E4  \30DE  \30B1  \30D5  \30B3  \30A8  \30C6  \30A2  \30B5  \30AD  \30E6  \30E1  \30DF  \30B7  \30F1  \30D2  \30E2  \30BB  \30B9;
+  suffix: '\3001';
+}
+
+/* 6.3 Symbolic */
+
+/* symbolic counter styles are not included because they will be drew directly
+ * by the program instead of use alternative symbols defined in the spec */
+
+/* 7 Complex Predefined Counter Styles */
+
+/* only alias is included as other complex counter styles will be generated by
+ * specific algorithms to support the extended range. */
+
+@counter-style cjk-ideographic {
+  system: extends trad-chinese-informal;
+}
+
+/* Mozilla-specific counter styles */
+
+/* Numeric */
+
+@counter-style -moz-arabic-indic {
+  system: extends arabic-indic;
+}
+
+@counter-style -moz-persian {
+  system: extends persian;
+}
+
+@counter-style -moz-urdu {
+  system: extends persian;
+}
+
+@counter-style -moz-devanagari {
+  system: extends devanagari;
+}
+
+@counter-style -moz-bengali {
+  system: extends bengali;
+}
+
+@counter-style -moz-gurmukhi {
+  system: extends gurmukhi;
+}
+
+@counter-style -moz-gujarati {
+  system: extends gujarati;
+}
+
+@counter-style -moz-oriya {
+  system: extends oriya;
+}
+
+@counter-style -moz-tamil {
+  system: extends tamil;
+}
+
+@counter-style -moz-telugu {
+  system: extends telugu;
+}
+
+@counter-style -moz-kannada {
+  system: extends kannada;
+}
+
+@counter-style -moz-malayalam {
+  system: extends malayalam;
+}
+
+@counter-style -moz-thai {
+  system: extends thai;
+}
+
+@counter-style -moz-lao {
+  system: extends lao;
+}
+
+@counter-style -moz-myanmar {
+  system: extends myanmar;
+}
+
+@counter-style -moz-khmer {
+  system: extends khmer;
+}
+
+/* Alphabetic */
+
+@counter-style -moz-cjk-heavenly-stem {
+  system: extends cjk-heavenly-stem;
+}
+@counter-style -moz-cjk-earthly-branch {
+  system: extends cjk-earthly-branch;
+}
+
+@counter-style -moz-hangul {
+  system: alphabetic;
+  symbols: \AC00  \B098  \B2E4  \B77C  \B9C8  \BC14  \C0AC  \C544  \C790  \CC28  \CE74  \D0C0  \D30C  \D558;
+  suffix: ',';
+}
+@counter-style -moz-hangul-consonant {
+  system: alphabetic;
+  symbols: \3131  \3134  \3137  \3139  \3141  \3142  \3145  \3147  \3148  \314A  \314B  \314C  \314D  \314E;
+  suffix: ',';
+}
+
+/* Ge'ez set of Ethiopic ordered list. There are other locale-dependent sets.
+ * For the time being, let's implement two Ge'ez sets only
+ * per Momoi san's suggestion in bug 102252. 
+ * For details, refer to http://www.ethiopic.org/Collation/OrderedLists.html. */
+@counter-style -moz-ethiopic-halehame {
+  system: alphabetic;
+  symbols: \1200  \1208  \1210  \1218  \1220  \1228  \1230  \1240  \1260  \1270  \1280  \1290  \12A0  \12A8  \12C8  \12D0  \12D8  \12E8  \12F0  \1308  \1320  \1330  \1338  \1340  \1348  \1350;
+}
+@counter-style -moz-ethiopic-halehame-am {
+  system: alphabetic;
+  symbols: \1200  \1208  \1210  \1218  \1220  \1228  \1230  \1238  \1240  \1260  \1270  \1278  \1280  \1290  \1298  \12A0  \12A8  \12B8  \12C8  \12D0  \12D8  \12E0  \12E8  \12F0  \1300  \1308  \1320  \1328  \1330  \1338  \1340  \1348  \1350;
+}
+@counter-style -moz-ethiopic-halehame-ti-er {
+  system: alphabetic;
+  symbols: \1200  \1208  \1210  \1218  \1228  \1230  \1238  \1240  \1250  \1260  \1270  \1278  \1290  \1298  \12A0  \12A8  \12B8  \12C8  \12D0  \12D8  \12E0  \12E8  \12F0  \1300  \1308  \1320  \1328  \1330  \1338  \1348  \1350;
+}
+@counter-style -moz-ethiopic-halehame-ti-et {
+  system: alphabetic;
+  symbols: \1200  \1208  \1210  \1218  \1220  \1228  \1230  \1238  \1240  \1250  \1260  \1270  \1278  \1280  \1290  \1298  \12A0  \12A8  \12B8  \12C8  \12D0  \12D8  \12E0  \12E8  \12F0  \1300  \1308  \1320  \1328  \1330  \1338  \1340  \1348  \1350;
+}
+
+/* Alias */
+
+@counter-style -moz-trad-chinese-informal {
+  system: extends trad-chinese-informal;
+}
+
+@counter-style -moz-trad-chinese-formal {
+  system: extends trad-chinese-formal;
+}
+
+@counter-style -moz-simp-chinese-informal {
+  system: extends simp-chinese-informal;
+}
+
+@counter-style -moz-simp-chinese-formal {
+  system: extends simp-chinese-formal;
+}
+
+@counter-style -moz-japanese-informal {
+  system: extends japanese-informal;
+}
+
+@counter-style -moz-japanese-formal {
+  system: extends japanese-formal;
+}
+
+@counter-style -moz-ethiopic-numeric {
+  system: extends ethiopic-numeric;
+}
diff --git a/layout/style/res/forms.css b/layout/style/res/forms.css
new file mode 100644
index 000000000..f045540b1
--- /dev/null
+++ b/layout/style/res/forms.css
@@ -0,0 +1,1137 @@
+/* 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/. */
+
+/**
+  Styles for old GFX form widgets
+ **/
+
+
+@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);
+
+*|*::-moz-fieldset-content {
+  display: block; /* nsRuleNode::ComputeDisplayData overrules this in some cases */
+  unicode-bidi: inherit;
+  text-overflow: inherit;
+  overflow: inherit;
+  overflow-clip-box: inherit;
+  padding: inherit;
+  block-size: 100%; /* Need this so percentage block-sizes of kids work right */
+  /* Please keep the Multicol/Flex/Grid/Align sections below in sync with
+     ::-moz-scrolled-content in ua.css and ::-moz-button-content below. */
+  /* Multicol container */
+  -moz-column-count: inherit;
+  -moz-column-width: inherit;
+  -moz-column-gap: inherit;
+  -moz-column-rule: inherit;
+  -moz-column-fill: inherit;
+  /* Flex container */
+  flex-direction: inherit;
+  flex-wrap: inherit;
+  /* -webkit-box container (aliased from -webkit versions to -moz versions) */
+  -moz-box-orient: inherit;
+  -moz-box-direction: inherit;
+  -moz-box-pack: inherit;
+  -moz-box-align: inherit;
+  /* Grid container */
+  grid-auto-columns: inherit;
+  grid-auto-rows: inherit;
+  grid-auto-flow: inherit;
+  grid-column-gap: inherit;
+  grid-row-gap: inherit;
+  grid-template-areas: inherit;
+  grid-template-columns: inherit;
+  grid-template-rows: inherit;
+  /* CSS Align */
+  align-content: inherit;
+  align-items: inherit;
+  justify-content: inherit;
+  justify-items: inherit;
+}
+
+/* miscellaneous form elements */
+
+fieldset > legend {
+  padding-inline-start: 2px;
+  padding-inline-end: 2px;
+  inline-size: -moz-fit-content;
+}
+
+legend {
+  display: block;
+}
+
+fieldset {
+  display: block;
+  margin-inline-start: 2px;
+  margin-inline-end: 2px;
+  padding-block-start: 0.35em;
+  padding-block-end: 0.75em;
+  padding-inline-start: 0.625em;
+  padding-inline-end: 0.625em;
+  border: 2px groove ThreeDLightShadow;
+}
+
+label {
+  cursor: default;
+}
+
+/* default inputs, text inputs, and selects */
+
+/* Note: Values in nsNativeTheme IsWidgetStyled function
+   need to match textfield background/border values here */
+
+input {
+  -moz-appearance: textfield;
+  /* The sum of border and padding on block-start and block-end
+     must be the same here, for buttons, and for <select> (including its
+     internal padding magic) */
+  padding: 1px;
+  border: 2px inset ThreeDLightShadow;
+  background-color: -moz-Field;
+  color: -moz-FieldText;
+  font: -moz-field;
+  text-rendering: optimizeLegibility;
+  line-height: normal;
+  text-align: start;
+  text-transform: none;
+  word-spacing: normal;
+  letter-spacing: normal;
+  cursor: text;
+  -moz-binding: url("chrome://global/content/platformHTMLBindings.xml#inputFields");
+  text-indent: 0;
+  -moz-user-select: text;
+  text-shadow: none;
+  overflow-clip-box: content-box;
+}
+
+input > .anonymous-div,
+input::placeholder {
+  word-wrap: normal !important;
+  /* Make the line-height equal to the available height */
+  line-height: -moz-block-height;
+}
+
+@-moz-document url-prefix(chrome://) {
+  input.uri-element-right-align:-moz-locale-dir(rtl) {
+    direction: ltr !important;
+    text-align: right !important;
+  }
+
+  /* Make sure that the location bar's alignment in RTL mode changes according
+     to the input box direction if the user switches the text direction using
+     cmd_switchTextDirection (which applies a dir attribute to the <input>). */
+  input.uri-element-right-align[dir=ltr]:-moz-locale-dir(rtl) {
+    text-align: left !important;
+  }
+}
+
+textarea {
+  margin-block-start: 1px;
+  margin-block-end: 1px;
+  border: 2px inset ThreeDLightShadow;
+  /* The 1px inline padding is for parity with Win/IE */
+  padding-inline-start: 1px;
+  padding-inline-end: 1px;
+  background-color: -moz-Field;
+  color: -moz-FieldText;
+  font: medium -moz-fixed;
+  text-rendering: optimizeLegibility;
+  text-align: start;
+  text-transform: none;
+  word-spacing: normal;
+  letter-spacing: normal;
+  vertical-align: text-bottom;
+  cursor: text;
+  resize: both;
+  -moz-binding: url("chrome://global/content/platformHTMLBindings.xml#textAreas");
+  -moz-appearance: textfield-multiline;
+  text-indent: 0;
+  -moz-user-select: text;
+  text-shadow: none;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-clip-box: content-box;
+}
+
+textarea > scrollbar {
+  cursor: default;
+}
+
+textarea > .anonymous-div,
+input > .anonymous-div,
+input::placeholder,
+textarea::placeholder {
+  overflow: auto;
+  border: 0px !important;
+  padding: inherit !important;
+  margin: 0px;
+  text-decoration: inherit;
+  text-decoration-color: inherit;
+  text-decoration-style: inherit;
+  display: inline-block;
+  ime-mode: inherit;
+  resize: inherit;
+  -moz-control-character-visibility: visible;
+  overflow-clip-box: inherit;
+}
+
+input > .anonymous-div,
+input::placeholder {
+  white-space: pre;
+}
+
+input > .anonymous-div.wrap {
+  white-space: pre-wrap;
+}
+textarea > .anonymous-div.inherit-overflow,
+input > .anonymous-div.inherit-overflow {
+  overflow: inherit;
+}
+
+input::placeholder,
+textarea::placeholder {
+  /*
+   * Changing display to inline can leads to broken behaviour and will assert.
+   */
+  display: inline-block !important;
+
+  /*
+   * Changing resize would display a broken behaviour and will assert.
+   */
+  resize: none !important;
+
+  overflow: hidden !important;
+
+  /*
+   * The placeholder should be ignored by pointer otherwise, we might have some
+   * unexpected behavior like the resize handle not being selectable.
+   */
+  pointer-events: none !important;
+
+  opacity: 0.54;
+}
+
+textarea::placeholder {
+  white-space: pre-wrap !important;
+}
+
+input:-moz-read-write,
+textarea:-moz-read-write {
+  -moz-user-modify: read-write !important;
+}
+
+select {
+  margin: 0;
+  border-color: ThreeDLightShadow;
+  background-color: -moz-Combobox;
+  color: -moz-ComboboxText;
+  font: -moz-list;
+  /*
+   * Note that the "UA !important" tests in
+   * layout/style/test/test_animations.html depend on this rule, because
+   * they need some UA !important rule to test.  If this changes, use a
+   * different one there.
+   */
+  line-height: normal !important;
+  white-space: nowrap !important;
+  word-wrap: normal !important;
+  text-align: start;
+  cursor: default;
+  box-sizing: border-box;
+  -moz-user-select: none;
+  -moz-appearance: menulist;
+  border-width: 2px;
+  border-style: inset;
+  text-indent: 0;
+  overflow: -moz-hidden-unscrollable;
+  text-shadow: none;
+  /* No text-decoration reaching inside, by default */
+  display: inline-block;
+  page-break-inside: avoid;
+  overflow-clip-box: padding-box !important; /* bug 992447 */
+}
+
+/* Need the "select[size][multiple]" selector to override the settings on
+   'select[size="1"]', eg if one has <select size="1" multiple> */
+
+select[size],
+select[multiple],
+select[size][multiple] {
+  /* Different alignment and padding for listbox vs combobox */
+  background-color: -moz-Field;
+  color: -moz-FieldText;
+  vertical-align: text-bottom;
+  padding-block-start: 1px;
+  padding-block-end: 1px;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  -moz-appearance: listbox;
+}
+
+select[size="0"],
+select[size="1"] {
+  /* Except this is not a listbox */
+  background-color: -moz-Combobox;
+  color: -moz-ComboboxText;
+  vertical-align: baseline;
+  padding: 0;
+  -moz-appearance: menulist;
+}
+
+select > button {
+  inline-size: 12px;
+  white-space: nowrap;
+  position: static !important;
+  background-image: url("arrow.gif") !important;
+  background-repeat: no-repeat !important;
+  background-position: center !important;
+  -moz-appearance: menulist-button;
+
+  /* Make sure to size correctly if the combobox has a non-auto height. */
+  block-size: 100% ! important;
+  box-sizing: border-box ! important;
+
+  /*
+    Make sure to align properly with the display frame.  Note that we
+    want the baseline of the combobox to match the baseline of the
+    display frame, so the dropmarker is what gets the vertical-align.
+  */
+  vertical-align: top !important;
+}
+
+select > button:active {
+  background-image: url("arrowd.gif") !important;
+}
+
+select > button[orientation="left"] {
+  background-image: url("arrow-left.gif") !important;
+}
+
+select > button[orientation="right"] {
+  background-image: url("arrow-right.gif") !important;
+}
+
+select > button[orientation="left"]:active {
+  background-image: url("arrowd-left.gif") !important;
+}
+
+select > button[orientation="right"]:active {
+  background-image: url("arrowd-right.gif") !important;
+}
+
+select:empty {
+  inline-size: 2.5em;
+}
+
+*|*::-moz-display-comboboxcontrol-frame {
+  overflow: -moz-hidden-unscrollable;
+  /* This block-start/end padding plus the combobox block-start/end border need to
+     add up to the block-start/end borderpadding of text inputs and buttons */
+  padding-block-start: 1px;
+  padding-block-end: 1px;
+  padding-inline-start: 4px;
+  padding-inline-end: 0;
+  color: inherit;
+  white-space: nowrap;
+  text-align: inherit;
+  -moz-user-select: none;
+  /* Make sure to size correctly if the combobox has a non-auto block-size. */
+  block-size: 100% ! important;
+  box-sizing: border-box ! important;
+  line-height: -moz-block-height;
+}
+
+option {
+  display: block;
+  float: none !important;
+  position: static !important;
+  min-block-size: 1em;
+  line-height: normal !important;
+  -moz-user-select: none;
+  text-indent: 0;
+  white-space: nowrap !important;
+  word-wrap: normal !important;
+  text-align: match-parent;
+}
+
+select > option {
+  padding-block-start : 0;
+  padding-block-end: 0;
+  padding-inline-start: 3px;
+  padding-inline-end: 5px;
+}
+
+option:checked {
+  background-color: -moz-html-cellhighlight !important;
+  color: -moz-html-cellhighlighttext !important;
+}
+
+select:focus > option:checked,
+select:focus > optgroup > option:checked {
+  background-color: Highlight ! important;
+  color: HighlightText ! important;
+}
+
+optgroup {
+  display: block;
+  float: none !important;
+  position: static !important;
+  font: -moz-list;
+  line-height: normal !important;
+  font-style: italic;
+  font-weight: bold;
+  font-size: inherit;
+  -moz-user-select: none;
+  text-indent: 0;
+  white-space: nowrap !important;
+  word-wrap: normal !important;
+}
+
+optgroup > option {
+  padding-inline-start: 20px;
+  font-style: normal;
+  font-weight: normal;
+}
+
+optgroup:before {
+  display: block;
+  content: attr(label);
+}
+
+*|*::-moz-dropdown-list {
+  z-index: 2147483647;
+  background-color: inherit;
+  -moz-user-select: none;
+  position: static !important;
+  float: none !important;
+
+  /*
+   * We can't change the padding here, because that would affect our
+   * intrinsic inline-size, since we scroll.  But at the same time, we want
+   * to make sure that our inline-start border+padding matches the inline-start
+   * border+padding of a combobox so that our scrollbar will line up
+   * with the dropmarker.  So set our inline-start border to 2px.
+   */
+  border: 1px outset black !important;
+  border-inline-start-width: 2px ! important;
+}
+
+input:disabled,
+textarea:disabled,
+option:disabled,
+optgroup:disabled,
+select:disabled:disabled /* Need the pseudo-class twice to have the specificity
+                            be at least the same as select[size][multiple] above */
+{
+  -moz-user-input: disabled;
+  color: GrayText;
+  background-color: ThreeDLightShadow;
+  cursor: inherit;
+}
+
+input:disabled,
+textarea:disabled {
+  cursor: default;
+}
+
+option:disabled,
+optgroup:disabled {
+  background-color: transparent;
+}
+
+/* hidden inputs */
+input[type="hidden"] {
+  -moz-appearance: none;
+  display: none !important;
+  padding: 0;
+  border: 0;
+  cursor: auto;
+  -moz-user-focus: ignore;
+  -moz-binding: none;
+}
+
+/* image buttons */
+input[type="image"] {
+  -moz-appearance: none;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  font-family: sans-serif;
+  font-size: small;
+  cursor: pointer;
+  -moz-binding: none;
+}
+
+input[type="image"]:disabled {
+  cursor: inherit;
+}
+
+input[type="image"]:-moz-focusring {
+  /* Don't specify the outline-color, we should always use initial value. */
+  outline: 1px dotted;
+}
+
+/* file selector */
+input[type="file"] {
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  overflow-clip-box: padding-box;
+  color: inherit;
+
+  /* Revert rules which apply on all inputs. */
+  -moz-appearance: none;
+  -moz-binding: none;
+  cursor: default;
+
+  border: none;
+  background-color: transparent;
+  padding: 0;
+}
+
+input[type="file"] > xul|label {
+  min-inline-size: 12em;
+  padding-inline-start: 5px;
+  text-align: match-parent;
+
+  color: inherit;
+  font-size: inherit;
+  letter-spacing: inherit;
+
+  /*
+   * Force the text to have LTR directionality. Otherwise filenames containing
+   * RTL characters will be reordered with chaotic results.
+   */
+  direction: ltr !important;
+}
+
+/* button part of file selector */
+input[type="file"] > button[type="button"] {
+  block-size: inherit;
+  font-size: inherit;
+  letter-spacing: inherit;
+  cursor: inherit;
+}
+
+/* colored part of the color selector button */
+input[type="color"]:-moz-system-metric(color-picker-available)::-moz-color-swatch {
+  width: 100%;
+  height: 100%;
+  min-width: 3px;
+  min-height: 3px;
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+  box-sizing: border-box;
+  border: 1px solid grey;
+  display: block;
+}
+
+/* Try to make RTL <input type='file'> look nicer. */
+/* TODO: find a better solution than forcing direction: ltr on all file
+   input labels and remove this override -- bug 1161482 */
+input[type="file"]:dir(rtl) > xul|label {
+  padding-inline-start: 0px;
+  padding-inline-end: 5px;
+}
+
+/* radio buttons */
+input[type="radio"] {
+  -moz-appearance: radio;
+  margin-block-start: 3px;
+  margin-block-end: 0px;
+  margin-inline-start: 5px;
+  margin-inline-end: 3px;
+  border-radius: 100% !important;
+}
+
+/* check boxes */
+input[type="checkbox"] {
+  -moz-appearance: checkbox;
+  margin-block-start: 3px;
+  margin-block-end: 3px;
+  margin-inline-start: 4px;
+  margin-inline-end: 3px;
+  border-radius: 0 !important;
+}
+
+/* common features of radio buttons and check boxes */
+
+/* NOTE: The width, height, border-width, and padding here must all
+   add up the way nsFormControlFrame::GetIntrinsic(Width|Height)
+   expects them to, or they will not come out with total width equal
+   to total height on sites that set their 'width' or 'height' to 'auto'.
+   (Should we maybe set !important on width and height, then?)  */
+input[type="radio"],
+input[type="checkbox"] {
+  box-sizing: border-box;
+  inline-size: 13px;
+  block-size: 13px;
+  cursor: default;
+  padding: 0 !important;
+  -moz-binding: none;
+  /* same colors as |input| rule, but |!important| this time. */
+  background-color: -moz-Field ! important;
+  color: -moz-FieldText ! important;
+  border: 2px inset ThreeDLightShadow ! important;
+}
+
+input[type="radio"]:disabled,
+input[type="radio"]:disabled:active,
+input[type="radio"]:disabled:hover,
+input[type="radio"]:disabled:hover:active,
+input[type="checkbox"]:disabled,
+input[type="checkbox"]:disabled:active,
+input[type="checkbox"]:disabled:hover,
+input[type="checkbox"]:disabled:hover:active {
+  padding: 1px;
+  border: 1px inset ThreeDShadow ! important;
+  /* same as above, but !important */
+  color: GrayText ! important;
+  background-color: ThreeDFace ! important;
+  cursor: inherit;
+}
+
+% On Mac, the native theme takes care of this.
+% See nsNativeThemeCocoa::ThemeDrawsFocusForWidget.
+%ifndef XP_MACOSX
+input[type="checkbox"]:-moz-focusring,
+input[type="radio"]:-moz-focusring {
+  /* Don't specify the outline-color, we should always use initial value. */
+  outline: 1px dotted;
+}
+%endif
+
+input[type="checkbox"]:hover:active,
+input[type="radio"]:hover:active {
+  background-color: ThreeDFace ! important;
+  border-style: inset !important;
+}
+
+input[type="search"] {
+  box-sizing: border-box;
+}
+
+/* buttons */
+
+/* Note: Values in nsNativeTheme IsWidgetStyled function
+   need to match button background/border values here */
+
+/* Non text-related properties for buttons: these ones are shared with
+   input[type="color"] */
+button,
+input[type="color"]:-moz-system-metric(color-picker-available),
+input[type="reset"],
+input[type="button"],
+input[type="submit"] {
+  -moz-appearance: button;
+  /* The sum of border and padding on block-start and block-end
+     must be the same here, for text inputs, and for <select>.  For
+     buttons, make sure to include the -moz-focus-inner border/padding. */
+  padding-block-start: 0px;
+  padding-inline-end: 6px;
+  padding-block-end: 0px;
+  padding-inline-start: 6px;
+  border: 2px outset ThreeDLightShadow;
+  background-color: ButtonFace;
+  cursor: default;
+  box-sizing: border-box;
+  -moz-user-select: none;
+  -moz-binding: none;
+}
+
+/* Text-related properties for buttons: these ones are not shared with
+   input[type="color"] */
+button,
+input[type="reset"],
+input[type="button"],
+input[type="submit"] {
+  color: ButtonText;
+  font: -moz-button;
+  line-height: normal;
+  white-space: pre;
+  text-align: center;
+  text-shadow: none;
+  overflow-clip-box: padding-box;
+}
+
+input[type="color"]:-moz-system-metric(color-picker-available) {
+  inline-size: 64px;
+  block-size: 23px;
+}
+
+button {
+  /* Buttons should lay out like "normal" html, mostly */
+  white-space: inherit;
+  text-indent: 0;
+  /* But no text-decoration reaching inside, by default */
+  display: inline-block;
+}
+
+*|*::-moz-button-content {
+  display: block;
+  /* Please keep the Multicol/Flex/Grid/Align sections below in sync with
+     ::-moz-scrolled-content in ua.css and ::-moz-fieldset-content above. */
+  /* Multicol container */
+  -moz-column-count: inherit;
+  -moz-column-width: inherit;
+  -moz-column-gap: inherit;
+  -moz-column-rule: inherit;
+  -moz-column-fill: inherit;
+  /* Flex container */
+  flex-direction: inherit;
+  flex-wrap: inherit;
+  /* -webkit-box container (aliased from -webkit versions to -moz versions) */
+  -moz-box-orient: inherit;
+  -moz-box-direction: inherit;
+  -moz-box-pack: inherit;
+  -moz-box-align: inherit;
+  /* Grid container */
+  grid-auto-columns: inherit;
+  grid-auto-rows: inherit;
+  grid-auto-flow: inherit;
+  grid-column-gap: inherit;
+  grid-row-gap: inherit;
+  grid-template-areas: inherit;
+  grid-template-columns: inherit;
+  grid-template-rows: inherit;
+  /* CSS Align */
+  align-content: inherit;
+  align-items: inherit;
+  justify-content: inherit;
+  justify-items: inherit;
+}
+
+button:hover,
+input[type="color"]:-moz-system-metric(color-picker-available):hover,
+input[type="reset"]:hover,
+input[type="button"]:hover,
+input[type="submit"]:hover {
+  background-color: -moz-buttonhoverface;
+}
+
+button:hover,
+input[type="reset"]:hover,
+input[type="button"]:hover,
+input[type="submit"]:hover {
+  color: -moz-buttonhovertext;
+}
+
+button:active:hover,
+input[type="color"]:-moz-system-metric(color-picker-available):active:hover,
+input[type="reset"]:active:hover,
+input[type="button"]:active:hover,
+input[type="submit"]:active:hover {
+%ifndef XP_MACOSX
+  padding-block-start: 0px;
+  padding-inline-end: 5px;
+  padding-block-end: 0px;
+  padding-inline-start: 7px;
+%endif
+  border-style: inset;
+  background-color: ButtonFace;
+}
+
+button:active:hover,
+input[type="reset"]:active:hover,
+input[type="button"]:active:hover,
+input[type="submit"]:active:hover {
+  color: ButtonText;
+}
+
+button::-moz-focus-inner,
+input[type="color"]:-moz-system-metric(color-picker-available)::-moz-focus-inner,
+input[type="reset"]::-moz-focus-inner,
+input[type="button"]::-moz-focus-inner,
+input[type="submit"]::-moz-focus-inner,
+input[type="file"] > button[type="button"]::-moz-focus-inner {
+  padding-block-start: 0px;
+  padding-inline-end: 2px;
+  padding-block-end: 0px;
+  padding-inline-start: 2px;
+  border: 1px dotted transparent;
+}
+
+button:-moz-focusring::-moz-focus-inner,
+input[type="color"]:-moz-system-metric(color-picker-available):-moz-focusring::-moz-focus-inner,
+input[type="reset"]:-moz-focusring::-moz-focus-inner,
+input[type="button"]:-moz-focusring::-moz-focus-inner,
+input[type="submit"]:-moz-focusring::-moz-focus-inner,
+input[type="file"] > button[type="button"]:-moz-focusring::-moz-focus-inner {
+  border-color: ButtonText;
+}
+
+button:disabled:active, button:disabled,
+input[type="color"]:-moz-system-metric(color-picker-available):disabled:active,
+input[type="color"]:-moz-system-metric(color-picker-available):disabled,
+input[type="reset"]:disabled:active,
+input[type="reset"]:disabled,
+input[type="button"]:disabled:active,
+input[type="button"]:disabled,
+select:disabled > button,
+select:disabled > button,
+input[type="submit"]:disabled:active,
+input[type="submit"]:disabled {
+  /* The sum of border and padding on block-start and block-end
+     must be the same here and for text inputs */
+  padding-block-start: 0px;
+  padding-inline-end: 6px;
+  padding-block-end: 0px;
+  padding-inline-start: 6px;
+  border: 2px outset ThreeDLightShadow;
+  cursor: inherit;
+}
+
+button:disabled:active, button:disabled,
+input[type="reset"]:disabled:active,
+input[type="reset"]:disabled,
+input[type="button"]:disabled:active,
+input[type="button"]:disabled,
+select:disabled > button,
+select:disabled > button,
+input[type="submit"]:disabled:active,
+input[type="submit"]:disabled {
+  color: GrayText;
+}
+
+ /*
+  * Make form controls inherit 'unicode-bidi' transparently as required by
+  *  their various anonymous descendants and pseudo-elements:
+  *
+  * <textarea> and <input type="text">:
+  *  inherit into the XULScroll frame with class 'anonymous-div' which is a
+  *  child of the text control.
+  *
+  * Buttons (either <button>, <input type="submit">, <input type="button">
+  *          or <input type="reset">)
+  *  inherit into the ':-moz-button-content' pseudo-element.
+  *
+  * <select>:
+  *  inherit into the ':-moz-display-comboboxcontrol-frame' pseudo-element and
+  *  the <optgroup>'s ':before' pseudo-element, which is where the label of
+  *  the <optgroup> gets displayed. The <option>s don't use anonymous boxes,
+  *  so they need no special rules.
+  */
+textarea > .anonymous-div,
+input > .anonymous-div,
+input::placeholder,
+textarea::placeholder,
+*|*::-moz-button-content,
+*|*::-moz-display-comboboxcontrol-frame,
+optgroup:before {
+  unicode-bidi: inherit;
+  text-overflow: inherit;
+}
+
+/**
+ * Set default style for invalid elements.
+ */
+:not(output):-moz-ui-invalid {
+  box-shadow: 0 0 1.5px 1px red;
+}
+
+:not(output):-moz-ui-invalid:-moz-focusring {
+  box-shadow: 0 0 2px 2px rgba(255,0,0,0.4);
+}
+
+output:-moz-ui-invalid {
+  color: red;
+}
+
+@media print {
+  input, textarea, select, button {
+    -moz-user-input: none !important;
+  }
+
+  input[type="file"] { height: 2em; }
+}
+
+progress {
+  -moz-appearance: progressbar;
+  display: inline-block;
+  vertical-align: -0.2em;
+
+  /* Default style in case of there is -moz-appearance: none; */
+  border: 2px solid;
+  /* #e6e6e6 is a light gray. */
+  -moz-border-top-colors: ThreeDShadow #e6e6e6;
+  -moz-border-right-colors: ThreeDHighlight #e6e6e6;
+  -moz-border-bottom-colors: ThreeDHighlight #e6e6e6;
+  -moz-border-left-colors: ThreeDShadow #e6e6e6;
+  background-color: #e6e6e6;
+}
+
+::-moz-progress-bar {
+  /* Prevent styling that would change the type of frame we construct. */
+  display: inline-block ! important;
+  float: none ! important;
+  position: static ! important;
+  overflow: visible ! important;
+  box-sizing: border-box ! important;
+
+  -moz-appearance: progresschunk;
+  height: 100%;
+  width: 100%;
+
+  /* Default style in case of there is -moz-appearance: none; */
+  background-color: #0064b4; /* blue */
+}
+
+meter {
+  -moz-appearance: meterbar;
+  display: inline-block;
+  vertical-align: -0.2em;
+
+  background: linear-gradient(#e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%);
+}
+
+::-moz-meter-bar {
+  /* Block styles that would change the type of frame we construct. */
+  display: inline-block ! important;
+  float: none ! important;
+  position: static ! important;
+  overflow: visible ! important;
+
+  -moz-appearance: meterchunk;
+  height: 100%;
+  width: 100%;
+}
+
+:-moz-meter-optimum::-moz-meter-bar {
+  /* green. */
+  background: linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
+}
+:-moz-meter-sub-optimum::-moz-meter-bar {
+  /* orange. */
+  background: linear-gradient(#fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%);
+}
+:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+  /* red. */
+  background: linear-gradient(#f77, #f77, #fcc 20%, #d44 45%, #d44 55%);
+}
+
+input[type=range] {
+  -moz-appearance: range;
+  display: inline-block;
+  inline-size: 12em;
+  block-size: 1.3em;
+  margin-inline-start: 0.7em;
+  margin-inline-end: 0.7em;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  /* Override some rules that apply on all input types: */
+  cursor: default;
+  background: none;
+  border: none;
+  -moz-binding: none; /* we don't want any of platformHTMLBindings.xml#inputFields */
+  /* Prevent nsFrame::HandlePress setting mouse capture to this element. */
+  -moz-user-select: none ! important;
+}
+
+input[type=range][orient=block] {
+  inline-size: 1.3em;
+  block-size: 12em;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  margin-block-start: 0.7em;
+  margin-block-end: 0.7em;
+}
+
+input[type=range][orient=horizontal] {
+  width: 12em;
+  height: 1.3em;
+  margin: 0 0.7em;
+}
+
+input[type=range][orient=vertical] {
+  width: 1.3em;
+  height: 12em;
+  margin: 0.7em 0;
+}
+
+/**
+ * Ideally we'd also require :-moz-focusring here, but that doesn't currently
+ * work. Instead we only use the -moz-focus-outer border style if
+ * NS_EVENT_STATE_FOCUSRING is set (the check is in
+ * nsRangeFrame::BuildDisplayList).
+ */
+input[type=range]::-moz-focus-outer {
+  border: 1px dotted black;
+}
+
+/**
+ * Layout handles positioning of this pseudo-element specially (so that content
+ * authors can concentrate on styling the thumb without worrying about the
+ * logic to position it). Specifically the 'margin', 'top' and 'left'
+ * properties are ignored.
+ *
+ * If content authors want to have a vertical range, they will also need to
+ * set the width/height of this pseudo-element.
+ */
+input[type=range]::-moz-range-track {
+  /* Prevent styling that would change the type of frame we construct. */
+  display: inline-block !important;
+  float: none !important;
+  position: static !important;
+  border: none;
+  background-color: #999;
+  inline-size: 100%;
+  block-size: 0.2em;
+  /* Prevent nsFrame::HandlePress setting mouse capture to this element. */
+  -moz-user-select: none ! important;
+}
+
+input[type=range][orient=block]::-moz-range-track {
+  inline-size: 0.2em;
+  block-size: 100%;
+}
+
+input[type=range][orient=horizontal]::-moz-range-track {
+  width: 100%;
+  height: 0.2em;
+}
+
+input[type=range][orient=vertical]::-moz-range-track {
+  width: 0.2em;
+  height: 100%;
+}
+
+/**
+ * Layout handles positioning of this pseudo-element specially (so that content
+ * authors can concentrate on styling this pseudo-element without worrying
+ * about the logic to position it). Specifically the 'margin', 'top' and 'left'
+ * properties are ignored. Additionally, if the range is horizontal, the width
+ * property is ignored, and if the range range is vertical, the height property
+ * is ignored.
+ */
+input[type=range]::-moz-range-progress {
+  /* Prevent styling that would change the type of frame we construct. */
+  display: inline-block !important;
+  float: none !important;
+  position: static !important;
+  /* Since one of width/height will be ignored, this just sets the "other"
+     dimension.
+   */
+  width: 0.2em;
+  height: 0.2em;
+  /* Prevent nsFrame::HandlePress setting mouse capture to this element. */
+  -moz-user-select: none ! important;
+}
+
+/**
+ * Layout handles positioning of this pseudo-element specially (so that content
+ * authors can concentrate on styling the thumb without worrying about the
+ * logic to position it). Specifically the 'margin', 'top' and 'left'
+ * properties are ignored.
+ */
+input[type=range]::-moz-range-thumb {
+  /* Native theming is atomic for range. Set -moz-appearance on the range
+   * to get rid of it. The thumb's -moz-appearance is fixed.
+   */
+  -moz-appearance: range-thumb !important;
+  /* Prevent styling that would change the type of frame we construct. */
+  display: inline-block !important;
+  float: none !important;
+  position: static !important;
+  width: 1em;
+  height: 1em;
+  border: 0.1em solid #999;
+  border-radius: 0.5em;
+  background-color: #F0F0F0;
+  /* Prevent nsFrame::HandlePress setting mouse capture to this element. */
+  -moz-user-select: none ! important;
+}
+
+/* As a temporary workaround until bug 677302 the rule for input[type=number]
+ * has moved to number-control.css
+ */
+
+input[type=number]::-moz-number-wrapper {
+  /* Prevent styling that would change the type of frame we construct. */
+  display: flex;
+  float: none !important;
+  position: static !important;
+  block-size: 100%;
+}
+
+input[type=number]::-moz-number-text {
+  display: block; /* Flex items must be block-level. Normally we do fixup in
+                     the style system to ensure this, but that fixup is disabled
+                     inside of form controls. So, we hardcode display here. */
+  -moz-appearance: none;
+  /* work around autofocus bug 939248 on initial load */
+  -moz-user-modify: read-write;
+  /* This pseudo-element is also an 'input' element (nested inside and
+   * distinct from the <input type=number> element) so we need to prevent the
+   * explicit setting of 'text-align' by the general CSS rule for 'input'
+   * above. We want to inherit its value from its <input type=number>
+   * ancestor, not have that general CSS rule reset it.
+   */
+  text-align: inherit;
+  flex: 1;
+  min-inline-size: 0;
+  padding: 0;
+  border: 0;
+  margin: 0;
+}
+
+input[type=number]::-moz-number-spin-box {
+  writing-mode: horizontal-tb;
+  display: flex;
+  flex-direction: column;
+%ifdef XP_WIN
+  /* The Window's Theme's spin buttons have a very narrow minimum width, so
+   * make it something reasonable:
+   */
+  width: 16px;
+%endif
+  /* If the spin-box has auto height, it ends up enlarging the default height
+   * of the control, so we limit it to 1em here. The height doesn't affect
+   * the rendering of the spinner-buttons; it's only for layout purposes.
+   *
+   * This is a temporary hack until we implement better positioning for the
+   * spin-box in vertical mode; it works OK at default size but less well
+   * if the font-size is made substantially larger or smaller. (Bug 1175074.)
+   */
+  max-height: 1em;
+  align-self: center;
+  justify-content: center;
+}
+
+input[type=number]::-moz-number-spin-up {
+  -moz-appearance: spinner-upbutton;
+  display: block; /* bug 926670 */
+  flex: none;
+  cursor: default;
+  /* Style for when native theming is off: */
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="5"><path d="M1,4 L3,0 5,4" fill="dimgrey"/></svg>');
+  background-repeat: no-repeat;
+  background-position: center bottom;
+  border: 1px solid darkgray;
+  border-bottom: none;
+  /* [JK] I think the border-*-*-radius properties here can remain physical,
+     as we probably don't want to turn the spinner sideways in vertical writing mode */
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+
+input[type=number]::-moz-number-spin-down {
+  -moz-appearance: spinner-downbutton;
+  display: block; /* bug 926670 */
+  flex: none;
+  cursor: default;
+  /* Style for when native theming is off: */
+  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="5"><path d="M1,1 L3,5 5,1" fill="dimgrey"/></svg>');
+  background-repeat: no-repeat;
+  background-position: center top;
+  border: 1px solid darkgray;
+  border-top: none;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+input[type="number"] > div > div > div:hover {
+  /* give some indication of hover state for the up/down buttons */
+  background-color: lightblue;
+}
diff --git a/layout/style/res/html.css b/layout/style/res/html.css
new file mode 100644
index 000000000..a779461de
--- /dev/null
+++ b/layout/style/res/html.css
@@ -0,0 +1,863 @@
+/* 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);
+
+/* bidi */
+
+[dir] {
+  unicode-bidi: isolate;
+}
+[dir="rtl"] {
+  direction: rtl;
+}
+[dir="ltr"] {
+  direction: ltr;
+}
+
+bdi:dir(ltr), [dir="auto"]:dir(ltr) { direction: ltr; }
+bdi:dir(rtl), [dir="auto"]:dir(rtl) { direction: rtl; }
+
+/* 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,
+section,
+summary,
+table,
+tbody,
+td,
+tfoot,
+th,
+thead,
+tr,
+ul,
+xmp {
+  unicode-bidi: isolate;
+}
+
+bdi, output {
+  unicode-bidi: isolate;
+}
+bdo, bdo[dir] {
+  unicode-bidi: isolate-override;
+}
+textarea[dir="auto"], pre[dir="auto"] { unicode-bidi: plaintext; }
+
+/* blocks */
+
+article,
+aside,
+details,
+div,
+dt,
+figcaption,
+footer,
+form,
+header,
+hgroup,
+html,
+main,
+nav,
+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;
+}
+
+blockquote[type=cite] {
+  display: block;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  padding-inline-start: 1em;
+  border-inline-start: solid;
+  border-color: blue;
+  border-width: thin;
+}
+
+span[_moz_quote=true] {
+  color: blue;
+}
+
+pre[_moz_quote=true] {
+  color: blue;
+}
+
+h1 {
+  display: block;
+  font-size: 2em;
+  font-weight: bold;
+  margin-block-start: .67em;
+  margin-block-end: .67em;
+}
+
+h2,
+:-moz-any(article, aside, nav, section)
+h1 {
+  display: block;
+  font-size: 1.5em;
+  font-weight: bold;
+  margin-block-start: .83em;
+  margin-block-end: .83em;
+}
+
+h3,
+:-moz-any(article, aside, nav, section)
+:-moz-any(article, aside, nav, section)
+h1 {
+  display: block;
+  font-size: 1.17em;
+  font-weight: bold;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+}
+
+h4,
+:-moz-any(article, aside, nav, section)
+:-moz-any(article, aside, nav, section)
+:-moz-any(article, aside, nav, section)
+h1 {
+  display: block;
+  font-size: 1.00em;
+  font-weight: bold;
+  margin-block-start: 1.33em;
+  margin-block-end: 1.33em;
+}
+
+h5,
+:-moz-any(article, aside, nav, section)
+:-moz-any(article, aside, nav, section)
+:-moz-any(article, aside, nav, section)
+:-moz-any(article, aside, nav, section)
+h1 {
+  display: block;
+  font-size: 0.83em;
+  font-weight: bold;
+  margin-block-start: 1.67em;
+  margin-block-end: 1.67em;
+}
+
+h6,
+:-moz-any(article, aside, nav, section)
+:-moz-any(article, aside, nav, section)
+:-moz-any(article, aside, nav, section)
+:-moz-any(article, aside, nav, section)
+:-moz-any(article, aside, nav, section)
+h1 {
+  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;
+}
+
+
+/* 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"]):not([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-start-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: inherit; 
+  padding: 1px;
+}
+
+th {
+  display: table-cell;
+  vertical-align: inherit;
+  font-weight: bold;
+  padding: 1px;
+}
+
+tr > form:-moz-is-html, tbody > form:-moz-is-html,
+thead > form:-moz-is-html, tfoot > form:-moz-is-html,
+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;
+  line-height: normal;
+}
+
+sup {
+  vertical-align: super;
+  font-size: smaller;
+  line-height: normal;
+}
+
+nobr {
+  white-space: nowrap;
+}
+
+mark {
+  background: yellow;
+  color: black;
+}
+
+/* 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;
+}
+
+menu[type="context"] {
+  display: none !important;
+}
+
+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 */
+:-moz-any(ul, ol, dir, menu, dl) ul,
+:-moz-any(ul, ol, dir, menu, dl) ol,
+:-moz-any(ul, ol, dir, menu, dl) dir,
+:-moz-any(ul, ol, dir, menu, dl) menu,
+:-moz-any(ul, ol, dir, menu, dl) dl {
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+
+/* 2 deep unordered lists use a circle */
+:-moz-any(ol, ul, menu, dir) ul,
+:-moz-any(ol, ul, menu, dir) menu,
+:-moz-any(ol, ul, menu, dir) dir {
+  list-style-type: circle;
+}
+
+/* 3 deep (or more) unordered lists use a square */
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
+  list-style-type: square;
+}
+
+
+/* leafs */
+
+/* <hr> noshade and color attributes are handled completely by
+ * the nsHTMLHRElement attribute mapping code
+ */
+hr {
+  display: block;
+  border: 1px inset;
+  margin-block-start: 0.5em;
+  margin-block-end: 0.5em;
+  margin-inline-start: auto;
+  margin-inline-end: auto;
+  color: gray;
+  -moz-float-edge: margin-box;
+  box-sizing: border-box;
+}
+
+hr[size="1"] {
+  border-style: solid none none none;
+}
+
+img:-moz-broken::before, input:-moz-broken::before,
+img:-moz-user-disabled::before, input:-moz-user-disabled::before,
+img:-moz-loading::before, input:-moz-loading::before,
+applet:-moz-empty-except-children-with-localname(param):-moz-broken::before,
+applet:-moz-empty-except-children-with-localname(param):-moz-user-disabled::before {
+  content: -moz-alt-content !important;
+  unicode-bidi: isolate;
+}
+
+:-moz-any(object,applet):-moz-any(:-moz-broken,:-moz-user-disabled) > *|* {
+  /*
+    Inherit in the object's alignment so that if we aren't aligned explicitly
+    we'll end up in the right place vertically.  See bug 36997.  Note that this
+    is not !important because we _might_ be aligned explicitly.
+  */
+  vertical-align: inherit;
+}
+
+img:-moz-suppressed, input:-moz-suppressed, object:-moz-suppressed,
+embed:-moz-suppressed, applet:-moz-suppressed {
+  /*
+    Set visibility too in case the page changes display.  Note that we _may_
+    want to just set visibility and not display, in general, if we find that
+    display:none breaks too many layouts.  And if we decide we really do want
+    people to be able to right-click blocked images, etc, we need to set
+    neither one, and hack the painting code.... :(
+   */
+  display: none !important;
+  visibility: hidden !important;
+}
+
+img[usemap], object[usemap] {
+  color: blue;
+}
+
+frameset {
+  display: block ! important;
+  overflow: -moz-hidden-unscrollable;
+  position: static ! important;
+  float: none ! important;
+  border: none ! important;
+}
+
+link { 
+  display: none;
+}
+
+frame {
+  border-radius: 0 ! important;
+}
+
+iframe {
+  border: 2px inset;
+}
+
+noframes {
+  display: none;
+}
+
+spacer {
+  position: static ! important;
+  float: none ! important;
+}
+
+canvas {
+  -moz-user-select: none;
+}
+
+/* focusable content: anything w/ tabindex >=0 is focusable, but we
+   skip drawing a focus outline on a few things that handle it
+   themselves. */
+:-moz-focusring:not(input):not(button):not(select):not(textarea):not(iframe):not(frame):not(body):not(html) {
+  /* Don't specify the outline-color, we should always use initial value. */
+   outline: 1px dotted;
+}
+
+/* hidden elements */
+base, basefont, datalist, head, meta, script, style, title,
+noembed, param, template {
+   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: 0 !important;
+}
+
+/* media elements */
+video > xul|videocontrols, audio > xul|videocontrols {
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  -moz-binding: url("chrome://global/content/bindings/videocontrols.xml#videoControls");
+}
+
+video:not([controls]) > xul|videocontrols,
+audio:not([controls]) > xul|videocontrols {
+  visibility: hidden;
+  -moz-binding: none;
+}
+
+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;
+}
+
+*|*::-moz-html-canvas-content {
+  display: block !important;
+  /* we want to be an absolute and fixed container */
+  transform: translate(0) !important;
+}
+
+video > .caption-box {
+  position: relative;
+  overflow: hidden;
+}
+
+/* datetime elements */
+
+input[type="time"] > xul|datetimebox {
+  display: flex;
+  -moz-binding: url("chrome://global/content/bindings/datetimebox.xml#time-input");
+}
+
+/* details & summary */
+/* Need to revert Bug 1259889 Part 2 when removing details preference. */
+@supports -moz-bool-pref("dom.details_element.enabled") {
+  details > summary:first-of-type,
+  details > summary:-moz-native-anonymous {
+    display: list-item;
+    list-style: disclosure-closed inside;
+  }
+
+  details[open] > summary:first-of-type,
+  details[open] > summary:-moz-native-anonymous {
+    list-style-type: disclosure-open;
+  }
+
+  details > summary:first-of-type > *|* {
+    /* Cancel "list-style-position: inside" inherited from summary. */
+    list-style-position: initial;
+  }
+}
+
+/* emulation of non-standard HTML <marquee> tag */
+marquee {
+  inline-size: -moz-available;
+  display: inline-block;
+  vertical-align: text-bottom;
+  text-align: start;
+  -moz-binding: url('chrome://xbl-marquee/content/xbl-marquee.xml#marquee-horizontal');
+}
+
+marquee[direction="up"], marquee[direction="down"] {
+  -moz-binding: url('chrome://xbl-marquee/content/xbl-marquee.xml#marquee-vertical');
+  block-size: 200px;
+}
+
+/* PRINT ONLY rules follow */
+@media print {
+
+  marquee { -moz-binding: none; }
+
+}
+
+/* Ruby */
+
+ruby {
+  display: ruby;
+}
+rb {
+  display: ruby-base;
+  white-space: nowrap;
+}
+rp {
+  display: none;
+}
+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;
+%ifndef XP_WIN
+  /* 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;
+%endif
+}
+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: inherit;
+}
+ruby, rb, rt, rtc {
+  unicode-bidi: isolate;
+}
diff --git a/layout/style/res/noframes.css b/layout/style/res/noframes.css
new file mode 100644
index 000000000..4d1adfdc1
--- /dev/null
+++ b/layout/style/res/noframes.css
@@ -0,0 +1,13 @@
+/* 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/. */
+
+/* This sheet is added to the style set for documents with frames disabled */
+
+noframes {
+  display: block;
+}
+
+frame, frameset, iframe {
+  display: none !important;
+}
diff --git a/layout/style/res/noscript.css b/layout/style/res/noscript.css
new file mode 100644
index 000000000..f92b42a50
--- /dev/null
+++ b/layout/style/res/noscript.css
@@ -0,0 +1,9 @@
+/* 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/. */
+
+/* This sheet is added to the style set for documents with script disabled */
+
+noscript {
+  display: none !important;
+}
diff --git a/layout/style/res/number-control.css b/layout/style/res/number-control.css
new file mode 100644
index 000000000..b4c784cf2
--- /dev/null
+++ b/layout/style/res/number-control.css
@@ -0,0 +1,18 @@
+/* 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/. */
+
+/* This file exists purely because we need the styling for input[type=number]
+ * to apply only if the pref dom.forms.number is true. Once bug 677302 is
+ * fixed this rule can move back to forms.css.
+ */
+
+input[type="number"] {
+  -moz-appearance: number-input;
+  /* Has to revert some properties applied by the generic input rule. */
+  -moz-binding: none;
+  inline-size: 20ch; /* It'd be nice if this matched the default inline-size
+                        of <input type=text>, but that's not easy to achieve
+                        due to platform differences. */
+}
+
diff --git a/layout/style/res/plaintext.css b/layout/style/res/plaintext.css
new file mode 100644
index 000000000..2cc41c838
--- /dev/null
+++ b/layout/style/res/plaintext.css
@@ -0,0 +1,9 @@
+/* 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/. */
+
+pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  -moz-control-character-visibility: visible;
+}
diff --git a/layout/style/res/quirk.css b/layout/style/res/quirk.css
new file mode 100644
index 000000000..ba9e6d4ac
--- /dev/null
+++ b/layout/style/res/quirk.css
@@ -0,0 +1,203 @@
+/* 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 */
+
+
+/* Quirk: make orphaned LIs have inside bullet (b=1049) */
+
+/* force inside position for orphaned lis */
+li {
+  list-style-position: inside;
+}
+
+/* restore outside position for lists inside LIs */
+li ul, li ol, li dir, li menu {
+  list-style-position: outside;
+}
+
+/* undo previous two rules for properly nested lists */
+  ul ul,   ul ol,   ul dir,   ul menu,   ul li,
+  ol ul,   ol ol,   ol dir,   ol menu,   ol li,
+ dir ul,  dir ol,  dir dir,  dir menu,  dir li,
+menu ul, menu ol, menu dir, menu menu, menu li {
+  list-style-position: inherit;
+}
+
+
+/* Quirk: ensure that we get proper padding if the very first
+ * node in an LI is another UL or OL. This is an ugly way to
+ * fix the problem, because it extends the LI up into what
+ * would otherwise appear to be the ULs space. (b=38832) */
+
+/* Note: this fix will fail once we implement marker box
+ * alignment correctly. */
+li > ul:-moz-first-node,
+li > ol:-moz-first-node {
+  padding-block-start: 1em;
+}
+
+
+table {
+  text-align: start;
+  white-space: normal; /* compatible with IE & spec */
+  line-height: normal;
+
+  /* Quirk: cut off all font inheritance in tables except for family. */
+  font-size: initial;
+  font-weight: initial;
+  font-style: initial;
+  font-variant: initial;
+}
+
+/*
+ * Make table borders gray for compatibility with what other browsers do
+ * in all modes, rather than using the foreground color.
+ */
+table, td, th, tr, thead, tbody, tfoot, colgroup, col {
+  border-color: gray;
+}
+
+
+/* Quirk: collapse top margin of BODY and TD and bottom margin of TD */
+
+/*
+ * While it may seem simpler to use :-moz-first-node and :-moz-last-node without
+ * tags, it's slower, since we have to do the :-moz-first-node or :-moz-last-node
+ * check on every single element in the document.  If we list all the
+ * element names for which the UA stylesheet specifies a margin, the
+ * selectors will be hashed in the RuleHash and things will be much more
+ * efficient.
+ */
+body > p:-moz-first-node, td > p:-moz-first-node, th > p:-moz-first-node,
+body > dl:-moz-first-node, td > dl:-moz-first-node, th > dl:-moz-first-node,
+body > multicol:-moz-first-node, td > multicol:-moz-first-node, th > multicol:-moz-first-node,
+body > blockquote:-moz-first-node, td > blockquote:-moz-first-node, th > blockquote:-moz-first-node,
+body > h1:-moz-first-node, td > h1:-moz-first-node, th > h1:-moz-first-node,
+body > h2:-moz-first-node, td > h2:-moz-first-node, th > h2:-moz-first-node,
+body > h3:-moz-first-node, td > h3:-moz-first-node, th > h3:-moz-first-node,
+body > h4:-moz-first-node, td > h4:-moz-first-node, th > h4:-moz-first-node,
+body > h5:-moz-first-node, td > h5:-moz-first-node, th > h5:-moz-first-node,
+body > h6:-moz-first-node, td > h6:-moz-first-node, th > h6:-moz-first-node,
+body > listing:-moz-first-node, td > listing:-moz-first-node, th > listing:-moz-first-node,
+body > plaintext:-moz-first-node, td > plaintext:-moz-first-node, th > plaintext:-moz-first-node,
+body > xmp:-moz-first-node, td > xmp:-moz-first-node, th > xmp:-moz-first-node,
+body > pre:-moz-first-node, td > pre:-moz-first-node, th > pre:-moz-first-node,
+body > ul:-moz-first-node, td > ul:-moz-first-node, th > ul:-moz-first-node,
+body > menu:-moz-first-node, td > menu:-moz-first-node, th > menu:-moz-first-node,
+body > dir:-moz-first-node, td > dir:-moz-first-node, th > dir:-moz-first-node,
+body > ol:-moz-first-node, td > ol:-moz-first-node, th > ol:-moz-first-node {
+  margin-block-start: 0;
+}
+
+td > p:-moz-last-node, th > p:-moz-last-node {
+  margin-block-end: 0;
+}
+
+/* Similar as above, but for empty elements
+ *  collapse the bottom or top margins of empty elements
+ *  - see bug 97361
+ */
+body > p:-moz-only-whitespace:-moz-first-node,
+td > p:-moz-only-whitespace:-moz-first-node, th > p:-moz-only-whitespace:-moz-first-node,
+body > dl:-moz-only-whitespace:-moz-first-node, td > dl:-moz-only-whitespace:-moz-first-node,
+th > dl:-moz-only-whitespace:-moz-first-node, body > multicol:-moz-only-whitespace:-moz-first-node,
+td > multicol:-moz-only-whitespace:-moz-first-node, th > multicol:-moz-only-whitespace:-moz-first-node,
+body > blockquote:-moz-only-whitespace:-moz-first-node, td > blockquote:-moz-only-whitespace:-moz-first-node,
+th > blockquote:-moz-only-whitespace:-moz-first-node, body > h1:-moz-only-whitespace:-moz-first-node,
+td > h1:-moz-only-whitespace:-moz-first-node, th > h1:-moz-only-whitespace:-moz-first-node,
+body > h2:-moz-only-whitespace:-moz-first-node, td > h2:-moz-only-whitespace:-moz-first-node,
+th > h2:-moz-only-whitespace:-moz-first-node, body > h3:-moz-only-whitespace:-moz-first-node,
+td > h3:-moz-only-whitespace:-moz-first-node, th > h3:-moz-only-whitespace:-moz-first-node,
+body > h4:-moz-only-whitespace:-moz-first-node, td > h4:-moz-only-whitespace:-moz-first-node,
+th > h4:-moz-only-whitespace:-moz-first-node, body > h5:-moz-only-whitespace:-moz-first-node,
+td > h5:-moz-only-whitespace:-moz-first-node, th > h5:-moz-only-whitespace:-moz-first-node,
+body > h6:-moz-only-whitespace:-moz-first-node, td > h6:-moz-only-whitespace:-moz-first-node,
+th > h6:-moz-only-whitespace:-moz-first-node, body > listing:-moz-only-whitespace:-moz-first-node,
+td > listing:-moz-only-whitespace:-moz-first-node, th > listing:-moz-only-whitespace:-moz-first-node,
+body > plaintext:-moz-only-whitespace:-moz-first-node, td > plaintext:-moz-only-whitespace:-moz-first-node,
+th > plaintext:-moz-only-whitespace:-moz-first-node, body > xmp:-moz-only-whitespace:-moz-first-node,
+td > xmp:-moz-only-whitespace:-moz-first-node, th > xmp:-moz-only-whitespace:-moz-first-node,
+body > pre:-moz-only-whitespace:-moz-first-node, td > pre:-moz-only-whitespace:-moz-first-node,
+th > pre:-moz-only-whitespace:-moz-first-node, body > ul:-moz-only-whitespace:-moz-first-node,
+td > ul:-moz-only-whitespace:-moz-first-node, th > ul:-moz-only-whitespace:-moz-first-node,
+body > menu:-moz-only-whitespace:-moz-first-node, td > menu:-moz-only-whitespace:-moz-first-node,
+th > menu:-moz-only-whitespace:-moz-first-node, body > dir:-moz-only-whitespace:-moz-first-node,
+td > dir:-moz-only-whitespace:-moz-first-node, th > dir:-moz-only-whitespace:-moz-first-node,
+body > ol:-moz-only-whitespace:-moz-first-node, td > ol:-moz-only-whitespace:-moz-first-node,
+th > ol:-moz-only-whitespace:-moz-first-node {
+  margin-block-end: 0;
+}
+
+td > p:-moz-only-whitespace:-moz-last-node, th > p:-moz-only-whitespace:-moz-last-node,
+td > dl:-moz-only-whitespace:-moz-last-node, th > dl:-moz-only-whitespace:-moz-last-node,
+td > multicol:-moz-only-whitespace:-moz-last-node, th > multicol:-moz-only-whitespace:-moz-last-node,
+td > blockquote:-moz-only-whitespace:-moz-last-node, th > blockquote:-moz-only-whitespace:-moz-last-node,
+td > h1:-moz-only-whitespace:-moz-last-node, th > h1:-moz-only-whitespace:-moz-last-node,
+td > h2:-moz-only-whitespace:-moz-last-node, th > h2:-moz-only-whitespace:-moz-last-node,
+td > h3:-moz-only-whitespace:-moz-last-node, th > h3:-moz-only-whitespace:-moz-last-node,
+td > h4:-moz-only-whitespace:-moz-last-node, th > h4:-moz-only-whitespace:-moz-last-node,
+td > h5:-moz-only-whitespace:-moz-last-node, th > h5:-moz-only-whitespace:-moz-last-node,
+td > h6:-moz-only-whitespace:-moz-last-node, th > h6:-moz-only-whitespace:-moz-last-node,
+td > listing:-moz-only-whitespace:-moz-last-node, th > listing:-moz-only-whitespace:-moz-last-node,
+td > plaintext:-moz-only-whitespace:-moz-last-node, th > plaintext:-moz-only-whitespace:-moz-last-node,
+td > xmp:-moz-only-whitespace:-moz-last-node, th > xmp:-moz-only-whitespace:-moz-last-node,
+td > pre:-moz-only-whitespace:-moz-last-node, th > pre:-moz-only-whitespace:-moz-last-node,
+td > ul:-moz-only-whitespace:-moz-last-node, th > ul:-moz-only-whitespace:-moz-last-node,
+td > menu:-moz-only-whitespace:-moz-last-node, th > menu:-moz-only-whitespace:-moz-last-node,
+td > dir:-moz-only-whitespace:-moz-last-node, th > dir:-moz-only-whitespace:-moz-last-node,
+td > ol:-moz-only-whitespace:-moz-last-node, th > ol:-moz-only-whitespace:-moz-last-node {
+  margin-block-start: 0;
+}
+
+
+/* Quirk: DD not in DL has text-indent instead of margin (b=5119) */
+
+:not(dl) > dd {
+  display: inline;
+  margin: 0;
+}
+
+:not(dl) > dd:before {
+  display: inline;
+  white-space: pre;
+  font-size: 1px;
+  line-height: 0;
+  content: "\A  ";
+  margin-inline-end: 40px;
+}
+
+
+/* quirk to indent nested DL elements (b=8749) */
+
+dl > dl {
+  display: block;
+  margin-inline-start: 40px;
+}
+
+
+/* Quirk: Make floated images have a margin  (b=58899) */
+img[align=left]:dir(ltr), img[align=right]:dir(rtl) {
+  margin-inline-end: 3px;
+}
+
+img[align=right]:dir(ltr), img[align=left]:dir(rtl) {
+  margin-inline-start: 3px;
+}
+
+/*
+ * Quirk: Use border-box box sizing for text inputs, password inputs, and
+ * textareas.  (b=184478 on why we use content-box sizing in standards mode)
+ */
+
+/* Note that all other <input>s already use border-box
+   sizing, so we're ok with this selector */
+input:not([type=image]), textarea {
+  box-sizing: border-box;
+}
+
+/* Quirk: give form margin for compat (b=41806) */
+form {
+  margin-block-end: 1em;
+}
diff --git a/layout/style/res/ua.css b/layout/style/res/ua.css
new file mode 100644
index 000000000..931b32eb8
--- /dev/null
+++ b/layout/style/res/ua.css
@@ -0,0 +1,473 @@
+/* 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 parsererror url(http://www.mozilla.org/newlayout/xml/parsererror.xml);
+@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
+
+/* magic -- some of these rules are important to keep pages from overriding
+            them
+*/
+
+/* Tables */
+
+*|*::-moz-table {
+  display: table !important;
+  box-sizing: border-box; /* XXX do we really want this? */
+}
+
+*|*::-moz-inline-table {
+  display: inline-table !important;
+  box-sizing: border-box; /* XXX do we really want this? */
+}
+
+*|*::-moz-table-wrapper {
+  display: inherit !important; /* table or inline-table */
+  margin: inherit ! important;
+  padding: 0 ! important;
+  border: none ! important;
+  float: inherit;
+  clear: inherit;
+  position: inherit;
+  top: inherit;
+  right: inherit;
+  bottom: inherit;
+  left: inherit;
+  z-index: inherit;
+  page-break-before: inherit;
+  page-break-after: inherit;
+  page-break-inside: inherit;
+  vertical-align: inherit; /* needed for inline-table */
+  line-height: inherit; /* needed for vertical-align on inline-table */
+  /* Bug 722777 */
+  transform: inherit;
+  transform-origin: inherit;
+  /* Bug 724750 */
+  backface-visibility: inherit;
+  clip: inherit;
+  /* When the table wrapper is a Flex/Grid item we need these: */
+  align-self: inherit;
+  justify-self: inherit;
+  grid-column-start: inherit;
+  grid-column-end: inherit;
+  grid-row-start: inherit;
+  grid-row-end: inherit;
+  order: inherit;
+}
+
+*|*::-moz-table-row {
+  display: table-row !important;
+}
+
+/* The ::-moz-table-column pseudo-element is for extra columns at the end
+   of a table. */
+*|*::-moz-table-column {
+  display: table-column !important;
+}
+
+*|*::-moz-table-column-group {
+  display: table-column-group !important;
+}
+
+*|*::-moz-table-row-group {
+  display: table-row-group !important;
+}
+
+*|*::-moz-table-cell {
+  display: table-cell !important;
+  white-space: inherit;
+}
+
+/* Ruby */
+*|*::-moz-ruby {
+  display: ruby;
+  unicode-bidi: isolate;
+}
+*|*::-moz-ruby-base {
+  display: ruby-base;
+  unicode-bidi: isolate;
+}
+*|*::-moz-ruby-text {
+  display: ruby-text;
+  unicode-bidi: isolate;
+}
+*|*::-moz-ruby-base-container {
+  display: ruby-base-container;
+  unicode-bidi: isolate;
+}
+*|*::-moz-ruby-text-container {
+  display: ruby-text-container;
+  unicode-bidi: isolate;
+}
+
+/* Lists */
+
+*|*::-moz-list-bullet, *|*::-moz-list-number {
+  display: inline;
+  vertical-align: baseline;
+  font-variant-numeric: tabular-nums;
+  /* Prevent the element from being selected when clicking on the marker. */
+  -moz-user-select: none;
+}
+
+/* SVG documents don't always load this file but they do have links.
+ * If you change the link rules, consider carefully whether to make
+ * the same changes to svg.css.
+ */
+
+/* Links */
+
+*|*:any-link {
+  cursor: pointer;
+}
+
+*|*:any-link:-moz-focusring {
+  /* Don't specify the outline-color, we should always use initial value. */
+  outline: 1px dotted;
+}
+
+/* Miscellaneous */
+
+*|*::-moz-anonymous-block, *|*::-moz-cell-content {
+  display: block !important;
+  position: static !important;
+  unicode-bidi: inherit;
+  text-overflow: inherit;
+  overflow-clip-box: inherit;
+}
+
+*|*::-moz-anonymous-block, *|*::-moz-anonymous-positioned-block {
+  /* we currently inherit from the inline that is split */
+  outline: inherit;
+  outline-offset: inherit;
+  clip-path: inherit;
+  filter: inherit;
+  mask: inherit;
+  opacity: inherit;
+  text-decoration: inherit;
+  -moz-box-ordinal-group: inherit !important;
+  overflow-clip-box: inherit;
+}
+
+*|*::-moz-xul-anonymous-block {
+  display: block ! important;
+  position: static ! important;
+  float: none ! important;
+  -moz-box-ordinal-group: inherit !important;
+  text-overflow: inherit;
+  overflow-clip-box: inherit;
+}
+
+*|*::-moz-scrolled-content, *|*::-moz-scrolled-canvas,
+*|*::-moz-scrolled-page-sequence {
+  /* e.g., text inputs, select boxes */
+  padding: inherit;
+  /* The display doesn't affect the kind of frame constructed here.  This just
+     affects auto-width sizing of the block we create. */
+  display: block;
+  /* make unicode-bidi inherit, otherwise it has no effect on text inputs and
+     blocks with overflow: scroll; */
+  unicode-bidi: inherit;
+  text-overflow: inherit;
+  /* Please keep the Multicol/Flex/Grid/Align sections below in sync with
+     ::-moz-fieldset-content/::-moz-button-content in forms.css */
+  /* Multicol container */
+  -moz-column-count: inherit;
+  -moz-column-width: inherit;
+  -moz-column-gap: inherit;
+  -moz-column-rule: inherit;
+  -moz-column-fill: inherit;
+  /* Flex container */
+  flex-direction: inherit;
+  flex-wrap: inherit;
+  /* -webkit-box container (aliased from -webkit versions to -moz versions) */
+  -moz-box-orient: inherit;
+  -moz-box-direction: inherit;
+  -moz-box-pack: inherit;
+  -moz-box-align: inherit;
+  /* Grid container */
+  grid-auto-columns: inherit;
+  grid-auto-rows: inherit;
+  grid-auto-flow: inherit;
+  grid-column-gap: inherit;
+  grid-row-gap: inherit;
+  grid-template-areas: inherit;
+  grid-template-columns: inherit;
+  grid-template-rows: inherit;
+  /* CSS Align */
+  align-content: inherit;
+  align-items: inherit;
+  justify-content: inherit;
+  justify-items: inherit;
+  /* Do not change these. nsCSSFrameConstructor depends on them to create a good
+     frame tree. */
+  position: static !important;
+  float: none !important;
+  overflow-clip-box: inherit;
+}
+
+*|*::-moz-viewport, *|*::-moz-viewport-scroll, *|*::-moz-canvas, *|*::-moz-scrolled-canvas {
+  display: block !important;
+  background-color: inherit;
+}
+
+*|*::-moz-viewport-scroll {
+  overflow: auto;
+%ifdef XP_WIN
+  resize: both;
+%endif
+}
+
+*|*::-moz-column-content {
+  /* the column boxes inside a column-flowed block */
+  /* make unicode-bidi inherit, otherwise it has no effect on column boxes */
+  unicode-bidi: inherit;
+  text-overflow: inherit;
+  /* inherit the outer frame's display, otherwise we turn into an inline */
+  display: inherit !important;
+  /* Carry through our parent's height so that %-height children get
+  their heights set */
+  height: 100%;
+}
+
+*|*::-moz-anonymous-flex-item,
+*|*::-moz-anonymous-grid-item {
+  /* Anonymous blocks that wrap contiguous runs of text
+   * inside of a flex or grid container. */
+  display: block;
+}
+
+*|*::-moz-page-sequence, *|*::-moz-scrolled-page-sequence {
+  /* Collection of pages in print/print preview. Visual styles may only appear
+   * in print preview. */
+  display: block !important;
+  background: linear-gradient(#606060, #8a8a8a) fixed;
+  height: 100%;
+}
+
+*|*::-moz-page {
+  /* Individual page in print/print preview. Visual styles may only appear
+   * in print preview. */
+  display: block !important;
+  background: white;
+  box-shadow: 5px 5px 8px #202020;
+  margin: 0.125in 0.25in;
+}
+
+*|*::-moz-pagecontent {
+  display: block !important;
+  margin: auto;
+}
+
+*|*::-moz-pagebreak {
+  display: block !important;
+}
+
+*|*::-moz-anonymous-positioned-block {
+  display: block !important;
+  position: inherit; /* relative or sticky */
+  top: inherit;
+  left: inherit;
+  bottom: inherit;
+  right: inherit;
+  z-index: inherit;
+  clip: inherit;
+  opacity: inherit;
+  unicode-bidi: inherit;
+  text-overflow: inherit;
+}
+
+/* Printing */
+
+@media print {
+
+  * {
+    cursor: default !important;
+  }
+
+}
+
+*|*:fullscreen:not(:root) {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  margin: 0 !important;
+  min-width: 0 !important;
+  max-width: none !important;
+  min-height: 0 !important;
+  max-height: none !important;
+  box-sizing: border-box !important;
+  object-fit: contain;
+  transform: none !important;
+}
+
+/* Selectors here should match the check in
+ * nsViewportFrame.cpp:ShouldInTopLayerForFullscreen() */
+*|*:fullscreen:not(:root):not(:-moz-browser-frame) {
+  -moz-top-layer: top !important;
+}
+
+*|*::backdrop {
+  -moz-top-layer: top !important;
+  display: block;
+  position: fixed;
+  top: 0; left: 0;
+  right: 0; bottom: 0;
+}
+
+*|*:-moz-full-screen:not(:root)::backdrop {
+  background: black;
+}
+
+/* XML parse error reporting */
+
+parsererror|parsererror {
+  display: block;
+  font-family: sans-serif;
+  font-weight: bold;
+  white-space: pre;
+  margin: 1em;
+  padding: 1em;
+  border-width: thin;
+  border-style: inset;
+  border-color: red;
+  font-size: 14pt;
+  background-color: lightyellow;
+  color: black;
+}
+
+parsererror|sourcetext {
+  display: block;
+  white-space: pre;
+  font-family: -moz-fixed;
+  margin-top: 2em;
+  margin-bottom: 1em;
+  color: red;
+  font-weight: bold;
+  font-size: 12pt;
+}
+
+div:-moz-native-anonymous.moz-accessiblecaret {
+  /* Add transition effect to make caret size changing smoother. */
+  transition-duration: 250ms;
+  transition-property: width, height, margin-left;
+}
+
+div:-moz-native-anonymous.moz-accessiblecaret,
+div:-moz-native-anonymous.moz-accessiblecaret > #text-overlay,
+div:-moz-native-anonymous.moz-accessiblecaret > #image,
+div:-moz-native-anonymous.moz-accessiblecaret > #bar {
+  position: absolute;
+  z-index: 2147483647;
+}
+
+div:-moz-native-anonymous.moz-accessiblecaret > #text-overlay,
+div:-moz-native-anonymous.moz-accessiblecaret > #image {
+  top: 0;
+  width: 100%;
+
+  /* Override this property in moz-custom-content-container to make dummy touch
+   * listener work. */
+  pointer-events: auto;
+}
+
+div:-moz-native-anonymous.moz-accessiblecaret > #image {
+  background-position: center top;
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-origin: content-box;
+  height: 100%;
+}
+
+div:-moz-native-anonymous.moz-accessiblecaret > #bar {
+  margin-left: 49%;
+  background-color: #008aa0;
+}
+
+div:-moz-native-anonymous.moz-accessiblecaret.no-bar > #bar {
+  display: none;
+}
+
+div:-moz-native-anonymous.moz-accessiblecaret.normal > #image {
+  background-image: url("resource://gre-resources/accessiblecaret-normal@1x.png");
+}
+
+div:-moz-native-anonymous.moz-accessiblecaret.left > #text-overlay,
+div:-moz-native-anonymous.moz-accessiblecaret.left > #image {
+  margin-left: -39%;
+}
+
+div:-moz-native-anonymous.moz-accessiblecaret.left > #image {
+  background-image: url("resource://gre-resources/accessiblecaret-tilt-left@1x.png");
+}
+
+div:-moz-native-anonymous.moz-accessiblecaret.right > #text-overlay,
+div:-moz-native-anonymous.moz-accessiblecaret.right > #image {
+  margin-left: 41%;
+}
+
+div:-moz-native-anonymous.moz-accessiblecaret.right > #image {
+  background-image: url("resource://gre-resources/accessiblecaret-tilt-right@1x.png");
+}
+
+div:-moz-native-anonymous.moz-accessiblecaret.none {
+  display: none;
+}
+
+@media (min-resolution: 1.5dppx) {
+  div:-moz-native-anonymous.moz-accessiblecaret.normal > #image {
+    background-image: url("resource://gre-resources/accessiblecaret-normal@1.5x.png");
+  }
+
+  div:-moz-native-anonymous.moz-accessiblecaret.left > #image {
+    background-image: url("resource://gre-resources/accessiblecaret-tilt-left@1.5x.png");
+  }
+
+  div:-moz-native-anonymous.moz-accessiblecaret.right > #image {
+    background-image: url("resource://gre-resources/accessiblecaret-tilt-right@1.5x.png");
+  }
+}
+
+@media (min-resolution: 2dppx) {
+  div:-moz-native-anonymous.moz-accessiblecaret.normal > #image {
+    background-image: url("resource://gre-resources/accessiblecaret-normal@2x.png");
+  }
+
+  div:-moz-native-anonymous.moz-accessiblecaret.left > #image {
+    background-image: url("resource://gre-resources/accessiblecaret-tilt-left@2x.png");
+  }
+
+  div:-moz-native-anonymous.moz-accessiblecaret.right > #image {
+    background-image: url("resource://gre-resources/accessiblecaret-tilt-right@2x.png");
+  }
+}
+
+@media (min-resolution: 2.25dppx) {
+  div:-moz-native-anonymous.moz-accessiblecaret.normal > #image {
+    background-image: url("resource://gre-resources/accessiblecaret-normal@2.25x.png");
+  }
+
+  div:-moz-native-anonymous.moz-accessiblecaret.left > #image {
+    background-image: url("resource://gre-resources/accessiblecaret-tilt-left@2.25x.png");
+  }
+
+  div:-moz-native-anonymous.moz-accessiblecaret.right > #image {
+    background-image: url("resource://gre-resources/accessiblecaret-tilt-right@2.25x.png");
+  }
+}
+
+/* Custom content container in the CanvasFrame, positioned on top of everything
+   everything else, not reacting to pointer events. */
+div:-moz-native-anonymous.moz-custom-content-container {
+  pointer-events: none;
+  -moz-top-layer: top;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
diff --git a/layout/style/res/viewsource.css b/layout/style/res/viewsource.css
new file mode 100644
index 000000000..e586dc053
--- /dev/null
+++ b/layout/style/res/viewsource.css
@@ -0,0 +1,101 @@
+@charset "utf-8";
+/* 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 */
+
+*|*:root {
+  background-color: white;
+  color: black;
+  direction: ltr;
+  -moz-control-character-visibility: visible;
+  height: 100%;
+}
+#viewsource {
+  font-family: -moz-fixed;
+  font-weight: normal;
+  white-space: pre;
+  counter-reset: line;
+  height: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 8px;
+}
+#viewsource.wrap {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+pre {
+  font: inherit;
+  color: inherit;
+  white-space: inherit;
+  margin: 0 0 0 5ch;
+}
+pre[id]:before,
+span[id]:before {
+  content: counter(line) " ";
+  counter-increment: line;
+  -moz-user-select: none;
+  display: inline-block;
+  width: 5ch;
+  margin: 0 0 0 -5ch;
+  text-align: right;
+  color: #ccc;
+  font-weight: normal;
+  font-style: normal;
+}
+.highlight .start-tag {
+ color: purple;
+ font-weight: bold;
+}
+.highlight .end-tag {
+ color: purple;
+ font-weight: bold;
+}
+.highlight .comment {
+ color: green;
+ font-style: italic;
+}
+.highlight .cdata {
+ color: #CC0066;
+}
+.highlight .doctype {
+ color: steelblue;
+ font-style: italic;
+}
+.highlight .pi {
+ color: orchid;
+ font-style: italic;
+}
+.highlight .entity {
+ color: #FF4500;
+ font-weight: normal;
+}
+.highlight .text {
+  font-weight: normal;
+}
+.highlight .attribute-name {
+ color: black;
+ font-weight: bold;
+}
+.highlight .attribute-value {
+ color: blue;
+ font-weight: normal;
+}
+.highlight .markupdeclaration {
+ color: steelblue;
+ font-style: italic;
+}
+span:not(.error), a:not(.error) {
+ unicode-bidi: embed;
+}
+span[id] {
+ unicode-bidi: isolate;
+}
+.highlight .error,
+.highlight .error > :-moz-any(.start-tag, .end-tag, .comment, .cdata, .doctype,
+                              .pi, .entity, .attribute-name, .attribute-value) {
+  color: red;
+  font-weight: bold;
+}