-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
CSS highlight pseudos: fix ‘currentColor’ resolution and painting
When ‘color’ is set to ‘currentColor’ in highlight pseudos, the color (and any other properties that use ‘currentColor’) needs to be taken from the ‘currentColor’ of the next active highlight overlay below. Our impl was reworked significantly in CL:5332250 and CL:5368297, and this patch improves on that by: • updating HighlightPaintingStyle and ResolveColorsFromPreviousLayer to let ‘background-color’ participate in ‘currentColor’ resolution • fixing ResolveColorsFromPreviousLayer to always read ‘currentColor’, not the property being resolved, from the previous layer • making PaintHighlightOverlays pass the correct ‘currentColor’ for the purposes of painting ‘text-shadow’ • extending PaintHighlightOverlays to paint ‘background-color’ and ‘text-shadow’ by as little as one part at a time, if affected by ‘currentColor’, while keeping parts merged where possible • removing a stray LineRelativeRect::Unite call that made ::selection parts fail to clip their decorations to the part This patch adds eleven new tests with overlapping highlights and a variety of properties set to ‘currentColor’: • 001.html tests ‘color’ only (full ::selection) • 001a.html tests ‘color’ only (partial ::selection) • 002.html tests ‘color’ and ‘background-color’ (full ::selection) • 002a.html tests ‘color’ and ‘background-color’ (partial ::selection) • 002b.html tests ‘background-color’ only (full ::selection) • 003.html tests ‘color’ and ‘text-decoration’ (full ::selection) • 003a.html tests ‘color’ and ‘text-decoration’ (partial ::selection) • 003b.html tests ‘text-decoration’ only (full ::selection) • 004.html tests ‘color’ and ‘text-shadow’ (full ::selection) • 004a.html tests ‘color’ and ‘text-shadow’ (partial ::selection) • 004b.html tests ‘text-shadow’ only (full ::selection) Bug: 339298411 Change-Id: I2e42a0d655683e76daf507aee3e34085f5eb080b
- Loading branch information
1 parent
5730816
commit 908598d
Showing
25 changed files
with
585 additions
and
4 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
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
19 changes: 19 additions & 0 deletions
19
css/css-pseudo/highlight-painting-currentcolor-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,19 @@ | ||
<!DOCTYPE html> | ||
<meta charset="utf-8"> | ||
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com"> | ||
<link rel="stylesheet" href="support/highlights.css"> | ||
<style> | ||
.a { | ||
color: yellow; | ||
background-color: blue; | ||
} | ||
.b { | ||
color: lime; | ||
background-color: blue; | ||
} | ||
.selection { | ||
color: currentColor; | ||
background-color: black; | ||
} | ||
</style> | ||
<div class="highlight_reftest" id="target"><span class="b"><span class="selection">test</span></span><span class="selection"> </span><span class="a"><span class="selection">test</span></span></div> |
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,30 @@ | ||
<!DOCTYPE html> | ||
<meta charset="utf-8"> | ||
<title>CSS Pseudo-Elements Test: ‘currentColor’ in ‘color’ of overlapping highlights</title> | ||
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com"> | ||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting"> | ||
<meta name="assert" content="This test checks that ::selection takes the ‘color’ of the next active highlight below when resolving ‘currentColor’ in ‘color’."> | ||
<link rel="match" href="highlight-painting-currentcolor-001-ref.html"> | ||
<meta name="fuzzy" content="0-120;0-10"> | ||
<link rel="stylesheet" href="support/highlights.css"> | ||
<script src="support/selections.js"></script> | ||
<style> | ||
::highlight(a) { | ||
color: yellow; | ||
background-color: blue; | ||
} | ||
::highlight(b) { | ||
color: lime; | ||
background-color: blue; | ||
} | ||
::selection { | ||
color: currentColor; | ||
background-color: black; | ||
} | ||
</style> | ||
<div class="highlight_reftest" id="target">test test</div> | ||
<script> | ||
CSS.highlights.set("b", new Highlight(createRangeForTextOnly(target, 0, 4))); | ||
CSS.highlights.set("a", new Highlight(createRangeForTextOnly(target, 5, 9))); | ||
selectNodeContents(target); | ||
</script> |
19 changes: 19 additions & 0 deletions
19
css/css-pseudo/highlight-painting-currentcolor-001a-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,19 @@ | ||
<!DOCTYPE html> | ||
<meta charset="utf-8"> | ||
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com"> | ||
<link rel="stylesheet" href="support/highlights.css"> | ||
<style> | ||
.a { | ||
color: yellow; | ||
background-color: blue; | ||
} | ||
.b { | ||
color: lime; | ||
background-color: blue; | ||
} | ||
.selection { | ||
color: currentColor; | ||
background-color: black; | ||
} | ||
</style> | ||
<div class="highlight_reftest" id="target"><span class="b">te<span class="selection">st</span></span><span class="selection"> </span><span class="a"><span class="selection">te</span>st</span></div> |
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,34 @@ | ||
<!DOCTYPE html> | ||
<meta charset="utf-8"> | ||
<title>CSS Pseudo-Elements Test: ‘currentColor’ in ‘color’ of overlapping highlights</title> | ||
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com"> | ||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting"> | ||
<meta name="assert" content="This test checks that ::selection takes the ‘color’ of the next active highlight below when resolving ‘currentColor’ in ‘color’."> | ||
<link rel="match" href="highlight-painting-currentcolor-001a-ref.html"> | ||
<meta name="fuzzy" content="0-120;0-10"> | ||
<link rel="stylesheet" href="support/highlights.css"> | ||
<script src="support/selections.js"></script> | ||
<style> | ||
::highlight(a) { | ||
color: yellow; | ||
background-color: blue; | ||
} | ||
::highlight(b) { | ||
color: lime; | ||
background-color: blue; | ||
} | ||
::selection { | ||
color: currentColor; | ||
background-color: black; | ||
} | ||
</style> | ||
<div class="highlight_reftest" id="target">test test</div> | ||
<script> | ||
CSS.highlights.set("b", new Highlight(createRangeForTextOnly(target, 0, 4))); | ||
CSS.highlights.set("a", new Highlight(createRangeForTextOnly(target, 5, 9))); | ||
selectRangeWith(range => { | ||
range.selectNodeContents(target); | ||
range.setStart(target.firstChild, 2); | ||
range.setEnd(target.firstChild, 7); | ||
}); | ||
</script> |
19 changes: 19 additions & 0 deletions
19
css/css-pseudo/highlight-painting-currentcolor-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,19 @@ | ||
<!DOCTYPE html> | ||
<meta charset="utf-8"> | ||
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com"> | ||
<link rel="stylesheet" href="support/highlights.css"> | ||
<style> | ||
.a { | ||
color: yellow; | ||
background-color: blue; | ||
} | ||
.b { | ||
color: lime; | ||
background-color: blue; | ||
} | ||
.selection { | ||
color: currentColor; | ||
background-color: currentColor; | ||
} | ||
</style> | ||
<div class="highlight_reftest" id="target"><span class="b"><span class="selection">test</span></span><span class="selection"> </span><span class="a"><span class="selection">test</span></span></div> |
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,30 @@ | ||
<!DOCTYPE html> | ||
<meta charset="utf-8"> | ||
<title>CSS Pseudo-Elements Test: ‘currentColor’ in ‘color’ and ‘background-color’ of overlapping highlights</title> | ||
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com"> | ||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting"> | ||
<meta name="assert" content="This test checks that ::selection takes the ‘color’ of the next active highlight below when resolving ‘currentColor’ in ‘color’ and ‘background-color’."> | ||
<link rel="match" href="highlight-painting-currentcolor-002-ref.html"> | ||
<meta name="fuzzy" content="0-120;0-10"> | ||
<link rel="stylesheet" href="support/highlights.css"> | ||
<script src="support/selections.js"></script> | ||
<style> | ||
::highlight(a) { | ||
color: yellow; | ||
background-color: blue; | ||
} | ||
::highlight(b) { | ||
color: lime; | ||
background-color: blue; | ||
} | ||
::selection { | ||
color: currentColor; | ||
background-color: currentColor; | ||
} | ||
</style> | ||
<div class="highlight_reftest" id="target">test test</div> | ||
<script> | ||
CSS.highlights.set("b", new Highlight(createRangeForTextOnly(target, 0, 4))); | ||
CSS.highlights.set("a", new Highlight(createRangeForTextOnly(target, 5, 9))); | ||
selectNodeContents(target); | ||
</script> |
19 changes: 19 additions & 0 deletions
19
css/css-pseudo/highlight-painting-currentcolor-002a-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,19 @@ | ||
<!DOCTYPE html> | ||
<meta charset="utf-8"> | ||
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com"> | ||
<link rel="stylesheet" href="support/highlights.css"> | ||
<style> | ||
.a { | ||
color: yellow; | ||
background-color: blue; | ||
} | ||
.b { | ||
color: lime; | ||
background-color: blue; | ||
} | ||
.selection { | ||
color: currentColor; | ||
background-color: currentColor; | ||
} | ||
</style> | ||
<div class="highlight_reftest" id="target"><span class="b">te<span class="selection">st</span></span><span class="selection"> </span><span class="a"><span class="selection">te</span>st</span></div> |
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,34 @@ | ||
<!DOCTYPE html> | ||
<meta charset="utf-8"> | ||
<title>CSS Pseudo-Elements Test: ‘currentColor’ in ‘color’ and ‘background-color’ of overlapping highlights</title> | ||
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com"> | ||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting"> | ||
<meta name="assert" content="This test checks that ::selection takes the ‘color’ of the next active highlight below when resolving ‘currentColor’ in ‘color’ and ‘background-color’."> | ||
<link rel="match" href="highlight-painting-currentcolor-002a-ref.html"> | ||
<meta name="fuzzy" content="0-120;0-10"> | ||
<link rel="stylesheet" href="support/highlights.css"> | ||
<script src="support/selections.js"></script> | ||
<style> | ||
::highlight(a) { | ||
color: yellow; | ||
background-color: blue; | ||
} | ||
::highlight(b) { | ||
color: lime; | ||
background-color: blue; | ||
} | ||
::selection { | ||
color: currentColor; | ||
background-color: currentColor; | ||
} | ||
</style> | ||
<div class="highlight_reftest" id="target">test test</div> | ||
<script> | ||
CSS.highlights.set("b", new Highlight(createRangeForTextOnly(target, 0, 4))); | ||
CSS.highlights.set("a", new Highlight(createRangeForTextOnly(target, 5, 9))); | ||
selectRangeWith(range => { | ||
range.selectNodeContents(target); | ||
range.setStart(target.firstChild, 2); | ||
range.setEnd(target.firstChild, 7); | ||
}); | ||
</script> |
19 changes: 19 additions & 0 deletions
19
css/css-pseudo/highlight-painting-currentcolor-002b-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,19 @@ | ||
<!DOCTYPE html> | ||
<meta charset="utf-8"> | ||
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com"> | ||
<link rel="stylesheet" href="support/highlights.css"> | ||
<style> | ||
.a { | ||
color: yellow; | ||
background-color: blue; | ||
} | ||
.b { | ||
color: lime; | ||
background-color: blue; | ||
} | ||
.selection { | ||
color: green; | ||
background-color: currentColor; | ||
} | ||
</style> | ||
<div class="highlight_reftest" id="target"><span class="b"><span class="selection">test</span></span><span class="selection"> </span><span class="a"><span class="selection">test</span></span></div> |
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,30 @@ | ||
<!DOCTYPE html> | ||
<meta charset="utf-8"> | ||
<title>CSS Pseudo-Elements Test: ‘currentColor’ in ‘background-color’ (but not ‘color’) of overlapping highlights</title> | ||
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com"> | ||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting"> | ||
<meta name="assert" content="This test checks that ::selection does not take the ‘color’ of the next active highlight below when resolving ‘currentColor’ in ‘background-color’ and ‘color’ is not ‘currentColor’."> | ||
<link rel="match" href="highlight-painting-currentcolor-002b-ref.html"> | ||
<meta name="fuzzy" content="0-120;0-10"> | ||
<link rel="stylesheet" href="support/highlights.css"> | ||
<script src="support/selections.js"></script> | ||
<style> | ||
::highlight(a) { | ||
color: yellow; | ||
background-color: blue; | ||
} | ||
::highlight(b) { | ||
color: lime; | ||
background-color: blue; | ||
} | ||
::selection { | ||
color: green; | ||
background-color: currentColor; | ||
} | ||
</style> | ||
<div class="highlight_reftest" id="target">test test</div> | ||
<script> | ||
CSS.highlights.set("b", new Highlight(createRangeForTextOnly(target, 0, 4))); | ||
CSS.highlights.set("a", new Highlight(createRangeForTextOnly(target, 5, 9))); | ||
selectNodeContents(target); | ||
</script> |
20 changes: 20 additions & 0 deletions
20
css/css-pseudo/highlight-painting-currentcolor-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,20 @@ | ||
<!DOCTYPE html> | ||
<meta charset="utf-8"> | ||
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com"> | ||
<link rel="stylesheet" href="support/highlights.css"> | ||
<style> | ||
.a { | ||
color: yellow; | ||
background-color: blue; | ||
} | ||
.b { | ||
color: lime; | ||
background-color: blue; | ||
} | ||
.selection { | ||
color: currentColor; | ||
background-color: black; | ||
text-decoration: /* currentColor */ underline; | ||
} | ||
</style> | ||
<div class="highlight_reftest" id="target"><span class="b"><span class="selection">test</span></span><span class="selection"> </span><span class="a"><span class="selection">test</span></span></div> |
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,31 @@ | ||
<!DOCTYPE html> | ||
<meta charset="utf-8"> | ||
<title>CSS Pseudo-Elements Test: ‘currentColor’ in ‘color’ and ‘text-decoration-color’ of overlapping highlights</title> | ||
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com"> | ||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting"> | ||
<meta name="assert" content="This test checks that ::selection takes the ‘color’ of the next active highlight below when resolving ‘currentColor’ in ‘color’ and ‘text-decoration-color’."> | ||
<link rel="match" href="highlight-painting-currentcolor-003-ref.html"> | ||
<meta name="fuzzy" content="0-120;0-10"> | ||
<link rel="stylesheet" href="support/highlights.css"> | ||
<script src="support/selections.js"></script> | ||
<style> | ||
::highlight(a) { | ||
color: yellow; | ||
background-color: blue; | ||
} | ||
::highlight(b) { | ||
color: lime; | ||
background-color: blue; | ||
} | ||
::selection { | ||
color: currentColor; | ||
background-color: black; | ||
text-decoration: /* currentColor */ underline; | ||
} | ||
</style> | ||
<div class="highlight_reftest" id="target">test test</div> | ||
<script> | ||
CSS.highlights.set("b", new Highlight(createRangeForTextOnly(target, 0, 4))); | ||
CSS.highlights.set("a", new Highlight(createRangeForTextOnly(target, 5, 9))); | ||
selectNodeContents(target); | ||
</script> |
20 changes: 20 additions & 0 deletions
20
css/css-pseudo/highlight-painting-currentcolor-003a-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,20 @@ | ||
<!DOCTYPE html> | ||
<meta charset="utf-8"> | ||
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com"> | ||
<link rel="stylesheet" href="support/highlights.css"> | ||
<style> | ||
.a { | ||
color: yellow; | ||
background-color: blue; | ||
} | ||
.b { | ||
color: lime; | ||
background-color: blue; | ||
} | ||
.selection { | ||
color: currentColor; | ||
background-color: black; | ||
text-decoration: /* currentColor */ underline; | ||
} | ||
</style> | ||
<div class="highlight_reftest" id="target"><span class="b">te<span class="selection">st</span></span><span class="selection"> </span><span class="a"><span class="selection">te</span>st</span></div> |
Oops, something went wrong.