Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-02-24 19:37:15 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1758665 - Reorganize placeholder/editor/preview styles. r=tgiles

Browse Source 
The main fix is making line-height: -moz-block-height apply to the
preview. The rest is just cleanup, in order to deduplicate selectors.

overflow: hidden was redundant on the preview rule (it was already in
the ::placeholder, ::-moz-text-control-preview).

Not sure what the best way to test this would be, but it's late here...,
thoughts?

Differential Revision: https://phabricator.services.mozilla.com/D143659
This commit is contained in:
Emilio Cobos Álvarez 2022-04-20 07:28:45 +00:00
parent 2e1227e46b
commit dd11147a93
4 changed files with 59 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
layout/reftests/forms/input/text/autofill-line-height.html Normal file
View File

@ -0,0 +1,9 @@
<!doctype html>
<style>
input { height: 4em; color: GrayText; font-family: system-ui }
</style>
<input value="Autofill">
<script>
let input = SpecialPowers.wrap(document.querySelector("input"));
SpecialPowers.wrap(window).windowUtils.addManuallyManagedState(input, "autofill");
</script>

12
layout/reftests/forms/input/text/autofill-preview-line-height.html Normal file
View File

@ -0,0 +1,12 @@
<!doctype html>
<style>
input { height: 4em; font-family: system-ui }
</style>
<input value="Autofill">
<script>
let input = SpecialPowers.wrap(document.querySelector("input"));
SpecialPowers.Cc["@mozilla.org/satchel/form-fill-controller;1"].getService(SpecialPowers.Ci.nsIFormFillController).markAsAutofillField(input);
input.getBoundingClientRect(); // previewValue setter depends on the reframe posted by markAsAutofillField() having being processed...
input.previewValue = "Autofill";
SpecialPowers.wrap(window).windowUtils.addManuallyManagedState(input, "-moz-autofill-preview");
</script>

1
layout/reftests/forms/input/text/reftest.list
View File

@ -17,6 +17,7 @@ fuzzy(0-1,0-500) needs-focus == select.html select-ref.html
!= autofill-preview.html autofill-preview-blank.html
!= autofill.html autofill-preview.html
== autofill-prefilled-value.html autofill-preview.html
== autofill-preview-line-height.html autofill-line-height.html
== pseudo-class-lock.html pseudo-class-lock-ref.html

79
layout/style/res/forms.css
View File

@ -102,13 +102,6 @@ input {
}
}
input::-moz-text-control-editing-root,
input::placeholder {
word-wrap: normal;
/* Make the line-height equal to the available height */
line-height: -moz-block-height !important;
}
textarea {
display: inline-block;
appearance: auto;
@ -161,41 +154,6 @@ textarea > scrollbar {
visibility: hidden;
}
::-moz-text-control-preview {
overflow: hidden;
font-family: system-ui;
}
:not(:-moz-autofill-preview)::-moz-text-control-editing-root,
:placeholder-shown:not(:autofill)::placeholder,
:autofill::-moz-text-control-preview {
visibility: inherit;
}
input::-moz-text-control-editing-root,
input::placeholder,
input::-moz-text-control-preview {
white-space: pre;
}
input[type=password]::-moz-text-control-editing-root,
input[type=password]::-moz-text-control-preview {
/*
* In password fields, any character should be put same direction. Otherwise,
* caret position at typing tells everybody whether the character is an RTL
* or an LTR character. Unfortunately, this makes odd rendering when bidi
* text is unmasked.
*/
unicode-bidi: bidi-override;
}
textarea::-moz-text-control-editing-root {
scroll-behavior: inherit;
overscroll-behavior: inherit;
/* StyleAdjuster makes sure that the overflow value ends up being scrollable */
overflow: inherit;
}
::placeholder,
::-moz-text-control-preview {
/*
@ -219,10 +177,47 @@ textarea::-moz-text-control-editing-root {
user-select: none;
}
::-moz-text-control-preview {
font-family: system-ui;
}
::placeholder {
opacity: 0.54;
}
:not(:-moz-autofill-preview)::-moz-text-control-editing-root,
:placeholder-shown:not(:autofill)::placeholder,
:autofill::-moz-text-control-preview {
visibility: inherit;
}
input::placeholder,
input::-moz-text-control-editing-root,
input::-moz-text-control-preview {
word-wrap: normal;
white-space: pre;
/* Make the line-height equal to the available height */
line-height: -moz-block-height !important;
}
input[type=password]::-moz-text-control-editing-root,
input[type=password]::-moz-text-control-preview {
/*
* In password fields, any character should be put same direction. Otherwise,
* caret position at typing tells everybody whether the character is an RTL
* or an LTR character. Unfortunately, this makes odd rendering when bidi
* text is unmasked.
*/
unicode-bidi: bidi-override;
}
textarea::-moz-text-control-editing-root {
scroll-behavior: inherit;
overscroll-behavior: inherit;
/* StyleAdjuster makes sure that the overflow value ends up being scrollable */
overflow: inherit;
}
input:read-write,
textarea:read-write {
-moz-user-modify: read-write !important;