Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-pseudo-4] Add discussion of properties from the originating element #9428

Merged
merged 6 commits into from
Oct 15, 2024
Merged

[css-pseudo-4] Add discussion of properties from the originating element #9428

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d0e8a41
Add discussion of properties from the originating element
schenney-chromium Sep 30, 2023
4dec774
Merge branch 'w3c:main' into font-relative-units
schenney-chromium Nov 1, 2023
aadf706
Update Overview.bs
schenney-chromium Nov 1, 2023
0d22b98
Merge branch 'w3c:main' into font-relative-units
schenney-chromium Nov 25, 2023
8382a86
Merge branch 'w3c:main' into font-relative-units
schenney-chromium Apr 25, 2024
8ff1c4f
Add discussion of custom properties
schenney-chromium Apr 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 22 additions & 9 deletions css-pseudo-4/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -696,16 +696,12 @@ Styling Highlights</h3>
<wpt>
css/css-pseudo/textpath-selection-011.html
</wpt>

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

The 'forced-color-adjust' property cannot be set on [=highlight pseudo-elements=];
however a [=highlight pseudo-element=] must honor
any [=forced colors mode=] applied to its [=originating element=]
(and is therefore subject to the control of the [=originating element=]’s 'forced-color-adjust' value).

Issue: Are there any other properties that should be included here?

Note: Historically (and at the time of writing)
only 'color' and 'background-color' have been interoperably supported.

Note: The 'color' property sets the color of
both the text
Expand All @@ -714,6 +710,25 @@ Styling Highlights</h3>
applied to the text
by the <a>originating element</a> and its ancestors and descendants.

<h4>Values Resolved From Originating Elements</h4>
There are several properties that modify colors or resolve units but cannot be
used inside [=highlight pseudo-elements=], yet are important for specifyng the
appearance of properties that are used in the highlight. For example:

<ul>
<li>'forced-color-adjust' (used with [=forced colors mode=], which [=highlight pseudo-elements=] must respect)
<li>'font', 'font-size', etc. used to resolve 'em' and other font-relative units.
<li>'line-height' used to resolve 'lh' units.
<li>[=custom properties=] [[!CSS-VARIABLES-1]] used as property values.
</ul>

These properties are ignored if defined on the [=highlight pseudo-element=]
itself. Rather, any non-allowed property required to define the appearance of a
[=highlight pseudo-element=] is taken from the [=originating element=]’s
corresponding property. The computed style of the [=highlight pseudo-element=]
will include any properties taken from the originating element, even if not
allowed on the [=highlight pseudo-element=] itself.

<!-- Add this back if for some reason someone wants to implement 'outline'?
The outline, if supported, must be drawn
around the union of the active portions of the <a>highlight overlay</a>
Expand All @@ -725,8 +740,6 @@ Styling Highlights</h3>
into a single shape.
-->

Note: Historically (and at the time of writing)
only 'color' and 'background-color' have been interoperably supported.

<h3 id=highlight-ua-styles>
Default UA Styles</h3>
Expand Down