From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Fri, 19 Apr 2024 02:47:55 +0200
Subject: Adding upstream version 124.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../web-platform/tests/css/css-scrollbars/META.yml |   3 +
 .../tests/css/css-scrollbars/inheritance.html      |  22 +++
 .../css-scrollbars/input-scrollbar-color-ref.html  |   5 +
 .../css/css-scrollbars/input-scrollbar-color.html  |  12 ++
 .../scrollbar-color-001.tentative.html             |  62 ++++++++
 .../scrollbar-color-002.tentative.html             |  55 +++++++
 .../scrollbar-color-003.tentative.html             |  89 +++++++++++
 .../scrollbar-color-004.tentative.html             |  60 +++++++
 .../scrollbar-color-005.tentative.html             |  60 +++++++
 .../scrollbar-color-006-mis-ref.html               |  23 +++
 .../css-scrollbars/scrollbar-color-006-ref.html    |  24 +++
 .../scrollbar-color-006.tentative.html             |  33 ++++
 .../scrollbar-color-007-mis-ref.html               |  23 +++
 .../css-scrollbars/scrollbar-color-007-ref.html    |  24 +++
 .../scrollbar-color-007.tentative.html             |  33 ++++
 .../scrollbar-color-008-mis-ref.html               |  23 +++
 .../css-scrollbars/scrollbar-color-008-ref.html    |  24 +++
 .../scrollbar-color-008.tentative.html             |  36 +++++
 .../scrollbar-color-009-mis-ref.html               |   7 +
 .../css-scrollbars/scrollbar-color-009-ref.html    |  11 ++
 .../scrollbar-color-009.tentative.html             |  20 +++
 .../scrollbar-color-010-mis-ref.html               |   7 +
 .../css-scrollbars/scrollbar-color-010-ref.html    |  11 ++
 .../scrollbar-color-010.tentative.html             |  20 +++
 .../scrollbar-color-011-mis-ref.html               |  11 ++
 .../css-scrollbars/scrollbar-color-011-ref.html    |  12 ++
 .../css/css-scrollbars/scrollbar-color-011.html    |  17 ++
 .../css-scrollbars/scrollbar-color-012-ref.html    |  13 ++
 .../css/css-scrollbars/scrollbar-color-012.html    |  24 +++
 .../scrollbar-color-dynamic-1-mis-ref.html         |  31 ++++
 .../scrollbar-color-dynamic-1-ref.html             |  34 ++++
 .../css-scrollbars/scrollbar-color-dynamic-1.html  |  47 ++++++
 .../scrollbar-color-dynamic-2-mis-ref.html         |  20 +++
 .../scrollbar-color-dynamic-2-ref.html             |  23 +++
 .../css-scrollbars/scrollbar-color-dynamic-2.html  |  37 +++++
 .../scrollbar-color-dynamic-3-mis-ref.html         |  32 ++++
 .../scrollbar-color-dynamic-3-ref.html             |  35 +++++
 .../css-scrollbars/scrollbar-color-dynamic-3.html  |  47 ++++++
 .../scrollbar-color-dynamic-4-mis-ref.html         |  21 +++
 .../scrollbar-color-dynamic-4-ref.html             |  24 +++
 .../css-scrollbars/scrollbar-color-dynamic-4.html  |  37 +++++
 .../scrollbar-color-dynamic-5-mis-ref.html         |  31 ++++
 .../scrollbar-color-dynamic-5-ref.html             |  34 ++++
 .../css-scrollbars/scrollbar-color-dynamic-5.html  |  48 ++++++
 .../scrollbar-color-dynamic-6-mis-ref.html         |  32 ++++
 .../scrollbar-color-dynamic-6-ref.html             |  35 +++++
 .../css-scrollbars/scrollbar-color-dynamic-6.html  |  50 ++++++
 .../scrollbar-color-dynamic-7-mis-ref.html         |  31 ++++
 .../scrollbar-color-dynamic-7-ref.html             |  34 ++++
 .../css-scrollbars/scrollbar-color-dynamic-7.html  |  47 ++++++
 .../css-scrollbars/scrollbar-color-parsing.html    |  26 +++
 .../scrollbar-color-scheme-dynamic-1-ref.html      |  34 ++++
 .../scrollbar-color-scheme-dynamic-1.html          |  46 ++++++
 .../scrollbar-color-scheme-dynamic-2-ref.html      |  23 +++
 .../scrollbar-color-scheme-dynamic-2.html          |  36 +++++
 .../scrollbar-color-scheme-dynamic-3-ref.html      |  35 +++++
 .../scrollbar-color-scheme-dynamic-3.html          |  46 ++++++
 .../scrollbar-color-scheme-dynamic-4-ref.html      |  24 +++
 .../scrollbar-color-scheme-dynamic-4.html          |  36 +++++
 .../css/css-scrollbars/scrollbar-width-001.html    | 174 +++++++++++++++++++++
 .../css/css-scrollbars/scrollbar-width-002.html    | 167 ++++++++++++++++++++
 .../css/css-scrollbars/scrollbar-width-003.html    | 154 ++++++++++++++++++
 .../css/css-scrollbars/scrollbar-width-004.html    | 154 ++++++++++++++++++
 .../css/css-scrollbars/scrollbar-width-005.html    |  60 +++++++
 .../css/css-scrollbars/scrollbar-width-006.html    |  60 +++++++
 .../css/css-scrollbars/scrollbar-width-007.html    |  60 +++++++
 .../css/css-scrollbars/scrollbar-width-008.html    |  66 ++++++++
 .../css/css-scrollbars/scrollbar-width-009.html    |  60 +++++++
 .../scrollbar-width-010.tentative.html             |  62 ++++++++
 .../scrollbar-width-011.tentative.html             |  55 +++++++
 .../scrollbar-width-012.tentative.html             |  56 +++++++
 .../scrollbar-width-013.tentative.html             |  55 +++++++
 .../scrollbar-width-014.tentative.html             |  62 ++++++++
 .../scrollbar-width-015.tentative.html             |  87 +++++++++++
 .../scrollbar-width-016.tentative.html             | 114 ++++++++++++++
 .../css-scrollbars/scrollbar-width-keywords.html   |  38 +++++
 .../scrollbar-width-paint-001-mis-ref.html         |  50 ++++++
 .../scrollbar-width-paint-001-ref.html             |  62 ++++++++
 .../css-scrollbars/scrollbar-width-paint-001.html  |  81 ++++++++++
 .../scrollbar-width-paint-002-mis-ref.html         |  50 ++++++
 .../scrollbar-width-paint-002-ref.html             |  62 ++++++++
 .../css-scrollbars/scrollbar-width-paint-002.html  |  81 ++++++++++
 .../scrollbar-width-paint-003-ref.html             |   5 +
 .../css-scrollbars/scrollbar-width-paint-003.html  |  22 +++
 .../scrollbar-width-paint-004-mis-ref.html         |   5 +
 .../scrollbar-width-paint-004-ref.html             |   5 +
 .../css-scrollbars/scrollbar-width-paint-004.html  |  21 +++
 .../scrollbar-width-paint-005-ref.html             |   5 +
 .../css-scrollbars/scrollbar-width-paint-005.html  |  25 +++
 .../scrollbar-width-paint-006-mis-ref.html         |  50 ++++++
 .../scrollbar-width-paint-006-ref.html             |  62 ++++++++
 .../css-scrollbars/scrollbar-width-paint-006.html  |  90 +++++++++++
 .../css-scrollbars/scrollbar-width-parsing.html    |  30 ++++
 .../support/viewport-scrollbar-body-frame.html     |  18 +++
 .../support/viewport-scrollbar-frame.html          |  16 ++
 .../textarea-scrollbar-width-none-ref.html         |  16 ++
 .../textarea-scrollbar-width-none.html             |  18 +++
 .../css-scrollbars/transparent-on-root-ref.html    |   8 +
 .../css/css-scrollbars/transparent-on-root.html    |  14 ++
 .../viewport-scrollbar-body-mis-ref.html           |  22 +++
 .../viewport-scrollbar-body-ref.html               |  21 +++
 .../css-scrollbars/viewport-scrollbar-body.html    |  16 ++
 .../css-scrollbars/viewport-scrollbar-mis-ref.html |  21 +++
 .../css/css-scrollbars/viewport-scrollbar-ref.html |  22 +++
 .../css/css-scrollbars/viewport-scrollbar.html     |  16 ++
 105 files changed, 4198 insertions(+)
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/META.yml
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/inheritance.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/input-scrollbar-color-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/input-scrollbar-color.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-001.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-002.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-003.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-004.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-005.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-006-mis-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-006-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-006.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-007-mis-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-007-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-007.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-008-mis-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-008-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-008.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-009-mis-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-009-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-009.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-010-mis-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-010-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-010.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-011-mis-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-011-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-011.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-012-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-012.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-1-mis-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-1-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-1.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-2-mis-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-2-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-2.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-3-mis-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-3-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-3.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-4-mis-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-4-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-4.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-5-mis-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-5-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-5.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-6-mis-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-6-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-6.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-7-mis-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-7-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-dynamic-7.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-parsing.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-1-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-1.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-2-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-2.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-3-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-3.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-4-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-4.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-001.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-002.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-003.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-004.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-005.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-006.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-007.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-008.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-009.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-010.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-011.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-012.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-013.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-014.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-015.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-016.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-keywords.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-001-mis-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-001.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-002-mis-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-002.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-003.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-004-mis-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-004-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-004.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-005-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-005.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-006-mis-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-006-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-006.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-parsing.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/support/viewport-scrollbar-body-frame.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/support/viewport-scrollbar-frame.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/textarea-scrollbar-width-none-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/textarea-scrollbar-width-none.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/transparent-on-root-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/transparent-on-root.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-body-mis-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-body-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-body.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-mis-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar.html

(limited to 'testing/web-platform/tests/css/css-scrollbars')

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>
-- 
cgit v1.2.3