summaryrefslogtreecommitdiffstats
path: root/layout/style/res
diff options
context:
space:
mode:
Diffstat (limited to 'layout/style/res')
-rw-r--r--layout/style/res/forms.css63
-rw-r--r--layout/style/res/html.css133
2 files changed, 94 insertions, 102 deletions
diff --git a/layout/style/res/forms.css b/layout/style/res/forms.css
index 9fb833aa74..a2d026639b 100644
--- a/layout/style/res/forms.css
+++ b/layout/style/res/forms.css
@@ -259,40 +259,27 @@ select:-moz-select-list-box {
}
select > button {
- inline-size: 12px;
- white-space: nowrap;
- position: static;
+ padding: 0;
+ border: 0;
appearance: auto;
-moz-default-appearance: -moz-menulist-arrow-button;
- /* Make sure to size correctly if the combobox has a non-auto height. */
- block-size: 100%;
- box-sizing: border-box;
-
/* Draw the arrow in the select's color */
color: inherit;
- /*
- 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.
- */
+ /* We don't want the button to grow the line-height */
+ font: inherit;
+ max-block-size: 100%;
+
+ /* Make sure to align properly with the display frame. Note that we want the
+ * baseline of the combobox to match the baseline of the label, so the
+ * dropmarker is what gets the vertical-align. */
vertical-align: top;
}
-*|*::-moz-display-comboboxcontrol-frame {
- content: inherit;
+select > label {
+ display: inline-block;
overflow: clip;
- color: unset;
- white-space: nowrap;
- text-align: unset;
- user-select: none;
- /* Make sure to size correctly if the combobox has a non-auto block-size. */
- block-size: 100%;
- /* Try to always display our own text */
- min-inline-size: max-content;
- box-sizing: border-box;
- line-height: -moz-block-height;
}
option[label]::before {
@@ -668,16 +655,15 @@ input[type=file] > label {
* 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.
+ * inherit into the label 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.
*/
::placeholder,
::-moz-text-control-editing-root,
*|*::-moz-button-content,
-*|*::-moz-display-comboboxcontrol-frame,
-optgroup:before {
+select > label,
+optgroup::before {
unicode-bidi: inherit;
text-overflow: inherit;
}
@@ -868,6 +854,13 @@ input[type=number]::-moz-number-spin-box {
overflow: clip;
}
+/* stylelint-disable-next-line media-query-no-invalid */
+@media (-moz-bool-pref: "dom.forms.number.hide_spin_buttons_when_no_hover_or_focus") {
+ input[type=number]:not(:hover, :focus)::-moz-number-spin-box {
+ opacity: 0;
+ }
+}
+
input[type=number]::-moz-number-spin-up,
input[type=number]::-moz-number-spin-down {
writing-mode: horizontal-tb;
@@ -922,11 +915,7 @@ input:is([type=date], [type=time], [type=datetime-local]):is(:disabled, :read-on
}
input:autofill, select:autofill {
- /* The idea behind using background-image instead of plain background-color
- * is that it's less likely to be overridden by the page. */
- background-image: linear-gradient(-moz-autofill-background, -moz-autofill-background);
-}
-
-input:-moz-autofill-preview, select:-moz-autofill-preview {
- color: GrayText;
+ background-color: -moz-autofill-background !important;
+ background-image: none !important;
+ color: FieldText !important;
}
diff --git a/layout/style/res/html.css b/layout/style/res/html.css
index 383aa35f7b..ff58ecd4d1 100644
--- a/layout/style/res/html.css
+++ b/layout/style/res/html.css
@@ -149,10 +149,8 @@ dd {
blockquote, figure {
display: block;
- margin-block-start: 1em;
- margin-block-end: 1em;
- margin-inline-start: 40px;
- margin-inline-end: 40px;
+ margin-block: 1em;
+ margin-inline: 40px;
}
address {
@@ -169,68 +167,85 @@ h1 {
display: block;
font-size: 2em;
font-weight: bold;
- margin-block-start: .67em;
- margin-block-end: .67em;
+ margin-block: .67em;
}
-h2,
-:is(article, aside, nav, section)
-h1 {
+h2 {
display: block;
font-size: 1.5em;
font-weight: bold;
- margin-block-start: .83em;
- margin-block-end: .83em;
+ margin-block: .83em;
}
-h3,
-:is(article, aside, nav, section)
-:is(article, aside, nav, section)
-h1 {
+h3 {
display: block;
font-size: 1.17em;
font-weight: bold;
- margin-block-start: 1em;
- margin-block-end: 1em;
+ margin-block: 1em;
}
-h4,
-:is(article, aside, nav, section)
-:is(article, aside, nav, section)
-:is(article, aside, nav, section)
-h1 {
+h4 {
display: block;
font-size: 1.00em;
font-weight: bold;
- margin-block-start: 1.33em;
- margin-block-end: 1.33em;
+ margin-block: 1.33em;
}
-h5,
-:is(article, aside, nav, section)
-:is(article, aside, nav, section)
-:is(article, aside, nav, section)
-:is(article, aside, nav, section)
-h1 {
+h5 {
display: block;
font-size: 0.83em;
font-weight: bold;
- margin-block-start: 1.67em;
- margin-block-end: 1.67em;
+ margin-block: 1.67em;
}
-h6,
-:is(article, aside, nav, section)
-:is(article, aside, nav, section)
-:is(article, aside, nav, section)
-:is(article, aside, nav, section)
-:is(article, aside, nav, section)
-h1 {
+h6 {
display: block;
font-size: 0.67em;
font-weight: bold;
- margin-block-start: 2.33em;
- margin-block-end: 2.33em;
+ margin-block: 2.33em;
+}
+
+/* stylelint-disable-next-line media-query-no-invalid */
+@media (-moz-bool-pref: "layout.css.h1-in-section-ua-styles.enabled") {
+ :is(article, aside, nav, section)
+ h1 {
+ margin-block: 0.83em;
+ font-size: 1.50em;
+ }
+
+ :is(article, aside, nav, section)
+ :is(article, aside, nav, section)
+ h1 {
+ margin-block: 1.00em;
+ font-size: 1.17em;
+ }
+
+ :is(article, aside, nav, section)
+ :is(article, aside, nav, section)
+ :is(article, aside, nav, section)
+ h1 {
+ margin-block: 1.33em;
+ font-size: 1.00em;
+ }
+
+ :is(article, aside, nav, section)
+ :is(article, aside, nav, section)
+ :is(article, aside, nav, section)
+ :is(article, aside, nav, section)
+ h1 {
+ margin-block: 1.67em;
+ font-size: 0.83em;
+ }
+
+ :is(article, aside, nav, section)
+ :is(article, aside, nav, section)
+ :is(article, aside, nav, section)
+ :is(article, aside, nav, section)
+ :is(article, aside, nav, section)
+ h1 {
+ margin-block: 2.33em;
+ font-size: 0.67em;
+ }
}
listing {
@@ -238,16 +253,14 @@ listing {
font-family: -moz-fixed;
font-size: medium;
white-space: pre;
- margin-block-start: 1em;
- margin-block-end: 1em;
+ margin-block: 1em;
}
xmp, pre, plaintext {
display: block;
font-family: -moz-fixed;
white-space: pre;
- margin-block-start: 1em;
- margin-block-end: 1em;
+ margin-block: 1em;
}
/* tables */
@@ -380,25 +393,19 @@ 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;
+ border-inline-width: thin;
+ border-inline-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;
+ border-inline-width: thin;
+ border-inline-style: solid;
}
table[rules][rules="groups"] > tfoot,
table[rules][rules="groups"] > thead,
table[rules][rules="groups"] > tbody {
- border-block-start-width: thin;
- border-block-end-width: thin;
- border-block-start-style: solid;
- border-block-end-style: solid;
+ border-block-width: thin;
+ border-block-style: solid;
}
@@ -409,8 +416,7 @@ caption {
}
table[align="center"] > caption {
- margin-inline-start: auto;
- margin-inline-end: auto;
+ margin-inline: auto;
}
table[align="center"] > caption[align="left"]:dir(ltr) {
@@ -589,8 +595,7 @@ li {
:is(ul, ol, dir, menu, dl) dir,
:is(ul, ol, dir, menu, dl) menu,
:is(ul, ol, dir, menu, dl) dl {
- margin-block-start: 0;
- margin-block-end: 0;
+ margin-block: 0;
}
/* 2 deep unordered lists use a circle */
@@ -618,10 +623,8 @@ hr {
color: gray;
border-width: 1px;
border-style: inset;
- margin-block-start: 0.5em;
- margin-block-end: 0.5em;
- margin-inline-start: auto;
- margin-inline-end: auto;
+ margin-block: 0.5em;
+ margin-inline: auto;
overflow: hidden;
/* FIXME: This is not really per spec */