Update scrollbar-gutter to new version of the spec
Update the implementation of scrollbar-gutter to match the new spec:
https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property
The syntax is is simplified to: auto | stable && mirror?
The "stable" value also applies when overflow is "hidden".
The "always" and "force" keywords have been removed.
The "both" keyword has been renamed to "mirror".
This CL updates all affected tests to match the new spec.
Bug: 710214
Change-Id: I4a22a1abc821fa8982759cee3b69089f75dce229
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2970809
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Philip Rogers <pdr@chromium.org>
Commit-Queue: Felipe Erias <felipeerias@igalia.com>
Cr-Commit-Position: refs/heads/master@{#896301}
diff --git a/css/css-overflow/parsing/scrollbar-gutter-invalid.html b/css/css-overflow/parsing/scrollbar-gutter-invalid.html
index bfddfcc..4f66922 100644
--- a/css/css-overflow/parsing/scrollbar-gutter-invalid.html
+++ b/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/css/css-overflow/parsing/scrollbar-gutter-valid.html b/css/css-overflow/parsing/scrollbar-gutter-valid.html
index 07a5c1a..98acc86 100644
--- a/css/css-overflow/parsing/scrollbar-gutter-valid.html
+++ b/css/css-overflow/parsing/scrollbar-gutter-valid.html
@@ -12,15 +12,8 @@
test_valid_value("scrollbar-gutter", "auto");
test_valid_value("scrollbar-gutter", "stable");
- test_valid_value("scrollbar-gutter", "stable both");
- test_valid_value("scrollbar-gutter", "stable force");
- test_valid_value("scrollbar-gutter", "stable both force");
- test_valid_value("scrollbar-gutter", "always");
- test_valid_value("scrollbar-gutter", "always both");
- test_valid_value("scrollbar-gutter", "always force");
- test_valid_value("scrollbar-gutter", "always both force");
+ test_valid_value("scrollbar-gutter", "stable mirror");
- test_valid_value("scrollbar-gutter", "force both stable", "stable both force");
- test_valid_value("scrollbar-gutter", "force always both", "always both force");
+ test_valid_value("scrollbar-gutter", "mirror stable", "stable mirror");
</script>
diff --git a/css/css-overflow/scrollbar-gutter-001.html b/css/css-overflow/scrollbar-gutter-001.html
index fe1e954..805de3d 100644
--- a/css/css-overflow/scrollbar-gutter-001.html
+++ b/css/css-overflow/scrollbar-gutter-001.html
@@ -33,28 +33,17 @@
background: lightsalmon;
}
- /* scrollbar-gutter
- Note: not testing "stable" because the decision to use overlay scrollbars
- is up to the browser. The "always" keyword takes effect regardless of
- whether classical or overlay scrollbars are being used.*/
+ /* scrollbar-gutter */
.sg_auto {
scrollbar-gutter: auto;
}
- .sg_always {
- scrollbar-gutter: always;
+ .sg_stable {
+ scrollbar-gutter: stable;
}
- .sg_always_both {
- scrollbar-gutter: always both;
- }
-
- .sg_always_force {
- scrollbar-gutter: always force;
- }
-
- .sg_always_both_force {
- scrollbar-gutter: always both force;
+ .sg_stable_mirror {
+ scrollbar-gutter: stable mirror;
}
/* overflow */
@@ -75,7 +64,7 @@
}
.container.ov_clip {
- overflow-y: clip;
+ overflow: clip;
}
</style>
<body>
@@ -103,90 +92,46 @@
</div>
<div class="line">
- <div class="container ov_auto sg_always" id="container_auto_always">
- <div class="content" id="content_auto_always">auto/always</div>
+ <div class="container ov_auto sg_stable" id="container_auto_stable">
+ <div class="content" id="content_auto_stable">auto/stable</div>
</div>
- <div class="container ov_scroll sg_always" id="container_scroll_always">
- <div class="content" id="content_scroll_always">scroll/always</div>
+ <div class="container ov_scroll sg_stable" id="container_scroll_stable">
+ <div class="content" id="content_scroll_stable">scroll/stable</div>
</div>
- <div class="container ov_visible sg_always" id="container_visible_always">
- <div class="content" id="content_visible_always">visible/always</div>
+ <div class="container ov_visible sg_stable" id="container_visible_stable">
+ <div class="content" id="content_visible_stable">visible/stable</div>
</div>
- <div class="container ov_hidden sg_always" id="container_hidden_always">
- <div class="content" id="content_hidden_always">hidden/always</div>
+ <div class="container ov_hidden sg_stable" id="container_hidden_stable">
+ <div class="content" id="content_hidden_stable">hidden/stable</div>
</div>
- <div class="container ov_clip sg_always" id="container_clip_always">
- <div class="content" id="content_clip_always">clip/always</div>
+ <div class="container ov_clip sg_stable" id="container_clip_stable">
+ <div class="content" id="content_clip_stable">clip/stable</div>
</div>
</div>
<div class="line">
- <div class="container ov_auto sg_always_force" id="container_auto_always_force">
- <div class="content" id="content_auto_always_force">auto/always force</div>
+ <div class="container ov_auto sg_stable_mirror" id="container_auto_stable_mirror">
+ <div class="content" id="content_auto_stable_mirror">auto/stable mirror</div>
</div>
- <div class="container ov_scroll sg_always_force" id="container_scroll_always_force">
- <div class="content" id="content_scroll_always_force">scroll/always force</div>
+ <div class="container ov_scroll sg_stable_mirror" id="container_scroll_stable_mirror">
+ <div class="content" id="content_scroll_stable_mirror">scroll/stable mirror</div>
</div>
- <div class="container ov_visible sg_always_force" id="container_visible_always_force">
- <div class="content" id="content_visible_always_force">visible/always force</div>
+ <div class="container ov_visible sg_stable_mirror" id="container_visible_stable_mirror">
+ <div class="content" id="content_visible_stable_mirror">visible/stable mirror</div>
</div>
- <div class="container ov_hidden sg_always_force" id="container_hidden_always_force">
- <div class="content" id="content_hidden_always_force">hidden/always force</div>
+ <div class="container ov_hidden sg_stable_mirror" id="container_hidden_stable_mirror">
+ <div class="content" id="content_hidden_stable_mirror">hidden/stable mirror</div>
</div>
- <div class="container ov_clip sg_always_force" id="container_clip_always_force">
- <div class="content" id="content_clip_always_force">clip/always force</div>
- </div>
- </div>
-
- <div class="line">
- <div class="container ov_auto sg_always_both" id="container_auto_always_both">
- <div class="content" id="content_auto_always_both">auto/always both</div>
- </div>
-
- <div class="container ov_scroll sg_always_both" id="container_scroll_always_both">
- <div class="content" id="content_scroll_always_both">scroll/always both</div>
- </div>
-
- <div class="container ov_visible sg_always_both" id="container_visible_always_both">
- <div class="content" id="content_visible_always_both">visible/always both</div>
- </div>
-
- <div class="container ov_hidden sg_always_both" id="container_hidden_always_both">
- <div class="content" id="content_hidden_always_both">hidden/always both</div>
- </div>
-
- <div class="container ov_clip sg_always_both" id="container_clip_always_both">
- <div class="content" id="content_clip_always_both">clip/always both</div>
- </div>
- </div>
-
- <div class="line">
- <div class="container ov_auto sg_always_both_force" id="container_auto_always_both_force">
- <div class="content" id="content_auto_always_both_force">auto/always both force</div>
- </div>
-
- <div class="container ov_scroll sg_always_both_force" id="container_scroll_always_both_force">
- <div class="content" id="content_scroll_always_both_force">scroll/always both force</div>
- </div>
-
- <div class="container ov_visible sg_always_both_force" id="container_visible_always_both_force">
- <div class="content" id="content_visible_always_both_force">visible/always both force</div>
- </div>
-
- <div class="container ov_hidden sg_always_both_force" id="container_hidden_always_both_force">
- <div class="content" id="content_hidden_always_both_force">hidden/always both force</div>
- </div>
-
- <div class="container ov_clip sg_always_both_force" id="container_clip_always_both_force">
- <div class="content" id="content_clip_always_both_force">clip/always both force</div>
+ <div class="container ov_clip sg_stable_mirror" id="container_clip_stable_mirror">
+ <div class="content" id="content_clip_stable_mirror">clip/stable mirror</div>
</div>
</div>
@@ -230,167 +175,85 @@
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
}, "overflow clip, scrollbar-gutter auto");
- // scrollbar-gutter: always
+ // scrollbar-gutter: stable
test(function () {
- let container = document.getElementById('container_auto_always');
- let content = document.getElementById('content_auto_always');
+ let container = document.getElementById('container_auto_stable');
+ let content = document.getElementById('content_auto_stable');
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
- }, "overflow auto, scrollbar-gutter always");
+ }, "overflow auto, scrollbar-gutter stable");
test(function () {
- let container = document.getElementById('container_scroll_always');
- let content = document.getElementById('content_scroll_always');
+ let container = document.getElementById('container_scroll_stable');
+ let content = document.getElementById('content_scroll_stable');
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
- }, "overflow scroll, scrollbar-gutter always");
+ }, "overflow scroll, scrollbar-gutter stable");
test(function () {
- let container = document.getElementById('container_visible_always');
- let content = document.getElementById('content_visible_always');
+ let container = document.getElementById('container_visible_stable');
+ let content = document.getElementById('content_visible_stable');
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
- }, "overflow visible, scrollbar-gutter always");
+ }, "overflow visible, scrollbar-gutter stable");
test(function () {
- let container = document.getElementById('container_hidden_always');
- let content = document.getElementById('content_hidden_always');
+ let container = document.getElementById('container_hidden_stable');
+ let content = document.getElementById('content_hidden_stable');
+ assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
+ assert_equals(container.offsetLeft, content.offsetLeft, "content position");
+ }, "overflow hidden, scrollbar-gutter stable");
+
+ test(function () {
+ let container = document.getElementById('container_clip_stable');
+ let content = document.getElementById('content_clip_stable');
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
- }, "overflow hidden, scrollbar-gutter always");
+ }, "overflow clip, scrollbar-gutter stable");
+
+ // scrollbar-gutter: stable mirror
test(function () {
- let container = document.getElementById('container_clip_always');
- let content = document.getElementById('content_clip_always');
+ let container = document.getElementById('container_auto_stable_mirror');
+ let content = document.getElementById('content_auto_stable_mirror');
+ assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
+ assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
+ let reference = document.getElementById('content_auto_stable');
+ assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
+ }, "overflow auto, scrollbar-gutter stable mirror");
+
+ test(function () {
+ let container = document.getElementById('container_scroll_stable_mirror');
+ let content = document.getElementById('content_scroll_stable_mirror');
+ assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
+ assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
+ let reference = document.getElementById('content_auto_stable');
+ assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
+ }, "overflow scroll, scrollbar-gutter stable mirror");
+
+ test(function () {
+ let container = document.getElementById('container_visible_stable_mirror');
+ let content = document.getElementById('content_visible_stable_mirror');
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
- }, "overflow clip, scrollbar-gutter always");
-
- // scrollbar-gutter: always force
+ }, "overflow visible, scrollbar-gutter stable mirror");
test(function () {
- let container = document.getElementById('container_auto_always_force');
- let content = document.getElementById('content_auto_always_force');
- assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
- assert_equals(container.offsetLeft, content.offsetLeft, "content position");
- }, "overflow auto, scrollbar-gutter always force");
-
- test(function () {
- let container = document.getElementById('container_scroll_always_force');
- let content = document.getElementById('content_scroll_always_force');
- assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
- assert_equals(container.offsetLeft, content.offsetLeft, "content position");
- }, "overflow scroll, scrollbar-gutter always force");
-
- test(function () {
- let container = document.getElementById('container_visible_always_force');
- let content = document.getElementById('content_visible_always_force');
- assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
- assert_equals(container.offsetLeft, content.offsetLeft, "content position");
- }, "overflow visible, scrollbar-gutter always force");
-
- test(function () {
- let container = document.getElementById('container_hidden_always_force');
- let content = document.getElementById('content_hidden_always_force');
- assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
- assert_equals(container.offsetLeft, content.offsetLeft, "content position");
- }, "overflow hidden, scrollbar-gutter always force");
-
- test(function () {
- let container = document.getElementById('container_clip_always_force');
- let content = document.getElementById('content_clip_always_force');
- assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
- assert_equals(container.offsetLeft, content.offsetLeft, "content position");
- }, "overflow clip, scrollbar-gutter always force");
-
- // scrollbar-gutter: always both
-
- test(function () {
- let container = document.getElementById('container_auto_always_both');
- let content = document.getElementById('content_auto_always_both');
+ let container = document.getElementById('container_hidden_stable_mirror');
+ let content = document.getElementById('content_hidden_stable_mirror');
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
- let reference = document.getElementById('content_auto_always');
- assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always\"");
- }, "overflow auto, scrollbar-gutter always both");
+ let reference = document.getElementById('content_auto_stable');
+ assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
+ }, "overflow hidden, scrollbar-gutter stable mirror");
test(function () {
- let container = document.getElementById('container_scroll_always_both');
- let content = document.getElementById('content_scroll_always_both');
- assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
- assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
- let reference = document.getElementById('content_auto_always');
- assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always\"");
- }, "overflow scroll, scrollbar-gutter always both");
-
- test(function () {
- let container = document.getElementById('container_visible_always_both');
- let content = document.getElementById('content_visible_always_both');
+ let container = document.getElementById('container_clip_stable_mirror');
+ let content = document.getElementById('content_clip_stable_mirror');
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
- }, "overflow visible, scrollbar-gutter always both");
-
- test(function () {
- let container = document.getElementById('container_hidden_always_both');
- let content = document.getElementById('content_hidden_always_both');
- assert_equals(container.offsetWidth, content.offsetWidth, "content width");
- assert_equals(container.offsetLeft, content.offsetLeft, "content position");
- }, "overflow hidden, scrollbar-gutter always both");
-
- test(function () {
- let container = document.getElementById('container_clip_always_both');
- let content = document.getElementById('content_clip_always_both');
- assert_equals(container.offsetWidth, content.offsetWidth, "content width");
- assert_equals(container.offsetLeft, content.offsetLeft, "content position");
- }, "overflow clip, scrollbar-gutter always both");
-
- // scrollbar-gutter: always both force
-
- test(function () {
- let container = document.getElementById('container_auto_always_both_force');
- let content = document.getElementById('content_auto_always_both_force');
- assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
- assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
- let reference = document.getElementById('content_auto_always_force');
- assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
- }, "overflow auto, scrollbar-gutter always both force");
-
- test(function () {
- let container = document.getElementById('container_scroll_always_both_force');
- let content = document.getElementById('content_scroll_always_both_force');
- assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
- assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
- let reference = document.getElementById('content_scroll_always_force');
- assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
- }, "overflow scroll, scrollbar-gutter always both force");
-
- test(function () {
- let container = document.getElementById('container_visible_always_both_force');
- let content = document.getElementById('content_visible_always_both_force');
- assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
- assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
- let reference = document.getElementById('content_visible_always_force');
- assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
- }, "overflow visible, scrollbar-gutter always both force");
-
- test(function () {
- let container = document.getElementById('container_hidden_always_both_force');
- let content = document.getElementById('content_hidden_always_both_force');
- assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
- assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
- let reference = document.getElementById('content_hidden_always_force');
- assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
- }, "overflow hidden, scrollbar-gutter always both force");
-
- test(function () {
- let container = document.getElementById('container_clip_always_both_force');
- let content = document.getElementById('content_clip_always_both_force');
- assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
- assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
- let reference = document.getElementById('content_clip_always_force');
- assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
- }, "overflow clip, scrollbar-gutter always both force");
+ }, "overflow clip, scrollbar-gutter stable mirror");
done();
diff --git a/css/css-overflow/scrollbar-gutter-propagation-001.html b/css/css-overflow/scrollbar-gutter-propagation-001.html
index 1a73a06..94391e3 100644
--- a/css/css-overflow/scrollbar-gutter-propagation-001.html
+++ b/css/css-overflow/scrollbar-gutter-propagation-001.html
@@ -15,7 +15,7 @@
}
:root {
- scrollbar-gutter: always;
+ scrollbar-gutter: stable;
}
#content {
diff --git a/css/css-overflow/scrollbar-gutter-propagation-002.html b/css/css-overflow/scrollbar-gutter-propagation-002.html
index b02a39a..d55938e 100644
--- a/css/css-overflow/scrollbar-gutter-propagation-002.html
+++ b/css/css-overflow/scrollbar-gutter-propagation-002.html
@@ -15,7 +15,7 @@
}
:root {
- scrollbar-gutter: always;
+ scrollbar-gutter: stable;
}
#content {
diff --git a/css/css-overflow/scrollbar-gutter-propagation-003.html b/css/css-overflow/scrollbar-gutter-propagation-003.html
index fa481b9..e948394 100644
--- a/css/css-overflow/scrollbar-gutter-propagation-003.html
+++ b/css/css-overflow/scrollbar-gutter-propagation-003.html
@@ -15,7 +15,7 @@
}
:root {
- scrollbar-gutter: always;
+ scrollbar-gutter: stable;
overflow: auto;
}
diff --git a/css/css-overflow/scrollbar-gutter-propagation-004.html b/css/css-overflow/scrollbar-gutter-propagation-004.html
index 6d0cfa1..6992471 100644
--- a/css/css-overflow/scrollbar-gutter-propagation-004.html
+++ b/css/css-overflow/scrollbar-gutter-propagation-004.html
@@ -15,7 +15,7 @@
}
:root {
- scrollbar-gutter: always;
+ scrollbar-gutter: stable;
overflow: auto;
}
diff --git a/css/css-overflow/scrollbar-gutter-propagation-005.html b/css/css-overflow/scrollbar-gutter-propagation-005.html
index 6bee0fd..e44811d 100644
--- a/css/css-overflow/scrollbar-gutter-propagation-005.html
+++ b/css/css-overflow/scrollbar-gutter-propagation-005.html
@@ -15,7 +15,7 @@
}
:root {
- scrollbar-gutter: always;
+ scrollbar-gutter: stable;
overflow: scroll;
}
diff --git a/css/css-overflow/scrollbar-gutter-propagation-006.html b/css/css-overflow/scrollbar-gutter-propagation-006.html
index 650be46..e1084ff 100644
--- a/css/css-overflow/scrollbar-gutter-propagation-006.html
+++ b/css/css-overflow/scrollbar-gutter-propagation-006.html
@@ -15,7 +15,7 @@
}
body {
- scrollbar-gutter: always;
+ scrollbar-gutter: stable;
}
#content {
diff --git a/css/css-overflow/scrollbar-gutter-propagation-007.html b/css/css-overflow/scrollbar-gutter-propagation-007.html
index 88837d1..2f5e559 100644
--- a/css/css-overflow/scrollbar-gutter-propagation-007.html
+++ b/css/css-overflow/scrollbar-gutter-propagation-007.html
@@ -15,7 +15,7 @@
}
:root {
- scrollbar-gutter: always;
+ scrollbar-gutter: stable;
}
body {
diff --git a/css/css-overflow/scrollbar-gutter-rtl-001.html b/css/css-overflow/scrollbar-gutter-rtl-001.html
index 4461950..3eafbc5 100644
--- a/css/css-overflow/scrollbar-gutter-rtl-001.html
+++ b/css/css-overflow/scrollbar-gutter-rtl-001.html
@@ -33,28 +33,17 @@
background: lightsalmon;
}
- /* scrollbar-gutter
- Note: not testing "stable" because the decision to use overlay scrollbars
- is up to the browser. The "always" keyword takes effect regardless of
- whether classical or overlay scrollbars are being used.*/
+ /* scrollbar-gutter */
.sg_auto {
scrollbar-gutter: auto;
}
- .sg_always {
- scrollbar-gutter: always;
+ .sg_stable {
+ scrollbar-gutter: stable;
}
- .sg_always_both {
- scrollbar-gutter: always both;
- }
-
- .sg_always_force {
- scrollbar-gutter: always force;
- }
-
- .sg_always_both_force {
- scrollbar-gutter: always both force;
+ .sg_stable_mirror {
+ scrollbar-gutter: stable mirror;
}
/* overflow */
@@ -75,7 +64,7 @@
}
.container.ov_clip {
- overflow-y: clip;
+ overflow: clip;
}
</style>
<body>
@@ -103,90 +92,46 @@
</div>
<div class="line">
- <div class="container ov_auto sg_always" id="container_auto_always">
- <div class="content" id="content_auto_always">auto/always</div>
+ <div class="container ov_auto sg_stable" id="container_auto_stable">
+ <div class="content" id="content_auto_stable">auto/stable</div>
</div>
- <div class="container ov_scroll sg_always" id="container_scroll_always">
- <div class="content" id="content_scroll_always">scroll/always</div>
+ <div class="container ov_scroll sg_stable" id="container_scroll_stable">
+ <div class="content" id="content_scroll_stable">scroll/stable</div>
</div>
- <div class="container ov_visible sg_always" id="container_visible_always">
- <div class="content" id="content_visible_always">visible/always</div>
+ <div class="container ov_visible sg_stable" id="container_visible_stable">
+ <div class="content" id="content_visible_stable">visible/stable</div>
</div>
- <div class="container ov_hidden sg_always" id="container_hidden_always">
- <div class="content" id="content_hidden_always">hidden/always</div>
+ <div class="container ov_hidden sg_stable" id="container_hidden_stable">
+ <div class="content" id="content_hidden_stable">hidden/stable</div>
</div>
- <div class="container ov_clip sg_always" id="container_clip_always">
- <div class="content" id="content_clip_always">clip/always</div>
+ <div class="container ov_clip sg_stable" id="container_clip_stable">
+ <div class="content" id="content_clip_stable">clip/stable</div>
</div>
</div>
<div class="line">
- <div class="container ov_auto sg_always_force" id="container_auto_always_force">
- <div class="content" id="content_auto_always_force">auto/always force</div>
+ <div class="container ov_auto sg_stable_mirror" id="container_auto_stable_mirror">
+ <div class="content" id="content_auto_stable_mirror">auto/stable mirror</div>
</div>
- <div class="container ov_scroll sg_always_force" id="container_scroll_always_force">
- <div class="content" id="content_scroll_always_force">scroll/always force</div>
+ <div class="container ov_scroll sg_stable_mirror" id="container_scroll_stable_mirror">
+ <div class="content" id="content_scroll_stable_mirror">scroll/stable mirror</div>
</div>
- <div class="container ov_visible sg_always_force" id="container_visible_always_force">
- <div class="content" id="content_visible_always_force">visible/always force</div>
+ <div class="container ov_visible sg_stable_mirror" id="container_visible_stable_mirror">
+ <div class="content" id="content_visible_stable_mirror">visible/stable mirror</div>
</div>
- <div class="container ov_hidden sg_always_force" id="container_hidden_always_force">
- <div class="content" id="content_hidden_always_force">hidden/always force</div>
+ <div class="container ov_hidden sg_stable_mirror" id="container_hidden_stable_mirror">
+ <div class="content" id="content_hidden_stable_mirror">hidden/stable mirror</div>
</div>
- <div class="container ov_clip sg_always_force" id="container_clip_always_force">
- <div class="content" id="content_clip_always_force">clip/always force</div>
- </div>
- </div>
-
- <div class="line">
- <div class="container ov_auto sg_always_both" id="container_auto_always_both">
- <div class="content" id="content_auto_always_both">auto/always both</div>
- </div>
-
- <div class="container ov_scroll sg_always_both" id="container_scroll_always_both">
- <div class="content" id="content_scroll_always_both">scroll/always both</div>
- </div>
-
- <div class="container ov_visible sg_always_both" id="container_visible_always_both">
- <div class="content" id="content_visible_always_both">visible/always both</div>
- </div>
-
- <div class="container ov_hidden sg_always_both" id="container_hidden_always_both">
- <div class="content" id="content_hidden_always_both">hidden/always both</div>
- </div>
-
- <div class="container ov_clip sg_always_both" id="container_clip_always_both">
- <div class="content" id="content_clip_always_both">clip/always both</div>
- </div>
- </div>
-
- <div class="line">
- <div class="container ov_auto sg_always_both_force" id="container_auto_always_both_force">
- <div class="content" id="content_auto_always_both_force">auto/always both force</div>
- </div>
-
- <div class="container ov_scroll sg_always_both_force" id="container_scroll_always_both_force">
- <div class="content" id="content_scroll_always_both_force">scroll/always both force</div>
- </div>
-
- <div class="container ov_visible sg_always_both_force" id="container_visible_always_both_force">
- <div class="content" id="content_visible_always_both_force">visible/always both force</div>
- </div>
-
- <div class="container ov_hidden sg_always_both_force" id="container_hidden_always_both_force">
- <div class="content" id="content_hidden_always_both_force">hidden/always both force</div>
- </div>
-
- <div class="container ov_clip sg_always_both_force" id="container_clip_always_both_force">
- <div class="content" id="content_clip_always_both_force">clip/always both force</div>
+ <div class="container ov_clip sg_stable_mirror" id="container_clip_stable_mirror">
+ <div class="content" id="content_clip_stable_mirror">clip/stable mirror</div>
</div>
</div>
@@ -230,167 +175,85 @@
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
}, "overflow clip, scrollbar-gutter auto");
- // scrollbar-gutter: always
+ // scrollbar-gutter: stable
test(function () {
- let container = document.getElementById('container_auto_always');
- let content = document.getElementById('content_auto_always');
+ let container = document.getElementById('container_auto_stable');
+ let content = document.getElementById('content_auto_stable');
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
- }, "overflow auto, scrollbar-gutter always");
+ }, "overflow auto, scrollbar-gutter stable");
test(function () {
- let container = document.getElementById('container_scroll_always');
- let content = document.getElementById('content_scroll_always');
+ let container = document.getElementById('container_scroll_stable');
+ let content = document.getElementById('content_scroll_stable');
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
- }, "overflow scroll, scrollbar-gutter always");
+ }, "overflow scroll, scrollbar-gutter stable");
test(function () {
- let container = document.getElementById('container_visible_always');
- let content = document.getElementById('content_visible_always');
+ let container = document.getElementById('container_visible_stable');
+ let content = document.getElementById('content_visible_stable');
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
- }, "overflow visible, scrollbar-gutter always");
+ }, "overflow visible, scrollbar-gutter stable");
test(function () {
- let container = document.getElementById('container_hidden_always');
- let content = document.getElementById('content_hidden_always');
+ let container = document.getElementById('container_hidden_stable');
+ let content = document.getElementById('content_hidden_stable');
+ assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
+ assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
+ }, "overflow hidden, scrollbar-gutter stable");
+
+ test(function () {
+ let container = document.getElementById('container_clip_stable');
+ let content = document.getElementById('content_clip_stable');
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
- }, "overflow hidden, scrollbar-gutter always");
+ }, "overflow clip, scrollbar-gutter stable");
+
+ // scrollbar-gutter: stable mirror
test(function () {
- let container = document.getElementById('container_clip_always');
- let content = document.getElementById('content_clip_always');
+ let container = document.getElementById('container_auto_stable_mirror');
+ let content = document.getElementById('content_auto_stable_mirror');
+ assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
+ assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
+ let reference = document.getElementById('content_auto_stable');
+ assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
+ }, "overflow auto, scrollbar-gutter stable mirror");
+
+ test(function () {
+ let container = document.getElementById('container_scroll_stable_mirror');
+ let content = document.getElementById('content_scroll_stable_mirror');
+ assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
+ assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
+ let reference = document.getElementById('content_scroll_stable');
+ assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
+ }, "overflow scroll, scrollbar-gutter stable mirror");
+
+ test(function () {
+ let container = document.getElementById('container_visible_stable_mirror');
+ let content = document.getElementById('content_visible_stable_mirror');
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
- }, "overflow clip, scrollbar-gutter always");
-
- // scrollbar-gutter: always force
+ }, "overflow visible, scrollbar-gutter stable mirror");
test(function () {
- let container = document.getElementById('container_auto_always_force');
- let content = document.getElementById('content_auto_always_force');
+ let container = document.getElementById('container_hidden_stable_mirror');
+ let content = document.getElementById('content_hidden_stable_mirror');
assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
- }, "overflow auto, scrollbar-gutter always force");
+ let reference = document.getElementById('content_auto_stable');
+ assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"stable\"");
+ }, "overflow hidden, scrollbar-gutter stable mirror");
test(function () {
- let container = document.getElementById('container_scroll_always_force');
- let content = document.getElementById('content_scroll_always_force');
- assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
- assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
- }, "overflow scroll, scrollbar-gutter always force");
-
- test(function () {
- let container = document.getElementById('container_visible_always_force');
- let content = document.getElementById('content_visible_always_force');
- assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
- assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
- }, "overflow visible, scrollbar-gutter always force");
-
- test(function () {
- let container = document.getElementById('container_hidden_always_force');
- let content = document.getElementById('content_hidden_always_force');
- assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
- assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
- }, "overflow hidden, scrollbar-gutter always force");
-
- test(function () {
- let container = document.getElementById('container_clip_always_force');
- let content = document.getElementById('content_clip_always_force');
- assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
- assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
- }, "overflow clip, scrollbar-gutter always force");
-
- // scrollbar-gutter: always both
-
- test(function () {
- let container = document.getElementById('container_auto_always_both');
- let content = document.getElementById('content_auto_always_both');
- assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
- assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
- let reference = document.getElementById('content_auto_always');
- assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always\"");
- }, "overflow auto, scrollbar-gutter always both");
-
- test(function () {
- let container = document.getElementById('container_scroll_always_both');
- let content = document.getElementById('content_scroll_always_both');
- assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
- assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
- let reference = document.getElementById('content_scroll_always');
- assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always\"");
- }, "overflow scroll, scrollbar-gutter always both");
-
- test(function () {
- let container = document.getElementById('container_visible_always_both');
- let content = document.getElementById('content_visible_always_both');
+ let container = document.getElementById('container_clip_stable_mirror');
+ let content = document.getElementById('content_clip_stable_mirror');
assert_equals(container.offsetWidth, content.offsetWidth, "content width");
assert_equals(container.offsetLeft, content.offsetLeft, "content position");
- }, "overflow visible, scrollbar-gutter always both");
-
- test(function () {
- let container = document.getElementById('container_hidden_always_both');
- let content = document.getElementById('content_hidden_always_both');
- assert_equals(container.offsetWidth, content.offsetWidth, "content width");
- assert_equals(container.offsetLeft, content.offsetLeft, "content position");
- }, "overflow hidden, scrollbar-gutter always both");
-
- test(function () {
- let container = document.getElementById('container_clip_always_both');
- let content = document.getElementById('content_clip_always_both');
- assert_equals(container.offsetWidth, content.offsetWidth, "content width");
- assert_equals(container.offsetLeft, content.offsetLeft, "content position");
- }, "overflow clip, scrollbar-gutter always both");
-
- // scrollbar-gutter: always both force
-
- test(function () {
- let container = document.getElementById('container_auto_always_both_force');
- let content = document.getElementById('content_auto_always_both_force');
- assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
- assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
- let reference = document.getElementById('content_auto_always_force');
- assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
- }, "overflow auto, scrollbar-gutter always both force");
-
- test(function () {
- let container = document.getElementById('container_scroll_always_both_force');
- let content = document.getElementById('content_scroll_always_both_force');
- assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
- assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
- let reference = document.getElementById('content_scroll_always_force');
- assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
- }, "overflow scroll, scrollbar-gutter always both force");
-
- test(function () {
- let container = document.getElementById('container_visible_always_both_force');
- let content = document.getElementById('content_visible_always_both_force');
- assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
- assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
- let reference = document.getElementById('content_visible_always_force');
- assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
- }, "overflow visible, scrollbar-gutter always both force");
-
- test(function () {
- let container = document.getElementById('container_hidden_always_both_force');
- let content = document.getElementById('content_hidden_always_both_force');
- assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
- assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
- let reference = document.getElementById('content_hidden_always_force');
- assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
- }, "overflow hidden, scrollbar-gutter always both force");
-
- test(function () {
- let container = document.getElementById('container_clip_always_both_force');
- let content = document.getElementById('content_clip_always_both_force');
- assert_greater_than(container.offsetWidth, content.offsetWidth, "content width");
- assert_less_than(container.offsetLeft, content.offsetLeft, "content position");
- let reference = document.getElementById('content_clip_always_force');
- assert_less_than(content.offsetWidth, reference.offsetWidth, "compare with \"always force\"");
- }, "overflow clip, scrollbar-gutter always both force");
+ }, "overflow clip, scrollbar-gutter stable mirror");
done();
diff --git a/css/css-overflow/scrollbar-gutter-vertical-lr-001.html b/css/css-overflow/scrollbar-gutter-vertical-lr-001.html
index 27ac8f4..e8553b4 100644
--- a/css/css-overflow/scrollbar-gutter-vertical-lr-001.html
+++ b/css/css-overflow/scrollbar-gutter-vertical-lr-001.html
@@ -31,28 +31,17 @@
background: lightsalmon;
}
- /* scrollbar-gutter
- Note: not testing "stable" because the decision to use overlay scrollbars
- is up to the browser. The "always" keyword takes effect regardless of
- whether classical or overlay scrollbars are being used.*/
+ /* scrollbar-gutter */
.sg_auto {
scrollbar-gutter: auto;
}
- .sg_always {
- scrollbar-gutter: always;
+ .sg_stable {
+ scrollbar-gutter: stable;
}
- .sg_always_both {
- scrollbar-gutter: always both;
- }
-
- .sg_always_force {
- scrollbar-gutter: always force;
- }
-
- .sg_always_both_force {
- scrollbar-gutter: always both force;
+ .sg_stable_mirror {
+ scrollbar-gutter: stable mirror;
}
/* overflow */
@@ -73,7 +62,7 @@
}
.container.ov_clip {
- overflow-x: clip;
+ overflow: clip;
}
</style>
<body>
@@ -101,90 +90,46 @@
</div>
<div class="line">
- <div class="container ov_auto sg_always" id="container_auto_always">
- <div class="content" id="content_auto_always">auto/always</div>
+ <div class="container ov_auto sg_stable" id="container_auto_stable">
+ <div class="content" id="content_auto_stable">auto/stable</div>
</div>
- <div class="container ov_scroll sg_always" id="container_scroll_always">
- <div class="content" id="content_scroll_always">scroll/always</div>
+ <div class="container ov_scroll sg_stable" id="container_scroll_stable">
+ <div class="content" id="content_scroll_stable">scroll/stable</div>
</div>
- <div class="container ov_visible sg_always" id="container_visible_always">
- <div class="content" id="content_visible_always">visible/always</div>
+ <div class="container ov_visible sg_stable" id="container_visible_stable">
+ <div class="content" id="content_visible_stable">visible/stable</div>
</div>
- <div class="container ov_hidden sg_always" id="container_hidden_always">
- <div class="content" id="content_hidden_always">hidden/always</div>
+ <div class="container ov_hidden sg_stable" id="container_hidden_stable">
+ <div class="content" id="content_hidden_stable">hidden/stable</div>
</div>
- <div class="container ov_clip sg_always" id="container_clip_always">
- <div class="content" id="content_clip_always">clip/always</div>
+ <div class="container ov_clip sg_stable" id="container_clip_stable">
+ <div class="content" id="content_clip_stable">clip/stable</div>
</div>
</div>
<div class="line">
- <div class="container ov_auto sg_always_force" id="container_auto_always_force">
- <div class="content" id="content_auto_always_force">auto/always force</div>
+ <div class="container ov_auto sg_stable_mirror" id="container_auto_stable_mirror">
+ <div class="content" id="content_auto_stable_mirror">auto/stable mirror</div>
</div>
- <div class="container ov_scroll sg_always_force" id="container_scroll_always_force">
- <div class="content" id="content_scroll_always_force">scroll/always force</div>
+ <div class="container ov_scroll sg_stable_mirror" id="container_scroll_stable_mirror">
+ <div class="content" id="content_scroll_stable_mirror">scroll/stable mirror</div>
</div>
- <div class="container ov_visible sg_always_force" id="container_visible_always_force">
- <div class="content" id="content_visible_always_force">visible/always force</div>
+ <div class="container ov_visible sg_stable_mirror" id="container_visible_stable_mirror">
+ <div class="content" id="content_visible_stable_mirror">visible/stable mirror</div>
</div>
- <div class="container ov_hidden sg_always_force" id="container_hidden_always_force">
- <div class="content" id="content_hidden_always_force">hidden/always force</div>
+ <div class="container ov_hidden sg_stable_mirror" id="container_hidden_stable_mirror">
+ <div class="content" id="content_hidden_stable_mirror">hidden/stable mirror</div>
</div>
- <div class="container ov_clip sg_always_force" id="container_clip_always_force">
- <div class="content" id="content_clip_always_force">clip/always force</div>
- </div>
- </div>
-
- <div class="line">
- <div class="container ov_auto sg_always_both" id="container_auto_always_both">
- <div class="content" id="content_auto_always_both">auto/always both</div>
- </div>
-
- <div class="container ov_scroll sg_always_both" id="container_scroll_always_both">
- <div class="content" id="content_scroll_always_both">scroll/always both</div>
- </div>
-
- <div class="container ov_visible sg_always_both" id="container_visible_always_both">
- <div class="content" id="content_visible_always_both">visible/always both</div>
- </div>
-
- <div class="container ov_hidden sg_always_both" id="container_hidden_always_both">
- <div class="content" id="content_hidden_always_both">hidden/always both</div>
- </div>
-
- <div class="container ov_clip sg_always_both" id="container_clip_always_both">
- <div class="content" id="content_clip_always_both">clip/always both</div>
- </div>
- </div>
-
- <div class="line">
- <div class="container ov_auto sg_always_both_force" id="container_auto_always_both_force">
- <div class="content" id="content_auto_always_both_force">auto/always both force</div>
- </div>
-
- <div class="container ov_scroll sg_always_both_force" id="container_scroll_always_both_force">
- <div class="content" id="content_scroll_always_both_force">scroll/always both force</div>
- </div>
-
- <div class="container ov_visible sg_always_both_force" id="container_visible_always_both_force">
- <div class="content" id="content_visible_always_both_force">visible/always both force</div>
- </div>
-
- <div class="container ov_hidden sg_always_both_force" id="container_hidden_always_both_force">
- <div class="content" id="content_hidden_always_both_force">hidden/always both force</div>
- </div>
-
- <div class="container ov_clip sg_always_both_force" id="container_clip_always_both_force">
- <div class="content" id="content_clip_always_both_force">clip/always both force</div>
+ <div class="container ov_clip sg_stable_mirror" id="container_clip_stable_mirror">
+ <div class="content" id="content_clip_stable_mirror">clip/stable mirror</div>
</div>
</div>
@@ -228,167 +173,85 @@
assert_equals(container.offsetTop, content.offsetTop, "content position");
}, "overflow clip, scrollbar-gutter auto");
- // scrollbar-gutter: always
+ // scrollbar-gutter: stable
test(function () {
- let container = document.getElementById('container_auto_always');
- let content = document.getElementById('content_auto_always');
+ let container = document.getElementById('container_auto_stable');
+ let content = document.getElementById('content_auto_stable');
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
assert_equals(container.offsetTop, content.offsetTop, "content position");
- }, "overflow auto, scrollbar-gutter always");
+ }, "overflow auto, scrollbar-gutter stable");
test(function () {
- let container = document.getElementById('container_scroll_always');
- let content = document.getElementById('content_scroll_always');
+ let container = document.getElementById('container_scroll_stable');
+ let content = document.getElementById('content_scroll_stable');
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
assert_equals(container.offsetTop, content.offsetTop, "content position");
- }, "overflow scroll, scrollbar-gutter always");
+ }, "overflow scroll, scrollbar-gutter stable");
test(function () {
- let container = document.getElementById('container_visible_always');
- let content = document.getElementById('content_visible_always');
+ let container = document.getElementById('container_visible_stable');
+ let content = document.getElementById('content_visible_stable');
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
assert_equals(container.offsetTop, content.offsetTop, "content position");
- }, "overflow visible, scrollbar-gutter always");
+ }, "overflow visible, scrollbar-gutter stable");
test(function () {
- let container = document.getElementById('container_hidden_always');
- let content = document.getElementById('content_hidden_always');
+ let container = document.getElementById('container_hidden_stable');
+ let content = document.getElementById('content_hidden_stable');
+ assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
+ assert_equals(container.offsetTop, content.offsetTop, "content position");
+ }, "overflow hidden, scrollbar-gutter stable");
+
+ test(function () {
+ let container = document.getElementById('container_clip_stable');
+ let content = document.getElementById('content_clip_stable');
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
assert_equals(container.offsetTop, content.offsetTop, "content position");
- }, "overflow hidden, scrollbar-gutter always");
+ }, "overflow clip, scrollbar-gutter stable");
+
+ // scrollbar-gutter: stable mirror
test(function () {
- let container = document.getElementById('container_clip_always');
- let content = document.getElementById('content_clip_always');
+ let container = document.getElementById('container_auto_stable_mirror');
+ let content = document.getElementById('content_auto_stable_mirror');
+ assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
+ assert_less_than(container.offsetTop, content.offsetTop, "content position");
+ let reference = document.getElementById('content_auto_stable');
+ assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\"");
+ }, "overflow auto, scrollbar-gutter stable mirror");
+
+ test(function () {
+ let container = document.getElementById('container_scroll_stable_mirror');
+ let content = document.getElementById('content_scroll_stable_mirror');
+ assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
+ assert_less_than(container.offsetTop, content.offsetTop, "content position");
+ let reference = document.getElementById('content_auto_stable');
+ assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\"");
+ }, "overflow scroll, scrollbar-gutter stable mirror");
+
+ test(function () {
+ let container = document.getElementById('container_visible_stable_mirror');
+ let content = document.getElementById('content_visible_stable_mirror');
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
assert_equals(container.offsetTop, content.offsetTop, "content position");
- }, "overflow clip, scrollbar-gutter always");
-
- // scrollbar-gutter: always force
+ }, "overflow visible, scrollbar-gutter stable mirror");
test(function () {
- let container = document.getElementById('container_auto_always_force');
- let content = document.getElementById('content_auto_always_force');
- assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
- assert_equals(container.offsetTop, content.offsetTop, "content position");
- }, "overflow auto, scrollbar-gutter always force");
-
- test(function () {
- let container = document.getElementById('container_scroll_always_force');
- let content = document.getElementById('content_scroll_always_force');
- assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
- assert_equals(container.offsetTop, content.offsetTop, "content position");
- }, "overflow scroll, scrollbar-gutter always force");
-
- test(function () {
- let container = document.getElementById('container_visible_always_force');
- let content = document.getElementById('content_visible_always_force');
- assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
- assert_equals(container.offsetTop, content.offsetTop, "content position");
- }, "overflow visible, scrollbar-gutter always force");
-
- test(function () {
- let container = document.getElementById('container_hidden_always_force');
- let content = document.getElementById('content_hidden_always_force');
- assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
- assert_equals(container.offsetTop, content.offsetTop, "content position");
- }, "overflow hidden, scrollbar-gutter always force");
-
- test(function () {
- let container = document.getElementById('container_clip_always_force');
- let content = document.getElementById('content_clip_always_force');
- assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
- assert_equals(container.offsetTop, content.offsetTop, "content position");
- }, "overflow clip, scrollbar-gutter always force");
-
- // scrollbar-gutter: always both
-
- test(function () {
- let container = document.getElementById('container_auto_always_both');
- let content = document.getElementById('content_auto_always_both');
+ let container = document.getElementById('container_hidden_stable_mirror');
+ let content = document.getElementById('content_hidden_stable_mirror');
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
assert_less_than(container.offsetTop, content.offsetTop, "content position");
- let reference = document.getElementById('content_auto_always');
- assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always\"");
- }, "overflow auto, scrollbar-gutter always both");
+ let reference = document.getElementById('content_auto_stable');
+ assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\"");
+ }, "overflow hidden, scrollbar-gutter stable mirror");
test(function () {
- let container = document.getElementById('container_scroll_always_both');
- let content = document.getElementById('content_scroll_always_both');
- assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
- assert_less_than(container.offsetTop, content.offsetTop, "content position");
- let reference = document.getElementById('content_auto_always');
- assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always\"");
- }, "overflow scroll, scrollbar-gutter always both");
-
- test(function () {
- let container = document.getElementById('container_visible_always_both');
- let content = document.getElementById('content_visible_always_both');
+ let container = document.getElementById('container_clip_stable_mirror');
+ let content = document.getElementById('content_clip_stable_mirror');
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
assert_equals(container.offsetTop, content.offsetTop, "content position");
- }, "overflow visible, scrollbar-gutter always both");
-
- test(function () {
- let container = document.getElementById('container_hidden_always_both');
- let content = document.getElementById('content_hidden_always_both');
- assert_equals(container.offsetHeight, content.offsetHeight, "content height");
- assert_equals(container.offsetTop, content.offsetTop, "content position");
- }, "overflow hidden, scrollbar-gutter always both");
-
- test(function () {
- let container = document.getElementById('container_clip_always_both');
- let content = document.getElementById('content_clip_always_both');
- assert_equals(container.offsetHeight, content.offsetHeight, "content height");
- assert_equals(container.offsetTop, content.offsetTop, "content position");
- }, "overflow clip, scrollbar-gutter always both");
-
- // scrollbar-gutter: always both force
-
- test(function () {
- let container = document.getElementById('container_auto_always_both_force');
- let content = document.getElementById('content_auto_always_both_force');
- assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
- assert_less_than(container.offsetTop, content.offsetTop, "content position");
- let reference = document.getElementById('content_auto_always_force');
- assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
- }, "overflow auto, scrollbar-gutter always both force");
-
- test(function () {
- let container = document.getElementById('container_scroll_always_both_force');
- let content = document.getElementById('content_scroll_always_both_force');
- assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
- assert_less_than(container.offsetTop, content.offsetTop, "content position");
- let reference = document.getElementById('content_scroll_always_force');
- assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
- }, "overflow scroll, scrollbar-gutter always both force");
-
- test(function () {
- let container = document.getElementById('container_visible_always_both_force');
- let content = document.getElementById('content_visible_always_both_force');
- assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
- assert_less_than(container.offsetTop, content.offsetTop, "content position");
- let reference = document.getElementById('content_visible_always_force');
- assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
- }, "overflow visible, scrollbar-gutter always both force");
-
- test(function () {
- let container = document.getElementById('container_hidden_always_both_force');
- let content = document.getElementById('content_hidden_always_both_force');
- assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
- assert_less_than(container.offsetTop, content.offsetTop, "content position");
- let reference = document.getElementById('content_hidden_always_force');
- assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
- }, "overflow hidden, scrollbar-gutter always both force");
-
- test(function () {
- let container = document.getElementById('container_clip_always_both_force');
- let content = document.getElementById('content_clip_always_both_force');
- assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
- assert_less_than(container.offsetTop, content.offsetTop, "content position");
- let reference = document.getElementById('content_clip_always_force');
- assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
- }, "overflow clip, scrollbar-gutter always both force");
+ }, "overflow clip, scrollbar-gutter stable mirror");
done();
diff --git a/css/css-overflow/scrollbar-gutter-vertical-rl-001.html b/css/css-overflow/scrollbar-gutter-vertical-rl-001.html
index d4eab0b..4e630c9 100644
--- a/css/css-overflow/scrollbar-gutter-vertical-rl-001.html
+++ b/css/css-overflow/scrollbar-gutter-vertical-rl-001.html
@@ -31,28 +31,17 @@
background: lightsalmon;
}
- /* scrollbar-gutter
- Note: not testing "stable" because the decision to use overlay scrollbars
- is up to the browser. The "always" keyword takes effect regardless of
- whether classical or overlay scrollbars are being used.*/
+ /* scrollbar-gutter */
.sg_auto {
scrollbar-gutter: auto;
}
- .sg_always {
- scrollbar-gutter: always;
+ .sg_stable {
+ scrollbar-gutter: stable;
}
- .sg_always_both {
- scrollbar-gutter: always both;
- }
-
- .sg_always_force {
- scrollbar-gutter: always force;
- }
-
- .sg_always_both_force {
- scrollbar-gutter: always both force;
+ .sg_stable_mirror {
+ scrollbar-gutter: stable mirror;
}
/* overflow */
@@ -73,7 +62,7 @@
}
.container.ov_clip {
- overflow-x: clip;
+ overflow: clip;
}
</style>
<body>
@@ -101,90 +90,46 @@
</div>
<div class="line">
- <div class="container ov_auto sg_always" id="container_auto_always">
- <div class="content" id="content_auto_always">auto/always</div>
+ <div class="container ov_auto sg_stable" id="container_auto_stable">
+ <div class="content" id="content_auto_stable">auto/stable</div>
</div>
- <div class="container ov_scroll sg_always" id="container_scroll_always">
- <div class="content" id="content_scroll_always">scroll/always</div>
+ <div class="container ov_scroll sg_stable" id="container_scroll_stable">
+ <div class="content" id="content_scroll_stable">scroll/stable</div>
</div>
- <div class="container ov_visible sg_always" id="container_visible_always">
- <div class="content" id="content_visible_always">visible/always</div>
+ <div class="container ov_visible sg_stable" id="container_visible_stable">
+ <div class="content" id="content_visible_stable">visible/stable</div>
</div>
- <div class="container ov_hidden sg_always" id="container_hidden_always">
- <div class="content" id="content_hidden_always">hidden/always</div>
+ <div class="container ov_hidden sg_stable" id="container_hidden_stable">
+ <div class="content" id="content_hidden_stable">hidden/stable</div>
</div>
- <div class="container ov_clip sg_always" id="container_clip_always">
- <div class="content" id="content_clip_always">clip/always</div>
+ <div class="container ov_clip sg_stable" id="container_clip_stable">
+ <div class="content" id="content_clip_stable">clip/stable</div>
</div>
</div>
<div class="line">
- <div class="container ov_auto sg_always_force" id="container_auto_always_force">
- <div class="content" id="content_auto_always_force">auto/always force</div>
+ <div class="container ov_auto sg_stable_mirror" id="container_auto_stable_mirror">
+ <div class="content" id="content_auto_stable_mirror">auto/stable mirror</div>
</div>
- <div class="container ov_scroll sg_always_force" id="container_scroll_always_force">
- <div class="content" id="content_scroll_always_force">scroll/always force</div>
+ <div class="container ov_scroll sg_stable_mirror" id="container_scroll_stable_mirror">
+ <div class="content" id="content_scroll_stable_mirror">scroll/stable mirror</div>
</div>
- <div class="container ov_visible sg_always_force" id="container_visible_always_force">
- <div class="content" id="content_visible_always_force">visible/always force</div>
+ <div class="container ov_visible sg_stable_mirror" id="container_visible_stable_mirror">
+ <div class="content" id="content_visible_stable_mirror">visible/stable mirror</div>
</div>
- <div class="container ov_hidden sg_always_force" id="container_hidden_always_force">
- <div class="content" id="content_hidden_always_force">hidden/always force</div>
+ <div class="container ov_hidden sg_stable_mirror" id="container_hidden_stable_mirror">
+ <div class="content" id="content_hidden_stable_mirror">hidden/stable mirror</div>
</div>
- <div class="container ov_clip sg_always_force" id="container_clip_always_force">
- <div class="content" id="content_clip_always_force">clip/always force</div>
- </div>
- </div>
-
- <div class="line">
- <div class="container ov_auto sg_always_both" id="container_auto_always_both">
- <div class="content" id="content_auto_always_both">auto/always both</div>
- </div>
-
- <div class="container ov_scroll sg_always_both" id="container_scroll_always_both">
- <div class="content" id="content_scroll_always_both">scroll/always both</div>
- </div>
-
- <div class="container ov_visible sg_always_both" id="container_visible_always_both">
- <div class="content" id="content_visible_always_both">visible/always both</div>
- </div>
-
- <div class="container ov_hidden sg_always_both" id="container_hidden_always_both">
- <div class="content" id="content_hidden_always_both">hidden/always both</div>
- </div>
-
- <div class="container ov_clip sg_always_both" id="container_clip_always_both">
- <div class="content" id="content_clip_always_both">clip/always both</div>
- </div>
- </div>
-
- <div class="line">
- <div class="container ov_auto sg_always_both_force" id="container_auto_always_both_force">
- <div class="content" id="content_auto_always_both_force">auto/always both force</div>
- </div>
-
- <div class="container ov_scroll sg_always_both_force" id="container_scroll_always_both_force">
- <div class="content" id="content_scroll_always_both_force">scroll/always both force</div>
- </div>
-
- <div class="container ov_visible sg_always_both_force" id="container_visible_always_both_force">
- <div class="content" id="content_visible_always_both_force">visible/always both force</div>
- </div>
-
- <div class="container ov_hidden sg_always_both_force" id="container_hidden_always_both_force">
- <div class="content" id="content_hidden_always_both_force">hidden/always both force</div>
- </div>
-
- <div class="container ov_clip sg_always_both_force" id="container_clip_always_both_force">
- <div class="content" id="content_clip_always_both_force">clip/always both force</div>
+ <div class="container ov_clip sg_stable_mirror" id="container_clip_stable_mirror">
+ <div class="content" id="content_clip_stable_mirror">clip/stable mirror</div>
</div>
</div>
@@ -229,167 +174,85 @@
assert_equals(container.offsetTop, content.offsetTop, "content position");
}, "overflow clip, scrollbar-gutter auto");
- // scrollbar-gutter: always
+ // scrollbar-gutter: stable
test(function () {
- let container = document.getElementById('container_auto_always');
- let content = document.getElementById('content_auto_always');
+ let container = document.getElementById('container_auto_stable');
+ let content = document.getElementById('content_auto_stable');
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
assert_equals(container.offsetTop, content.offsetTop, "content position");
- }, "overflow auto, scrollbar-gutter always");
+ }, "overflow auto, scrollbar-gutter stable");
test(function () {
- let container = document.getElementById('container_scroll_always');
- let content = document.getElementById('content_scroll_always');
+ let container = document.getElementById('container_scroll_stable');
+ let content = document.getElementById('content_scroll_stable');
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
assert_equals(container.offsetTop, content.offsetTop, "content position");
- }, "overflow scroll, scrollbar-gutter always");
+ }, "overflow scroll, scrollbar-gutter stable");
test(function () {
- let container = document.getElementById('container_visible_always');
- let content = document.getElementById('content_visible_always');
+ let container = document.getElementById('container_visible_stable');
+ let content = document.getElementById('content_visible_stable');
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
assert_equals(container.offsetTop, content.offsetTop, "content position");
- }, "overflow visible, scrollbar-gutter always");
+ }, "overflow visible, scrollbar-gutter stable");
test(function () {
- let container = document.getElementById('container_hidden_always');
- let content = document.getElementById('content_hidden_always');
+ let container = document.getElementById('container_hidden_stable');
+ let content = document.getElementById('content_hidden_stable');
+ assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
+ assert_equals(container.offsetTop, content.offsetTop, "content position");
+ }, "overflow hidden, scrollbar-gutter stable");
+
+ test(function () {
+ let container = document.getElementById('container_clip_stable');
+ let content = document.getElementById('content_clip_stable');
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
assert_equals(container.offsetTop, content.offsetTop, "content position");
- }, "overflow hidden, scrollbar-gutter always");
+ }, "overflow clip, scrollbar-gutter stable");
+
+ // scrollbar-gutter: stable mirror
test(function () {
- let container = document.getElementById('container_clip_always');
- let content = document.getElementById('content_clip_always');
+ let container = document.getElementById('container_auto_stable_mirror');
+ let content = document.getElementById('content_auto_stable_mirror');
+ assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
+ assert_less_than(container.offsetTop, content.offsetTop, "content position");
+ let reference = document.getElementById('content_auto_stable');
+ assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\"");
+ }, "overflow auto, scrollbar-gutter stable mirror");
+
+ test(function () {
+ let container = document.getElementById('container_scroll_stable_mirror');
+ let content = document.getElementById('content_scroll_stable_mirror');
+ assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
+ assert_less_than(container.offsetTop, content.offsetTop, "content position");
+ let reference = document.getElementById('content_auto_stable');
+ assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\"");
+ }, "overflow scroll, scrollbar-gutter stable mirror");
+
+ test(function () {
+ let container = document.getElementById('container_visible_stable_mirror');
+ let content = document.getElementById('content_visible_stable_mirror');
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
assert_equals(container.offsetTop, content.offsetTop, "content position");
- }, "overflow clip, scrollbar-gutter always");
-
- // scrollbar-gutter: always force
+ }, "overflow visible, scrollbar-gutter stable mirror");
test(function () {
- let container = document.getElementById('container_auto_always_force');
- let content = document.getElementById('content_auto_always_force');
- assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
- assert_equals(container.offsetTop, content.offsetTop, "content position");
- }, "overflow auto, scrollbar-gutter always force");
-
- test(function () {
- let container = document.getElementById('container_scroll_always_force');
- let content = document.getElementById('content_scroll_always_force');
- assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
- assert_equals(container.offsetTop, content.offsetTop, "content position");
- }, "overflow scroll, scrollbar-gutter always force");
-
- test(function () {
- let container = document.getElementById('container_visible_always_force');
- let content = document.getElementById('content_visible_always_force');
- assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
- assert_equals(container.offsetTop, content.offsetTop, "content position");
- }, "overflow visible, scrollbar-gutter always force");
-
- test(function () {
- let container = document.getElementById('container_hidden_always_force');
- let content = document.getElementById('content_hidden_always_force');
- assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
- assert_equals(container.offsetTop, content.offsetTop, "content position");
- }, "overflow hidden, scrollbar-gutter always force");
-
- test(function () {
- let container = document.getElementById('container_clip_always_force');
- let content = document.getElementById('content_clip_always_force');
- assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
- assert_equals(container.offsetTop, content.offsetTop, "content position");
- }, "overflow clip, scrollbar-gutter always force");
-
- // scrollbar-gutter: always both
-
- test(function () {
- let container = document.getElementById('container_auto_always_both');
- let content = document.getElementById('content_auto_always_both');
+ let container = document.getElementById('container_hidden_stable_mirror');
+ let content = document.getElementById('content_hidden_stable_mirror');
assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
assert_less_than(container.offsetTop, content.offsetTop, "content position");
- let reference = document.getElementById('content_auto_always');
- assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always\"");
- }, "overflow auto, scrollbar-gutter always both");
+ let reference = document.getElementById('content_auto_stable');
+ assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"stable\"");
+ }, "overflow hidden, scrollbar-gutter stable mirror");
test(function () {
- let container = document.getElementById('container_scroll_always_both');
- let content = document.getElementById('content_scroll_always_both');
- assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
- assert_less_than(container.offsetTop, content.offsetTop, "content position");
- let reference = document.getElementById('content_auto_always');
- assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always\"");
- }, "overflow scroll, scrollbar-gutter always both");
-
- test(function () {
- let container = document.getElementById('container_visible_always_both');
- let content = document.getElementById('content_visible_always_both');
+ let container = document.getElementById('container_clip_stable_mirror');
+ let content = document.getElementById('content_clip_stable_mirror');
assert_equals(container.offsetHeight, content.offsetHeight, "content height");
assert_equals(container.offsetTop, content.offsetTop, "content position");
- }, "overflow visible, scrollbar-gutter always both");
-
- test(function () {
- let container = document.getElementById('container_hidden_always_both');
- let content = document.getElementById('content_hidden_always_both');
- assert_equals(container.offsetHeight, content.offsetHeight, "content height");
- assert_equals(container.offsetTop, content.offsetTop, "content position");
- }, "overflow hidden, scrollbar-gutter always both");
-
- test(function () {
- let container = document.getElementById('container_clip_always_both');
- let content = document.getElementById('content_clip_always_both');
- assert_equals(container.offsetHeight, content.offsetHeight, "content height");
- assert_equals(container.offsetTop, content.offsetTop, "content position");
- }, "overflow clip, scrollbar-gutter always both");
-
- // scrollbar-gutter: always both force
-
- test(function () {
- let container = document.getElementById('container_auto_always_both_force');
- let content = document.getElementById('content_auto_always_both_force');
- assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
- assert_less_than(container.offsetTop, content.offsetTop, "content position");
- let reference = document.getElementById('content_auto_always_force');
- assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
- }, "overflow auto, scrollbar-gutter always both force");
-
- test(function () {
- let container = document.getElementById('container_scroll_always_both_force');
- let content = document.getElementById('content_scroll_always_both_force');
- assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
- assert_less_than(container.offsetTop, content.offsetTop, "content position");
- let reference = document.getElementById('content_scroll_always_force');
- assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
- }, "overflow scroll, scrollbar-gutter always both force");
-
- test(function () {
- let container = document.getElementById('container_visible_always_both_force');
- let content = document.getElementById('content_visible_always_both_force');
- assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
- assert_less_than(container.offsetTop, content.offsetTop, "content position");
- let reference = document.getElementById('content_visible_always_force');
- assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
- }, "overflow visible, scrollbar-gutter always both force");
-
- test(function () {
- let container = document.getElementById('container_hidden_always_both_force');
- let content = document.getElementById('content_hidden_always_both_force');
- assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
- assert_less_than(container.offsetTop, content.offsetTop, "content position");
- let reference = document.getElementById('content_hidden_always_force');
- assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
- }, "overflow hidden, scrollbar-gutter always both force");
-
- test(function () {
- let container = document.getElementById('container_clip_always_both_force');
- let content = document.getElementById('content_clip_always_both_force');
- assert_greater_than(container.offsetHeight, content.offsetHeight, "content height");
- assert_less_than(container.offsetTop, content.offsetTop, "content position");
- let reference = document.getElementById('content_clip_always_force');
- assert_less_than(content.offsetHeight, reference.offsetHeight, "compare with \"always force\"");
- }, "overflow clip, scrollbar-gutter always both force");
+ }, "overflow clip, scrollbar-gutter stable mirror");
done();
diff --git a/css/css-scrollbars/scrollbar-width-001.html b/css/css-scrollbars/scrollbar-width-001.html
index af50cd2..21dfd3d 100644
--- a/css/css-scrollbars/scrollbar-width-001.html
+++ b/css/css-scrollbars/scrollbar-width-001.html
@@ -7,10 +7,9 @@
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<style>
- /* Use scrollbar-gutter so there is always space reserved
- for the scrollbar, even when it is of the overlay kind. */
+ /* Use scrollbar-gutter to reserve space for the scrollbar. */
.container {
- scrollbar-gutter: always;
+ scrollbar-gutter: stable;
writing-mode: horizontal-tb;
overflow: auto;
height: 200px;
diff --git a/css/css-scrollbars/scrollbar-width-002.html b/css/css-scrollbars/scrollbar-width-002.html
index 89a5d77..15e6af9 100644
--- a/css/css-scrollbars/scrollbar-width-002.html
+++ b/css/css-scrollbars/scrollbar-width-002.html
@@ -7,10 +7,9 @@
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<style>
- /* Use scrollbar-gutter so there is always space reserved
- for the scrollbar, even when it is of the overlay kind. */
+ /* Use scrollbar-gutter to reserve space for the scrollbar. */
.container {
- scrollbar-gutter: always;
+ scrollbar-gutter: stable;
overflow: auto;
height: 200px;
width: 200px;
diff --git a/css/css-scrollbars/scrollbar-width-003.html b/css/css-scrollbars/scrollbar-width-003.html
index e0c1e59..7574e8d 100644
--- a/css/css-scrollbars/scrollbar-width-003.html
+++ b/css/css-scrollbars/scrollbar-width-003.html
@@ -7,10 +7,9 @@
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<style>
- /* Use scrollbar-gutter so there is always space reserved
- for the scrollbar, even when it is of the overlay kind. */
+ /* Use scrollbar-gutter to reserve space for the scrollbar. */
.container {
- scrollbar-gutter: always;
+ scrollbar-gutter: stable;
writing-mode: horizontal-tb;
overflow: auto;
height: 200px;
diff --git a/css/css-scrollbars/scrollbar-width-004.html b/css/css-scrollbars/scrollbar-width-004.html
index ee8bab0..bdd1cd6 100644
--- a/css/css-scrollbars/scrollbar-width-004.html
+++ b/css/css-scrollbars/scrollbar-width-004.html
@@ -7,10 +7,9 @@
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<style>
- /* Use scrollbar-gutter so there is always space reserved
- for the scrollbar, even when it is of the overlay kind. */
+ /* Use scrollbar-gutter to reserve space for the scrollbar. */
.container {
- scrollbar-gutter: always;
+ scrollbar-gutter: stable;
writing-mode: horizontal-tb;
overflow: auto;
height: 200px;
diff --git a/css/css-scrollbars/scrollbar-width-005.html b/css/css-scrollbars/scrollbar-width-005.html
index ea5f77a..62313f0 100644
--- a/css/css-scrollbars/scrollbar-width-005.html
+++ b/css/css-scrollbars/scrollbar-width-005.html
@@ -11,9 +11,8 @@
/* CSS scrollbar properties applied to the root element
will be propagated to the viewport. */
scrollbar-width: auto;
- /* Use scrollbar-gutter so there is always space reserved
- for the scrollbar, even when it is of the overlay kind. */
- scrollbar-gutter: always;
+ /* Use scrollbar-gutter to reserve space for the scrollbar. */
+ scrollbar-gutter: stable;
}
:root,
diff --git a/css/css-scrollbars/scrollbar-width-006.html b/css/css-scrollbars/scrollbar-width-006.html
index 3b1cc0b..488e24d 100644
--- a/css/css-scrollbars/scrollbar-width-006.html
+++ b/css/css-scrollbars/scrollbar-width-006.html
@@ -11,9 +11,8 @@
/* CSS scrollbar properties applied to the root element
will be propagated to the viewport. */
scrollbar-width: thin;
- /* Use scrollbar-gutter so there is always space reserved
- for the scrollbar, even when it is of the overlay kind. */
- scrollbar-gutter: always;
+ /* Use scrollbar-gutter to reserve space for the scrollbar. */
+ scrollbar-gutter: stable;
}
:root,
diff --git a/css/css-scrollbars/scrollbar-width-007.html b/css/css-scrollbars/scrollbar-width-007.html
index c40a7a8..500c7ef 100644
--- a/css/css-scrollbars/scrollbar-width-007.html
+++ b/css/css-scrollbars/scrollbar-width-007.html
@@ -11,9 +11,8 @@
/* CSS scrollbar properties applied to the root element
will be propagated to the viewport. */
scrollbar-width: none;
- /* Use scrollbar-gutter so there is always space reserved
- for the scrollbar, even when it is of the overlay kind. */
- scrollbar-gutter: always;
+ /* Use scrollbar-gutter to reserve space for the scrollbar. */
+ scrollbar-gutter: stable;
}
:root,
diff --git a/css/css-scrollbars/scrollbar-width-paint-001-ref.html b/css/css-scrollbars/scrollbar-width-paint-001-ref.html
index 2e7d40d..42295b1 100644
--- a/css/css-scrollbars/scrollbar-width-paint-001-ref.html
+++ b/css/css-scrollbars/scrollbar-width-paint-001-ref.html
@@ -6,7 +6,7 @@
}
.container {
- scrollbar-gutter: always;
+ scrollbar-gutter: stable;
flex: 0 0;
overflow: auto;
height: 200px;
diff --git a/css/css-scrollbars/scrollbar-width-paint-001.html b/css/css-scrollbars/scrollbar-width-paint-001.html
index 5318a24..3621a65 100644
--- a/css/css-scrollbars/scrollbar-width-paint-001.html
+++ b/css/css-scrollbars/scrollbar-width-paint-001.html
@@ -12,7 +12,7 @@
}
.container {
- scrollbar-gutter: always;
+ scrollbar-gutter: stable;
overflow: auto;
flex: 0 0;
height: 200px;
diff --git a/css/css-scrollbars/scrollbar-width-paint-002-ref.html b/css/css-scrollbars/scrollbar-width-paint-002-ref.html
index 2d00629..0014957 100644
--- a/css/css-scrollbars/scrollbar-width-paint-002-ref.html
+++ b/css/css-scrollbars/scrollbar-width-paint-002-ref.html
@@ -6,7 +6,7 @@
}
.container {
- scrollbar-gutter: always;
+ scrollbar-gutter: stable;
overflow: scroll;
flex: 0 0;
height: 200px;
diff --git a/css/css-scrollbars/scrollbar-width-paint-002.html b/css/css-scrollbars/scrollbar-width-paint-002.html
index 4a18977..1b39650 100644
--- a/css/css-scrollbars/scrollbar-width-paint-002.html
+++ b/css/css-scrollbars/scrollbar-width-paint-002.html
@@ -12,7 +12,7 @@
}
.container {
- scrollbar-gutter: always;
+ scrollbar-gutter: stable;
overflow: scroll;
flex: 0 0;
height: 200px;
diff --git a/css/css-typed-om/the-stylepropertymap/properties/scrollbar-gutter.html b/css/css-typed-om/the-stylepropertymap/properties/scrollbar-gutter.html
index aeab1cb..82f1069 100644
--- a/css/css-typed-om/the-stylepropertymap/properties/scrollbar-gutter.html
+++ b/css/css-typed-om/the-stylepropertymap/properties/scrollbar-gutter.html
@@ -15,16 +15,10 @@
runPropertyTests('scrollbar-gutter', [
{ syntax: 'auto' },
- { syntax: 'stable' },
- { syntax: 'always' },
+ { syntax: 'stable' }
]);
runUnsupportedPropertyTests('scrollbar-gutter', [
- 'stable both',
- 'stable force',
- 'stable both force',
- 'always both',
- 'always force',
- 'always both force'
+ 'stable mirror'
]);
</script>
