@@ -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+ }
0 commit comments