Ian Kilpatrick
b76583147a
Automatic update from web-platform-tests [flex] Use LayoutUnitDiffuser in flex for content alignment. As above, this smears the remainer over the gaps between items. Bug: 40437604 Change-Id: Ia4ea11ec2f7a5342e1676bd2e0ca92f39b1fb547 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7163999 Reviewed-by: David Grogan <dgrogan@chromium.org> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#1546606} -- wpt-commits: 6a8e3d7026356d8c9239ed9d29b55c3a8ec63b73 wpt-pr: 56095
40 lines
877 B
HTML
40 lines
877 B
HTML
<!DOCTYPE html>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<link rel="help" href="https://crbug.com/40437604">
|
|
<style>
|
|
#flex {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 10px;
|
|
height: 40px;
|
|
align-content: space-between;
|
|
outline: solid 1px;
|
|
}
|
|
#flex > div {
|
|
width: 10px;
|
|
height: 5px;
|
|
background: lime;
|
|
}
|
|
</style>
|
|
<div id="flex">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div id="last"></div>
|
|
</div>
|
|
<script>
|
|
test(function() {
|
|
/* Increase the flexbox by 0.1px increments. */
|
|
for (let i = 0; i < 10; i++) {
|
|
const height = (40 + i/10) + 'px';
|
|
flex.style.height = height;
|
|
assert_equals(last.getBoundingClientRect().bottom, flex.getBoundingClientRect().bottom, height);
|
|
}
|
|
}, 'The last item should match the end edge.');
|
|
</script>
|