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

Allow custom properties in highlight pseudos #50379

Merged
merged 1 commit into from
Jan 30, 2025
Merged

Allow custom properties in highlight pseudos #50379

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 3 additions & 3 deletions css/css-pseudo/highlight-cascade/highlight-cascade-008.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
--background-color: green;
--decoration-color: yellow;
}
::selection {
:root::selection {
--background-color: cyan;
--decoration-color: magenta;
}
Expand All @@ -22,10 +22,10 @@
text-decoration-color: var(--decoration-color, red);
}
span {
--background-color: blue;
--background-color: purple;
}
span::selection {
--background-color: purple;
--background-color: blue;
background-color: var(--background-color, red);
}
</style>
Expand Down
13 changes: 8 additions & 5 deletions css/css-pseudo/highlight-cascade/highlight-cascade-009.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@
<link rel="author" title="Stephen Chenney" href="mailto:[email protected]">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6641">
<meta name="assert" content="This test verifies that custom properties used in highlight pseudos are taken from the originating element.">
<meta name="assert" content="This test verifies that custom properties used in highlight pseudos are taken from the highlight and originating element.">
<script src="../support/selections.js"></script>
<link rel="stylesheet" href="../support/highlights.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
:root {
body {
--background-color: green;
--decoration-color: green;
}
::selection {
body::selection {
--decoration-color: purple;
}
div::selection {
Expand All @@ -28,14 +28,17 @@
<script>
selectNodeContents(document.querySelector("body"));

const div_style = getComputedStyle(document.querySelector("div"));
const body_selection = getComputedStyle(document.querySelector("body"), "::selection");
const div_selection = getComputedStyle(document.querySelector("div"), "::selection");
test(() => void assert_equals(body_selection.getPropertyValue("--background-color"), "green"),
"body ::selection uses the originating custom property");
test(() => void assert_equals(body_selection.getPropertyValue("--decoration-color"), "green"),
test(() => void assert_equals(body_selection.getPropertyValue("--decoration-color"), "purple"),
"body ::selection does not use its own custom property");
test(() => void assert_equals(div_selection.getPropertyValue("--decoration-color"), "green"),
"div::selection uses the originating element custom property");
test(() => void assert_equals(div_selection.getPropertyValue("--background-color"), "green"),
test(() => void assert_equals(div_selection.getPropertyValue("--background-color"), "blue"),
"div::selection does not use its own custom property");
test(() => void assert_equals(div_style.getPropertyValue("--background-color"), "green"),
"div::selection properties are not present on the originating element");
</script>
31 changes: 31 additions & 0 deletions css/css-pseudo/highlight-cascade/highlight-cascade-011.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Pseudo-Elements Test: highlight cascade: inheritance of custom properties</title>
<link rel="author" title="Stephen Chenney" href="mailto:[email protected]">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6641">
<meta name="assert" content="This test verifies that custom properties used in highlight pseudos are taken from the highlight and originating element.">
<script src="../support/selections.js"></script>
<link rel="stylesheet" href="../support/highlights.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
:root::selection {
--background-color: red;
}
div::selection {
background-color: var(--background-color, green);
}
</style>
<body>
<div>Some text</div>
</body>
<script>
selectNodeContents(document.querySelector("body"));

const div_selection = getComputedStyle(document.querySelector("div"), "::selection");
test(() => void assert_equals(div_selection.backgroundColor, "rgb(0, 128, 0)"),
"div::selection does not inherit custom properties from the highlight parent");
test(() => void assert_equals(div_selection.getPropertyValue("--background-color"), ""),
"--background-color has no computed value on div::selection");
</script>
7 changes: 4 additions & 3 deletions css/css-pseudo/highlight-styling-001.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,19 @@
<link rel="author" title="Delan Azabani" href="mailto:[email protected]">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-styling">
<link rel="match" href="highlight-styling-001-ref.html">
<meta name="assert" value="This test verifies that ::selection styles cannot set custom properties.">
<meta name="assert" value="This test verifies that ::selection styles can set custom properties and they over-ride the originating element.">
<script src="support/selections.js"></script>
<link rel="stylesheet" href="support/highlights.css">
<style>
main {
--x: red;
font-size: 7em;
margin: 0.5em;
}
main::selection {
--x: red;
--x: green;
color: white;
background-color: var(--x, green);
background-color: var(--x, blue);
}
</style>
<p>Test passes if the text below is white on green.
Expand Down