Skip to content

Commit 426eb9b

Browse files
[CSS-Pseudo] Correct custom properties in highlights (#11528)
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.
1 parent c982ea6 commit 426eb9b

File tree

1 file changed

+24
-19
lines changed

1 file changed

+24
-19
lines changed

css-pseudo-4/Overview.bs

+24-19
Original file line numberDiff line numberDiff line change
@@ -910,6 +910,8 @@ Styling Highlights</h3>
910910
<wpt>
911911
textpath-selection-011.html
912912
</wpt>
913+
914+
<li>[=custom properties=] [[!CSS-VARIABLES-1]]
913915
</ul>
914916

915917
Issue: Are there any other properties that should be included here?
@@ -1106,15 +1108,14 @@ Cascading and Per-Element Highlight Styles</h3>
11061108
its [=specified value=] is determined by inheritance from
11071109
the corresponding <a>highlight pseudo-element</a>
11081110
of its <a>originating element</a>'s parent element.
1109-
This occurs regardless of whether that property is an <a>inherited property</a>
1110-
(and regardless of whether that property is a [=custom property=]
1111-
that is registered to [=CSS/inherit=] or not).
1111+
This occurs regardless of whether that property is an <a>inherited property</a>.
11121112

1113-
Additionally, for [=highlight pseudo-elements=] originating from the [=root element=]:
1114-
<ul>
1115-
<li> the inherited value of 'color' is ''currentColor'', not the [=initial value=].
1116-
<li> [=custom properties=] inherit from the [=root element=].
1117-
</ul>
1113+
Additionally, for [=highlight pseudo-elements=] originating from the [=root element=]
1114+
the inherited value of 'color' is ''currentColor'', not the [=initial value=].
1115+
1116+
All [=custom properties=] inherit from the <a>originating element</a>,
1117+
regardless of whether that property is a [=custom property=]
1118+
that is registered to [=CSS/inherit=] or not.
11181119

11191120
<wpt>
11201121
active-selection-051.html
@@ -1201,18 +1202,21 @@ Cascading and Per-Element Highlight Styles</h3>
12011202
text-decoration-color: var(--decoration-color, red);
12021203
}
12031204
</pre>
1204-
A div's selection highlight would be a green background to the
1205-
selected content, with a 1px thick blue underline. The
1206-
''--background-color'' custom property is not found on the
1207-
''div::selection'' nor ''::selection'' so it is taken from the
1208-
''::root'' custom property match. The ''--decoration-thickness''
1209-
property is inherited from ''::selection'' via the highlight
1210-
cascade and ''--decoration-color'' is found in
1211-
''div::selection'' itself.
1205+
The universal ''::selection'' uses the user-agent's default styling
1206+
because it only defines custom properties,
1207+
with no properties that influence the appearance.
1208+
A div's selection highlight would apply a green background to the selected content,
1209+
with a 10px thick blue underline.
1210+
Since ''--background-color'' and ''--decoration-thickness'' custom properties
1211+
are not specified on the ''div::selection'' peudo-element,
1212+
they are inherited from its originating <{div}> element,
1213+
which itself inherits the custom properties from the root.
1214+
However since ''--decoration-color'' is specified on the ''div::selection'' itself,
1215+
its value from the [=originating element=] is not used.
12121216
</div>
12131217

1214-
Note: This behavior is intended to accomodate the standard practice of
1215-
defining document-wide custom properties on '':root''.
1218+
Note: This behavior allows control of selection with custom properties
1219+
in a way that is compatible with pre-existing implementations.
12161220

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

0 commit comments

Comments
 (0)