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

Custom properties highlights #11528

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Custom properties highlights #11528

Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
721e0a9
[CSS-Pseudo] Correct custom properties in highlights
schenney-chromium Jan 18, 2025
8573ecc
[CSS Pseudo] Add to the change list
schenney-chromium Jan 18, 2025
e211852
Merge branch 'w3c:main' into custom-properties-highlights
schenney-chromium Jan 18, 2025
cbfebc5
Merge branch 'w3c:main' into custom-properties-highlights
schenney-chromium Jan 24, 2025
00691f7
Update the inheritance behavior
schenney-chromium Jan 24, 2025
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
26 changes: 15 additions & 11 deletions css-pseudo-4/Overview.bs
View file
Open in desktop
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]], but these are not inherited
schenney-chromium marked this conversation as resolved.
Show resolved Hide resolved
</ul>

Issue: Are there any other properties that should be included here?
Expand Down Expand Up @@ -1201,18 +1203,19 @@ 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 styling because it only defines
custon properties, with no properties that influence the appearance.
schenney-chromium marked this conversation as resolved.
Show resolved Hide resolved
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.
schenney-chromium marked this conversation as resolved.
Show resolved Hide resolved
</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-exsting implementations.

<h3 id="highlight-painting">
Painting the Highlight</h3>
Expand Down Expand Up @@ -1909,7 +1912,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