[css-ui-4] Define the interest-delay properties. #9236

Author: tabatkins

css-ui-4/Overview.bs

@@ -95,6 +95,7 @@ spec:selectors-4; type:selector; text::disabled
 spec:css-color-4; type:property; text:color
 spec:selectors-4; type:selector; text::focus
 spec:selectors-4; type:selector; text::focus-visible
+spec:selectors-4; type:dfn; text:host language
 spec:css-backgrounds-3; type:property; text:border-radius
 spec:css-backgrounds-3; type:property; text:border-color
 spec:css-backgrounds-3; type:property; text:border-top-color
@@ -136,6 +137,7 @@ spec:css-borders-4; type:property;
 	text:border-inline-start-color
 	text:border-inline-end-color
 spec:dom; type:dfn; text:element
+spec:infra; type:dfn; text:user agent
 </pre>
 <pre class=anchors>
 urlPrefix: https://html.spec.whatwg.org/multipage/; spec:HTML
@@ -2027,7 +2029,7 @@ are [=inert=] or not.
 
 <dl dfn-type=value dfn-for=interactivity>
 	: <dfn>auto</dfn>
-	:: The element's [=inert|inertness=] is determined by the <l spec=selectors-4>[=host language=]</l>.
+	:: The element's [=inert|inertness=] is determined by the [=host language=].
 		<span class=note>(This will <em>usually</em> mean the element is not [=inert=].)</span>
 
 	: <dfn>inert</dfn>
@@ -2091,6 +2093,87 @@ In these instances, the <{input/disabled}> attribute is probably more appropriat
 </div>
 
 
+<h3 id="interest">
+User Interest Delay</h3>
+
+	<pre class="propdef">
+	Name: interest-delay-start, interest-delay-end
+	Value: normal | <<time>>
+	Initial: ''interest-delay/normal''
+	Applies to: all elements
+	Inherited: yes
+	Percentages: n/a
+	Computed value: the keyword ''interest-delay/normal'' or a computed time
+	Canonical order: per grammar
+	Animation type: by computed value type
+	</pre>
+
+	<pre class="propdef shorthand">
+	Name: interest-delay
+	Value: <<'interest-delay-start'>>
+	</pre>
+
+	Some [=host language=] features
+	can be activated when a user "shows interest" in an element.
+	Exactly what this means is up to the [=host language=] and [=user agent=]
+	(for example, the HTML <{html-global/interestfor}> attribute),
+	but a common property of such features
+	is that "interest" shouldn't be gained or lost <em>instantly</em>.
+
+	For example, if "interest" can be shown by hovering the cursor over an element,
+	briefly passing the cursor over the element
+	while moving the cursor over the page
+	should not (at least by default) indicate "interest"--
+	that could result in UI confusingly popping up and disappearing
+	while the user is performing unrelated tasks.
+
+	Similarly, once interest has been shown,
+	it should not (at least by default)
+	<em>lose</em> interest instantaneously either.
+	Again, as an example,
+	if the user "shows interest" in a link by hovering the cursor over it,
+	causing a child popup list to appear next to it,
+	moving the cursor from the link to the popup
+	likely involves briefly leaving both the link and the list,
+	but shouldn't cause the list to "lose interest"
+	and close the popup.
+
+	The 'interest-delay' shorthand,
+	and its 'interest-delay-start' and 'interest-delay-end' longhands,
+	allow control of the <dfn export>interest start delay</dfn>
+	and <dfn>interest end delay</dfn>
+	for these features
+	on a given element.
+	Its possible values are:
+
+	<dl dfn-type=value dfn-for="interest-delay, interest-delay-start, interest-delay-end">
+		: <dfn>normal</dfn>
+		:: The [=interest start delay=] and/or the [=interest end delay=]
+			are UA-defined.
+			They can be chosen to match platform conventions.
+
+			These delays <em>should not</em> be zero.
+			They <em>may</em> be different from each other,
+			and may vary depending on the way the user is showing interest.
+			(For example, a "hover" and a "long press"
+			might use different delays for indicating interest.)
+
+		: <dfn><<time>></dfn>
+		:: Specifies that the [=interest start delay=] and/or the [=interest end delay=]
+			are the specified duration.
+	</dl>
+
+	The 'interest-delay' shorthand
+	sets both 'interest-delay-start' and 'interest-delay-end'
+	to the same specified value.
+
+	Note: In the future, the syntax of these properties might be expanded
+	to allow for customizing the delay
+	depending on feature
+	and how the user is showing interest.
+	(For example, providing different delays
+	for hovering vs long-pressing.)
+
 
 <h2 id="styling-widgets" oldids="form-styling, control-styling">
 Styling Widgets</h2>