From 4c51c537b0fde55836a6b49c78ee829a558e1021 Mon Sep 17 00:00:00 2001
From: Tab Atkins-Bittner <jackalmage@gmail.com>
Date: Mon, 11 Nov 2024 12:40:26 -0800
Subject: [PATCH 1/3] [css-ui-4] Add 'interactivity' property, per #10711

---
 css-ui-4/Overview.bs | 98 +++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 97 insertions(+), 1 deletion(-)

diff --git a/css-ui-4/Overview.bs b/css-ui-4/Overview.bs
index c5353cc3f39..14af8932cd0 100644
--- a/css-ui-4/Overview.bs
+++ b/css-ui-4/Overview.bs
@@ -62,6 +62,7 @@ Ignore Can I Use URL Failure: https://drafts.csswg.org/css-ui-4/
 Ignore Can I Use URL Failure: http://drafts.csswg.org/css-ui-4/
 Ignore Can I Use URL Failure: https://www.w3.org/TR/css-ui-4/
 Ignore Can I Use URL Failure: http://www.w3.org/TR/css-ui-4/
+Indent: 2
 </pre>
 
 <pre class=link-defaults>
@@ -103,7 +104,8 @@ spec:css-backgrounds-3; type:property; text:border-left-color
 </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
+	type:attr-value; text:password; for:input/type; url: input.html#attr-input-type-password-keyword
+	type:element-attr; text:inert; for:html-global; url: interaction.html#the-inert-attribute
 </pre>
 
 <style>
@@ -1972,6 +1974,100 @@ Exclusion from Hit-testing: the 'pointer-events' property</h3>
 	with more possible values.
 	The effect of such values outside of SVG is currently not defined.
 
+<h3 id="inertness">
+Preventing All Interaction: the 'interactivity' property</h3>
+
+<pre class=propdef>
+Name: interactivity
+Value: auto | normal | inert
+Initial: auto
+Applies to: all elements
+Inherited: no
+Percentages: N/A
+Computed Value: as specified
+Animation type: discrete
+</pre>
+
+The 'interactivity' property specifies whether an element and its [=flat tree=] descendants
+(including [=text runs=])
+are [=inert=] or not.
+
+<dl dfn-type=value dfn-for=interactivity>
+	: <dfn>auto</dfn>
+	::
+		The element is [=inert=] if and only if 
+		its [=flat tree=] parent is [=inert=].
+
+	: <dfn>normal</dfn>
+	:: The element is not [=inert=].
+
+	: <dfn>inert</dfn>
+	:: The element is [=inert=].
+</dl>
+
+Note: While 'interactivity' is not an [=inherited=] property,
+by default (when set to ''interactivity/auto'')
+it acts <em>similarly</em> to one,
+except it "inherits" thru the [=flat tree=]
+rather than the usual parent/child relationship.
+
+<div algorithm>
+	When an [=element=] or [=text run=] is <dfn export>inert</dfn>:
+
+	* Hit-testing must act as if 'pointer-event' was ''pointer-events/none'',
+		regardless of its actual value.
+	* Text selection must act as if 'user-select' was ''user-select/none'',
+		regardless of its actual value.
+	* If the [=element=] or [=text run=] is editable,
+		it must behave as if it was non-editable.
+	* The [=element=] or [=text run=] should be ignored
+		for the purposes of find-in-page and similar searching actions.
+
+	User agents may allow the user 
+	to override the restrictions on find-in-page and text selection.
+</div>
+
+Note: [=Inert=] nodes generally cannot be focused, 
+and user agents do not expose the inert nodes 
+to accessibility APIs or assistive technologies.
+An inert subtree should not contain any content or controls 
+which are critical to understanding or using aspects of the page 
+which are not in the inert state. 
+Content in an inert subtree will not be perceivable by all users, or interactive. 
+Authors should not specify elements as inert 
+unless the content they represent are also visually obscured in some way. 
+In most cases, 
+authors should not specify the inert attribute on individual form controls. 
+In these instances, the <{input/disabled}> attribute is probably more appropriate.
+
+<div class=issue>
+	The HTML <{html-global/inert}> attribute is meant to be stronger
+	than the 'interactivity' property,
+	per CSSWG resolution.
+	This should be achieved by the following user-agent CSS:
+
+	<pre highlight=css>
+	@scope ([inert]) to (X) {
+	  interactivity: inert !important;
+	}
+	</pre>
+
+	Where the <css>X</css> represents a theoretical selector 
+	matching any elements that "escape" inertness by default,
+	such as modal dialogs.
+
+	This prevents descendants of an element with the <{html-global/inert}> attribute
+	from being un-inerted,
+	but <em>does</em> allow elements that are [=flat tree=] descendants,
+	but not DOM tree descendants,
+	to be set non-inert.
+	For example, a light-tree element
+	slotted into an inert subtree in a shadow DOM
+	could turn off inertness.
+	I assume this is ok?
+</div>
+
+
 
 <h2 id="styling-widgets" oldids="form-styling, control-styling">
 Styling Widgets</h2>

From ec8cf37d42e2af08ab834076ab50dcab6969cb9f Mon Sep 17 00:00:00 2001
From: Tab Atkins-Bittner <jackalmage@gmail.com>
Date: Tue, 12 Nov 2024 10:26:40 -0800
Subject: [PATCH 2/3] [css-ui-4] Sigh, inheritance *does* work on the flat
 tree, I'm dumb.

---
 css-ui-4/Overview.bs | 34 ++++++++++------------------------
 1 file changed, 10 insertions(+), 24 deletions(-)

diff --git a/css-ui-4/Overview.bs b/css-ui-4/Overview.bs
index 14af8932cd0..ed4163652ec 100644
--- a/css-ui-4/Overview.bs
+++ b/css-ui-4/Overview.bs
@@ -1979,10 +1979,10 @@ Preventing All Interaction: the 'interactivity' property</h3>
 
 <pre class=propdef>
 Name: interactivity
-Value: auto | normal | inert
+Value: auto | inert
 Initial: auto
 Applies to: all elements
-Inherited: no
+Inherited: yes
 Percentages: N/A
 Computed Value: as specified
 Animation type: discrete
@@ -1995,22 +1995,13 @@ are [=inert=] or not.
 <dl dfn-type=value dfn-for=interactivity>
 	: <dfn>auto</dfn>
 	::
-		The element is [=inert=] if and only if 
-		its [=flat tree=] parent is [=inert=].
-
-	: <dfn>normal</dfn>
-	:: The element is not [=inert=].
+		Unless otherwise specified by the host language,
+		the element is not [=inert=].
 
 	: <dfn>inert</dfn>
 	:: The element is [=inert=].
 </dl>
 
-Note: While 'interactivity' is not an [=inherited=] property,
-by default (when set to ''interactivity/auto'')
-it acts <em>similarly</em> to one,
-except it "inherits" thru the [=flat tree=]
-rather than the usual parent/child relationship.
-
 <div algorithm>
 	When an [=element=] or [=text run=] is <dfn export>inert</dfn>:
 
@@ -2048,23 +2039,18 @@ In these instances, the <{input/disabled}> attribute is probably more appropriat
 
 	<pre highlight=css>
 	@scope ([inert]) to (X) {
-	  interactivity: inert !important;
+		* {
+	  	interactivity: inert !important;
+		}
+	}
+	X {
+		interactivity: auto;
 	}
 	</pre>
 
 	Where the <css>X</css> represents a theoretical selector 
 	matching any elements that "escape" inertness by default,
 	such as modal dialogs.
-
-	This prevents descendants of an element with the <{html-global/inert}> attribute
-	from being un-inerted,
-	but <em>does</em> allow elements that are [=flat tree=] descendants,
-	but not DOM tree descendants,
-	to be set non-inert.
-	For example, a light-tree element
-	slotted into an inert subtree in a shadow DOM
-	could turn off inertness.
-	I assume this is ok?
 </div>
 
 

From ef558b7b7b8264cff75fa9715c5bebc3323c3b8c Mon Sep 17 00:00:00 2001
From: Tab Atkins-Bittner <jackalmage@gmail.com>
Date: Thu, 23 Jan 2025 13:28:10 -0800
Subject: [PATCH 3/3] [css-ui-4] Ensure 'interactivity' can make things inert,
 but can't *escape* inertness; defer more to the host language.

---
 css-ui-4/Overview.bs | 34 +++++++++++++++++++---------------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/css-ui-4/Overview.bs b/css-ui-4/Overview.bs
index ed4163652ec..a9604a4b4bd 100644
--- a/css-ui-4/Overview.bs
+++ b/css-ui-4/Overview.bs
@@ -1994,9 +1994,8 @@ are [=inert=] or not.
 
 <dl dfn-type=value dfn-for=interactivity>
 	: <dfn>auto</dfn>
-	::
-		Unless otherwise specified by the host language,
-		the element is not [=inert=].
+	:: 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>
 	:: The element is [=inert=].
@@ -2018,6 +2017,16 @@ are [=inert=] or not.
 	to override the restrictions on find-in-page and text selection.
 </div>
 
+Note: This property allows an author to force an element [=inert=],
+but doesn't allow making an element *non*-[=inert=],
+just deferring inertness to the host language.
+For example, in HTML, while a modal dialog is being displayed,
+the rest of the page is forced inert automatically,
+regardless of the value of this property.
+In general, host languages can make use of more information about the document
+than CSS has easy access to
+to determine what the best inertness behavior is for users.
+
 Note: [=Inert=] nodes generally cannot be focused, 
 and user agents do not expose the inert nodes 
 to accessibility APIs or assistive technologies.
@@ -2032,25 +2041,20 @@ authors should not specify the inert attribute on individual form controls.
 In these instances, the <{input/disabled}> attribute is probably more appropriate.
 
 <div class=issue>
-	The HTML <{html-global/inert}> attribute is meant to be stronger
-	than the 'interactivity' property,
-	per CSSWG resolution.
-	This should be achieved by the following user-agent CSS:
+	The following should be inserted into the HTML stylesheet,
+	to ensure that top-level modal dialogs become uninert by default:
 
 	<pre highlight=css>
-	@scope ([inert]) to (X) {
-		* {
-	  	interactivity: inert !important;
-		}
+	[inert] {
+		interactivity: inert;
 	}
-	X {
+	dialog:modal {
 		interactivity: auto;
 	}
 	</pre>
 
-	Where the <css>X</css> represents a theoretical selector 
-	matching any elements that "escape" inertness by default,
-	such as modal dialogs.
+	The <css>dialog:modal</css> selector above needs to be expanded 
+	for any other elements that escape inertness by default.
 </div>