Bug 1340483 - Part 5. Add basic layout style for preview node. r=heycam draft
authorRay Lin <ralin@mozilla.com>
Fri, 31 Mar 2017 14:02:03 +0800
changeset 564428 13fc7c962278662af4760a60c8f7fb237c2b85dd
parent 564427 75e7f7cbd512dee072b2e7fc6f384e989956e9a3
child 624729 e11969f16be43e3512c972de54e77bc83e48eb8e
push id54590
push userbmo:ralin@mozilla.com
push dateTue, 18 Apr 2017 14:37:59 +0000
reviewersheycam
bugs1340483
milestone55.0a1
Bug 1340483 - Part 5. Add basic layout style for preview node. r=heycam MozReview-Commit-ID: IuTnIy7r0w8
layout/style/res/forms.css
--- a/layout/style/res/forms.css
+++ b/layout/style/res/forms.css
@@ -161,72 +161,81 @@ textarea {
 
 textarea > scrollbar {
   cursor: default;
 }
 
 textarea > .anonymous-div,
 input > .anonymous-div,
 input::placeholder,
-textarea::placeholder {
+textarea::placeholder,
+input > .preview-div
+textarea > .preview-div {
   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 {
+input::placeholder,
+input > .preview-div {
   white-space: pre;
 }
 
 input > .anonymous-div.wrap {
   white-space: pre-wrap;
 }
 textarea > .anonymous-div.inherit-overflow,
 input > .anonymous-div.inherit-overflow {
   overflow: inherit;
 }
 textarea > .anonymous-div.inherit-scroll-behavior,
 input > .anonymous-div.inherit-scroll-behavior {
   scroll-behavior: inherit;
 }
 
 input::placeholder,
-textarea::placeholder {
+textarea::placeholder,
+input > .preview-div,
+textarea > .preview-div {
   /*
    * 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
+   * The placeholder or preview should be ignored by pointer otherwise, we might have some
    * unexpected behavior like the resize handle not being selectable.
    */
   pointer-events: none !important;
+}
 
+input::placeholder,
+textarea::placeholder {
   opacity: 0.54;
 }
 
-textarea::placeholder {
+textarea::placeholder,
+textarea > .preview-div {
   white-space: pre-wrap !important;
 }
 
 input:-moz-read-write,
 textarea:-moz-read-write {
   -moz-user-modify: read-write !important;
 }