From 834b6de5d565c51073e851483e82c0c106fd128f Mon Sep 17 00:00:00 2001
From: Felipe Erias <felipeerias@igalia.com>
Date: Fri, 23 Apr 2021 10:16:46 +0000
Subject: [PATCH] Bug 1701666 [wpt PR 28280] - Initial implementation of
 scrollbar-width, a=testonly

Automatic update from web-platform-tests
Initial implementation of scrollbar-width

ComputedStyle::HasCustomScrollbarStyle() returns true if a custom
style for the scrollbar has been set via ::-webkit-scrollbar and
the value of scrollbar-width has not been changed from the
default. This replaces HasPseudoElementStyle(kPseudoIdScrollbar)
so the standard properties for styling scrollbars take
precedence over the non-standard method.

For convenience, the method Scrollbar::CSSScrollbarWidth()
returns the value of the scrollbar-width property in that
scrollbar's style.

Scrollbar themes take scrollbar-width into account when
calculating a scrollbar's thickness, margin, etc.

When scrollbar-width is "none", scrollbar themes simply return
a thickness of 0 to hide the scrollbar.

WebThemeEngine::ScrollbarStyle includes the thickness and margin
values for the thin variant.

ScrollbarThemeMac uses NSRegularControlSize and
NSSmallControlSize to size and display the appropriate type of
scrollbar for the default and thin variants.

ScrollbarThemeOverlay stores the thickness and margin for the
thin variant, although at the moment these values are the same
as the default (pending changes to WebThemeEngine). The same
applies to the ScrollbarThemeOverlayMobile subclass.

ScrollbarThemeAura simply scales the default scrollbar by a 2/3
ratio to paint the thin variant. In the future, the theme should
include specific width values for this variant. Perhaps it would
also be desirable to use a different set of graphic elements.

WPT tests are included.

Bug: 891944
Change-Id: I2d451f07de5a16e6cada8a68ae01da7358e8652a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2681340
Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org>
Reviewed-by: Philip Rogers <pdr@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Kentaro Hara <haraken@chromium.org>
Commit-Queue: Felipe Erias <felipeerias@igalia.com>
Cr-Commit-Position: refs/heads/master@{#872500}

--

wpt-commits: f68f2e6bbe1c50a30e690243b64906f2a490e515
wpt-pr: 28280
---
 .../css-scrollbars/scrollbar-width-001.html   | 175 ++++++++++++++++++
 .../css-scrollbars/scrollbar-width-002.html   | 168 +++++++++++++++++
 .../css-scrollbars/scrollbar-width-003.html   | 155 ++++++++++++++++
 .../css-scrollbars/scrollbar-width-004.html   | 155 ++++++++++++++++
 .../css-scrollbars/scrollbar-width-005.html   |  61 ++++++
 .../css-scrollbars/scrollbar-width-006.html   |  61 ++++++
 .../css-scrollbars/scrollbar-width-007.html   |  61 ++++++
 .../css-scrollbars/scrollbar-width-008.html   |  66 +++++++
 .../scrollbar-width-paint-001-ref.html        |  62 +++++++
 .../scrollbar-width-paint-001.html            |  80 ++++++++
 .../scrollbar-width-paint-002-ref.html        |  62 +++++++
 .../scrollbar-width-paint-002.html            |  80 ++++++++
 12 files changed, 1186 insertions(+)
 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-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-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-002.html

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 000000000000..af50cd25215d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-001.html
@@ -0,0 +1,175 @@
+<!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 so there is always space reserved
+     for the scrollbar, even when it is of the overlay kind. */
+  .container {
+    scrollbar-gutter: always;
+    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 000000000000..89a5d772182d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-002.html
@@ -0,0 +1,168 @@
+<!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 so there is always space reserved
+     for the scrollbar, even when it is of the overlay kind. */
+  .container {
+    scrollbar-gutter: always;
+    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 000000000000..e0c1e59d051f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-003.html
@@ -0,0 +1,155 @@
+<!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 so there is always space reserved
+     for the scrollbar, even when it is of the overlay kind. */
+  .container {
+    scrollbar-gutter: always;
+    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 000000000000..ee8bab0f0066
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-004.html
@@ -0,0 +1,155 @@
+<!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 so there is always space reserved
+     for the scrollbar, even when it is of the overlay kind. */
+  .container {
+    scrollbar-gutter: always;
+    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 000000000000..ea5f77afad0f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-005.html
@@ -0,0 +1,61 @@
+<!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 so there is always space reserved
+       for the scrollbar, even when it is of the overlay kind. */
+    scrollbar-gutter: always;
+  }
+
+  :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 000000000000..3b1cc0ba59d4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-006.html
@@ -0,0 +1,61 @@
+<!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 so there is always space reserved
+       for the scrollbar, even when it is of the overlay kind. */
+    scrollbar-gutter: always;
+  }
+
+  :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 000000000000..c40a7a8e99ac
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-007.html
@@ -0,0 +1,61 @@
+<!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 so there is always space reserved
+       for the scrollbar, even when it is of the overlay kind. */
+    scrollbar-gutter: always;
+  }
+
+  :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 000000000000..91e2cc7f0640
--- /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-paint-001-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-001-ref.html
new file mode 100644
index 000000000000..2e7d40d9a35f
--- /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: always;
+    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 000000000000..5318a24fb159
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-001.html
@@ -0,0 +1,80 @@
+<!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="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: always;
+    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-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-002-ref.html
new file mode 100644
index 000000000000..2d00629e6129
--- /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: always;
+    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 000000000000..4a18977a7e4e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-paint-002.html
@@ -0,0 +1,80 @@
+<!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="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: always;
+    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>