Skip to content

Commit

Permalink
[CSS-Pseudo] Correct custom properties in highlights (#11528)
Browse files Browse the repository at this point in the history
It was resolved in #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. Furthermore, it fixes the description of custom property inheritance that was wrong even for the prior version of the spec.
  • Loading branch information
schenney-chromium authored Feb 6, 2025
1 parent c982ea6 commit 426eb9b
Showing 1 changed file with 24 additions and 19 deletions.
43 changes: 24 additions & 19 deletions css-pseudo-4/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -910,6 +910,8 @@ Styling Highlights</h3>
<wpt>
textpath-selection-011.html
</wpt>

<li>[=custom properties=] [[!CSS-VARIABLES-1]]
</ul>

Issue: Are there any other properties that should be included here?
Expand Down Expand Up @@ -1106,15 +1108,14 @@ Cascading and Per-Element Highlight Styles</h3>
its [=specified value=] is determined by inheritance from
the corresponding <a>highlight pseudo-element</a>
of its <a>originating element</a>'s parent element.
This occurs regardless of whether that property is an <a>inherited property</a>
(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 <a>inherited property</a>.

Additionally, for [=highlight pseudo-elements=] originating from the [=root element=]:
<ul>
<li> the inherited value of 'color' is ''currentColor'', not the [=initial value=].
<li> [=custom properties=] inherit from the [=root element=].
</ul>
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 <a>originating element</a>,
regardless of whether that property is a [=custom property=]
that is registered to [=CSS/inherit=] or not.

<wpt>
active-selection-051.html
Expand Down Expand Up @@ -1201,18 +1202,21 @@ Cascading and Per-Element Highlight Styles</h3>
text-decoration-color: var(--decoration-color, red);
}
</pre>
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'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.
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.
However since ''--decoration-color'' is specified on the ''div::selection'' itself,
its value from the [=originating element=] is not used.
</div>

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-existing implementations.

<h3 id="highlight-painting">
Painting the Highlight</h3>
Expand Down Expand Up @@ -1909,7 +1913,8 @@ Changes</h2>
application and inheritance model for [=highlight pseudo-elements=]
(Issues <a href="https://github.com/w3c/csswg-drafts/issues/7591">7591</a>,
<a href="https://github.com/w3c/csswg-drafts/issues/7580">7580</a>,
<a href="https://github.com/w3c/csswg-drafts/issues/6641">6641</a>)
<a href="https://github.com/w3c/csswg-drafts/issues/6641">6641</a>,
<a href="https://github.com/w3c/csswg-drafts/issues/11317">11317</a>)
<li>Defined ''::highlight()'' and improved cross-referencing to [[CSS-HIGHLIGHT-API-1]].
(Issue <a href="https://github.com/w3c/csswg-drafts/issues/6755">6755</a>)
<li>Added ''::search-text'' as a new [=highlight pseudo-element=].
Expand Down

0 comments on commit 426eb9b

Please sign in to comment.