From 1bee394ccccceba6b4840035b7d22fb6e25c2ddc Mon Sep 17 00:00:00 2001
From: Felipe Erias <felipeerias@igalia.com>
Date: Sun, 27 Jun 2021 09:49:24 +0000
Subject: [PATCH] Bug 1717570 [wpt PR 29451] - Update scrollbar-gutter to new
 version of the spec, a=testonly

Automatic update from web-platform-tests
Update scrollbar-gutter to new version of the spec

Update the implementation of scrollbar-gutter to match the new spec:
https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property

The syntax is is simplified to: auto | stable && mirror?

The "stable" value also applies when overflow is "hidden".

The "always" and "force" keywords have been removed.

The "both" keyword has been renamed to "mirror".

This CL updates all affected tests to match the new spec.

Bug: 710214
Change-Id: I4a22a1abc821fa8982759cee3b69089f75dce229
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2970809
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Philip Rogers <pdr@chromium.org>
Commit-Queue: Felipe Erias <felipeerias@igalia.com>
Cr-Commit-Position: refs/heads/master@{#896301}

--

wpt-commits: 88543e2b64be5702179549bd94983613634c187a
wpt-pr: 29451
---
 .../parsing/scrollbar-gutter-invalid.html     |   8 +
 .../parsing/scrollbar-gutter-valid.html       |  11 +-
 .../css-overflow/scrollbar-gutter-001.html    | 291 +++++-------------
 .../scrollbar-gutter-propagation-001.html     |   2 +-
 .../scrollbar-gutter-propagation-002.html     |   2 +-
 .../scrollbar-gutter-propagation-003.html     |   2 +-
 .../scrollbar-gutter-propagation-004.html     |   2 +-
 .../scrollbar-gutter-propagation-005.html     |   2 +-
 .../scrollbar-gutter-propagation-006.html     |   2 +-
 .../scrollbar-gutter-propagation-007.html     |   2 +-
 .../scrollbar-gutter-rtl-001.html             | 291 +++++-------------
 .../scrollbar-gutter-vertical-lr-001.html     | 291 +++++-------------
 .../scrollbar-gutter-vertical-rl-001.html     | 291 +++++-------------
 .../css-scrollbars/scrollbar-width-001.html   |   5 +-
 .../css-scrollbars/scrollbar-width-002.html   |   5 +-
 .../css-scrollbars/scrollbar-width-003.html   |   5 +-
 .../css-scrollbars/scrollbar-width-004.html   |   5 +-
 .../css-scrollbars/scrollbar-width-005.html   |   5 +-
 .../css-scrollbars/scrollbar-width-006.html   |   5 +-
 .../css-scrollbars/scrollbar-width-007.html   |   5 +-
 .../scrollbar-width-paint-001-ref.html        |   2 +-
 .../scrollbar-width-paint-001.html            |   2 +-
 .../scrollbar-width-paint-002-ref.html        |   2 +-
 .../scrollbar-width-paint-002.html            |   2 +-
 .../properties/scrollbar-gutter.html          |  10 +-
 25 files changed, 345 insertions(+), 905 deletions(-)

diff --git a/testing/web-platform/tests/css/css-overflow/parsing/scrollbar-gutter-invalid.html b/testing/web-platform/tests/css/css-overflow/parsing/scrollbar-gutter-invalid.html
index bfddfcc56306..4f669225ee4e 100644
--- a/testing/web-platform/tests/css/css-overflow/parsing/scrollbar-gutter-invalid.html
+++ b/testing/web-platform/tests/css/css-overflow/parsing/scrollbar-gutter-invalid.html
@@ -26,4 +26,12 @@
     test_invalid_value("scrollbar-gutter", "none");
     test_invalid_value("scrollbar-gutter", "red");
 
+    test_invalid_value("scrollbar-gutter", "stable both");
+    test_invalid_value("scrollbar-gutter", "stable force");
+    test_invalid_value("scrollbar-gutter", "stable both force");
+    test_invalid_value("scrollbar-gutter", "always");
+    test_invalid_value("scrollbar-gutter", "always both");
+    test_invalid_value("scrollbar-gutter", "always force");
+    test_invalid_value("scrollbar-gutter", "always both force");
+
 </script>
diff --git a/testing/web-platform/tests/css/css-overflow/parsing/scrollbar-gutter-valid.html b/testing/web-platform/tests/css/css-overflow/parsing/scrollbar-gutter-valid.html
index 07a5c1acc02c..98acc864926d 100644
--- a/testing/web-platform/tests/css/css-overflow/parsing/scrollbar-gutter-valid.html
+++ b/testing/web-platform/tests/css/css-overflow/parsing/scrollbar-gutter-valid.html
@@ -12,15 +12,8 @@
 
     test_valid_value("scrollbar-gutter", "auto");
     test_valid_value("scrollbar-gutter", "stable");
-    test_valid_value("scrollbar-gutter", "stable both");
-    test_valid_value("scrollbar-gutter", "stable force");
-    test_valid_value("scrollbar-gutter", "stable both force");
-    test_valid_value("scrollbar-gutter", "always");
-    test_valid_value("scrollbar-gutter", "always both");
-    test_valid_value("scrollbar-gutter", "always force");
-    test_valid_value("scrollbar-gutter", "always both force");
+    test_valid_value("scrollbar-gutter", "stable mirror");
 
-    test_valid_value("scrollbar-gutter", "force both stable", "stable both force");
-    test_valid_value("scrollbar-gutter", "force always both", "always both force");
+    test_valid_value("scrollbar-gutter", "mirror stable", "stable mirror");
 
 </script>
diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-001.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-001.html
index fe1e95482857..805de3d0d6a0 100644
--- a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-001.html
+++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-001.html
@@ -33,28 +33,17 @@
     background: lightsalmon;
   }
 
-  /* scrollbar-gutter
-  Note: not testing "stable" because the decision to use overlay scrollbars
-  is up to the browser. The "always" keyword takes effect regardless of
-  whether classical or overlay scrollbars are being used.*/
+  /* scrollbar-gutter */
   .sg_auto {
     scrollbar-gutter: auto;
   }
 
-  .sg_always {
-    scrollbar-gutter: always;
+  .sg_stable {
+    scrollbar-gutter: stable;
   }
 
-  .sg_always_both {
-    scrollbar-gutter: always both;
-  }
-
-  .sg_always_force {
-    scrollbar-gutter: always force;
-  }
-
-  .sg_always_both_force {
-    scrollbar-gutter: always both force;
+  .sg_stable_mirror {
+    scrollbar-gutter: stable mirror;
   }
 
   /* overflow */
@@ -75,7 +64,7 @@
   }
 
   .container.ov_clip {
-    overflow-y: clip;
+    overflow: clip;
   }
 </style>
 <body>
@@ -103,90 +92,46 @@
   </div>
 
   <div class="line">
-    <div class="container ov_auto sg_always" id="container_auto_always">
-      <div class="content" id="content_auto_always">auto/always</div>
+    <div class="container ov_auto sg_stable" id="container_auto_stable">
+      <div class="content" id="content_auto_stable">auto/stable</div>
     </div>
 
-    <div class="container ov_scroll sg_always" id="container_scroll_always">
-      <div class="content" id="content_scroll_always">scroll/always</div>
+    <div class="container ov_scroll sg_stable" id="container_scroll_stable">
+      <div class="content" id="content_scroll_stable">scroll/stable</div>
     </div>
 
-    <div class="container ov_visible sg_always" id="container_visible_always">
-      <div class="content" id="content_visible_always">visible/always</div>
+    <div class="container ov_visible sg_stable" id="container_visible_stable">
+      <div class="content" id="content_visible_stable">visible/stable</div>
     </div>
 
-    <div class="container ov_hidden sg_always" id="container_hidden_always">
-      <div class="content" id="content_hidden_always">hidden/always</div>
+    <div class="container ov_hidden sg_stable" id="container_hidden_stable">
+      <div class="content" id="content_hidden_stable">hidden/stable</div>
     </div>
 
-    <div class="container ov_clip sg_always" id="container_clip_always">
-      <div class="content" id="content_clip_always">clip/always</div>
+    <div class="container ov_clip sg_stable" id="container_clip_stable">
+      <div class="content" id="content_clip_stable">clip/stable</div>
     </div>
   </div>
 
   <div class="line">
-    <div class="container ov_auto sg_always_force" id="container_auto_always_force">
-      <div class="content" id="content_auto_always_force">auto/always force</div>
+    <div class="container ov_auto sg_stable_mirror" id="container_auto_stable_mirror">
+      <div class="content" id="content_auto_stable_mirror">auto/stable mirror</div>
     </div>
 
-    <div class="container ov_scroll sg_always_force" id="container_scroll_always_force">
-      <div class="content" id="content_scroll_always_force">scroll/always force</div>
+    <div class="container ov_scroll sg_stable_mirror" id="container_scroll_stable_mirror">
+      <div class="content" id="content_scroll_stable_mirror">scroll/stable mirror</div>
     </div>
 
-    <div class="container ov_visible sg_always_force" id="container_visible_always_force">
-      <div class="content" id="content_visible_always_force">visible/always force</div>
+    <div class="container ov_visible sg_stable_mirror" id="container_visible_stable_mirror">
+      <div class="content" id="content_visible_stable_mirror">visible/stable mirror</div>
     </div>
 
-    <div class="container ov_hidden sg_always_force" id="container_hidden_always_force">
-      <div class="content" id="content_hidden_always_force">hidden/always force</div>
+    <div class="container ov_hidden sg_stable_mirror" id="container_hidden_stable_mirror">
+      <div class="content" id="content_hidden_stable_mirror">hidden/stable mirror</div>
     </div>
 
-    <div class="container ov_clip sg_always_force" id="container_clip_always_force">
-      <div class="content" id="content_clip_always_force">clip/always force</div>
-    </div>
-  </div>
-
-  <div class="line">
-    <div class="container ov_auto sg_always_both" id="container_auto_always_both">
-      <div class="content" id="content_auto_always_both">auto/always both</div>
-    </div>
-
-    <div class="container ov_scroll sg_always_both" id="container_scroll_always_both">
-      <div class="content" id="content_scroll_always_both">scroll/always both</div>
-    </div>
-
-    <div class="container ov_visible sg_always_both" id="container_visible_always_both">
-      <div class="content" id="content_visible_always_both">visible/always both</div>
-    </div>
-
-    <div class="container ov_hidden sg_always_both" id="container_hidden_always_both">
-      <div class="content" id="content_hidden_always_both">hidden/always both</div>
-    </div>
-
-    <div class="container ov_clip sg_always_both" id="container_clip_always_both">
-      <div class="content" id="content_clip_always_both">clip/always both</div>
-    </div>
-  </div>
-
-  <div class="line">
-    <div class="container ov_auto sg_always_both_force" id="container_auto_always_both_force">
-      <div class="content" id="content_auto_always_both_force">auto/always both force</div>
-    </div>
-
-    <div class="container ov_scroll sg_always_both_force" id="container_scroll_always_both_force">
-      <div class="content" id="content_scroll_always_both_force">scroll/always both force</div>
-    </div>
-
-    <div class="container ov_visible sg_always_both_force" id="container_visible_always_both_force">
-      <div class="content" id="content_visible_always_both_force">visible/always both force</div>
-    </div>
-
-    <div class="container ov_hidden sg_always_both_force" id="container_hidden_always_both_force">
-      <div class="content" id="content_hidden_always_both_force">hidden/always both force</div>
-    </div>
-
-    <div class="container ov_clip sg_always_both_force" id="container_clip_always_both_force">
-      <div class="content" id="content_clip_always_both_force">clip/always both force</div>
+    <div class="container ov_clip sg_stable_mirror" id="container_clip_stable_mirror">
+      <div class="content" id="content_clip_stable_mirror">clip/stable mirror</div>
     </div>
   </div>
 
@@ -230,167 +175,85 @@
       assert_equals(container.offsetLeft, content.offsetLeft, "content position");
     }, "overflow clip, scrollbar-gutter auto");
 
-    // scrollbar-gutter: always
+    // scrollbar-gutter: stable
 
     test(function () {
-      let container = document.getElementById('container_auto_always');
-      let content = document.getElementById('content_auto_always');
+      let container = document.getElementById('container_auto_stable');
+      let content = document.getElementById('content_auto_stable');
       assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
       assert_equals(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow auto, scrollbar-gutter always");
+    }, "overflow auto, scrollbar-gutter stable");
 
     test(function () {
-      let container = document.getElementById('container_scroll_always');
-      let content = document.getElementById('content_scroll_always');
+      let container = document.getElementById('container_scroll_stable');
+      let content = document.getElementById('content_scroll_stable');
       assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
       assert_equals(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow scroll, scrollbar-gutter always");
+    }, "overflow scroll, scrollbar-gutter stable");
 
     test(function () {
-      let container = document.getElementById('container_visible_always');
-      let content = document.getElementById('content_visible_always');
+      let container = document.getElementById('container_visible_stable');
+      let content = document.getElementById('content_visible_stable');
       assert_equals(container.offsetWidth, content.offsetWidth, "content width");
       assert_equals(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow visible, scrollbar-gutter always");
+    }, "overflow visible, scrollbar-gutter stable");
 
     test(function () {
-      let container = document.getElementById('container_hidden_always');
-      let content = document.getElementById('content_hidden_always');
+      let container = document.getElementById('container_hidden_stable');
+      let content = document.getElementById('content_hidden_stable');
+      assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
+      assert_equals(container.offsetLeft, content.offsetLeft, "content position");
+    }, "overflow hidden, scrollbar-gutter stable");
+
+    test(function () {
+      let container = document.getElementById('container_clip_stable');
+      let content = document.getElementById('content_clip_stable');
       assert_equals(container.offsetWidth, content.offsetWidth, "content width");
       assert_equals(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow hidden, scrollbar-gutter always");
+    }, "overflow clip, scrollbar-gutter stable");
+
+    // scrollbar-gutter: stable mirror
 
     test(function () {
-      let container = document.getElementById('container_clip_always');
-      let content = document.getElementById('content_clip_always');
+      let container = document.getElementById('container_auto_stable_mirror');
+      let content = document.getElementById('content_auto_stable_mirror');
+      assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
+      assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
+      let reference = document.getElementById('content_auto_stable');
+      assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
+    }, "overflow auto, scrollbar-gutter stable mirror");
+
+    test(function () {
+      let container = document.getElementById('container_scroll_stable_mirror');
+      let content = document.getElementById('content_scroll_stable_mirror');
+      assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
+      assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
+      let reference = document.getElementById('content_auto_stable');
+      assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
+    }, "overflow scroll, scrollbar-gutter stable mirror");
+
+    test(function () {
+      let container = document.getElementById('container_visible_stable_mirror');
+      let content = document.getElementById('content_visible_stable_mirror');
       assert_equals(container.offsetWidth, content.offsetWidth, "content width");
       assert_equals(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow clip, scrollbar-gutter always");
-
-    // scrollbar-gutter: always force
+    }, "overflow visible, scrollbar-gutter stable mirror");
 
     test(function () {
-      let container = document.getElementById('container_auto_always_force');
-      let content = document.getElementById('content_auto_always_force');
-      assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
-      assert_equals(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow auto, scrollbar-gutter always force");
-
-    test(function () {
-      let container = document.getElementById('container_scroll_always_force');
-      let content = document.getElementById('content_scroll_always_force');
-      assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
-      assert_equals(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow scroll, scrollbar-gutter always force");
-
-    test(function () {
-      let container = document.getElementById('container_visible_always_force');
-      let content = document.getElementById('content_visible_always_force');
-      assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
-      assert_equals(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow visible, scrollbar-gutter always force");
-
-    test(function () {
-      let container = document.getElementById('container_hidden_always_force');
-      let content = document.getElementById('content_hidden_always_force');
-      assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
-      assert_equals(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow hidden, scrollbar-gutter always force");
-
-    test(function () {
-      let container = document.getElementById('container_clip_always_force');
-      let content = document.getElementById('content_clip_always_force');
-      assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
-      assert_equals(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow clip, scrollbar-gutter always force");
-
-    // scrollbar-gutter: always both
-
-    test(function () {
-      let container = document.getElementById('container_auto_always_both');
-      let content = document.getElementById('content_auto_always_both');
+      let container = document.getElementById('container_hidden_stable_mirror');
+      let content = document.getElementById('content_hidden_stable_mirror');
       assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
       assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
-      let reference = document.getElementById('content_auto_always');
-      assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always\"");
-    }, "overflow auto, scrollbar-gutter always both");
+      let reference = document.getElementById('content_auto_stable');
+      assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
+    }, "overflow hidden, scrollbar-gutter stable mirror");
 
     test(function () {
-      let container = document.getElementById('container_scroll_always_both');
-      let content = document.getElementById('content_scroll_always_both');
-      assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
-      assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
-      let reference = document.getElementById('content_auto_always');
-      assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always\"");
-    }, "overflow scroll, scrollbar-gutter always both");
-
-    test(function () {
-      let container = document.getElementById('container_visible_always_both');
-      let content = document.getElementById('content_visible_always_both');
+      let container = document.getElementById('container_clip_stable_mirror');
+      let content = document.getElementById('content_clip_stable_mirror');
       assert_equals(container.offsetWidth, content.offsetWidth, "content width");
       assert_equals(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow visible, scrollbar-gutter always both");
-
-    test(function () {
-      let container = document.getElementById('container_hidden_always_both');
-      let content = document.getElementById('content_hidden_always_both');
-      assert_equals(container.offsetWidth, content.offsetWidth, "content width");
-      assert_equals(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow hidden, scrollbar-gutter always both");
-
-    test(function () {
-      let container = document.getElementById('container_clip_always_both');
-      let content = document.getElementById('content_clip_always_both');
-      assert_equals(container.offsetWidth, content.offsetWidth, "content width");
-      assert_equals(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow clip, scrollbar-gutter always both");
-
-    // scrollbar-gutter: always both force
-
-    test(function () {
-      let container = document.getElementById('container_auto_always_both_force');
-      let content = document.getElementById('content_auto_always_both_force');
-      assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
-      assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
-      let reference = document.getElementById('content_auto_always_force');
-      assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
-    }, "overflow auto, scrollbar-gutter always both force");
-
-    test(function () {
-      let container = document.getElementById('container_scroll_always_both_force');
-      let content = document.getElementById('content_scroll_always_both_force');
-      assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
-      assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
-      let reference = document.getElementById('content_scroll_always_force');
-      assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
-    }, "overflow scroll, scrollbar-gutter always both force");
-
-    test(function () {
-      let container = document.getElementById('container_visible_always_both_force');
-      let content = document.getElementById('content_visible_always_both_force');
-      assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
-      assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
-      let reference = document.getElementById('content_visible_always_force');
-      assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
-    }, "overflow visible, scrollbar-gutter always both force");
-
-    test(function () {
-      let container = document.getElementById('container_hidden_always_both_force');
-      let content = document.getElementById('content_hidden_always_both_force');
-      assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
-      assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
-      let reference = document.getElementById('content_hidden_always_force');
-      assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
-    }, "overflow hidden, scrollbar-gutter always both force");
-
-    test(function () {
-      let container = document.getElementById('container_clip_always_both_force');
-      let content = document.getElementById('content_clip_always_both_force');
-      assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
-      assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
-      let reference = document.getElementById('content_clip_always_force');
-      assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
-    }, "overflow clip, scrollbar-gutter always both force");
+    }, "overflow clip, scrollbar-gutter stable mirror");
 
     done();
 
diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-001.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-001.html
index 1a73a06f5c84..94391e3df6ce 100644
--- a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-001.html
+++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-001.html
@@ -15,7 +15,7 @@
   }
 
   :root {
-    scrollbar-gutter: always;
+    scrollbar-gutter: stable;
   }
 
   #content {
diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-002.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-002.html
index b02a39a650f6..d55938e04de8 100644
--- a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-002.html
+++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-002.html
@@ -15,7 +15,7 @@
   }
 
   :root {
-    scrollbar-gutter: always;
+    scrollbar-gutter: stable;
   }
 
   #content {
diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-003.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-003.html
index fa481b989b80..e9483946a52b 100644
--- a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-003.html
+++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-003.html
@@ -15,7 +15,7 @@
   }
 
   :root {
-    scrollbar-gutter: always;
+    scrollbar-gutter: stable;
     overflow: auto;
   }
 
diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-004.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-004.html
index 6d0cfa12d208..699247111d84 100644
--- a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-004.html
+++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-004.html
@@ -15,7 +15,7 @@
   }
 
   :root {
-    scrollbar-gutter: always;
+    scrollbar-gutter: stable;
     overflow: auto;
   }
 
diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-005.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-005.html
index 6bee0fdcf95b..e44811d27932 100644
--- a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-005.html
+++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-005.html
@@ -15,7 +15,7 @@
   }
 
   :root {
-    scrollbar-gutter: always;
+    scrollbar-gutter: stable;
     overflow: scroll;
   }
 
diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-006.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-006.html
index 650be464622f..e1084ff32b94 100644
--- a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-006.html
+++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-006.html
@@ -15,7 +15,7 @@
   }
 
   body {
-    scrollbar-gutter: always;
+    scrollbar-gutter: stable;
   }
 
   #content {
diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-007.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-007.html
index 88837d1796c9..2f5e5596bd88 100644
--- a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-007.html
+++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-propagation-007.html
@@ -15,7 +15,7 @@
   }
 
   :root {
-    scrollbar-gutter: always;
+    scrollbar-gutter: stable;
   }
 
   body {
diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-rtl-001.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-rtl-001.html
index 446195098e24..3eafbc5badf1 100644
--- a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-rtl-001.html
+++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-rtl-001.html
@@ -33,28 +33,17 @@
     background: lightsalmon;
   }
 
-  /* scrollbar-gutter
-     Note: not testing "stable" because the decision to use overlay scrollbars
-     is up to the browser. The "always" keyword takes effect regardless of
-     whether classical or overlay scrollbars are being used.*/
+  /* scrollbar-gutter */
   .sg_auto {
     scrollbar-gutter: auto;
   }
 
-  .sg_always {
-    scrollbar-gutter: always;
+  .sg_stable {
+    scrollbar-gutter: stable;
   }
 
-  .sg_always_both {
-    scrollbar-gutter: always both;
-  }
-
-  .sg_always_force {
-    scrollbar-gutter: always force;
-  }
-
-  .sg_always_both_force {
-    scrollbar-gutter: always both force;
+  .sg_stable_mirror {
+    scrollbar-gutter: stable mirror;
   }
 
   /* overflow */
@@ -75,7 +64,7 @@
   }
 
   .container.ov_clip {
-    overflow-y: clip;
+    overflow: clip;
   }
 </style>
 <body>
@@ -103,90 +92,46 @@
   </div>
 
   <div class="line">
-    <div class="container ov_auto sg_always" id="container_auto_always">
-      <div class="content" id="content_auto_always">auto/always</div>
+    <div class="container ov_auto sg_stable" id="container_auto_stable">
+      <div class="content" id="content_auto_stable">auto/stable</div>
     </div>
 
-    <div class="container ov_scroll sg_always" id="container_scroll_always">
-      <div class="content" id="content_scroll_always">scroll/always</div>
+    <div class="container ov_scroll sg_stable" id="container_scroll_stable">
+      <div class="content" id="content_scroll_stable">scroll/stable</div>
     </div>
 
-    <div class="container ov_visible sg_always" id="container_visible_always">
-      <div class="content" id="content_visible_always">visible/always</div>
+    <div class="container ov_visible sg_stable" id="container_visible_stable">
+      <div class="content" id="content_visible_stable">visible/stable</div>
     </div>
 
-    <div class="container ov_hidden sg_always" id="container_hidden_always">
-      <div class="content" id="content_hidden_always">hidden/always</div>
+    <div class="container ov_hidden sg_stable" id="container_hidden_stable">
+      <div class="content" id="content_hidden_stable">hidden/stable</div>
     </div>
 
-    <div class="container ov_clip sg_always" id="container_clip_always">
-      <div class="content" id="content_clip_always">clip/always</div>
+    <div class="container ov_clip sg_stable" id="container_clip_stable">
+      <div class="content" id="content_clip_stable">clip/stable</div>
     </div>
   </div>
 
   <div class="line">
-    <div class="container ov_auto sg_always_force" id="container_auto_always_force">
-      <div class="content" id="content_auto_always_force">auto/always force</div>
+    <div class="container ov_auto sg_stable_mirror" id="container_auto_stable_mirror">
+      <div class="content" id="content_auto_stable_mirror">auto/stable mirror</div>
     </div>
 
-    <div class="container ov_scroll sg_always_force" id="container_scroll_always_force">
-      <div class="content" id="content_scroll_always_force">scroll/always force</div>
+    <div class="container ov_scroll sg_stable_mirror" id="container_scroll_stable_mirror">
+      <div class="content" id="content_scroll_stable_mirror">scroll/stable mirror</div>
     </div>
 
-    <div class="container ov_visible sg_always_force" id="container_visible_always_force">
-      <div class="content" id="content_visible_always_force">visible/always force</div>
+    <div class="container ov_visible sg_stable_mirror" id="container_visible_stable_mirror">
+      <div class="content" id="content_visible_stable_mirror">visible/stable mirror</div>
     </div>
 
-    <div class="container ov_hidden sg_always_force" id="container_hidden_always_force">
-      <div class="content" id="content_hidden_always_force">hidden/always force</div>
+    <div class="container ov_hidden sg_stable_mirror" id="container_hidden_stable_mirror">
+      <div class="content" id="content_hidden_stable_mirror">hidden/stable mirror</div>
     </div>
 
-    <div class="container ov_clip sg_always_force" id="container_clip_always_force">
-      <div class="content" id="content_clip_always_force">clip/always force</div>
-    </div>
-  </div>
-
-  <div class="line">
-    <div class="container ov_auto sg_always_both" id="container_auto_always_both">
-      <div class="content" id="content_auto_always_both">auto/always both</div>
-    </div>
-
-    <div class="container ov_scroll sg_always_both" id="container_scroll_always_both">
-      <div class="content" id="content_scroll_always_both">scroll/always both</div>
-    </div>
-
-    <div class="container ov_visible sg_always_both" id="container_visible_always_both">
-      <div class="content" id="content_visible_always_both">visible/always both</div>
-    </div>
-
-    <div class="container ov_hidden sg_always_both" id="container_hidden_always_both">
-      <div class="content" id="content_hidden_always_both">hidden/always both</div>
-    </div>
-
-    <div class="container ov_clip sg_always_both" id="container_clip_always_both">
-      <div class="content" id="content_clip_always_both">clip/always both</div>
-    </div>
-  </div>
-
-  <div class="line">
-    <div class="container ov_auto sg_always_both_force" id="container_auto_always_both_force">
-      <div class="content" id="content_auto_always_both_force">auto/always both force</div>
-    </div>
-
-    <div class="container ov_scroll sg_always_both_force" id="container_scroll_always_both_force">
-      <div class="content" id="content_scroll_always_both_force">scroll/always both force</div>
-    </div>
-
-    <div class="container ov_visible sg_always_both_force" id="container_visible_always_both_force">
-      <div class="content" id="content_visible_always_both_force">visible/always both force</div>
-    </div>
-
-    <div class="container ov_hidden sg_always_both_force" id="container_hidden_always_both_force">
-      <div class="content" id="content_hidden_always_both_force">hidden/always both force</div>
-    </div>
-
-    <div class="container ov_clip sg_always_both_force" id="container_clip_always_both_force">
-      <div class="content" id="content_clip_always_both_force">clip/always both force</div>
+    <div class="container ov_clip sg_stable_mirror" id="container_clip_stable_mirror">
+      <div class="content" id="content_clip_stable_mirror">clip/stable mirror</div>
     </div>
   </div>
 
@@ -230,167 +175,85 @@
       assert_equals(container.offsetLeft, content.offsetLeft, "content position");
     }, "overflow clip, scrollbar-gutter auto");
 
-    // scrollbar-gutter: always
+    // scrollbar-gutter: stable
 
     test(function () {
-      let container = document.getElementById('container_auto_always');
-      let content = document.getElementById('content_auto_always');
+      let container = document.getElementById('container_auto_stable');
+      let content = document.getElementById('content_auto_stable');
       assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
       assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow auto, scrollbar-gutter always");
+    }, "overflow auto, scrollbar-gutter stable");
 
     test(function () {
-      let container = document.getElementById('container_scroll_always');
-      let content = document.getElementById('content_scroll_always');
+      let container = document.getElementById('container_scroll_stable');
+      let content = document.getElementById('content_scroll_stable');
       assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
       assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow scroll, scrollbar-gutter always");
+    }, "overflow scroll, scrollbar-gutter stable");
 
     test(function () {
-      let container = document.getElementById('container_visible_always');
-      let content = document.getElementById('content_visible_always');
+      let container = document.getElementById('container_visible_stable');
+      let content = document.getElementById('content_visible_stable');
       assert_equals(container.offsetWidth, content.offsetWidth, "content width");
       assert_equals(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow visible, scrollbar-gutter always");
+    }, "overflow visible, scrollbar-gutter stable");
 
     test(function () {
-      let container = document.getElementById('container_hidden_always');
-      let content = document.getElementById('content_hidden_always');
+      let container = document.getElementById('container_hidden_stable');
+      let content = document.getElementById('content_hidden_stable');
+      assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
+      assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
+    }, "overflow hidden, scrollbar-gutter stable");
+
+    test(function () {
+      let container = document.getElementById('container_clip_stable');
+      let content = document.getElementById('content_clip_stable');
       assert_equals(container.offsetWidth, content.offsetWidth, "content width");
       assert_equals(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow hidden, scrollbar-gutter always");
+    }, "overflow clip, scrollbar-gutter stable");
+
+    // scrollbar-gutter: stable mirror
 
     test(function () {
-      let container = document.getElementById('container_clip_always');
-      let content = document.getElementById('content_clip_always');
+      let container = document.getElementById('container_auto_stable_mirror');
+      let content = document.getElementById('content_auto_stable_mirror');
+      assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
+      assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
+      let reference = document.getElementById('content_auto_stable');
+      assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
+    }, "overflow auto, scrollbar-gutter stable mirror");
+
+    test(function () {
+      let container = document.getElementById('container_scroll_stable_mirror');
+      let content = document.getElementById('content_scroll_stable_mirror');
+      assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
+      assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
+      let reference = document.getElementById('content_scroll_stable');
+      assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
+    }, "overflow scroll, scrollbar-gutter stable mirror");
+
+    test(function () {
+      let container = document.getElementById('container_visible_stable_mirror');
+      let content = document.getElementById('content_visible_stable_mirror');
       assert_equals(container.offsetWidth, content.offsetWidth, "content width");
       assert_equals(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow clip, scrollbar-gutter always");
-
-    // scrollbar-gutter: always force
+    }, "overflow visible, scrollbar-gutter stable mirror");
 
     test(function () {
-      let container = document.getElementById('container_auto_always_force');
-      let content = document.getElementById('content_auto_always_force');
+      let container = document.getElementById('container_hidden_stable_mirror');
+      let content = document.getElementById('content_hidden_stable_mirror');
       assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
       assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow auto, scrollbar-gutter always force");
+      let reference = document.getElementById('content_auto_stable');
+      assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
+    }, "overflow hidden, scrollbar-gutter stable mirror");
 
     test(function () {
-      let container = document.getElementById('container_scroll_always_force');
-      let content = document.getElementById('content_scroll_always_force');
-      assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
-      assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow scroll, scrollbar-gutter always force");
-
-    test(function () {
-      let container = document.getElementById('container_visible_always_force');
-      let content = document.getElementById('content_visible_always_force');
-      assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
-      assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow visible, scrollbar-gutter always force");
-
-    test(function () {
-      let container = document.getElementById('container_hidden_always_force');
-      let content = document.getElementById('content_hidden_always_force');
-      assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
-      assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow hidden, scrollbar-gutter always force");
-
-    test(function () {
-      let container = document.getElementById('container_clip_always_force');
-      let content = document.getElementById('content_clip_always_force');
-      assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
-      assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow clip, scrollbar-gutter always force");
-
-    // scrollbar-gutter: always both
-
-    test(function () {
-      let container = document.getElementById('container_auto_always_both');
-      let content = document.getElementById('content_auto_always_both');
-      assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
-      assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
-      let reference = document.getElementById('content_auto_always');
-      assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always\"");
-    }, "overflow auto, scrollbar-gutter always both");
-
-    test(function () {
-      let container = document.getElementById('container_scroll_always_both');
-      let content = document.getElementById('content_scroll_always_both');
-      assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
-      assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
-      let reference = document.getElementById('content_scroll_always');
-      assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always\"");
-    }, "overflow scroll, scrollbar-gutter always both");
-
-    test(function () {
-      let container = document.getElementById('container_visible_always_both');
-      let content = document.getElementById('content_visible_always_both');
+      let container = document.getElementById('container_clip_stable_mirror');
+      let content = document.getElementById('content_clip_stable_mirror');
       assert_equals(container.offsetWidth, content.offsetWidth, "content width");
       assert_equals(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow visible, scrollbar-gutter always both");
-
-    test(function () {
-      let container = document.getElementById('container_hidden_always_both');
-      let content = document.getElementById('content_hidden_always_both');
-      assert_equals(container.offsetWidth, content.offsetWidth, "content width");
-      assert_equals(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow hidden, scrollbar-gutter always both");
-
-    test(function () {
-      let container = document.getElementById('container_clip_always_both');
-      let content = document.getElementById('content_clip_always_both');
-      assert_equals(container.offsetWidth, content.offsetWidth, "content width");
-      assert_equals(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow clip, scrollbar-gutter always both");
-
-    // scrollbar-gutter: always both force
-
-    test(function () {
-      let container = document.getElementById('container_auto_always_both_force');
-      let content = document.getElementById('content_auto_always_both_force');
-      assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
-      assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
-      let reference = document.getElementById('content_auto_always_force');
-      assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
-    }, "overflow auto, scrollbar-gutter always both force");
-
-    test(function () {
-      let container = document.getElementById('container_scroll_always_both_force');
-      let content = document.getElementById('content_scroll_always_both_force');
-      assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
-      assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
-      let reference = document.getElementById('content_scroll_always_force');
-      assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
-    }, "overflow scroll, scrollbar-gutter always both force");
-
-    test(function () {
-      let container = document.getElementById('container_visible_always_both_force');
-      let content = document.getElementById('content_visible_always_both_force');
-      assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
-      assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
-      let reference = document.getElementById('content_visible_always_force');
-      assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
-    }, "overflow visible, scrollbar-gutter always both force");
-
-    test(function () {
-      let container = document.getElementById('container_hidden_always_both_force');
-      let content = document.getElementById('content_hidden_always_both_force');
-      assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
-      assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
-      let reference = document.getElementById('content_hidden_always_force');
-      assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
-    }, "overflow hidden, scrollbar-gutter always both force");
-
-    test(function () {
-      let container = document.getElementById('container_clip_always_both_force');
-      let content = document.getElementById('content_clip_always_both_force');
-      assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
-      assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
-      let reference = document.getElementById('content_clip_always_force');
-      assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
-    }, "overflow clip, scrollbar-gutter always both force");
+    }, "overflow clip, scrollbar-gutter stable mirror");
 
     done();
 
diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-lr-001.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-lr-001.html
index 27ac8f4c3936..e8553b4a96a2 100644
--- a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-lr-001.html
+++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-lr-001.html
@@ -31,28 +31,17 @@
     background: lightsalmon;
   }
 
-  /* scrollbar-gutter
-     Note: not testing "stable" because the decision to use overlay scrollbars
-     is up to the browser. The "always" keyword takes effect regardless of
-     whether classical or overlay scrollbars are being used.*/
+  /* scrollbar-gutter */
   .sg_auto {
     scrollbar-gutter: auto;
   }
 
-  .sg_always {
-    scrollbar-gutter: always;
+  .sg_stable {
+    scrollbar-gutter: stable;
   }
 
-  .sg_always_both {
-    scrollbar-gutter: always both;
-  }
-
-  .sg_always_force {
-    scrollbar-gutter: always force;
-  }
-
-  .sg_always_both_force {
-    scrollbar-gutter: always both force;
+  .sg_stable_mirror {
+    scrollbar-gutter: stable mirror;
   }
 
   /* overflow */
@@ -73,7 +62,7 @@
   }
 
   .container.ov_clip {
-    overflow-x: clip;
+    overflow: clip;
   }
 </style>
 <body>
@@ -101,90 +90,46 @@
   </div>
 
   <div class="line">
-    <div class="container ov_auto sg_always" id="container_auto_always">
-      <div class="content" id="content_auto_always">auto/always</div>
+    <div class="container ov_auto sg_stable" id="container_auto_stable">
+      <div class="content" id="content_auto_stable">auto/stable</div>
     </div>
 
-    <div class="container ov_scroll sg_always" id="container_scroll_always">
-      <div class="content" id="content_scroll_always">scroll/always</div>
+    <div class="container ov_scroll sg_stable" id="container_scroll_stable">
+      <div class="content" id="content_scroll_stable">scroll/stable</div>
     </div>
 
-    <div class="container ov_visible sg_always" id="container_visible_always">
-      <div class="content" id="content_visible_always">visible/always</div>
+    <div class="container ov_visible sg_stable" id="container_visible_stable">
+      <div class="content" id="content_visible_stable">visible/stable</div>
     </div>
 
-    <div class="container ov_hidden sg_always" id="container_hidden_always">
-      <div class="content" id="content_hidden_always">hidden/always</div>
+    <div class="container ov_hidden sg_stable" id="container_hidden_stable">
+      <div class="content" id="content_hidden_stable">hidden/stable</div>
     </div>
 
-    <div class="container ov_clip sg_always" id="container_clip_always">
-      <div class="content" id="content_clip_always">clip/always</div>
+    <div class="container ov_clip sg_stable" id="container_clip_stable">
+      <div class="content" id="content_clip_stable">clip/stable</div>
     </div>
   </div>
 
   <div class="line">
-    <div class="container ov_auto sg_always_force" id="container_auto_always_force">
-      <div class="content" id="content_auto_always_force">auto/always force</div>
+    <div class="container ov_auto sg_stable_mirror" id="container_auto_stable_mirror">
+      <div class="content" id="content_auto_stable_mirror">auto/stable mirror</div>
     </div>
 
-    <div class="container ov_scroll sg_always_force" id="container_scroll_always_force">
-      <div class="content" id="content_scroll_always_force">scroll/always force</div>
+    <div class="container ov_scroll sg_stable_mirror" id="container_scroll_stable_mirror">
+      <div class="content" id="content_scroll_stable_mirror">scroll/stable mirror</div>
     </div>
 
-    <div class="container ov_visible sg_always_force" id="container_visible_always_force">
-      <div class="content" id="content_visible_always_force">visible/always force</div>
+    <div class="container ov_visible sg_stable_mirror" id="container_visible_stable_mirror">
+      <div class="content" id="content_visible_stable_mirror">visible/stable mirror</div>
     </div>
 
-    <div class="container ov_hidden sg_always_force" id="container_hidden_always_force">
-      <div class="content" id="content_hidden_always_force">hidden/always force</div>
+    <div class="container ov_hidden sg_stable_mirror" id="container_hidden_stable_mirror">
+      <div class="content" id="content_hidden_stable_mirror">hidden/stable mirror</div>
     </div>
 
-    <div class="container ov_clip sg_always_force" id="container_clip_always_force">
-      <div class="content" id="content_clip_always_force">clip/always force</div>
-    </div>
-  </div>
-
-  <div class="line">
-    <div class="container ov_auto sg_always_both" id="container_auto_always_both">
-      <div class="content" id="content_auto_always_both">auto/always both</div>
-    </div>
-
-    <div class="container ov_scroll sg_always_both" id="container_scroll_always_both">
-      <div class="content" id="content_scroll_always_both">scroll/always both</div>
-    </div>
-
-    <div class="container ov_visible sg_always_both" id="container_visible_always_both">
-      <div class="content" id="content_visible_always_both">visible/always both</div>
-    </div>
-
-    <div class="container ov_hidden sg_always_both" id="container_hidden_always_both">
-      <div class="content" id="content_hidden_always_both">hidden/always both</div>
-    </div>
-
-    <div class="container ov_clip sg_always_both" id="container_clip_always_both">
-      <div class="content" id="content_clip_always_both">clip/always both</div>
-    </div>
-  </div>
-
-  <div class="line">
-    <div class="container ov_auto sg_always_both_force" id="container_auto_always_both_force">
-      <div class="content" id="content_auto_always_both_force">auto/always both force</div>
-    </div>
-
-    <div class="container ov_scroll sg_always_both_force" id="container_scroll_always_both_force">
-      <div class="content" id="content_scroll_always_both_force">scroll/always both force</div>
-    </div>
-
-    <div class="container ov_visible sg_always_both_force" id="container_visible_always_both_force">
-      <div class="content" id="content_visible_always_both_force">visible/always both force</div>
-    </div>
-
-    <div class="container ov_hidden sg_always_both_force" id="container_hidden_always_both_force">
-      <div class="content" id="content_hidden_always_both_force">hidden/always both force</div>
-    </div>
-
-    <div class="container ov_clip sg_always_both_force" id="container_clip_always_both_force">
-      <div class="content" id="content_clip_always_both_force">clip/always both force</div>
+    <div class="container ov_clip sg_stable_mirror" id="container_clip_stable_mirror">
+      <div class="content" id="content_clip_stable_mirror">clip/stable mirror</div>
     </div>
   </div>
 
@@ -228,167 +173,85 @@
       assert_equals(container.offsetTop, content.offsetTop, "content position");
     }, "overflow clip, scrollbar-gutter auto");
 
-    // scrollbar-gutter: always
+    // scrollbar-gutter: stable
 
     test(function () {
-      let container = document.getElementById('container_auto_always');
-      let content = document.getElementById('content_auto_always');
+      let container = document.getElementById('container_auto_stable');
+      let content = document.getElementById('content_auto_stable');
       assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
       assert_equals(container.offsetTop, content.offsetTop, "content position");
-    }, "overflow auto, scrollbar-gutter always");
+    }, "overflow auto, scrollbar-gutter stable");
 
     test(function () {
-      let container = document.getElementById('container_scroll_always');
-      let content = document.getElementById('content_scroll_always');
+      let container = document.getElementById('container_scroll_stable');
+      let content = document.getElementById('content_scroll_stable');
       assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
       assert_equals(container.offsetTop, content.offsetTop, "content position");
-    }, "overflow scroll, scrollbar-gutter always");
+    }, "overflow scroll, scrollbar-gutter stable");
 
     test(function () {
-      let container = document.getElementById('container_visible_always');
-      let content = document.getElementById('content_visible_always');
+      let container = document.getElementById('container_visible_stable');
+      let content = document.getElementById('content_visible_stable');
       assert_equals(container.offsetHeight, content.offsetHeight, "content height");
       assert_equals(container.offsetTop, content.offsetTop, "content position");
-    }, "overflow visible, scrollbar-gutter always");
+    }, "overflow visible, scrollbar-gutter stable");
 
     test(function () {
-      let container = document.getElementById('container_hidden_always');
-      let content = document.getElementById('content_hidden_always');
+      let container = document.getElementById('container_hidden_stable');
+      let content = document.getElementById('content_hidden_stable');
+      assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
+      assert_equals(container.offsetTop, content.offsetTop, "content position");
+    }, "overflow hidden, scrollbar-gutter stable");
+
+    test(function () {
+      let container = document.getElementById('container_clip_stable');
+      let content = document.getElementById('content_clip_stable');
       assert_equals(container.offsetHeight, content.offsetHeight, "content height");
       assert_equals(container.offsetTop, content.offsetTop, "content position");
-    }, "overflow hidden, scrollbar-gutter always");
+    }, "overflow clip, scrollbar-gutter stable");
+
+    // scrollbar-gutter: stable mirror
 
     test(function () {
-      let container = document.getElementById('container_clip_always');
-      let content = document.getElementById('content_clip_always');
+      let container = document.getElementById('container_auto_stable_mirror');
+      let content = document.getElementById('content_auto_stable_mirror');
+      assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
+      assert_less_than(container.offsetTop, content.offsetTop, "content position");
+      let reference = document.getElementById('content_auto_stable');
+      assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\"");
+    }, "overflow auto, scrollbar-gutter stable mirror");
+
+    test(function () {
+      let container = document.getElementById('container_scroll_stable_mirror');
+      let content = document.getElementById('content_scroll_stable_mirror');
+      assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
+      assert_less_than(container.offsetTop, content.offsetTop, "content position");
+      let reference = document.getElementById('content_auto_stable');
+      assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\"");
+    }, "overflow scroll, scrollbar-gutter stable mirror");
+
+    test(function () {
+      let container = document.getElementById('container_visible_stable_mirror');
+      let content = document.getElementById('content_visible_stable_mirror');
       assert_equals(container.offsetHeight, content.offsetHeight, "content height");
       assert_equals(container.offsetTop, content.offsetTop, "content position");
-    }, "overflow clip, scrollbar-gutter always");
-
-    // scrollbar-gutter: always force
+    }, "overflow visible, scrollbar-gutter stable mirror");
 
     test(function () {
-      let container = document.getElementById('container_auto_always_force');
-      let content = document.getElementById('content_auto_always_force');
-      assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
-      assert_equals(container.offsetTop, content.offsetTop, "content position");
-    }, "overflow auto, scrollbar-gutter always force");
-
-    test(function () {
-      let container = document.getElementById('container_scroll_always_force');
-      let content = document.getElementById('content_scroll_always_force');
-      assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
-      assert_equals(container.offsetTop, content.offsetTop, "content position");
-    }, "overflow scroll, scrollbar-gutter always force");
-
-    test(function () {
-      let container = document.getElementById('container_visible_always_force');
-      let content = document.getElementById('content_visible_always_force');
-      assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
-      assert_equals(container.offsetTop, content.offsetTop, "content position");
-    }, "overflow visible, scrollbar-gutter always force");
-
-    test(function () {
-      let container = document.getElementById('container_hidden_always_force');
-      let content = document.getElementById('content_hidden_always_force');
-      assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
-      assert_equals(container.offsetTop, content.offsetTop, "content position");
-    }, "overflow hidden, scrollbar-gutter always force");
-
-    test(function () {
-      let container = document.getElementById('container_clip_always_force');
-      let content = document.getElementById('content_clip_always_force');
-      assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
-      assert_equals(container.offsetTop, content.offsetTop, "content position");
-    }, "overflow clip, scrollbar-gutter always force");
-
-    // scrollbar-gutter: always both
-
-    test(function () {
-      let container = document.getElementById('container_auto_always_both');
-      let content = document.getElementById('content_auto_always_both');
+      let container = document.getElementById('container_hidden_stable_mirror');
+      let content = document.getElementById('content_hidden_stable_mirror');
       assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
       assert_less_than(container.offsetTop, content.offsetTop, "content position");
-      let reference = document.getElementById('content_auto_always');
-      assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always\"");
-    }, "overflow auto, scrollbar-gutter always both");
+      let reference = document.getElementById('content_auto_stable');
+      assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\"");
+    }, "overflow hidden, scrollbar-gutter stable mirror");
 
     test(function () {
-      let container = document.getElementById('container_scroll_always_both');
-      let content = document.getElementById('content_scroll_always_both');
-      assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
-      assert_less_than(container.offsetTop, content.offsetTop, "content position");
-      let reference = document.getElementById('content_auto_always');
-      assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always\"");
-    }, "overflow scroll, scrollbar-gutter always both");
-
-    test(function () {
-      let container = document.getElementById('container_visible_always_both');
-      let content = document.getElementById('content_visible_always_both');
+      let container = document.getElementById('container_clip_stable_mirror');
+      let content = document.getElementById('content_clip_stable_mirror');
       assert_equals(container.offsetHeight, content.offsetHeight, "content height");
       assert_equals(container.offsetTop, content.offsetTop, "content position");
-    }, "overflow visible, scrollbar-gutter always both");
-
-    test(function () {
-      let container = document.getElementById('container_hidden_always_both');
-      let content = document.getElementById('content_hidden_always_both');
-      assert_equals(container.offsetHeight, content.offsetHeight, "content height");
-      assert_equals(container.offsetTop, content.offsetTop, "content position");
-    }, "overflow hidden, scrollbar-gutter always both");
-
-    test(function () {
-      let container = document.getElementById('container_clip_always_both');
-      let content = document.getElementById('content_clip_always_both');
-      assert_equals(container.offsetHeight, content.offsetHeight, "content height");
-      assert_equals(container.offsetTop, content.offsetTop, "content position");
-    }, "overflow clip, scrollbar-gutter always both");
-
-    // scrollbar-gutter: always both force
-
-    test(function () {
-      let container = document.getElementById('container_auto_always_both_force');
-      let content = document.getElementById('content_auto_always_both_force');
-      assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
-      assert_less_than(container.offsetTop, content.offsetTop, "content position");
-      let reference = document.getElementById('content_auto_always_force');
-      assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
-    }, "overflow auto, scrollbar-gutter always both force");
-
-    test(function () {
-      let container = document.getElementById('container_scroll_always_both_force');
-      let content = document.getElementById('content_scroll_always_both_force');
-      assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
-      assert_less_than(container.offsetTop, content.offsetTop, "content position");
-      let reference = document.getElementById('content_scroll_always_force');
-      assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
-    }, "overflow scroll, scrollbar-gutter always both force");
-
-    test(function () {
-      let container = document.getElementById('container_visible_always_both_force');
-      let content = document.getElementById('content_visible_always_both_force');
-      assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
-      assert_less_than(container.offsetTop, content.offsetTop, "content position");
-      let reference = document.getElementById('content_visible_always_force');
-      assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
-    }, "overflow visible, scrollbar-gutter always both force");
-
-    test(function () {
-      let container = document.getElementById('container_hidden_always_both_force');
-      let content = document.getElementById('content_hidden_always_both_force');
-      assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
-      assert_less_than(container.offsetTop, content.offsetTop, "content position");
-      let reference = document.getElementById('content_hidden_always_force');
-      assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
-    }, "overflow hidden, scrollbar-gutter always both force");
-
-    test(function () {
-      let container = document.getElementById('container_clip_always_both_force');
-      let content = document.getElementById('content_clip_always_both_force');
-      assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
-      assert_less_than(container.offsetTop, content.offsetTop, "content position");
-      let reference = document.getElementById('content_clip_always_force');
-      assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
-    }, "overflow clip, scrollbar-gutter always both force");
+    }, "overflow clip, scrollbar-gutter stable mirror");
 
     done();
 
diff --git a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-rl-001.html b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-rl-001.html
index d4eab0bd698c..4e630c943c41 100644
--- a/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-rl-001.html
+++ b/testing/web-platform/tests/css/css-overflow/scrollbar-gutter-vertical-rl-001.html
@@ -31,28 +31,17 @@
     background: lightsalmon;
   }
 
-  /* scrollbar-gutter
-     Note: not testing "stable" because the decision to use overlay scrollbars
-     is up to the browser. The "always" keyword takes effect regardless of
-     whether classical or overlay scrollbars are being used.*/
+  /* scrollbar-gutter */
   .sg_auto {
     scrollbar-gutter: auto;
   }
 
-  .sg_always {
-    scrollbar-gutter: always;
+  .sg_stable {
+    scrollbar-gutter: stable;
   }
 
-  .sg_always_both {
-    scrollbar-gutter: always both;
-  }
-
-  .sg_always_force {
-    scrollbar-gutter: always force;
-  }
-
-  .sg_always_both_force {
-    scrollbar-gutter: always both force;
+  .sg_stable_mirror {
+    scrollbar-gutter: stable mirror;
   }
 
   /* overflow */
@@ -73,7 +62,7 @@
   }
 
   .container.ov_clip {
-    overflow-x: clip;
+    overflow: clip;
   }
 </style>
 <body>
@@ -101,90 +90,46 @@
   </div>
 
   <div class="line">
-    <div class="container ov_auto sg_always" id="container_auto_always">
-      <div class="content" id="content_auto_always">auto/always</div>
+    <div class="container ov_auto sg_stable" id="container_auto_stable">
+      <div class="content" id="content_auto_stable">auto/stable</div>
     </div>
 
-    <div class="container ov_scroll sg_always" id="container_scroll_always">
-      <div class="content" id="content_scroll_always">scroll/always</div>
+    <div class="container ov_scroll sg_stable" id="container_scroll_stable">
+      <div class="content" id="content_scroll_stable">scroll/stable</div>
     </div>
 
-    <div class="container ov_visible sg_always" id="container_visible_always">
-      <div class="content" id="content_visible_always">visible/always</div>
+    <div class="container ov_visible sg_stable" id="container_visible_stable">
+      <div class="content" id="content_visible_stable">visible/stable</div>
     </div>
 
-    <div class="container ov_hidden sg_always" id="container_hidden_always">
-      <div class="content" id="content_hidden_always">hidden/always</div>
+    <div class="container ov_hidden sg_stable" id="container_hidden_stable">
+      <div class="content" id="content_hidden_stable">hidden/stable</div>
     </div>
 
-    <div class="container ov_clip sg_always" id="container_clip_always">
-      <div class="content" id="content_clip_always">clip/always</div>
+    <div class="container ov_clip sg_stable" id="container_clip_stable">
+      <div class="content" id="content_clip_stable">clip/stable</div>
     </div>
   </div>
 
   <div class="line">
-    <div class="container ov_auto sg_always_force" id="container_auto_always_force">
-      <div class="content" id="content_auto_always_force">auto/always force</div>
+    <div class="container ov_auto sg_stable_mirror" id="container_auto_stable_mirror">
+      <div class="content" id="content_auto_stable_mirror">auto/stable mirror</div>
     </div>
 
-    <div class="container ov_scroll sg_always_force" id="container_scroll_always_force">
-      <div class="content" id="content_scroll_always_force">scroll/always force</div>
+    <div class="container ov_scroll sg_stable_mirror" id="container_scroll_stable_mirror">
+      <div class="content" id="content_scroll_stable_mirror">scroll/stable mirror</div>
     </div>
 
-    <div class="container ov_visible sg_always_force" id="container_visible_always_force">
-      <div class="content" id="content_visible_always_force">visible/always force</div>
+    <div class="container ov_visible sg_stable_mirror" id="container_visible_stable_mirror">
+      <div class="content" id="content_visible_stable_mirror">visible/stable mirror</div>
     </div>
 
-    <div class="container ov_hidden sg_always_force" id="container_hidden_always_force">
-      <div class="content" id="content_hidden_always_force">hidden/always force</div>
+    <div class="container ov_hidden sg_stable_mirror" id="container_hidden_stable_mirror">
+      <div class="content" id="content_hidden_stable_mirror">hidden/stable mirror</div>
     </div>
 
-    <div class="container ov_clip sg_always_force" id="container_clip_always_force">
-      <div class="content" id="content_clip_always_force">clip/always force</div>
-    </div>
-  </div>
-
-  <div class="line">
-    <div class="container ov_auto sg_always_both" id="container_auto_always_both">
-      <div class="content" id="content_auto_always_both">auto/always both</div>
-    </div>
-
-    <div class="container ov_scroll sg_always_both" id="container_scroll_always_both">
-      <div class="content" id="content_scroll_always_both">scroll/always both</div>
-    </div>
-
-    <div class="container ov_visible sg_always_both" id="container_visible_always_both">
-      <div class="content" id="content_visible_always_both">visible/always both</div>
-    </div>
-
-    <div class="container ov_hidden sg_always_both" id="container_hidden_always_both">
-      <div class="content" id="content_hidden_always_both">hidden/always both</div>
-    </div>
-
-    <div class="container ov_clip sg_always_both" id="container_clip_always_both">
-      <div class="content" id="content_clip_always_both">clip/always both</div>
-    </div>
-  </div>
-
-  <div class="line">
-    <div class="container ov_auto sg_always_both_force" id="container_auto_always_both_force">
-      <div class="content" id="content_auto_always_both_force">auto/always both force</div>
-    </div>
-
-    <div class="container ov_scroll sg_always_both_force" id="container_scroll_always_both_force">
-      <div class="content" id="content_scroll_always_both_force">scroll/always both force</div>
-    </div>
-
-    <div class="container ov_visible sg_always_both_force" id="container_visible_always_both_force">
-      <div class="content" id="content_visible_always_both_force">visible/always both force</div>
-    </div>
-
-    <div class="container ov_hidden sg_always_both_force" id="container_hidden_always_both_force">
-      <div class="content" id="content_hidden_always_both_force">hidden/always both force</div>
-    </div>
-
-    <div class="container ov_clip sg_always_both_force" id="container_clip_always_both_force">
-      <div class="content" id="content_clip_always_both_force">clip/always both force</div>
+    <div class="container ov_clip sg_stable_mirror" id="container_clip_stable_mirror">
+      <div class="content" id="content_clip_stable_mirror">clip/stable mirror</div>
     </div>
   </div>
 
@@ -229,167 +174,85 @@
       assert_equals(container.offsetTop, content.offsetTop, "content position");
     }, "overflow clip, scrollbar-gutter auto");
 
-    // scrollbar-gutter: always
+    // scrollbar-gutter: stable
 
     test(function () {
-      let container = document.getElementById('container_auto_always');
-      let content = document.getElementById('content_auto_always');
+      let container = document.getElementById('container_auto_stable');
+      let content = document.getElementById('content_auto_stable');
       assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
       assert_equals(container.offsetTop, content.offsetTop, "content position");
-    }, "overflow auto, scrollbar-gutter always");
+    }, "overflow auto, scrollbar-gutter stable");
 
     test(function () {
-      let container = document.getElementById('container_scroll_always');
-      let content = document.getElementById('content_scroll_always');
+      let container = document.getElementById('container_scroll_stable');
+      let content = document.getElementById('content_scroll_stable');
       assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
       assert_equals(container.offsetTop, content.offsetTop, "content position");
-    }, "overflow scroll, scrollbar-gutter always");
+    }, "overflow scroll, scrollbar-gutter stable");
 
     test(function () {
-      let container = document.getElementById('container_visible_always');
-      let content = document.getElementById('content_visible_always');
+      let container = document.getElementById('container_visible_stable');
+      let content = document.getElementById('content_visible_stable');
       assert_equals(container.offsetHeight, content.offsetHeight, "content height");
       assert_equals(container.offsetTop, content.offsetTop, "content position");
-    }, "overflow visible, scrollbar-gutter always");
+    }, "overflow visible, scrollbar-gutter stable");
 
     test(function () {
-      let container = document.getElementById('container_hidden_always');
-      let content = document.getElementById('content_hidden_always');
+      let container = document.getElementById('container_hidden_stable');
+      let content = document.getElementById('content_hidden_stable');
+      assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
+      assert_equals(container.offsetTop, content.offsetTop, "content position");
+    }, "overflow hidden, scrollbar-gutter stable");
+
+    test(function () {
+      let container = document.getElementById('container_clip_stable');
+      let content = document.getElementById('content_clip_stable');
       assert_equals(container.offsetHeight, content.offsetHeight, "content height");
       assert_equals(container.offsetTop, content.offsetTop, "content position");
-    }, "overflow hidden, scrollbar-gutter always");
+    }, "overflow clip, scrollbar-gutter stable");
+
+    // scrollbar-gutter: stable mirror
 
     test(function () {
-      let container = document.getElementById('container_clip_always');
-      let content = document.getElementById('content_clip_always');
+      let container = document.getElementById('container_auto_stable_mirror');
+      let content = document.getElementById('content_auto_stable_mirror');
+      assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
+      assert_less_than(container.offsetTop, content.offsetTop, "content position");
+      let reference = document.getElementById('content_auto_stable');
+      assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\"");
+    }, "overflow auto, scrollbar-gutter stable mirror");
+
+    test(function () {
+      let container = document.getElementById('container_scroll_stable_mirror');
+      let content = document.getElementById('content_scroll_stable_mirror');
+      assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
+      assert_less_than(container.offsetTop, content.offsetTop, "content position");
+      let reference = document.getElementById('content_auto_stable');
+      assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\"");
+    }, "overflow scroll, scrollbar-gutter stable mirror");
+
+    test(function () {
+      let container = document.getElementById('container_visible_stable_mirror');
+      let content = document.getElementById('content_visible_stable_mirror');
       assert_equals(container.offsetHeight, content.offsetHeight, "content height");
       assert_equals(container.offsetTop, content.offsetTop, "content position");
-    }, "overflow clip, scrollbar-gutter always");
-
-    // scrollbar-gutter: always force
+    }, "overflow visible, scrollbar-gutter stable mirror");
 
     test(function () {
-      let container = document.getElementById('container_auto_always_force');
-      let content = document.getElementById('content_auto_always_force');
-      assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
-      assert_equals(container.offsetTop, content.offsetTop, "content position");
-    }, "overflow auto, scrollbar-gutter always force");
-
-    test(function () {
-      let container = document.getElementById('container_scroll_always_force');
-      let content = document.getElementById('content_scroll_always_force');
-      assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
-      assert_equals(container.offsetTop, content.offsetTop, "content position");
-    }, "overflow scroll, scrollbar-gutter always force");
-
-    test(function () {
-      let container = document.getElementById('container_visible_always_force');
-      let content = document.getElementById('content_visible_always_force');
-      assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
-      assert_equals(container.offsetTop, content.offsetTop, "content position");
-    }, "overflow visible, scrollbar-gutter always force");
-
-    test(function () {
-      let container = document.getElementById('container_hidden_always_force');
-      let content = document.getElementById('content_hidden_always_force');
-      assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
-      assert_equals(container.offsetTop, content.offsetTop, "content position");
-    }, "overflow hidden, scrollbar-gutter always force");
-
-    test(function () {
-      let container = document.getElementById('container_clip_always_force');
-      let content = document.getElementById('content_clip_always_force');
-      assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
-      assert_equals(container.offsetTop, content.offsetTop, "content position");
-    }, "overflow clip, scrollbar-gutter always force");
-
-    // scrollbar-gutter: always both
-
-    test(function () {
-      let container = document.getElementById('container_auto_always_both');
-      let content = document.getElementById('content_auto_always_both');
+      let container = document.getElementById('container_hidden_stable_mirror');
+      let content = document.getElementById('content_hidden_stable_mirror');
       assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
       assert_less_than(container.offsetTop, content.offsetTop, "content position");
-      let reference = document.getElementById('content_auto_always');
-      assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always\"");
-    }, "overflow auto, scrollbar-gutter always both");
+      let reference = document.getElementById('content_auto_stable');
+      assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\"");
+    }, "overflow hidden, scrollbar-gutter stable mirror");
 
     test(function () {
-      let container = document.getElementById('container_scroll_always_both');
-      let content = document.getElementById('content_scroll_always_both');
-      assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
-      assert_less_than(container.offsetTop, content.offsetTop, "content position");
-      let reference = document.getElementById('content_auto_always');
-      assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always\"");
-    }, "overflow scroll, scrollbar-gutter always both");
-
-    test(function () {
-      let container = document.getElementById('container_visible_always_both');
-      let content = document.getElementById('content_visible_always_both');
+      let container = document.getElementById('container_clip_stable_mirror');
+      let content = document.getElementById('content_clip_stable_mirror');
       assert_equals(container.offsetHeight, content.offsetHeight, "content height");
       assert_equals(container.offsetTop, content.offsetTop, "content position");
-    }, "overflow visible, scrollbar-gutter always both");
-
-    test(function () {
-      let container = document.getElementById('container_hidden_always_both');
-      let content = document.getElementById('content_hidden_always_both');
-      assert_equals(container.offsetHeight, content.offsetHeight, "content height");
-      assert_equals(container.offsetTop, content.offsetTop, "content position");
-    }, "overflow hidden, scrollbar-gutter always both");
-
-    test(function () {
-      let container = document.getElementById('container_clip_always_both');
-      let content = document.getElementById('content_clip_always_both');
-      assert_equals(container.offsetHeight, content.offsetHeight, "content height");
-      assert_equals(container.offsetTop, content.offsetTop, "content position");
-    }, "overflow clip, scrollbar-gutter always both");
-
-    // scrollbar-gutter: always both force
-
-    test(function () {
-      let container = document.getElementById('container_auto_always_both_force');
-      let content = document.getElementById('content_auto_always_both_force');
-      assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
-      assert_less_than(container.offsetTop, content.offsetTop, "content position");
-      let reference = document.getElementById('content_auto_always_force');
-      assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
-    }, "overflow auto, scrollbar-gutter always both force");
-
-    test(function () {
-      let container = document.getElementById('container_scroll_always_both_force');
-      let content = document.getElementById('content_scroll_always_both_force');
-      assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
-      assert_less_than(container.offsetTop, content.offsetTop, "content position");
-      let reference = document.getElementById('content_scroll_always_force');
-      assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
-    }, "overflow scroll, scrollbar-gutter always both force");
-
-    test(function () {
-      let container = document.getElementById('container_visible_always_both_force');
-      let content = document.getElementById('content_visible_always_both_force');
-      assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
-      assert_less_than(container.offsetTop, content.offsetTop, "content position");
-      let reference = document.getElementById('content_visible_always_force');
-      assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
-    }, "overflow visible, scrollbar-gutter always both force");
-
-    test(function () {
-      let container = document.getElementById('container_hidden_always_both_force');
-      let content = document.getElementById('content_hidden_always_both_force');
-      assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
-      assert_less_than(container.offsetTop, content.offsetTop, "content position");
-      let reference = document.getElementById('content_hidden_always_force');
-      assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
-    }, "overflow hidden, scrollbar-gutter always both force");
-
-    test(function () {
-      let container = document.getElementById('container_clip_always_both_force');
-      let content = document.getElementById('content_clip_always_both_force');
-      assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
-      assert_less_than(container.offsetTop, content.offsetTop, "content position");
-      let reference = document.getElementById('content_clip_always_force');
-      assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
-    }, "overflow clip, scrollbar-gutter always both force");
+    }, "overflow clip, scrollbar-gutter stable mirror");
 
     done();
 
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
index af50cd25215d..21dfd3d1165f 100644
--- a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-001.html
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-001.html
@@ -7,10 +7,9 @@
 <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. */
+  /* Use scrollbar-gutter to reserve space for the scrollbar. */
   .container {
-    scrollbar-gutter: always;
+    scrollbar-gutter: stable;
     writing-mode: horizontal-tb;
     overflow: auto;
     height: 200px;
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
index 89a5d772182d..15e6af963b7b 100644
--- a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-002.html
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-002.html
@@ -7,10 +7,9 @@
 <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. */
+  /* Use scrollbar-gutter to reserve space for the scrollbar. */
   .container {
-    scrollbar-gutter: always;
+    scrollbar-gutter: stable;
     overflow: auto;
     height: 200px;
     width: 200px;
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
index e0c1e59d051f..7574e8daf611 100644
--- a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-003.html
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-003.html
@@ -7,10 +7,9 @@
 <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. */
+  /* Use scrollbar-gutter to reserve space for the scrollbar. */
   .container {
-    scrollbar-gutter: always;
+    scrollbar-gutter: stable;
     writing-mode: horizontal-tb;
     overflow: auto;
     height: 200px;
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
index ee8bab0f0066..bdd1cd61db72 100644
--- a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-004.html
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-004.html
@@ -7,10 +7,9 @@
 <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. */
+  /* Use scrollbar-gutter to reserve space for the scrollbar. */
   .container {
-    scrollbar-gutter: always;
+    scrollbar-gutter: stable;
     writing-mode: horizontal-tb;
     overflow: auto;
     height: 200px;
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
index ea5f77afad0f..62313f021699 100644
--- a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-005.html
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-005.html
@@ -11,9 +11,8 @@
     /* 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;
+    /* Use scrollbar-gutter to reserve space for the scrollbar. */
+    scrollbar-gutter: stable;
   }
 
   :root,
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
index 3b1cc0ba59d4..488e24d554b9 100644
--- a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-006.html
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-006.html
@@ -11,9 +11,8 @@
     /* 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;
+    /* Use scrollbar-gutter to reserve space for the scrollbar. */
+    scrollbar-gutter: stable;
   }
 
   :root,
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
index c40a7a8e99ac..500c7ef09053 100644
--- a/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-007.html
+++ b/testing/web-platform/tests/css/css-scrollbars/scrollbar-width-007.html
@@ -11,9 +11,8 @@
     /* 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;
+    /* Use scrollbar-gutter to reserve space for the scrollbar. */
+    scrollbar-gutter: stable;
   }
 
   :root,
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
index 2e7d40d9a35f..42295b1fb9d7 100644
--- 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
@@ -6,7 +6,7 @@
   }
 
   .container {
-    scrollbar-gutter: always;
+    scrollbar-gutter: stable;
     flex: 0 0;
     overflow: auto;
     height: 200px;
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
index 5318a24fb159..3621a65b39ed 100644
--- 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
@@ -12,7 +12,7 @@
   }
 
   .container {
-    scrollbar-gutter: always;
+    scrollbar-gutter: stable;
     overflow: auto;
     flex: 0 0;
     height: 200px;
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
index 2d00629e6129..001495767f50 100644
--- 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
@@ -6,7 +6,7 @@
   }
 
   .container {
-    scrollbar-gutter: always;
+    scrollbar-gutter: stable;
     overflow: scroll;
     flex: 0 0;
     height: 200px;
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
index 4a18977a7e4e..1b3965032b0c 100644
--- 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
@@ -12,7 +12,7 @@
   }
 
   .container {
-    scrollbar-gutter: always;
+    scrollbar-gutter: stable;
     overflow: scroll;
     flex: 0 0;
     height: 200px;
diff --git a/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/scrollbar-gutter.html b/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/scrollbar-gutter.html
index aeab1cb1143f..82f1069769ab 100644
--- a/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/scrollbar-gutter.html
+++ b/testing/web-platform/tests/css/css-typed-om/the-stylepropertymap/properties/scrollbar-gutter.html
@@ -15,16 +15,10 @@
 
 runPropertyTests('scrollbar-gutter', [
     { syntax: 'auto' },
-    { syntax: 'stable' },
-    { syntax: 'always' },
+    { syntax: 'stable' }
 ]);
 runUnsupportedPropertyTests('scrollbar-gutter', [
-    'stable both',
-    'stable force',
-    'stable both force',
-    'always both',
-    'always force',
-    'always both force'
+    'stable mirror'
 ]);
 
 </script>