From 721e0a96f2896b54602be160e68e1798ef80a775 Mon Sep 17 00:00:00 2001 From: Stephen Chenney Date: Sat, 18 Jan 2025 09:46:48 -0500 Subject: [PATCH 1/4] [CSS-Pseudo] Correct custom properties in highlights It was resolved in https://github.com/w3c/csswg-drafts/issues/11317, CSS Highlight Pseudos should allow custom property definitions within the rule itself, but take any missing custom properties from the originating element. This PR updates the spec to re-list custom properties as supported on highlights. Futhermore, it fixes the description of custom property inheritance that was wrong even for the prior version of the spec. --- css-pseudo-4/Overview.bs | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/css-pseudo-4/Overview.bs b/css-pseudo-4/Overview.bs index 0c09488067a..5f71c8f83ef 100644 --- a/css-pseudo-4/Overview.bs +++ b/css-pseudo-4/Overview.bs @@ -910,6 +910,8 @@ Styling Highlights textpath-selection-011.html + +
  • [=custom properties=] [[!CSS-VARIABLES-1]], but these are not inherited Issue: Are there any other properties that should be included here? @@ -1201,18 +1203,19 @@ Cascading and Per-Element Highlight Styles text-decoration-color: var(--decoration-color, red); } - A div's selection highlight would be a green background to the - selected content, with a 1px thick blue underline. The - ''--background-color'' custom property is not found on the - ''div::selection'' nor ''::selection'' so it is taken from the - ''::root'' custom property match. The ''--decoration-thickness'' - property is inherited from ''::selection'' via the highlight - cascade and ''--decoration-color'' is found in - ''div::selection'' itself. + The universal selection uses the user-agent styling because it only defines + custon properties, with no properties that influence the appearance. + A div's selection highlight must be a green background to the + selected content, with a 10px thick blue underline. The + ''--background-color'' and ''--decoration-thickness'' custom properties + are not found on the ''div::selection'' so come from the originating div element, + which itself inherits the custom properties from the root. + The ''--decoration-color'' is found in the ''div::selection'' itself, + so the color from the originating elemnent is not used. - Note: This behavior is intended to accomodate the standard practice of - defining document-wide custom properties on '':root''. + Note: This behavior allows control of selection with custom properties + in a way that is compatible with pre-exsting implementations.

    Painting the Highlight

    From 8573ecc642b24322739a22004a249c734386b426 Mon Sep 17 00:00:00 2001 From: Stephen Chenney Date: Sat, 18 Jan 2025 09:49:16 -0500 Subject: [PATCH 2/4] [CSS Pseudo] Add to the change list --- css-pseudo-4/Overview.bs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/css-pseudo-4/Overview.bs b/css-pseudo-4/Overview.bs index 5f71c8f83ef..93902b4e79a 100644 --- a/css-pseudo-4/Overview.bs +++ b/css-pseudo-4/Overview.bs @@ -1912,7 +1912,8 @@ Changes application and inheritance model for [=highlight pseudo-elements=] (Issues 7591, 7580, - 6641) + 6641, + 11317)
  • Defined ''::highlight()'' and improved cross-referencing to [[CSS-HIGHLIGHT-API-1]]. (Issue 6755)
  • Added ''::search-text'' as a new [=highlight pseudo-element=]. From 00691f7c3a5c484bc24e5cc5b7f10668d1267fa9 Mon Sep 17 00:00:00 2001 From: Stephen Chenney Date: Fri, 24 Jan 2025 12:56:04 -0500 Subject: [PATCH 3/4] Update the inheritance behavior Post review updates and also fix more problems with the highlight cascade text. --- css-pseudo-4/Overview.bs | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/css-pseudo-4/Overview.bs b/css-pseudo-4/Overview.bs index 93902b4e79a..f4fc9145628 100644 --- a/css-pseudo-4/Overview.bs +++ b/css-pseudo-4/Overview.bs @@ -911,7 +911,7 @@ Styling Highlights textpath-selection-011.html -
  • [=custom properties=] [[!CSS-VARIABLES-1]], but these are not inherited +
  • [=custom properties=] [[!CSS-VARIABLES-1]] Issue: Are there any other properties that should be included here? @@ -1108,15 +1108,14 @@ Cascading and Per-Element Highlight Styles its [=specified value=] is determined by inheritance from the corresponding highlight pseudo-element of its originating element's parent element. - This occurs regardless of whether that property is an inherited property - (and regardless of whether that property is a [=custom property=] - that is registered to [=CSS/inherit=] or not). + This occurs regardless of whether that property is an inherited property. - Additionally, for [=highlight pseudo-elements=] originating from the [=root element=]: - + Additionally, for [=highlight pseudo-elements=] originating from the [=root element=] + the inherited value of 'color' is ''currentColor'', not the [=initial value=]. + + All [=custom properties=] inherit from the originating element, + regardless of whether that property is a [=custom property=] + that is registered to [=CSS/inherit=] or not. active-selection-051.html @@ -1204,10 +1203,10 @@ Cascading and Per-Element Highlight Styles } The universal selection uses the user-agent styling because it only defines - custon properties, with no properties that influence the appearance. - A div's selection highlight must be a green background to the - selected content, with a 10px thick blue underline. The - ''--background-color'' and ''--decoration-thickness'' custom properties + custom properties, with no properties that influence the appearance. + A div's selection highlight must be a green background to the selected content, + with a 10px thick blue underline. + The ''--background-color'' and ''--decoration-thickness'' custom properties are not found on the ''div::selection'' so come from the originating div element, which itself inherits the custom properties from the root. The ''--decoration-color'' is found in the ''div::selection'' itself, From 4e61c6e3778700993f79bb4f5f6b9dd22ef22ce2 Mon Sep 17 00:00:00 2001 From: Stephen Chenney Date: Thu, 6 Feb 2025 10:54:46 -0500 Subject: [PATCH 4/4] Update from Review Comments Applied all of the suggested changes. Learned some things too. --- css-pseudo-4/Overview.bs | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/css-pseudo-4/Overview.bs b/css-pseudo-4/Overview.bs index f4fc9145628..643e625822e 100644 --- a/css-pseudo-4/Overview.bs +++ b/css-pseudo-4/Overview.bs @@ -1202,19 +1202,21 @@ Cascading and Per-Element Highlight Styles text-decoration-color: var(--decoration-color, red); } - The universal selection uses the user-agent styling because it only defines - custom properties, with no properties that influence the appearance. - A div's selection highlight must be a green background to the selected content, + The universal ''::selection'' uses the user-agent's default styling + because it only defines custom properties, + with no properties that influence the appearance. + A div's selection highlight would apply a green background to the selected content, with a 10px thick blue underline. - The ''--background-color'' and ''--decoration-thickness'' custom properties - are not found on the ''div::selection'' so come from the originating div element, + Since ''--background-color'' and ''--decoration-thickness'' custom properties + are not specified on the ''div::selection'' peudo-element, + they are inherited from its originating <{div}> element, which itself inherits the custom properties from the root. - The ''--decoration-color'' is found in the ''div::selection'' itself, - so the color from the originating elemnent is not used. + However since ''--decoration-color'' is specified on the ''div::selection'' itself, + its value from the [=originating element=] is not used. Note: This behavior allows control of selection with custom properties - in a way that is compatible with pre-exsting implementations. + in a way that is compatible with pre-existing implementations.

    Painting the Highlight