Bug 1860666 - Add pref-gated ::slider-* pseudo-elements, and some tests. r=layout-reviewers,jfkthame

We fail some because we right now we have a track pseudo for meter/progress.

I plan to fix this, but a lot of these frame classes are basically copy-pasta,
so I wanted to get rid of them first.

Differential Revision: https://phabricator.services.mozilla.com/D192097

.stylelintrc.js

@@ -243,6 +243,12 @@ module.exports = {
         ignorePseudoClasses: ["popover-open"],
       },
     ],
+    "selector-pseudo-element-no-unknown": [
+      true,
+      {
+        ignorePseudoElements: ["slider-track", "slider-fill", "slider-thumb"],
+      },
+    ],
   },
 
   overrides: [

layout/forms/nsMeterFrame.cpp

@@ -14,12 +14,9 @@
 #include "nsLayoutUtils.h"
 #include "nsPresContext.h"
 #include "nsGkAtoms.h"
-#include "nsNameSpaceManager.h"
 #include "nsNodeInfoManager.h"
 #include "nsContentCreatorFunctions.h"
 #include "nsFontMetrics.h"
-#include "nsCSSPseudoElements.h"
-#include "nsStyleConsts.h"
 #include <algorithm>
 
 using namespace mozilla;
@@ -54,8 +51,13 @@ nsresult nsMeterFrame::CreateAnonymousContent(
   // Create the div.
   mBarDiv = doc->CreateHTMLElement(nsGkAtoms::div);
 
-  // Associate ::-moz-meter-bar pseudo-element to the anonymous child.
-  mBarDiv->SetPseudoElementType(PseudoStyleType::mozMeterBar);
+  // Associate the right pseudo-element to the anonymous child.
+  if (StaticPrefs::layout_css_modern_range_pseudos_enabled()) {
+    // TODO(emilio): Create also a slider-track pseudo-element.
+    mBarDiv->SetPseudoElementType(PseudoStyleType::sliderFill);
+  } else {
+    mBarDiv->SetPseudoElementType(PseudoStyleType::mozMeterBar);
+  }
 
   aElements.AppendElement(mBarDiv);
 

layout/forms/nsProgressFrame.cpp

@@ -14,12 +14,9 @@
 #include "nsLayoutUtils.h"
 #include "nsPresContext.h"
 #include "nsGkAtoms.h"
-#include "nsNameSpaceManager.h"
 #include "nsNodeInfoManager.h"
 #include "nsContentCreatorFunctions.h"
 #include "nsFontMetrics.h"
-#include "nsCSSPseudoElements.h"
-#include "nsStyleConsts.h"
 #include <algorithm>
 
 using namespace mozilla;
@@ -52,7 +49,12 @@ nsresult nsProgressFrame::CreateAnonymousContent(
   mBarDiv = doc->CreateHTMLElement(nsGkAtoms::div);
 
   // Associate ::-moz-progress-bar pseudo-element to the anonymous child.
-  mBarDiv->SetPseudoElementType(PseudoStyleType::mozProgressBar);
+  if (StaticPrefs::layout_css_modern_range_pseudos_enabled()) {
+    // TODO(emilio): Create also a slider-track pseudo-element.
+    mBarDiv->SetPseudoElementType(PseudoStyleType::sliderFill);
+  } else {
+    mBarDiv->SetPseudoElementType(PseudoStyleType::mozProgressBar);
+  }
 
   // XXX(Bug 1631371) Check if this should use a fallible operation as it
   // pretended earlier, or change the return type to void.

layout/forms/nsRangeFrame.cpp

@@ -13,24 +13,20 @@
 
 #include "gfxContext.h"
 #include "nsContentCreatorFunctions.h"
-#include "nsCSSPseudoElements.h"
 #include "nsCSSRendering.h"
 #include "nsDisplayList.h"
 #include "nsIContent.h"
 #include "nsLayoutUtils.h"
 #include "mozilla/dom/Document.h"
-#include "nsNameSpaceManager.h"
 #include "nsGkAtoms.h"
 #include "mozilla/dom/HTMLDataListElement.h"
 #include "mozilla/dom/HTMLInputElement.h"
 #include "mozilla/dom/HTMLOptionElement.h"
 #include "mozilla/dom/MutationEventBinding.h"
 #include "nsPresContext.h"
-#include "nsPresContextInlines.h"
 #include "nsNodeInfoManager.h"
 #include "mozilla/dom/Element.h"
 #include "mozilla/ServoStyleSet.h"
-#include "nsStyleConsts.h"
 #include "nsTArray.h"
 
 #ifdef ACCESSIBILITY
@@ -83,41 +79,39 @@ void nsRangeFrame::Destroy(DestroyContext& aContext) {
   nsContainerFrame::Destroy(aContext);
 }
 
-nsresult nsRangeFrame::MakeAnonymousDiv(Element** aResult,
-                                        PseudoStyleType aPseudoType,
-                                        nsTArray<ContentInfo>& aElements) {
-  nsCOMPtr<Document> doc = mContent->GetComposedDoc();
-  RefPtr<Element> resultElement = doc->CreateHTMLElement(nsGkAtoms::div);
+static already_AddRefed<Element> MakeAnonymousDiv(
+    Document& aDoc, PseudoStyleType aOldPseudoType,
+    PseudoStyleType aModernPseudoType,
+    nsTArray<nsIAnonymousContentCreator::ContentInfo>& aElements) {
+  RefPtr<Element> result = aDoc.CreateHTMLElement(nsGkAtoms::div);
 
   // Associate the pseudo-element with the anonymous child.
-  resultElement->SetPseudoElementType(aPseudoType);
+  if (StaticPrefs::layout_css_modern_range_pseudos_enabled()) {
+    result->SetPseudoElementType(aModernPseudoType);
+  } else {
+    result->SetPseudoElementType(aOldPseudoType);
+  }
 
   // XXX(Bug 1631371) Check if this should use a fallible operation as it
   // pretended earlier, or change the return type to void.
-  aElements.AppendElement(resultElement);
+  aElements.AppendElement(result);
 
-  resultElement.forget(aResult);
-  return NS_OK;
+  return result.forget();
 }
 
 nsresult nsRangeFrame::CreateAnonymousContent(
     nsTArray<ContentInfo>& aElements) {
-  nsresult rv;
-
+  Document* doc = mContent->OwnerDoc();
   // Create the ::-moz-range-track pseudo-element (a div):
-  rv = MakeAnonymousDiv(getter_AddRefs(mTrackDiv),
-                        PseudoStyleType::mozRangeTrack, aElements);
-  NS_ENSURE_SUCCESS(rv, rv);
-
+  mTrackDiv = MakeAnonymousDiv(*doc, PseudoStyleType::mozRangeTrack,
+                               PseudoStyleType::sliderTrack, aElements);
   // Create the ::-moz-range-progress pseudo-element (a div):
-  rv = MakeAnonymousDiv(getter_AddRefs(mProgressDiv),
-                        PseudoStyleType::mozRangeProgress, aElements);
-  NS_ENSURE_SUCCESS(rv, rv);
-
+  mProgressDiv = MakeAnonymousDiv(*doc, PseudoStyleType::mozRangeProgress,
+                                  PseudoStyleType::sliderFill, aElements);
   // Create the ::-moz-range-thumb pseudo-element (a div):
-  rv = MakeAnonymousDiv(getter_AddRefs(mThumbDiv),
-                        PseudoStyleType::mozRangeThumb, aElements);
-  return rv;
+  mThumbDiv = MakeAnonymousDiv(*doc, PseudoStyleType::mozRangeThumb,
+                               PseudoStyleType::sliderThumb, aElements);
+  return NS_OK;
 }
 
 void nsRangeFrame::AppendAnonymousContentTo(nsTArray<nsIContent*>& aElements,
@@ -140,15 +134,13 @@ void nsRangeFrame::BuildDisplayList(nsDisplayListBuilder* aBuilder,
   const nsStyleDisplay* disp = StyleDisplay();
   if (IsThemed(disp)) {
     DisplayBorderBackgroundOutline(aBuilder, aLists);
-    // Only create items for the thumb. Specifically, we do not want
-    // the track to paint, since *our* background is used to paint
-    // the track, and we don't want the unthemed track painting over
-    // the top of the themed track.
+    // Only create items for the thumb. Specifically, we do not want the track
+    // to paint, since *our* background is used to paint the track, and we don't
+    // want the unthemed track painting over the top of the themed track.
     // This logic is copied from
     // nsContainerFrame::BuildDisplayListForNonBlockChildren as
     // called by BuildDisplayListForInline.
-    nsIFrame* thumb = mThumbDiv->GetPrimaryFrame();
-    if (thumb) {
+    if (nsIFrame* thumb = mThumbDiv->GetPrimaryFrame()) {
       nsDisplayListSet set(aLists, aLists.Content());
       BuildDisplayListForChild(aBuilder, thumb, set, DisplayChildFlag::Inline);
     }
@@ -713,7 +705,7 @@ LogicalSize nsRangeFrame::ComputeAutoSize(
 }
 
 nscoord nsRangeFrame::GetMinISize(gfxContext* aRenderingContext) {
-  auto pos = StylePosition();
+  const auto* pos = StylePosition();
   auto wm = GetWritingMode();
   if (pos->ISize(wm).HasPercent()) {
     // https://drafts.csswg.org/css-sizing-3/#percentage-sizing

layout/forms/nsRangeFrame.h

@@ -178,9 +178,6 @@ class nsRangeFrame final : public nsContainerFrame,
   // to the direction of movement of the thumb).
   nscoord AutoCrossSize(mozilla::Length aEm);
 
-  nsresult MakeAnonymousDiv(Element** aResult, PseudoStyleType aPseudoType,
-                            nsTArray<ContentInfo>& aElements);
-
   // Helper function which reflows the anonymous div frames.
   void ReflowAnonymousContent(nsPresContext* aPresContext,
                               ReflowOutput& aDesiredSize,

layout/style/nsCSSPseudoElementList.h

@@ -93,5 +93,17 @@ CSS_PSEUDO_ELEMENT(mozTextControlPreview, ":-moz-text-control-preview",
 CSS_PSEUDO_ELEMENT(mozReveal, ":-moz-reveal",
                    CSS_PSEUDO_ELEMENT_ENABLED_IN_UA_SHEETS)
 
+// The button in an <input type=file>
 CSS_PSEUDO_ELEMENT(fileSelectorButton, ":file-selector-button",
                    CSS_PSEUDO_ELEMENT_SUPPORTS_USER_ACTION_STATE)
+
+// Standard progress/meter/range pseudo-elements.
+CSS_PSEUDO_ELEMENT(sliderTrack, ":slider-track",
+                   CSS_PSEUDO_ELEMENT_SUPPORTS_USER_ACTION_STATE |
+                   CSS_PSEUDO_ELEMENT_ENABLED_IN_UA_SHEETS_AND_CHROME)
+CSS_PSEUDO_ELEMENT(sliderThumb, ":slider-thumb",
+                   CSS_PSEUDO_ELEMENT_SUPPORTS_USER_ACTION_STATE |
+                   CSS_PSEUDO_ELEMENT_ENABLED_IN_UA_SHEETS_AND_CHROME)
+CSS_PSEUDO_ELEMENT(sliderFill, ":slider-fill",
+                   CSS_PSEUDO_ELEMENT_SUPPORTS_USER_ACTION_STATE |
+                   CSS_PSEUDO_ELEMENT_ENABLED_IN_UA_SHEETS_AND_CHROME)

layout/style/nsCSSPseudoElements.h

@@ -11,9 +11,9 @@
 
 #include "nsGkAtoms.h"
 #include "mozilla/CSSEnabledState.h"
-#include "mozilla/Compiler.h"
 #include "mozilla/PseudoStyleType.h"
 #include "mozilla/StaticPrefs_dom.h"
+#include "mozilla/StaticPrefs_layout.h"
 
 // Is this pseudo-element a CSS2 pseudo-element that can be specified
 // with the single colon syntax (in addition to the double-colon syntax,
@@ -127,12 +127,17 @@ class nsCSSPseudoElements {
   }
 
   static bool EnabledInContent(Type aType) {
-    if (aType == Type::highlight &&
-        !mozilla::StaticPrefs::dom_customHighlightAPI_enabled()) {
-      return false;
+    switch (aType) {
+      case Type::highlight:
+        return mozilla::StaticPrefs::dom_customHighlightAPI_enabled();
+      case Type::sliderTrack:
+      case Type::sliderThumb:
+      case Type::sliderFill:
+        return mozilla::StaticPrefs::layout_css_modern_range_pseudos_enabled();
+      default:
+        return !PseudoElementHasAnyFlag(
+            aType, CSS_PSEUDO_ELEMENT_ENABLED_IN_UA_SHEETS_AND_CHROME);
     }
-    return !PseudoElementHasAnyFlag(
-        aType, CSS_PSEUDO_ELEMENT_ENABLED_IN_UA_SHEETS_AND_CHROME);
   }
 
   static bool IsEnabled(Type aType, EnabledState aEnabledState) {

layout/style/res/forms.css

@@ -707,7 +707,8 @@ progress {
   overflow: clip;
 }
 
-::-moz-progress-bar {
+progress::-moz-progress-bar,
+progress::slider-fill {
   /* Prevent styling that would change the type of frame we construct. */
   display: inline-block !important;
   float: none !important;
@@ -733,7 +734,8 @@ meter {
   overflow: clip;
 }
 
-::-moz-meter-bar {
+meter::-moz-meter-bar,
+meter::slider-fill {
   /* Block styles that would change the type of frame we construct. */
   display: inline-block !important;
   float: none !important;
@@ -746,15 +748,18 @@ meter {
   width: 100%;
 }
 
-:-moz-meter-optimum::-moz-meter-bar {
+meter:-moz-meter-optimum::-moz-meter-bar,
+meter:-moz-meter-optimum::slider-fill {
   /* green. */
   background: linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
 }
-:-moz-meter-sub-optimum::-moz-meter-bar {
+meter:-moz-meter-sub-optimum::-moz-meter-bar,
+meter:-moz-meter-sub-optimum::slider-fill {
   /* orange. */
   background: linear-gradient(#fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%);
 }
-:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+meter:-moz-meter-sub-sub-optimum::-moz-meter-bar,
+meter:-moz-meter-sub-sub-optimum::slider-fill {
   /* red. */
   background: linear-gradient(#f77, #f77, #fcc 20%, #d44 45%, #d44 55%);
 }
@@ -779,8 +784,12 @@ input[type=range] {
  *
  * If content authors want to have a vertical range, they will also need to
  * set the width/height of this pseudo-element.
+ *
+ * TODO(emilio, bug 1663819): Losen these restrictions once these
+ * pseudo-elements are better spec'd out.
  */
-input[type=range]::-moz-range-track {
+input[type=range]::-moz-range-track,
+input[type=range]::slider-track {
   /* Prevent styling that would change the type of frame we construct. */
   display: block !important;
   float: none !important;
@@ -792,7 +801,8 @@ input[type=range]::-moz-range-track {
   user-select: none !important;
 }
 
-input[type=range][orient=vertical]::-moz-range-track {
+input[type=range][orient=vertical]::-moz-range-track,
+input[type=range][orient=vertical]::slider-track {
   inline-size: 0.2em; /* same as block-size above */
   block-size: 100%;
 }
@@ -805,7 +815,8 @@ input[type=range][orient=vertical]::-moz-range-track {
  * property is ignored, and if the range range is vertical, the height property
  * is ignored.
  */
-input[type=range]::-moz-range-progress {
+input[type=range]::-moz-range-progress,
+input[type=range]::slider-fill {
   /* Prevent styling that would change the type of frame we construct. */
   display: block !important;
   float: none !important;
@@ -813,8 +824,7 @@ input[type=range]::-moz-range-progress {
   writing-mode: unset !important;
   direction: unset !important;
   /* Since one of width/height will be ignored, this just sets the "other"
-     dimension.
-   */
+     dimension. */
   width: 0.2em;
   height: 0.2em;
   /* Prevent nsIFrame::HandlePress setting mouse capture to this element. */
@@ -827,7 +837,8 @@ input[type=range]::-moz-range-progress {
  * logic to position it). Specifically the 'margin', 'top' and 'left'
  * properties are ignored.
  */
-input[type=range]::-moz-range-thumb {
+input[type=range]::-moz-range-thumb,
+input[type=range]::slider-thumb {
   /* Native theming is atomic for range. Set appearance on the range
    * to get rid of it. The thumb's appearance is fixed.
    */

modules/libpref/init/StaticPrefList.yaml

@@ -9142,6 +9142,13 @@
   mirror: always
   rust: true
 
+# Whether the modern ::slider-* pseudos are enabled.
+- name: layout.css.modern-range-pseudos.enabled
+  type: RelaxedAtomicBool
+  value: false
+  mirror: always
+  rust: true
+
 # Whether frame visibility tracking is enabled globally.
 - name: layout.framevisibility.enabled
   type: bool

servo/components/style/gecko/pseudo_element.rs

@@ -35,11 +35,11 @@ impl ::selectors::parser::PseudoElement for PseudoElement {
     fn valid_after_slotted(&self) -> bool {
         matches!(
             *self,
-            PseudoElement::Before |
-                PseudoElement::After |
-                PseudoElement::Marker |
-                PseudoElement::Placeholder |
-                PseudoElement::FileSelectorButton
+            Self::Before |
+                Self::After |
+                Self::Marker |
+                Self::Placeholder |
+                Self::FileSelectorButton
         )
     }
 
@@ -95,7 +95,7 @@ impl PseudoElement {
     /// Whether the current pseudo element is ::before or ::after.
     #[inline]
     pub fn is_before_or_after(&self) -> bool {
-        self.is_before() || self.is_after()
+        matches!(*self, Self::Before | Self::After)
     }
 
     /// Whether this pseudo-element is the ::before pseudo.
@@ -148,15 +148,15 @@ impl PseudoElement {
 
     /// The identifier of the highlight this pseudo-element represents.
     pub fn highlight_name(&self) -> Option<&AtomIdent> {
-        match &*self {
-            PseudoElement::Highlight(name) => Some(&name),
+        match *self {
+            Self::Highlight(ref name) => Some(name),
             _ => None,
         }
     }
 
     /// Whether this pseudo-element is the ::highlight pseudo.
     pub fn is_highlight(&self) -> bool {
-        matches!(*self, PseudoElement::Highlight(_))
+        matches!(*self, Self::Highlight(_))
     }
 
     /// Whether this pseudo-element supports user action selectors.
@@ -166,10 +166,13 @@ impl PseudoElement {
 
     /// Whether this pseudo-element is enabled for all content.
     pub fn enabled_in_content(&self) -> bool {
-        if self.is_highlight() && !pref!("dom.customHighlightAPI.enabled") {
-            return false;
+        match *self {
+            Self::Highlight(..) => pref!("dom.customHighlightAPI.enabled"),
+            Self::SliderFill | Self::SliderTrack | Self::SliderThumb => pref!("layout.css.modern-range-pseudos.enabled"),
+            // If it's not explicitly enabled in UA sheets or chrome, then we're enabled for
+            // content.
+            _ => (self.flags() & structs::CSS_PSEUDO_ELEMENT_ENABLED_IN_UA_SHEETS_AND_CHROME) == 0
         }
-        return self.flags() & structs::CSS_PSEUDO_ELEMENT_ENABLED_IN_UA_SHEETS_AND_CHROME == 0;
     }
 
     /// Whether this pseudo is enabled explicitly in UA sheets.

testing/web-platform/meta/css/css-pseudo/__dir__.ini

@@ -1,2 +1,2 @@
-prefs: [dom.css_pseudo_element.enabled:true, layout.css.animation-composition.enabled:true, layout.css.floating-first-letter.tight-glyph-bounds:0, dom.customHighlightAPI.enabled:true]
+prefs: [dom.css_pseudo_element.enabled:true, layout.css.animation-composition.enabled:true, layout.css.floating-first-letter.tight-glyph-bounds:0, dom.customHighlightAPI.enabled:true, layout.css.modern-range-pseudos.enabled:true]
 leak-threshold: [tab:51200]

testing/web-platform/meta/css/css-pseudo/slider/slider-track-002.html.ini

@@ -0,0 +1,2 @@
+[slider-track-002.html]
+  expected: FAIL

testing/web-platform/meta/css/css-pseudo/slider/slider-track-003.html.ini

@@ -0,0 +1,2 @@
+[slider-track-003.html]
+  expected: FAIL

testing/web-platform/tests/css/css-pseudo/slider/slider-fill-001-notref.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<title>::slider-fill reference</title>
+<style>
+  input { appearance: none }
+  ::slider-fill {
+    background: blue;
+  }
+</style>
+<input type=range>

testing/web-platform/tests/css/css-pseudo/slider/slider-fill-001.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>::slider-fill customizes range input</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4410#issuecomment-1720932781">
+<link rel="mismatch" href="slider-fill-001-notref.html">
+<style>
+  input { appearance: none }
+  ::slider-fill {
+    background: green;
+  }
+</style>
+<input type=range>

testing/web-platform/tests/css/css-pseudo/slider/slider-fill-002-notref.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<title>::slider-fill reference</title>
+<style>
+  meter { appearance: none }
+  ::slider-fill {
+    background: blue;
+  }
+</style>
+<meter value="0.5">

testing/web-platform/tests/css/css-pseudo/slider/slider-fill-002.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>::slider-fill customizes meter</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4410#issuecomment-1720932781">
+<link rel="mismatch" href="slider-fill-002-notref.html">
+<style>
+  meter { appearance: none }
+  ::slider-fill {
+    background: green;
+  }
+</style>
+<meter value="0.5">

testing/web-platform/tests/css/css-pseudo/slider/slider-fill-003-notref.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<title>::slider-fill reference</title>
+<style>
+  progress { appearance: none }
+  ::slider-fill {
+    background: blue;
+  }
+</style>
+<progress value="0.5">

testing/web-platform/tests/css/css-pseudo/slider/slider-fill-003.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>::slider-fill customizes progress</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4410#issuecomment-1720932781">
+<link rel="mismatch" href="slider-fill-003-notref.html">
+<style>
+  progress { appearance: none }
+  ::slider-fill {
+    background: green;
+  }
+</style>
+<progress value="0.5">

testing/web-platform/tests/css/css-pseudo/slider/slider-thumb-001-notref.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<title>::slider-thumb reference</title>
+<style>
+  input { appearance: none }
+  ::slider-thumb {
+    background: blue;
+  }
+</style>
+<input type=range>

testing/web-platform/tests/css/css-pseudo/slider/slider-thumb-001.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>::slider-thumb customizes range input</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4410#issuecomment-1720932781">
+<link rel="mismatch" href="slider-thumb-001-notref.html">
+<style>
+  input { appearance: none }
+  ::slider-thumb {
+    background: green;
+  }
+</style>
+<input type=range>

testing/web-platform/tests/css/css-pseudo/slider/slider-track-001-notref.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<title>::slider-track reference</title>
+<style>
+  input { appearance: none }
+  ::slider-track {
+    background: blue;
+  }
+</style>
+<input type=range>

testing/web-platform/tests/css/css-pseudo/slider/slider-track-001.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>::slider-track customizes range input</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4410#issuecomment-1720932781">
+<link rel="mismatch" href="slider-track-001-notref.html">
+<style>
+  input { appearance: none }
+  ::slider-track {
+    background: green;
+  }
+</style>
+<input type=range>

testing/web-platform/tests/css/css-pseudo/slider/slider-track-002-notref.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<title>::slider-track reference</title>
+<style>
+  meter { appearance: none }
+  ::slider-track {
+    background: blue;
+  }
+</style>
+<meter value="0.5">

testing/web-platform/tests/css/css-pseudo/slider/slider-track-002.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>::slider-track customizes meter</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4410#issuecomment-1720932781">
+<link rel="mismatch" href="slider-track-002-notref.html">
+<style>
+  meter { appearance: none }
+  ::slider-track {
+    background: green;
+  }
+</style>
+<meter value="0.5">

testing/web-platform/tests/css/css-pseudo/slider/slider-track-003-notref.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<title>::slider-track reference</title>
+<style>
+  progress { appearance: none }
+  ::slider-track {
+    background: blue;
+  }
+</style>
+<progress value="0.5">

testing/web-platform/tests/css/css-pseudo/slider/slider-track-003.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>::slider-track customizes progress</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4410#issuecomment-1720932781">
+<link rel="mismatch" href="slider-track-003-notref.html">
+<style>
+  progress { appearance: none }
+  ::slider-track {
+    background: green;
+  }
+</style>
+<progress value="0.5">

xpcom/ds/StaticAtoms.py

@@ -2490,6 +2490,9 @@ STATIC_ATOMS = [
     PseudoElementAtom("PseudoElement_mozTextControlPreview", ":-moz-text-control-preview"),
     PseudoElementAtom("PseudoElement_mozReveal", ":-moz-reveal"),
     PseudoElementAtom("PseudoElement_fileSelectorButton", ":file-selector-button"),
+    PseudoElementAtom("PseudoElement_sliderTrack", ":slider-track"),
+    PseudoElementAtom("PseudoElement_sliderThumb", ":slider-thumb"),
+    PseudoElementAtom("PseudoElement_sliderFill", ":slider-fill"),
     # CSS anonymous boxes -- these must appear in the same order as
     # in nsCSSAnonBoxList.h
     NonInheritingAnonBoxAtom("AnonBox_oofPlaceholder", ":-moz-oof-placeholder"),