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 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5644614 Reviewed-by: Stephen Chenney <schenney@chromium.org> Commit-Queue: Delan Azabani <dazabani@igalia.com> Cr-Commit-Position: refs/heads/main@{#1322551}
web-platform-tests · chromium-wpt-export-bot · Jul 3, 2024 · Jul 3, 2024 · Jul 3, 2024 · de10888939108976fc4abe2ab44a055f77ed1733
commit de10888939108976fc4abe2ab44a055f77ed1733
diff --git a/css/css-highlight-api/painting/custom-highlight-painting-019-ref.html b/css/css-highlight-api/painting/custom-highlight-painting-019-ref.html
@@ -5,9 +5,12 @@
   body {
     text-decoration: 2px green underline;
   }
-  #highlight {
+  .foo {
     color:blue;
     text-decoration: 2px blue underline;
   }
+  .bar {
+    text-decoration: 2px currentColor underline;
+  }
 </style>
-<body><span id="highlight">This part should be blue</span> and this part should be black
+<body><span class="foo">This part should be blue</span> and <span class="bar">this part should be black</span>
diff --git a/css/css-highlight-api/painting/custom-highlight-painting-019.html b/css/css-highlight-api/painting/custom-highlight-painting-019.html
@@ -5,7 +5,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-text">
 <link rel="match" href="custom-highlight-painting-019-ref.html">
 <meta name="assert" value="When painting non-overlapping highlights the current color should be resolved against the next layer beneath the highlight at the current location within the span.">
-<meta name="fuzzy" content="0-130;0-4">
+<meta name="fuzzy" content="0-250;0-6">
 <style>
   body {
     text-decoration: 2px green underline;
@@ -36,4 +36,4 @@
 
   CSS.highlights.set("foo", h1);
   CSS.highlights.set("bar", h2);
-</script>
+</script>
diff --git a/css/css-pseudo/highlight-painting-currentcolor-001-ref.html b/css/css-pseudo/highlight-painting-currentcolor-001-ref.html
@@ -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>
diff --git a/css/css-pseudo/highlight-painting-currentcolor-001.html b/css/css-pseudo/highlight-painting-currentcolor-001.html
@@ -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>
diff --git a/css/css-pseudo/highlight-painting-currentcolor-001a-ref.html b/css/css-pseudo/highlight-painting-currentcolor-001a-ref.html
@@ -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>
diff --git a/css/css-pseudo/highlight-painting-currentcolor-001a.html b/css/css-pseudo/highlight-painting-currentcolor-001a.html
@@ -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>
diff --git a/css/css-pseudo/highlight-painting-currentcolor-002-ref.html b/css/css-pseudo/highlight-painting-currentcolor-002-ref.html
@@ -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>
diff --git a/css/css-pseudo/highlight-painting-currentcolor-002.html b/css/css-pseudo/highlight-painting-currentcolor-002.html
@@ -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>
diff --git a/css/css-pseudo/highlight-painting-currentcolor-002a-ref.html b/css/css-pseudo/highlight-painting-currentcolor-002a-ref.html
@@ -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>
diff --git a/css/css-pseudo/highlight-painting-currentcolor-002a.html b/css/css-pseudo/highlight-painting-currentcolor-002a.html
@@ -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>
diff --git a/css/css-pseudo/highlight-painting-currentcolor-002b-ref.html b/css/css-pseudo/highlight-painting-currentcolor-002b-ref.html
@@ -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>
diff --git a/css/css-pseudo/highlight-painting-currentcolor-002b.html b/css/css-pseudo/highlight-painting-currentcolor-002b.html
@@ -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>
diff --git a/css/css-pseudo/highlight-painting-currentcolor-003-ref.html b/css/css-pseudo/highlight-painting-currentcolor-003-ref.html
@@ -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>
diff --git a/css/css-pseudo/highlight-painting-currentcolor-003.html b/css/css-pseudo/highlight-painting-currentcolor-003.html
@@ -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>
diff --git a/css/css-pseudo/highlight-painting-currentcolor-003a-ref.html b/css/css-pseudo/highlight-painting-currentcolor-003a-ref.html
@@ -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>