commit 215a792567774ee8bc4ad998b510d797ac61bf22
parent 663da710ae13f547614eee339aa565111a2bb7ed
Author: David Grogan <dgrogan@chromium.org>
Date: Mon, 8 Dec 2025 12:27:13 +0000
Bug 2004088 [wpt PR 56491] - [viewport units] Subtract scrollbar gutters from the viewport size, a=testonly
Automatic update from web-platform-tests
[viewport units] Subtract scrollbar gutters from the viewport size
In addition to unconditional scrollbars, we also have to subtract any gutters from the viewport size because they also unconditionally take up space.
Gutters only take up space in the inline direction, so we have to check the resolved writing mode property now.
Bug: 354751900
Change-Id: I07f1d9cd467e3c872da65d4ea709a21b14507c10
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7226421
Commit-Queue: David Grogan <dgrogan@chromium.org>
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1554127}
--
wpt-commits: 57507a3357ba2ab43803e65499675e85bf3c9e28
wpt-pr: 56491
Diffstat:
8 files changed, 210 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-values/viewport-units-gutter-001.html b/testing/web-platform/tests/css/css-values/viewport-units-gutter-001.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html style="overflow: auto; scrollbar-gutter: stable;">
+<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+<meta name="assert" content="There is no horizontal overflow when 100vw is reduced by gutter width even when the scrollbars themselves are conditional.">
+
+<!-- This test uses checkLayout instead of a reference because it's unclear how elements that overlap with the gutter should be laid out and painted. See https://github.com/w3c/csswg-drafts/issues/5253 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body style="margin: 0; padding: 0;">
+ <div style="width: 100vw; height: 100px; background: orange; box-sizing: border-box; border-left: 3px solid blue; border-right: 3px solid blue;" id="test-div"></div>
+
+ <!-- This div is only for measuring scrollbar size -->
+ <div id="measure" style="overflow: scroll;">
+ <div style="min-height: 300px;"></div>
+ </div>
+
+<script>
+ const scrollbarWidth = measure.offsetWidth - measure.clientWidth;
+ let testDiv = document.getElementById('test-div');
+ testDiv.setAttribute("data-expected-width", window.innerWidth - scrollbarWidth);
+ checkLayout("#test-div");
+</script>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-values/viewport-units-gutter-002.html b/testing/web-platform/tests/css/css-values/viewport-units-gutter-002.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html style="overflow: auto; scrollbar-gutter: stable both-edges;">
+<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+<meta name="assert" content="There is no horizontal overflow when 100vw is reduced by both-edges gutter width even when the scrollbars themselves are conditional.">
+
+<!-- This test uses checkLayout instead of a reference because it's unclear how elements that overlap with the gutter should be laid out and painted. See https://github.com/w3c/csswg-drafts/issues/5253 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body style="margin: 0; padding: 0;">
+ <div style="width: 100vw; height: 100px; background: orange; box-sizing: border-box; border-left: 3px solid blue; border-right: 3px solid blue;" id="test-div"></div>
+
+ <!-- This div is only for measuring scrollbar size -->
+ <div id="measure" style="overflow: scroll;">
+ <div style="min-height: 300px;"></div>
+ </div>
+
+<script>
+ const scrollbarWidth = measure.offsetWidth - measure.clientWidth;
+ let testDiv = document.getElementById('test-div');
+ testDiv.setAttribute("data-expected-width", window.innerWidth - 2*scrollbarWidth);
+ checkLayout("#test-div");
+</script>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-values/viewport-units-gutter-003.html b/testing/web-platform/tests/css/css-values/viewport-units-gutter-003.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html style="overflow-y: scroll; scrollbar-gutter: stable;">
+<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+<meta name="assert" content="There is no horizontal overflow when 100vw is reduced by gutter width when the scrollbar is unconditional.">
+
+<!-- This test uses checkLayout instead of a reference because it's unclear how elements that overlap with the gutter should be laid out and painted. See https://github.com/w3c/csswg-drafts/issues/5253 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body style="margin: 0; padding: 0;">
+ <div style="width: 100vw; height: 100px; background: orange; box-sizing: border-box; border-left: 3px solid blue; border-right: 3px solid blue;" id="test-div"></div>
+
+ <!-- This div is only for measuring scrollbar size -->
+ <div id="measure" style="overflow: scroll; width: 200px;">
+ <div style="min-height: 100px;">measure</div>
+ </div>
+
+<script>
+ const scrollbarWidth = measure.offsetWidth - measure.clientWidth;
+ let testDiv = document.getElementById('test-div');
+ testDiv.setAttribute("data-expected-width", window.innerWidth - scrollbarWidth);
+ checkLayout("#test-div");
+</script>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-values/viewport-units-gutter-004.html b/testing/web-platform/tests/css/css-values/viewport-units-gutter-004.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html style="overflow-y: scroll; scrollbar-gutter: stable both-edges;">
+<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+<meta name="assert" content="There is no horizontal overflow when 100vw is reduced by both-edges gutter width when the scrollbar is unconditional.">
+
+<!-- This test uses checkLayout instead of a reference because it's unclear how elements that overlap with the gutter should be laid out and painted. See https://github.com/w3c/csswg-drafts/issues/5253 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body style="margin: 0; padding: 0;">
+ <div style="width: 100vw; height: 100px; background: orange; box-sizing: border-box; border-left: 3px solid blue; border-right: 3px solid blue;" id="test-div"></div>
+
+ <!-- This div is only for measuring scrollbar size -->
+ <div id="measure" style="overflow: scroll; width: 200px;">
+ <div style="min-height: 100px;">measure</div>
+ </div>
+
+<script>
+ const scrollbarWidth = measure.offsetWidth - measure.clientWidth;
+ let testDiv = document.getElementById('test-div');
+ testDiv.setAttribute("data-expected-width", window.innerWidth - 2 * scrollbarWidth);
+ checkLayout("#test-div");
+</script>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-values/viewport-units-gutter-005.html b/testing/web-platform/tests/css/css-values/viewport-units-gutter-005.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html style="overflow-y: auto; scrollbar-gutter: stable; scrollbar-width: thin">
+<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+<meta name="assert" content="There is no horizontal overflow when 100vw is reduced by thin gutter width.">
+
+<!-- This test uses checkLayout instead of a reference because it's unclear how elements that overlap with the gutter should be laid out and painted. See https://github.com/w3c/csswg-drafts/issues/5253 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body style="margin: 0; padding: 0;">
+ <div style="width: 100vw; height: 100px; background: orange; box-sizing: border-box; border-left: 3px solid blue; border-right: 3px solid blue;" id="test-div"></div>
+
+ <!-- This div is only for measuring scrollbar size -->
+ <div id="measure" style="overflow: scroll; width: 200px; scrollbar-width: thin;">
+ <div style="min-height: 100px;">measure</div>
+ </div>
+
+<script>
+ const scrollbarWidth = measure.offsetWidth - measure.clientWidth;
+ let testDiv = document.getElementById('test-div');
+ testDiv.setAttribute("data-expected-width", window.innerWidth - scrollbarWidth);
+ checkLayout("#test-div");
+</script>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-values/viewport-units-gutter-006.html b/testing/web-platform/tests/css/css-values/viewport-units-gutter-006.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html style="overflow-y: auto; scrollbar-gutter: stable; scrollbar-width: none">
+<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+<meta name="assert" content="vw is not reduced in the presence of a scrollbar gutter when scrollbar-width is 'none'">
+
+<!-- This test uses checkLayout instead of a reference because it's unclear how elements that overlap with the gutter should be laid out and painted. See https://github.com/w3c/csswg-drafts/issues/5253 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body style="margin: 0; padding: 0;">
+ <div style="width: 100vw; height: 100px; background: orange; box-sizing: border-box; border-left: 3px solid blue; border-right: 3px solid blue;" id="test-div"></div>
+
+<script>
+ let testDiv = document.getElementById('test-div');
+ testDiv.setAttribute("data-expected-width", window.innerWidth);
+ checkLayout("#test-div");
+</script>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-values/viewport-units-gutter-007.html b/testing/web-platform/tests/css/css-values/viewport-units-gutter-007.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html style="overflow: auto; scrollbar-gutter: stable; writing-mode: vertical-rl;">
+<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+<meta name="assert" content="There is no vertical overflow when 100vh is reduced by gutter height even when the scrollbars themselves are conditional.">
+
+<!-- This test uses checkLayout instead of a reference because it's unclear how elements that overlap with the gutter should be laid out and painted. See https://github.com/w3c/csswg-drafts/issues/5253 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body style="margin: 0; padding: 0;">
+ <div style="height: 100vh; width: 100px; background: orange; box-sizing: border-box; border-top: 3px solid blue; border-bottom: 3px solid blue;" id="test-div"></div>
+
+ <!-- This div is only for measuring scrollbar size -->
+ <div id="measure" style="overflow: scroll;">
+ <div style="min-height: 300px;"></div>
+ </div>
+
+<script>
+ const scrollbarWidth = measure.offsetWidth - measure.clientWidth;
+ let testDiv = document.getElementById('test-div');
+ testDiv.setAttribute("data-expected-height", window.innerHeight - scrollbarWidth);
+ checkLayout("#test-div");
+</script>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-values/viewport-units-gutter-008.html b/testing/web-platform/tests/css/css-values/viewport-units-gutter-008.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html style="overflow: auto; scrollbar-gutter: stable both-edges; writing-mode: vertical-rl;">
+<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+<meta name="assert" content="There is no vertical overflow when 100vh is reduced by gutter height even when the scrollbars themselves are conditional.">
+
+<!-- This test uses checkLayout instead of a reference because it's unclear how elements that overlap with the gutter should be laid out and painted. See https://github.com/w3c/csswg-drafts/issues/5253 -->
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body style="margin: 0; padding: 0;">
+ <div style="height: 100vh; width: 100px; background: orange; box-sizing: border-box; border-top: 3px solid blue; border-bottom: 3px solid blue;" id="test-div"></div>
+
+ <!-- This div is only for measuring scrollbar size -->
+ <div id="measure" style="overflow: scroll;">
+ <div style="min-height: 300px;"></div>
+ </div>
+
+<script>
+ const scrollbarWidth = measure.offsetWidth - measure.clientWidth;
+ let testDiv = document.getElementById('test-div');
+ testDiv.setAttribute("data-expected-height", window.innerHeight - 2 * scrollbarWidth);
+ checkLayout("#test-div");
+</script>
+
+</body>
+</html>
