Update web-platform-tests to revision b'468d01bbd84da2babf265c6af46947be68713440'

author: WPT Sync Bot <josh+wptsync@joshmatthews.net> 2021-09-07 11:16:33 +0000
committer: cybai <cyb.ai.815@gmail.com> 2022-01-17 16:30:29 +0900
commit: 58e8ee674b032274959b4461fd46ceda8f709e96 (patch)
tree: 4953c044dba6b52224d5144747af1bc3773a7ebc /tests/wpt/web-platform-tests/css/css-overflow
parent: 35e95f55a1b9e488d1c796c8fb39d764d090d660 (diff)
download: servo-58e8ee674b032274959b4461fd46ceda8f709e96.tar.gz
servo-58e8ee674b032274959b4461fd46ceda8f709e96.zip
39 files changed, 1421 insertions, 828 deletions
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/overflow-body-propagation-011-ref.html b/tests/wpt/web-platform-tests/css/css-overflow/overflow-body-propagation-011-ref.html
new file mode 100644
index 00000000000..0d440ef20af
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/overflow-body-propagation-011-ref.html
@@ -0,0 +1,4 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<div style="overflow:scroll">PASS if BODY has scrollbars, but not viewport.</div>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/overflow-body-propagation-011.html b/tests/wpt/web-platform-tests/css/css-overflow/overflow-body-propagation-011.html
new file mode 100644
index 00000000000..c8672c2af2e
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/overflow-body-propagation-011.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test: HTML root containment stops overflow propagation from BODY</title>
+<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-propagation">
+<link rel="match" href="overflow-body-propagation-011-ref.html">
+<style>
+  html {
+    contain: paint;
+  }
+  body {
+    overflow: scroll;
+  }
+</style>
+<body>PASS if BODY has scrollbars, but not viewport.</body>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/overflow-inline-block-with-opacity.html b/tests/wpt/web-platform-tests/css/css-overflow/overflow-inline-block-with-opacity.html
new file mode 100644
index 00000000000..20288f8a0d5
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/overflow-inline-block-with-opacity.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#propdef-opacity">
+<link rel="help" href="https://crbug.com/1237054">
+<link rel="author" title="mailto:kojii@chromium.org">
+<link rel="match" href="reference/overflow-inline-block-with-opacity-ref.html">
+<style>
+  span { opacity: 0.99; }
+  #button { display: inline-block; inline-size: 0px; }
+</style>
+<span>
+  <div id="button">hello world</div>
+</span>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/overflow-no-frameset-propagation.html b/tests/wpt/web-platform-tests/css/css-overflow/overflow-no-frameset-propagation.html
new file mode 100644
index 00000000000..687adbe0bce
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/overflow-no-frameset-propagation.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<title>CSS Overflow Test: Frameset overflow does not propagate to viewport</title>
+<meta name="assert" content="The computed overflow should not propagate from frameset to thte viewport">
+<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-propagation">
+<link rel="match" href="/common/blank.html">
+<frameset style="overflow:scroll"></frameset>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/overflow-padding.html b/tests/wpt/web-platform-tests/css/css-overflow/overflow-padding.html
index 963192f6f43..a77cac381fb 100644
--- a/tests/wpt/web-platform-tests/css/css-overflow/overflow-padding.html
+++ b/tests/wpt/web-platform-tests/css/css-overflow/overflow-padding.html
@@ -84,10 +84,10 @@
 </div>
 <script>
   function hasHorizontalScrollbar(el) {
-    return (el.offsetHeight - el.clientHeight) > 0;
+    return (el.scrollWidth - el.offsetWidth) > 0;
   }
   function hasVerticalScrollbar(el) {
-    return (el.offsetWidth - el.clientWidth) > 0;
+    return (el.scrollHeight - el.offsetHeight) > 0;
   }
   // Tests needs to be run after load.
   function runTest() {
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/overflow-scroll-resize-visibility-hidden-ref.html b/tests/wpt/web-platform-tests/css/css-overflow/overflow-scroll-resize-visibility-hidden-ref.html
new file mode 100644
index 00000000000..571ba348df4
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/overflow-scroll-resize-visibility-hidden-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<style>
+.scroller {
+  width: 100px;
+  height: 100px;
+  overflow: scroll;
+  /* to make the scroller a white mask over the content */
+  filter: brightness(0) invert(1);
+  position: relative;
+  top: -200px;
+}
+.content {
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+</style>
+<div class="content"></div>
+<div class="content"></div>
+<div class="scroller"></div>
+<div class="scroller"></div>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/overflow-scroll-resize-visibility-hidden.html b/tests/wpt/web-platform-tests/css/css-overflow/overflow-scroll-resize-visibility-hidden.html
new file mode 100644
index 00000000000..e8d0bc91440
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/overflow-scroll-resize-visibility-hidden.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>CSS Overflow: overflow: scroll with resize: both and visibility: hidden</title>
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3#propdef-overflow">
+<link rel="match" href="overflow-scroll-resize-visibility-hidden-ref.html">
+<style>
+.scroller {
+  overflow: scroll;
+  width: 100px;
+  height: 100px;
+  resize: both;
+  visibility: hidden;
+}
+.content {
+  width: 1000px;
+  height: 1000px;
+  background: green;
+  visibility: visible;
+}
+</style>
+<div class="scroller">
+  <div class="content"></div>
+</div>
+<div class="scroller" style="will-change: transform">
+  <div class="content"></div>
+</div>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/parsing/scrollbar-gutter-invalid.html b/tests/wpt/web-platform-tests/css/css-overflow/parsing/scrollbar-gutter-invalid.html
index bfddfcc5630..4f669225ee4 100644
--- a/tests/wpt/web-platform-tests/css/css-overflow/parsing/scrollbar-gutter-invalid.html
+++ b/tests/wpt/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/tests/wpt/web-platform-tests/css/css-overflow/parsing/scrollbar-gutter-valid.html b/tests/wpt/web-platform-tests/css/css-overflow/parsing/scrollbar-gutter-valid.html
index 07a5c1acc02..97ac6afec6d 100644
--- a/tests/wpt/web-platform-tests/css/css-overflow/parsing/scrollbar-gutter-valid.html
+++ b/tests/wpt/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 both-edges");
 
-    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", "both-edges stable", "stable both-edges");
 
 </script>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/reference/overflow-inline-block-with-opacity-ref.html b/tests/wpt/web-platform-tests/css/css-overflow/reference/overflow-inline-block-with-opacity-ref.html
new file mode 100644
index 00000000000..1b37bfffb78
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/reference/overflow-inline-block-with-opacity-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<style>
+  span { opacity: 0.99; }
+  #button { display: inline-block; }
+</style>
+<span>
+  <div id="button">hello<br>world</div>
+</span>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/reference/webkit-line-clamp-038-ref.html b/tests/wpt/web-platform-tests/css/css-overflow/reference/webkit-line-clamp-038-ref.html
new file mode 100644
index 00000000000..bd8db762dd8
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/reference/webkit-line-clamp-038-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<style>
+.clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  font: 16px / 32px serif;
+  background-color: yellow;
+  overflow: hidden;
+}
+</style>
+<div class="clamp">
+  <div>
+    Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5
+  </div>
+</div>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/reference/webkit-line-clamp-039-ref.html b/tests/wpt/web-platform-tests/css/css-overflow/reference/webkit-line-clamp-039-ref.html
new file mode 100644
index 00000000000..fd8a76b2f8e
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/reference/webkit-line-clamp-039-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<style>
+.clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
+  font: 16px / 32px serif;
+  background-color: yellow;
+  overflow: hidden;
+}
+</style>
+<div class="clamp">
+  <div>
+    Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6
+  </div>
+</div>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-input-001-ref.html b/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-input-001-ref.html
new file mode 100644
index 00000000000..151843a72c0
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-input-001-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow Reference: Test the text in an input is not clipped and reachable</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="stylesheet" href="/fonts/ahem.css">
+
+<style>
+input {
+  box-sizing: border-box;
+  width: 160px;
+  padding-inline: 40px 60px;
+  background: yellow;
+  font: 20px/1 Ahem;
+  border: 0;
+}
+</style>
+
+<input value="XpX">
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-input-001.html b/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-input-001.html
new file mode 100644
index 00000000000..1b58803079f
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-input-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow Test: Test the text in an input is not clipped and reachable</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1715291">
+<link rel="match" href="scrollable-overflow-input-001-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+
+<style>
+input {
+  box-sizing: border-box;
+  width: 160px;
+  padding-inline: 20px 60px;
+  background: yellow;
+  font: 20px/1 Ahem;
+  border: 0;
+}
+</style>
+
+<!-- The total width of the text (120px) must be less than the <input>'s
+     width (160px) to reproduce this bug.  -->
+<input id="input" value="X  XpX">
+
+<script>
+document.getElementById('input').scrollLeft = 1000;
+</script>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-input-002-ref.html b/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-input-002-ref.html
new file mode 100644
index 00000000000..782ffab9da1
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-input-002-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow Reference: Test the text in an input is not clipped and reachable</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="stylesheet" href="/fonts/ahem.css">
+
+<style>
+input {
+  box-sizing: border-box;
+  width: 160px;
+  padding-inline: 40px 60px;
+  background: yellow;
+  font: 20px/1 Ahem;
+  border: 0;
+  direction: rtl;
+}
+</style>
+
+<input value="XpX">
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-input-002.html b/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-input-002.html
new file mode 100644
index 00000000000..3efebf0b90d
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-input-002.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow Test: Test the text in an input is not clipped and reachable</title>
+<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1715291">
+<link rel="match" href="scrollable-overflow-input-002-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+
+<style>
+input {
+  box-sizing: border-box;
+  width: 160px;
+  padding-inline: 20px 60px;
+  background: yellow;
+  font: 20px/1 Ahem;
+  border: 0;
+  direction: rtl;
+}
+</style>
+
+<!-- The total width of the text (120px) must be less than the <input>'s
+     width (160px) to reproduce this bug.  -->
+<input id="input2" value="XpX  X">
+
+<script>
+document.getElementById('input2').scrollLeft = -1000;
+</script>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-textarea.html b/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-textarea.html
new file mode 100644
index 00000000000..2be500bc8b0
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-textarea.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <meta charset="utf-8">
+  <title>CSS Overflow Test: Test padding in included in the texarea's scrollable overflow area</title>
+  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
+  <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
+  <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable">
+  <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1527949">
+  <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1696885">
+  <link rel="stylesheet" href="/fonts/ahem.css">
+
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <script src="/resources/check-layout-th.js"></script>
+
+  <style>
+  textarea {
+    width: 100px;
+    height: 50px;
+    padding: 11px 13px 17px 19px;
+    font: 20px/1 Ahem;
+    background: yellow content-box;
+    border: 0;
+    outline: 1px solid blue;
+    overflow: hidden;
+  }
+  </style>
+
+  <body onload="checkLayout('#textarea')">
+    <!-- Expected scroll width 132px =
+           width:100px + padding-left:19px + padding-right:13px.
+         Expected scroll height 128px =
+           5 lines of 20px height + padding-top:11px + padding-bottom:17px -->
+    <textarea id="textarea" data-expected-scroll-width="132" data-expected-scroll-height="128">XXXXX XXXXX XXXXX XXXXX XXXXX</textarea>
+  </body>
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-transform-001.html b/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-transform-001.html
new file mode 100644
index 00000000000..f2bac4041eb
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-transform-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: Scrollable Overflow Transform</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
+<meta name="assert" content="Checks that elements with transform contribute to the scrollable overflow.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<style>
+  .container {
+    width: 100px;
+    height: 100px;
+    overflow: auto;
+    background: silver;
+    border: solid thick;
+  }
+
+  .element {
+    width: 50px;
+    height: 50px;
+    background: lime;
+  }
+</style>
+<body onload="checkLayout('.container')">
+
+  <div class="container" data-expected-scroll-width="250">
+    <div style="transform: translateX(200px);" class="element"></div>
+  </div>
+
+  <div class="container" data-expected-scroll-height="350">
+    <div style="transform: translateY(300px);" class="element"></div>
+  </div>
+
+  <div class="container" data-expected-scroll-width="250" data-expected-scroll-height="350">
+    <div style="transform: translate(200px, 300px);" class="element"></div>
+  </div>
+
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-transform-002.html b/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-transform-002.html
new file mode 100644
index 00000000000..e69fec13420
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-transform-002.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: Scrollable Overflow Transform Positioned Element</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
+<meta name="assert" content="Checks that elements with transform contribute to the scrollable overflow on a positioned element.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<style>
+  .container {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    overflow: auto;
+    background: silver;
+    border: solid thick;
+  }
+
+  .element {
+    width: 50px;
+    height: 50px;
+    background: lime;
+  }
+</style>
+<body onload="checkLayout('.container')">
+  <div style="position: relative;">
+
+    <div class="container" style="top: 0px;" data-expected-scroll-width="250">
+      <div style="transform: translateX(200px);" class="element"></div>
+    </div>
+
+    <div class="container" style="top: 150px;" data-expected-scroll-height="350">
+      <div style="transform: translateY(300px);" class="element"></div>
+    </div>
+
+    <div class="container" style="top: 300px;" data-expected-scroll-width="250" data-expected-scroll-height="350">
+      <div style="transform: translate(200px, 300px);" class="element"></div>
+    </div>
+
+  </div>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-transform-003.html b/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-transform-003.html
new file mode 100644
index 00000000000..bf6c635760d
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-transform-003.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: Scrollable Overflow Transform Inline Element</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
+<meta name="assert" content="Checks that elements with transform contribute to the scrollable overflow on an inline element.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<style>
+  .container {
+    display: inline-block;
+    width: 100px;
+    height: 100px;
+    overflow: auto;
+    background: silver;
+    border: solid thick;
+  }
+
+  .element {
+    width: 50px;
+    height: 50px;
+    background: lime;
+  }
+</style>
+<body onload="checkLayout('.container')">
+
+  <div class="container" style="top: 0px;" data-expected-scroll-width="250">
+    <div style="transform: translateX(200px);" class="element"></div>
+  </div>
+
+  <div class="container" style="top: 150px;" data-expected-scroll-height="350">
+    <div style="transform: translateY(300px);" class="element"></div>
+  </div>
+
+  <div class="container" style="top: 300px;" data-expected-scroll-width="250" data-expected-scroll-height="350">
+    <div style="transform: translate(200px, 300px);" class="element"></div>
+  </div>
+
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-transform-dynamic-001.html b/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-transform-dynamic-001.html
new file mode 100644
index 00000000000..52d1f5bc63e
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-transform-dynamic-001.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: Scrollable Overflow Transform Dynamic</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
+<meta name="assert" content="Checks that changes on an element's transform contribute to the scrollable overflow.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  .container {
+    width: 100px;
+    height: 100px;
+    overflow: auto;
+    background: silver;
+    border: solid thick;
+  }
+
+  .element {
+    width: 50px;
+    height: 50px;
+    background: lime;
+  }
+</style>
+
+<div id="container1" class="container">
+  <div id="element1" style="transform: translateX(20px);" class="element"></div>
+</div>
+
+<div id="container2" class="container">
+  <div id="element2" style="transform: translateY(30px);" class="element"></div>
+</div>
+
+<div id="container3" class="container">
+  <div id="element3" style="transform: translate(20px, 30px);" class="element"></div>
+</div>
+
+<script>
+  test(() => {
+    assert_equals(container1.scrollWidth, 100);
+    element1.style.transform = "translateX(200px)";
+    assert_equals(container1.scrollWidth, 250);
+  }, "Check scrollWidth before and after transform chage");
+
+  test(() => {
+    assert_equals(container2.scrollHeight, 100);
+    element2.style.transform = "translateY(300px)";
+    assert_equals(container2.scrollHeight, 350);
+  }, "Check scrollHeight before and after transform chage");
+
+  test(() => {
+    assert_equals(container3.scrollWidth, 100);
+    assert_equals(container3.scrollHeight, 100);
+    element3.style.transform = "translate(200px, 300px)";
+    assert_equals(container3.scrollWidth, 250);
+    assert_equals(container3.scrollHeight, 350);
+  }, "Check scrollWidth and scrollHeight before and after transform chage");
+</script>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-transform-dynamic-002.html b/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-transform-dynamic-002.html
new file mode 100644
index 00000000000..baa9ae7a06e
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-transform-dynamic-002.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: Scrollable Overflow Transform Dynamic Positioned Element</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
+<meta name="assert" content="Checks that changes on an element's transform contribute to the scrollable overflow on a positioned element.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  .container {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    overflow: auto;
+    background: silver;
+    border: solid thick;
+  }
+
+  .element {
+    width: 50px;
+    height: 50px;
+    background: lime;
+  }
+</style>
+
+<div style="position: relative;">
+
+  <div id="container1" style="top: 0px;" class="container">
+    <div id="element1" style="transform: translateX(20px);" class="element"></div>
+  </div>
+
+  <div id="container2" style="top: 150px;"  class="container">
+    <div id="element2" style="transform: translateY(30px);" class="element"></div>
+  </div>
+
+  <div id="container3" style="top: 300px;"  class="container">
+    <div id="element3" style="transform: translate(20px, 30px);" class="element"></div>
+  </div>
+
+</div>
+
+<script>
+  test(() => {
+    assert_equals(container1.scrollWidth, 100);
+    element1.style.transform = "translateX(200px)";
+    assert_equals(container1.scrollWidth, 250);
+  }, "Check scrollWidth before and after transform chage");
+
+  test(() => {
+    assert_equals(container2.scrollHeight, 100);
+    element2.style.transform = "translateY(300px)";
+    assert_equals(container2.scrollHeight, 350);
+  }, "Check scrollHeight before and after transform chage");
+
+  test(() => {
+    assert_equals(container3.scrollWidth, 100);
+    assert_equals(container3.scrollHeight, 100);
+    element3.style.transform = "translate(200px, 300px)";
+    assert_equals(container3.scrollWidth, 250);
+    assert_equals(container3.scrollHeight, 350);
+  }, "Check scrollWidth and scrollHeight before and after transform chage");
+</script>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-transform-dynamic-003.html b/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-transform-dynamic-003.html
new file mode 100644
index 00000000000..0a6d90bbaf7
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-transform-dynamic-003.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: Scrollable Overflow Transform Dynamic Inline Element</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
+<meta name="assert" content="Checks that changes on an element's transform contribute to the scrollable overflow on an inline element.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  .container {
+    display: inline-block;
+    width: 100px;
+    height: 100px;
+    overflow: auto;
+    background: silver;
+    border: solid thick;
+  }
+
+  .element {
+    width: 50px;
+    height: 50px;
+    background: lime;
+  }
+</style>
+
+<div id="container1" style="top: 0px;" class="container">
+  <div id="element1" style="transform: translateX(20px);" class="element"></div>
+</div>
+
+<div id="container2" style="top: 150px;"  class="container">
+  <div id="element2" style="transform: translateY(30px);" class="element"></div>
+</div>
+
+<div id="container3" style="top: 300px;"  class="container">
+  <div id="element3" style="transform: translate(20px, 30px);" class="element"></div>
+</div>
+
+<script>
+  test(() => {
+    assert_equals(container1.scrollWidth, 100);
+    element1.style.transform = "translateX(200px)";
+    assert_equals(container1.scrollWidth, 250);
+  }, "Check scrollWidth before and after transform chage");
+
+  test(() => {
+    assert_equals(container2.scrollHeight, 100);
+    element2.style.transform = "translateY(300px)";
+    assert_equals(container2.scrollHeight, 350);
+  }, "Check scrollHeight before and after transform chage");
+
+  test(() => {
+    assert_equals(container3.scrollWidth, 100);
+    assert_equals(container3.scrollHeight, 100);
+    element3.style.transform = "translate(200px, 300px)";
+    assert_equals(container3.scrollWidth, 250);
+    assert_equals(container3.scrollHeight, 350);
+  }, "Check scrollWidth and scrollHeight before and after transform chage");
+</script>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-transform-dynamic-004.html b/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-transform-dynamic-004.html
new file mode 100644
index 00000000000..a23954e1def
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-transform-dynamic-004.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: Scrollable Overflow Transform Dynamic Position Change</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
+<meta name="assert" content="Checks that changes on an element's transform contribute to the scrollable overflow, even when some element has changed position too.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  .container {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    overflow: auto;
+    background: silver;
+    border: solid thick;
+  }
+
+  .element {
+    width: 50px;
+    height: 50px;
+    background: lime;
+  }
+</style>
+
+<div id="container1" style="top: 100px;" class="container">
+  <div id="element1" style="transform: translateX(20px);" class="element"></div>
+</div>
+
+<div id="container2" style="top: 250px;" class="container">
+  <div id="element2" style="transform: translateY(30px);" class="element"></div>
+</div>
+
+<div id="container3" style="top: 400px;" class="container">
+  <div id="element3" style="transform: translate(20px, 30px);" class="element"></div>
+</div>
+
+<script>
+  test(() => {
+    assert_equals(container1.scrollWidth, 100);
+    container1.style.top = "110px";
+    element1.style.transform = "translateX(200px)";
+    assert_equals(container1.scrollWidth, 250);
+  }, "Check scrollWidth before and after position and transform chage");
+
+  test(() => {
+    assert_equals(container2.scrollHeight, 100);
+    container2.style.top = "260px";
+    element2.style.transform = "translateY(300px)";
+    assert_equals(container2.scrollHeight, 350);
+  }, "Check scrollHeight before and after position and transform chage");
+
+  test(() => {
+    assert_equals(container3.scrollWidth, 100);
+    assert_equals(container3.scrollHeight, 100);
+    container3.style.top = "410px";
+    element3.style.transform = "translate(200px, 300px)";
+    assert_equals(container3.scrollWidth, 250);
+    assert_equals(container3.scrollHeight, 350);
+  }, "Check scrollWidth and scrollHeight after position and transform chage");
+</script>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-transform-dynamic-005.html b/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-transform-dynamic-005.html
new file mode 100644
index 00000000000..845c28f12a1
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-transform-dynamic-005.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: Scrollable Overflow Transform Dynamic DOM Manipulation</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
+<meta name="assert" content="Checks that changes on an element's transform contribute to the scrollable overflow, even when some new element has been added to the DOM tree.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  .container {
+    width: 100px;
+    height: 100px;
+    overflow: auto;
+    background: silver;
+    border: solid thick;
+  }
+
+  .element {
+    width: 50px;
+    height: 50px;
+    background: lime;
+  }
+</style>
+
+<div id="container1" class="container">
+  <div id="element1" style="transform: translateX(20px);" class="element"></div>
+</div>
+
+<div id="container2" class="container">
+  <div id="element2" style="transform: translateY(30px);" class="element"></div>
+</div>
+
+<div id="container3" class="container">
+  <div id="element3" style="transform: translate(20px, 30px);" class="element"></div>
+</div>
+
+<script>
+  test(() => {
+    assert_equals(container1.scrollWidth, 100);
+    document.body.appendChild(document.createElement("div"));
+    element1.style.transform = "translateX(200px)";
+    assert_equals(container1.scrollWidth, 250);
+  }, "Check scrollWidth before and after appendChild() and transform chage");
+
+  test(() => {
+    assert_equals(container2.scrollHeight, 100);
+    document.body.appendChild(document.createElement("div"));
+    element2.style.transform = "translateY(300px)";
+    assert_equals(container2.scrollHeight, 350);
+  }, "Check scrollHeight before and after appendChild() and transform chage");
+
+  test(() => {
+    assert_equals(container3.scrollWidth, 100);
+    assert_equals(container3.scrollHeight, 100);
+    document.body.appendChild(document.createElement("div"));
+    element3.style.transform = "translate(200px, 300px)";
+    assert_equals(container3.scrollWidth, 250);
+    assert_equals(container3.scrollHeight, 350);
+  }, "Check scrollWidth and scrollHeight before and after appendChild() and transform chage");
+</script>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-transform-dynamic-006.html b/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-transform-dynamic-006.html
new file mode 100644
index 00000000000..8e21512bdb9
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/scrollable-overflow-transform-dynamic-006.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: Scrollable Overflow Transform Dynamic DOM Manipulation</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
+<meta name="assert" content="Checks that changes on an element's transform contribute to the scrollable overflow, even when some new element has been removed from the DOM tree.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  .container {
+    width: 100px;
+    height: 100px;
+    overflow: auto;
+    background: silver;
+    border: solid thick;
+  }
+
+  .element {
+    width: 50px;
+    height: 50px;
+    background: lime;
+  }
+</style>
+
+<div id="container1" class="container">
+  <div id="element1" style="transform: translateX(20px);" class="element"></div>
+</div>
+
+<div id="container2" class="container">
+  <div id="element2" style="transform: translateY(30px);" class="element"></div>
+</div>
+
+<div id="container3" class="container">
+  <div id="element3" style="transform: translate(20px, 30px);" class="element"></div>
+</div>
+
+<div id="toremove1"></div>
+<div id="toremove2"></div>
+<div id="toremove3"></div>
+
+<script>
+  test(() => {
+    assert_equals(container1.scrollWidth, 100);
+    document.body.removeChild(toremove1);
+    element1.style.transform = "translateX(200px)";
+    assert_equals(container1.scrollWidth, 250);
+  }, "Check scrollWidth before and after removeChild() and transform chage");
+
+  test(() => {
+    assert_equals(container2.scrollHeight, 100);
+    document.body.removeChild(toremove2);
+    element2.style.transform = "translateY(300px)";
+    assert_equals(container2.scrollHeight, 350);
+  }, "Check scrollHeight before and after removeChild() and transform chage");
+
+  test(() => {
+    assert_equals(container3.scrollWidth, 100);
+    assert_equals(container3.scrollHeight, 100);
+    document.body.removeChild(toremove3);
+    element3.style.transform = "translate(200px, 300px)";
+    assert_equals(container3.scrollWidth, 250);
+    assert_equals(container3.scrollHeight, 350);
+  }, "Check scrollWidth and scrollHeight before and after removeChild() and transform chage");
+</script>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-001.html b/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-001.html
index fe1e9548285..4486471cde5 100644
--- a/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-001.html
+++ b/tests/wpt/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 both-edges;
   }
 
   /* 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>
-
-    <div class="container ov_scroll sg_always" id="container_scroll_always">
-      <div class="content" id="content_scroll_always">scroll/always</div>
-    </div>
-
-    <div class="container ov_visible sg_always" id="container_visible_always">
-      <div class="content" id="content_visible_always">visible/always</div>
-    </div>
-
-    <div class="container ov_hidden sg_always" id="container_hidden_always">
-      <div class="content" id="content_hidden_always">hidden/always</div>
-    </div>
-
-    <div class="container ov_clip sg_always" id="container_clip_always">
-      <div class="content" id="content_clip_always">clip/always</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>
-
-    <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>
-
-    <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>
-
-    <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>
-
-    <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 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_both" id="container_scroll_always_both">
-      <div class="content" id="content_scroll_always_both">scroll/always both</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_both" id="container_visible_always_both">
-      <div class="content" id="content_visible_always_both">visible/always both</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_both" id="container_hidden_always_both">
-      <div class="content" id="content_hidden_always_both">hidden/always both</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_both" id="container_clip_always_both">
-      <div class="content" id="content_clip_always_both">clip/always both</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_both_force" id="container_auto_always_both_force">
-      <div class="content" id="content_auto_always_both_force">auto/always both 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 both-edges</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 class="container ov_scroll sg_stable_mirror" id="container_scroll_stable_mirror">
+      <div class="content" id="content_scroll_stable_mirror">scroll/stable both-edges</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 class="container ov_visible sg_stable_mirror" id="container_visible_stable_mirror">
+      <div class="content" id="content_visible_stable_mirror">visible/stable both-edges</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 class="container ov_hidden sg_stable_mirror" id="container_hidden_stable_mirror">
+      <div class="content" id="content_hidden_stable_mirror">hidden/stable both-edges</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 both-edges</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");
-
-    test(function () {
-      let container = document.getElementById('container_hidden_always');
-      let content = document.getElementById('content_hidden_always');
-      assert_equals(container.offsetWidth, content.offsetWidth, "content width");
-      assert_equals(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow hidden, scrollbar-gutter always");
-
-    test(function () {
-      let container = document.getElementById('container_clip_always');
-      let content = document.getElementById('content_clip_always');
-      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
-
-    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");
+    }, "overflow visible, scrollbar-gutter stable");
 
     test(function () {
-      let container = document.getElementById('container_visible_always_force');
-      let content = document.getElementById('content_visible_always_force');
+      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 visible, scrollbar-gutter always force");
+    }, "overflow hidden, scrollbar-gutter stable");
 
     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");
+      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 clip, scrollbar-gutter always force");
+    }, "overflow clip, scrollbar-gutter stable");
 
-    // scrollbar-gutter: always both
+    // scrollbar-gutter: stable both-edges
 
     test(function () {
-      let container = document.getElementById('container_auto_always_both');
-      let content = document.getElementById('content_auto_always_both');
+      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_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 auto, scrollbar-gutter stable both-edges");
 
     test(function () {
-      let container = document.getElementById('container_scroll_always_both');
-      let content = document.getElementById('content_scroll_always_both');
+      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_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');
-      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");
+      let reference = document.getElementById('content_auto_stable');
+      assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
+    }, "overflow scroll, scrollbar-gutter stable both-edges");
 
     test(function () {
-      let container = document.getElementById('container_clip_always_both');
-      let content = document.getElementById('content_clip_always_both');
+      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 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");
+    }, "overflow visible, scrollbar-gutter stable both-edges");
 
     test(function () {
-      let container = document.getElementById('container_scroll_always_both_force');
-      let content = document.getElementById('content_scroll_always_both_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");
-      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");
+      let reference = document.getElementById('content_auto_stable');
+      assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
+    }, "overflow hidden, scrollbar-gutter stable both-edges");
 
     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");
+      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 clip, scrollbar-gutter stable both-edges");
 
     done();
 
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-propagation-001.html b/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-propagation-001.html
new file mode 100644
index 00000000000..94391e3df6c
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-propagation-001.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Overflow: scrollbar-gutter on the root, not scrolling</title>
+<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+  body,
+  html {
+    margin: 0;
+    padding: 0;
+    border: none;
+  }
+
+  :root {
+    scrollbar-gutter: stable;
+  }
+
+  #content {
+    background: green;
+    width: 100%;
+    height: 100px;
+  }
+</style>
+
+<body>
+
+  <div id="content"></div>
+
+  <script type="text/javascript">
+    setup({ explicit_done: true });
+
+    test(function () {
+      let root = document.documentElement;
+      let body = document.body;
+      let content = document.getElementById('content');
+
+      // Note: as per the CSSOM spec, the clientWidth of the root element is
+      // "viewport width excluding the size of a rendered scroll bar (if any)"
+      // which does not take scrollbar-gutter into account.
+      // Since no such special case exists for offsetWidth, this means that here
+      // root.clientWidth is actually greater than root.offsetWidth.
+
+      assert_less_than(root.offsetWidth, window.innerWidth, "viewport has gutter");
+      assert_equals(body.offsetWidth, root.offsetWidth, "body matches root");
+      assert_equals(body.clientWidth, body.offsetWidth, "body has no gutter");
+      assert_equals(content.offsetWidth, body.clientWidth, "content matches body");
+    }, "viewport has gutter, others do not");
+
+    done();
+
+  </script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-propagation-002.html b/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-propagation-002.html
new file mode 100644
index 00000000000..d55938e04de
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-propagation-002.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Overflow: scrollbar-gutter on the root, scrolling</title>
+<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+  body,
+  html {
+    margin: 0;
+    padding: 0;
+    border: none;
+  }
+
+  :root {
+    scrollbar-gutter: stable;
+  }
+
+  #content {
+    background: green;
+    width: 100%;
+    /* force scrolling */
+    height: 200vh;
+  }
+</style>
+
+<body>
+
+  <div id="content"></div>
+
+  <script type="text/javascript">
+    setup({ explicit_done: true });
+
+    test(function () {
+      let root = document.documentElement;
+      let body = document.body;
+      let content = document.getElementById('content');
+
+      // Note: as per the spec, the clientWidth of the root element is
+      // "viewport width excluding the size of a rendered scroll bar (if any)"
+      // which does not take scrollbar-gutter into account.
+      // Since no such special case exists for offsetWidth, this means that here
+      // root.clientWidth is greater than root.offsetWidth (!!!).
+
+      assert_less_than(root.offsetWidth, window.innerWidth, "viewport has gutter");
+      assert_equals(body.offsetWidth, root.offsetWidth, "body matches root");
+      assert_equals(body.clientWidth, body.offsetWidth, "body has no gutter");
+      assert_equals(content.offsetWidth, body.clientWidth, "content matches body");
+    }, "viewport has gutter, others do not");
+
+    done();
+
+  </script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-propagation-003.html b/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-propagation-003.html
new file mode 100644
index 00000000000..e9483946a52
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-propagation-003.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Overflow: scrollbar-gutter on the root with overflow:auto, not scrolling</title>
+<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+  body,
+  html {
+    margin: 0;
+    padding: 0;
+    border: none;
+  }
+
+  :root {
+    scrollbar-gutter: stable;
+    overflow: auto;
+  }
+
+  #content {
+    background: green;
+    width: 100%;
+    height: 100px;
+  }
+</style>
+
+<body>
+
+  <div id="content"></div>
+
+  <script type="text/javascript">
+    setup({ explicit_done: true });
+
+    test(function () {
+      let root = document.documentElement;
+      let body = document.body;
+      let content = document.getElementById('content');
+
+      // Note: as per the spec, the clientWidth of the root element is
+      // "viewport width excluding the size of a rendered scroll bar (if any)"
+      // which does not take scrollbar-gutter into account.
+      // Since no such special case exists for offsetWidth, this means that here
+      // root.clientWidth is greater than root.offsetWidth (!!!).
+
+      assert_less_than(root.offsetWidth, window.innerWidth, "viewport has gutter");
+      assert_equals(body.offsetWidth, root.offsetWidth, "body matches root");
+      assert_equals(body.clientWidth, body.offsetWidth, "body has no gutter");
+      assert_equals(content.offsetWidth, body.clientWidth, "content matches body");
+    }, "viewport has gutter, others do not");
+
+    done();
+
+  </script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-propagation-004.html b/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-propagation-004.html
new file mode 100644
index 00000000000..699247111d8
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-propagation-004.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Overflow: scrollbar-gutter on the root with overflow:auto, scrolling</title>
+<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+  body,
+  html {
+    margin: 0;
+    padding: 0;
+    border: none;
+  }
+
+  :root {
+    scrollbar-gutter: stable;
+    overflow: auto;
+  }
+
+  #content {
+    background: green;
+    width: 100%;
+    /* force scrolling */
+    height: 200vh;
+  }
+</style>
+
+<body>
+
+  <div id="content"></div>
+
+  <script type="text/javascript">
+    setup({ explicit_done: true });
+
+    test(function () {
+      let root = document.documentElement;
+      let body = document.body;
+      let content = document.getElementById('content');
+      assert_equals(body.offsetWidth, root.offsetWidth, "root width");
+      assert_equals(content.offsetWidth, body.offsetWidth, "content width");
+    }, "root, body and content have the same width");
+
+    done();
+
+  </script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-propagation-005.html b/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-propagation-005.html
new file mode 100644
index 00000000000..e44811d2793
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-propagation-005.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Overflow: scrollbar-gutter on the root with overflow:scroll</title>
+<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+  body,
+  html {
+    margin: 0;
+    padding: 0;
+    border: none;
+  }
+
+  :root {
+    scrollbar-gutter: stable;
+    overflow: scroll;
+  }
+
+  #content {
+    background: green;
+    width: 100%;
+    height: 100px;
+  }
+</style>
+
+<body>
+
+  <div id="content"></div>
+
+  <script type="text/javascript">
+    setup({ explicit_done: true });
+
+    test(function () {
+      let root = document.documentElement;
+      let body = document.body;
+      let content = document.getElementById('content');
+      assert_equals(body.offsetWidth, root.offsetWidth, "root width");
+      assert_equals(content.offsetWidth, body.offsetWidth, "content width");
+    }, "root, body and content have the same width");
+
+    done();
+
+  </script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-propagation-006.html b/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-propagation-006.html
new file mode 100644
index 00000000000..e1084ff32b9
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-propagation-006.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Overflow: scrollbar-gutter on the body is not propagated</title>
+<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+  body,
+  html {
+    margin: 0;
+    padding: 0;
+    border: none;
+  }
+
+  body {
+    scrollbar-gutter: stable;
+  }
+
+  #content {
+    background: green;
+    width: 100%;
+    height: 100px;
+  }
+</style>
+
+<body>
+
+  <div id="content"></div>
+
+  <script type="text/javascript">
+    setup({ explicit_done: true });
+
+    test(function () {
+      let root = document.documentElement;
+      let body = document.body;
+      let content = document.getElementById('content');
+      assert_equals(body.offsetWidth, root.offsetWidth, "root width");
+      assert_equals(content.offsetWidth, body.offsetWidth, "content width");
+    }, "content, body and root have the same width");
+
+    done();
+
+  </script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-propagation-007.html b/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-propagation-007.html
new file mode 100644
index 00000000000..2f5e5596bd8
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-propagation-007.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Overflow: scrollbar-gutter on the root, overflow:scroll on the body</title>
+<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+  body,
+  html {
+    margin: 0;
+    padding: 0;
+    border: none;
+  }
+
+  :root {
+    scrollbar-gutter: stable;
+  }
+
+  body {
+    overflow: scroll;
+  }
+
+  #content {
+    background: green;
+    width: 100%;
+    height: 100px;
+  }
+</style>
+
+<body>
+
+  <div id="content"></div>
+
+  <script type="text/javascript">
+    setup({ explicit_done: true });
+
+    test(function () {
+      let root = document.documentElement;
+      let body = document.body;
+      let content = document.getElementById('content');
+
+      assert_less_than(root.clientWidth, window.outerWidth, "viewport has scrollbars");
+      assert_equals(body.offsetWidth, root.clientWidth, "body matches root");
+      assert_equals(body.clientWidth, body.offsetWidth, "body has no gutter");
+      assert_equals(content.offsetWidth, body.clientWidth, "content matches body");
+    }, "viewport has fixed scrollbars");
+
+    done();
+
+  </script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-rtl-001.html b/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-rtl-001.html
index 446195098e2..0d553c87b48 100644
--- a/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-rtl-001.html
+++ b/tests/wpt/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 both-edges;
   }
 
   /* 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>
-
-    <div class="container ov_scroll sg_always" id="container_scroll_always">
-      <div class="content" id="content_scroll_always">scroll/always</div>
-    </div>
-
-    <div class="container ov_visible sg_always" id="container_visible_always">
-      <div class="content" id="content_visible_always">visible/always</div>
-    </div>
-
-    <div class="container ov_hidden sg_always" id="container_hidden_always">
-      <div class="content" id="content_hidden_always">hidden/always</div>
-    </div>
-
-    <div class="container ov_clip sg_always" id="container_clip_always">
-      <div class="content" id="content_clip_always">clip/always</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" id="container_auto_stable">
+      <div class="content" id="content_auto_stable">auto/stable</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" id="container_scroll_stable">
+      <div class="content" id="content_scroll_stable">scroll/stable</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" id="container_visible_stable">
+      <div class="content" id="content_visible_stable">visible/stable</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" id="container_hidden_stable">
+      <div class="content" id="content_hidden_stable">hidden/stable</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 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_both" id="container_auto_always_both">
-      <div class="content" id="content_auto_always_both">auto/always both</div>
+    <div class="container ov_auto sg_stable_mirror" id="container_auto_stable_mirror">
+      <div class="content" id="content_auto_stable_mirror">auto/stable both-edges</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 class="container ov_scroll sg_stable_mirror" id="container_scroll_stable_mirror">
+      <div class="content" id="content_scroll_stable_mirror">scroll/stable both-edges</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 class="container ov_visible sg_stable_mirror" id="container_visible_stable_mirror">
+      <div class="content" id="content_visible_stable_mirror">visible/stable both-edges</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 class="container ov_hidden sg_stable_mirror" id="container_hidden_stable_mirror">
+      <div class="content" id="content_hidden_stable_mirror">hidden/stable both-edges</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 both-edges</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");
-
-    test(function () {
-      let container = document.getElementById('container_hidden_always');
-      let content = document.getElementById('content_hidden_always');
-      assert_equals(container.offsetWidth, content.offsetWidth, "content width");
-      assert_equals(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow hidden, scrollbar-gutter always");
-
-    test(function () {
-      let container = document.getElementById('container_clip_always');
-      let content = document.getElementById('content_clip_always');
-      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
-
-    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_less_than(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_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");
+    }, "overflow visible, scrollbar-gutter stable");
 
     test(function () {
-      let container = document.getElementById('container_hidden_always_force');
-      let content = document.getElementById('content_hidden_always_force');
+      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 always force");
+    }, "overflow hidden, scrollbar-gutter stable");
 
     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');
+      let content = document.getElementById('content_clip_stable');
       assert_equals(container.offsetWidth, content.offsetWidth, "content width");
       assert_equals(container.offsetLeft, content.offsetLeft, "content position");
-    }, "overflow visible, scrollbar-gutter always both");
+    }, "overflow clip, scrollbar-gutter stable");
 
-    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");
+    // scrollbar-gutter: stable both-edges
 
     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');
+      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_always_force');
-      assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
-    }, "overflow auto, scrollbar-gutter always both force");
+      let reference = document.getElementById('content_auto_stable');
+      assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
+    }, "overflow auto, scrollbar-gutter stable both-edges");
 
     test(function () {
-      let container = document.getElementById('container_scroll_always_both_force');
-      let content = document.getElementById('content_scroll_always_both_force');
+      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_always_force');
-      assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
-    }, "overflow scroll, scrollbar-gutter always both force");
+      let reference = document.getElementById('content_scroll_stable');
+      assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
+    }, "overflow scroll, scrollbar-gutter stable both-edges");
 
     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");
+      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 visible, scrollbar-gutter stable both-edges");
 
     test(function () {
-      let container = document.getElementById('container_hidden_always_both_force');
-      let content = document.getElementById('content_hidden_always_both_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");
-      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");
+      let reference = document.getElementById('content_auto_stable');
+      assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
+    }, "overflow hidden, scrollbar-gutter stable both-edges");
 
     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");
+      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 clip, scrollbar-gutter stable both-edges");
 
     done();
 
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-vertical-lr-001.html b/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-vertical-lr-001.html
index 27ac8f4c393..226004635ee 100644
--- a/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-vertical-lr-001.html
+++ b/tests/wpt/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 both-edges;
   }
 
   /* 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>
-
-    <div class="container ov_scroll sg_always" id="container_scroll_always">
-      <div class="content" id="content_scroll_always">scroll/always</div>
-    </div>
-
-    <div class="container ov_visible sg_always" id="container_visible_always">
-      <div class="content" id="content_visible_always">visible/always</div>
-    </div>
-
-    <div class="container ov_hidden sg_always" id="container_hidden_always">
-      <div class="content" id="content_hidden_always">hidden/always</div>
-    </div>
-
-    <div class="container ov_clip sg_always" id="container_clip_always">
-      <div class="content" id="content_clip_always">clip/always</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>
-
-    <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>
-
-    <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>
-
-    <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>
-
-    <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 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_both" id="container_scroll_always_both">
-      <div class="content" id="content_scroll_always_both">scroll/always both</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_both" id="container_visible_always_both">
-      <div class="content" id="content_visible_always_both">visible/always both</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_both" id="container_hidden_always_both">
-      <div class="content" id="content_hidden_always_both">hidden/always both</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_both" id="container_clip_always_both">
-      <div class="content" id="content_clip_always_both">clip/always both</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_both_force" id="container_auto_always_both_force">
-      <div class="content" id="content_auto_always_both_force">auto/always both 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 both-edges</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 class="container ov_scroll sg_stable_mirror" id="container_scroll_stable_mirror">
+      <div class="content" id="content_scroll_stable_mirror">scroll/stable both-edges</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 class="container ov_visible sg_stable_mirror" id="container_visible_stable_mirror">
+      <div class="content" id="content_visible_stable_mirror">visible/stable both-edges</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 class="container ov_hidden sg_stable_mirror" id="container_hidden_stable_mirror">
+      <div class="content" id="content_hidden_stable_mirror">hidden/stable both-edges</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 both-edges</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");
-
-    test(function () {
-      let container = document.getElementById('container_hidden_always');
-      let content = document.getElementById('content_hidden_always');
-      assert_equals(container.offsetHeight, content.offsetHeight, "content height");
-      assert_equals(container.offsetTop, content.offsetTop, "content position");
-    }, "overflow hidden, scrollbar-gutter always");
-
-    test(function () {
-      let container = document.getElementById('container_clip_always');
-      let content = document.getElementById('content_clip_always');
-      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
-
-    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");
+    }, "overflow visible, scrollbar-gutter stable");
 
     test(function () {
-      let container = document.getElementById('container_visible_always_force');
-      let content = document.getElementById('content_visible_always_force');
+      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 visible, scrollbar-gutter always force");
+    }, "overflow hidden, scrollbar-gutter stable");
 
     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");
+      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 clip, scrollbar-gutter always force");
+    }, "overflow clip, scrollbar-gutter stable");
 
-    // scrollbar-gutter: always both
+    // scrollbar-gutter: stable both-edges
 
     test(function () {
-      let container = document.getElementById('container_auto_always_both');
-      let content = document.getElementById('content_auto_always_both');
+      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_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 auto, scrollbar-gutter stable both-edges");
 
     test(function () {
-      let container = document.getElementById('container_scroll_always_both');
-      let content = document.getElementById('content_scroll_always_both');
+      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_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');
-      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");
+      let reference = document.getElementById('content_auto_stable');
+      assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\"");
+    }, "overflow scroll, scrollbar-gutter stable both-edges");
 
     test(function () {
-      let container = document.getElementById('container_clip_always_both');
-      let content = document.getElementById('content_clip_always_both');
+      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 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");
+    }, "overflow visible, scrollbar-gutter stable both-edges");
 
     test(function () {
-      let container = document.getElementById('container_scroll_always_both_force');
-      let content = document.getElementById('content_scroll_always_both_force');
+      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_scroll_always_force');
-      assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
-    }, "overflow scroll, scrollbar-gutter always both force");
+      let reference = document.getElementById('content_auto_stable');
+      assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\"");
+    }, "overflow hidden, scrollbar-gutter stable both-edges");
 
     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");
+      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 clip, scrollbar-gutter stable both-edges");
 
     done();
 
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-vertical-rl-001.html b/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-vertical-rl-001.html
index d4eab0bd698..642e3808086 100644
--- a/tests/wpt/web-platform-tests/css/css-overflow/scrollbar-gutter-vertical-rl-001.html
+++ b/tests/wpt/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 both-edges;
   }
 
   /* 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>
-
-    <div class="container ov_scroll sg_always" id="container_scroll_always">
-      <div class="content" id="content_scroll_always">scroll/always</div>
-    </div>
-
-    <div class="container ov_visible sg_always" id="container_visible_always">
-      <div class="content" id="content_visible_always">visible/always</div>
-    </div>
-
-    <div class="container ov_hidden sg_always" id="container_hidden_always">
-      <div class="content" id="content_hidden_always">hidden/always</div>
-    </div>
-
-    <div class="container ov_clip sg_always" id="container_clip_always">
-      <div class="content" id="content_clip_always">clip/always</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>
-
-    <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>
-
-    <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>
-
-    <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>
-
-    <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 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_both" id="container_scroll_always_both">
-      <div class="content" id="content_scroll_always_both">scroll/always both</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_both" id="container_visible_always_both">
-      <div class="content" id="content_visible_always_both">visible/always both</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_both" id="container_hidden_always_both">
-      <div class="content" id="content_hidden_always_both">hidden/always both</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_both" id="container_clip_always_both">
-      <div class="content" id="content_clip_always_both">clip/always both</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_both_force" id="container_auto_always_both_force">
-      <div class="content" id="content_auto_always_both_force">auto/always both 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 both-edges</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 class="container ov_scroll sg_stable_mirror" id="container_scroll_stable_mirror">
+      <div class="content" id="content_scroll_stable_mirror">scroll/stable both-edges</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 class="container ov_visible sg_stable_mirror" id="container_visible_stable_mirror">
+      <div class="content" id="content_visible_stable_mirror">visible/stable both-edges</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 class="container ov_hidden sg_stable_mirror" id="container_hidden_stable_mirror">
+      <div class="content" id="content_hidden_stable_mirror">hidden/stable both-edges</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 both-edges</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");
-
-    test(function () {
-      let container = document.getElementById('container_hidden_always');
-      let content = document.getElementById('content_hidden_always');
-      assert_equals(container.offsetHeight, content.offsetHeight, "content height");
-      assert_equals(container.offsetTop, content.offsetTop, "content position");
-    }, "overflow hidden, scrollbar-gutter always");
-
-    test(function () {
-      let container = document.getElementById('container_clip_always');
-      let content = document.getElementById('content_clip_always');
-      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
-
-    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");
+    }, "overflow visible, scrollbar-gutter stable");
 
     test(function () {
-      let container = document.getElementById('container_visible_always_force');
-      let content = document.getElementById('content_visible_always_force');
+      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 visible, scrollbar-gutter always force");
+    }, "overflow hidden, scrollbar-gutter stable");
 
     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");
+      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 clip, scrollbar-gutter always force");
+    }, "overflow clip, scrollbar-gutter stable");
 
-    // scrollbar-gutter: always both
+    // scrollbar-gutter: stable both-edges
 
     test(function () {
-      let container = document.getElementById('container_auto_always_both');
-      let content = document.getElementById('content_auto_always_both');
+      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_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 auto, scrollbar-gutter stable both-edges");
 
     test(function () {
-      let container = document.getElementById('container_scroll_always_both');
-      let content = document.getElementById('content_scroll_always_both');
+      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_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');
-      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");
+      let reference = document.getElementById('content_auto_stable');
+      assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\"");
+    }, "overflow scroll, scrollbar-gutter stable both-edges");
 
     test(function () {
-      let container = document.getElementById('container_clip_always_both');
-      let content = document.getElementById('content_clip_always_both');
+      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 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");
+    }, "overflow visible, scrollbar-gutter stable both-edges");
 
     test(function () {
-      let container = document.getElementById('container_scroll_always_both_force');
-      let content = document.getElementById('content_scroll_always_both_force');
+      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_scroll_always_force');
-      assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
-    }, "overflow scroll, scrollbar-gutter always both force");
+      let reference = document.getElementById('content_auto_stable');
+      assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\"");
+    }, "overflow hidden, scrollbar-gutter stable both-edges");
 
     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");
+      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 clip, scrollbar-gutter stable both-edges");
 
     done();
 
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/webkit-line-clamp-038.html b/tests/wpt/web-platform-tests/css/css-overflow/webkit-line-clamp-038.html
new file mode 100644
index 00000000000..b50ae2764c3
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/webkit-line-clamp-038.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
+<link rel="match" href="reference/webkit-line-clamp-038-ref.html">
+<meta name="assert" content="-webkit-line-clamp correctly clamps a block-in-inline.">
+<style>
+.clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  font: 16px / 32px serif;
+  background-color: yellow;
+  overflow: hidden;
+}
+</style>
+<div class="clamp">
+  <div>
+    Line 1
+    <span><div>Line 2<br>Line 3<br>Line 4</div></span>
+    Line 5
+  </div>
+</div>
diff --git a/tests/wpt/web-platform-tests/css/css-overflow/webkit-line-clamp-039.html b/tests/wpt/web-platform-tests/css/css-overflow/webkit-line-clamp-039.html
new file mode 100644
index 00000000000..fe9436da53d
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-overflow/webkit-line-clamp-039.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
+<link rel="match" href="reference/webkit-line-clamp-039-ref.html">
+<meta name="assert" content="-webkit-line-clamp correctly clamps a block-in-inline.">
+<style>
+.clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
+  font: 16px / 32px serif;
+  background-color: yellow;
+  overflow: hidden;
+}
+</style>
+<div class="clamp">
+  <div>
+    Line 1
+    <span><div>Line 2<br>Line 3<br>Line 4</div></span>
+    Line 5<br>Line 6
+  </div>
+</div>
author	WPT Sync Bot <josh+wptsync@joshmatthews.net>	2021-09-07 11:16:33 +0000
committer	cybai <cyb.ai.815@gmail.com>	2022-01-17 16:30:29 +0900
commit	58e8ee674b032274959b4461fd46ceda8f709e96 (patch)
tree	4953c044dba6b52224d5144747af1bc3773a7ebc /tests/wpt/web-platform-tests/css/css-overflow
parent	35e95f55a1b9e488d1c796c8fb39d764d090d660 (diff)
download	servo-58e8ee674b032274959b4461fd46ceda8f709e96.tar.gz servo-58e8ee674b032274959b4461fd46ceda8f709e96.zip