Skip to content

Commit aff56ea

Browse files
committed
fix: prevent gap double subtraction causing unintended text wrapping
1 parent 68ca65a commit aff56ea

3 files changed

Lines changed: 76 additions & 2 deletions

File tree

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
description:
3+
globs:
4+
alwaysApply: true
5+
---
6+
7+
<workflow>
8+
1. 始终以简洁的语言说明改动
9+
2. 代码要可读,函数/变量名要规范
10+
3. 所有的测试要有理论依据支持
11+
4. 所有注释都要英文
12+
5. 改动完之后,必须要跑测试
13+
6. 所有改动都要有理论依据,根据 W3C 或者 MDN 文档来
14+
7. 禁止脑补,要根据标准文档来
15+
8. 每次改完,都要跑一下 cargo clippy
16+
</workflow>

float-pigment-forest/tests/custom/css_flexbox/gap.rs

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -230,3 +230,59 @@ fn flex_item_with_gap_should_shrink_to_fit() {
230230
"#
231231
)
232232
}
233+
234+
// Case: flex-grow sum below 1 with gap
235+
// Spec points:
236+
// - When the sum of flex-grow is less than 1, only part of free space is distributed
237+
// - Gap must be accounted exactly once in free-space computation
238+
#[test]
239+
fn gap_with_flex_grow_sum_below_one_should_not_double_subtract_gap() {
240+
assert_xml!(
241+
r#"
242+
<div style="display: flex; width: 200px; gap: 20px;">
243+
<div style="width: 50px; height: 20px; flex-grow: 0.2;" expect_width="66" expect_left="0"></div>
244+
<div style="width: 50px; height: 20px; flex-grow: 0.2;" expect_width="66" expect_left="86"></div>
245+
</div>
246+
"#
247+
)
248+
}
249+
250+
// Case: flex-shrink sum below 1 with gap
251+
// Spec points:
252+
// - When the sum of flex-shrink is less than 1, shrink amount is scaled by the sum
253+
// - Gap must not be subtracted twice from remaining free space
254+
#[test]
255+
fn gap_with_flex_shrink_sum_below_one_should_not_double_subtract_gap() {
256+
assert_xml!(
257+
r#"
258+
<div style="display: flex; width: 200px; gap: 20px;">
259+
<div style="width: 150px; height: 20px; flex-shrink: 0.2;" expect_width="126" expect_left="0"></div>
260+
<div style="width: 150px; height: 20px; flex-shrink: 0.2;" expect_width="126" expect_left="146"></div>
261+
</div>
262+
"#
263+
)
264+
}
265+
266+
// Case: nested flex with inner gap and outer space-between
267+
// Spec points:
268+
// - Inner flex gap should only affect spacing between its own items
269+
// - Outer space-between should place left and right groups without forcing unexpected text wrapping
270+
#[test]
271+
fn nested_flex_gap_with_space_between_should_keep_text_unwrapped() {
272+
assert_xml!(
273+
r#"
274+
<div style="display: block; width: 300px; padding: 30px;">
275+
<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
276+
<div style="display: flex; flex-direction: row; align-items: center; gap: 30px;" expect_width="124" expect_left="0">
277+
<div style="height: 30px; width: 30px;" expect_width="30" expect_left="0"></div>
278+
<text-slot len="4" expect_width="64" expect_left="60" expect_height="16"></text-slot>
279+
</div>
280+
<div style="display: flex; flex-direction: row;" expect_left="236">
281+
<text-slot len="4" expect_width="64" expect_height="16"></text-slot>
282+
</div>
283+
</div>
284+
</div>
285+
"#,
286+
true
287+
)
288+
}

float-pigment-layout/src/algo/flex_box.rs

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -604,10 +604,12 @@ impl<T: LayoutTreeNode> FlexBox<T> for LayoutUnit<T> {
604604
(flex_grow + child.flex_grow, flex_shrink + child.flex_shrink)
605605
});
606606
let free_space = if growing && sum_flex_grow < 1.0 {
607-
(initial_free_space.mul_f32(sum_flex_grow) - total_main_axis_gap)
607+
initial_free_space
608+
.mul_f32(sum_flex_grow)
608609
.maybe_min(target_len - used_space)
609610
} else if shrinking && sum_flex_shrink < 1.0 {
610-
(initial_free_space.mul_f32(sum_flex_shrink) - total_main_axis_gap)
611+
initial_free_space
612+
.mul_f32(sum_flex_shrink)
611613
.maybe_max(target_len - used_space)
612614
} else {
613615
(target_len - used_space).or_zero()

0 commit comments

Comments
 (0)