Properly handle subpixel units when dividing space between flex lines (#32913)

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Martin Robinson 2024-08-13 17:11:01 +02:00 committed by GitHub
parent 5d6840873a
commit 8582678e4b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 247 additions and 182 deletions

View file

@ -12462,6 +12462,13 @@
{}
]
],
"flex_align_content_stretch_subpixel.html": [
"0a08f2540b6cc736d274c7f0b48f2f6123dd1862",
[
null,
{}
]
],
"float-abspos.html": [
"f691c1756f0dd5b6744952e1516950bacaaf4d33",
[

View file

@ -0,0 +1,2 @@
[flex_align_content_stretch_subpixel.html]
prefs: ["layout.flexbox.enabled:true"]

View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>Flex: align-content:stretch with subpixel amounts</title>
<style>
#flex {
display: flex;
flex-wrap: wrap;
align-content: stretch;
height: 5px;
border: solid;
}
#flex > div {
width: 100%;
outline: 1px solid lime;
}
</style>
<div id="flex"></div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
/* The flex container is 5px tall. Assuming that 1px are 60 app units,
that's 300 app units. Since we have 600 lines, half of them should
get 1 app unit, and the others should get 0. This way we ensure that
the container gets filled completely. */
let flex = document.getElementById("flex");
let item = document.createElement("div");
for (let i = 0; i < 600; ++i) {
flex.appendChild(item.cloneNode());
}
test(() => {
let filled_space = flex.lastElementChild.getBoundingClientRect().bottom
- flex.firstElementChild.getBoundingClientRect().top;
assert_approx_equals(filled_space, 5, 0.01);
}, "Flex items fill the container entirely");
</script>