Bug 1069012 - Unprefix ::placeholder pseudo-element. r=bz
authorThomas Wisniewski <wisniewskit@gmail.com>
Wed, 07 Sep 2016 19:38:38 -0400
changeset 354457 b31b1d10f122657179b894d8ceaedcdb99399073
parent 354456 c39042e6ec52f3ff6d7bc5401fc5c4b42bed570b
child 354458 23530934541a0d8c23232273f7900af27ef7c09c
push id6570
push userraliiev@mozilla.com
push dateMon, 14 Nov 2016 12:26:13 +0000
treeherdermozilla-beta@f455459b2ae5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbz
bugs1069012
milestone51.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1069012 - Unprefix ::placeholder pseudo-element. r=bz
browser/extensions/pocket/content/panels/css/saved.css
browser/themes/osx/browser.css
browser/themes/windows/browser.css
devtools/client/styleeditor/test/sourcemap-css/test-bootstrap-scss.css
devtools/client/themes/common.css
devtools/shared/css-properties-db.js
editor/reftests/xul/placeholder-reset.css
layout/forms/nsTextControlFrame.cpp
layout/inspector/tests/test_getCSSPseudoElementNames.html
layout/reftests/css-placeholder/css-background.html
layout/reftests/css-placeholder/css-restrictions.html
layout/reftests/css-placeholder/css-simple-styling-ref.html
layout/reftests/css-placeholder/css-simple-styling.html
layout/reftests/css-placeholder/ignore-pseudo-class.html
layout/reftests/css-placeholder/input/css-display.html
layout/reftests/css-placeholder/input/css-opacity.html
layout/reftests/css-placeholder/input/css-text-align.html
layout/reftests/css-placeholder/input/input-ref.html
layout/reftests/css-placeholder/input/placeholder-add.html
layout/reftests/css-placeholder/input/placeholder-blur.html
layout/reftests/css-placeholder/input/placeholder-button-ref.html
layout/reftests/css-placeholder/input/placeholder-focus-ref.html
layout/reftests/css-placeholder/input/placeholder-focus.html
layout/reftests/css-placeholder/input/placeholder-removal.html
layout/reftests/css-placeholder/input/placeholder-simple-ref.html
layout/reftests/css-placeholder/input/placeholder-simple.html
layout/reftests/css-placeholder/input/placeholder-type-change-1.html
layout/reftests/css-placeholder/input/placeholder-type-change-2.html
layout/reftests/css-placeholder/input/placeholder-value-ref.html
layout/reftests/css-placeholder/input/placeholder-value-reset.html
layout/reftests/css-placeholder/input/placeholder-value-set.html
layout/reftests/css-placeholder/input/placeholder-value-unset.html
layout/reftests/css-placeholder/input/placeholder-value.html
layout/reftests/css-placeholder/input/style-shown.css
layout/reftests/css-placeholder/input/style.css
layout/reftests/css-placeholder/textarea/css-display.html
layout/reftests/css-placeholder/textarea/css-opacity.html
layout/reftests/css-placeholder/textarea/css-resize-ref.html
layout/reftests/css-placeholder/textarea/css-resize.html
layout/reftests/css-placeholder/textarea/placeholder-add.html
layout/reftests/css-placeholder/textarea/placeholder-blur.html
layout/reftests/css-placeholder/textarea/placeholder-focus-ref.html
layout/reftests/css-placeholder/textarea/placeholder-focus.html
layout/reftests/css-placeholder/textarea/placeholder-removal.html
layout/reftests/css-placeholder/textarea/placeholder-simple-ref.html
layout/reftests/css-placeholder/textarea/placeholder-simple.html
layout/reftests/css-placeholder/textarea/placeholder-value-ref.html
layout/reftests/css-placeholder/textarea/placeholder-value-reset.html
layout/reftests/css-placeholder/textarea/placeholder-value-set.html
layout/reftests/css-placeholder/textarea/placeholder-value-unset.html
layout/reftests/css-placeholder/textarea/placeholder-value.html
layout/reftests/css-placeholder/textarea/style-shown.css
layout/reftests/css-placeholder/textarea/style.css
layout/reftests/css-placeholder/textarea/textarea-ref.html
layout/reftests/forms/input/number/number-placeholder-ref.html
layout/reftests/forms/input/number/number-placeholder.html
layout/reftests/forms/placeholder/placeholder-style.css
layout/reftests/text-overflow/anonymous-block.html
layout/style/crashtests/989965-1.html
layout/style/nsCSSParser.cpp
layout/style/nsCSSProps.h
layout/style/nsCSSPseudoElementList.h
layout/style/nsCSSPseudoElements.cpp
layout/style/nsCSSRuleProcessor.cpp
layout/style/nsRuleNode.cpp
layout/style/nsStyleSet.cpp
layout/style/res/forms.css
layout/style/test/test_pseudoelement_state.html
layout/style/test/test_selectors.html
mobile/android/themes/core/config.css
toolkit/content/textbox.css
toolkit/themes/windows/global/textbox.css
--- a/browser/extensions/pocket/content/panels/css/saved.css
+++ b/browser/extensions/pocket/content/panels/css/saved.css
@@ -401,17 +401,17 @@
     float: left;
     line-height: normal;
     height: auto;
     min-height: 0;
     min-width: 5em;
     padding: 3px 2px 1px;
     text-transform: none;
 }
-.pkt_ext_containersaved .pkt_ext_tag_input_wrapper input::-moz-placeholder {
+.pkt_ext_containersaved .pkt_ext_tag_input_wrapper input::placeholder {
     color: #a9a9a9;
     letter-spacing: normal;
     text-transform: none;
 }
 .pkt_ext_containersaved .input_disabled {
     cursor: default;
     opacity: 0.5;
 }
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -2325,17 +2325,17 @@ html|span.ac-emphasize-text-url {
   }
 
   #editBookmarkPanel .expander-up > .button-box > .button-icon,
   #editBookmarkPanel .expander-down > .button-box > .button-icon {
     width: 9px;
   }
 }
 
-#editBMPanel_tagsField > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
+#editBMPanel_tagsField > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::placeholder {
   opacity: 1.0;
   color: #bbb;
 }
 
 .editBMPanel_rowLabel {
   text-align: end;
 }
 
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -1352,18 +1352,18 @@ toolbar[brighttext] #close-button {
   /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
   transform: scaleX(-1);
 }
 
 @conditionalForwardWithUrlbar@:-moz-locale-dir(rtl) {
   -moz-box-direction: reverse;
 }
 
-html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
-.searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
+html|*.urlbar-input:-moz-lwtheme::placeholder,
+.searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::placeholder {
   opacity: 1.0;
   color: #777;
 }
 
 #urlbar-container {
   -moz-box-align: center;
 }
 
--- a/devtools/client/styleeditor/test/sourcemap-css/test-bootstrap-scss.css
+++ b/devtools/client/styleeditor/test/sourcemap-css/test-bootstrap-scss.css
@@ -1849,17 +1849,17 @@ output {
   border: 1px solid #ccc;
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; }
   .form-control:focus {
     border-color: #66afe9;
     outline: 0;
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
-  .form-control::-moz-placeholder {
+  .form-control::placeholder {
     color: #999999;
     opacity: 1; }
   .form-control:-ms-input-placeholder {
     color: #999999; }
   .form-control::-webkit-input-placeholder {
     color: #999999; }
   .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
     cursor: not-allowed;
@@ -4505,9 +4505,9 @@ body {
   .header, .marketing, .footer {
     padding-left: 0;
     padding-right: 0; }
   .header {
     margin-bottom: 30px; }
   .jumbotron {
     border-bottom: 300; } }
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFpbi5jc3MiLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlcyI6WyJtYWluLnNjc3MiXSwic291cmNlc0NvbnRlbnQiOlsiJGljb24tZm9udC1wYXRoOiBcIi4uL2Jvd2VyX2NvbXBvbmVudHMvYm9vdHN0cmFwLXNhc3Mtb2ZmaWNpYWwvdmVuZG9yL2Fzc2V0cy9mb250cy9ib290c3RyYXAvXCI7XG5cbi8vIGJvd2VyOnNjc3NcbkBpbXBvcnQgXCIuLi9ib3dlcl9jb21wb25lbnRzL2Jvb3RzdHJhcC1zYXNzLW9mZmljaWFsL3ZlbmRvci9hc3NldHMvc3R5bGVzaGVldHMvYm9vdHN0cmFwLnNjc3NcIjtcbi8vIGVuZGJvd2VyXG5cbi5icm93c2VoYXBweSB7XG4gICAgbWFyZ2luOiAwLjJlbSAwO1xuICAgIGJhY2tncm91bmQ6ICNjY2M7XG4gICAgY29sb3I6ICMwMDA7XG4gICAgcGFkZGluZzogMC4yZW0gMDtcbn1cblxuLyogU3BhY2Ugb3V0IGNvbnRlbnQgYSBiaXQgKi9cbmJvZHkge1xuICAgIHBhZGRpbmctdG9wOiAyMHB4O1xuICAgIHBhZGRpbmctYm90dG9tOiAyMHB4O1xufVxuXG4vKiBFdmVyeXRoaW5nIGJ1dCB0aGUganVtYm90cm9uIGdldHMgc2lkZSBzcGFjaW5nIGZvciBtb2JpbGUgZmlyc3Qgdmlld3MgKi9cbi5oZWFkZXIsXG4ubWFya2V0aW5nLFxuLmZvb3RlciB7XG4gICAgcGFkZGluZy1sZWZ0OiAxNXB4O1xuICAgIHBhZGRpbmctcmlnaHQ6IDE1cHg7XG59XG5cbi8qIEN1c3RvbSBwYWdlIGhlYWRlciAqL1xuLmhlYWRlciB7XG4gICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICNlNWU1ZTU7XG5cbiAgICAvKiBNYWtlIHRoZSBtYXN0aGVhZCBoZWFkaW5nIHRoZSBzYW1lIGhlaWdodCBhcyB0aGUgbmF2aWdhdGlvbiAqL1xuICAgIGgzIHtcbiAgICAgICAgbWFyZ2luLXRvcDogMDtcbiAgICAgICAgbWFyZ2luLWJvdHRvbTogMDtcbiAgICAgICAgbGluZS1oZWlnaHQ6IDQwcHg7XG4gICAgICAgIHBhZGRpbmctYm90dG9tOiAxOXB4O1xuICAgIH1cbn1cblxuLyogQ3VzdG9tIHBhZ2UgZm9vdGVyICovXG4uZm9vdGVyIHtcbiAgICBwYWRkaW5nLXRvcDogMTlweDtcbiAgICBjb2xvcjogIzc3NztcbiAgICBib3JkZXItdG9wOiAxcHggc29saWQgI2U1ZTVlNTtcbn1cblxuLmNvbnRhaW5lci1uYXJyb3cgPiBociB7XG4gICAgbWFyZ2luOiAzMHB4IDA7XG59XG5cbi8qIE1haW4gbWFya2V0aW5nIG1lc3NhZ2UgYW5kIHNpZ24gdXAgYnV0dG9uICovXG4uanVtYm90cm9uIHtcbiAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICNlNWU1ZTU7XG4gICAgLmJ0biB7XG4gICAgICAgIGZvbnQtc2l6ZTogMjFweDtcbiAgICAgICAgcGFkZGluZzogMTRweCAyNHB4O1xuICAgIH1cbn1cblxuLyogU3VwcG9ydGluZyBtYXJrZXRpbmcgY29udGVudCAqL1xuLm1hcmtldGluZyB7XG4gICAgbWFyZ2luOiA0MHB4IDA7XG4gICAgcCArIGg0IHtcbiAgICAgICAgbWFyZ2luLXRvcDogMjhweDtcbiAgICB9XG59XG5cbi8qIFJlc3BvbnNpdmU6IFBvcnRyYWl0IHRhYmxldHMgYW5kIHVwICovXG5AbWVkaWEgc2NyZWVuIGFuZCAobWluLXdpZHRoOiA3NjhweCkge1xuICAgIC5jb250YWluZXIge1xuICAgICAgICBtYXgtd2lkdGg6IDczMHB4O1xuICAgIH1cblxuICAgIC8qIFJlbW92ZSB0aGUgcGFkZGluZyB3ZSBzZXQgZWFybGllciAqL1xuICAgIC5oZWFkZXIsXG4gICAgLm1hcmtldGluZyxcbiAgICAuZm9vdGVyIHtcbiAgICAgICAgcGFkZGluZy1sZWZ0OiAwO1xuICAgICAgICBwYWRkaW5nLXJpZ2h0OiAwO1xuICAgIH1cblxuICAgIC8qIFNwYWNlIG91dCB0aGUgbWFzdGhlYWQgKi9cbiAgICAuaGVhZGVyIHtcbiAgICAgICAgbWFyZ2luLWJvdHRvbTogMzBweDtcbiAgICB9XG5cbiAgICAvKiBSZW1vdmUgdGhlIGJvdHRvbSBib3JkZXIgb24gdGhlIGp1bWJvdHJvbiBmb3IgdmlzdWFsIGVmZmVjdCAqL1xuICAgIC5qdW1ib3Ryb24ge1xuICAgICAgICBib3JkZXItYm90dG9tOiAzMDA7XG4gICAgfVxufVxuXG4vLyB0aGlzIGlzIGEgY29tbWVudC4uLlxuIl0sInNvdXJjZVJvb3QiOiIvc291cmNlLyJ9 */
\ No newline at end of file
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFpbi5jc3MiLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlcyI6WyJtYWluLnNjc3MiXSwic291cmNlc0NvbnRlbnQiOlsiJGljb24tZm9udC1wYXRoOiBcIi4uL2Jvd2VyX2NvbXBvbmVudHMvYm9vdHN0cmFwLXNhc3Mtb2ZmaWNpYWwvdmVuZG9yL2Fzc2V0cy9mb250cy9ib290c3RyYXAvXCI7XG5cbi8vIGJvd2VyOnNjc3NcbkBpbXBvcnQgXCIuLi9ib3dlcl9jb21wb25lbnRzL2Jvb3RzdHJhcC1zYXNzLW9mZmljaWFsL3ZlbmRvci9hc3NldHMvc3R5bGVzaGVldHMvYm9vdHN0cmFwLnNjc3NcIjtcbi8vIGVuZGJvd2VyXG5cbi5icm93c2VoYXBweSB7XG4gICAgbWFyZ2luOiAwLjJlbSAwO1xuICAgIGJhY2tncm91bmQ6ICNjY2M7XG4gICAgY29sb3I6ICMwMDA7XG4gICAgcGFkZGluZzogMC4yZW0gMDtcbn1cblxuLyogU3BhY2Ugb3V0IGNvbnRlbnQgYSBiaXQgKi9cbmJvZHkge1xuICAgIHBhZGRpbmctdG9wOiAyMHB4O1xuICAgIHBhZGRpbmctYm90dG9tOiAyMHB4O1xufVxuXG4vKiBFdmVyeXRoaW5nIGJ1dCB0aGUganVtYm90cm9uIGdldHMgc2lkZSBzcGFjaW5nIGZvciBtb2JpbGUgZmlyc3Qgdmlld3MgKi9cbi5oZWFkZXIsXG4ubWFya2V0aW5nLFxuLmZvb3RlciB7XG4gICAgcGFkZGluZy1sZWZ0OiAxNXB4O1xuICAgIHBhZGRpbmctcmlnaHQ6IDE1cHg7XG59XG5cbi8qIEN1c3RvbSBwYWdlIGhlYWRlciAqL1xuLmhlYWRlciB7XG4gICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICNlNWU1ZTU7XG5cbiAgICAvKiBNYWtlIHRoZSBtYXN0aGVhZCBoZWFkaW5nIHRoZSBzYW1lIGhlaWdodCBhcyB0aGUgbmF2aWdhdGlvbiAqL1xuICAgIGgzIHtcbiAgICAgICAgbWFyZ2luLXRvcDogMDtcbiAgICAgICAgbWFyZ2luLWJvdHRvbTogMDtcbiAgICAgICAgbGluZS1oZWlnaHQ6IDQwcHg7XG4gICAgICAgIHBhZGRpbmctYm90dG9tOiAxOXB4O1xuICAgIH1cbn1cblxuLyogQ3VzdG9tIHBhZ2UgZm9vdGVyICovXG4uZm9vdGVyIHtcbiAgICBwYWRkaW5nLXRvcDogMTlweDtcbiAgICBjb2xvcjogIzc3NztcbiAgICBib3JkZXItdG9wOiAxcHggc29saWQgI2U1ZTVlNTtcbn1cblxuLmNvbnRhaW5lci1uYXJyb3cgPiBociB7XG4gICAgbWFyZ2luOiAzMHB4IDA7XG59XG5cbi8qIE1haW4gbWFya2V0aW5nIG1lc3NhZ2UgYW5kIHNpZ24gdXAgYnV0dG9uICovXG4uanVtYm90cm9uIHtcbiAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICNlNWU1ZTU7XG4gICAgLmJ0biB7XG4gICAgICAgIGZvbnQtc2l6ZTogMjFweDtcbiAgICAgICAgcGFkZGluZzogMTRweCAyNHB4O1xuICAgIH1cbn1cblxuLyogU3VwcG9ydGluZyBtYXJrZXRpbmcgY29udGVudCAqL1xuLm1hcmtldGluZyB7XG4gICAgbWFyZ2luOiA0MHB4IDA7XG4gICAgcCArIGg0IHtcbiAgICAgICAgbWFyZ2luLXRvcDogMjhweDtcbiAgICB9XG59XG5cbi8qIFJlc3BvbnNpdmU6IFBvcnRyYWl0IHRhYmxldHMgYW5kIHVwICovXG5AbWVkaWEgc2NyZWVuIGFuZCAobWluLXdpZHRoOiA3NjhweCkge1xuICAgIC5jb250YWluZXIge1xuICAgICAgICBtYXgtd2lkdGg6IDczMHB4O1xuICAgIH1cblxuICAgIC8qIFJlbW92ZSB0aGUgcGFkZGluZyB3ZSBzZXQgZWFybGllciAqL1xuICAgIC5oZWFkZXIsXG4gICAgLm1hcmtldGluZyxcbiAgICAuZm9vdGVyIHtcbiAgICAgICAgcGFkZGluZy1sZWZ0OiAwO1xuICAgICAgICBwYWRkaW5nLXJpZ2h0OiAwO1xuICAgIH1cblxuICAgIC8qIFNwYWNlIG91dCB0aGUgbWFzdGhlYWQgKi9cbiAgICAuaGVhZGVyIHtcbiAgICAgICAgbWFyZ2luLWJvdHRvbTogMzBweDtcbiAgICB9XG5cbiAgICAvKiBSZW1vdmUgdGhlIGJvdHRvbSBib3JkZXIgb24gdGhlIGp1bWJvdHJvbiBmb3IgdmlzdWFsIGVmZmVjdCAqL1xuICAgIC5qdW1ib3Ryb24ge1xuICAgICAgICBib3JkZXItYm90dG9tOiAzMDA7XG4gICAgfVxufVxuXG4vLyB0aGlzIGlzIGEgY29tbWVudC4uLlxuIl0sInNvdXJjZVJvb3QiOiIvc291cmNlLyJ9 */
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -542,18 +542,18 @@ checkbox:-moz-focusring {
   background-position: calc(100% - 8px) center;
 }
 
 .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon,
 .devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon {
   visibility: hidden;
 }
 
-.devtools-searchinput .textbox-input::-moz-placeholder,
-.devtools-filterinput .textbox-input::-moz-placeholder {
+.devtools-searchinput .textbox-input::placeholder,
+.devtools-filterinput .textbox-input::placeholder {
   font-style: normal;
 }
 
 .devtools-plaininput {
   border-color: transparent;
   background-color: transparent;
 }
 
--- a/devtools/shared/css-properties-db.js
+++ b/devtools/shared/css-properties-db.js
@@ -58,17 +58,17 @@ exports.ANGLE_TAKING_FUNCTIONS = ["linea
 
 var domUtils = Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
 var json = JSON.stringify(domUtils.getCSSPseudoElementNames(), null, 0);
 copy(`exports.PSEUDO_ELEMENTS = ${json};\n`);
 console.log("The PSEUDO_ELEMENTS have been copied to your clipboard.")
  */
 
 /*eslint-disable */
-exports.PSEUDO_ELEMENTS = [":after",":before",":backdrop",":first-letter",":first-line",":-moz-selection",":-moz-focus-inner",":-moz-focus-outer",":-moz-list-bullet",":-moz-list-number",":-moz-math-anonymous",":-moz-progress-bar",":-moz-range-track",":-moz-range-progress",":-moz-range-thumb",":-moz-meter-bar",":-moz-placeholder",":-moz-color-swatch"];
+exports.PSEUDO_ELEMENTS = [":after",":before",":backdrop",":first-letter",":first-line",":-moz-selection",":-moz-focus-inner",":-moz-focus-outer",":-moz-list-bullet",":-moz-list-number",":-moz-math-anonymous",":-moz-progress-bar",":-moz-range-track",":-moz-range-progress",":-moz-range-thumb",":-moz-meter-bar",":-moz-placeholder",":placeholder",":-moz-color-swatch"];
 /*eslint-enable */
 
 /**
  * A list of CSS Properties and their various characteristics. This is used on the
  * client-side when the CssPropertiesActor is not found, or when the client and server
  * are the same version. A single property takes the form:
  *
  *  "animation": {
--- a/editor/reftests/xul/placeholder-reset.css
+++ b/editor/reftests/xul/placeholder-reset.css
@@ -1,8 +1,8 @@
 @namespace url('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul');
 @namespace html url('http://www.w3.org/1999/xhtml');
 
 /* We need to have a non-transparent placeholder so we can test it. */
-html|input::-moz-placeholder {
+html|input::placeholder {
   opacity: 1.0;
   color: graytext;
-}
\ No newline at end of file
+}
--- a/layout/forms/nsTextControlFrame.cpp
+++ b/layout/forms/nsTextControlFrame.cpp
@@ -345,18 +345,18 @@ nsTextControlFrame::CreateAnonymousConte
   nsContentUtils::RemoveNewlines(placeholderTxt);
   mUsePlaceholder = !placeholderTxt.IsEmpty();
 
   // Create the placeholder anonymous content if needed.
   if (mUsePlaceholder) {
     nsIContent* placeholderNode = txtCtrl->CreatePlaceholderNode();
     NS_ENSURE_TRUE(placeholderNode, NS_ERROR_OUT_OF_MEMORY);
 
-    // Associate ::-moz-placeholder pseudo-element with the placeholder node.
-    CSSPseudoElementType pseudoType = CSSPseudoElementType::mozPlaceholder;
+    // Associate ::placeholder pseudo-element with the placeholder node.
+    CSSPseudoElementType pseudoType = CSSPseudoElementType::placeholder;
 
     // If this is a text input inside a number input then we want to use the
     // main number input as the source of style for the placeholder frame.
     nsIFrame* mainInputFrame = this;
     if (StyleContext()->GetPseudoType() == CSSPseudoElementType::mozNumberText) {
       do {
         mainInputFrame = mainInputFrame->GetParent();
       } while (mainInputFrame &&
@@ -1459,17 +1459,17 @@ nsTextControlFrame::BuildDisplayList(nsD
     }
     kid = kid->GetNextSibling();
   }
 }
 
 mozilla::dom::Element*
 nsTextControlFrame::GetPseudoElement(CSSPseudoElementType aType)
 {
-  if (aType == CSSPseudoElementType::mozPlaceholder) {
+  if (aType == CSSPseudoElementType::placeholder) {
     nsCOMPtr<nsITextControlElement> txtCtrl = do_QueryInterface(GetContent());
     return txtCtrl->GetPlaceholderNode();
   }
 
   return nsContainerFrame::GetPseudoElement(aType);
 }
 
 NS_IMETHODIMP
--- a/layout/inspector/tests/test_getCSSPseudoElementNames.html
+++ b/layout/inspector/tests/test_getCSSPseudoElementNames.html
@@ -10,16 +10,17 @@
                            .getService(SpecialPowers.Ci.inIDOMUtils);
 
   let expected = new Set([
     ":after",
     ":before",
     ":backdrop",
     ":first-letter",
     ":first-line",
+    ":placeholder",
     ":-moz-color-swatch",
     ":-moz-focus-inner",
     ":-moz-focus-outer",
     ":-moz-list-bullet",
     ":-moz-list-number",
     ":-moz-math-anonymous",
     ":-moz-meter-bar",
     ":-moz-placeholder",
--- a/layout/reftests/css-placeholder/css-background.html
+++ b/layout/reftests/css-placeholder/css-background.html
@@ -1,21 +1,21 @@
 <!DOCTYPE html>
 <html>
   <!--
-    This test checks that setting a background on a ::-moz-placeholder works.
+    This test checks that setting a background on a ::placeholder works.
     However, given that it is not possible to do an actualy equality check, we
     have te check that setting a background doesn't produce the same result
     as not setting it.
   -->
   <style>
-    :-moz-any(input, textarea).color::-moz-placeholder {
+    :-moz-any(input, textarea).color::placeholder {
       background-color: blue;
     }
-    :-moz-any(input, textarea).gradient::-moz-placeholder {
+    :-moz-any(input, textarea).gradient::placeholder {
       background: linear-gradient(to right, blue, white, red);
     }
   </style>
   <body>
     <input class="color" placeholder='foo'>
     <textarea class="color" placeholder='foo'></textarea>
     <input class="gradient" placeholder='foo'>
     <textarea class="gradient" placeholder='foo'></textarea>
--- a/layout/reftests/css-placeholder/css-restrictions.html
+++ b/layout/reftests/css-placeholder/css-restrictions.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html>
   <style>
-    :-moz-any(input, textarea)::-moz-placeholder {
+    :-moz-any(input, textarea)::placeholder {
       visibility: hidden;
       padding: 20px;
       float: right;
       overflow: visible;
       white-space: pre;
 
       /*
        * This list could be endless given that all non-whitelisted properties
--- a/layout/reftests/css-placeholder/css-simple-styling-ref.html
+++ b/layout/reftests/css-placeholder/css-simple-styling-ref.html
@@ -8,10 +8,12 @@
       color: blue;
       word-spacing: 5px;
       text-shadow: 1px 1px 1px red;
     }
   </style>
   <body>
     <input value='foo bar'>
     <textarea>foo bar</textarea>
+    <input value='bar foo'>
+    <textarea>bar foo</textarea>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/css-simple-styling.html
+++ b/layout/reftests/css-placeholder/css-simple-styling.html
@@ -1,32 +1,35 @@
 <!DOCTYPE html>
 <html>
   <!--
     This test checks that a few allowed CSS properties have an effect when
-    applied to ::-moz-placeholder.
+    applied to ::placeholder or ::-moz-placeholder.
   -->
   <style>
     /*
      * We need to set some properties on the <input> because its size will
      * depend on its font.
      */
     input, textarea {
       font: -moz-list;
       font-family: mono;
       font-style: italic;
     }
 
-    :-moz-any(input, textarea)::-moz-placeholder {
+    [placeholder="foo bar"]::placeholder,
+    [placeholder="bar foo"]::-moz-placeholder {
       opacity: 1.0;
       font: -moz-list;
       font-family: mono;
       font-style: italic;
       color: blue;
       word-spacing: 5px;
       text-shadow: 1px 1px 1px red;
     }
   </style>
   <body>
     <input placeholder='foo bar'>
     <textarea placeholder='foo bar'></textarea>
+    <input placeholder='bar foo'>
+    <textarea placeholder='bar foo'></textarea>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/ignore-pseudo-class.html
+++ b/layout/reftests/css-placeholder/ignore-pseudo-class.html
@@ -1,12 +1,15 @@
 <!DOCTYPE html>
 <html>
 <style>
   :-moz-placeholder {
     color: red;
   }
+  :placeholder {
+    color: red;
+  }
 </style>
 <body>
   <input placeholder='foobar'>
   <textarea placeholder='foobar'></textarea>
 </body>
 </html>
--- a/layout/reftests/css-placeholder/input/css-display.html
+++ b/layout/reftests/css-placeholder/input/css-display.html
@@ -1,12 +1,14 @@
 <!DOCTYPE html>
 <html>
   <link rel='stylesheet' type='text/css' href='style.css'>
   <style>
-    input::-moz-placeholder {
+    [bar]::-moz-placeholder,
+    [foo]::placeholder {
       display: inline;
     }
   </style>
   <body>
     <input placeholder='foo'>
+    <input placeholder='bar'>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/input/css-opacity.html
+++ b/layout/reftests/css-placeholder/input/css-opacity.html
@@ -1,12 +1,14 @@
 <!DOCTYPE html>
 <html>
   <link rel='stylesheet' type='text/css' href='style.css'>
   <style>
-    input::-moz-placeholder {
+    [placeholder="bar"]::-moz-placeholder,
+    [placeholder="foo"]::placeholder {
       opacity: 0.1;
     }
   </style>
   <body>
     <input placeholder='foo'>
+    <input placeholder='bar'>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/input/css-text-align.html
+++ b/layout/reftests/css-placeholder/input/css-text-align.html
@@ -1,12 +1,14 @@
 <!DOCTYPE html>
 <html>
   <link rel='stylesheet' type='text/css' href='style.css'>
   <style>
-    input::-moz-placeholder {
+    [placeholder="bar"]::-moz-placeholder,
+    [placeholder="foo"]::placeholder {
       text-align: center;
     }
   </style>
   <body>
     <input placeholder='foo'>
+    <input placeholder='bar'>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/input/input-ref.html
+++ b/layout/reftests/css-placeholder/input/input-ref.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <body>
     <input>
+    <input>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/input/placeholder-add.html
+++ b/layout/reftests/css-placeholder/input/placeholder-add.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <html class='reftest-wait'>
   <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function loadHandler()
     {
+      document.getElementById('moz').placeholder='bar';
       document.getElementById('i').placeholder='foo';
       document.documentElement.className = '';
     }
   </script>
   <body onload='loadHandler();'>
     <input id='i'>
+    <input id='moz'>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/input/placeholder-blur.html
+++ b/layout/reftests/css-placeholder/input/placeholder-blur.html
@@ -7,15 +7,24 @@
       document.getElementById('i').focus();
     }
     function focusHandler()
     {
       document.getElementById('i').blur();
     }
     function blurHandler()
     {
+      document.getElementById('moz').focus();
+    }
+    function focusHandlerMoz()
+    {
+      document.getElementById('moz').blur();
+    }
+    function blurHandlerMoz()
+    {
       document.documentElement.className = '';
     }
   </script>
   <body onload='loadHandler();'>
     <input id='i' placeholder='foo' onfocus='focusHandler();' onblur='blurHandler();'>
+    <input id='moz' placeholder='bar' onfocus='focusHandlerMoz();' onblur='blurHandlerMoz();'>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/input/placeholder-button-ref.html
+++ b/layout/reftests/css-placeholder/input/placeholder-button-ref.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html>
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <input type='button'>
+    <input type='button'>
   </body>
 </html>
 
--- a/layout/reftests/css-placeholder/input/placeholder-focus-ref.html
+++ b/layout/reftests/css-placeholder/input/placeholder-focus-ref.html
@@ -3,15 +3,20 @@
   <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function loadHandler()
     {
       document.getElementById('i').focus();
     }
     function focusHandler()
     {
+      document.getElementById('moz').focus();
+    }
+    function focusHandlerMoz()
+    {
       document.documentElement.className = '';
     }
   </script>
   <body onload='loadHandler();'>
     <input id='i' class='ref' value='foo' onfocus='focusHandler();'>
+    <input id='moz' class='ref' value='bar' onfocus='focusHandlerMoz();'>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/input/placeholder-focus.html
+++ b/layout/reftests/css-placeholder/input/placeholder-focus.html
@@ -3,15 +3,20 @@
   <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function loadHandler()
     {
       document.getElementById('i').focus();
     }
     function focusHandler()
     {
+      document.getElementById('moz').focus();
+    }
+    function focusHandlerMoz()
+    {
       document.documentElement.className = '';
     }
   </script>
   <body onload='loadHandler();'>
     <input id='i' placeholder='foo' onfocus='focusHandler();'>
+    <input id='moz' placeholder='bar' onfocus='focusHandlerMoz();'>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/input/placeholder-removal.html
+++ b/layout/reftests/css-placeholder/input/placeholder-removal.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <html class='reftest-wait'>
   <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function loadHandler()
     {
       document.getElementById('i').removeAttribute('placeholder');
+      document.getElementById('moz').removeAttribute('placeholder');
       document.documentElement.className = '';
     }
   </script>
   <body onload='loadHandler();'>
     <input id='i' placeholder='foo'>
+    <input id='moz' placeholder='bar'>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/input/placeholder-simple-ref.html
+++ b/layout/reftests/css-placeholder/input/placeholder-simple-ref.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html>
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <input class='ref' value='foo'>
+    <input class='ref' value='bar'>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/input/placeholder-simple.html
+++ b/layout/reftests/css-placeholder/input/placeholder-simple.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html>
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <input placeholder='foo'>
+    <input placeholder='bar'>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/input/placeholder-type-change-1.html
+++ b/layout/reftests/css-placeholder/input/placeholder-type-change-1.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <html class='reftest-wait'>
   <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function loadHandler()
     {
       document.getElementById('i').type = 'text';
+      document.getElementById('moz').type = 'text';
       document.documentElement.className = '';
     }
   </script>
   <body onload='loadHandler();'>
     <input type='button' id='i' placeholder='foo'>
+    <input type='button' id='moz' placeholder='bar'>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/input/placeholder-type-change-2.html
+++ b/layout/reftests/css-placeholder/input/placeholder-type-change-2.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <html class='reftest-wait'>
   <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function loadHandler()
     {
       document.getElementById('i').type = 'button';
+      document.getElementById('moz').type = 'button';
       document.documentElement.className = '';
     }
   </script>
   <body onload='loadHandler();'>
     <input id='i' placeholder='foo'>
+    <input id='moz' placeholder='bar'>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/input/placeholder-value-ref.html
+++ b/layout/reftests/css-placeholder/input/placeholder-value-ref.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <body>
     <input value='bar'>
+    <input value='foo'>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/input/placeholder-value-reset.html
+++ b/layout/reftests/css-placeholder/input/placeholder-value-reset.html
@@ -1,17 +1,19 @@
 <!DOCTYPE html>
 <html class='reftest-wait'>
   <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function loadHandler()
     {
       document.getElementById('i').value = 'bar';
+      document.getElementById('moz').value = 'foo';
       document.forms[0].reset();
       document.documentElement.className = '';
     }
   </script>
   <body onload='loadHandler();'>
     <form>
       <input id='i' placeholder='foo'>
+      <input id='moz' placeholder='bar'>
     </form>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/input/placeholder-value-set.html
+++ b/layout/reftests/css-placeholder/input/placeholder-value-set.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <html class='reftest-wait'>
   <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function loadHandler()
     {
       document.getElementById('i').value = 'bar';
+      document.getElementById('moz').value = 'foo';
       document.documentElement.className = '';
     }
   </script>
   <body onload='loadHandler();'>
     <input id='i' placeholder='foo'>
+    <input id='moz' placeholder='bar'>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/input/placeholder-value-unset.html
+++ b/layout/reftests/css-placeholder/input/placeholder-value-unset.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <html class='reftest-wait'>
   <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function loadHandler()
     {
       document.getElementById('i').value = '';
+      document.getElementById('moz').value = '';
       document.documentElement.className = '';
     }
   </script>
   <body onload='loadHandler();'>
     <input id='i' placeholder='foo' value='bar'>
+    <input id='moz' placeholder='bar' value='foo'>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/input/placeholder-value.html
+++ b/layout/reftests/css-placeholder/input/placeholder-value.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html>
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <input placeholder='foo' value='bar'>
+    <input placeholder='bar' value='foo'>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/input/style-shown.css
+++ b/layout/reftests/css-placeholder/input/style-shown.css
@@ -1,9 +1,9 @@
-input::-moz-placeholder {
+input::placeholder {
   color: green;
   opacity: 1.0;
 }
 
 input:placeholder-shown {
   -moz-appearance: none;
   color: -moz-FieldText;
   background-color: red;
--- a/layout/reftests/css-placeholder/input/style.css
+++ b/layout/reftests/css-placeholder/input/style.css
@@ -1,5 +1,6 @@
-input::-moz-placeholder,
+[placeholder="bar"]::-moz-placeholder,
+[placeholder="foo"]::placeholder,
 input.ref {
   color: green;
   opacity: 1.0;
 }
--- a/layout/reftests/css-placeholder/textarea/css-display.html
+++ b/layout/reftests/css-placeholder/textarea/css-display.html
@@ -1,12 +1,14 @@
 <!DOCTYPE html>
 <html>
   <link rel='stylesheet' type='text/css' href='style.css'>
   <style>
-    textarea::-moz-placeholder {
+    textarea::-moz-placeholder,
+    textarea::placeholder {
       display: inline;
     }
   </style>
   <body>
     <textarea placeholder='foo'></textarea>
+    <textarea placeholder='bar'></textarea>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/textarea/css-opacity.html
+++ b/layout/reftests/css-placeholder/textarea/css-opacity.html
@@ -1,12 +1,14 @@
 <!DOCTYPE html>
 <html>
   <link rel='stylesheet' type='text/css' href='style.css'>
   <style>
-    textarea::-moz-placeholder {
+    textarea::-moz-placeholder,
+    textarea::placeholder {
       opacity: 0.1;
     }
   </style>
   <body>
     <textarea placeholder='foo'></textarea>
+    <textarea placeholder='bar'></textarea>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/textarea/css-resize-ref.html
+++ b/layout/reftests/css-placeholder/textarea/css-resize-ref.html
@@ -3,10 +3,11 @@
   <link rel='stylesheet' type='text/css' href='style.css'>
   <style>
     textarea {
       resize: none;
     }
   </style>
   <body>
     <textarea class='ref'>foo</textarea>
+    <textarea class='ref'>bar</textarea>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/textarea/css-resize.html
+++ b/layout/reftests/css-placeholder/textarea/css-resize.html
@@ -1,18 +1,20 @@
 <!DOCTYPE html>
 <html>
   <!--
-    resize shouldn't be allowed on the ::-moz-placeholder.
+    resize shouldn't be allowed on the ::placeholder.
   -->
   <link rel='stylesheet' type='text/css' href='style.css'>
   <style>
     textarea {
       resize: none;
     }
-    textarea::-moz-placeholder {
+    textarea::-moz-placeholder,
+    textarea::placeholder {
       resize: both;
     }
   </style>
   <body>
     <textarea placeholder='foo'></textarea>
+    <textarea placeholder='bar'></textarea>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/textarea/placeholder-add.html
+++ b/layout/reftests/css-placeholder/textarea/placeholder-add.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <html class='reftest-wait'>
   <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function loadHandler()
     {
       document.getElementById('t').placeholder='foo';
+      document.getElementById('moz').placeholder='bar';
       document.documentElement.className = '';
     }
   </script>
   <body onload='loadHandler();'>
     <textarea id='t'></textarea>
+    <textarea id='moz'></textarea>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/textarea/placeholder-blur.html
+++ b/layout/reftests/css-placeholder/textarea/placeholder-blur.html
@@ -7,15 +7,24 @@
       document.getElementById('t').focus();
     }
     function focusHandler()
     {
       document.getElementById('t').blur();
     }
     function blurHandler()
     {
+      document.getElementById('moz').focus();
+    }
+    function focusHandlerMoz()
+    {
+      document.getElementById('moz').blur();
+    }
+    function blurHandlerMoz()
+    {
       document.documentElement.className = '';
     }
   </script>
   <body onload='loadHandler();'>
     <textarea id='t' placeholder='foo' onfocus='focusHandler();' onblur='blurHandler();'></textarea>
+    <textarea id='moz' placeholder='bar' onfocus='focusHandlerMoz();' onblur='blurHandlerMoz();'></textarea>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/textarea/placeholder-focus-ref.html
+++ b/layout/reftests/css-placeholder/textarea/placeholder-focus-ref.html
@@ -3,15 +3,20 @@
   <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function loadHandler()
     {
       document.getElementById('t').focus();
     }
     function focusHandler()
     {
+      document.getElementById('moz').focus();
+    }
+    function focusHandlerMoz()
+    {
       document.documentElement.className = '';
     }
   </script>
   <body onload='loadHandler();'>
     <textarea id='t' class='ref' onfocus='focusHandler();'>foo</textarea>
+    <textarea id='moz' class='ref' onfocus='focusHandlerMoz();'>bar</textarea>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/textarea/placeholder-focus.html
+++ b/layout/reftests/css-placeholder/textarea/placeholder-focus.html
@@ -3,15 +3,20 @@
   <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function loadHandler()
     {
       document.getElementById('t').focus();
     }
     function focusHandler()
     {
+      document.getElementById('moz').focus();
+    }
+    function focusHandlerMoz()
+    {
       document.documentElement.className = '';
     }
   </script>
   <body onload='loadHandler();'>
     <textarea id='t' placeholder='foo' onfocus='focusHandler();'></textarea>
+    <textarea id='moz' placeholder='bar' onfocus='focusHandlerMoz();'></textarea>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/textarea/placeholder-removal.html
+++ b/layout/reftests/css-placeholder/textarea/placeholder-removal.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <html class='reftest-wait'>
   <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function loadHandler()
     {
       document.getElementById('t').removeAttribute('placeholder');
+      document.getElementById('moz').removeAttribute('placeholder');
       document.documentElement.className = '';
     }
   </script>
   <body onload='loadHandler();'>
     <textarea id='t' placeholder='foo'></textarea>
+    <textarea id='moz' placeholder='bar'></textarea>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/textarea/placeholder-simple-ref.html
+++ b/layout/reftests/css-placeholder/textarea/placeholder-simple-ref.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html>
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <textarea class='ref'>foo</textarea>
+    <textarea class='ref'>bar</textarea>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/textarea/placeholder-simple.html
+++ b/layout/reftests/css-placeholder/textarea/placeholder-simple.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html>
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <textarea placeholder='foo'></textarea>
+    <textarea placeholder='bar'></textarea>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/textarea/placeholder-value-ref.html
+++ b/layout/reftests/css-placeholder/textarea/placeholder-value-ref.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <body>
     <textarea>bar</textarea>
+    <textarea>foo</textarea>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/textarea/placeholder-value-reset.html
+++ b/layout/reftests/css-placeholder/textarea/placeholder-value-reset.html
@@ -1,17 +1,19 @@
 <!DOCTYPE html>
 <html class='reftest-wait'>
   <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function loadHandler()
     {
       document.getElementById('t').value = 'bar';
+      document.getElementById('moz').value = 'foo';
       document.forms[0].reset();
       document.documentElement.className = '';
     }
   </script>
   <body onload='loadHandler();'>
     <form>
       <textarea id='t' placeholder='foo'></textarea>
+      <textarea id='moz' placeholder='bar'></textarea>
     </form>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/textarea/placeholder-value-set.html
+++ b/layout/reftests/css-placeholder/textarea/placeholder-value-set.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <html class='reftest-wait'>
   <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function loadHandler()
     {
       document.getElementById('t').value = 'bar';
+      document.getElementById('moz').value = 'foo';
       document.documentElement.className = '';
     }
   </script>
   <body onload='loadHandler();'>
     <textarea id='t' placeholder='foo'></textarea>
+    <textarea id='moz' placeholder='bar'></textarea>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/textarea/placeholder-value-unset.html
+++ b/layout/reftests/css-placeholder/textarea/placeholder-value-unset.html
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <html class='reftest-wait'>
   <link rel='stylesheet' type='text/css' href='style.css'>
   <script>
     function loadHandler()
     {
       document.getElementById('t').value = '';
+      document.getElementById('moz').value = '';
       document.documentElement.className = '';
     }
   </script>
   <body onload='loadHandler();'>
     <textarea id='t' placeholder='foo'>bar</textarea>
+    <textarea id='moz' placeholder='bar'>foo</textarea>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/textarea/placeholder-value.html
+++ b/layout/reftests/css-placeholder/textarea/placeholder-value.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html>
   <link rel='stylesheet' type='text/css' href='style.css'>
   <body>
     <textarea placeholder='foo'>bar</textarea>
+    <textarea placeholder='bar'>foo</textarea>
   </body>
 </html>
--- a/layout/reftests/css-placeholder/textarea/style-shown.css
+++ b/layout/reftests/css-placeholder/textarea/style-shown.css
@@ -1,9 +1,9 @@
-textarea::-moz-placeholder {
+textarea::placeholder {
   color: green;
   opacity: 1.0;
 }
 
 textarea:placeholder-shown {
   -moz-appearance: none;
   color: -moz-FieldText;
   background-color: red;
--- a/layout/reftests/css-placeholder/textarea/style.css
+++ b/layout/reftests/css-placeholder/textarea/style.css
@@ -1,5 +1,6 @@
 textarea::-moz-placeholder,
+textarea::placeholder,
 textarea.ref {
   color: green;
   opacity: 1.0;
 }
--- a/layout/reftests/css-placeholder/textarea/textarea-ref.html
+++ b/layout/reftests/css-placeholder/textarea/textarea-ref.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <body>
     <textarea></textarea>
+    <textarea></textarea>
   </body>
 </html>
--- a/layout/reftests/forms/input/number/number-placeholder-ref.html
+++ b/layout/reftests/forms/input/number/number-placeholder-ref.html
@@ -1,19 +1,17 @@
 <!DOCTYPE html>
 <html>
   <head>
     <style>
 
 input {
   width: 15em;
-}
-
-input[type=text]::-moz-placeholder {
   color: blue;
+  font-style: italic;
 }
 
     </style>
   </head>
   <body>
-    <input type="text" placeholder="placeholder">
+    <input type="number" value="123">
   </body>
 </html>
--- a/layout/reftests/forms/input/number/number-placeholder.html
+++ b/layout/reftests/forms/input/number/number-placeholder.html
@@ -1,20 +1,24 @@
 <!DOCTYPE html>
 <html>
   <head>
     <style>
 
 input {
   width: 15em;
-  -moz-appearance: textfield;
+}
+
+input[type=number]::placeholder {
+  color: blue;
+  opacity: 1.0;
 }
 
 input[type=number]::-moz-placeholder {
-  color: blue;
+  font-style: italic;
+  opacity: 1.0;
 }
-
     </style>
   </head>
   <body>
-    <input type="number" placeholder="placeholder">
+    <input type="number" placeholder="123">
   </body>
 </html>
--- a/layout/reftests/forms/placeholder/placeholder-style.css
+++ b/layout/reftests/forms/placeholder/placeholder-style.css
@@ -1,10 +1,10 @@
 textarea.placeholder,
 input.placeholder,
-input::-moz-placeholder,
-textarea::-moz-placeholder {
+input::placeholder,
+textarea::placeholder {
   /* Unfortunately, we can't style the <input> or <textarea> text so we can't
      set it to opacity: 0.54; which means we have to revert the style to
      something that doesn't include an opacity. */
   color: GrayText;
   opacity: 1.0;
 }
--- a/layout/reftests/text-overflow/anonymous-block.html
+++ b/layout/reftests/text-overflow/anonymous-block.html
@@ -43,21 +43,21 @@ span {
 }
 
 .t1 {width:6em;}
 .t2 {width:2em;}
 .t3 {width:25em;}
 .t4 {width:17.5em;}
 
 input { font-family:DejaVuSansMono; }
-input::-moz-placeholder {
+input::placeholder {
   overflow:hidden;
   text-overflow:ellipsis;
 }
-input.t5::-moz-placeholder {
+input.t5::placeholder {
   text-overflow:"X";
 }
 
 </style>
 
 </head><body>
 
 
--- a/layout/style/crashtests/989965-1.html
+++ b/layout/style/crashtests/989965-1.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <body>
 <style>
-::-moz-placeholder { color: red; }
-::-moz-placeholder:focus { color: green; }
+::placeholder { color: red; }
+::placeholder:focus { color: green; }
 </style>
 <script>
-window.getComputedStyle(document.body, "::-moz-placeholder").color;
+window.getComputedStyle(document.body, "::placeholder").color;
 </script>
--- a/layout/style/nsCSSParser.cpp
+++ b/layout/style/nsCSSParser.cpp
@@ -5956,19 +5956,20 @@ CSSParserImpl::ParsePseudoSelector(int32
 
   if (nsCSSAnonBoxes::IsNonElement(pseudo)) {
     // Non-element anonymous boxes should not match any rule.
     REPORT_UNEXPECTED_TOKEN(PEPseudoSelUnknown);
     UngetToken();
     return eSelectorParsingStatus_Error;
   }
 
-  // We currently allow :-moz-placeholder and ::-moz-placeholder. We have to
-  // be a bit stricter regarding the pseudo-element parsing rules.
-  if (pseudoElementType == CSSPseudoElementType::mozPlaceholder &&
+  // We currently allow :-moz-placeholder and ::-moz-placeholder and
+  // ::placeholder. We have to be a bit stricter regarding the
+  // pseudo-element parsing rules.
+  if (pseudoElementType == CSSPseudoElementType::placeholder &&
       pseudoClassType == CSSPseudoClassType::mozPlaceholder) {
     if (parsingPseudoElement) {
       pseudoClassType = CSSPseudoClassType::NotPseudo;
     } else {
       pseudoElementType = CSSPseudoElementType::NotPseudo;
     }
   }
 
--- a/layout/style/nsCSSProps.h
+++ b/layout/style/nsCSSProps.h
@@ -199,17 +199,17 @@ static_assert((CSS_PROPERTY_PARSE_PROPER
 #define CSS_PROPERTY_HASHLESS_COLOR_QUIRK         (1<<15)
 
 // Does this property support the unitless length quirk in quirks mode?
 #define CSS_PROPERTY_UNITLESS_LENGTH_QUIRK        (1<<16)
 
 // Is this property (which must be a shorthand) really an alias?
 #define CSS_PROPERTY_IS_ALIAS                     (1<<17)
 
-// Does the property apply to ::-moz-placeholder?
+// Does the property apply to ::placeholder?
 #define CSS_PROPERTY_APPLIES_TO_PLACEHOLDER       (1<<18)
 
 // This property is allowed in an @page rule.
 #define CSS_PROPERTY_APPLIES_TO_PAGE_RULE         (1<<19)
 
 // This property's getComputedStyle implementation requires layout to be
 // flushed.
 #define CSS_PROPERTY_GETCS_NEEDS_LAYOUT_FLUSH     (1<<20)
--- a/layout/style/nsCSSPseudoElementList.h
+++ b/layout/style/nsCSSPseudoElementList.h
@@ -75,11 +75,13 @@ CSS_PSEUDO_ELEMENT(mozRangeTrack, ":-moz
 CSS_PSEUDO_ELEMENT(mozRangeProgress, ":-moz-range-progress",
                    CSS_PSEUDO_ELEMENT_SUPPORTS_USER_ACTION_STATE)
 CSS_PSEUDO_ELEMENT(mozRangeThumb, ":-moz-range-thumb",
                    CSS_PSEUDO_ELEMENT_SUPPORTS_USER_ACTION_STATE)
 CSS_PSEUDO_ELEMENT(mozMeterBar, ":-moz-meter-bar",
                    CSS_PSEUDO_ELEMENT_SUPPORTS_USER_ACTION_STATE)
 CSS_PSEUDO_ELEMENT(mozPlaceholder, ":-moz-placeholder",
                    CSS_PSEUDO_ELEMENT_SUPPORTS_USER_ACTION_STATE)
+CSS_PSEUDO_ELEMENT(placeholder, ":placeholder",
+                   CSS_PSEUDO_ELEMENT_SUPPORTS_USER_ACTION_STATE)
 CSS_PSEUDO_ELEMENT(mozColorSwatch, ":-moz-color-swatch",
                    CSS_PSEUDO_ELEMENT_SUPPORTS_STYLE_ATTRIBUTE |
                    CSS_PSEUDO_ELEMENT_SUPPORTS_USER_ACTION_STATE)
--- a/layout/style/nsCSSPseudoElements.cpp
+++ b/layout/style/nsCSSPseudoElements.cpp
@@ -78,16 +78,20 @@ nsCSSPseudoElements::IsCSS2PseudoElement
 /* static */ CSSPseudoElementType
 nsCSSPseudoElements::GetPseudoType(nsIAtom *aAtom, EnabledState aEnabledState)
 {
   for (CSSPseudoElementTypeBase i = 0;
        i < ArrayLength(CSSPseudoElements_info);
        ++i) {
     if (*CSSPseudoElements_info[i].mAtom == aAtom) {
       auto type = static_cast<Type>(i);
+      // ::moz-placeholder is an alias for ::placeholder
+      if (type == CSSPseudoElementType::mozPlaceholder) {
+        type = CSSPseudoElementType::placeholder;
+      }
       return IsEnabled(type, aEnabledState) ? type : Type::NotPseudo;
     }
   }
 
   if (nsCSSAnonBoxes::IsAnonBox(aAtom)) {
 #ifdef MOZ_XUL
     if (nsCSSAnonBoxes::IsTreePseudoElement(aAtom)) {
       return Type::XULTree;
--- a/layout/style/nsCSSRuleProcessor.cpp
+++ b/layout/style/nsCSSRuleProcessor.cpp
@@ -2529,19 +2529,19 @@ void ContentEnumFunc(const RuleValue& va
   nsCSSSelector* selector = aSelector;
   if (selector->IsPseudoElement()) {
     PseudoElementRuleProcessorData* pdata =
       static_cast<PseudoElementRuleProcessorData*>(data);
     if (!pdata->mPseudoElement && selector->mPseudoClassList) {
       // We can get here when calling getComputedStyle(aElt, aPseudo) if:
       //
       //   * aPseudo is a pseudo-element that supports a user action
-      //     pseudo-class, like "::-moz-placeholder";
+      //     pseudo-class, like "::placeholder";
       //   * there is a style rule that uses a pseudo-class on this
-      //     pseudo-element in the document, like ::-moz-placeholder:hover; and
+      //     pseudo-element in the document, like ::placeholder:hover; and
       //   * aElt does not have such a pseudo-element.
       //
       // We know that the selector can't match, since there is no element for
       // the user action pseudo-class to match against.
       return;
     }
     if (!StateSelectorMatches(pdata->mPseudoElement, aSelector, nodeContext,
                               data->mTreeMatchContext,
--- a/layout/style/nsRuleNode.cpp
+++ b/layout/style/nsRuleNode.cpp
@@ -2214,17 +2214,17 @@ GetPseudoRestriction(nsStyleContext *aCo
   // This needs to match nsStyleSet::WalkRestrictionRule.
   uint32_t pseudoRestriction = 0;
   nsIAtom *pseudoType = aContext->GetPseudo();
   if (pseudoType) {
     if (pseudoType == nsCSSPseudoElements::firstLetter) {
       pseudoRestriction = CSS_PROPERTY_APPLIES_TO_FIRST_LETTER;
     } else if (pseudoType == nsCSSPseudoElements::firstLine) {
       pseudoRestriction = CSS_PROPERTY_APPLIES_TO_FIRST_LINE;
-    } else if (pseudoType == nsCSSPseudoElements::mozPlaceholder) {
+    } else if (pseudoType == nsCSSPseudoElements::placeholder) {
       pseudoRestriction = CSS_PROPERTY_APPLIES_TO_PLACEHOLDER;
     }
   }
   return pseudoRestriction;
 }
 
 static void
 UnsetPropertiesWithoutFlags(const nsStyleStructID aSID,
--- a/layout/style/nsStyleSet.cpp
+++ b/layout/style/nsStyleSet.cpp
@@ -1800,17 +1800,17 @@ nsStyleSet::WalkRestrictionRule(CSSPseud
                                 nsRuleWalker* aRuleWalker)
 {
   // This needs to match GetPseudoRestriction in nsRuleNode.cpp.
   aRuleWalker->SetLevel(SheetType::Agent, false, false);
   if (aPseudoType == CSSPseudoElementType::firstLetter)
     aRuleWalker->Forward(mFirstLetterRule);
   else if (aPseudoType == CSSPseudoElementType::firstLine)
     aRuleWalker->Forward(mFirstLineRule);
-  else if (aPseudoType == CSSPseudoElementType::mozPlaceholder)
+  else if (aPseudoType == CSSPseudoElementType::placeholder)
     aRuleWalker->Forward(mPlaceholderRule);
 }
 
 void
 nsStyleSet::WalkDisableTextZoomRule(Element* aElement, nsRuleWalker* aRuleWalker)
 {
   aRuleWalker->SetLevel(SheetType::Agent, false, false);
   if (aElement->IsSVGElement(nsGkAtoms::text))
--- a/layout/style/res/forms.css
+++ b/layout/style/res/forms.css
@@ -97,17 +97,17 @@ input {
   -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::-moz-placeholder {
+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;
@@ -151,47 +151,47 @@ textarea {
 }
 
 textarea > scrollbar {
   cursor: default;
 }
 
 textarea > .anonymous-div,
 input > .anonymous-div,
-input::-moz-placeholder,
-textarea::-moz-placeholder {
+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::-moz-placeholder {
+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::-moz-placeholder,
-textarea::-moz-placeholder {
+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.
    */
@@ -203,17 +203,17 @@ textarea::-moz-placeholder {
    * 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::-moz-placeholder {
+textarea::placeholder {
   white-space: pre-wrap !important;
 }
 
 input:-moz-read-write,
 textarea:-moz-read-write {
   -moz-user-modify: read-write !important;
 }
 
@@ -770,18 +770,18 @@ input[type="submit"]:disabled {
   * <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::-moz-placeholder,
-textarea::-moz-placeholder,
+input::placeholder,
+textarea::placeholder,
 *|*::-moz-button-content,
 *|*::-moz-display-comboboxcontrol-frame,
 optgroup:before {
   unicode-bidi: inherit;
   text-overflow: inherit;
 }
 
 /**
--- a/layout/style/test/test_pseudoelement_state.html
+++ b/layout/style/test/test_pseudoelement_state.html
@@ -70,17 +70,17 @@ var gTests = [
   { markup:                 '<input type="range" value="50" min="0" max="100">',
     pseudoelement:          '::-moz-range-thumb',
     common_style:           'body input { -moz-appearance: none; } input::-moz-range-thumb { background: black; }',
     hover_test_style:       'body input::-moz-range-thumb:hover { background: green; }',
     hover_reference_style:  'body input::-moz-range-thumb { background: green; }',
     active_test_style:      'body input::-moz-range-thumb:active { background: lime; }',
     active_reference_style: 'body input::-moz-range-thumb { background: lime; }' },
 
-  // ::-moz-placeholder can't be tested, since the UA style sheet sets it to
+  // ::placeholder can't be tested, since the UA style sheet sets it to
   // be pointer-events:none.
 ];
 
 function countPixelDifferences(aCanvas1, aCanvas2) {
   var ctx1 = aCanvas1.getContext("2d");
   var ctx2 = aCanvas2.getContext("2d");
   var data1 = ctx1.getImageData(0, 0, aCanvas1.width, aCanvas1.height);
   var data2 = ctx2.getImageData(0, 0, aCanvas2.width, aCanvas2.height);
--- a/layout/style/test/test_selectors.html
+++ b/layout/style/test/test_selectors.html
@@ -900,16 +900,18 @@ function run() {
     test_selector_in_html(".a > .b ~ .nomatch", '<div class="a"><div class="b"></div></div><div class="nomatch"></div>',
                          emptyset, classset(["a", "b", "nomatch"]));
 
     // Test serialization of pseudo-elements.
     should_serialize_to("p::first-letter", "p::first-letter");
     should_serialize_to("p:first-letter", "p::first-letter");
     should_serialize_to("div>p:first-letter", "div > p::first-letter");
     should_serialize_to("span +div:first-line", "span + div::first-line");
+    should_serialize_to("input::placeholder", "input::placeholder");
+    should_serialize_to("input:placeholder-shown", "input:placeholder-shown");
 
     // Test serialization of non CSS2 pseudo-element.
     should_serialize_to("input::-moz-placeholder", "input::-moz-placeholder");
 
     // Test default namespaces, including inside :not().
     var html_default_ns = "@namespace url(http://www.w3.org/1999/xhtml);";
     var html_ns = "@namespace html url(http://www.w3.org/1999/xhtml);";
     var xul_default_ns = "@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);";
--- a/mobile/android/themes/core/config.css
+++ b/mobile/android/themes/core/config.css
@@ -55,17 +55,17 @@ body {
     display: inline-block;
     width: 12em;
     min-width: 0;
     color: #000000;
     opacity: 1;
     flex: 1 1 auto;
 }
 
-#filter-input:-moz-placeholder {
+#filter-input::placeholder {
     color: rgba(255,255,255,0.5);
 }
 
 .toolbar input {
     display: inline-block;
     height: 100%;
     min-width: 3em;
     box-sizing: border-box;
--- a/toolkit/content/textbox.css
+++ b/toolkit/content/textbox.css
@@ -16,20 +16,20 @@ html|*.textbox-input {
 html|*.textbox-textarea {
   -moz-appearance: none !important;
   text-shadow: inherit;
   box-sizing: border-box;
   -moz-box-flex: 1;
 }
 
 /*
-html|*.textbox-input::-moz-placeholder,
-html|*.textbox-textarea::-moz-placeholder {
+html|*.textbox-input::placeholder,
+html|*.textbox-textarea::placeholder {
   text-align: left;
   direction: ltr;
 }
 
-html|*.textbox-input::-moz-placeholder:-moz-locale-dir(rtl),
-html|*.textbox-textarea::-moz-placeholder:-moz-locale-dir(rtl) {
+html|*.textbox-input::placeholder:-moz-locale-dir(rtl),
+html|*.textbox-textarea::placeholder:-moz-locale-dir(rtl) {
   text-align: right;
   direction: rtl;
 }
 */
--- a/toolkit/themes/windows/global/textbox.css
+++ b/toolkit/themes/windows/global/textbox.css
@@ -33,17 +33,17 @@ html|*.textbox-textarea {
   padding: 0px 1px !important;
   background-color: inherit;
   color: inherit;
   font: inherit;
 }
 
 @media (-moz-windows-default-theme) {
   @media not all and (-moz-os-version: windows-xp) {
-    textbox html|*.textbox-input::-moz-placeholder {
+    textbox html|*.textbox-input::placeholder {
       font-style: italic;
     }
   }
 }
 
 .textbox-contextmenu {
   cursor: default;
 }