From 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Fri, 19 Apr 2024 03:47:29 +0200
Subject: Adding upstream version 115.8.0esr.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../web-platform/tests/css/css-scrollbars/META.yml |   3 +
 .../auto-scrollbar-inline-children.html            |  30 ++++
 .../tests/css/css-scrollbars/inheritance.html      |  22 +++
 .../multicol-in-orthogonal-writing-mode-crash.html |   8 +
 .../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-scrollbars/scrollbar-width-keywords.html   |  38 +++++
 .../scrollbar-width-paint-001-ref.html             |  62 ++++++++
 .../css-scrollbars/scrollbar-width-paint-001.html  |  80 ++++++++++
 .../scrollbar-width-paint-002-ref.html             |  62 ++++++++
 .../css-scrollbars/scrollbar-width-paint-002.html  |  80 ++++++++++
 .../scrollbar-width-paint-003-ref.html             |   5 +
 .../css-scrollbars/scrollbar-width-paint-003.html  |  22 +++
 .../css-scrollbars/scrollbar-width-parsing.html    |  30 ++++
 .../scrollbars-chrome-bug-001-ref.html             |  21 +++
 .../css-scrollbars/scrollbars-chrome-bug-001.html  |  34 ++++
 .../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-ref.html               |  21 +++
 .../css-scrollbars/viewport-scrollbar-body.html    |  15 ++
 .../css/css-scrollbars/viewport-scrollbar-ref.html |  22 +++
 .../css/css-scrollbars/viewport-scrollbar.html     |  15 ++
 32 files changed, 1555 insertions(+)
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/META.yml
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/auto-scrollbar-inline-children.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/inheritance.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/multicol-in-orthogonal-writing-mode-crash.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-keywords.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
 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-parsing.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbars-chrome-bug-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-scrollbars/scrollbars-chrome-bug-001.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-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-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/auto-scrollbar-inline-children.html b/testing/web-platform/tests/css/css-scrollbars/auto-scrollbar-inline-children.html
new file mode 100644
index 0000000000..149cf942fe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/auto-scrollbar-inline-children.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/CSS22/visufx.html#propdef-overflow">
+<style>
+  /* Avoid auto scrollbars on the viewport, because that might trigger re-layout
+    (and thus hide bugs). */
+  body { overflow:hidden; }
+
+  .container { width:100px; }
+</style>
+<p>There should be a blue rectangle below, and possibly a scrollbar (depending
+  on OS / browser), that should not obscure any parts of the rectangle. The
+  word "FAIL" should not be seen.</p>
+<div class="container" style="overflow:auto; height:200px;">
+  <div id="child" style="display:inline-block; box-sizing:border-box; width:100%; height:100%; border:10px solid blue;"></div>
+  <br>FAIL
+</div>
+
+<div class="container" style="visibility:hidden; overflow:scroll;">
+  <div id="ref"></div>
+</div>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+  test(()=> {
+    var child = document.getElementById("child");
+    assert_equals(child.offsetWidth, ref.offsetWidth);
+  }, "Auto scrollbar affects size of children");
+</script>
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/multicol-in-orthogonal-writing-mode-crash.html b/testing/web-platform/tests/css/css-scrollbars/multicol-in-orthogonal-writing-mode-crash.html
new file mode 100644
index 0000000000..5a7378de2e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/multicol-in-orthogonal-writing-mode-crash.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1245440">
+<div style="display:inline-block;">
+  <div style="writing-mode:vertical-lr;">
+    <div style="columns:2; overflow:auto; width:1px;">boom</div>
+  </div>
+</div>
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-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-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..3621a65b39
--- /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: 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-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..1b3965032b
--- /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: 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-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/scrollbars-chrome-bug-001-ref.html b/testing/web-platform/tests/css/css-scrollbars/scrollbars-chrome-bug-001-ref.html
new file mode 100644
index 0000000000..1bf59f90e7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbars-chrome-bug-001-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<link rel="help" href="https://crbug.com/926167">
+<style>
+
+#container {
+  width: 200px;
+  height: 150px;
+  border: 1px solid black;
+  overflow: scroll;
+}
+#target {
+  width: 100px;
+  height: 50px;
+  background: green;
+  transform: scale(4);
+}
+</style>
+<!--  -->
+<div id="container">
+  <div id="target"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-scrollbars/scrollbars-chrome-bug-001.html b/testing/web-platform/tests/css/css-scrollbars/scrollbars-chrome-bug-001.html
new file mode 100644
index 0000000000..643781bac8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbars-chrome-bug-001.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>CSS Overflow: css-overflow-3</title>
+<link rel="author" href="mailto:atotic@google.com">
+<link rel="help" href="https://crbug.com/926167">
+<link rel="match" href="scrollbars-chrome-bug-001-ref.html">
+<meta name="assert" content="scrollbars keep up to date with a changing transform">
+<style>
+
+#container {
+  width: 200px;
+  height: 150px;
+  border: 1px solid black;
+  overflow: scroll;
+}
+#target {
+  width: 100px;
+  height: 50px;
+  background: green;
+  transform: scale(1);
+}
+</style>
+<!--  -->
+<div id="container">
+  <div id="target"></div>
+</div>
+<script>
+  // 1st transform triggers layer creation, and full layout.
+  // 2nd transform just updates overflow, which does not update scrollbars.
+  // This triggers the bug.
+  document.body.offsetTop;
+  document.querySelector("#target").style.transform = "scale(1.5)";
+  document.body.offsetTop;
+  document.querySelector("#target").style.transform = "scale(4.0)";
+</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-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..a1b3aee871
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar-body.html
@@ -0,0 +1,15 @@
+<!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">
+<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-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..500da7a9f9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scrollbars/viewport-scrollbar.html
@@ -0,0 +1,15 @@
+<!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">
+<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