Skip to content

Commit ba91d71

Browse files
nt1mnt1m
committed
[css-forms-1][css-ui-4] Move field-sizing and input-security from css-ui-4 to css-forms-1.
1 parent f88344e commit ba91d71

File tree

2 files changed

+129
-126
lines changed

2 files changed

+129
-126
lines changed

‎css-forms-1/Overview.bs

+126-1
Original file line numberDiff line numberDiff line change
@@ -611,7 +611,60 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
611611

612612
# Styling Widgets # {#styling-widgets}
613613

614-
ISSUE: Move field-sizing/accent-color/input-security into this specification?
614+
## Widget Accent Colors: the 'accent-color' property ## {#accent-color}
615+
616+
The 'accent-color' property is defined in [[!CSS-UI-4]].
617+
618+
## Switching form control sizing: the 'field-sizing' property ## {#field-sizing}
619+
620+
<pre class=propdef>
621+
Name: field-sizing
622+
Value: fixed | content
623+
Initial: ''field-sizing/fixed''
624+
Applies to: [=elements with default preferred size=]
625+
Inherited: no
626+
Percentages: N/A
627+
Computed Value: as specified
628+
Canonical order: per grammar
629+
Animation type: discrete
630+
</pre>
631+
632+
For the purpose of this specification,
633+
an <dfn export>element with default preferred size</dfn> is an element
634+
whose [=intrinsic size=] is fixed regardless of the size of its content.
635+
The host language defines which elements are applicable to it.
636+
For example, in HTML <{textarea}> is an [=element with default preferred size=].
637+
638+
<dl dfn-type=value dfn-for=field-sizing>
639+
<dt><dfn>fixed</dfn>
640+
<dd>
641+
For [=element with default preferred size=],
642+
the UA must set the [=intrinsic size=]
643+
to the default preferred size defined by the host language for that element.
644+
Otherwise, the UA must behave the same as ''field-sizing/content''.
645+
<dt><dfn>content</dfn>
646+
<dd>
647+
The UA must determine the element's [=intrinsic size=] based on its content,
648+
and must ignore any default preferred size defined by the host language for that element.
649+
If the element is an [=element with default preferred size=] and
650+
is listed in [[CSS-SIZING-3#min-content-zero|compressible replaced elements]],
651+
the UA must stop treating the element as a replaced element for [=min-content contribution=].
652+
</dl>
653+
654+
<div class="example">
655+
For instance, <{textarea}> has a fixed size regardless of its content by default:
656+
657+
<span class="fake-textarea auto">&#x23B8;</span>
658+
<span class="fake-textarea auto">The quick brown fox jumps over the lazy dog.</span>
659+
660+
If ''field-sizing: content'' is applied, the size of the former should fit to a text caret.
661+
<span class="fake-textarea">&#x23B8;</span>
662+
663+
If ''field-sizing: content'' is applied and its width property has a fixed value like ''width: 10em'',
664+
the element height depends on the number of the content lines:
665+
666+
<span class="fake-textarea normal">The quick brown fox jumps over the lazy dog.&#x23B8;</span>
667+
</div>
615668

616669
## Changing the Orientation of a [=Slider-Like Control=]: ''slider-orientation'' ## {#slider-orientation}
617670

@@ -650,6 +703,76 @@ spec:css-forms-1; type:value; for:/; text:::placeholder
650703

651704
</dl>
652705

706+
## Obscuring sensitive input: the 'input-security' property ## {#input-security}
707+
708+
Issue: The CSSWG has agreed that
709+
while we believe that providing this piece of functionality to users is important,
710+
doing it via CSS+JS is the wrong approach,
711+
and that instead it should be built into user agents:
712+
this needs to work consistently from site to site for it to be discoverable and understandable by users,
713+
this needs to work even when JS is turned off,
714+
and this needs to have consistently solid accessibility…
715+
We therefore intend to remove this from the specification,
716+
and instead, we would like to see this behavior specified in the HTML specification
717+
as part of the interaction model of password fields.
718+
Holding off deleting until the situation with HTML is clarified.
719+
See
720+
<a href="https://github.com/w3c/csswg-drafts/issues/6788">https://github.com/w3c/csswg-drafts/issues/6788</a>
721+
and
722+
<a href="https://github.com/whatwg/html/issues/7293">https://github.com/whatwg/html/issues/7293</a>.
723+
724+
<pre class=propdef>
725+
Name: input-security
726+
Value: auto | none
727+
Initial: ''input-security/auto''
728+
Applies to: [=sensitive text inputs=]
729+
Inherited: no
730+
Percentages: N/A
731+
Computed Value: as specified
732+
Canonical order: per grammar
733+
Animation type: by computed value type
734+
</pre>
735+
736+
For the purpose of this specification,
737+
a <dfn export>sensitive text input</dfn> is
738+
a text input whose purpose is to accept sensitive input,
739+
as defined by the host language.
740+
For example, in HTML <{input/type/password|&lt;input type=password&gt;}> is a [=sensitive text input=].
741+
742+
By default, user agents obscure the contents of [=sensitive text inputs=]
743+
in order to prevent onlookers from seeing it.
744+
Users may wish to temporarily disable this obscuring
745+
in order to confirm that they've typed their sensitive information correctly.
746+
The ''input-security'' property may be used by authors
747+
to enable or disable this obscuring.
748+
749+
<dl dfn-type=value dfn-for=input-security>
750+
<dt><dfn>none</dfn>
751+
<dd>
752+
The UA must not obscure the text in the control,
753+
so that it can be read by the user.
754+
<dt><dfn>auto</dfn>
755+
<dd>
756+
The UA should obscure the text in the control,
757+
so that it cannot be read by the user.
758+
</dl>
759+
760+
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 (●).
761+
762+
<div class="example">
763+
For instance, given this style sheet
764+
<pre><code class="lang-css">
765+
input[type=password] {
766+
input-security: auto;
767+
}</code></pre>
768+
and this HTML
769+
<pre><code class="lang-html">
770+
&lt;input type=password value=MySecret794>
771+
</code></pre>
772+
a user agent might render the <{input/type/password|&lt;input type=password&gt;}> like so:
773+
<span class=fake-input-type-password>●●●●●●●●●●●</span>
774+
</div>
775+
653776
<h2 class="no-num non-normative" id="basic-appearance-stylesheet">Appendix A: Basic Appearance User Agent Stylesheet</h2>
654777

655778
ISSUE: Move to HTML.
@@ -914,6 +1037,8 @@ select::picker-icon {
9141037
<ul>
9151038
<li>Added !important to select buttons inertness.</li>
9161039
<li>Removed "Appendix B: Explorations" with obsolete ideas.</li>
1040+
<li>Added "slider-" prefix to slider pseudo-elements.</li>
1041+
<li>Moved 'field-sizing' and 'input-security' properties from css-ui-4.</li>
9171042
</ul>
9181043
9191044
<h2 class=no-num id=privacy>Privacy Considerations</h2>

‎css-ui-4/Overview.bs

+3-125
Original file line numberDiff line numberDiff line change
@@ -2619,131 +2619,6 @@ Effects of 'appearance' on Semantic Aspects of Elements</h4>
26192619
</div>
26202620

26212621

2622-
<h3 id="field-sizing">
2623-
Switching form control sizing: the 'field-sizing' property</h3>
2624-
2625-
<pre class=propdef>
2626-
Name: field-sizing
2627-
Value: fixed | content
2628-
Initial: ''field-sizing/fixed''
2629-
Applies to: [=elements with default preferred size=]
2630-
Inherited: no
2631-
Percentages: N/A
2632-
Computed Value: as specified
2633-
Canonical order: per grammar
2634-
Animation type: discrete
2635-
</pre>
2636-
2637-
For the purpose of this specification,
2638-
an <dfn export>element with default preferred size</dfn> is an element
2639-
whose [=intrinsic size=] is fixed regardless of the size of its content.
2640-
The host language defines which elements are applicable to it.
2641-
For example, in HTML <{textarea}> is an [=element with default preferred size=].
2642-
2643-
<dl dfn-type=value dfn-for=field-sizing>
2644-
<dt><dfn>fixed</dfn>
2645-
<dd>
2646-
For [=element with default preferred size=],
2647-
the UA must set the [=intrinsic size=]
2648-
to the default preferred size defined by the host language for that element.
2649-
Otherwise, the UA must behave the same as ''field-sizing/content''.
2650-
<dt><dfn>content</dfn>
2651-
<dd>
2652-
The UA must determine the element's [=intrinsic size=] based on its content,
2653-
and must ignore any default preferred size defined by the host language for that element.
2654-
If the element is an [=element with default preferred size=] and
2655-
is listed in [[CSS-SIZING-3#min-content-zero|compressible replaced elements]],
2656-
the UA must stop treating the element as a replaced element for [=min-content contribution=].
2657-
</dl>
2658-
2659-
<div class="example">
2660-
For instance, <{textarea}> has a fixed size regardless of its content by default:
2661-
2662-
<span class="fake-textarea auto">&#x23B8;</span>
2663-
<span class="fake-textarea auto">The quick brown fox jumps over the lazy dog.</span>
2664-
2665-
If ''field-sizing: content'' is applied, the size of the former should fit to a text caret.
2666-
<span class="fake-textarea">&#x23B8;</span>
2667-
2668-
If ''field-sizing: content'' is applied and its width property has a fixed value like ''width: 10em'',
2669-
the element height depends on the number of the content lines:
2670-
2671-
<span class="fake-textarea normal">The quick brown fox jumps over the lazy dog.&#x23B8;</span>
2672-
</div>
2673-
2674-
2675-
<h3 id="input-security">
2676-
Obscuring sensitive input: the 'input-security' property</h3>
2677-
2678-
Issue: The CSSWG has agreed that
2679-
while we believe that providing this piece of functionality to users is important,
2680-
doing it via CSS+JS is the wrong approach,
2681-
and that instead it should be built into user agents:
2682-
this needs to work consistently from site to site for it to be discoverable and understandable by users,
2683-
this needs to work even when JS is turned off,
2684-
and this needs to have consistently solid accessibility…
2685-
We therefore intend to remove this from the specification,
2686-
and instead, we would like to see this behavior specified in the HTML specification
2687-
as part of the interaction model of password fields.
2688-
Holding off deleting until the situation with HTML is clarified.
2689-
See
2690-
<a href="https://github.com/w3c/csswg-drafts/issues/6788">https://github.com/w3c/csswg-drafts/issues/6788</a>
2691-
and
2692-
<a href="https://github.com/whatwg/html/issues/7293">https://github.com/whatwg/html/issues/7293</a>.
2693-
2694-
<pre class=propdef>
2695-
Name: input-security
2696-
Value: auto | none
2697-
Initial: ''input-security/auto''
2698-
Applies to: [=sensitive text inputs=]
2699-
Inherited: no
2700-
Percentages: N/A
2701-
Computed Value: as specified
2702-
Canonical order: per grammar
2703-
Animation type: by computed value type
2704-
</pre>
2705-
2706-
For the purpose of this specification,
2707-
a <dfn export>sensitive text input</dfn> is
2708-
a text input whose purpose is to accept sensitive input,
2709-
as defined by the host language.
2710-
For example, in HTML <{input/type/password|&lt;input type=password&gt;}> is a [=sensitive text input=].
2711-
2712-
By default, user agents obscure the contents of [=sensitive text inputs=]
2713-
in order to prevent onlookers from seeing it.
2714-
Users may wish to temporarily disable this obscuring
2715-
in order to confirm that they've typed their sensitive information correctly.
2716-
The ''input-security'' property may be used by authors
2717-
to enable or disable this obscuring.
2718-
2719-
<dl dfn-type=value dfn-for=input-security>
2720-
<dt><dfn>none</dfn>
2721-
<dd>
2722-
The UA must not obscure the text in the control,
2723-
so that it can be read by the user.
2724-
<dt><dfn>auto</dfn>
2725-
<dd>
2726-
The UA should obscure the text in the control,
2727-
so that it cannot be read by the user.
2728-
</dl>
2729-
2730-
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 (●).
2731-
2732-
<div class="example">
2733-
For instance, given this style sheet
2734-
<pre><code class="lang-css">
2735-
input[type=password] {
2736-
input-security: auto;
2737-
}</code></pre>
2738-
and this HTML
2739-
<pre><code class="lang-html">
2740-
&lt;input type=password value=MySecret794>
2741-
</code></pre>
2742-
a user agent might render the <{input/type/password|&lt;input type=password&gt;}> like so:
2743-
<span class=fake-input-type-password>●●●●●●●●●●●</span>
2744-
</div>
2745-
2746-
27472622
<h3 id=control-specific-rules>
27482623
Control-Specific Rules</h3>
27492624

@@ -2877,6 +2752,9 @@ Changes from the <a href="https://www.w3.org/TR/2021/WD-css-ui-4-20210316/">16 M
28772752
Removed claims that 'outline-width' may influence the rendering
28782753
of ''outline-style: auto'' outlines.
28792754
(See <a href="https://github.com/w3c/csswg-drafts/issues/9201">Issue 9201</a>.)
2755+
2756+
<li>
2757+
Moved 'field-sizing' and 'input-security' properties to css-forms-1.
28802758
</ul>
28812759

28822760

0 commit comments

Comments
 (0)