Fix issues with scrollbar-color invalidation with currentColor
scrollbar-color property that uses currentColor now correctly repaints
when color value updates.
This only fixes non-viewports as viewports have a separate issue where
scrollbar-color invalidation doesn't work at all.
Bug: 891944
Change-Id: Iac513cbadbfc589280621b864d1d0b5d68bf9e98
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4774160
Reviewed-by: Thomas Lukaszewicz <tluk@chromium.org>
Commit-Queue: Luke <lukewarlow156@gmail.com>
Cr-Commit-Position: refs/heads/main@{#1184751}
diff --git a/third_party/blink/renderer/core/paint/paint_layer_scrollable_area.cc b/third_party/blink/renderer/core/paint/paint_layer_scrollable_area.cc
index d2dbc4b..8954b0b 100644
--- a/third_party/blink/renderer/core/paint/paint_layer_scrollable_area.cc
+++ b/third_party/blink/renderer/core/paint/paint_layer_scrollable_area.cc
@@ -1404,8 +1404,10 @@
old_style->UsedColorScheme() != UsedColorSchemeScrollbars() ||
old_style->ScrollbarWidth() !=
GetLayoutBox()->StyleRef().ScrollbarWidth() ||
- old_style->ScrollbarColor() !=
- GetLayoutBox()->StyleRef().ScrollbarColor()) {
+ old_style->ScrollbarThumbColorResolved() !=
+ GetLayoutBox()->StyleRef().ScrollbarThumbColorResolved() ||
+ old_style->ScrollbarTrackColorResolved() !=
+ GetLayoutBox()->StyleRef().ScrollbarTrackColorResolved()) {
SetScrollControlsNeedFullPaintInvalidation();
}
}
diff --git a/third_party/blink/web_tests/TestExpectations b/third_party/blink/web_tests/TestExpectations
index d7b5fc3..fb4db0c 100644
--- a/third_party/blink/web_tests/TestExpectations
+++ b/third_party/blink/web_tests/TestExpectations
@@ -1561,6 +1561,9 @@
# CSS Scrollbars
crbug.com/891944 external/wpt/css/css-scrollbars/scrollbar-width-paint-004.html [ Failure ]
crbug.com/891944 external/wpt/css/css-scrollbars/scrollbar-width-paint-005.html [ Failure ]
+crbug.com/891944 external/wpt/css/css-scrollbars/scrollbar-color-dynamic-1.html [ Failure ]
+crbug.com/891944 external/wpt/css/css-scrollbars/scrollbar-color-dynamic-2.html [ Failure ]
+crbug.com/891944 external/wpt/css/css-scrollbars/scrollbar-color-dynamic-5.html [ Failure ]
# Failures from CSS3 Text (text-justify and text-indent: hanging/each-line) not being implemented.
crbug.com/248894 external/wpt/css/css-pseudo/first-letter-allowed-properties.html [ Failure ]
diff --git a/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-011-ref.html b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-011-ref.html
new file mode 100644
index 0000000..a4db731e
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-011-ref.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+<style>
+ :root {
+ scrollbar-color: blue blue;
+ color: blue;
+ }
+
+ body {
+ overflow: scroll;
+ }
+</style>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-011.html b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-011.html
new file mode 100644
index 0000000..90b6c45
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-011.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+<title>CSS Scrollbars: scrollbar-color with current color works correctly</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" />
+<link rel="match" href="scrollbar-color-011-ref.html" />
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" />
+<style>
+ :root {
+ scrollbar-color: currentColor currentColor;
+ color: blue;
+ }
+
+ body {
+ overflow: scroll;
+ }
+</style>
\ No newline at end of file
diff --git a/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-1-ref.html b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-1-ref.html
new file mode 100644
index 0000000..b431edf4
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-1-ref.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<style>
+ :root {
+ scrollbar-color: blue green;
+ }
+ body {
+ display: flex;
+ flex-wrap: wrap;
+ width: 200vw;
+ height: 200vh;
+ }
+
+ .container {
+ scrollbar-gutter: stable;
+ flex: 0 0;
+ overflow: auto;
+ height: 200px;
+ min-width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ }
+
+ .content {
+ height: 300px;
+ width: 300px;
+ background: red;
+ }
+</style>
+
+<div class="container">
+ <div class="content"></div>
+</div>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-1.html b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-1.html
new file mode 100644
index 0000000..0b4820c7
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-1.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Dynamically set scrollbar-colors and ensure scrollbars update</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" />
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars" />
+<link rel="match" href="scrollbar-color-dynamic-1-ref.html" />
+<script src="/common/reftest-wait.js"></script>
+<style>
+ :root {
+ scrollbar-color: red yellow;
+ }
+ body {
+ display: flex;
+ flex-wrap: wrap;
+ width: 200vw;
+ height: 200vh;
+ }
+
+ .container {
+ scrollbar-gutter: stable;
+ overflow: auto;
+ flex: 0 0;
+ height: 200px;
+ min-width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ }
+
+ .content {
+ height: 300px;
+ width: 300px;
+ background: red;
+ }
+</style>
+<div class="container">
+ <div class="content"></div>
+</div>
+<script>
+ requestAnimationFrame(() => requestAnimationFrame(() => {
+ document.documentElement.style.scrollbarColor = 'blue green';
+
+ takeScreenshot();
+ }));
+</script>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-1.html.ini b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-1.html.ini
new file mode 100644
index 0000000..cead6fb4
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-1.html.ini
@@ -0,0 +1,3 @@
+[scrollbar-color-dynamic-1.html]
+ expected:
+ FAIL
diff --git a/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-2-ref.html b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-2-ref.html
new file mode 100644
index 0000000..94e5841e
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-2-ref.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<style>
+ :root {
+ scrollbar-color: blue green;
+ }
+ body {
+ display: flex;
+ flex-wrap: wrap;
+ overflow: scroll;
+ }
+ .container {
+ scrollbar-gutter: stable;
+ overflow: scroll;
+ flex: 0 0;
+ height: 200px;
+ min-width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ }
+</style>
+<div class="container"></div>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-2.html b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-2.html
new file mode 100644
index 0000000..4adce84
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-2.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Dynamically set scrollbar-color and ensure overflow scroll scrollbars update</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" />
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars/#valdef-scrollbar-color-auto" />
+<link rel="match" href="scrollbar-color-dynamic-2-ref.html" />
+<script src="/common/reftest-wait.js"></script>
+<style>
+ :root {
+ scrollbar-color: red yellow;
+ }
+ body {
+ display: flex;
+ flex-wrap: wrap;
+ overflow: scroll;
+ }
+ .container {
+ scrollbar-gutter: stable;
+ overflow: scroll;
+ flex: 0 0;
+ height: 200px;
+ min-width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ }
+</style>
+<div class="container"></div>
+<script>
+ requestAnimationFrame(() => requestAnimationFrame(() => {
+ document.documentElement.style.scrollbarColor = 'blue green';
+
+ takeScreenshot();
+ }));
+</script>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-2.html.ini b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-2.html.ini
new file mode 100644
index 0000000..6cb3bb48
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-2.html.ini
@@ -0,0 +1,3 @@
+[scrollbar-color-dynamic-2.html]
+ expected:
+ FAIL
diff --git a/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-3-ref.html b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-3-ref.html
new file mode 100644
index 0000000..3551f3b
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-3-ref.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<style>
+ :root {
+ scrollbar-color: red yellow;
+ }
+ body {
+ display: flex;
+ flex-wrap: wrap;
+ width: 200vw;
+ height: 200vh;
+ }
+
+ .container {
+ scrollbar-color: blue green;
+ scrollbar-gutter: stable;
+ flex: 0 0;
+ overflow: auto;
+ height: 200px;
+ min-width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ }
+
+ .content {
+ height: 300px;
+ width: 300px;
+ background: red;
+ }
+</style>
+
+<div class="container">
+ <div class="content"></div>
+</div>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-3.html b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-3.html
new file mode 100644
index 0000000..0bb72a6
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-3.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Dynamically set scrollbar-color on container and ensure scrollbars update</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" />
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars/#valdef-scrollbar-color-auto" />
+<link rel="match" href="scrollbar-color-dynamic-3-ref.html" />
+<script src="/common/reftest-wait.js"></script>
+<style>
+ :root {
+ scrollbar-color: red yellow;
+ }
+ body {
+ display: flex;
+ flex-wrap: wrap;
+ width: 200vw;
+ height: 200vh;
+ }
+
+ .container {
+ scrollbar-gutter: stable;
+ overflow: auto;
+ flex: 0 0;
+ height: 200px;
+ min-width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ }
+
+ .content {
+ height: 300px;
+ width: 300px;
+ background: red;
+ }
+</style>
+<div class="container">
+ <div class="content"></div>
+</div>
+<script>
+ requestAnimationFrame(() => requestAnimationFrame(() => {
+ document.querySelector(".container").style.scrollbarColor = 'blue green';
+
+ takeScreenshot();
+ }));
+</script>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-4-ref.html b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-4-ref.html
new file mode 100644
index 0000000..b10df54
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-4-ref.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<style>
+ :root {
+ scrollbar-color: red yellow;
+ }
+ body {
+ display: flex;
+ flex-wrap: wrap;
+ overflow: scroll;
+ }
+ .container {
+ scrollbar-color: blue green;
+ scrollbar-gutter: stable;
+ overflow: scroll;
+ flex: 0 0;
+ height: 200px;
+ min-width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ }
+</style>
+<div class="container"></div>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-4.html b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-4.html
new file mode 100644
index 0000000..e8cd6e1
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-4.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Dynamically set scrollbar-color on container with overflow scroll and ensure scrollbars update</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" />
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars/#valdef-scrollbar-color-auto" />
+<link rel="match" href="scrollbar-color-dynamic-4-ref.html" />
+<script src="/common/reftest-wait.js"></script>
+<style>
+ :root {
+ scrollbar-color: red yellow;
+ }
+ body {
+ display: flex;
+ flex-wrap: wrap;
+ overflow: scroll;
+ }
+ .container {
+ scrollbar-gutter: stable;
+ overflow: scroll;
+ flex: 0 0;
+ height: 200px;
+ min-width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ }
+</style>
+<div class="container"></div>
+<script>
+ requestAnimationFrame(() => requestAnimationFrame(() => {
+ document.querySelector(".container").style.scrollbarColor = 'blue green';
+
+ takeScreenshot();
+ }));
+</script>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-5-ref.html b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-5-ref.html
new file mode 100644
index 0000000..667d5b3b
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-5-ref.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<style>
+ :root {
+ scrollbar-color: green green;
+ }
+ body {
+ display: flex;
+ flex-wrap: wrap;
+ width: 200vw;
+ height: 200vh;
+ }
+
+ .container {
+ scrollbar-gutter: stable;
+ flex: 0 0;
+ overflow: auto;
+ height: 200px;
+ min-width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ }
+
+ .content {
+ height: 300px;
+ width: 300px;
+ background: red;
+ }
+</style>
+
+<div class="container">
+ <div class="content"></div>
+</div>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-5.html b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-5.html
new file mode 100644
index 0000000..2faa28ca
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-5.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Dynamically set color and ensure scrollbars using currentcolor update</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" />
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars" />
+<link rel="match" href="scrollbar-color-dynamic-5-ref.html" />
+<script src="/common/reftest-wait.js"></script>
+<style>
+ :root {
+ scrollbar-color: currentColor currentColor;
+ color: blue;
+ }
+ body {
+ display: flex;
+ flex-wrap: wrap;
+ width: 200vw;
+ height: 200vh;
+ }
+
+ .container {
+ scrollbar-gutter: stable;
+ overflow: auto;
+ flex: 0 0;
+ height: 200px;
+ min-width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ }
+
+ .content {
+ height: 300px;
+ width: 300px;
+ background: red;
+ }
+</style>
+<div class="container">
+ <div class="content"></div>
+</div>
+<script>
+ requestAnimationFrame(() => requestAnimationFrame(() => {
+ document.documentElement.style.color = 'green';
+
+ takeScreenshot();
+ }));
+</script>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-5.html.ini b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-5.html.ini
new file mode 100644
index 0000000..f77d542
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-5.html.ini
@@ -0,0 +1,3 @@
+[scrollbar-color-dynamic-5.html]
+ expected:
+ FAIL
diff --git a/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-6-ref.html b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-6-ref.html
new file mode 100644
index 0000000..d4c6a16
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-6-ref.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<style>
+ :root {
+ scrollbar-color: blue blue;
+ }
+ body {
+ display: flex;
+ flex-wrap: wrap;
+ width: 200vw;
+ height: 200vh;
+ }
+
+ .container {
+ scrollbar-gutter: stable;
+ flex: 0 0;
+ overflow: auto;
+ height: 200px;
+ min-width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ scrollbar-color: green green;
+ }
+
+ .content {
+ height: 300px;
+ width: 300px;
+ background: red;
+ }
+</style>
+
+<div class="container">
+ <div class="content"></div>
+</div>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-6.html b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-6.html
new file mode 100644
index 0000000..85791297
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-scrollbars/scrollbar-color-dynamic-6.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Dynamically set color on container and ensure scrollbars using currentcolor update</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" />
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars" />
+<link rel="match" href="scrollbar-color-dynamic-6-ref.html" />
+<script src="/common/reftest-wait.js"></script>
+<style>
+ :root {
+ scrollbar-color: currentColor currentColor;
+ color: blue;
+ }
+ body {
+ display: flex;
+ flex-wrap: wrap;
+ width: 200vw;
+ height: 200vh;
+ }
+
+ .container {
+ scrollbar-gutter: stable;
+ overflow: auto;
+ flex: 0 0;
+ height: 200px;
+ min-width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ scrollbar-color: currentColor currentColor;
+ color: blue;
+ }
+
+ .content {
+ height: 300px;
+ width: 300px;
+ background: red;
+ }
+</style>
+<div class="container">
+ <div class="content"></div>
+</div>
+<script>
+ requestAnimationFrame(() => requestAnimationFrame(() => {
+ document.querySelector(".container").style.color = 'green';
+
+ takeScreenshot();
+ }));
+</script>
diff --git a/ui/native_theme/native_theme_aura.cc b/ui/native_theme/native_theme_aura.cc
index c08715e..3d37367 100644
--- a/ui/native_theme/native_theme_aura.cc
+++ b/ui/native_theme/native_theme_aura.cc
@@ -199,11 +199,18 @@
case kNumStates:
break;
}
- if (arrow.thumb_color.has_value()) {
+ if (arrow.thumb_color.has_value() &&
+ arrow.thumb_color.value() == gfx::kPlaceholderColor) {
+ // TODO(crbug.com/1473075): Remove this and the below checks for placeholderColor.
+ DLOG(ERROR) << "thumb_color with a placeholderColor value encountered";
+ }
+ if (arrow.thumb_color.has_value() &&
+ arrow.thumb_color.value() != gfx::kPlaceholderColor) {
// TODO(crbug.com/891944): Adjust thumb_color based on `state`.
arrow_color = arrow.thumb_color.value();
}
- if (arrow.track_color.has_value()) {
+ if (arrow.track_color.has_value() &&
+ arrow.track_color.value() != gfx::kPlaceholderColor) {
// TODO(crbug.com/891944): Adjust track_color based on `state`.
bg_color = arrow.track_color.value();
}