[css-ui-4] Define the ''input-security'' property. Fixes #2495. (#6239)

Co-authored-by: Tab Atkins Jr. <jackalmage@gmail.com>

Author: hober

css-ui-4/Overview.bs

@@ -93,10 +93,23 @@ spec:css-color-4; type:property; text:color
 spec:selectors-4; type:selector; text::focus
 spec:selectors-4; type:selector; text::focus-visible
 </pre>
+<pre class=anchors>
+urlPrefix: https://html.spec.whatwg.org/multipage/; spec:HTML
+	text:password; type:attr-value; for:input/type; url: input.html#attr-input-type-password-keyword
+</pre>
 
 <style>
 .awesome-table td {padding:5px}
 .awesome-table {color:#000;background:#fff;margin: auto;}
+
+.fake-input-type-password {
+	display: inline-block;
+	border: 1px solid black;
+	background: white;
+	text: black;
+	width: 20ch;
+	padding: 0 2px;
+}
 </style>
 
 <h2 id="intro">Introduction</h2>
@@ -1787,7 +1800,7 @@ so this specification allows flexibility.
 <pre class=propdef>
 Name: accent-color
 Value: auto | <<color>>
-Initial: ''auto''
+Initial: ''accent-color/auto''
 Applies to: all elements
 Inherited: yes
 Percentages: N/A
@@ -2199,6 +2212,61 @@ that are typical of the element whose appearance it acquires.
 	is also not changed by the 'appearance' property.
 </div>
 
+<h3 id="input-security">
+Obscuring sensitive input: the 'input-security' property</h3>
+
+<pre class=propdef>
+Name: input-security
+Value: auto | none
+Initial: ''input-security/auto''
+Applies to: [=sensitive text inputs=]
+Inherited: no
+Percentages: N/A
+Computed Value: as specified
+Canonical order: per grammar
+Animation type: by computed value type
+</pre>
+
+For the purpose of this specification,
+a <dfn export>sensitive text input</dfn> is
+a text input whose purpose is to accept sensitive input,
+as defined by the host language.
+For example, in HTML <{input/type/password|&lt;input type=password&gt;}> is a [=sensitive text input=].
+
+By default, user agents obscure the contents of [=sensitive text inputs=]
+in order to prevent onlookers from seeing it.
+Users may wish to temporarily disable this obscuring
+in order to confirm that they've typed their sensitive information correctly.
+The ''input-security'' property may be used by authors
+to enable or disable this obscuring.
+
+<dl dfn-type=value dfn-for=input-security>
+	<dt><dfn>none</dfn>
+	<dd>
+		The UA must not obscure the text in the control,
+		so that it can be read by the user.
+	<dt><dfn>auto</dfn>
+	<dd>
+		The UA should obscure the text in the control,
+		so that it cannot be read by the user.
+</dl>
+
+While the exact mechanism by which user agents obscure the text in the control is undefined, user agents typically obscure [=sensitive text inputs=] by replacing each character with some suitable replacement such as U+002A ASTERISK (*) or U+25CF BLACK CIRCLE (●).
+
+<div class="example">
+	For instance, given this style sheet
+	<pre><code class="lang-css">
+	input[type=password] {
+		input-security: auto;
+	}</code></pre>
+	and this HTML
+	<pre><code class="lang-html">
+	&lt;input type=password value=MySecret794>
+	</code></pre>
+	a user agent might render the <{input/type/password|&lt;input type=password&gt;}> like so:
+	<span class=fake-input-type-password>●●●●●●●●●●●</span>
+</div>
+
 <h3 id=control-specific-rules>
 Control Specific Rules</h3>