Free Debreuil
3d4bee7944
Automatic update from web-platform-tests Add single-axis scroll overflow alignment test Add WPT coverage for default overflow alignment in flex and grid containers when only one overflow axis is scrollable. Fixed: 517229575 Bug: 440038212 Change-Id: I92f4a260c1834df3e744844fdfdab1fc65286119 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7881718 Reviewed-by: Robert Flack <flackr@chromium.org> Commit-Queue: Robert Flack <flackr@chromium.org> Auto-Submit: Free Debreuil <freedebreuil@google.com> Cr-Commit-Position: refs/heads/main@{#1641792} -- wpt-commits: 507e587cfa76d5990bab00e48ae66e527da1a945 wpt-pr: 60402
83 lines
2.0 KiB
HTML
83 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Align: default overflow alignment respects single-axis scroll containers</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-align-3/#auto-safety-scroll">
|
|
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#overflow-properties">
|
|
<link rel="author" title="Free Debreuil" href="mailto:freedebreuil@google.com">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/resources/check-layout-th.js"></script>
|
|
|
|
<style>
|
|
.container {
|
|
justify-content: center;
|
|
align-content: center;
|
|
position: relative;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
.flex {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: 200px;
|
|
grid-template-rows: 200px;
|
|
}
|
|
.item {
|
|
flex: none;
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
.x-scroller {
|
|
overflow-x: hidden;
|
|
overflow-y: clip;
|
|
}
|
|
.y-scroller {
|
|
overflow-x: clip;
|
|
overflow-y: hidden;
|
|
}
|
|
</style>
|
|
|
|
<p>
|
|
For a flex or grid container, if an axis has a scrollable overflow value,
|
|
content distribution in that axis uses unsafe default overflow alignment.
|
|
This does not affect behavior, as the initial value for these cases is unsafe.
|
|
</p>
|
|
|
|
<div class="container flex x-scroller">
|
|
<div class="item"
|
|
data-offset-x="-50"
|
|
data-offset-y="-50"
|
|
data-expected-width="200"
|
|
data-expected-height="200"></div>
|
|
</div>
|
|
|
|
<div class="container flex y-scroller">
|
|
<div class="item"
|
|
data-offset-x="-50"
|
|
data-offset-y="-50"
|
|
data-expected-width="200"
|
|
data-expected-height="200"></div>
|
|
</div>
|
|
|
|
<div class="container grid x-scroller">
|
|
<div class="item"
|
|
data-offset-x="-50"
|
|
data-offset-y="-50"
|
|
data-expected-width="200"
|
|
data-expected-height="200"></div>
|
|
</div>
|
|
|
|
<div class="container grid y-scroller">
|
|
<div class="item"
|
|
data-offset-x="-50"
|
|
data-offset-y="-50"
|
|
data-expected-width="200"
|
|
data-expected-height="200"></div>
|
|
</div>
|
|
|
|
<script>
|
|
checkLayout('.item');
|
|
</script>
|