David Grogan
215a792567
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
28 lines
1.3 KiB
HTML
28 lines
1.3 KiB
HTML
<!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>
|