-
Notifications
You must be signed in to change notification settings - Fork 2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Bug 1732067 [wpt PR 30813] - CSS highlight processing model, a=testonly
Automatic update from web-platform-tests CSS highlight processing model This patch implements the inheritance-based propagation for highlight pseudo-elements, as described in css-pseudo’s #highlight-cascade and introduced in w3c/csswg-drafts#2474. Highlight pseudos like ::selection were historically implemented such that only the ::selection selector (*::selection) worked intuitively. The spec’s processing model essentially makes it possible to define both general ::selection styles and more specific ::selection styles. We add a feature (HighlightInheritance) and a new computed style extra field of type scoped_refptr<StyleHighlightData>, which in turn points to four refcounted ComputedStyle instances, one for each highlight. Only a handful of properties are applicable, but reusing ComputedStyle like this simplifies the applying code, and allows us to share many of the field groups between instances anyway. We update the initial style singleton to point to a set of four empty highlight styles, which we only use when the feature is enabled. When the feature is disabled (or resolving custom ::highlight styles), there is no functional change. Highlight styles are lazily computed on paint’s demand, inherit only from the originating element styles, and we store the result in the Element’s pseudo cache (StyleCachedData). When the feature is enabled, we compute highlight styles during the originating element’s recalc (RecalcOwnStyle), skipping any highlight pseudos that the element had no matching rules for (a question that can already be answered thanks to pseudo bits). Style resolution is largely unchanged: we start with default styles, then use output of the cascade to change those styles. But defaulting is much easier for highlight styles: all properties are inherited, so we can simply clone the whole ComputedStyle. Relevant test page and screenshots: • https://bucket.daz.cat/work/igalia/0/8.html • https://bucket.daz.cat/4f37833aa15299a5.png (before) • https://bucket.daz.cat/67d2abdd9bcda17c.png (after) WPT already has some tests (css/css-pseudo/cascade-highlight-*), but more thorough test coverage will land in these patches: • web-platform-tests/wpt#30688 • web-platform-tests/wpt#30692 Bug: 1024156 Change-Id: I1f54f36ef2ac80165261a3f80d3a21cdf359c199 Cq-Do-Not-Cancel-Tryjobs: true Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2850068 Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Reviewed-by: Mason Freed <masonf@chromium.org> Commit-Queue: Delan Azabani <dazabani@igalia.com> Cr-Commit-Position: refs/heads/main@{#923485} -- wpt-commits: 4eb26e6225ed30a6cfc73eb743eaf9f59086521c wpt-pr: 30813
- Loading branch information
1 parent
e25dbcf
commit 6dbbbda
Showing
22 changed files
with
553 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
18 changes: 18 additions & 0 deletions
18
testing/web-platform/tests/css/css-pseudo/highlight-cascade-001-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
<!doctype html> | ||
<meta charset="utf-8"> | ||
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com"> | ||
<script src="support/selections.js"></script> | ||
<link rel="stylesheet" href="support/highlights.css"> | ||
<style> | ||
main { | ||
font-size: 7em; | ||
margin: 0.5em; | ||
} | ||
main > span::selection { | ||
background-color: green; | ||
color: white; | ||
} | ||
</style> | ||
<p>Test passes if the text below is white on green. | ||
<main class="highlight_reftest"><span>quick</span></main> | ||
<script>selectNodeContents(document.querySelector("main"));</script> |
26 changes: 26 additions & 0 deletions
26
testing/web-platform/tests/css/css-pseudo/highlight-cascade-001.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
<!doctype html> | ||
<meta charset="utf-8"> | ||
<title>CSS Pseudo-Elements Test: highlight cascade: unset is treated like inherit regardless of whether property is inherited</title> | ||
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com"> | ||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade"> | ||
<link rel="match" href="highlight-cascade-001-ref.html"> | ||
<meta name="assert" value="This test verifies that, given ::selection styles with both color and background-color declared as unset, both properties inherit their values from the parent ::selection styles. All properties become inherited for the purposes of deciding whether unset should mean initial or inherit."> | ||
<script src="support/selections.js"></script> | ||
<link rel="stylesheet" href="support/highlights.css"> | ||
<style> | ||
main { | ||
font-size: 7em; | ||
margin: 0.5em; | ||
} | ||
main::selection { | ||
background-color: green; | ||
color: white; | ||
} | ||
main > span::selection { | ||
background-color: unset; | ||
color: unset; | ||
} | ||
</style> | ||
<p>Test passes if the text below is white on green. | ||
<main class="highlight_reftest"><span>quick</span></main> | ||
<script>selectNodeContents(document.querySelector("main"));</script> |
42 changes: 42 additions & 0 deletions
42
testing/web-platform/tests/css/css-pseudo/highlight-cascade-002-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
<!doctype html> | ||
<meta charset="utf-8"> | ||
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com"> | ||
<script src="support/selections.js"></script> | ||
<link rel="stylesheet" href="support/highlights.css"> | ||
<style> | ||
main { | ||
font-size: 7em; | ||
margin: 0.5em; | ||
} | ||
main::selection { | ||
color: black; | ||
background-color: transparent; | ||
} | ||
main > .control > span::selection, | ||
main > .bg > span::selection { | ||
color: white; | ||
background-color: green; | ||
} | ||
main > .fg > span::selection { | ||
color: green; | ||
background-color: white; | ||
} | ||
</style> | ||
<p>Test passes if the words below are (respectively): white on green, green on white, white on green. | ||
<!-- | ||
The element tree below is intentionally the same shape as the | ||
test, despite the fact that we might be able to simplify it. This | ||
is because multiple impls (including Gecko and Blink) split the | ||
background paints accordingly, which can obscure ink overflow in | ||
some of the highlighted text (especially “f”). | ||
--> | ||
<main class="highlight_reftest" | ||
><span class="control"><span>foo</span></span | ||
> <span class="fg"><span>b</span></span | ||
><span class="fg"><span>a</span></span | ||
><span class="fg"><span>r</span></span | ||
> <span class="bg"><span>b</span></span | ||
><span class="bg"><span>a</span></span | ||
><span class="bg"><span>z</span></span | ||
></main> | ||
<script>selectNodeContents(document.querySelector("main"));</script> |
120 changes: 120 additions & 0 deletions
120
testing/web-platform/tests/css/css-pseudo/highlight-cascade-002.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,120 @@ | ||
<!doctype html> | ||
<meta charset="utf-8"> | ||
<title>CSS Pseudo-Elements Test: highlight cascade: custom properties are inherited regardless of inherits flag or inheritedness of referencing property</title> | ||
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com"> | ||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade"> | ||
<link rel="match" href="highlight-cascade-002-ref.html"> | ||
<meta name="assert" value="This test verifies that, given ::selection styles referencing custom properties, their substitution values are inherited from the parent ::selection styles, even if the property is registered with inherits set to false (--inherits-false) or the referencing property is not an inherited property (background-color). All custom properties are treated as inherited when used in highlight styles in any way."> | ||
<script src="support/selections.js"></script> | ||
<link rel="stylesheet" href="support/highlights.css"> | ||
<style> | ||
/* | ||
Register the custom properties, other than --unregistered, | ||
which would be an inherited property [css-variables-1]. | ||
*/ | ||
@property --control { | ||
syntax: "<color>"; | ||
initial-value: green; | ||
inherits: false; | ||
} | ||
@property --inherits-false { | ||
syntax: "<color>"; | ||
initial-value: red; | ||
inherits: false; | ||
} | ||
@property --inherits-true { | ||
syntax: "<color>"; | ||
initial-value: red; | ||
inherits: true; | ||
} | ||
|
||
main { | ||
font-size: 7em; | ||
margin: 0.5em; | ||
} | ||
main::selection { | ||
/* | ||
Don’t visibly highlight the spaces between words. | ||
*/ | ||
color: black; | ||
background-color: transparent; | ||
} | ||
|
||
/* | ||
Non-highlight control: if this text is white on red (inherit) | ||
rather than white on green (initial), then @property is not | ||
supported well enough to make this test meaningful. | ||
*/ | ||
main > .control { | ||
--control: red; | ||
} | ||
main > .control > span { | ||
color: white; | ||
background-color: var(--control); | ||
} | ||
|
||
main > *::selection { | ||
--inherits-false: green; | ||
--inherits-true: green; | ||
--unregistered: green; | ||
} | ||
|
||
/* | ||
Foreground tests: if the foreground of this text is red or | ||
black (initial) rather than green (inherit), then custom | ||
properties are not being inherited in highlight styles. | ||
|
||
color is an inherited property, but that shouldn’t matter. | ||
*/ | ||
main > .fg > span::selection { | ||
background-color: white; | ||
} | ||
main > .fg.inherits-false > span::selection { | ||
color: var(--inherits-false); | ||
} | ||
main > .fg.inherits-true > span::selection { | ||
color: var(--inherits-true); | ||
} | ||
main > .fg.unregistered > span::selection { | ||
color: var(--unregistered); | ||
} | ||
|
||
/* | ||
Background tests: if the background of this text is red or | ||
black (initial) rather than green (inherit), then custom | ||
properties are not being inherited in highlight styles. | ||
|
||
background-color is not an inherited property, but that | ||
shouldn’t matter. | ||
*/ | ||
main > .bg > span::selection { | ||
color: white; | ||
} | ||
main > .bg.inherits-false > span::selection { | ||
background-color: var(--inherits-false); | ||
} | ||
main > .bg.inherits-true > span::selection { | ||
background-color: var(--inherits-true); | ||
} | ||
main > .bg.unregistered > span::selection { | ||
background-color: var(--unregistered); | ||
} | ||
</style> | ||
<p>Test passes if the words below are (respectively): white on green, green on white, white on green. | ||
<main class="highlight_reftest" | ||
><span class="control"><span>foo</span></span | ||
> <span class="fg inherits-false"><span>b</span></span | ||
><span class="fg inherits-true"><span>a</span></span | ||
><span class="fg unregistered"><span>r</span></span | ||
> <span class="bg inherits-false"><span>b</span></span | ||
><span class="bg inherits-true"><span>a</span></span | ||
><span class="bg unregistered"><span>z</span></span | ||
></main> | ||
<script> | ||
const main = document.querySelector("main"); | ||
selectRangeWith(range => { | ||
range.selectNodeContents(main); | ||
range.setStart(main, 2); | ||
range.setEnd(main, 9); | ||
}); | ||
</script> |
18 changes: 18 additions & 0 deletions
18
testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-001-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
<!doctype html> | ||
<meta charset="utf-8"> | ||
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com"> | ||
<script src="support/selections.js"></script> | ||
<link rel="stylesheet" href="support/highlights.css"> | ||
<style> | ||
main { | ||
font-size: 7em; | ||
margin: 0.5em; | ||
} | ||
main::selection { | ||
background-color: transparent; | ||
color: transparent; | ||
} | ||
</style> | ||
<p>Test passes if no text is legible below. | ||
<main class="highlight_reftest">FAIL</main> | ||
<script>selectNodeContents(document.querySelector("main"));</script> |
25 changes: 25 additions & 0 deletions
25
testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-001.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
<!doctype html> | ||
<meta charset="utf-8"> | ||
<title>CSS Pseudo-Elements Test: paired cascade: UA default highlight colors are not used when highlight pseudo cascade yields foreground color</title> | ||
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com"> | ||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade"> | ||
<link rel="match" href="highlight-paired-cascade-001-ref.html"> | ||
<meta name="assert" value="This test verifies that setting color on ::selection suppresses any UA non-initial used value for background-color. These properties are highlight colors, which are subject to paired cascade."> | ||
<script src="support/selections.js"></script> | ||
<link rel="stylesheet" href="support/highlights.css"> | ||
<style> | ||
main { | ||
font-size: 7em; | ||
margin: 0.5em; | ||
} | ||
main::selection { | ||
/* | ||
Used background-color should be initial (transparent). | ||
https://www.w3.org/TR/CSS21/colors.html#propdef-background-color | ||
*/ | ||
color: transparent; | ||
} | ||
</style> | ||
<p>Test passes if no text is legible below. | ||
<main class="highlight_reftest">FAIL</main> | ||
<script>selectNodeContents(document.querySelector("main"));</script> |
18 changes: 18 additions & 0 deletions
18
testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-002-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
<!doctype html> | ||
<meta charset="utf-8"> | ||
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com"> | ||
<script src="support/selections.js"></script> | ||
<link rel="stylesheet" href="support/highlights.css"> | ||
<style> | ||
main { | ||
font-size: 7em; | ||
margin: 0.5em; | ||
} | ||
main::selection { | ||
color: black; | ||
background-color: black; | ||
} | ||
</style> | ||
<p>Test passes if no text is legible below. | ||
<main class="highlight_reftest">FAIL</main> | ||
<script>selectNodeContents(document.querySelector("main"));</script> |
25 changes: 25 additions & 0 deletions
25
testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-002.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
<!doctype html> | ||
<meta charset="utf-8"> | ||
<title>CSS Pseudo-Elements Test: paired cascade: UA default highlight colors are not used when highlight pseudo cascade yields background color</title> | ||
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com"> | ||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade"> | ||
<link rel="match" href="highlight-paired-cascade-002-ref.html"> | ||
<meta name="assert" value="This test verifies that setting background-color on ::selection suppresses any UA non-initial used value for color. These properties are highlight colors, which are subject to paired cascade."> | ||
<script src="support/selections.js"></script> | ||
<link rel="stylesheet" href="support/highlights.css"> | ||
<style> | ||
main { | ||
font-size: 7em; | ||
margin: 0.5em; | ||
} | ||
main::selection { | ||
/* | ||
Used value for color should be initial (black). | ||
https://web-platform-tests.org/writing-tests/assumptions.html | ||
*/ | ||
background-color: black; | ||
} | ||
</style> | ||
<p>Test passes if no text is legible below. | ||
<main class="highlight_reftest">FAIL</main> | ||
<script>selectNodeContents(document.querySelector("main"));</script> |
17 changes: 17 additions & 0 deletions
17
testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-003-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
<!doctype html> | ||
<meta charset="utf-8"> | ||
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com"> | ||
<script src="support/selections.js"></script> | ||
<link rel="stylesheet" href="support/highlights.css"> | ||
<style> | ||
main { | ||
font-size: 7em; | ||
margin: 0.5em; | ||
} | ||
/* | ||
UA default highlight colors for ::selection. | ||
*/ | ||
</style> | ||
<p>Test passes if the text below appears to be highlighted. | ||
<main class="highlight_reftest">quick</main> | ||
<script>selectNodeContents(document.querySelector("main"));</script> |
26 changes: 26 additions & 0 deletions
26
testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-003.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
<!doctype html> | ||
<meta charset="utf-8"> | ||
<title>CSS Pseudo-Elements Test: paired cascade: UA default highlight colors are used when highlight pseudo cascade yields only properties other than highlight colors</title> | ||
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com"> | ||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade"> | ||
<link rel="match" href="highlight-paired-cascade-003-ref.html"> | ||
<meta name="assert" value="This test verifies that setting text-decoration on ::selection does not suppress any UA non-initial used values for color or background-color. While the former is an applicable (shorthand) property for highlight styles, it is not one of the highlight colors (color or background-color), so paired cascade does not apply."> | ||
<script src="support/selections.js"></script> | ||
<link rel="stylesheet" href="support/highlights.css"> | ||
<style> | ||
main { | ||
font-size: 7em; | ||
margin: 0.5em; | ||
} | ||
main::selection { | ||
/* | ||
Used values for color and background-color should be the | ||
UA defaults, usually like black on blue or white on blue, | ||
*not* initial on initial (like unhighlighted content). | ||
*/ | ||
text-decoration: none; | ||
} | ||
</style> | ||
<p>Test passes if the text below appears to be highlighted. | ||
<main class="highlight_reftest">quick</main> | ||
<script>selectNodeContents(document.querySelector("main"));</script> |
19 changes: 19 additions & 0 deletions
19
testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-004-notref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
<!doctype html> | ||
<meta charset="utf-8"> | ||
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com"> | ||
<link rel="stylesheet" href="support/highlights.css"> | ||
<style> | ||
:link, :visited { | ||
color: blue; | ||
} | ||
main { | ||
font-size: 7em; | ||
margin: 0.5em; | ||
} | ||
/* | ||
UA default highlight colors for ::target-text. | ||
*/ | ||
</style> | ||
<p>Test passes if the text below does not appear to be highlighted (<a href="">test again</a>). | ||
<main class="highlight_reftest">quick</main> | ||
<script>location.href = "#:~:text=quick";</script> |
Oops, something went wrong.