commit 3cd58538011e2a8f2f96fd8129f13141431d3f29 parent 5331201d178bcbb04c1cd64b2d12f4345c0be0b2 Author: David Grogan <dgrogan@chromium.org> Date: Fri, 14 Nov 2025 10:21:58 +0000 Bug 1999568 [wpt PR 55986] - [css-values] Reduce viewport units when scrollbars are unconditional, a=testonly Automatic update from web-platform-tests [css-values] Reduce viewport units when scrollbars are unconditional When the root element has unconditional scrollbars (i.e. overflow:scroll), we reduce the viewport units accordingly. All viewport units are affected. The modified units need to affect properties specified on the root element, so we resolve the properties that can affect scrollbars early. Note this change is not yet complete. The dynamic test fails, scrollbar gutters aren't respected yet, and a few other small things. Bug: 354751900 Change-Id: I51653d0491a32f86539e219a3e99a6eead3c7dc4 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7098882 Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: David Grogan <dgrogan@chromium.org> Cr-Commit-Position: refs/heads/main@{#1543410} -- wpt-commits: a42b9f0fb3146b092b3dc20eeb7bdab03cb69ce4 wpt-pr: 55986 Diffstat:
12 files changed, 249 insertions(+), 4 deletions(-)
diff --git a/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-compute.html b/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-compute.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<title>Resolving viewport units</title> +<link rel="help" href="https://drafts.csswg.org/css-values-4/#viewport-relative-lengths"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<style> + iframe { + width: 200px; + height: 100px; + } +</style> + +<iframe id=iframe></iframe> + +<script> + +const doc = iframe.contentDocument; +const win = iframe.contentWindow; + +function test_computed_value(value, expected) { + test((t) => { + t.add_cleanup(() => { doc.body.innerHTML = ''; }); + doc.body.innerHTML = ` + <!doctype html> + <style> + * { margin: 0; } + html { + overflow: scroll; + } + body { height: 100%; } + div { height: ${value}; } + </style> + <div></div> + `; + let div = doc.querySelector('div'); + assert_equals(win.getComputedStyle(div).height, expected); + }, `${value} computes to ${expected}`); +} + +test_computed_value('100vw', '185px'); +test_computed_value('100vi', '185px'); +test_computed_value('100vmax', '185px'); +test_computed_value('100svw', '185px'); +test_computed_value('100svi', '185px'); +test_computed_value('100svmax', '185px'); +test_computed_value('100lvw', '185px'); +test_computed_value('100lvi', '185px'); +test_computed_value('100lvmax', '185px'); +test_computed_value('100dvw', '185px'); +test_computed_value('100dvi', '185px'); +test_computed_value('100dvmax', '185px'); + +test_computed_value('100vh', '85px'); +test_computed_value('100vb', '85px'); +test_computed_value('100vmin', '85px'); +test_computed_value('100svh', '85px'); +test_computed_value('100svb', '85px'); +test_computed_value('100svmin', '85px'); +test_computed_value('100lvh', '85px'); +test_computed_value('100lvb', '85px'); +test_computed_value('100lvmin', '85px'); +test_computed_value('100dvh', '85px'); +test_computed_value('100dvb', '85px'); +test_computed_value('100dvmin', '85px'); + +test_computed_value('1dvw', '1.84375px'); +test_computed_value('10dvw', '18.5px'); +test_computed_value('1dvh', '0.84375px'); +test_computed_value('10dvh', '8.5px'); + +test_computed_value('calc(1dvw + 1dvw)', '3.6875px'); +test_computed_value('calc(1dvw + 1dvh)', '2.6875px'); +test_computed_value('calc(1dvw + 100px)', '101.844px'); +test_computed_value('max(1svw, 1svh)', '1.84375px'); +test_computed_value('min(1lvw, 1lvh)', '0.84375px'); +test_computed_value('calc(1dvw + 10%)', '10.3438px'); + +</script> diff --git a/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-custom-001-ref.html b/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-custom-001-ref.html @@ -0,0 +1,21 @@ +<!doctype html> +<html style="overflow-x: auto; overflow-y: scroll;"> +<style> + html::-webkit-scrollbar { + width: 300px; + } + + html::-webkit-scrollbar-thumb { + background-color: black; + } + + html::-webkit-scrollbar-track:vertical { + background-color: hotpink; + } +</style> + +<body style="margin: 0; padding: 0;"> + <div style="width: 800px; height: 100px; background: orange;"></div> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-custom-001.html b/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-custom-001.html @@ -0,0 +1,25 @@ +<!doctype html> +<html style="overflow-x: auto; overflow-y: scroll;"> +<link rel="help" + href="https://drafts.csswg.org/css-values-4/#:~:text=reserved%20for%20them)%20unconditionally"> +<link rel="match" + href="viewport-units-scrollbars-custom-001-ref.html"> +<meta name="assert" content="Viewport units do not respect custom scrollbars"> + +<style> + html::-webkit-scrollbar { + width: 300px; + } + html::-webkit-scrollbar-thumb { + background-color: black; + } + html::-webkit-scrollbar-track:vertical { + background-color: hotpink; + } +</style> + +<body style="margin: 0; padding: 0;"> + <div style="width: 100vw; height: 100px; background: orange;"></div> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-dynamic-001.html b/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-dynamic-001.html @@ -0,0 +1,18 @@ +<!doctype html> +<html> +<meta name="assert" content="There is no horizontal overflow when 100vw is reduced by scrollbar width when the scrollbars are unconditional."> +<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"> +<link rel="match" href="viewport-units-scrollbars-scroll-vw-001-ref.html"> +<body style="margin: 0; padding: 0;"> + <p> + Pass Condition: There is no horizontal overflow. + </p> + <div style="width: 100vw; height: 100px; background: orange;"></div> + +<script> + document.body.offsetTop; + document.documentElement.style.overflowY = 'scroll'; +</script> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-mq-001.html b/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-mq-001.html @@ -0,0 +1,34 @@ +<!doctype html> +<html style="overflow-y: scroll"> +<meta name="assert" content="width still equals 100vw after the unconditional root scrollbar changes the value of vw"> +<link rel="help" + href="https://drafts.csswg.org/css-values-4/#:~:text=and%20always%20in%20the%20case%20of%20media%20queries"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style> + +#square { + width: 100px; + background: green; +} + +@media (width = 100vw) { + #square { + height: 100px; + } +} + +</style> + +<p> + Pass condition: 100x100 green square below. +</p> + +<div id="square" data-expected-height="100"></div> + +<script> + checkLayout("#square"); +</script> diff --git a/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-root-properties-001.html b/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-root-properties-001.html @@ -0,0 +1,26 @@ +<!doctype html> +<html style="overflow-y: scroll"> +<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"> +<meta name="assert" content="viewport units specified on the root element have accounted for unconditional scrollbars"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<style> +:root { + padding-left: 10vw; +} +body { + margin: 0; + padding: 0; + background-color: lightyellow; +} +</style> + +<div id="measure">Measure to left</div> + +<script> + test(() => { + assert_less_than(measure.getBoundingClientRect().left, 80); + }, "vw has had the overflow-y scrollbar width removed"); +</script> diff --git a/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-scroll-vw-001-ref.html b/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-scroll-vw-001-ref.html @@ -2,8 +2,7 @@ <html style="overflow: scroll;"> <body style="margin: 0; padding: 0;"> <p> - Pass Condition: There is no horizontal overflow. Chrome 139 and earlier fail - because vw is calculated as if :root's vertical scrollbar doesn't exist. + Pass Condition: There is no horizontal overflow. </p> <div style="width: 100%; height: 100px; background: orange;"></div> </body> diff --git a/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-scroll-vw-001.html b/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-scroll-vw-001.html @@ -6,8 +6,7 @@ <link rel="match" href="viewport-units-scrollbars-scroll-vw-001-ref.html"> <body style="margin: 0; padding: 0;"> <p> - Pass Condition: There is no horizontal overflow. Chrome 139 and earlier fail - because vw is calculated as if :root's vertical scrollbar doesn't exist. + Pass Condition: There is no horizontal overflow. </p> <div style="width: 100vw; height: 100px; background: orange;"></div> </body> diff --git a/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-scroll-vw-002-ref.html b/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-scroll-vw-002-ref.html @@ -0,0 +1,9 @@ +<!doctype html> +<html style="overflow: scroll; scrollbar-width: thin;"> +<body style="margin: 0; padding: 0;"> + <p> + Pass Condition: There is no horizontal overflow. + </p> + <div style="width: 100%; height: 100px; background: orange;"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-scroll-vw-002.html b/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-scroll-vw-002.html @@ -0,0 +1,13 @@ +<!doctype html> +<html style="overflow: scroll; scrollbar-width: thin;"> +<title>CSS Values and Units Test: Viewport units and scrollbars</title> +<meta name="assert" content="There is no horizontal overflow when 100vw is reduced by scrollbar width when the scrollbars are unconditional, with scrollbar-width:thin"> +<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"> +<link rel="match" href="viewport-units-scrollbars-scroll-vw-002-ref.html"> +<body style="margin: 0; padding: 0;"> + <p> + Pass Condition: There is no horizontal overflow. + </p> + <div style="width: 100vw; height: 100px; background: orange;"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-scroll-vw-003-ref.html b/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-scroll-vw-003-ref.html @@ -0,0 +1,9 @@ +<!doctype html> +<html style="overflow: scroll; scrollbar-width: none;"> +<body style="margin: 0; padding: 0;"> + <p> + Pass Condition: There is no horizontal overflow. + </p> + <div style="width: 100%; height: 100px; background: orange;"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-scroll-vw-003.html b/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-scroll-vw-003.html @@ -0,0 +1,13 @@ +<!doctype html> +<html style="overflow: scroll; scrollbar-width: none;"> +<title>CSS Values and Units Test: Viewport units and scrollbars</title> +<meta name="assert" content="There is no horizontal overflow when 100vw is reduced by scrollbar width when the scrollbars are unconditional, with scrollbar-width:none"> +<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"> +<link rel="match" href="viewport-units-scrollbars-scroll-vw-003-ref.html"> +<body style="margin: 0; padding: 0;"> + <p> + Pass Condition: There is no horizontal overflow. + </p> + <div style="width: 100vw; height: 100px; background: orange;"></div> +</body> +</html>