Fix scrollbar-width repaint issues on non viewports
This patch fixes issues with dynamically switching between
scrollbar-width values.
Previously the ScrollbarWidth check would prevent
SetScrollbarNeedsPaintInvalidation from being called.
ScrollbarWidth is still checked for none values inside
ComputeScrollbarExistence and ScrollbarTheme implementations.
Only viewport level changes are still broken.
WPT tests included
Change-Id: I606e3ba7cecca160045af70f42cfea0567370216
Bug: 891944
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4567548
Commit-Queue: Philip Rogers <pdr@chromium.org>
Reviewed-by: Philip Rogers <pdr@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1155115}
diff --git a/css/css-scrollbars/scrollbar-width-paint-004-ref.html b/css/css-scrollbars/scrollbar-width-paint-004-ref.html
new file mode 100644
index 0000000..b2b2d7f
--- /dev/null
+++ b/css/css-scrollbars/scrollbar-width-paint-004-ref.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<style>
+ :root { overflow: scroll; scrollbar-width: thin; }
+</style>
diff --git a/css/css-scrollbars/scrollbar-width-paint-004.html b/css/css-scrollbars/scrollbar-width-paint-004.html
new file mode 100644
index 0000000..5b9c9c3
--- /dev/null
+++ b/css/css-scrollbars/scrollbar-width-paint-004.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>CSS Scrollbars: scrollbar-width on viewport none -> thin</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev">
+<link rel="match" href="scrollbar-width-paint-004-ref.html">
+<link rel="help" href="https://www.w3.org/TR/css-scrollbars-1/">
+<script src="/common/reftest-wait.js"></script>
+<style>
+ :root {
+ overflow: scroll;
+ scrollbar-width: none;
+ }
+</style>
+<script>
+ requestAnimationFrame(() => requestAnimationFrame(() => {
+ document.documentElement.style.scrollbarWidth = 'thin';
+ takeScreenshot();
+ }));
+</script>
diff --git a/css/css-scrollbars/scrollbar-width-paint-005-ref.html b/css/css-scrollbars/scrollbar-width-paint-005-ref.html
new file mode 100644
index 0000000..e5c325b
--- /dev/null
+++ b/css/css-scrollbars/scrollbar-width-paint-005-ref.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<style>
+ :root { overflow: hidden; }
+</style>
diff --git a/css/css-scrollbars/scrollbar-width-paint-005.html b/css/css-scrollbars/scrollbar-width-paint-005.html
new file mode 100644
index 0000000..9ce46d2
--- /dev/null
+++ b/css/css-scrollbars/scrollbar-width-paint-005.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>CSS Scrollbars: scrollbar-width multiple-updates on viewport thin -> auto -> none</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev">
+<link rel="match" href="scrollbar-width-paint-005-ref.html">
+<link rel="help" href="https://www.w3.org/TR/css-scrollbars-1/">
+<script src="/common/reftest-wait.js"></script>
+<style>
+ :root {
+ overflow: scroll;
+ scrollbar-width: thin;
+ }
+</style>
+<script>
+ requestAnimationFrame(() => requestAnimationFrame(() => {
+ document.documentElement.style.scrollbarWidth = 'auto';
+
+ requestAnimationFrame(() => requestAnimationFrame(() => {
+ document.documentElement.style.scrollbarWidth = 'none';
+
+ takeScreenshot();
+ }));
+ }));
+</script>
diff --git a/css/css-scrollbars/scrollbar-width-paint-006-ref.html b/css/css-scrollbars/scrollbar-width-paint-006-ref.html
new file mode 100644
index 0000000..7314307
--- /dev/null
+++ b/css/css-scrollbars/scrollbar-width-paint-006-ref.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<style>
+ body {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ .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;
+ }
+
+ .container.auto {
+ scrollbar-width: auto;
+ }
+
+ .container.thin {
+ scrollbar-width: thin;
+ }
+
+ .container.none {
+ scrollbar-width: none;
+ }
+
+ .content.plain {
+ background: red;
+ }
+
+ .content.gradient {
+ background: linear-gradient(135deg, red, blue);
+ }
+</style>
+<div id="one" class="container none">
+ <div class="content plain"></div>
+</div>
+<div id="two" class="container none">
+ <div class="content plain"></div>
+</div>
+<div id="three" class="container thin">
+ <div class="content plain"></div>
+</div>
+<div id="four" class="container thin">
+ <div class="content gradient"></div>
+</div>
+<div id="five" class="container auto">
+ <div class="content gradient"></div>
+</div>
+<div id="six" class="container auto">
+ <div class="content gradient"></div>
+</div>
diff --git a/css/css-scrollbars/scrollbar-width-paint-006.html b/css/css-scrollbars/scrollbar-width-paint-006.html
new file mode 100644
index 0000000..42dbbd9
--- /dev/null
+++ b/css/css-scrollbars/scrollbar-width-paint-006.html
@@ -0,0 +1,89 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>CSS Scrollbars: paint test when updating scrollbar-width twice, with scrolling content</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev">
+<link rel="match" href="scrollbar-width-paint-006-ref.html">
+<link rel="help" href="https://www.w3.org/TR/css-scrollbars-1/" />
+<script src="/common/reftest-wait.js"></script>
+<style>
+ body {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ .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;
+ }
+
+ .container.auto {
+ scrollbar-width: auto;
+ }
+
+ .container.thin {
+ scrollbar-width: thin;
+ }
+
+ .container.none {
+ scrollbar-width: none;
+ }
+
+ .content.plain {
+ background: red;
+ }
+
+ .content.gradient {
+ background: linear-gradient(135deg, red, blue);
+ }
+</style>
+<div id="one" class="container auto">
+ <div class="content plain"></div>
+</div>
+<div id="two" class="container thin">
+ <div class="content plain"></div>
+</div>
+<div id="three" class="container none">
+ <div class="content plain"></div>
+</div>
+<div id="four" class="container auto">
+ <div class="content gradient"></div>
+</div>
+<div id="five" class="container thin">
+ <div class="content gradient"></div>
+</div>
+<div id="six" class="container none">
+ <div class="content gradient"></div>
+</div>
+<script>
+requestAnimationFrame(() => requestAnimationFrame(() => {
+ document.getElementById('one').style.scrollbarWidth = 'thin';
+ document.getElementById('two').style.scrollbarWidth = 'auto';
+ document.getElementById('three').style.scrollbarWidth = 'auto';
+ document.getElementById('four').style.scrollbarWidth = 'none';
+ document.getElementById('five').style.scrollbarWidth = 'none';
+ document.getElementById('six').style.scrollbarWidth = 'thin';
+
+ requestAnimationFrame(() => requestAnimationFrame(() => {
+ document.getElementById('one').style.scrollbarWidth = 'none';
+ document.getElementById('two').style.scrollbarWidth = 'none';
+ document.getElementById('three').style.scrollbarWidth = 'thin';
+ document.getElementById('four').style.scrollbarWidth = 'thin';
+ document.getElementById('five').style.scrollbarWidth = 'auto';
+ document.getElementById('six').style.scrollbarWidth = 'auto';
+
+ takeScreenshot();
+ }));
+}));
+</script>
