summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-scrollbars
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/css-scrollbars')
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/META.yml3
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/inheritance.html22
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/input-scrollbar-color-ref.html5
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/input-scrollbar-color.html12
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-001.tentative.html62
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-002.tentative.html55
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-003.tentative.html89
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-004.tentative.html60
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-005.tentative.html60
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-006-mis-ref.html23
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-006-ref.html24
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-006.tentative.html33
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-007-mis-ref.html23
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-007-ref.html24
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-007.tentative.html33
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-008-mis-ref.html23
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-008-ref.html24
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-008.tentative.html36
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-009-mis-ref.html7
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-009-ref.html11
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-009.tentative.html20
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-010-mis-ref.html7
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-010-ref.html11
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-010.tentative.html20
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-011-mis-ref.html11
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-011-ref.html12
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-011.html17
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-012-ref.html13
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-012.html24
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-1-mis-ref.html31
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-1-ref.html34
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-1.html47
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-2-mis-ref.html20
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-2-ref.html23
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-2.html37
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-3-mis-ref.html32
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-3-ref.html35
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-3.html47
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-4-mis-ref.html21
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-4-ref.html24
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-4.html37
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-5-mis-ref.html31
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-5-ref.html34
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-5.html48
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-6-mis-ref.html32
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-6-ref.html35
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-6.html50
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-7-mis-ref.html31
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-7-ref.html34
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-7.html47
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-parsing.html26
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-1-ref.html34
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-1.html46
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-2-ref.html23
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-2.html36
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-3-ref.html35
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-3.html46
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-4-ref.html24
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-4.html36
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-001.html174
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-002.html167
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-003.html154
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-004.html154
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-005.html60
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-006.html60
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-007.html60
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-008.html66
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-009.html60
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-010.tentative.html62
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-011.tentative.html55
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-012.tentative.html56
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-013.tentative.html55
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-014.tentative.html62
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-015.tentative.html87
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-016.tentative.html114
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-keywords.html38
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-001-mis-ref.html50
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-001-ref.html62
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-001.html81
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-002-mis-ref.html50
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-002-ref.html62
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-002.html81
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-003-ref.html5
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-003.html22
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-004-mis-ref.html5
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-004-ref.html5
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-004.html21
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-005-ref.html5
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-005.html25
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-006-mis-ref.html50
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-006-ref.html62
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-006.html90
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/scrollbar-width-parsing.html30
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/support/viewport-scrollbar-body-frame.html18
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/support/viewport-scrollbar-frame.html16
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/textarea-scrollbar-width-none-ref.html16
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/textarea-scrollbar-width-none.html18
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/transparent-on-root-ref.html8
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/transparent-on-root.html14
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-body-mis-ref.html22
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-body-ref.html21
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-body.html16
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-mis-ref.html21
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-ref.html22
-rw-r--r--testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar.html16
105 files changed, 4198 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-scrollbars/META.yml b/testing/web-platform/tests/css/css-scrollbars/META.yml
new file mode 100644
index 0000000000..f7c0439e20
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/META.yml
@@ -0,0 +1,3 @@
+spec: https://drafts.csswg.org/css-scrollbars/
+suggested_reviewers:
+ - upsuper
diff --git a/testing/web-platform/tests/css/css-scrollbars/inheritance.html b/testing/web-platform/tests/css/css-scrollbars/inheritance.html
new file mode 100644
index 0000000000..1a630786b4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/inheritance.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Inheritance of CSS Scrollbars properties</title>
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars/#property-index">
+<meta name="assert" content="Properties inherit according to the spec.">
+<meta name="assert" content="Properties have initial values according to the spec.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/inheritance-testcommon.js"></script>
+</head>
+<body>
+<div id="container">
+ <div id="target"></div>
+</div>
+<script>
+assert_inherited('scrollbar-color', 'auto', 'rgb(1, 2, 3) rgb(4, 5, 6)');
+assert_not_inherited('scrollbar-width', 'auto', 'thin');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-scrollbars/input-scrollbar-color-ref.html b/testing/web-platform/tests/css/css-scrollbars/input-scrollbar-color-ref.html
new file mode 100644
index 0000000000..389cf34b71
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/input-scrollbar-color-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Reference</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev">
+<input>
diff --git a/testing/web-platform/tests/css/css-scrollbars/input-scrollbar-color.html b/testing/web-platform/tests/css/css-scrollbars/input-scrollbar-color.html
new file mode 100644
index 0000000000..fa03b1391e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/input-scrollbar-color.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Test: scrollbar-color shouldn't cause scrollbars in inputs</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev">
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#scrollbar-color">
+<link rel="match" href="input-scrollbar-color-ref.html">
+<style>
+ :root {
+ scrollbar-color: red yellow;
+ }
+</style>
+<input>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-001.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-001.tentative.html
new file mode 100644
index 0000000000..c056990934
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-001.tentative.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Scrollbars: scrollbar-color auto on the root defers to ::-webkit-scrollbar</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" />
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+ :root {
+ scrollbar-color: auto;
+ }
+
+ :root::-webkit-scrollbar {
+ display: none;
+ }
+
+ /* This is so that browsers that don't implement the WebKit prefix still pass the test */
+ @supports not selector(::-webkit-scrollbar) {
+ :root {
+ overflow: hidden;
+ }
+ }
+
+ :root,
+ body {
+ margin: 0;
+ padding: 0;
+ }
+
+ #content {
+ height: 10vh;
+ width: 100%;
+ background: lightsalmon;
+ }
+
+ #expander {
+ /* force vertical scroll */
+ height: 200vh;
+ width: 300px;
+ background: gray;
+ }
+</style>
+
+<body>
+
+ <div id="content"></div>
+
+ <div id="expander"></div>
+
+ <script>
+ test(function () {
+ let root = document.documentElement;
+ let body = document.body;
+ let content = document.getElementById('content');
+
+ assert_equals(root.offsetWidth, window.innerWidth, "viewport does not show a scrollbar");
+ assert_equals(body.offsetWidth, root.offsetWidth, "body matches root");
+ assert_equals(content.offsetWidth, body.offsetWidth, "content matches body");
+ }, "scrollbar-color auto on the root defers to ::-webkit-scrollbar");
+ </script>
+</body>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-002.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-002.tentative.html
new file mode 100644
index 0000000000..70bfa5586d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-002.tentative.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Scrollbars: scrollbar-color non-auto on the root overrides ::-webkit-scrollbar</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" />
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+ :root {
+ scrollbar-color: yellow blue;
+ }
+
+ :root::-webkit-scrollbar {
+ display: none;
+ }
+
+ :root,
+ body {
+ margin: 0;
+ padding: 0;
+ }
+
+ #content {
+ height: 10vh;
+ width: 100%;
+ background: lightsalmon;
+ }
+
+ #expander {
+ /* force vertical scroll */
+ height: 200vh;
+ width: 300px;
+ background: gray;
+ }
+</style>
+
+<body>
+
+ <div id="content"></div>
+
+ <div id="expander"></div>
+
+ <script>
+ test(function () {
+ let root = document.documentElement;
+ let body = document.body;
+ let content = document.getElementById('content');
+
+ assert_less_than(root.offsetWidth, window.innerWidth, "viewport has a scrollbar");
+ assert_equals(body.offsetWidth, root.offsetWidth, "body matches root");
+ assert_equals(content.offsetWidth, body.offsetWidth, "content matches body");
+ }, "scrollbar-color non-auto on the root overrides ::-webkit-scrollbar");
+ </script>
+</body>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-003.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-003.tentative.html
new file mode 100644
index 0000000000..3fb42bedea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-003.tentative.html
@@ -0,0 +1,89 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Scrollbars: scrollbar-color on scrollable areas correctly interacts with ::-webkit-scrollbar on container</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" />
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+ .container {
+ overflow: auto;
+ height: 200px;
+ width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ }
+
+ .content {
+ height: 300px;
+ width: 100%;
+ background: lightsalmon;
+ }
+
+ .container.auto {
+ scrollbar-color: auto;
+ }
+
+ .container.auto::-webkit-scrollbar {
+ display: none;
+ }
+
+ /* This is so that browsers that don't implement the WebKit prefix still pass the test */
+ @supports not selector(::-webkit-scrollbar) {
+ .container.auto {
+ overflow: hidden;
+ }
+ }
+
+ .container.themed {
+ scrollbar-color: yellow blue;
+ }
+
+ .container.themed::-webkit-scrollbar {
+ display: none;
+ }
+</style>
+<script>
+ function performTest() {
+ setup({ explicit_done: true });
+
+ test(function () {
+ let container = document.getElementById('container_auto');
+ let content = document.getElementById('content_auto');
+ assert_equals(container.scrollWidth, 200, "auto scrollWidth");
+ assert_equals(container.clientWidth, 200, "auto clientWidth");
+ assert_equals(container.offsetLeft, content.offsetLeft, "auto offsetLeft");
+ assert_equals(container.clientWidth, content.clientWidth, "auto clientWidth");
+ assert_equals(container.offsetWidth, content.offsetWidth, "auto offsetWidth");
+ }, "scrollbar-color auto defers to ::-webkit-scrollbar");
+
+ test(function () {
+ let container = document.getElementById('container_themed');
+ let content = document.getElementById('content_themed');
+ assert_less_than(container.scrollWidth, container.offsetWidth, "themed scrollWidth");
+ assert_less_than(container.clientWidth, container.offsetWidth, "themed clientWidth");
+ assert_equals(container.offsetLeft, content.offsetLeft, "themed offsetLeft");
+ assert_equals(container.clientWidth, content.clientWidth, "themed clientWidth");
+ assert_not_equals(container.offsetWidth, content.offsetWidth, "themed offsetWidth");
+ }, "scrollbar-color yellow blue overrides ::-webkit-scrollbar");
+
+ done();
+ }
+</script>
+
+<body onload="performTest()">
+
+ Test scrollbar-color: vertical scrollbar
+
+ <div class="container auto" id="container_auto">
+ <div class="content" id="content_auto">auto</div>
+ </div>
+
+ <div class="container themed" id="container_themed">
+ <div class="content" id="content_themed">themed</div>
+ </div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-004.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-004.tentative.html
new file mode 100644
index 0000000000..5932cc5d4e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-004.tentative.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Scrollbars: scrollbar-color on body correctly interacts with ::-webkit-scrollbar</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" />
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+ .container {
+ overflow: auto;
+ height: 200px;
+ width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ }
+
+ .content {
+ height: 300px;
+ width: 100%;
+ background: lightsalmon;
+ }
+
+ body {
+ scrollbar-color: yellow blue;
+ }
+
+ ::-webkit-scrollbar {
+ display: none;
+ }
+</style>
+<script>
+ function performTest() {
+ setup({ explicit_done: true });
+
+ test(function () {
+ let container = document.getElementById('container_themed');
+ let content = document.getElementById('content_themed');
+ assert_less_than(container.scrollWidth, container.offsetWidth, "themed scrollWidth");
+ assert_less_than(container.clientWidth, container.offsetWidth, "themed clientWidth");
+ assert_equals(container.offsetLeft, content.offsetLeft, "themed offsetLeft");
+ assert_equals(container.clientWidth, content.clientWidth, "themed clientWidth");
+ assert_not_equals(container.offsetWidth, content.offsetWidth, "themed offsetWidth");
+ }, "scrollbar-color yellow blue on body overrides ::-webkit-scrollbar");
+
+ done();
+ }
+</script>
+
+<body onload="performTest()">
+
+ Test scrollbar-color: vertical scrollbar
+
+ <div class="container themed" id="container_themed">
+ <div class="content" id="content_themed">themed</div>
+ </div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-005.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-005.tentative.html
new file mode 100644
index 0000000000..52d0027fba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-005.tentative.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Scrollbars: scrollbar-color on body correctly interacts with ::-webkit-scrollbar on scrollable area</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" />
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+ .container {
+ overflow: auto;
+ height: 200px;
+ width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ }
+
+ .content {
+ height: 300px;
+ width: 100%;
+ background: lightsalmon;
+ }
+
+ body {
+ scrollbar-color: yellow blue;
+ }
+
+ .container::-webkit-scrollbar {
+ display: none;
+ }
+</style>
+<script>
+ function performTest() {
+ setup({ explicit_done: true });
+
+ test(function () {
+ let container = document.getElementById('container_themed');
+ let content = document.getElementById('content_themed');
+ assert_less_than(container.scrollWidth, container.offsetWidth, "themed scrollWidth");
+ assert_less_than(container.clientWidth, container.offsetWidth, "themed clientWidth");
+ assert_equals(container.offsetLeft, content.offsetLeft, "themed offsetLeft");
+ assert_equals(container.clientWidth, content.clientWidth, "themed clientWidth");
+ assert_not_equals(container.offsetWidth, content.offsetWidth, "themed offsetWidth");
+ }, "scrollbar-color yellow blue on body overrides ::-webkit-scrollbar on scrollable area");
+
+ done();
+ }
+</script>
+
+<body onload="performTest()">
+
+ Test scrollbar-color: vertical scrollbar
+
+ <div class="container themed" id="container_themed">
+ <div class="content" id="content_themed">themed</div>
+ </div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-006-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-006-mis-ref.html
new file mode 100644
index 0000000000..2fc46863e6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-006-mis-ref.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+<style>
+ .container {
+ scrollbar-gutter: stable;
+ overflow: auto;
+ height: 200px;
+ min-width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ }
+
+ .content {
+ height: 300px;
+ width: 300px;
+ background: red;
+ }
+</style>
+<div id="one" class="container">
+ <div class="content"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-006-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-006-ref.html
new file mode 100644
index 0000000000..f1822b8184
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-006-ref.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+<style>
+ .container {
+ scrollbar-gutter: stable;
+ overflow: auto;
+ height: 200px;
+ min-width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ scrollbar-color: yellow blue;
+ }
+
+ .content {
+ height: 300px;
+ width: 300px;
+ background: red;
+ }
+</style>
+<div id="one" class="container">
+ <div class="content"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-006.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-006.tentative.html
new file mode 100644
index 0000000000..11f0de750b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-006.tentative.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html>
+<title>CSS Scrollbars: scrollbar-color on scrollable areas correctly interacts with ::-webkit-scrollbar-corner</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" />
+<link rel="match" href="scrollbar-color-006-ref.html" />
+<link rel="mismatch" href="scrollbar-color-006-mis-ref.html" />
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" />
+<style>
+ .container {
+ scrollbar-gutter: stable;
+ overflow: auto;
+ height: 200px;
+ min-width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ scrollbar-color: yellow blue;
+ }
+
+ ::-webkit-scrollbar-corner {
+ background-color: purple;
+ }
+
+ .content {
+ height: 300px;
+ width: 300px;
+ background: red;
+ }
+</style>
+<div id="one" class="container">
+ <div class="content"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-007-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-007-mis-ref.html
new file mode 100644
index 0000000000..2fc46863e6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-007-mis-ref.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+<style>
+ .container {
+ scrollbar-gutter: stable;
+ overflow: auto;
+ height: 200px;
+ min-width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ }
+
+ .content {
+ height: 300px;
+ width: 300px;
+ background: red;
+ }
+</style>
+<div id="one" class="container">
+ <div class="content"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-007-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-007-ref.html
new file mode 100644
index 0000000000..f1822b8184
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-007-ref.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+<style>
+ .container {
+ scrollbar-gutter: stable;
+ overflow: auto;
+ height: 200px;
+ min-width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ scrollbar-color: yellow blue;
+ }
+
+ .content {
+ height: 300px;
+ width: 300px;
+ background: red;
+ }
+</style>
+<div id="one" class="container">
+ <div class="content"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-007.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-007.tentative.html
new file mode 100644
index 0000000000..75358fdf68
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-007.tentative.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html>
+<title>CSS Scrollbars: scrollbar-color on scrollable areas correctly interacts with ::-webkit-scrollbar-corner on container</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" />
+<link rel="match" href="scrollbar-color-007-ref.html" />
+<link rel="mismatch" href="scrollbar-color-007-mis-ref.html" />
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" />
+<style>
+ .container {
+ scrollbar-gutter: stable;
+ overflow: auto;
+ height: 200px;
+ min-width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ scrollbar-color: yellow blue;
+ }
+
+ .container::-webkit-scrollbar-corner {
+ background-color: purple;
+ }
+
+ .content {
+ height: 300px;
+ width: 300px;
+ background: red;
+ }
+</style>
+<div id="one" class="container">
+ <div class="content"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-008-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-008-mis-ref.html
new file mode 100644
index 0000000000..2fc46863e6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-008-mis-ref.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+<style>
+ .container {
+ scrollbar-gutter: stable;
+ overflow: auto;
+ height: 200px;
+ min-width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ }
+
+ .content {
+ height: 300px;
+ width: 300px;
+ background: red;
+ }
+</style>
+<div id="one" class="container">
+ <div class="content"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-008-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-008-ref.html
new file mode 100644
index 0000000000..f1822b8184
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-008-ref.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+<style>
+ .container {
+ scrollbar-gutter: stable;
+ overflow: auto;
+ height: 200px;
+ min-width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ scrollbar-color: yellow blue;
+ }
+
+ .content {
+ height: 300px;
+ width: 300px;
+ background: red;
+ }
+</style>
+<div id="one" class="container">
+ <div class="content"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-008.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-008.tentative.html
new file mode 100644
index 0000000000..576193814c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-008.tentative.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html>
+<title>CSS Scrollbars: scrollbar-color on body correctly interacts with ::-webkit-scrollbar-corner on container</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" />
+<link rel="match" href="scrollbar-color-008-ref.html" />
+<link rel="mismatch" href="scrollbar-color-008-mis-ref.html" />
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" />
+<style>
+ body {
+ scrollbar-color: yellow blue;
+ }
+
+ .container {
+ scrollbar-gutter: stable;
+ overflow: auto;
+ height: 200px;
+ min-width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ }
+
+ .container::-webkit-scrollbar-corner {
+ background-color: purple;
+ }
+
+ .content {
+ height: 300px;
+ width: 300px;
+ background: red;
+ }
+</style>
+<div id="one" class="container">
+ <div class="content"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-009-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-009-mis-ref.html
new file mode 100644
index 0000000000..2b611afbe2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-009-mis-ref.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<html>
+<style>
+ body {
+ overflow: scroll;
+ }
+</style>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-009-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-009-ref.html
new file mode 100644
index 0000000000..890179a21c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-009-ref.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+<style>
+ :root {
+ scrollbar-color: yellow blue;
+ }
+
+ body {
+ overflow: scroll;
+ }
+</style>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-009.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-009.tentative.html
new file mode 100644
index 0000000000..312bbc731b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-009.tentative.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+<title>CSS Scrollbars: scrollbar-color on root correctly interacts with ::-webkit-scrollbar-corner</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" />
+<link rel="match" href="scrollbar-color-009-ref.html" />
+<link rel="mismatch" href="scrollbar-color-009-mis-ref.html" />
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" />
+<style>
+ :root {
+ scrollbar-color: yellow blue;
+ }
+
+ body {
+ overflow: scroll;
+ }
+
+ ::-webkit-scrollbar-corner {
+ background-color: purple;
+ }
+</style>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-010-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-010-mis-ref.html
new file mode 100644
index 0000000000..2b611afbe2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-010-mis-ref.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<html>
+<style>
+ body {
+ overflow: scroll;
+ }
+</style>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-010-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-010-ref.html
new file mode 100644
index 0000000000..890179a21c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-010-ref.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+<style>
+ :root {
+ scrollbar-color: yellow blue;
+ }
+
+ body {
+ overflow: scroll;
+ }
+</style>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-010.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-010.tentative.html
new file mode 100644
index 0000000000..9f560613e0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-010.tentative.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+<title>CSS Scrollbars: scrollbar-color on root correctly interacts with ::-webkit-scrollbar-corner on body</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" />
+<link rel="match" href="scrollbar-color-010-ref.html" />
+<link rel="mismatch" href="scrollbar-color-010-mis-ref.html" />
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" />
+<style>
+ :root {
+ scrollbar-color: yellow blue;
+ }
+
+ body {
+ overflow: scroll;
+ }
+
+ body::-webkit-scrollbar-corner {
+ background-color: purple;
+ }
+</style>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-011-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-011-mis-ref.html
new file mode 100644
index 0000000000..58626ef982
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-011-mis-ref.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+<style>
+ :root {
+ color: blue;
+ }
+
+ body {
+ overflow: scroll;
+ }
+</style>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-011-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-011-ref.html
new file mode 100644
index 0000000000..a4db731eb0
--- /dev/null
+++ b/testing/web-platform/tests/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/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-011.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-011.html
new file mode 100644
index 0000000000..3df5f843e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-011.html
@@ -0,0 +1,17 @@
+<!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="mismatch" href="scrollbar-color-011-mis-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>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-012-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-012-ref.html
new file mode 100644
index 0000000000..1effaf3922
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-012-ref.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+<style>
+ .container {
+ overflow: auto;
+ height: 200px;
+ width: 200px;
+ background-color: red;
+ }
+</style>
+<div class="container">
+ <div class="content"></div>
+</div> \ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-012.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-012.html
new file mode 100644
index 0000000000..974c6012b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-012.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+<title>scrollbar-color with transparent colors works</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" />
+<link rel="match" href="scrollbar-color-012-ref.html" />
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars" />
+<style>
+ html {scrollbar-color: transparent transparent;}
+ body {height: 200vh}
+ .container {
+ overflow: auto;
+ height: 200px;
+ width: 200px;
+ background-color: red;
+ }
+
+ .content {
+ height: 300px;
+ width: 300px;
+ }
+</style>
+<div class="container">
+ <div class="content"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-1-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-1-mis-ref.html
new file mode 100644
index 0000000000..a37205392c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-1-mis-ref.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<style>
+ 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/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-1-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-1-ref.html
new file mode 100644
index 0000000000..b431edf424
--- /dev/null
+++ b/testing/web-platform/tests/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/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-1.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-1.html
new file mode 100644
index 0000000000..9a03bcddc4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-1.html
@@ -0,0 +1,47 @@
+<!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" />
+<link rel="mismatch" href="scrollbar-color-dynamic-1-mis-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/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-2-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-2-mis-ref.html
new file mode 100644
index 0000000000..58b50991c7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-2-mis-ref.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<style>
+ 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/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-2-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-2-ref.html
new file mode 100644
index 0000000000..94e5841ef2
--- /dev/null
+++ b/testing/web-platform/tests/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/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-2.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-2.html
new file mode 100644
index 0000000000..f2faeb3921
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-2.html
@@ -0,0 +1,37 @@
+<!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" />
+<link rel="mismatch" href="scrollbar-color-dynamic-2-mis-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/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-3-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-3-mis-ref.html
new file mode 100644
index 0000000000..8624c0526c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-3-mis-ref.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<style>
+ 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/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-3-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-3-ref.html
new file mode 100644
index 0000000000..3551f3bbaa
--- /dev/null
+++ b/testing/web-platform/tests/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/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-3.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-3.html
new file mode 100644
index 0000000000..91bc4692ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-3.html
@@ -0,0 +1,47 @@
+<!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" />
+<link rel="mismatch" href="scrollbar-color-dynamic-3-mis-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/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-4-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-4-mis-ref.html
new file mode 100644
index 0000000000..4cf26154b9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-4-mis-ref.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<style>
+ 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/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-4-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-4-ref.html
new file mode 100644
index 0000000000..b10df54148
--- /dev/null
+++ b/testing/web-platform/tests/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/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-4.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-4.html
new file mode 100644
index 0000000000..c2a5a8b844
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-4.html
@@ -0,0 +1,37 @@
+<!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" />
+<link rel="mismatch" href="scrollbar-color-dynamic-4-mis-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/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-5-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-5-mis-ref.html
new file mode 100644
index 0000000000..a37205392c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-5-mis-ref.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<style>
+ 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/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-5-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-5-ref.html
new file mode 100644
index 0000000000..667d5b3be3
--- /dev/null
+++ b/testing/web-platform/tests/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/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-5.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-5.html
new file mode 100644
index 0000000000..42648850b4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-5.html
@@ -0,0 +1,48 @@
+<!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" />
+<link rel="mismatch" href="scrollbar-color-dynamic-5-mis-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/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-6-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-6-mis-ref.html
new file mode 100644
index 0000000000..ed0790acde
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-6-mis-ref.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<style>
+ 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/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-6-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-6-ref.html
new file mode 100644
index 0000000000..d4c6a16981
--- /dev/null
+++ b/testing/web-platform/tests/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/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-6.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-6.html
new file mode 100644
index 0000000000..63b1e36942
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-6.html
@@ -0,0 +1,50 @@
+<!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" />
+<link rel="mismatch" href="scrollbar-color-dynamic-6-mis-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/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-7-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-7-mis-ref.html
new file mode 100644
index 0000000000..a37205392c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-7-mis-ref.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<style>
+ 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/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-7-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-7-ref.html
new file mode 100644
index 0000000000..b431edf424
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-7-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/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-7.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-7.html
new file mode 100644
index 0000000000..71bb93fb72
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-7.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Dynamically set scrollbar-colors when starts auto 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-7-ref.html" />
+<link rel="mismatch" href="scrollbar-color-dynamic-7-mis-ref.html" />
+<script src="/common/reftest-wait.js"></script>
+<style>
+ :root {
+ scrollbar-color: auto;
+ }
+ 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/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-parsing.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-parsing.html
new file mode 100644
index 0000000000..17b649d54c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-parsing.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Scrollbars: parsing scrollbar-color declarations</title>
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars/"/>
+<meta name="assert" content="Parsing scrollbar-color declarations">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+
+<script>
+ test_valid_value('scrollbar-color', 'initial');
+ test_valid_value('scrollbar-color', 'inherit');
+ test_valid_value('scrollbar-color', 'unset');
+ test_valid_value('scrollbar-color', 'revert');
+ test_valid_value('scrollbar-color', 'auto');
+ test_valid_value("scrollbar-color", "red green");
+ test_valid_value("scrollbar-color", "#FF0000 #00FF00", "rgb(255, 0, 0) rgb(0, 255, 0)");
+ test_valid_value("scrollbar-color", "currentcolor currentcolor");
+
+ test_invalid_value("scrollbar-color", "");
+ test_invalid_value("scrollbar-color", "auto auto");
+ test_invalid_value("scrollbar-color", "auto currentcolor");
+ test_invalid_value("scrollbar-color", "red");
+ test_invalid_value("scrollbar-color", "#FF0000");
+
+</script>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-1-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-1-ref.html
new file mode 100644
index 0000000000..ec54bc08a7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-1-ref.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<style>
+ :root {
+ color-scheme: dark;
+ }
+ 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/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-1.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-1.html
new file mode 100644
index 0000000000..71fd97f274
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-1.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Dynamically set color-scheme 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-scheme-dynamic-1-ref.html" />
+<script src="/common/reftest-wait.js"></script>
+<style>
+ :root {
+ color-scheme: light;
+ }
+ 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.colorScheme = 'dark';
+
+ takeScreenshot();
+ }));
+</script>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-2-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-2-ref.html
new file mode 100644
index 0000000000..906fb11cd5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-2-ref.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<style>
+ :root {
+ color-scheme: dark;
+ }
+ 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/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-2.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-2.html
new file mode 100644
index 0000000000..111219c7d1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-2.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Dynamically set color-scheme and ensure viewport 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-scheme-dynamic-2-ref.html" />
+<script src="/common/reftest-wait.js"></script>
+<style>
+ :root {
+ color-scheme: light;
+ }
+ 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.colorScheme = 'dark';
+
+ takeScreenshot();
+ }));
+</script>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-3-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-3-ref.html
new file mode 100644
index 0000000000..e9e842caea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-3-ref.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<style>
+ :root {
+ color-scheme: light;
+ }
+ body {
+ display: flex;
+ flex-wrap: wrap;
+ width: 200vw;
+ height: 200vh;
+ }
+
+ .container {
+ color-scheme: dark;
+ 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/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-3.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-3.html
new file mode 100644
index 0000000000..47105f0c6d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-3.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Dynamically set color-scheme 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-scheme-dynamic-3-ref.html" />
+<script src="/common/reftest-wait.js"></script>
+<style>
+ :root {
+ color-scheme: light;
+ }
+ 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.colorScheme = 'dark';
+
+ takeScreenshot();
+ }));
+</script>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-4-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-4-ref.html
new file mode 100644
index 0000000000..0456198235
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-4-ref.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<style>
+ :root {
+ color-scheme: light;
+ }
+ body {
+ display: flex;
+ flex-wrap: wrap;
+ overflow: scroll;
+ }
+ .container {
+ color-scheme: dark;
+ 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/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-4.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-4.html
new file mode 100644
index 0000000000..9655a0ebb2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-4.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Dynamically set color-scheme and ensure viewport 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-scheme-dynamic-4-ref.html" />
+<script src="/common/reftest-wait.js"></script>
+<style>
+ :root {
+ color-scheme: light;
+ }
+ 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.colorScheme = 'dark';
+
+ takeScreenshot();
+ }));
+</script>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-001.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-001.html
new file mode 100644
index 0000000000..21dfd3d116
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-001.html
@@ -0,0 +1,174 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Scrollbars: scrollbar-width with horizontal text and vertical scrollbar</title>
+<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com" />
+<link rel="help" href="https://www.w3.org/TR/css-scrollbars-1/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+ /* Use scrollbar-gutter to reserve space for the scrollbar. */
+ .container {
+ scrollbar-gutter: stable;
+ writing-mode: horizontal-tb;
+ overflow: auto;
+ height: 200px;
+ width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ }
+
+ .content {
+ height: 300px;
+ width: 100%;
+ background: lightsalmon;
+ }
+
+ /* writing directions */
+ .ltr {
+ direction: ltr;
+ }
+
+ .rtl {
+ direction: rtl;
+ }
+
+ .container.auto {
+ scrollbar-width: auto;
+ }
+
+ .container.thin {
+ scrollbar-width: thin;
+ }
+
+ .container.none {
+ scrollbar-width: none;
+ }
+</style>
+<script type="text/javascript">
+
+ function performTest() {
+ setup({ explicit_done: true });
+
+ // ltr
+
+ test(function () {
+ let container = document.getElementById('container_ltr_auto');
+ let content = document.getElementById('content_ltr_auto');
+ assert_less_than(container.scrollWidth, container.offsetWidth, "ltr auto scrollWidth");
+ assert_less_than(container.clientWidth, container.offsetWidth, "ltr auto clientWidth");
+ assert_equals(container.offsetLeft, content.offsetLeft, "ltr auto offsetLeft");
+ assert_equals(container.clientWidth, content.clientWidth, "ltr auto clientWidth");
+ assert_not_equals(container.offsetWidth, content.offsetWidth, "ltr auto offsetWidth");
+ }, "horizontal-tb, ltr, scrollbar-width auto");
+
+ test(function () {
+ let container = document.getElementById('container_ltr_thin');
+ let content = document.getElementById('content_ltr_thin');
+ assert_less_than(container.scrollWidth, container.offsetWidth, "ltr thin scrollWidth");
+ assert_less_than(container.clientWidth, container.offsetWidth, "ltr thin clientWidth");
+ assert_equals(container.offsetLeft, content.offsetLeft, "ltr thin offsetLeft");
+ assert_equals(container.clientWidth, content.clientWidth, "ltr thin clientWidth");
+ assert_not_equals(container.offsetWidth, content.offsetWidth, "ltr thin offsetWidth");
+ }, "horizontal-tb, ltr, scrollbar-width thin");
+
+ test(function () {
+ let auto_scrollbar_width =
+ document.getElementById('container_ltr_auto').offsetWidth -
+ document.getElementById('container_ltr_auto').clientWidth;
+ let thin_scrollbar_width =
+ document.getElementById('container_ltr_thin').offsetWidth -
+ document.getElementById('container_ltr_thin').clientWidth;
+ assert_less_than_equal(thin_scrollbar_width, auto_scrollbar_width, "ltr, thin <= auto");
+ }, 'horizontal-tb, ltr, scrollbar-width "thin" is same or thinner than "auto"');
+
+ test(function () {
+ let container = document.getElementById('container_ltr_none');
+ let content = document.getElementById('content_ltr_none');
+ assert_equals(container.scrollWidth, 200, "ltr none scrollWidth");
+ assert_equals(container.clientWidth, 200, "ltr none clientWidth");
+ assert_equals(container.offsetLeft, content.offsetLeft, "ltr none offsetLeft");
+ assert_equals(container.clientWidth, content.clientWidth, "ltr none clientWidth");
+ assert_equals(container.offsetWidth, content.offsetWidth, "ltr none offsetWidth");
+ }, "horizontal-tb, ltr, scrollbar-width none");
+
+ // rtl
+
+ test(function () {
+ let container = document.getElementById('container_rtl_auto');
+ let content = document.getElementById('content_rtl_auto');
+ assert_less_than(container.scrollWidth, container.offsetWidth, "rtl auto scrollWidth");
+ assert_less_than(container.clientWidth, container.offsetWidth, "rtl auto clientWidth");
+ assert_less_than(container.offsetLeft, content.offsetLeft, "rtl auto offsetLeft");
+ assert_equals(container.clientWidth, content.clientWidth, "rtl auto clientWidth");
+ assert_not_equals(container.offsetWidth, content.offsetWidth, "rtl auto offsetWidth");
+ }, "horizontal-tb, rtl, scrollbar-width auto");
+
+ test(function () {
+ let container = document.getElementById('container_rtl_thin');
+ let content = document.getElementById('content_rtl_thin');
+ assert_less_than(container.scrollWidth, container.offsetWidth, "rtl thin scrollWidth");
+ assert_less_than(container.clientWidth, container.offsetWidth, "rtl thin clientWidth");
+ assert_less_than(container.offsetLeft, content.offsetLeft, "rtl thin offsetLeft");
+ assert_equals(container.clientWidth, content.clientWidth, "rtl thin clientWidth");
+ assert_not_equals(container.offsetWidth, content.offsetWidth, "rtl thin offsetWidth");
+ }, "horizontal-tb, rtl, scrollbar-width thin");
+
+ test(function () {
+ let auto_scrollbar_width =
+ document.getElementById('container_rtl_auto').offsetWidth -
+ document.getElementById('container_rtl_auto').clientWidth;
+ let thin_scrollbar_width =
+ document.getElementById('container_rtl_thin').offsetWidth -
+ document.getElementById('container_rtl_thin').clientWidth;
+ assert_less_than_equal(thin_scrollbar_width, auto_scrollbar_width, "rtl, thin < auto");
+ }, 'horizontal-tb, rtl, scrollbar-width "thin" is same or thinner than "auto"');
+
+ test(function () {
+ let container = document.getElementById('container_rtl_none');
+ let content = document.getElementById('content_rtl_none');
+ assert_equals(container.scrollWidth, 200, "rtl none scrollWidth");
+ assert_equals(container.clientWidth, 200, "rtl none clientWidth");
+ assert_equals(container.offsetLeft, content.offsetLeft, "rtl none offsetLeft");
+ assert_equals(container.clientWidth, content.clientWidth, "rtl none clientWidth");
+ assert_equals(container.offsetWidth, content.offsetWidth, "rtl none offsetWidth");
+ }, "horizontal-tb, rtl, scrollbar-width none");
+
+ done();
+ }
+
+</script>
+
+<body onload="performTest()">
+
+ Test scrollbar-width: vertical scrollbar, ltr direction
+
+ <div class="container ltr auto" id="container_ltr_auto">
+ <div class="content" id="content_ltr_auto">auto</div>
+ </div>
+
+ <div class="container ltr thin" id="container_ltr_thin">
+ <div class="content" id="content_ltr_thin">thin</div>
+ </div>
+
+ <div class="container ltr none" id="container_ltr_none">
+ <div class="content" id="content_ltr_none">none</div>
+ </div>
+
+ Test scrollbar-width: vertical scrollbar, rtl direction
+
+ <div class="container rtl auto" id="container_rtl_auto">
+ <div class="content" id="content_rtl_auto">auto</div>
+ </div>
+
+ <div class="container rtl thin" id="container_rtl_thin">
+ <div class="content" id="content_rtl_thin">thin</div>
+ </div>
+
+ <div class="container rtl none" id="container_rtl_none">
+ <div class="content" id="content_rtl_none">none</div>
+ </div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-002.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-002.html
new file mode 100644
index 0000000000..15e6af963b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-002.html
@@ -0,0 +1,167 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Scrollbars: scrollbar-width with vertical text and horizontal scrollbar</title>
+<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com" />
+<link rel="help" href="https://www.w3.org/TR/css-scrollbars-1/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+ /* Use scrollbar-gutter to reserve space for the scrollbar. */
+ .container {
+ scrollbar-gutter: stable;
+ overflow: auto;
+ height: 200px;
+ width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ }
+
+ .content {
+ height: 100%;
+ width: 300px;
+ background: lightsalmon;
+ }
+
+ /* writing directions */
+ .vertical-lr {
+ writing-mode: vertical-lr;
+ }
+
+ .vertical-rl {
+ writing-mode: vertical-rl;
+ }
+
+ .container.auto {
+ scrollbar-width: auto;
+ }
+
+ .container.thin {
+ scrollbar-width: thin;
+ }
+
+ .container.none {
+ scrollbar-width: none;
+ }
+</style>
+<script type="text/javascript">
+
+ function performTest() {
+ setup({ explicit_done: true });
+
+ // vertical-lr
+
+ test(function () {
+ let container = document.getElementById('container_vlr_auto');
+ let content = document.getElementById('content_vlr_auto');
+ assert_less_than(container.scrollHeight, container.offsetHeight, "vertical-lr auto scrollHeight");
+ assert_less_than(container.clientHeight, container.offsetHeight, "vertical-lr auto clientHeight");
+ assert_equals(container.clientHeight, content.clientHeight, "vertical-lr auto clientHeight");
+ assert_not_equals(container.offsetHeight, content.offsetHeight, "vertical-lr auto offsetHeight");
+ }, "vertical-lr, scrollbar-width auto");
+
+ test(function () {
+ let container = document.getElementById('container_vlr_thin');
+ let content = document.getElementById('content_vlr_thin');
+ assert_less_than(container.scrollHeight, container.offsetHeight, "vertical-lr thin scrollHeight");
+ assert_less_than(container.clientHeight, container.offsetHeight, "vertical-lr thin clientHeight");
+ assert_equals(container.clientHeight, content.clientHeight, "vertical-lr thin clientHeight");
+ assert_not_equals(container.offsetHeight, content.offsetHeight, "vertical-lr thin offsetHeight");
+ }, "vertical-lr, scrollbar-width thin");
+
+ test(function () {
+ let auto_scrollbar_height =
+ document.getElementById('container_vlr_auto').offsetHeight -
+ document.getElementById('container_vlr_auto').clientHeight;
+ let thin_scrollbar_height =
+ document.getElementById('container_vlr_thin').offsetHeight -
+ document.getElementById('container_vlr_thin').clientHeight;
+ assert_less_than_equal(thin_scrollbar_height, auto_scrollbar_height, "vertical-lr, thin <= auto");
+ }, 'vertical-lr, scrollbar-width "thin" is same or thinner than "auto"');
+
+ test(function () {
+ let container = document.getElementById('container_vlr_none');
+ let content = document.getElementById('content_vlr_none');
+ assert_equals(container.scrollHeight, 200, "vertical-lr none scrollHeight");
+ assert_equals(container.clientHeight, 200, "vertical-lr none clientHeight");
+ assert_equals(container.clientHeight, content.clientHeight, "vertical-lr none clientHeight");
+ assert_equals(container.offsetHeight, content.offsetHeight, "vertical-lr none offsetHeight");
+ }, "vertical-lr, scrollbar-width none");
+
+ // vertical-rl
+
+ test(function () {
+ let container = document.getElementById('container_vrl_auto');
+ let content = document.getElementById('content_vrl_auto');
+ assert_less_than(container.scrollHeight, container.offsetHeight, "vertical-rl auto scrollHeight");
+ assert_less_than(container.clientHeight, container.offsetHeight, "vertical-rl auto clientHeight");
+ assert_equals(container.clientHeight, content.clientHeight, "vertical-rl auto clientHeight");
+ assert_not_equals(container.offsetHeight, content.offsetHeight, "vertical-rl auto offsetHeight");
+ }, "vertical-rl, scrollbar-width auto");
+
+ test(function () {
+ let container = document.getElementById('container_vrl_thin');
+ let content = document.getElementById('content_vrl_thin');
+ assert_less_than(container.scrollHeight, container.offsetHeight, "vertical-rl thin scrollHeight");
+ assert_less_than(container.clientHeight, container.offsetHeight, "vertical-rl thin clientHeight");
+ assert_equals(container.clientHeight, content.clientHeight, "vertical-rl thin clientHeight");
+ assert_not_equals(container.offsetHeight, content.offsetHeight, "vertical-rl thin offsetHeight");
+ }, "vertical-rl, scrollbar-width thin");
+
+ test(function () {
+ let auto_scrollbar_height =
+ document.getElementById('container_vrl_auto').offsetHeight -
+ document.getElementById('container_vrl_auto').clientHeight;
+ let thin_scrollbar_height =
+ document.getElementById('container_vrl_thin').offsetHeight -
+ document.getElementById('container_vrl_thin').clientHeight;
+ assert_less_than_equal(thin_scrollbar_height, auto_scrollbar_height, "vertical-rl, thin <= auto");
+ }, 'vertical-rl, scrollbar-width "thin" is same or thinner than "auto"');
+
+ test(function () {
+ let container = document.getElementById('container_vrl_none');
+ let content = document.getElementById('content_vrl_none');
+ assert_equals(container.scrollHeight, 200, "vertical-rl none scrollHeight");
+ assert_equals(container.clientHeight, 200, "vertical-rl none clientHeight");
+ assert_equals(container.clientHeight, content.clientHeight, "vertical-rl none clientHeight");
+ assert_equals(container.offsetHeight, content.offsetHeight, "vertical-rl none offsetHeight");
+ }, "vertical-rl, scrollbar-width none");
+
+ done();
+ }
+
+</script>
+
+<body onload="performTest()">
+
+ Test scrollbar-width: horizontal scrollbar, vertical-lr direction
+
+ <div class="container vertical-lr auto" id="container_vlr_auto">
+ <div class="content" id="content_vlr_auto">auto</div>
+ </div>
+
+ <div class="container vertical-lr thin" id="container_vlr_thin">
+ <div class="content" id="content_vlr_thin">thin</div>
+ </div>
+
+ <div class="container vertical-lr none" id="container_vlr_none">
+ <div class="content" id="content_vlr_none">none</div>
+ </div>
+
+ Test scrollbar-width: horizontal scrollbar, vertical-rl direction
+
+ <div class="container vertical-rl auto" id="container_vrl_auto">
+ <div class="content" id="content_vrl_auto">auto</div>
+ </div>
+
+ <div class="container vertical-rl thin" id="container_vrl_thin">
+ <div class="content" id="content_vrl_thin">thin</div>
+ </div>
+
+ <div class="container vertical-rl none" id="container_vrl_none">
+ <div class="content" id="content_vrl_none">none</div>
+ </div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-003.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-003.html
new file mode 100644
index 0000000000..7574e8daf6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-003.html
@@ -0,0 +1,154 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Scrollbars: scrollbar-width with horizontal text, and vertical and horizontal scrollbars</title>
+<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com" />
+<link rel="help" href="https://www.w3.org/TR/css-scrollbars-1/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+ /* Use scrollbar-gutter to reserve space for the scrollbar. */
+ .container {
+ scrollbar-gutter: stable;
+ writing-mode: horizontal-tb;
+ overflow: auto;
+ height: 200px;
+ width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ }
+
+ .content {
+ height: 300px;
+ width: 300px;
+ background: lightsalmon;
+ }
+
+ /* writing directions */
+ .ltr {
+ direction: ltr;
+ }
+
+ .rtl {
+ direction: rtl;
+ }
+
+ .container.auto {
+ scrollbar-width: auto;
+ }
+
+ .container.thin {
+ scrollbar-width: thin;
+ }
+
+ .container.none {
+ scrollbar-width: none;
+ }
+</style>
+<script type="text/javascript">
+
+ function performTest() {
+ setup({ explicit_done: true });
+
+ // ltr
+
+ test(function () {
+ let container = document.getElementById('container_ltr_auto');
+ let content = document.getElementById('content_ltr_auto');
+ assert_less_than(container.offsetWidth, container.scrollWidth, "ltr auto scrollWidth");
+ assert_less_than(container.offsetHeight, container.scrollHeight, "ltr auto scrollHeight");
+ assert_less_than(container.clientWidth, container.offsetWidth, "ltr auto clientWidth");
+ assert_less_than(container.clientHeight, container.offsetHeight, "ltr auto clientHeight");
+ assert_equals(content.offsetLeft, container.offsetLeft, "ltr auto offsetLeft");
+ }, "horizontal-tb, ltr, scrollbar-width auto");
+
+ test(function () {
+ let container = document.getElementById('container_ltr_thin');
+ let content = document.getElementById('content_ltr_thin');
+ assert_less_than(container.offsetWidth, container.scrollWidth, "ltr auto scrollWidth");
+ assert_less_than(container.offsetHeight, container.scrollHeight, "ltr auto scrollHeight");
+ assert_less_than(container.clientWidth, container.offsetWidth, "ltr auto clientWidth");
+ assert_less_than(container.clientHeight, container.offsetHeight, "ltr auto clientHeight");
+ assert_equals(content.offsetLeft, container.offsetLeft, "ltr auto offsetLeft");
+ }, "horizontal-tb, ltr, scrollbar-width thin");
+
+ test(function () {
+ let container = document.getElementById('container_ltr_none');
+ let content = document.getElementById('content_ltr_none');
+ assert_less_than(container.offsetWidth, container.scrollWidth, "ltr auto scrollWidth");
+ assert_less_than(container.offsetHeight, container.scrollHeight, "ltr auto scrollHeight");
+ assert_equals(container.clientWidth, container.offsetWidth, "ltr auto clientWidth");
+ assert_equals(container.clientHeight, container.offsetHeight, "ltr auto clientHeight");
+ assert_equals(content.offsetLeft, container.offsetLeft, "ltr auto offsetLeft");
+ }, "horizontal-tb, ltr, scrollbar-width none");
+
+ // rtl
+
+ test(function () {
+ let container = document.getElementById('container_rtl_auto');
+ let content = document.getElementById('content_rtl_auto');
+ assert_less_than(container.offsetWidth, container.scrollWidth, "rtl auto scrollWidth");
+ assert_less_than(container.offsetHeight, container.scrollHeight, "rtl auto scrollHeight");
+ assert_less_than(container.clientWidth, container.offsetWidth, "rtl auto clientWidth");
+ assert_less_than(container.clientHeight, container.offsetHeight, "rtl auto clientHeight");
+ assert_less_than(content.offsetLeft, container.offsetLeft, "rtl auto offsetLeft");
+ }, "horizontal-tb, rtl, scrollbar-width auto");
+
+ test(function () {
+ let container = document.getElementById('container_rtl_thin');
+ let content = document.getElementById('content_rtl_thin');
+ assert_less_than(container.offsetWidth, container.scrollWidth, "rtl auto scrollWidth");
+ assert_less_than(container.offsetHeight, container.scrollHeight, "rtl auto scrollHeight");
+ assert_less_than(container.clientWidth, container.offsetWidth, "rtl auto clientWidth");
+ assert_less_than(container.clientHeight, container.offsetHeight, "rtl auto clientHeight");
+ assert_less_than(content.offsetLeft, container.offsetLeft, "rtl auto offsetLeft");
+ }, "horizontal-tb, rtl, scrollbar-width thin");
+
+ test(function () {
+ let container = document.getElementById('container_rtl_none');
+ let content = document.getElementById('content_rtl_none');
+ assert_less_than(container.offsetWidth, container.scrollWidth, "rtl auto scrollWidth");
+ assert_less_than(container.offsetHeight, container.scrollHeight, "rtl auto scrollHeight");
+ assert_equals(container.clientWidth, container.offsetWidth, "rtl auto clientWidth");
+ assert_equals(container.clientHeight, container.offsetHeight, "rtl auto clientHeight");
+ assert_less_than(content.offsetLeft, container.offsetLeft, "rtl auto offsetLeft");
+ }, "horizontal-tb, rtl, scrollbar-width none");
+
+ done();
+ }
+
+</script>
+
+<body onload="performTest()">
+
+ Test scrollbar-width: both scrollbars, horizontal ltr
+
+ <div class="container ltr auto" id="container_ltr_auto">
+ <div class="content" id="content_ltr_auto">auto</div>
+ </div>
+
+ <div class="container ltr thin" id="container_ltr_thin">
+ <div class="content" id="content_ltr_thin">thin</div>
+ </div>
+
+ <div class="container ltr none" id="container_ltr_none">
+ <div class="content" id="content_ltr_none">none</div>
+ </div>
+
+ Test scrollbar-width: both scrollbars, horizontal rtl
+
+ <div class="container rtl auto" id="container_rtl_auto">
+ <div class="content" id="content_rtl_auto">auto</div>
+ </div>
+
+ <div class="container rtl thin" id="container_rtl_thin">
+ <div class="content" id="content_rtl_thin">thin</div>
+ </div>
+
+ <div class="container rtl none" id="container_rtl_none">
+ <div class="content" id="content_rtl_none">none</div>
+ </div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-004.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-004.html
new file mode 100644
index 0000000000..bdd1cd61db
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-004.html
@@ -0,0 +1,154 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Scrollbars: scrollbar-width with vertical text, and vertical and horizontal scrollbars</title>
+<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com" />
+<link rel="help" href="https://www.w3.org/TR/css-scrollbars-1/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+ /* Use scrollbar-gutter to reserve space for the scrollbar. */
+ .container {
+ scrollbar-gutter: stable;
+ writing-mode: horizontal-tb;
+ overflow: auto;
+ height: 200px;
+ width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ }
+
+ .content {
+ height: 300px;
+ width: 300px;
+ background: lightsalmon;
+ }
+
+ /* writing directions */
+ .vertical-lr {
+ writing-mode: vertical-lr;
+ }
+
+ .vertical-rl {
+ writing-mode: vertical-rl;
+ }
+
+ .container.auto {
+ scrollbar-width: auto;
+ }
+
+ .container.thin {
+ scrollbar-width: thin;
+ }
+
+ .container.none {
+ scrollbar-width: none;
+ }
+</style>
+<script type="text/javascript">
+
+ function performTest() {
+ setup({ explicit_done: true });
+
+ // vertical-lr
+
+ test(function () {
+ let container = document.getElementById('container_vlr_auto');
+ let content = document.getElementById('content_vlr_auto');
+ assert_less_than(container.offsetWidth, container.scrollWidth, "ltr auto scrollWidth");
+ assert_less_than(container.offsetHeight, container.scrollHeight, "ltr auto scrollHeight");
+ assert_less_than(container.clientWidth, container.offsetWidth, "ltr auto clientWidth");
+ assert_less_than(container.clientHeight, container.offsetHeight, "ltr auto clientHeight");
+ assert_equals(content.offsetLeft, container.offsetLeft, "ltr auto offsetLeft");
+ }, "vertical-lr, scrollbar-width auto");
+
+ test(function () {
+ let container = document.getElementById('container_vlr_thin');
+ let content = document.getElementById('content_vlr_thin');
+ assert_less_than(container.offsetWidth, container.scrollWidth, "ltr auto scrollWidth");
+ assert_less_than(container.offsetHeight, container.scrollHeight, "ltr auto scrollHeight");
+ assert_less_than(container.clientWidth, container.offsetWidth, "ltr auto clientWidth");
+ assert_less_than(container.clientHeight, container.offsetHeight, "ltr auto clientHeight");
+ assert_equals(content.offsetLeft, container.offsetLeft, "ltr auto offsetLeft");
+ }, "vertical-lr, scrollbar-width thin");
+
+ test(function () {
+ let container = document.getElementById('container_vlr_none');
+ let content = document.getElementById('content_vlr_none');
+ assert_less_than(container.offsetWidth, container.scrollWidth, "ltr auto scrollWidth");
+ assert_less_than(container.offsetHeight, container.scrollHeight, "ltr auto scrollHeight");
+ assert_equals(container.clientWidth, container.offsetWidth, "ltr auto clientWidth");
+ assert_equals(container.clientHeight, container.offsetHeight, "ltr auto clientHeight");
+ assert_equals(content.offsetLeft, container.offsetLeft, "ltr auto offsetLeft");
+ }, "vertical-lr, scrollbar-width none");
+
+ // vertical-rl
+
+ test(function () {
+ let container = document.getElementById('container_vrl_auto');
+ let content = document.getElementById('content_vrl_auto');
+ assert_less_than(container.offsetWidth, container.scrollWidth, "rtl auto scrollWidth");
+ assert_less_than(container.offsetHeight, container.scrollHeight, "rtl auto scrollHeight");
+ assert_less_than(container.clientWidth, container.offsetWidth, "rtl auto clientWidth");
+ assert_less_than(container.clientHeight, container.offsetHeight, "rtl auto clientHeight");
+ assert_less_than(content.offsetLeft, container.offsetLeft, "rtl auto offsetLeft");
+ }, "vertical-rl, scrollbar-width auto");
+
+ test(function () {
+ let container = document.getElementById('container_vrl_thin');
+ let content = document.getElementById('content_vrl_thin');
+ assert_less_than(container.offsetWidth, container.scrollWidth, "rtl auto scrollWidth");
+ assert_less_than(container.offsetHeight, container.scrollHeight, "rtl auto scrollHeight");
+ assert_less_than(container.clientWidth, container.offsetWidth, "rtl auto clientWidth");
+ assert_less_than(container.clientHeight, container.offsetHeight, "rtl auto clientHeight");
+ assert_less_than(content.offsetLeft, container.offsetLeft, "rtl auto offsetLeft");
+ }, "vertical-rl, scrollbar-width thin");
+
+ test(function () {
+ let container = document.getElementById('container_vrl_none');
+ let content = document.getElementById('content_vrl_none');
+ assert_less_than(container.offsetWidth, container.scrollWidth, "rtl auto scrollWidth");
+ assert_less_than(container.offsetHeight, container.scrollHeight, "rtl auto scrollHeight");
+ assert_equals(container.clientWidth, container.offsetWidth, "rtl auto clientWidth");
+ assert_equals(container.clientHeight, container.offsetHeight, "rtl auto clientHeight");
+ assert_less_than(content.offsetLeft, container.offsetLeft, "rtl auto offsetLeft");
+ }, "vertical-rl, scrollbar-width none");
+
+ done();
+ }
+
+</script>
+
+<body onload="performTest()">
+
+ Test scrollbar-width: both scrollbars, vertical-lr
+
+ <div class="container vertical-lr auto" id="container_vlr_auto">
+ <div class="content" id="content_vlr_auto">auto</div>
+ </div>
+
+ <div class="container vertical-lr thin" id="container_vlr_thin">
+ <div class="content" id="content_vlr_thin">thin</div>
+ </div>
+
+ <div class="container vertical-lr none" id="container_vlr_none">
+ <div class="content" id="content_vlr_none">none</div>
+ </div>
+
+ Test scrollbar-width: both scrollbars, vertical-rl
+
+ <div class="container vertical-rl auto" id="container_vrl_auto">
+ <div class="content" id="content_vrl_auto">auto</div>
+ </div>
+
+ <div class="container vertical-rl thin" id="container_vrl_thin">
+ <div class="content" id="content_vrl_thin">thin</div>
+ </div>
+
+ <div class="container vertical-rl none" id="container_vrl_none">
+ <div class="content" id="content_vrl_none">none</div>
+ </div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-005.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-005.html
new file mode 100644
index 0000000000..62313f0216
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-005.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Scrollbars: scrollbar-width:auto on the root element</title>
+<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com" />
+<link rel="help" href="https://www.w3.org/TR/css-scrollbars-1/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+ :root {
+ /* CSS scrollbar properties applied to the root element
+ will be propagated to the viewport. */
+ scrollbar-width: auto;
+ /* Use scrollbar-gutter to reserve space for the scrollbar. */
+ scrollbar-gutter: stable;
+ }
+
+ :root,
+ body {
+ margin: 0;
+ padding: 0;
+ }
+
+ #content {
+ height: 10vh;
+ width: 100%;
+ background: lightsalmon;
+ }
+
+ #expander {
+ /* force vertical scroll */
+ height: 200vh;
+ width: 300px;
+ background: gray;
+ }
+</style>
+
+<body>
+
+ <div id="content"></div>
+
+ <div id="expander"></div>
+
+ <script type="text/javascript">
+ setup({ explicit_done: true });
+
+ test(function () {
+ let root = document.documentElement;
+ let body = document.body;
+ let content = document.getElementById('content');
+
+ assert_less_than(root.offsetWidth, window.innerWidth, "viewport has a scrollbar");
+ assert_equals(body.offsetWidth, root.offsetWidth, "body matches root");
+ assert_equals(content.offsetWidth, body.offsetWidth, "content matches body");
+ }, "viewport displays a scrollbar");
+
+ done();
+
+ </script>
+</body>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-006.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-006.html
new file mode 100644
index 0000000000..488e24d554
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-006.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Scrollbars: scrollbar-width:thin on the root element</title>
+<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com" />
+<link rel="help" href="https://www.w3.org/TR/css-scrollbars-1/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+ :root {
+ /* CSS scrollbar properties applied to the root element
+ will be propagated to the viewport. */
+ scrollbar-width: thin;
+ /* Use scrollbar-gutter to reserve space for the scrollbar. */
+ scrollbar-gutter: stable;
+ }
+
+ :root,
+ body {
+ margin: 0;
+ padding: 0;
+ }
+
+ #content {
+ height: 10vh;
+ width: 100%;
+ background: lightsalmon;
+ }
+
+ #expander {
+ /* force vertical scroll */
+ height: 200vh;
+ width: 300px;
+ background: gray;
+ }
+</style>
+
+<body>
+
+ <div id="content"></div>
+
+ <div id="expander"></div>
+
+ <script type="text/javascript">
+ setup({ explicit_done: true });
+
+ test(function () {
+ let root = document.documentElement;
+ let body = document.body;
+ let content = document.getElementById('content');
+
+ assert_less_than(root.offsetWidth, window.innerWidth, "viewport has a scrollbar");
+ assert_equals(body.offsetWidth, root.offsetWidth, "body matches root");
+ assert_equals(content.offsetWidth, body.offsetWidth, "content matches body");
+ }, "viewport displays a scrollbar");
+
+ done();
+
+ </script>
+</body>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-007.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-007.html
new file mode 100644
index 0000000000..500c7ef090
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-007.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Scrollbars: scrollbar-width:none on the root element</title>
+<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com" />
+<link rel="help" href="https://www.w3.org/TR/css-scrollbars-1/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+ :root {
+ /* CSS scrollbar properties applied to the root element
+ will be propagated to the viewport. */
+ scrollbar-width: none;
+ /* Use scrollbar-gutter to reserve space for the scrollbar. */
+ scrollbar-gutter: stable;
+ }
+
+ :root,
+ body {
+ margin: 0;
+ padding: 0;
+ }
+
+ #content {
+ height: 10vh;
+ width: 100%;
+ background: lightsalmon;
+ }
+
+ #expander {
+ /* force vertical scroll */
+ height: 200vh;
+ width: 300px;
+ background: gray;
+ }
+</style>
+
+<body>
+
+ <div id="content"></div>
+
+ <div id="expander"></div>
+
+ <script type="text/javascript">
+ setup({ explicit_done: true });
+
+ test(function () {
+ let root = document.documentElement;
+ let body = document.body;
+ let content = document.getElementById('content');
+
+ assert_equals(root.offsetWidth, window.innerWidth, "viewport does not show a scrollbar");
+ assert_equals(body.offsetWidth, root.offsetWidth, "body matches root");
+ assert_equals(content.offsetWidth, body.offsetWidth, "content matches body");
+ }, "viewport does not display a scrollbar");
+
+ done();
+
+ </script>
+</body>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-008.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-008.html
new file mode 100644
index 0000000000..91e2cc7f06
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-008.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Scrollbars: scrollbar-width on the body is not propagated</title>
+<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com" />
+<link rel="help" href="https://www.w3.org/TR/css-scrollbars-1/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+ :root {
+ /* CSS scrollbar properties applied to the root element
+ will be propagated to the viewport. */
+ scrollbar-width: thin;
+ overflow: visible;
+ }
+
+ body {
+ /* overflow is propagated as well */
+ overflow: scroll;
+ /* but CSS scrollbar properties applied to the body are not propagated */
+ scrollbar-width: none;
+ }
+
+ :root,
+ body {
+ margin: 0;
+ padding: 0;
+ }
+
+ #content {
+ height: 10vh;
+ width: 100%;
+ background: lightsalmon;
+ }
+
+ #expander {
+ /* force vertical scroll */
+ height: 200vh;
+ width: 300px;
+ background: gray;
+ }
+</style>
+
+<body>
+
+ <div id="content"></div>
+
+ <div id="expander"></div>
+
+ <script type="text/javascript">
+ setup({ explicit_done: true });
+
+ test(function () {
+ let root = document.documentElement;
+ let body = document.body;
+ let content = document.getElementById('content');
+
+ assert_less_than(root.offsetWidth, window.innerWidth, "viewport has a scrollbar");
+ assert_equals(body.offsetWidth, root.offsetWidth, "body matches root");
+ assert_equals(content.offsetWidth, body.offsetWidth, "content matches body");
+ }, "viewport displays a scrollbar");
+
+ done();
+
+ </script>
+</body>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-009.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-009.html
new file mode 100644
index 0000000000..494ffe3446
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-009.html
@@ -0,0 +1,60 @@
+<meta charset="utf-8">
+<title>CSS Scrollbars: scrollbar-width on the body is not propagated quirks mode</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" />
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+ :root {
+ /* CSS scrollbar properties applied to the root element
+ will be propagated to the viewport. */
+ scrollbar-width: thin;
+ overflow: visible;
+ }
+
+ body {
+ /* overflow is propagated as well */
+ overflow: scroll;
+ /* but CSS scrollbar properties applied to the body are not propagated */
+ scrollbar-width: none;
+ }
+
+ :root,
+ body {
+ margin: 0;
+ padding: 0;
+ }
+
+ #content {
+ height: 10vh;
+ width: 100%;
+ background: lightsalmon;
+ }
+
+ #expander {
+ /* force vertical scroll */
+ height: 200vh;
+ width: 300px;
+ background: gray;
+ }
+</style>
+
+<body>
+
+ <div id="content"></div>
+
+ <div id="expander"></div>
+
+ <script>
+ test(function () {
+ let root = document.documentElement;
+ let body = document.body;
+ let content = document.getElementById('content');
+
+ assert_less_than(root.offsetWidth, window.innerWidth, "viewport has a scrollbar");
+ assert_equals(body.offsetWidth, root.offsetWidth, "body matches root");
+ assert_equals(content.offsetWidth, body.offsetWidth, "content matches body");
+ }, "viewport displays a scrollbar");
+ </script>
+</body>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-010.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-010.tentative.html
new file mode 100644
index 0000000000..ea11703067
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-010.tentative.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Scrollbars: scrollbar-width auto on the root defers to ::-webkit-scrollbar on the root</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" />
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+ :root {
+ scrollbar-width: auto;
+ }
+
+ :root::-webkit-scrollbar {
+ display: none;
+ }
+
+ /* This is so that browsers that don't implement the WebKit prefix still pass the test */
+ @supports not selector(::-webkit-scrollbar) {
+ :root {
+ overflow: hidden;
+ }
+ }
+
+ :root,
+ body {
+ margin: 0;
+ padding: 0;
+ }
+
+ #content {
+ height: 10vh;
+ width: 100%;
+ background: lightsalmon;
+ }
+
+ #expander {
+ /* force vertical scroll */
+ height: 200vh;
+ width: 300px;
+ background: gray;
+ }
+</style>
+
+<body>
+
+ <div id="content"></div>
+
+ <div id="expander"></div>
+
+ <script>
+ test(function () {
+ let root = document.documentElement;
+ let body = document.body;
+ let content = document.getElementById('content');
+
+ assert_equals(root.offsetWidth, window.innerWidth, "viewport does not show a scrollbar");
+ assert_equals(body.offsetWidth, root.offsetWidth, "body matches root");
+ assert_equals(content.offsetWidth, body.offsetWidth, "content matches body");
+ }, "scrollbar-width auto on the root defers to ::-webkit-scrollbar");
+ </script>
+</body>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-011.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-011.tentative.html
new file mode 100644
index 0000000000..a5f60dc28b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-011.tentative.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Scrollbars: scrollbar-width thin on the root overrides ::-webkit-scrollbar on the root</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" />
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+ :root {
+ scrollbar-width: thin;
+ }
+
+ :root::-webkit-scrollbar {
+ display: none;
+ }
+
+ :root,
+ body {
+ margin: 0;
+ padding: 0;
+ }
+
+ #content {
+ height: 10vh;
+ width: 100%;
+ background: lightsalmon;
+ }
+
+ #expander {
+ /* force vertical scroll */
+ height: 200vh;
+ width: 300px;
+ background: gray;
+ }
+</style>
+
+<body>
+
+ <div id="content"></div>
+
+ <div id="expander"></div>
+
+ <script>
+ test(function () {
+ let root = document.documentElement;
+ let body = document.body;
+ let content = document.getElementById('content');
+
+ assert_less_than(root.offsetWidth, window.innerWidth, "viewport has a scrollbar");
+ assert_equals(body.offsetWidth, root.offsetWidth, "body matches root");
+ assert_equals(content.offsetWidth, body.offsetWidth, "content matches body");
+ }, "scrollbar-width thin on the root overrides ::-webkit-scrollbar");
+ </script>
+</body>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-012.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-012.tentative.html
new file mode 100644
index 0000000000..a685d6c05b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-012.tentative.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Scrollbars: scrollbar-width none on the root overrides ::-webkit-scrollbar on the root</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" />
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+ :root {
+ scrollbar-width: none;
+ }
+
+ :root::-webkit-scrollbar {
+ width: 20px;
+ background-color: lightgray;
+ }
+
+ :root,
+ body {
+ margin: 0;
+ padding: 0;
+ }
+
+ #content {
+ height: 10vh;
+ width: 100%;
+ background: lightsalmon;
+ }
+
+ #expander {
+ /* force vertical scroll */
+ height: 200vh;
+ width: 300px;
+ background: gray;
+ }
+</style>
+
+<body>
+
+ <div id="content"></div>
+
+ <div id="expander"></div>
+
+ <script>
+ test(function () {
+ let root = document.documentElement;
+ let body = document.body;
+ let content = document.getElementById('content');
+
+ assert_equals(root.offsetWidth, window.innerWidth, "viewport does not show a scrollbar");
+ assert_equals(body.offsetWidth, root.offsetWidth, "body matches root");
+ assert_equals(content.offsetWidth, body.offsetWidth, "content matches body");
+ }, "scrollbar-width none on the root overrides ::-webkit-scrollbar");
+ </script>
+</body>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-013.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-013.tentative.html
new file mode 100644
index 0000000000..f6460a4797
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-013.tentative.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Scrollbars: scrollbar-width thin on the root overridess ::-webkit-scrollbar</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" />
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+ :root {
+ scrollbar-width: thin;
+ }
+
+ ::-webkit-scrollbar {
+ display: none;
+ }
+
+ :root,
+ body {
+ margin: 0;
+ padding: 0;
+ }
+
+ #content {
+ height: 10vh;
+ width: 100%;
+ background: lightsalmon;
+ }
+
+ #expander {
+ /* force vertical scroll */
+ height: 200vh;
+ width: 300px;
+ background: gray;
+ }
+</style>
+
+<body>
+
+ <div id="content"></div>
+
+ <div id="expander"></div>
+
+ <script>
+ test(function () {
+ let root = document.documentElement;
+ let body = document.body;
+ let content = document.getElementById('content');
+
+ assert_less_than(root.offsetWidth, window.innerWidth, "viewport has a scrollbar");
+ assert_equals(body.offsetWidth, root.offsetWidth, "body matches root");
+ assert_equals(content.offsetWidth, body.offsetWidth, "content matches body");
+ }, "scrollbar-width thin on the root overridess ::-webkit-scrollbar");
+ </script>
+</body>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-014.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-014.tentative.html
new file mode 100644
index 0000000000..b3702015d5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-014.tentative.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Scrollbars: scrollbar-width thin on the body doesn't override ::-webkit-scrollbar on root</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" />
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+ body {
+ scrollbar-width: thin;
+ }
+
+ :root::-webkit-scrollbar {
+ display: none;
+ }
+
+ /* This is so that browsers that don't implement the WebKit prefix still pass the test */
+ @supports not selector(::-webkit-scrollbar) {
+ :root {
+ overflow: hidden;
+ }
+ }
+
+ :root,
+ body {
+ margin: 0;
+ padding: 0;
+ }
+
+ #content {
+ height: 10vh;
+ width: 100%;
+ background: lightsalmon;
+ }
+
+ #expander {
+ /* force vertical scroll */
+ height: 200vh;
+ width: 300px;
+ background: gray;
+ }
+</style>
+
+<body>
+
+ <div id="content"></div>
+
+ <div id="expander"></div>
+
+ <script>
+ test(function () {
+ let root = document.documentElement;
+ let body = document.body;
+ let content = document.getElementById('content');
+
+ assert_equals(root.offsetWidth, window.innerWidth, "viewport does not show a scrollbar");
+ assert_equals(body.offsetWidth, root.offsetWidth, "body matches root");
+ assert_equals(content.offsetWidth, body.offsetWidth, "content matches body");
+ }, "scrollbar-width thin on the body doesn't override ::-webkit-scrollbar on root");
+ </script>
+</body>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-015.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-015.tentative.html
new file mode 100644
index 0000000000..88a6af27ba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-015.tentative.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Scrollbars: scrollbar-width on scrollable areas correctly interacts with ::-webkit-scrollbar</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" />
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+ .container {
+ overflow: auto;
+ height: 200px;
+ width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ }
+
+ .content {
+ height: 300px;
+ width: 100%;
+ background: lightsalmon;
+ }
+
+ .container.auto {
+ scrollbar-width: auto;
+ }
+
+ /* This is so that browsers that don't implement the WebKit prefix still pass the test */
+ @supports not selector(::-webkit-scrollbar) {
+ .container.auto {
+ overflow: hidden;
+ }
+ }
+
+ ::-webkit-scrollbar {
+ display: none;
+ }
+
+ .container.thin {
+ scrollbar-width: thin;
+ }
+</style>
+<script>
+ function performTest() {
+ setup({ explicit_done: true });
+
+ // ltr
+
+ test(function () {
+ let container = document.getElementById('container_auto');
+ let content = document.getElementById('content_auto');
+ assert_equals(container.scrollWidth, 200, "auto scrollWidth");
+ assert_equals(container.clientWidth, 200, "auto clientWidth");
+ assert_equals(container.offsetLeft, content.offsetLeft, "auto offsetLeft");
+ assert_equals(container.clientWidth, content.clientWidth, "auto clientWidth");
+ assert_equals(container.offsetWidth, content.offsetWidth, "auto offsetWidth");
+ }, "scrollbar-width auto defers to ::-webkit-scrollbar");
+
+ test(function () {
+ let container = document.getElementById('container_thin');
+ let content = document.getElementById('content_thin');
+ assert_less_than(container.scrollWidth, container.offsetWidth, "thin scrollWidth");
+ assert_less_than(container.clientWidth, container.offsetWidth, "thin clientWidth");
+ assert_equals(container.offsetLeft, content.offsetLeft, "thin offsetLeft");
+ assert_equals(container.clientWidth, content.clientWidth, "thin clientWidth");
+ assert_not_equals(container.offsetWidth, content.offsetWidth, "thin offsetWidth");
+ }, "scrollbar-width thin overrides ::-webkit-scrollbar");
+
+ done();
+ }
+</script>
+
+<body onload="performTest()">
+
+ Test scrollbar-width: vertical scrollbar
+
+ <div class="container auto" id="container_auto">
+ <div class="content" id="content_auto">auto</div>
+ </div>
+
+ <div class="container thin" id="container_thin">
+ <div class="content" id="content_thin">thin</div>
+ </div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-016.tentative.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-016.tentative.html
new file mode 100644
index 0000000000..7d64131743
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-016.tentative.html
@@ -0,0 +1,114 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Scrollbars: scrollbar-width on scrollable areas correctly interacts with ::-webkit-scrollbar on container</title>
+<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" />
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+ .container {
+ overflow: auto;
+ height: 200px;
+ width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ }
+
+ .content {
+ height: 300px;
+ width: 100%;
+ background: lightsalmon;
+ }
+
+ .container.auto {
+ scrollbar-width: auto;
+ }
+
+ .container.auto::-webkit-scrollbar {
+ display: none;
+ }
+
+ /* This is so that browsers that don't implement the WebKit prefix still pass the test */
+ @supports not selector(::-webkit-scrollbar) {
+ .container.auto {
+ overflow: hidden;
+ }
+ }
+
+ .container.thin {
+ scrollbar-width: thin;
+ }
+
+ .container.thin::-webkit-scrollbar {
+ display: none;
+ }
+
+ .container.none {
+ scrollbar-width: none;
+ }
+
+ .container.none::-webkit-scrollbar {
+ width: 20px;
+ background-color: lightgray;
+ }
+</style>
+<script>
+ function performTest() {
+ setup({ explicit_done: true });
+
+ // ltr
+
+ test(function () {
+ let container = document.getElementById('container_auto');
+ let content = document.getElementById('content_auto');
+ assert_equals(container.scrollWidth, 200, "auto scrollWidth");
+ assert_equals(container.clientWidth, 200, "auto clientWidth");
+ assert_equals(container.offsetLeft, content.offsetLeft, "auto offsetLeft");
+ assert_equals(container.clientWidth, content.clientWidth, "auto clientWidth");
+ assert_equals(container.offsetWidth, content.offsetWidth, "auto offsetWidth");
+ }, "scrollbar-width auto defers to ::-webkit-scrollbar");
+
+ test(function () {
+ let container = document.getElementById('container_thin');
+ let content = document.getElementById('content_thin');
+ assert_less_than(container.scrollWidth, container.offsetWidth, "thin scrollWidth");
+ assert_less_than(container.clientWidth, container.offsetWidth, "thin clientWidth");
+ assert_equals(container.offsetLeft, content.offsetLeft, "thin offsetLeft");
+ assert_equals(container.clientWidth, content.clientWidth, "thin clientWidth");
+ assert_not_equals(container.offsetWidth, content.offsetWidth, "thin offsetWidth");
+ }, "scrollbar-width thin overrides ::-webkit-scrollbar");
+
+ test(function () {
+ let container = document.getElementById('container_none');
+ let content = document.getElementById('content_none');
+ assert_equals(container.scrollWidth, 200, "none scrollWidth");
+ assert_equals(container.clientWidth, 200, "none clientWidth");
+ assert_equals(container.offsetLeft, content.offsetLeft, "none offsetLeft");
+ assert_equals(container.clientWidth, content.clientWidth, "none clientWidth");
+ assert_equals(container.offsetWidth, content.offsetWidth, "none offsetWidth");
+ }, "scrollbar-width none overrides ::-webkit-scrollbar");
+
+ done();
+ }
+</script>
+
+<body onload="performTest()">
+
+ Test scrollbar-width: vertical scrollbar
+
+ <div class="container auto" id="container_auto">
+ <div class="content" id="content_auto">auto</div>
+ </div>
+
+ <div class="container thin" id="container_thin">
+ <div class="content" id="content_thin">thin</div>
+ </div>
+
+ <div class="container none" id="container_none">
+ <div class="content" id="content_none">none</div>
+ </div>
+
+</body>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-keywords.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-keywords.html
new file mode 100644
index 0000000000..94ccd6ef6d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-keywords.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<link rel="author" title="Xidorn Quan" href="mailto:me@upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#scrollbar-width">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+ .area {
+ width: 100px;
+ height: 100px;
+ overflow: auto;
+ display: inline-block;
+ }
+ .area::before {
+ content: "";
+ display: block;
+ width: 200px;
+ height: 200px;
+ }
+</style>
+<div id="scrollbar-none" class="area" style="scrollbar-width: none"></div>
+<div id="scrollbar-thin" class="area" style="scrollbar-width: thin"></div>
+<div id="scrollbar-auto" class="area" style="scrollbar-width: auto"></div>
+<script>
+test(function() {
+ let elem = document.getElementById("scrollbar-none");
+ assert_equals(elem.clientWidth, 100);
+ assert_equals(elem.clientHeight, 100);
+}, "scrollbar-width: none should have no scrollbar");
+
+test(function() {
+ let thin = document.getElementById("scrollbar-thin");
+ let auto = document.getElementById("scrollbar-auto");
+ assert_greater_than_equal(thin.clientWidth, auto.clientWidth);
+ assert_greater_than_equal(thin.clientHeight, auto.clientHeight);
+}, "scrollbar-width: thin should have scrollbar no wider than auto");
+</script>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-001-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-001-mis-ref.html
new file mode 100644
index 0000000000..5f7d95bc6f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-001-mis-ref.html
@@ -0,0 +1,50 @@
+<!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;
+ }
+
+ .content.plain {
+ background: red;
+ }
+
+ .content.gradient {
+ background: linear-gradient(135deg, red, blue);
+ }
+</style>
+<div id="one" class="container thin">
+ <div class="content plain"></div>
+</div>
+<div id="two" class="container auto">
+ <div class="content plain"></div>
+</div>
+<div id="three" class="container auto">
+ <div class="content plain"></div>
+</div>
+<div id="four" class="container none">
+ <div class="content gradient"></div>
+</div>
+<div id="five" class="container none">
+ <div class="content gradient"></div>
+</div>
+<div id="six" class="container thin">
+ <div class="content gradient"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-001-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-001-ref.html
new file mode 100644
index 0000000000..42295b1fb9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-001-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 thin">
+ <div class="content plain"></div>
+</div>
+<div id="two" class="container auto">
+ <div class="content plain"></div>
+</div>
+<div id="three" class="container auto">
+ <div class="content plain"></div>
+</div>
+<div id="four" class="container none">
+ <div class="content gradient"></div>
+</div>
+<div id="five" class="container none">
+ <div class="content gradient"></div>
+</div>
+<div id="six" class="container thin">
+ <div class="content gradient"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-001.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-001.html
new file mode 100644
index 0000000000..320af26464
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-001.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>CSS Scrollbars: paint test when updating scrollbar-width, with scrolling content</title>
+<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com" />
+<link rel="match" href="scrollbar-width-paint-001-ref.html" />
+<link rel="mismatch" href="scrollbar-width-paint-001-mis-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';
+
+ takeScreenshot();
+ }));
+</script>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-002-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-002-mis-ref.html
new file mode 100644
index 0000000000..dd3a817908
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-002-mis-ref.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<style>
+ body {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ .container {
+ scrollbar-gutter: stable;
+ overflow: scroll;
+ flex: 0 0;
+ height: 200px;
+ min-width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ }
+
+ .content {
+ height: 100%;
+ width: 100%;
+ }
+
+ .content.plain {
+ background: red;
+ }
+
+ .content.gradient {
+ background: linear-gradient(135deg, red, blue);
+ }
+</style>
+<div id="one" class="container thin">
+ <div class="content plain"></div>
+</div>
+<div id="two" class="container auto">
+ <div class="content plain"></div>
+</div>
+<div id="three" class="container auto">
+ <div class="content plain"></div>
+</div>
+<div id="four" class="container none">
+ <div class="content gradient"></div>
+</div>
+<div id="five" class="container none">
+ <div class="content gradient"></div>
+</div>
+<div id="six" class="container thin">
+ <div class="content gradient"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-002-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-002-ref.html
new file mode 100644
index 0000000000..001495767f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-002-ref.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<style>
+ body {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ .container {
+ scrollbar-gutter: stable;
+ overflow: scroll;
+ flex: 0 0;
+ height: 200px;
+ min-width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ }
+
+ .content {
+ height: 100%;
+ width: 100%;
+ }
+
+ .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 thin">
+ <div class="content plain"></div>
+</div>
+<div id="two" class="container auto">
+ <div class="content plain"></div>
+</div>
+<div id="three" class="container auto">
+ <div class="content plain"></div>
+</div>
+<div id="four" class="container none">
+ <div class="content gradient"></div>
+</div>
+<div id="five" class="container none">
+ <div class="content gradient"></div>
+</div>
+<div id="six" class="container thin">
+ <div class="content gradient"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-002.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-002.html
new file mode 100644
index 0000000000..a163aef37f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-002.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>CSS Scrollbars: paint test when updating scrollbar-width, with overflow:auto</title>
+<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com" />
+<link rel="match" href="scrollbar-width-paint-002-ref.html" />
+<link rel="mismatch" href="scrollbar-width-paint-002-mis-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: scroll;
+ flex: 0 0;
+ height: 200px;
+ min-width: 200px;
+ margin: 1px;
+ padding: 0px;
+ border: none;
+ background: deepskyblue;
+ }
+
+ .content {
+ height: 100%;
+ width: 100%;
+ }
+
+ .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';
+
+ takeScreenshot();
+ }));
+</script>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-003-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-003-ref.html
new file mode 100644
index 0000000000..b7acab4a8f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-003-ref.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<style>
+ :root { overflow: scroll; scrollbar-color: green green; }
+</style>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-003.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-003.html
new file mode 100644
index 0000000000..516c620551
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-003.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>CSS Scrollbars: scrollbar-width correctly updates with overflow: scroll</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="match" href="scrollbar-width-paint-003-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;
+ scrollbar-color: green green;
+ }
+</style>
+<script>
+ requestAnimationFrame(() => requestAnimationFrame(() => {
+ document.documentElement.style.scrollbarWidth = 'auto';
+ takeScreenshot();
+ }));
+</script>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-004-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-004-mis-ref.html
new file mode 100644
index 0000000000..f4d7f263ad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-004-mis-ref.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<style>
+ :root { overflow: scroll; scrollbar-width: none; }
+</style>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-004-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-004-ref.html
new file mode 100644
index 0000000000..b2b2d7f284
--- /dev/null
+++ b/testing/web-platform/tests/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/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-004.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-004.html
new file mode 100644
index 0000000000..6f5b4d300c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-004.html
@@ -0,0 +1,21 @@
+<!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="mismatch" href="scrollbar-width-paint-004-mis-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/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-005-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-005-ref.html
new file mode 100644
index 0000000000..e5c325b854
--- /dev/null
+++ b/testing/web-platform/tests/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/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-005.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-005.html
new file mode 100644
index 0000000000..9ce46d296a
--- /dev/null
+++ b/testing/web-platform/tests/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/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-006-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-006-mis-ref.html
new file mode 100644
index 0000000000..c3f156a421
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-006-mis-ref.html
@@ -0,0 +1,50 @@
+<!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;
+ }
+
+ .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/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-006-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-006-ref.html
new file mode 100644
index 0000000000..7314307353
--- /dev/null
+++ b/testing/web-platform/tests/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/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-006.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-006.html
new file mode 100644
index 0000000000..2273575950
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-006.html
@@ -0,0 +1,90 @@
+<!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="mismatch" href="scrollbar-width-paint-006-mis-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>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-parsing.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-parsing.html
new file mode 100644
index 0000000000..2d45fe230a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-parsing.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Overflow: parsing scrollbar-width declarations</title>
+<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/>
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars/"/>
+<meta name="assert" content="Parsing scrollbar-width declarations">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+
+<script>
+
+ test_valid_value("scrollbar-width", "auto");
+ test_valid_value("scrollbar-width", "thin");
+ test_valid_value("scrollbar-width", "none");
+
+ test_invalid_value("scrollbar-width", "");
+ test_invalid_value("scrollbar-width", "auto none");
+ test_invalid_value("scrollbar-width", "thin auto");
+ test_invalid_value("scrollbar-width", "none thin");
+ test_invalid_value("scrollbar-width", "auto thin none");
+ test_invalid_value("scrollbar-width", "tiny");
+ test_invalid_value("scrollbar-width", "enormous");
+ test_invalid_value("scrollbar-width", "12px");
+ test_invalid_value("scrollbar-width", "3em");
+ test_invalid_value("scrollbar-width", "20%");
+ test_invalid_value("scrollbar-width", "#FF0000");
+ test_invalid_value("scrollbar-width", "red green");
+
+</script>
diff --git a/testing/web-platform/tests/css/css-scrollbars/support/viewport-scrollbar-body-frame.html b/testing/web-platform/tests/css/css-scrollbars/support/viewport-scrollbar-body-frame.html
new file mode 100644
index 0000000000..8dacffefb6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/support/viewport-scrollbar-body-frame.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<style>
+body {
+ scrollbar-color: yellow blue;
+}
+html, body {
+ margin: 0;
+ padding: 0;
+}
+#inner {
+ width: 400px;
+ height: 400px;
+}
+</style>
+<body>
+<div id="inner"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-scrollbars/support/viewport-scrollbar-frame.html b/testing/web-platform/tests/css/css-scrollbars/support/viewport-scrollbar-frame.html
new file mode 100644
index 0000000000..04a4a2fa2d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/support/viewport-scrollbar-frame.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<style>
+html {
+ scrollbar-color: yellow blue;
+}
+html, body {
+ margin: 0;
+ padding: 0;
+}
+#inner {
+ width: 400px;
+ height: 400px;
+}
+</style>
+<div id="inner"></div>
diff --git a/testing/web-platform/tests/css/css-scrollbars/textarea-scrollbar-width-none-ref.html b/testing/web-platform/tests/css/css-scrollbars/textarea-scrollbar-width-none-ref.html
new file mode 100644
index 0000000000..9f505dd7f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/textarea-scrollbar-width-none-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Reference</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style>
+ textarea {
+ overflow: hidden;
+ white-space: pre;
+ }
+</style>
+<textarea cols="10" rows="10"></textarea>
+<script>
+ let textarea = document.querySelector("textarea");
+ textarea.value = ('X'.repeat(100) + '\n').repeat(100);
+</script>
diff --git a/testing/web-platform/tests/css/css-scrollbars/textarea-scrollbar-width-none.html b/testing/web-platform/tests/css/css-scrollbars/textarea-scrollbar-width-none.html
new file mode 100644
index 0000000000..dcfaf5b627
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/textarea-scrollbar-width-none.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Test: scrollbar-width should apply on &lt;textarea&gt;</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#scrollbar-width">
+<link rel="match" href="textarea-scrollbar-width-none-ref.html">
+<style>
+ textarea {
+ scrollbar-width: none;
+ white-space: pre;
+ }
+</style>
+<textarea cols="10" rows="10"></textarea>
+<script>
+ let textarea = document.querySelector("textarea");
+ textarea.value = ('X'.repeat(100) + '\n').repeat(100);
+</script>
diff --git a/testing/web-platform/tests/css/css-scrollbars/transparent-on-root-ref.html b/testing/web-platform/tests/css/css-scrollbars/transparent-on-root-ref.html
new file mode 100644
index 0000000000..a5b2de4f00
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/transparent-on-root-ref.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test: non-opaque scrollbar-color should work on the root</title>
+<style>
+:root {
+ background-color: black;
+}
+</style>
diff --git a/testing/web-platform/tests/css/css-scrollbars/transparent-on-root.html b/testing/web-platform/tests/css/css-scrollbars/transparent-on-root.html
new file mode 100644
index 0000000000..fcab71127d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/transparent-on-root.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test: non-opaque scrollbar-color should work on the root</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#scrollbar-color-properties">
+<link rel="match" href="transparent-on-root-ref.html">
+<style>
+:root {
+ overflow: scroll;
+ scrollbar-color: transparent transparent;
+ background-color: black;
+}
+</style>
diff --git a/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-body-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-body-mis-ref.html
new file mode 100644
index 0000000000..f3ad07fe56
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-body-mis-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Reference: unstyled scrollbars</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#scrollbar-color-properties">
+<style>
+#outer {
+ border: 1px solid black;
+ width: 200px; height: 200px;
+ overflow: scroll;
+ scrollbar-color: yellow blue;
+}
+#inner {
+ width: 400px; height: 400px;
+}
+</style>
+<p>Test passes if the scrollbars in the following box are NOT styled:</p>
+<div id="outer">
+ <div id="inner">
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-body-ref.html b/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-body-ref.html
new file mode 100644
index 0000000000..4e07903e2c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-body-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Reference: unstyled scrollbars</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#scrollbar-color-properties">
+<style>
+#outer {
+ border: 1px solid black;
+ width: 200px; height: 200px;
+ overflow: scroll;
+}
+#inner {
+ width: 400px; height: 400px;
+}
+</style>
+<p>Test passes if the scrollbars in the following box are NOT styled:</p>
+<div id="outer">
+ <div id="inner">
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-body.html b/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-body.html
new file mode 100644
index 0000000000..5afd103892
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-body.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Test: scrollbar style on body element should not be propagated to the viewport</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#scrollbar-color-properties">
+<link rel="match" href="viewport-scrollbar-body-ref.html">
+<link rel="mismatch" href="viewport-scrollbar-body-mis-ref.html">
+<style>
+iframe {
+ border: 1px solid black;
+ width: 200px; height: 200px;
+}
+</style>
+<p>Test passes if the scrollbars in the following box are NOT styled:</p>
+<iframe src="support/viewport-scrollbar-body-frame.html"></iframe>
diff --git a/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-mis-ref.html b/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-mis-ref.html
new file mode 100644
index 0000000000..05babbd2dd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-mis-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Reference: styled scrollbars</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#scrollbar-color-properties">
+<style>
+#outer {
+ border: 1px solid black;
+ width: 200px; height: 200px;
+ overflow: scroll;
+}
+#inner {
+ width: 400px; height: 400px;
+}
+</style>
+<p>Test passes if the scrollbars in the following box are styled:</p>
+<div id="outer">
+ <div id="inner">
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-ref.html b/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-ref.html
new file mode 100644
index 0000000000..d6df3b49e5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Reference: styled scrollbars</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#scrollbar-color-properties">
+<style>
+#outer {
+ border: 1px solid black;
+ width: 200px; height: 200px;
+ overflow: scroll;
+ scrollbar-color: yellow blue;
+}
+#inner {
+ width: 400px; height: 400px;
+}
+</style>
+<p>Test passes if the scrollbars in the following box are styled:</p>
+<div id="outer">
+ <div id="inner">
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar.html b/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar.html
new file mode 100644
index 0000000000..aac43f12e4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Test: scrollbar style on root element should be propagated to the viewport</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-scrollbars-1/#scrollbar-color-properties">
+<link rel="match" href="viewport-scrollbar-ref.html">
+<link rel="mismatch" href="viewport-scrollbar-mis-ref.html">
+<style>
+iframe {
+ border: 1px solid black;
+ width: 200px; height: 200px;
+}
+</style>
+<p>Test passes if the scrollbars in the following box are styled:</p>
+<iframe src="support/viewport-scrollbar-frame.html"></iframe>