From 2411e2ed18fd0b1b847dbb501ba182201b7fcb33 Mon Sep 17 00:00:00 2001
From: Luke Warlow <lwarlow@igalia.com>
Date: Wed, 18 Jun 2025 20:16:30 +0100
Subject: [PATCH] [css-forms-1] Explicitly restrict new pseudo-elements to
 basic appearance

Except for `::placeholder` and `::file-selector-button` which are allowed in other appearance modes for compatability.
---
 css-forms-1/Overview.bs | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/css-forms-1/Overview.bs b/css-forms-1/Overview.bs
index 3cfd5c67a49..bccdb4e456a 100644
--- a/css-forms-1/Overview.bs
+++ b/css-forms-1/Overview.bs
@@ -313,6 +313,11 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
 
   It typically targets the <{button}> inside an <{input}> element with `type=file`.
 
+  It is generated when the [=originating element=] has [=basic appearance=]. It
+  can also be generated for other ''appearance'' values.
+
+  NOTE: This is allowed in non [=basic appearance=] modes for compatability purposes.
+
   <div class="example" id="file-selector-button-example">
     For example, the following example should show a green border around the
     file selector button:
@@ -358,6 +363,8 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
       The ''::slider-thumb'' pseudo-element represents
       the portion that allows the user to adjust the progress of the control.
 
+      It is only generated when the [=originating element=] has [=basic appearance=].
+
       NOTE: It is typically natively rendered as a circle in most user agents.
     
     <dt><dfn>::slider-track</dfn>
@@ -365,11 +372,15 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
       The ''::slider-track'' pseudo-element represents the portion containing
       both the progressed and unprogressed portions of the control.
 
+      It is only generated when the [=originating element=] has [=basic appearance=].
+
     <dt><dfn>::slider-fill</dfn>
     <dd>
       The ''::slider-fill'' pseudo-element represents
       the portion containing the progressed portion of the control.
 
+      It is only generated when the [=originating element=] has [=basic appearance=].
+
       When the progress of control is indeterminate (like with ''&lt;progress>''),
       the user agent must give this portion an inline-size of zero.
   </dl>
@@ -398,11 +409,18 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
       The ''::placeholder'' pseudo-element represents
       the portion of the <{input}> that contains the placeholder text.
 
+      It is generated when the [=originating element=] has [=basic appearance=]. It
+      can also be generated for other ''appearance'' values.
+
+      NOTE: This is allowed in non [=basic appearance=] modes for compatability purposes.
+
     <dt><dfn>::field-text</dfn>
     <dd>
       The ''::field-text'' pseudo-element represents
       the portion of the <{input}> that contains the editable text.
 
+      It is only generated when the [=originating element=] has [=basic appearance=].
+
     <dt><dfn>::clear-icon</dfn>
     <dd>
       The ''::clear-icon'' pseudo-element represents
@@ -429,10 +447,17 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
       The ''::placeholder'' pseudo-element represents
       the portion of the <{textarea}> that contains the placeholder text.
 
+      It is generated when the [=originating element=] has [=basic appearance=]. It
+      can also be generated for other ''appearance'' values.
+
+      NOTE: This is allowed in non [=basic appearance=] modes for compatability purposes.
+
     <dt><span>''::field-text''</span>
     <dd>
       The ''::field-text'' pseudo-element represents
       the portion of the <{textarea}> that contains the editable text.
+
+      It is only generated when the [=originating element=] has [=basic appearance=].
   </dl>
 
   ISSUE(11850): Define something for the resizer.
@@ -448,16 +473,22 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
     <dd>
       The ''::step-control'' pseudo-element represents
       the portion of a number input that contains the up and down buttons.
+
+      It is only generated when the [=originating element=] has [=basic appearance=].
     
     <dt><dfn>::step-up</dfn>
     <dd>
       The ''::step-up'' pseudo-element represents
       the button that increments the value inside a number input when activated.
 
+      It is only generated when the [=originating element=] has [=basic appearance=].
+
     <dt><dfn>::step-down</dfn>
     <dd>
       The ''::step-down'' pseudo-element represents
       the button that decrements the value inside a number input when activated.
+
+      It is only generated when the [=originating element=] has [=basic appearance=].
   </dl>
 
   Their structure is defined as follows:
@@ -512,11 +543,15 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
     <dd>
       The ''::field-component'' pseudo-element represents
       the portions of the control that contain the date/time component values.
+
+      It is only generated when the [=originating element=] has [=basic appearance=].
     
     <dt><dfn>::field-separator</dfn>
     <dd>
       The ''::field-separator'' pseudo-element represents
       the portions of the control that separate the date/time component values if the user agent provides those portions.
+
+      It is only generated when the [=originating element=] has [=basic appearance=].
   </dl>
 
   Those pseudo-elements are siblings. The exact structure of the control is determined by internationalization and by the host language,
@@ -549,6 +584,8 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
 
   The <dfn>::color-swatch</dfn> pseudo-element represents the portion of the control that displays the chosen color value.
 
+	It is only generated when the [=originating element=] has [=basic appearance=].
+
   <div class="example" id="color-swatch-example">
     For example, the following example should make the input and its color swatch rounded: