diff --git a/content/events/public/nsIEventStateManager.h b/content/events/public/nsIEventStateManager.h
index c94c52bbd076..16c628ecfe44 100644
--- a/content/events/public/nsIEventStateManager.h
+++ b/content/events/public/nsIEventStateManager.h
@@ -217,4 +217,7 @@ NS_DEFINE_STATIC_IID_ACCESSOR(nsIEventStateManager, NS_IEVENTSTATEMANAGER_IID)
 // content has focus and should show a ring
 #define NS_EVENT_STATE_FOCUSRING     (1 << 29)
 
+// Content shows its placeholder
+#define NS_EVENT_STATE_MOZ_PLACEHOLDER (1 << 30)
+
 #endif // nsIEventStateManager_h__
diff --git a/content/html/content/src/nsHTMLInputElement.cpp b/content/html/content/src/nsHTMLInputElement.cpp
index 85d2693db87c..1705142f4a6f 100644
--- a/content/html/content/src/nsHTMLInputElement.cpp
+++ b/content/html/content/src/nsHTMLInputElement.cpp
@@ -507,7 +507,8 @@ nsHTMLInputElement::AfterSetAttr(PRInt32 aNameSpaceID, nsIAtom* aName,
                 NS_EVENT_STATE_OPTIONAL |
                 NS_EVENT_STATE_VALID |
                 NS_EVENT_STATE_INVALID |
-                NS_EVENT_STATE_INDETERMINATE;
+                NS_EVENT_STATE_INDETERMINATE |
+                NS_EVENT_STATE_MOZ_PLACEHOLDER;
     }
 
     if (aName == nsGkAtoms::required || aName == nsGkAtoms::disabled ||
@@ -986,6 +987,15 @@ nsHTMLInputElement::SetValueInternal(const nsAString& aValue,
     }
     mInputData.mState->SetValue(value, aUserInput);
 
+    if (PlaceholderApplies() &&
+        HasAttr(kNameSpaceID_None, nsGkAtoms::placeholder)) {
+      nsIDocument* doc = GetCurrentDoc();
+      if (doc) {
+        mozAutoDocUpdate upd(doc, UPDATE_CONTENT_STATE, PR_TRUE);
+        doc->ContentStatesChanged(this, nsnull, NS_EVENT_STATE_MOZ_PLACEHOLDER);
+      }
+    }
+
     return NS_OK;
   }
 
@@ -1647,6 +1657,19 @@ nsHTMLInputElement::PostHandleEvent(nsEventChainPostVisitor& aVisitor)
     return NS_OK;
   }
 
+  if (PlaceholderApplies() &&
+      HasAttr(kNameSpaceID_None, nsGkAtoms::placeholder) &&
+      // TODO: checking if the value is empty could be a good idea but we do not
+      // have a simple way to do that, see bug 585100
+      (aVisitor.mEvent->message == NS_FOCUS_CONTENT ||
+       aVisitor.mEvent->message == NS_BLUR_CONTENT)) {
+    nsIDocument* doc = GetCurrentDoc();
+    if (doc) {
+      MOZ_AUTO_DOC_UPDATE(doc, UPDATE_CONTENT_STATE, PR_TRUE);
+      doc->ContentStatesChanged(this, nsnull, NS_EVENT_STATE_MOZ_PLACEHOLDER);
+    }
+  }
+
   // ignore the activate event fired by the "Browse..." button
   // (file input controls fire their own) (bug 500885)
   if (mType == NS_FORM_INPUT_FILE) {
@@ -2796,6 +2819,23 @@ nsHTMLInputElement::IntrinsicState() const
     state |= IsValid() ? NS_EVENT_STATE_VALID : NS_EVENT_STATE_INVALID;
   }
 
+  if (PlaceholderApplies() && HasAttr(kNameSpaceID_None, nsGkAtoms::placeholder) &&
+      !nsContentUtils::IsFocusedContent((nsIContent*)(this))) {
+    // TODO: we really need a GetValue(...) const method, see bug 585097
+    nsTextEditorState* edState = GetEditorState();
+    nsAutoString value;
+
+    if (edState) {
+      edState->GetValue(value, PR_TRUE);
+    } else {
+      GetAttr(kNameSpaceID_None, nsGkAtoms::value, value);
+    }
+
+    if (value.IsEmpty()) {
+      state |= NS_EVENT_STATE_MOZ_PLACEHOLDER;
+    }
+  }
+
   return state;
 }
 
@@ -3872,5 +3912,17 @@ NS_IMETHODIMP_(void)
 nsHTMLInputElement::OnValueChanged(PRBool aNotify)
 {
   UpdateAllValidityStates(aNotify);
+
+  // :-moz-placeholder pseudo-class may change when the value changes.
+  // However, we don't want to waste cycles if the state doesn't apply.
+  if (aNotify && PlaceholderApplies()
+      && HasAttr(kNameSpaceID_None, nsGkAtoms::placeholder)
+      && !nsContentUtils::IsFocusedContent((nsIContent*)(this))) {
+    nsIDocument* doc = GetCurrentDoc();
+    if (doc) {
+      MOZ_AUTO_DOC_UPDATE(doc, UPDATE_CONTENT_STATE, PR_TRUE);
+      doc->ContentStatesChanged(this, nsnull, NS_EVENT_STATE_MOZ_PLACEHOLDER);
+    }
+  }
 }
 
diff --git a/content/html/content/src/nsHTMLInputElement.h b/content/html/content/src/nsHTMLInputElement.h
index 96a3f627aae6..2747af00f42d 100644
--- a/content/html/content/src/nsHTMLInputElement.h
+++ b/content/html/content/src/nsHTMLInputElement.h
@@ -452,6 +452,11 @@ protected:
    */
   void SanitizeValue(nsAString& aValue);
 
+  /**
+   * Returns whether the placeholder attribute applies for the current type.
+   */
+  bool PlaceholderApplies() const { return IsSingleLineTextControlInternal(PR_FALSE, mType); }
+
   /**
    * Set the current default value to the value of the input element.
    */
diff --git a/content/html/content/src/nsHTMLTextAreaElement.cpp b/content/html/content/src/nsHTMLTextAreaElement.cpp
index 0769b6036aab..e70a25274687 100644
--- a/content/html/content/src/nsHTMLTextAreaElement.cpp
+++ b/content/html/content/src/nsHTMLTextAreaElement.cpp
@@ -546,6 +546,15 @@ nsHTMLTextAreaElement::SetValueChanged(PRBool aValueChanged)
   if (!aValueChanged && !mState->IsEmpty()) {
     mState->EmptyValue();
   }
+
+  if (HasAttr(kNameSpaceID_None, nsGkAtoms::placeholder)) {
+    nsIDocument* doc = GetCurrentDoc();
+    if (doc) {
+      mozAutoDocUpdate upd(doc, UPDATE_CONTENT_STATE, PR_TRUE);
+      doc->ContentStatesChanged(this, nsnull, NS_EVENT_STATE_MOZ_PLACEHOLDER);
+    }
+  }
+
   return NS_OK;
 }
 
@@ -693,6 +702,18 @@ nsHTMLTextAreaElement::PostHandleEvent(nsEventChainPostVisitor& aVisitor)
     mHandlingSelect = PR_FALSE;
   }
 
+  if (HasAttr(kNameSpaceID_None, nsGkAtoms::placeholder) &&
+      // TODO: checking if the value is empty could be a good idea but we do not
+      // have a simple way to do that, see bug 585100
+      (aVisitor.mEvent->message == NS_FOCUS_CONTENT ||
+       aVisitor.mEvent->message == NS_BLUR_CONTENT)) {
+    nsIDocument* doc = GetCurrentDoc();
+    if (doc) {
+      MOZ_AUTO_DOC_UPDATE(doc, UPDATE_CONTENT_STATE, PR_TRUE);
+      doc->ContentStatesChanged(this, nsnull, NS_EVENT_STATE_MOZ_PLACEHOLDER);
+    }
+  }
+
   // Reset the flag for other content besides this text field
   aVisitor.mEvent->flags |= (aVisitor.mItemFlags & NS_NO_CONTENT_DISPATCH)
     ? NS_EVENT_FLAG_NO_CONTENT_DISPATCH : NS_EVENT_FLAG_NONE;
@@ -894,7 +915,6 @@ nsHTMLTextAreaElement::SubmitNamesValues(nsFormSubmission* aFormSubmission)
   return rv;
 }
 
-
 NS_IMETHODIMP
 nsHTMLTextAreaElement::SaveState()
 {
@@ -971,6 +991,15 @@ nsHTMLTextAreaElement::IntrinsicState() const
     state |= IsValid() ? NS_EVENT_STATE_VALID : NS_EVENT_STATE_INVALID;
   }
 
+  if (HasAttr(kNameSpaceID_None, nsGkAtoms::placeholder) &&
+      !nsContentUtils::IsFocusedContent((nsIContent*)(this))) {
+    nsAutoString value;
+    GetValueInternal(value, PR_TRUE);
+    if (value.IsEmpty()) {
+      state |= NS_EVENT_STATE_MOZ_PLACEHOLDER;
+    }
+  }
+
   return state;
 }
 
@@ -1308,8 +1337,14 @@ nsHTMLTextAreaElement::OnValueChanged(PRBool aNotify)
   if (aNotify) {
     nsIDocument* doc = GetCurrentDoc();
     if (doc) {
+      MOZ_AUTO_DOC_UPDATE(doc, UPDATE_CONTENT_STATE, PR_TRUE);
       doc->ContentStatesChanged(this, nsnull, NS_EVENT_STATE_VALID |
-                                              NS_EVENT_STATE_INVALID);
+                                              NS_EVENT_STATE_INVALID |
+                                              // We could check if that is
+                                              // really needed but considering
+                                              // we are already updating the
+                                              // state for valid/invalid...
+                                              NS_EVENT_STATE_MOZ_PLACEHOLDER);
     }
   }
 }
diff --git a/layout/reftests/css-placeholder/input/placeholder-add.html b/layout/reftests/css-placeholder/input/placeholder-add.html
new file mode 100644
index 000000000000..a915e578a82b
--- /dev/null
+++ b/layout/reftests/css-placeholder/input/placeholder-add.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <script>
+    function loadHandler()
+    {
+      document.getElementById('i').placeholder='foo';
+      document.documentElement.className = '';
+    }
+  </script>
+  <body onload='loadHandler();'>
+    <input id='i'>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/input/placeholder-blur.html b/layout/reftests/css-placeholder/input/placeholder-blur.html
new file mode 100644
index 000000000000..d84730da09a1
--- /dev/null
+++ b/layout/reftests/css-placeholder/input/placeholder-blur.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <script>
+    function loadHandler()
+    {
+      document.getElementById('i').focus();
+    }
+    function focusHandler()
+    {
+      document.getElementById('i').blur();
+    }
+    function blurHandler()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+  <body onload='loadHandler();'>
+    <input id='i' placeholder='foo' onfocus='focusHandler();' onblur='blurHandler();'>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/input/placeholder-button-ref.html b/layout/reftests/css-placeholder/input/placeholder-button-ref.html
new file mode 100644
index 000000000000..c43b0b25b279
--- /dev/null
+++ b/layout/reftests/css-placeholder/input/placeholder-button-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body>
+    <input type='button'>
+  </body>
+</html>
+
diff --git a/layout/reftests/css-placeholder/input/placeholder-complex-ref.html b/layout/reftests/css-placeholder/input/placeholder-complex-ref.html
new file mode 100644
index 000000000000..df1978b53446
--- /dev/null
+++ b/layout/reftests/css-placeholder/input/placeholder-complex-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body>
+    <input class='complex-ref' value='foo'>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/input/placeholder-complex.html b/layout/reftests/css-placeholder/input/placeholder-complex.html
new file mode 100644
index 000000000000..2ef0e2dd2cfe
--- /dev/null
+++ b/layout/reftests/css-placeholder/input/placeholder-complex.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body>
+    <input class='complex' placeholder='foo'>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/input/placeholder-empty-string-ref.html b/layout/reftests/css-placeholder/input/placeholder-empty-string-ref.html
new file mode 100644
index 000000000000..ad0de3cfbad2
--- /dev/null
+++ b/layout/reftests/css-placeholder/input/placeholder-empty-string-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body>
+    <input class='ref'>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/input/placeholder-empty-string.html b/layout/reftests/css-placeholder/input/placeholder-empty-string.html
new file mode 100644
index 000000000000..8d9dfb5b41a1
--- /dev/null
+++ b/layout/reftests/css-placeholder/input/placeholder-empty-string.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body>
+    <input placeholder=''>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/input/placeholder-focus-ref.html b/layout/reftests/css-placeholder/input/placeholder-focus-ref.html
new file mode 100644
index 000000000000..c9f2cd40e44c
--- /dev/null
+++ b/layout/reftests/css-placeholder/input/placeholder-focus-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <script>
+    function loadHandler()
+    {
+      document.getElementById('i').focus();
+    }
+    function focusHandler()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+  <body onload='loadHandler();'>
+    <input id='i' onfocus='focusHandler();'>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/input/placeholder-focus.html b/layout/reftests/css-placeholder/input/placeholder-focus.html
new file mode 100644
index 000000000000..501cb35d5f58
--- /dev/null
+++ b/layout/reftests/css-placeholder/input/placeholder-focus.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <script>
+    function loadHandler()
+    {
+      document.getElementById('i').focus();
+    }
+    function focusHandler()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+  <body onload='loadHandler();'>
+    <input id='i' placeholder='foo' onfocus='focusHandler();'>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/input/placeholder-removal.html b/layout/reftests/css-placeholder/input/placeholder-removal.html
new file mode 100644
index 000000000000..e13c23310509
--- /dev/null
+++ b/layout/reftests/css-placeholder/input/placeholder-removal.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <script>
+    function loadHandler()
+    {
+      document.getElementById('i').removeAttribute('placeholder');
+      document.documentElement.className = '';
+    }
+  </script>
+  <body onload='loadHandler();'>
+    <input id='i' placeholder='foo'>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/input/placeholder-simple-ref.html b/layout/reftests/css-placeholder/input/placeholder-simple-ref.html
new file mode 100644
index 000000000000..f0a8a625415f
--- /dev/null
+++ b/layout/reftests/css-placeholder/input/placeholder-simple-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body>
+    <input class='ref' value='foo'>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/input/placeholder-simple.html b/layout/reftests/css-placeholder/input/placeholder-simple.html
new file mode 100644
index 000000000000..6fd72a2bb9b6
--- /dev/null
+++ b/layout/reftests/css-placeholder/input/placeholder-simple.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body>
+    <input placeholder='foo'>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/input/placeholder-type-change-1.html b/layout/reftests/css-placeholder/input/placeholder-type-change-1.html
new file mode 100644
index 000000000000..b59e951d54ca
--- /dev/null
+++ b/layout/reftests/css-placeholder/input/placeholder-type-change-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <script>
+    function loadHandler()
+    {
+      document.getElementById('i').type = 'text';
+      document.documentElement.className = '';
+    }
+  </script>
+  <body onload='loadHandler();'>
+    <input type='button' id='i' placeholder='foo'>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/input/placeholder-type-change-2.html b/layout/reftests/css-placeholder/input/placeholder-type-change-2.html
new file mode 100644
index 000000000000..59b26db90088
--- /dev/null
+++ b/layout/reftests/css-placeholder/input/placeholder-type-change-2.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <script>
+    function loadHandler()
+    {
+      document.getElementById('i').type = 'button';
+      document.documentElement.className = '';
+    }
+  </script>
+  <body onload='loadHandler();'>
+    <input id='i' placeholder='foo'>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/input/placeholder-value-ref.html b/layout/reftests/css-placeholder/input/placeholder-value-ref.html
new file mode 100644
index 000000000000..e2cd0837906c
--- /dev/null
+++ b/layout/reftests/css-placeholder/input/placeholder-value-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input value='bar'>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/input/placeholder-value-reset.html b/layout/reftests/css-placeholder/input/placeholder-value-reset.html
new file mode 100644
index 000000000000..16bb79376736
--- /dev/null
+++ b/layout/reftests/css-placeholder/input/placeholder-value-reset.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <script>
+    function loadHandler()
+    {
+      document.getElementById('i').value = 'bar';
+      document.forms[0].reset();
+      document.documentElement.className = '';
+    }
+  </script>
+  <body onload='loadHandler();'>
+    <form>
+      <input id='i' placeholder='foo'>
+    </form>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/input/placeholder-value-set.html b/layout/reftests/css-placeholder/input/placeholder-value-set.html
new file mode 100644
index 000000000000..807ca264223a
--- /dev/null
+++ b/layout/reftests/css-placeholder/input/placeholder-value-set.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <script>
+    function loadHandler()
+    {
+      document.getElementById('i').value = 'bar';
+      document.documentElement.className = '';
+    }
+  </script>
+  <body onload='loadHandler();'>
+    <input id='i' placeholder='foo'>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/input/placeholder-value-unset.html b/layout/reftests/css-placeholder/input/placeholder-value-unset.html
new file mode 100644
index 000000000000..2b187211acc5
--- /dev/null
+++ b/layout/reftests/css-placeholder/input/placeholder-value-unset.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <script>
+    function loadHandler()
+    {
+      document.getElementById('i').value = '';
+      document.documentElement.className = '';
+    }
+  </script>
+  <body onload='loadHandler();'>
+    <input id='i' placeholder='foo' value='bar'>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/input/placeholder-value.html b/layout/reftests/css-placeholder/input/placeholder-value.html
new file mode 100644
index 000000000000..303310034be4
--- /dev/null
+++ b/layout/reftests/css-placeholder/input/placeholder-value.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body>
+    <input placeholder='foo' value='bar'>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/input/reftest.list b/layout/reftests/css-placeholder/input/reftest.list
new file mode 100644
index 000000000000..56e70e68318a
--- /dev/null
+++ b/layout/reftests/css-placeholder/input/reftest.list
@@ -0,0 +1,13 @@
+== placeholder-simple.html placeholder-simple-ref.html
+== placeholder-focus.html placeholder-focus-ref.html
+== placeholder-blur.html placeholder-simple-ref.html
+== placeholder-value.html placeholder-value-ref.html
+== placeholder-empty-string.html placeholder-empty-string-ref.html
+== placeholder-complex.html placeholder-complex-ref.html
+== placeholder-add.html placeholder-simple-ref.html
+== placeholder-removal.html data:text/html,<input>
+== placeholder-value-set.html placeholder-value-ref.html
+== placeholder-value-unset.html placeholder-simple-ref.html
+== placeholder-value-reset.html placeholder-simple-ref.html
+== placeholder-type-change-1.html placeholder-simple-ref.html
+== placeholder-type-change-2.html placeholder-button-ref.html
diff --git a/layout/reftests/css-placeholder/input/style.css b/layout/reftests/css-placeholder/input/style.css
new file mode 100644
index 000000000000..c7a023e05a22
--- /dev/null
+++ b/layout/reftests/css-placeholder/input/style.css
@@ -0,0 +1,17 @@
+input:-moz-placeholder,
+input.ref {
+  -moz-appearance: none;
+  color: black;
+  background-color: green;
+}
+
+input:-moz-placeholder.complex,
+input.complex-ref {
+  -moz-appearance: none;
+  color: green;
+  background-color: #c7c7c7;
+  font-style: italic;
+  border: 2px solid green;
+  height: 200px;
+  width: 200px;
+}
diff --git a/layout/reftests/css-placeholder/reftest.list b/layout/reftests/css-placeholder/reftest.list
new file mode 100644
index 000000000000..2be1bd9ce21b
--- /dev/null
+++ b/layout/reftests/css-placeholder/reftest.list
@@ -0,0 +1,2 @@
+include input/reftest.list
+include textarea/reftest.list
diff --git a/layout/reftests/css-placeholder/textarea/placeholder-add.html b/layout/reftests/css-placeholder/textarea/placeholder-add.html
new file mode 100644
index 000000000000..6953b340f102
--- /dev/null
+++ b/layout/reftests/css-placeholder/textarea/placeholder-add.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <script>
+    function loadHandler()
+    {
+      document.getElementById('t').placeholder='foo';
+      document.documentElement.className = '';
+    }
+  </script>
+  <body onload='loadHandler();'>
+    <textarea id='t'></textarea>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/textarea/placeholder-blur.html b/layout/reftests/css-placeholder/textarea/placeholder-blur.html
new file mode 100644
index 000000000000..642d1e8af61f
--- /dev/null
+++ b/layout/reftests/css-placeholder/textarea/placeholder-blur.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <script>
+    function loadHandler()
+    {
+      document.getElementById('t').focus();
+    }
+    function focusHandler()
+    {
+      document.getElementById('t').blur();
+    }
+    function blurHandler()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+  <body onload='loadHandler();'>
+    <textarea id='t' placeholder='foo' onfocus='focusHandler();' onblur='blurHandler();'></textarea>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/textarea/placeholder-complex-ref.html b/layout/reftests/css-placeholder/textarea/placeholder-complex-ref.html
new file mode 100644
index 000000000000..b37651d52dd7
--- /dev/null
+++ b/layout/reftests/css-placeholder/textarea/placeholder-complex-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body>
+    <textarea class='complex-ref'>foo</textarea>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/textarea/placeholder-complex.html b/layout/reftests/css-placeholder/textarea/placeholder-complex.html
new file mode 100644
index 000000000000..cc4dc17e0962
--- /dev/null
+++ b/layout/reftests/css-placeholder/textarea/placeholder-complex.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body>
+    <textarea class='complex' placeholder='foo'></textarea>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/textarea/placeholder-empty-string-ref.html b/layout/reftests/css-placeholder/textarea/placeholder-empty-string-ref.html
new file mode 100644
index 000000000000..09928f0ad2d0
--- /dev/null
+++ b/layout/reftests/css-placeholder/textarea/placeholder-empty-string-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body>
+    <textarea class='ref'></textarea>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/textarea/placeholder-empty-string.html b/layout/reftests/css-placeholder/textarea/placeholder-empty-string.html
new file mode 100644
index 000000000000..87f27256cd0e
--- /dev/null
+++ b/layout/reftests/css-placeholder/textarea/placeholder-empty-string.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body>
+    <textarea placeholder=''></textarea>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/textarea/placeholder-focus-ref.html b/layout/reftests/css-placeholder/textarea/placeholder-focus-ref.html
new file mode 100644
index 000000000000..91c11959331c
--- /dev/null
+++ b/layout/reftests/css-placeholder/textarea/placeholder-focus-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <script>
+    function loadHandler()
+    {
+      document.getElementById('t').focus();
+    }
+    function focusHandler()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+  <body onload='loadHandler();'>
+    <textarea id='t' onfocus='focusHandler();'></textarea>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/textarea/placeholder-focus.html b/layout/reftests/css-placeholder/textarea/placeholder-focus.html
new file mode 100644
index 000000000000..454880676576
--- /dev/null
+++ b/layout/reftests/css-placeholder/textarea/placeholder-focus.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <script>
+    function loadHandler()
+    {
+      document.getElementById('t').focus();
+    }
+    function focusHandler()
+    {
+      document.documentElement.className = '';
+    }
+  </script>
+  <body onload='loadHandler();'>
+    <textarea id='t' placeholder='foo' onfocus='focusHandler();'></textarea>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/textarea/placeholder-removal.html b/layout/reftests/css-placeholder/textarea/placeholder-removal.html
new file mode 100644
index 000000000000..cbbb24e36c8b
--- /dev/null
+++ b/layout/reftests/css-placeholder/textarea/placeholder-removal.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <script>
+    function loadHandler()
+    {
+      document.getElementById('t').removeAttribute('placeholder');
+      document.documentElement.className = '';
+    }
+  </script>
+  <body onload='loadHandler();'>
+    <textarea id='t' placeholder='foo'></textarea>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/textarea/placeholder-simple-ref.html b/layout/reftests/css-placeholder/textarea/placeholder-simple-ref.html
new file mode 100644
index 000000000000..e769ecb4dd1f
--- /dev/null
+++ b/layout/reftests/css-placeholder/textarea/placeholder-simple-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body>
+    <textarea class='ref'>foo</textarea>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/textarea/placeholder-simple.html b/layout/reftests/css-placeholder/textarea/placeholder-simple.html
new file mode 100644
index 000000000000..05fd0712e909
--- /dev/null
+++ b/layout/reftests/css-placeholder/textarea/placeholder-simple.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body>
+    <textarea placeholder='foo'></textarea>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/textarea/placeholder-value-ref.html b/layout/reftests/css-placeholder/textarea/placeholder-value-ref.html
new file mode 100644
index 000000000000..9c4a025611a2
--- /dev/null
+++ b/layout/reftests/css-placeholder/textarea/placeholder-value-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <textarea>bar</textarea>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/textarea/placeholder-value-reset.html b/layout/reftests/css-placeholder/textarea/placeholder-value-reset.html
new file mode 100644
index 000000000000..f1a83df73c5c
--- /dev/null
+++ b/layout/reftests/css-placeholder/textarea/placeholder-value-reset.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <script>
+    function loadHandler()
+    {
+      document.getElementById('t').value = 'bar';
+      document.forms[0].reset();
+      document.documentElement.className = '';
+    }
+  </script>
+  <body onload='loadHandler();'>
+    <form>
+      <textarea id='t' placeholder='foo'></textarea>
+    </form>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/textarea/placeholder-value-set.html b/layout/reftests/css-placeholder/textarea/placeholder-value-set.html
new file mode 100644
index 000000000000..4006cf55c349
--- /dev/null
+++ b/layout/reftests/css-placeholder/textarea/placeholder-value-set.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <script>
+    function loadHandler()
+    {
+      document.getElementById('t').value = 'bar';
+      document.documentElement.className = '';
+    }
+  </script>
+  <body onload='loadHandler();'>
+    <textarea id='t' placeholder='foo'></textarea>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/textarea/placeholder-value-unset.html b/layout/reftests/css-placeholder/textarea/placeholder-value-unset.html
new file mode 100644
index 000000000000..36b61916f430
--- /dev/null
+++ b/layout/reftests/css-placeholder/textarea/placeholder-value-unset.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html class='reftest-wait'>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <script>
+    function loadHandler()
+    {
+      document.getElementById('t').value = '';
+      document.documentElement.className = '';
+    }
+  </script>
+  <body onload='loadHandler();'>
+    <textarea id='t' placeholder='foo'>bar</textarea>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/textarea/placeholder-value.html b/layout/reftests/css-placeholder/textarea/placeholder-value.html
new file mode 100644
index 000000000000..177f3d265ef4
--- /dev/null
+++ b/layout/reftests/css-placeholder/textarea/placeholder-value.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <link rel='stylesheet' type='text/css' href='style.css'>
+  <body>
+    <textarea placeholder='foo'>bar</textarea>
+  </body>
+</html>
diff --git a/layout/reftests/css-placeholder/textarea/reftest.list b/layout/reftests/css-placeholder/textarea/reftest.list
new file mode 100644
index 000000000000..4e79126ed1d4
--- /dev/null
+++ b/layout/reftests/css-placeholder/textarea/reftest.list
@@ -0,0 +1,11 @@
+== placeholder-simple.html placeholder-simple-ref.html
+== placeholder-focus.html placeholder-focus-ref.html
+== placeholder-blur.html placeholder-simple-ref.html
+== placeholder-value.html placeholder-value-ref.html
+== placeholder-empty-string.html placeholder-empty-string-ref.html
+== placeholder-complex.html placeholder-complex-ref.html
+== placeholder-add.html placeholder-simple-ref.html
+== placeholder-removal.html data:text/html,<textarea></textarea>
+== placeholder-value-set.html placeholder-value-ref.html
+== placeholder-value-unset.html placeholder-simple-ref.html
+== placeholder-value-reset.html placeholder-simple-ref.html
diff --git a/layout/reftests/css-placeholder/textarea/style.css b/layout/reftests/css-placeholder/textarea/style.css
new file mode 100644
index 000000000000..f5f5a7314afb
--- /dev/null
+++ b/layout/reftests/css-placeholder/textarea/style.css
@@ -0,0 +1,17 @@
+textarea:-moz-placeholder,
+textarea.ref {
+  -moz-appearance: none;
+  color: black;
+  background-color: green;
+}
+
+textarea:-moz-placeholder.complex,
+textarea.complex-ref {
+  -moz-appearance: none;
+  color: green;
+  background-color: #c7c7c7;
+  font-style: italic;
+  border: 2px solid green;
+  height: 300px;
+  width: 300px;
+}
diff --git a/layout/reftests/reftest.list b/layout/reftests/reftest.list
index b73e6fd47526..6a9e8a36e5bb 100644
--- a/layout/reftests/reftest.list
+++ b/layout/reftests/reftest.list
@@ -65,6 +65,9 @@ include css-namespace/reftest.list
 # css parsing
 include css-parsing/reftest.list
 
+# css placeholder
+include css-placeholder/reftest.list
+
 # css required
 include css-required/reftest.list
 
diff --git a/layout/style/forms.css b/layout/style/forms.css
index 413534a8bf1d..624cf7ba9362 100644
--- a/layout/style/forms.css
+++ b/layout/style/forms.css
@@ -164,9 +164,13 @@ input > .anonymous-div.inherit-overflow {
   overflow: inherit;
 }
 
+input:-moz-placeholder,
+textarea:-moz-placeholder {
+  color: GrayText;
+}
+
 input > .placeholder,
 textarea > .placeholder {
-  color: GrayText;
   overflow: hidden;
   pointer-events: none;
   resize: none;
diff --git a/layout/style/nsCSSPseudoClassList.h b/layout/style/nsCSSPseudoClassList.h
index 72ea0c1c6515..e9ef48dbbd12 100644
--- a/layout/style/nsCSSPseudoClassList.h
+++ b/layout/style/nsCSSPseudoClassList.h
@@ -174,6 +174,8 @@ CSS_STATE_PSEUDO_CLASS(mozReadOnly, ":-moz-read-only",
                        NS_EVENT_STATE_MOZ_READONLY)
 CSS_STATE_PSEUDO_CLASS(mozReadWrite, ":-moz-read-write",
                        NS_EVENT_STATE_MOZ_READWRITE)
+CSS_STATE_PSEUDO_CLASS(mozPlaceholder, ":-moz-placeholder",
+                       NS_EVENT_STATE_MOZ_PLACEHOLDER)
 
 #ifdef DEFINED_CSS_STATE_PSEUDO_CLASS
 #undef DEFINED_CSS_STATE_PSEUDO_CLASS