Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-06-06 16:45:39 +00:00
Code Issues Projects Releases Packages Wiki Activity

layout: Fix caching of streching flex items in row flex (#34162)

Browse source 
When a flex item stretches in the cross axis in a row flex, the flex
container layout should depend on block constraints. In this case the
cross axis is the block axis (assuming horizontal writing modes --
vertical are not yet supported). This changes fixes an issue where the
cached layout was used in this case when stretching should trigger a new
layout.

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Martin Robinson 2024-11-08 17:59:23 +01:00 • committed by GitHub
parent e366d253dc
commit f4cc20f7ef
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 43 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

17
components/layout_2020/flexbox/layout.rs
View file

@ -1864,8 +1864,11 @@ impl FlexItem<'_> {
}),
};
let ifc = &mut self.box_.independent_formatting_context;
let item_writing_mode = ifc.style().writing_mode;
let item_writing_mode = self
.box_
.independent_formatting_context
.style()
.writing_mode;
let item_is_horizontal = item_writing_mode.is_horizontal();
let flex_axis = flex_context.config.flex_axis;
let cross_axis_is_item_block_axis = cross_axis_is_item_block_axis(
@ -1884,7 +1887,9 @@ impl FlexItem<'_> {
item_writing_mode,
AuOrAuto::LengthPercentage(used_main_size),
);
let content_contributions = ifc
let content_contributions = self
.box_
.independent_formatting_context
.inline_content_sizes(
flex_context.layout_context,
&containing_block_for_children,
@ -1914,7 +1919,7 @@ impl FlexItem<'_> {
};
let container_writing_mode = containing_block.style.writing_mode;
match ifc {
match &self.box_.independent_formatting_context {
IndependentFormattingContext::Replaced(replaced) => {
let size = replaced
.contents
@ -2016,6 +2021,8 @@ impl FlexItem<'_> {
&item_as_containing_block,
containing_block,
);
let depends_on_block_constraints = depends_on_block_constraints ||
(flex_axis == FlexAxis::Row && self.stretches());
let has_child_which_depends_on_block_constraints = fragments.iter().any(|fragment| {
fragment.base().map_or(false,|base|
@ -2026,7 +2033,7 @@ impl FlexItem<'_> {
let item_writing_mode_is_orthogonal_to_container_writing_mode =
flex_context.config.writing_mode.is_horizontal() !=
non_replaced.style.writing_mode.is_horizontal();
let has_compatible_baseline = match flex_context.config.flex_axis {
let has_compatible_baseline = match flex_axis {
FlexAxis::Row => !item_writing_mode_is_orthogonal_to_container_writing_mode,
FlexAxis::Column => item_writing_mode_is_orthogonal_to_container_writing_mode,
};

13
tests/wpt/meta/MANIFEST.json vendored
View file

@ -177861,6 +177861,19 @@
{}
]
],
"stretched-child-in-nested-flexbox.html": [
"325d79e7c63f3e301c21f53f8bc97b48ae15c6b5",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"stretching-orthogonal-flows.html": [
"acaa787faf657b76a5b213fb9203088d5d28f4c4",
[

18
tests/wpt/tests/css/css-flexbox/stretched-child-in-nested-flexbox.html vendored Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" />
<title>css-flexbox: Tests nested flex item with `align-items: stretch`</title>
<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#align-items-property">
<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="This checks that a stretched flex item in a nested flexbox streches to the size of the parent flex container's line.">
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="display: flex;">
<div style="width: 50px; height: 100px; background: green;"></div>
<div style="display: flex;">
<div style="background: green; width: 50px;"></div>
</div>
</div>
</body>
</html>