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

Jump to bottom

Resolve highlight custom properties from the root #41716

Merged
merged 1 commit into from
Sep 6, 2023
Merged

Resolve highlight custom properties from the root #41716

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
18 changes: 18 additions & 0 deletions css/css-pseudo/highlight-cascade-008-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<title>Custom property values from the root element</title>
<script src="support/selections.js"></script>
<style>
div::selection {
background-color: green;
text-decoration-line: underline;
text-decoration-style: line;
text-decoration-thickness: 1px;
text-decoration-color: yellow;
}
span::selection {
background-color: blue;
}
</style>
<div style="width: 300px">PASS if background-color is green when selected, <span>except this which is blue</span>, and underline is yellow.<script>
selectNodeContents(document.querySelector("div"));
</script>
31 changes: 31 additions & 0 deletions css/css-pseudo/highlight-cascade-008.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<title>Custom property values from the root element</title>
<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
<link rel="match" href="highlight-cascade-008-ref.html">
<meta name="assert" value="This test verifies that when a custom property is not found in highlight cascade, its value is taken from the root element.">
<meta name="fuzzy" content="0-255;0-10">
<script src="support/selections.js"></script>
<style>
:root {
--background-color: green;
--decoration-color: purple;
}
::selection {
--decoration-color: yellow;
}
div::selection {
background-color: var(--background-color, red);
text-decoration-line: underline;
text-decoration-style: line;
text-decoration-color: var(--decoration-color, red);
}
span::selection {
--background-color: blue;
background-color: var(--background-color, red);
}
</style>
<div style="width: 300px">PASS if background-color is green when selected, <span>except this which is blue</span>, and underline is yellow.</div>
<script>
selectNodeContents(document.querySelector("div"));
</script>
41 changes: 41 additions & 0 deletions css/css-pseudo/highlight-cascade-009.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!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:schenney@chromium.org">
<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 non-applicable property declarations are ignored in highlight pseudos, that the computed values of ‘font-size’ and ‘line-height’ in highlight pseudos are taken from the originating element, and that ‘text-shadow’ in highlight pseudos respects these values when given ‘em’ and ‘lh’ units.">
<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 {
--background-color: green;
--decoration-color: purple;
}
::selection {
--decoration-color: green;
}
div::selection {
--background-color: blue;
background-color: var(--background-color, red);
}
</style>
<body>
<div>Some text</div>
</body>
<script>
selectNodeContents(document.querySelector("body"));

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 has the root custom property");
test(() => void assert_equals(body_selection.getPropertyValue("--decoration-color"), "green"),
"body ::selection uses it's own custom property");
test(() => void assert_equals(div_selection.getPropertyValue("--decoration-color"), "green"),
"div::selection inherits a custom property");
test(() => void assert_equals(div_selection.getPropertyValue("--background-color"), "blue"),
"div::selection uses it's own custom property");
</script>